UX Components Deconstructed

UX components deconstructed

James@chudders Shameless plugJesmond@jesmond

Homepage UX

Example user tasks on Typical business goalshomepages for homepages• What is this site for? • Promote certain (all) products and services• Let me get on with my primary task • Make a great first impression/ USP• Reflect what I’ve done here before • Commercial motivations - advertising

Top tips for homepages

1. Homepages are lessimportant thaneveryone thinks Home Category ArticleHow many of you start designing thehomepage first?How many of you see homepagesregularly on the web? Article Category Home Homepages receive a disproportionate amount of attention on web projects. Don’t let this detract from your key content pages.

2. Consider everyhomepage state Home (Logged out)Logged in vs Logged out is an obvious onebut what about a newspaper site that Home (Logged in)needs to flex to support breaking news? Home - Breaking news When you quote for your design deliverables consider whether there will be different states for each wireframe. This is often overlooked and kills profitability in web projects : ( Home - Disaster

3. Avoid ‘homepagebloat’ due to politicsOften business stakeholders all want apiece of the homepage, particularly onIntranets. Use user requirements to focus the content, features and functionality that that is shown on the homepage.

Any more top tips for homepages?

Category and product listing page UX

Example user tasks on Typical business goalscategory pages for category pagesWhere have your users been and where are • Show abundance and range ofthey hoping to go? Answer their questions products or servicesand support their tasks and you will helpthem move on. • Show off their expertise in the field• Understand whether the organisation provides the products or services they • Explain their offering to customers require• Filter or sort products in order to narrow choices and make a selection from a range• Understand the differences between products or services in order to make a selection

Top tips for category pages

1. Task models areinvaluableIf you understand your users’ decision-making process, you can provide exactlythe right information for them at thispoint in their journey.Generate a task model via user research. Sorting ladies shoes by physical dimensions is about as useful as sorting a sea of black and silver televisions by colour.

Size is Fit isimportant to important tousers when users whenselecting a selecting ashirt. shirt. Easy-to- misinterpret shirt fits are illustrated to educate users Colour or pattern is important too, but www.ctshirts.co.uk secondary to fit

2. Prevent ‘pogoing’If you provide the wrong level ofinformation on a category or product Trying to sell electrical goods? Price and specification are important here. Televisions, forlisting page, your users will have to ‘pogo’ example, look alike, but are differentiated by theback and forth between product pages and description, the price, and other attributes likelistings pages. screen size. Ladies shoes? The picture is of primaryThink about the key information required importance—your user will know if she likes themto make a decision and ensure it is from the photo and will then consider size, price, and other variables.provided here.

Some users like to ‘view all’, others like paginationFiltering by sizepreventsdisappointmenton the productpageProviding a close-up of the fabric onrollover helpsusers make adecision withoutleaving the listingpage www.ctshirts.co.uk

Swatches providecolour choice Odd numbers ofinformation products in a linewithout ‘pogoing’ may be easier to scan www.boden.co.uk

Any more top tips for category pages?

Product page UX

Example user tasks on Typical business goalsproduct pages for product pages• Is it the one I want? • Sell associated products or try and sell more expensive alternatives• Is it in stock? How much is delivery? Have they got it in my size? • Use reviews to encourage more sales.• What happens if I buy it and it’s not what • Make it easy to buy! I want?

Top tips for product pages

1. Plan for the mostcomplicated productsYour client will be likely to havethousands of products. Some will bereally complicated. Identify the different product types upfront. Make sure you quote for all the variants!

2. List all of thecustomer’s questionsand answer themUnanswered questions are one of themain reasons that people don’t buyonline. From http://www.cxpartners.co.uk/cxblog/ Use common sense, task models, user research what_makes_a_great_user_experience/ and your own experience to determine the questions that users will want answered on this page.

3. Think about yourphotosPhotos will have a huge influence uponpeople and their behaviour. We should bedoing more to influence which photos are Asos.co.ukused in our designs.Please check out www.photoux.co.uk formore on this topic. Focus on photos in your user research. Get involved with photo selection and review selected photos in final design work. ebay.co.uk

Ford.co.uk

Any more top tips for product pages?

Shopping basket UX

Example shopping Typical business goalsbasket user tasks for shopping baskets• Make final purchase decisions • Reduce basket abandonment rates• Understand how much they will pay for • Increase average basket value: the products or services they are buying encourage users to spend as much as possible• Understand and feel comfortable with any additional charges, such as delivery • Encourage choice of the most business- costs, taxes, or gift-wrapping friendly delivery options• Trust that their payment details will be • Inspire return visits in safe hands • Reduce customer services contacts (such as phone sales or queries and complaints)

Top tips for shopping basket andcheckout pages

1. Be trustworthyIf your users trust your product, they willhappily enter confidential information such Trust is earned in many ways, but here are some pointers:as payment and contact details. If not, theywon’t. Be bug-free. A slow or error-prone product implies a careless attitude. Provide real-world contact information. We’ve seen lots of people look for this in user tests. “I’m looking for a phone Provide clear pricing, both for products and any additional costs such as extras, taxes, and delivery. number—it proves they No one likes to be surprised by the final bill. really exist.” User test participant Use simple copy with no jargon or legalese. Users particularly hate feeling as if they are being tricked into signing up for things they don’t want.

Real-world contact informationClear pricing www.ctshirts.co.uk Clear pricing www.runfree.co.uk

2. Shopping baskets are used as shortlistsMany users browse and add all the itemsthey are considering, then compare them Provide product images, details of any chosen size or customisation, and links back to productand make a final decision within the information.basket. If possible, do not force the shopping basket to expire—a user may come back later and decide onDesign the basket to support this a purchase. Consider allowing users to save theirbehaviour. shopping baskets, for example to a formal shortlist.

www.ctshirts.co.uk Link to product info ChosenProduct image size

Ability to www.asos.comsave Site automaticallybasket to retains basketshortlist

3. Don’t instil security fearsMost users know that they should careabout online payment security, but many Try to “own” the security messaging for your site:will know very little about how the Don’t leave all the work to a trust mark such astechnology works. VeriSign. Provide security messaging that is subtle andReminding users of potential security trustworthy.issues with large trust mark logos and There’s no need to shout too loud, as long as theliberal use of the word “secure” may have relevant cues are there - HTTPS and browserthe opposite of the desired effect. They padlocks, a familiar URL, and an otherwisesuddenly think “oh! I need to worry about trustworthy site.security!” but they don’t know enoughabout the subject to be reassured.

HTTPS andbrowser Familiar URLpadlock Trust marks www.boden.co.uk

Trust mark logovisually linked withthe site’s own www.ctshirts.co.uksecurity messaging

4. Don’t assume context of useUsers browse and purchase across all typesof Internet-connected devices. Design to support these behaviours. Think about: The display of your website across a range ofIt may be an edge case that a user wants to devices. When possible, provide full functionality for mobile devices.purchase a large-ticket item on theirmobile, but it’s not impossible. How often have you been frustrated with the mobile version of a website and scrolled down to the bottom of the page in the hopes of finding a link to the fullMulti-channel user journeys are increasing site?in prevalence. Customers may: Functionality such as user accounts, shortlists, and• browse products on their phones on their sharing options to allow users to travel seamlessly commute from one device to the next.• view options with their spouse on their tablet• make a purchase from their desktop at work

Any more top tips for shopping basket pages?

Any questions or comments?

There’s more in the book!Intro UX Design UX Components DeconstructedUnderstanding UCD process Ideation workshops NavigationPlanning UX projects Task models Homepages Customer experience maps Category pages Personas Search resultsUX Research Information Architecture Product pages Sketching Shopping cart / checkoutStakeholder Interviews Wireframing Article & content pagesRequirements workshops Prototyping Photo UXUsability testing Help & FAQCompetitor benchmarking FormsContextual research Tables, charts & dataAnalytics Client UXSurveys Designing for behavioural changeExpert reviews Designing for mobile Designing for internationalisation

Resources• Privacy salience article: “Facebook should compete on privacy, not hide it away” by Bruce Schneier in The Guardian (2009) www.guardian.co.uk/technology/2009/jul/15/privacy-internet-facebook (2009)• Form design guidelines crib sheet from Joe Leech at cxpartners www.cxpartners.co.uk/cxblog/form_design_guidelines_crib_sheet_free• E-commerce trustmarks: do they matter, from Econsultancy www.econsultancy.com/uk/blog/5303-e-commerce-trustmarks-do-they-matter• The $300 Million Button by Jared M. Spool at User Interface Engineering www.uie.com/articles/three_hund_million_button• Art Composition Rules: Rule of Odds from About.com http://painting.about.com/od/composition/ss/art-composition-rules_2.htm• Homepage Usability : 50 Websites Deconstructed by Jakob Nielsen and Marie Tahir• Information Architecture for the World Wide Web (2nd Edition) by Louis Rosenfeld and Peter Morville• “100 Things Every Designer Needs to Know About People’ by Susan Weinschenk• ‘Submit Now’ by Andrew Chak

Thank youJames Chudley@chuddersjames.chudley@cxpartners.co.ukJesmond Allen@jesmondjesmond.allen@cxpartners.co.uk

http://blog.oxfordcc.co.uk	2216
http://www.scoop.it	96
https://twitter.com	42
http://ranksit.com	3
http://thisninja	2
http://twitter.com	1
https://si0.twimg.com	1
http://translate.googleusercontent.com	1
http://www.mindgum.co	1

UX Components Deconstructed

by cxpartners on Sep 07, 2012

Accessibility

Categories

Upload Details

Usage Rights

9 Embeds 2,363

Statistics

UX Components Deconstructed Presentation Transcript