UX components deconstructed

James@chudders

Jesmond@jesmond

Shameless plug

Homepage UX

Example user tasks on homepages

• What is this site for?

• Let me get on with my primary task

• Reflect what I’ve done here before

Typical business goals for homepages

• Promote certain (all) products and services

• Make a great first impression/ USP

• Commercial motivations - advertising

Top tips for homepages

1. Homepages are less important than everyone thinks

How many of you start designing the homepage first?

How many of you see homepages regularly on the web?

Homepages receive a disproportionate amount of attention on web projects. Don’t let this detract from your key content pages.

Home Category Article

Article Category Home

2. Consider every homepage state

Logged in vs Logged out is an obvious one but what about a newspaper site that needs to flex to support 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 (Logged out)

Home (Logged in)

Home - Breaking news

Home - Disaster

3. Avoid ‘homepage bloat’ due to politics

Often business stakeholders all want a piece of the homepage, particularly on Intranets.

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 category pages

Where have your users been and where are they hoping to go? Answer their questions and support their tasks and you will help them move on.

• Understand whether the organisation provides the products or services they 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

Typical business goals for category pages

• Show abundance and range of products or services

• Show off their expertise in the field

• Explain their offering to customers

Top tips for category pages

1. Task models are invaluable

If you understand your users’ decision-making process, you can provide exactly the right information for them at this point 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.

www.ctshirts.co.uk

Fit is important to users when selecting a shirt.

Colour or pattern is important too, but secondary to fit

Easy-to-misinterpret shirt fits are illustrated to educate users

Size is important to users when selecting a shirt.

2. Prevent ‘pogoing’

If you provide the wrong level of information on a category or product listing page, your users will have to ‘pogo’ back and forth between product pages and listings pages.

Think about the key information required to make a decision and ensure it is provided here.

Trying to sell electrical goods? Price and specification are important here. Televisions, for example, look alike, but are differentiated by the description, the price, and other attributes like screen size.

Ladies shoes? The picture is of primary importance—your user will know if she likes them from the photo and will then consider size, price, and other variables.

www.ctshirts.co.uk

Some users like to ‘view all’, others like pagination

Providing a close-up of the fabric on rollover helps users make a decision without leaving the listing page

Filtering by size prevents disappointment on the product page

www.boden.co.uk

Odd numbers of products in a line may be easier to scan

Swatches provide colour choice information without ‘pogoing’

Any more top tips for category

pages?

Product page UX

Example user tasks on product pages

• Is it the one I want?

• Is it in stock? How much is delivery? Have they got it in my size?

• What happens if I buy it and it’s not what I want?

Typical business goals for product pages

• Sell associated products or try and sell more expensive alternatives

• Use reviews to encourage more sales.

• Make it easy to buy!

Top tips for product pages

1. Plan for the most complicated products

Your client will be likely to have thousands of products. Some will be really complicated.

Identify the different product types upfront. Make sure you quote for all the variants!

2. List all of the customer’s questions and answer them

Unanswered questions are one of the main reasons that people don’t buy online.

Use common sense, task models, user research and your own experience to determine the questions that users will want answered on this page.

From http://www.cxpartners.co.uk/cxblog/what_makes_a_great_user_experience/

3. Think about your photos

Photos will have a huge influence upon people and their behaviour. We should be doing more to influence which photos are used in our designs.

Please check out www.photoux.co.uk for more on this topic.

Focus on photos in your user research. Get involved with photo selection and review selected photos in final design work.

Asos.co.uk

ebay.co.uk

Ford.co.uk

Any more top tips for product

pages?

Shopping basket UX

Example shopping basket user tasks

• Make final purchase decisions

• Understand how much they will pay for the products or services they are buying

• Understand and feel comfortable with any additional charges, such as delivery costs, taxes, or gift-wrapping

• Trust that their payment details will be in safe hands

Typical business goals for shopping baskets

• Reduce basket abandonment rates

• Increase average basket value: encourage users to spend as much as possible

