Talk given by James Chudley (@chudders) and Jesmond Allen (@jesmond) at UX Oxford on 6th Sept 2012 and at Cambridge Usability Group 31 Jan 2013.
In this talk, James and Jesmond share their top tips and tricks for designing the best user experiences for classic UX deliverables such as home pages, product pages, search results and checkout processes. The talk shares best practice, cheat sheets and typical user and business requirements to bear in mind when designing these deliverables.
James and Jesmond are co-authors of 'Smashing UX Design: foundations for designing online user experiences' (Wiley, 2012, http://amzn.to/NYjLoA)
4. Example user tasks on Typical business goals
homepages 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
6. 1. Homepages are less
important than
everyone thinks
Home Category Article
How many of you start designing the
homepage first?
How many of you see homepages
regularly 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.
7. 2. Consider every
homepage state Home (Logged out)
Logged in vs Logged out is an obvious one
but 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
8. 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.
11. Example user tasks on Typical business goals
category pages for category pages
Where have your users been and where are • Show abundance and range of
they hoping to go? Answer their questions products or services
and support their tasks and you will help
them 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
13. 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.
14. Size is Fit is
important to important to
users when users when
selecting a selecting a
shirt. 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
15. 2. Prevent ‘pogoing’
If you provide the wrong level of
information on a category or product Trying to sell electrical goods? Price and
specification are important here. Televisions, for
listing page, your users will have to ‘pogo’ example, look alike, but are differentiated by the
back and forth between product pages and description, the price, and other attributes like
listings pages. screen size.
Ladies shoes? The picture is of primary
Think about the key information required importance—your user will know if she likes them
to make a decision and ensure it is from the photo and will then consider size, price,
and other variables.
provided here.
16. Some users
like to ‘view
all’, others like
pagination
Filtering by size
prevents
disappointment
on the product
page
Providing a close-
up of the fabric on
rollover helps
users make a
decision without
leaving the listing
page
www.ctshirts.co.uk
17. Swatches provide
colour choice Odd numbers of
information products in a line
without ‘pogoing’ may be easier to
scan
www.boden.co.uk
20. Example user tasks on Typical business goals
product 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?
22. 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!
23. 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.
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.
24. 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 Asos.co.uk
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.
ebay.co.uk
28. Example shopping Typical business goals
basket 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)
30. 1. Be trustworthy
If your users trust your product, they will
happily enter confidential information such Trust is earned in many ways, but here are some
pointers:
as payment and contact details. If not, they
won’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.
31. Real-world contact
information
Clear pricing
www.ctshirts.co.uk
Clear pricing
www.runfree.co.uk
32. 2. Shopping baskets are used as shortlists
Many users browse and add all the items
they are considering, then compare them Provide product images, details of any chosen
size or customisation, and links back to product
and 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 on
Design the basket to support this a purchase. Consider allowing users to save their
behaviour. shopping baskets, for example to a formal
shortlist.
34. Ability to www.asos.com
save Site automatically
basket to retains basket
shortlist
35. 3. Don’t instil security fears
Most users know that they should care
about 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 as
technology works. VeriSign.
Provide security messaging that is subtle and
Reminding users of potential security trustworthy.
issues with large trust mark logos and
There’s no need to shout too loud, as long as the
liberal use of the word “secure” may have relevant cues are there - HTTPS and browser
the opposite of the desired effect. They padlocks, a familiar URL, and an otherwise
suddenly think “oh! I need to worry about trustworthy site.
security!” but they don’t know enough
about the subject to be reassured.
38. 4. Don’t assume context of use
Users browse and purchase across all types
of Internet-connected devices. Design to support these behaviours. Think about:
The display of your website across a range of
It 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 their
mobile, 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 full
Multi-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
41. There’s more in the book!
Intro UX Design UX Components Deconstructed
Understanding UCD process Ideation workshops Navigation
Planning UX projects Task models Homepages
Customer experience maps Category pages
Personas Search results
UX Research Information Architecture Product pages
Sketching Shopping cart / checkout
Stakeholder Interviews Wireframing Article & content pages
Requirements workshops Prototyping Photo UX
Usability testing Help & FAQ
Competitor benchmarking Forms
Contextual research Tables, charts & data
Analytics Client UX
Surveys Designing for behavioural change
Expert reviews Designing for mobile
Designing for internationalisation
42. 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/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