SlideShare a Scribd company logo
1 of 43
Download to read offline
UX components deconstructed
James
@chudders

            Shameless
              plug
Jesmond
@jesmond
Homepage UX
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
Top tips for homepages
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.
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
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                          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
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.
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
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.
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
Swatches provide
colour choice            Odd numbers of
information              products in a line
without ‘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 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?
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.




                                                    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 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
Ford.co.uk
Any more top tips
  for product
     pages?
Shopping basket UX
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)
Top tips for shopping basket and
checkout pages
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.
Real-world contact
   information




Clear pricing

                        www.ctshirts.co.uk




                                      Clear pricing




                        www.runfree.co.uk
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.
www.ctshirts.co.uk
                Link to
                product
                info




                            Chosen
Product image
                            size
Ability to                        www.asos.com
save         Site automatically
basket to    retains basket
shortlist
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.
HTTPS and
browser     Familiar URL
padlock




                           Trust marks



                                         www.boden.co.uk
Trust mark logo
visually linked with
the site’s own         www.ctshirts.co.uk
security messaging
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
Any more top tips
  for shopping
 basket pages?
Any questions or
  comments?
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
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
Thank you

James Chudley

@chudders

james.chudley@cxpartners.co.uk




Jesmond Allen

@jesmond

jesmond.allen@cxpartners.co.uk

More Related Content

Viewers also liked

Digital Marketing Trends 2017
Digital Marketing Trends 2017 Digital Marketing Trends 2017
Digital Marketing Trends 2017 World of Digits
 
FREE Template "Marketing Plan" PowerPoint
FREE Template "Marketing Plan" PowerPointFREE Template "Marketing Plan" PowerPoint
FREE Template "Marketing Plan" PowerPointAnastasia Myasoedova
 
Customer acquisition strategy for 2017
Customer acquisition strategy for 2017Customer acquisition strategy for 2017
Customer acquisition strategy for 2017Sherif Makhlouf
 
Elements of UX Design
Elements of UX DesignElements of UX Design
Elements of UX DesignMemi Beltrame
 
2017 Marketing Plan Template for Modern Marketers
2017 Marketing Plan Template for Modern Marketers2017 Marketing Plan Template for Modern Marketers
2017 Marketing Plan Template for Modern MarketersAugentia LLC
 
2017 Social Media & Content Marketing Predictions from 70 Marketing Leaders
2017 Social Media & Content Marketing Predictions from 70 Marketing Leaders 2017 Social Media & Content Marketing Predictions from 70 Marketing Leaders
2017 Social Media & Content Marketing Predictions from 70 Marketing Leaders Bryan Kramer
 
Designing with Lean UX : Rapid Product Design [UX Lisbon 2014]
Designing with Lean UX : Rapid Product Design [UX Lisbon 2014]Designing with Lean UX : Rapid Product Design [UX Lisbon 2014]
Designing with Lean UX : Rapid Product Design [UX Lisbon 2014]Kate Rutter
 
L004 E-Commerce (2016)
L004 E-Commerce (2016)L004 E-Commerce (2016)
L004 E-Commerce (2016)Jan Wong
 

Viewers also liked (12)

Digital Marketing Trends 2017
Digital Marketing Trends 2017 Digital Marketing Trends 2017
Digital Marketing Trends 2017
 
FREE Template "Marketing Plan" PowerPoint
FREE Template "Marketing Plan" PowerPointFREE Template "Marketing Plan" PowerPoint
FREE Template "Marketing Plan" PowerPoint
 
Customer acquisition strategy for 2017
Customer acquisition strategy for 2017Customer acquisition strategy for 2017
Customer acquisition strategy for 2017
 
Ux design process
Ux design processUx design process
Ux design process
 
Elements of UX Design
Elements of UX DesignElements of UX Design
Elements of UX Design
 
2017 Marketing Plan Template for Modern Marketers
2017 Marketing Plan Template for Modern Marketers2017 Marketing Plan Template for Modern Marketers
2017 Marketing Plan Template for Modern Marketers
 
2017 Social Media & Content Marketing Predictions from 70 Marketing Leaders
2017 Social Media & Content Marketing Predictions from 70 Marketing Leaders 2017 Social Media & Content Marketing Predictions from 70 Marketing Leaders
2017 Social Media & Content Marketing Predictions from 70 Marketing Leaders
 