• Encourage choice of the most business-friendly delivery options

• Inspire return visits

• Reduce customer services contacts (such as phone sales or queries and complaints)

Top tips for shopping basket and checkout pages

1. Be trustworthy

If your users trust your product, they will happily enter confidential information such as payment and contact details. If not, they won’t.

Trust is earned in many ways, but here are some pointers:

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.

Provide clear pricing, both for products and any additional costs such as extras, taxes, and delivery. No one likes to be surprised by the final bill.

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.

“I’m looking for a phone number—it proves they really exist.”User test participant

Real-world contact information

Clear pricing

www.ctshirts.co.uk

www.runfree.co.uk

Clear pricing

2. Shopping baskets are used as shortlists

Many users browse and add all the items they are considering, then compare them and make a final decision within the basket.

Design the basket to support this behaviour.

Provide product images, details of any chosen size or customisation, and links back to product information.

If possible, do not force the shopping basket to expire—a user may come back later and decide on a purchase. Consider allowing users to save their shopping baskets, for example to a formal shortlist.

Product image

Link to product info

Chosen size

www.ctshirts.co.uk

Site automatically retains basket

Ability to save basket to shortlist

www.asos.com

3. Don’t instil security fears

Most users know that they should care about online payment security, but many will know very little about how the technology works.

Reminding users of potential security issues with large trust mark logos and liberal use of the word “secure” may have the opposite of the desired effect. They suddenly think “oh! I need to worry about security!” but they don’t know enough about the subject to be reassured.

Try to “own” the security messaging for your site:

Don’t leave all the work to a trust mark such as VeriSign.

Provide security messaging that is subtle and trustworthy.

There’s no need to shout too loud, as long as the relevant cues are there - HTTPS and browser padlocks, a familiar URL, and an otherwise trustworthy site.

HTTPS and browser padlock

www.boden.co.uk

Familiar URL

Trust marks

Trust mark logo visually linked with the site’s own security messaging

www.ctshirts.co.uk

4. Don’t assume context of use

Users browse and purchase across all types of Internet-connected devices.

It may be an edge case that a user wants to purchase a large-ticket item on their mobile, but it’s not impossible.

Multi-channel user journeys are increasing in prevalence. Customers may:• browse products on their phones on their

commute• view options with their spouse on their tablet• make a purchase from their desktop at work

Design to support these behaviours. Think about:

The display of your website across a range of devices. When possible, provide full functionality for mobile devices.

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 full site?

Functionality such as user accounts, shortlists, and sharing options to allow users to travel seamlessly from one device to the next.

Any more top tips for shopping

basket pages?

Any questions or comments?

There’s more in the book!

UX Components Deconstructed

NavigationHomepagesCategory pagesSearch resultsProduct pagesShopping cart / checkoutArticle & content pagesPhoto UXHelp & FAQFormsTables, charts & dataClient UXDesigning for behavioural changeDesigning for mobileDesigning for internationalisation

Intro

Understanding UCD processPlanning UX projects

UX Research

Stakeholder InterviewsRequirements workshopsUsability testingCompetitor benchmarkingContextual researchAnalyticsSurveysExpert reviews

UX Design

Ideation workshopsTask modelsCustomer experience mapsPersonasInformation ArchitectureSketchingWireframingPrototyping

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 cxpartnerswww.cxpartners.co.uk/cxblog/form_design_guidelines_crib_sheet_free

• E-commerce trustmarks: do they matter, from Econsultancywww.econsultancy.com/uk/blog/5303-e-commerce-trustmarks-do-they-matter

• The $300 Million Button by Jared M. Spool at User Interface Engineeringwww.uie.com/articles/three_hund_million_button

• Art Composition Rules: Rule of Odds from About.comhttp://painting.about.com/od/composi- tion/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 you

James Chudley

james.chudley@cxpartners.co.uk

@chudders

Jesmond Allen

jesmond.allen@cxpartners.co.uk

@jesmond