Designing Business: Design Thinking and User Experience Design
Designing the user experience
-
Upload
sean-donnelly-ba-msc-qfa -
Category
Marketing
-
view
151 -
download
4
Transcript of Designing the user experience
![Page 1: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/1.jpg)
Designing the User Experience
![Page 2: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/2.jpg)
Todays Agenda
• What is User Experience Design?
• The Business Case for User Experience Design
• What are the UX processes?
• How can we measure its effectiveness?
• Who needs to be involved?
![Page 3: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/3.jpg)
![Page 4: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/4.jpg)
What is user experience design?
Consider the term: “User experience encompasses all aspects of the end user’s interaction with the company, its services and its products.” - Don Norman
![Page 5: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/5.jpg)
![Page 6: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/6.jpg)
The terminology
User experience
(UX)
Human Computer Interaction
(HCI)
User Centred Design (UCD)
![Page 7: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/7.jpg)
User experience = customer Experience
You are building more than a website. You are building a customer experience.
![Page 8: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/8.jpg)
Fundamentals of designing for the end user experience
• Project Management
• User Research
• Interaction Design
• Information Architecture
• Interaction Design
• Visual Design
• Human Factors / Cognition
• Usability / Accessibility
![Page 9: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/9.jpg)
![Page 10: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/10.jpg)
People involved in website development projects
1. Project Manager
2. Marketing Manager
3. Copywriter / Editor
4. Graphic Designer
5. Interface designer
6. Database administrator
7. Network administrator
8. Information architect
9. Web developer (or multiple developers)
![Page 11: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/11.jpg)
Factors that Influence UX
![Page 12: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/12.jpg)
Factors that Influence UX
1. Useful: Your content should be original and fulfill a need
2. Usable: Site must be easy to use 3. Desirable: Image, identity, brand, and other design
elements are used to evoke emotion and appreciation 4. Findable: Content needs to be navigable and
locatable onsite and offsite 5. Accessible: Content needs to be accessible to people
with disabilities 6. Credible: Users must trust and believe what you tell
them
![Page 13: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/13.jpg)
Elements of User Experience
![Page 14: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/14.jpg)
Elements of User Experience
![Page 15: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/15.jpg)
Elements of User Experience
![Page 16: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/16.jpg)
Elements of User Experience
![Page 17: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/17.jpg)
Information architecture
• Structure and taxonomy
• Card sorting exercises
• How people will actually use your site
• User flows (End use case scenarios) – Prepare flowcharts
– Wireframe sketches
– Wireframes / Paper protptypes
– High fidelity wireframes and clickable prototypes (Get old slides)
![Page 18: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/18.jpg)
Elements of User Experience
![Page 19: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/19.jpg)
The development cycle
![Page 20: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/20.jpg)
The development cycle
![Page 21: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/21.jpg)
Business Case for User Experience Design
![Page 22: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/22.jpg)
Reasons to embrace User - Experience
1. Good user experience delivers ROI by optimising conversion rates
2. User experience can be more important than brand and price
3. Identify competitor weaknesses 4. Gain competitive advantage 5. Focus on web standards 6. You are already spending on design 7. Manage costs – avoid errors (usability, findability,
accessibility) 8. Manage people (influence of internal stakeholders)
![Page 23: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/23.jpg)
![Page 24: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/24.jpg)
UX Design Processes
![Page 25: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/25.jpg)
![Page 26: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/26.jpg)
The development cycle
![Page 27: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/27.jpg)
Designing for the User Experience
1. Do user research.
“The first requirement for an exemplary user experience is to meet the exact needs of the customer, without fuss or bother.” - Jakob Nielsen and Don Norman
![Page 28: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/28.jpg)
User Research
• User Centred Design = Involve users
• Iterative process
• ⇒ DESIGN
• ⇒ EVALUATE
• ⇒ PROTOTYPE
![Page 29: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/29.jpg)
Early
Stage
Mature
User Research
![Page 30: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/30.jpg)
User Research • Who are the important users? • What is their purpose for accessing the site? • How frequently will they visit the site? • What experience and expertise do they have? • What nationality are they? Can they read your
language? • What type of information are they looking for? • How will they want to use the information: read it on
the screen, print it or download it? • What type of browsers will they use? How fast will
their communication links be? • How large a screen or window will they use, with how
many colours? Source: Bevan, 2009
![Page 31: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/31.jpg)
User Research
– Web design personas
– Audience Types
• Characteristics
• Intents
• Behaviours
– Audience motivation and behaviour
• Usability testing
• Surveys
• Observation etc.
![Page 32: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/32.jpg)
User Research – Audience Types
Source: eConsultancy, 2009
![Page 33: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/33.jpg)
User Research – Web Design Personas
![Page 34: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/34.jpg)
User Research – Web Design Personas
• Archetypal users The design goal of personas is to develop customer-centric content and experiences for different
• types of site visitor.
• Name, gender, background
• Motivations and goals
• Think of your Facebook profile
![Page 35: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/35.jpg)
User Research – Web Design Personas
• Web design personas are not made up • Based on data collated about real users
– Interviews – Observation sessions
• Existing and potential users
– Surveys – User testing sessions – Experience that project stakeholders have with
customers
• Goal is to identify patterns of behaviour • Each type of user goes to form a persona
![Page 36: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/36.jpg)
User Research – Web Design Personas
• Not quite the same as market segments
![Page 37: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/37.jpg)
![Page 38: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/38.jpg)
User Research Methods
• Usability test competitor websites
• Test participants should represent target audience
• Usability test sketches and wireframes
![Page 39: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/39.jpg)
User research methods – Behaviour Types
• Identify different customer visitors or scenarious
– First time visitors
• Seeking new information or information about a supplier of a product
– Repeat visitor
• Comparing suppliers in more detail
– Purchasing visitor
• Has made decision to purchase
![Page 40: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/40.jpg)
User research methods – Behaviour Types
• Position in the buy-cycle
• Their customer journeys
• Their decision making process
• Their intent
• Their primary navigation mode – search or browse
• Their trigger factors
• How receptive they are to marketing messages
![Page 41: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/41.jpg)
• eConsultancy, 2009
![Page 42: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/42.jpg)
Dr. Mike Baxters Levels of Intent 1. Tracker. The findability features of the site must help the
tracker hone in on what they want immediately. – Knows exactly what they want – Using site to check price, availability, delivery time,
support etc. 2. Hunter. Knows approximately what they want. Site needs
to help them choose any buy. – Doesn’t know specific product but know they want a
digital camera for example. 3. Explorer. Unsure what they want. Just browsing.
– They might know they want to buy something e.g. present but not the exact type of product.
– Site needs to have excellent content and use engagement tactics to get the person to come bac,k
4. Mistake. Reason for high bounce rates on lots of sites.
![Page 43: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/43.jpg)
Content Preparation
![Page 44: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/44.jpg)
Sketching and Wireframes
![Page 45: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/45.jpg)
Sketching and Wireframes
• Blueprint of what a site could look like
• Wireframe page categories
– Home page
– Category page
– Product listing page
– Product page
– Shopping basket
– Payment page
![Page 46: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/46.jpg)
Grapihic Design
• Make sure graphic designer viewed or was briefed on wireframe usability testing
– Gives a feel for design rationale
• Usability testing post graphic design
– Good design will go unacknowledged in testing!
![Page 47: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/47.jpg)
Build and Launch
• Shared understanding between UX designers and developers
– Developers should view usability testing
– Understand rationale behind design decisions
– Developers may not know anything about design guidelines
• Conduct usability testing – separate session.
![Page 48: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/48.jpg)
Google User Experience Guidelines
http://www.google.com/corporate/ux.html 1. Focus on people – their lives, their work, their dreams. 2. Every millisecond counts. 3. Simplicity is powerful. 4. Engage beginners and attract experts. 5. Dare to innovate. 6. Design for the world. 7. Plan for today's and tomorrow's business. 8. Delight the eye without distracting the mind. 9. Be worthy of people's trust. 10. Add a human touch.
![Page 49: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/49.jpg)
Design Guidelines
• Common sense • Guidelines learned by experienced designers • Beware of developers!
• Knowing how to create functionality versus
• Knowing how to design
• Usability Principles / Design Rules / Heuristics / Design
Guidelines / Design Rules etc. • The basic ideas are the same as they all come from the same
underlying concepts.
![Page 50: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/50.jpg)
Guideline 1 – Be consistent
• Predictable look & feel and behaviour • less effort to learn • coherently combining all elements of the interface together • layout, colour, font, capitalisation, menus, message, phrasing
style, … everything
![Page 51: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/51.jpg)
![Page 52: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/52.jpg)
Guideline 2 – Keep the visitors attention
• Use up to 4 font sizes
• Grouping
• Colour coding
• Colour intensity / Emphasis
• Consider the users level of domain knowledge
• Beware Animation / Blinking / Playing sounds
• Graphics– font choice (Sans serif vs. Serif)
![Page 53: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/53.jpg)
Guideline 2 Keep the users attention (Font Face)
![Page 54: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/54.jpg)
Guideline 2 (Colour)
• Use conservatively (less than 5 in one display - but not a fixed rule!)
• Don’t use glaring, awkward combinations
• Use it for colour-coding
• Consider colour-blind viewers
![Page 55: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/55.jpg)
Guideline 2 (Emphasis)
![Page 56: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/56.jpg)
![Page 57: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/57.jpg)
Guideline 3: Speak the Users Language
• All messaging, labels, words, instruction etc. should be in the target users language
• No system oriented information • Insert images of messaging from eCommerce sites
• “We have sold you 1 item of the book XXX” • => “You have bought 1 item of the book XXX” • (user’s point of view) • “Action preference #327 initiated” • => “background setting ready” • (no system-oriented information)
![Page 58: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/58.jpg)
Guideline 4: Reduce the users memory load
• Users should not have to remember how to use the website
![Page 59: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/59.jpg)
![Page 60: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/60.jpg)
![Page 61: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/61.jpg)
Guideline 5: Provide informative feedback
• System feedback for every user action
• Clicking sounds
• Mouse cursor
• Reversible
• Avoid user-driven errors
![Page 62: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/62.jpg)
Guideline 6: Provide shortcuts for frequent users
• Short cut buttons (Ctrl-C/Ctrl-V/Ctrl-X, etc.)
• Action history
• Recently purchased items
• Recently-opened file list
![Page 63: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/63.jpg)
Guideline 7: Use proper error messages
• Be self explanatory
• Be specific
• Be polite
• Be constructive
• And most importantly, don’t assign blame
• A better approach is to pre-empt errors and build affordance into the system.
![Page 64: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/64.jpg)
Guideline 7 – Use proper error messages
![Page 65: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/65.jpg)
Guideline 7 – Use proper error messages
![Page 66: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/66.jpg)
Guideline 7 – Use proper error messages
![Page 67: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/67.jpg)
Guideline 7 – Use proper error messages
![Page 68: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/68.jpg)
Guideline 8: Provide easy reversal of actions
• Make users feel safe
• Users should not feel afraid to explore unknown features
• As simple as a back button!
![Page 69: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/69.jpg)
Guideline 9: Write for the web
![Page 70: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/70.jpg)
Writing for print
![Page 71: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/71.jpg)
![Page 72: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/72.jpg)
All pages should contain clear calls to action
![Page 73: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/73.jpg)
Guideline 10 – Each page should have a clear objective
• The home page may not be the landing page
• Clear calls to action
• Grab the visitors attention – not garner irritation
![Page 74: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/74.jpg)
![Page 75: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/75.jpg)
Great design isn’t as simple as following guidelines
![Page 76: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/76.jpg)
“Attractive things work better” – Don Norman, Norman Nielsen Group
![Page 77: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/77.jpg)
![Page 78: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/78.jpg)
![Page 79: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/79.jpg)
![Page 80: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/80.jpg)
![Page 81: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/81.jpg)
Beyond design guidelines
![Page 82: Designing the user experience](https://reader034.fdocuments.us/reader034/viewer/2022042716/55beae16bb61eb8b198b47f1/html5/thumbnails/82.jpg)
Next lecture
• Introduction to usability and usability testing