Designing with Lean UX : Rapid Product Design [UX Lisbon 2014]
Designing with Lean UX : Rapid Product Design [UX Lisbon 2014]Designing with Lean UX : Rapid Product Design [UX Lisbon 2014]
Designing with Lean UX : Rapid Product Design [UX Lisbon 2014]
 
Key Digital Trends for 2017
Key Digital Trends for 2017Key Digital Trends for 2017
Key Digital Trends for 2017
 
Top-Task Analysis - Workshop Slides - Gerry McGovern
Top-Task Analysis - Workshop Slides - Gerry McGovernTop-Task Analysis - Workshop Slides - Gerry McGovern
Top-Task Analysis - Workshop Slides - Gerry McGovern
 
L004 E-Commerce (2016)
L004 E-Commerce (2016)L004 E-Commerce (2016)
L004 E-Commerce (2016)
 
Crafting Experience
Crafting ExperienceCrafting Experience
Crafting Experience
 

More from cxpartners

Chi briding the relevance gap
Chi briding the relevance gapChi briding the relevance gap
Chi briding the relevance gapcxpartners
 
Putting people at the centre of design at the samaritans
Putting people at the centre of design at the samaritansPutting people at the centre of design at the samaritans
Putting people at the centre of design at the samaritanscxpartners
 
cxpartners customer centricity
cxpartners customer centricitycxpartners customer centricity
cxpartners customer centricitycxpartners
 
Designing Without Compromise
Designing Without CompromiseDesigning Without Compromise
Designing Without Compromisecxpartners
 
Practical Steps in Determining Your Product Vision (Product Tank Bristol - Oc...
Practical Steps in Determining Your Product Vision (Product Tank Bristol - Oc...Practical Steps in Determining Your Product Vision (Product Tank Bristol - Oc...
Practical Steps in Determining Your Product Vision (Product Tank Bristol - Oc...cxpartners
 
How to do the work you want to do - AKA neglect selling skills at your peril!...
How to do the work you want to do - AKA neglect selling skills at your peril!...How to do the work you want to do - AKA neglect selling skills at your peril!...
How to do the work you want to do - AKA neglect selling skills at your peril!...cxpartners
 
Customer Driven Digital Transformation
Customer Driven Digital Transformation Customer Driven Digital Transformation
Customer Driven Digital Transformation cxpartners
 
UX vs Artificial Intelligence
UX vs Artificial IntelligenceUX vs Artificial Intelligence
UX vs Artificial Intelligencecxpartners
 
Research analysis: getting more from your data
Research analysis: getting more from your dataResearch analysis: getting more from your data
Research analysis: getting more from your datacxpartners
 
Transforming Care in Bristol
Transforming Care in BristolTransforming Care in Bristol
Transforming Care in Bristolcxpartners
 
Interaction designers vs algorithms
Interaction designers vs algorithmsInteraction designers vs algorithms
Interaction designers vs algorithmscxpartners
 
Beyond the touch screen - better accessibility for mobile apps
Beyond the touch screen - better accessibility for mobile appsBeyond the touch screen - better accessibility for mobile apps
Beyond the touch screen - better accessibility for mobile appscxpartners
 
Co design (NUX4)
Co design (NUX4)Co design (NUX4)
Co design (NUX4)cxpartners
 
How to ask a question
How to ask a questionHow to ask a question
How to ask a questioncxpartners
 
Photo ux nux 061014
Photo ux nux 061014Photo ux nux 061014
Photo ux nux 061014cxpartners
 
Photo content strategy (James Chudley, cxpartners)
Photo content strategy (James Chudley, cxpartners)Photo content strategy (James Chudley, cxpartners)
Photo content strategy (James Chudley, cxpartners)cxpartners
 
Psychology and the Perfect Design by @mrjoe
Psychology and the Perfect Design by @mrjoePsychology and the Perfect Design by @mrjoe
Psychology and the Perfect Design by @mrjoecxpartners
 
How Rapid Feedback improves the design process (Luke Jones, cxpartners)
How Rapid Feedback improves the design process (Luke Jones, cxpartners)How Rapid Feedback improves the design process (Luke Jones, cxpartners)
How Rapid Feedback improves the design process (Luke Jones, cxpartners)cxpartners
 
How to build a failsafe mobile usability testing set up
How to build a failsafe mobile usability testing set upHow to build a failsafe mobile usability testing set up
How to build a failsafe mobile usability testing set upcxpartners
 

More from cxpartners (20)

Chi briding the relevance gap
Chi briding the relevance gapChi briding the relevance gap
Chi briding the relevance gap
 
Putting people at the centre of design at the samaritans
Putting people at the centre of design at the samaritansPutting people at the centre of design at the samaritans
Putting people at the centre of design at the samaritans
 
cxpartners customer centricity
cxpartners customer centricitycxpartners customer centricity
cxpartners customer centricity
 
Designing Without Compromise
Designing Without CompromiseDesigning Without Compromise
Designing Without Compromise
 
Practical Steps in Determining Your Product Vision (Product Tank Bristol - Oc...
Practical Steps in Determining Your Product Vision (Product Tank Bristol - Oc...Practical Steps in Determining Your Product Vision (Product Tank Bristol - Oc...
Practical Steps in Determining Your Product Vision (Product Tank Bristol - Oc...
 
How to do the work you want to do - AKA neglect selling skills at your peril!...
How to do the work you want to do - AKA neglect selling skills at your peril!...How to do the work you want to do - AKA neglect selling skills at your peril!...
How to do the work you want to do - AKA neglect selling skills at your peril!...
 
Customer Driven Digital Transformation
Customer Driven Digital Transformation Customer Driven Digital Transformation
Customer Driven Digital Transformation
 
UX vs Artificial Intelligence
UX vs Artificial IntelligenceUX vs Artificial Intelligence
UX vs Artificial Intelligence
 
Research analysis: getting more from your data
Research analysis: getting more from your dataResearch analysis: getting more from your data
Research analysis: getting more from your data
 
Transforming Care in Bristol
Transforming Care in BristolTransforming Care in Bristol
Transforming Care in Bristol
 
Interaction designers vs algorithms
Interaction designers vs algorithmsInteraction designers vs algorithms
Interaction designers vs algorithms
 
Beyond the touch screen - better accessibility for mobile apps
Beyond the touch screen - better accessibility for mobile appsBeyond the touch screen - better accessibility for mobile apps
Beyond the touch screen - better accessibility for mobile apps
 
Co design (NUX4)
Co design (NUX4)Co design (NUX4)
Co design (NUX4)
 
How to ask a question
How to ask a questionHow to ask a question
How to ask a question
 
UX Leadership
UX LeadershipUX Leadership
UX Leadership
 
Photo ux nux 061014
Photo ux nux 061014Photo ux nux 061014
Photo ux nux 061014
 
Photo content strategy (James Chudley, cxpartners)
Photo content strategy (James Chudley, cxpartners)Photo content strategy (James Chudley, cxpartners)
Photo content strategy (James Chudley, cxpartners)
 
Psychology and the Perfect Design by @mrjoe
Psychology and the Perfect Design by @mrjoePsychology and the Perfect Design by @mrjoe
Psychology and the Perfect Design by @mrjoe
 
How Rapid Feedback improves the design process (Luke Jones, cxpartners)
How Rapid Feedback improves the design process (Luke Jones, cxpartners)How Rapid Feedback improves the design process (Luke Jones, cxpartners)
How Rapid Feedback improves the design process (Luke Jones, cxpartners)
 
How to build a failsafe mobile usability testing set up
How to build a failsafe mobile usability testing set upHow to build a failsafe mobile usability testing set up
How to build a failsafe mobile usability testing set up
 

Recently uploaded

LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 

Recently uploaded (19)

LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 

UX Components Deconstructed

  • 2. James @chudders Shameless plug Jesmond @jesmond
  • 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
  • 5. Top tips for homepages
  • 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.
  • 9. Any more top tips for homepages?
  • 10. Category and product listing page UX
  • 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
  • 12. Top tips for category pages
  • 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
  • 18. Any more top tips for category pages?
  • 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?
  • 21. Top tips for product pages
  • 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
  • 26. Any more top tips for product pages?
  • 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)
  • 29. Top tips for shopping basket and checkout pages
  • 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.
  • 33. www.ctshirts.co.uk Link to product info Chosen Product image size
  • 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.
  • 36. HTTPS and browser Familiar URL padlock Trust marks www.boden.co.uk
  • 37. Trust mark logo visually linked with the site’s own www.ctshirts.co.uk security messaging
  • 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
  • 39. Any more top tips for shopping basket pages?
  • 40. Any questions or comments?
  • 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
  • 43. Thank you James Chudley @chudders james.chudley@cxpartners.co.uk Jesmond Allen @jesmond jesmond.allen@cxpartners.co.uk