USER EXPERIENCE DESIGN DEMYSTIFIED April 29 th 2014 Nelly Mensah | Doug Van Wie
Preview:
Citation preview
- Slide 1
- USER EXPERIENCE DESIGN DEMYSTIFIED April 29 th 2014 Nelly
Mensah | Doug Van Wie
- Slide 2
- Agenda Introductions What is UX and Why Is It Important? UX
Methodology UX in Practice Useful Resources Q&A
- Slide 3
- INTRODUCTIONS
- Slide 4
- Introductions Doug studied Graphic Design at Auburn University.
After a career as a professional swimmer, he worked for a software
company as an Interaction Designer developing prototypes and
conducting user testing. He has also worked as a freelance web
designer for the past eight years. Nelly has worked as a developer,
UX designer, and product manager for Deloitte Digital for the last
5 years. She has also advised several start ups and is a freelance
graphic designer and illustrator. She takes stock photo selection
and white space very seriously.
- Slide 5
- WHAT IS UX?
- Slide 6
- What is User Experience? Usability Platform Design Brand
Performance Accessibility UX
- Slide 7
- Benefits of Caring About UX Increased Adoption Customer Loyalty
Brand Differentiation Productivity Gains Operational Efficiencies
Reduced Development Costs Better morale and employee satisfaction
7
- Slide 8
- Learnability How easy is it for users to accomplish basic tasks
the first time they encounter the design? Efficiency Once users
have learned the design, how quickly can they perform tasks?
Memorability When users return to the design after a period of not
using it, how easily can they reestablish proficiency? Errors How
many errors do users make, how severe are these errors, and how
easily can they recover from the errors? Satisfaction How pleasant
is it to use the design? What is Usability? 8
- Slide 9
- UX METHODOLOGY
- Slide 10
- Determine Your Objective Set Goals e.g. Reduce shopping cart
abandonment by 15% Select Channel / Platform e.g. Android vs iOS vs
Web Establish Audience e.g. Existing customers Determine Content
Type e.g. Product descriptions
- Slide 11
- Personas Information Architecture Visual Design Wireframing UX
Methodology Overview User Insights User Testing 11 User Experience
and Style Guides
- Slide 12
- USER RESEARCH
- Slide 13
- User Research The User Research phase focuses on identifying
key pain points and areas for improvement from the end-users
perspective. The outputs of this phase of work are used as
guidelines in designing the application. This phase lays the
foundation for the design and sets guidelines for making design
decisions. Field Observation User Interviews User Workshops Engage
Users Conduct User Research Compile Requirements Requirements
Compilation Scoping Requirements Prioritization Identify end users
Write interview script Create Global Design Description Activities
13
- Slide 14
- PERSONAS
- Slide 15
- Persona Definition The objective of Persona Definition is to
paint a clear picture of the typical target users and describe
how/why they will be using the system. Personas should be able to
invoke empathy by providing insights into the real behaviors,
goals, pain points, skills, and environments of real users.
Description Characterize user goals, preferences, and key tasks
into personas Conduct Workshops Document User Personas Validate
User Personas Validate interview findings with SMEs Present and
validate user personas Identify key functions and content required
for user tasks Determine high-level user goals, preferences, and
pain-points Understand day in the life user scenarios Activities
15
- Slide 16
- Persona Definition Example 16
- Slide 17
- When you design for everyone, you design for no one. -
Anonymous
- Slide 18
- INFORMATION ARCHITECTURE
- Slide 19
- Information Architecture Information Architecture (IA) is the
analysis and design of the content structure of the application, as
well as the interrelationships between the content. Essentially, it
is a means by which to logically organize information in the app
and involves modeling a top-down view of how users will interact
with various pages, functions, and information across the
application. Description Construct page/screen flows based on high-
level site map Map page flows to content outline Develop High Level
Site Map Draft Page Flows Annotate Page Flows Write detailed page
flow annotations to provide user narratives. Review & iterate
page flows w/ Process SMEs Draft high-level site map Review tasks
flows from the users perspective Activities 19
- Slide 20
- Site Map Example Home Jobs Job ListJob Record Job Header
DetailsWork Ticket List Work Ticket Record Work Ticket Header
Details Work Ticket Line Items List Work Ticket Line Item Record
CustomersCustomer ListCustomer Record Customer Header Detail
Contacts List Contact Record Address List Address Record Hierarchy
List Hierarchy Record Service LocationsService Locations List
Service Location Record EmployeesEmployee ListEmployee Record
AssetsAssets ListAsset Record Location/L1Location/L1
ListLocation/L1 Record Products & Pricing Products Product
ListProduct Record PricingPricing ListPricing Record Pricing Header
Details Pricing Line Item Admin 20
- Slide 21
- WIREFRAMING
- Slide 22
- Wireframe Development A proposed user interface design is
articulated in wireframes. Wireframe development defines the
standard structure, layout, and general real-estate for content and
functions. Wireframes are developed in abstraction of visual,
creative, and branding elements. Iterations Description Brainstorm
and draw wireframe sketches Develop wireframes for unique page
layout types Review and obtain agreement on standard wireframes
Review Requirements Design Wireframes Validate and Update
Wireframes Review and validate wireframes with process SMEs and
stakeholders Update wireframes Document visual styles and
guidelines Document UX Guidelines Review required fields Define
controls and screen elements Activities 22
- Slide 23
- Design Principles 23 1.Hierarchy 2.Call to action 3.Contextual
UI elements 4.Response to action 5.Appropriate language
- Slide 24
- Wireframe Development 24 Step 1: Get your thoughts on
paper
- Slide 25
- Wireframe Development 25 Step 2: Prototype and test
- Slide 26
- Wireframe Example 26 Step 3: Refine and handoff
- Slide 27
- USABILITY TESTING
- Slide 28
- Usability Testing Usability testing is a critical step in the
user experience design process and must take place several times in
the project lifecycle. It helps ensure that the design is going in
the right direction and addresses the users needs. UX and Style
Guides User Testing Description Brief participants Have
participants complete a set of predetermined tasks Conduct
satisfaction survey Plan Usability Testing Approach Conduct
Usability Testing Review and Act On Results Aggregate results and
analyze findings Prioritize findings Update design based on
findings Determine participants Prepare test scenarios Set up
testing environment Activities 28
- Slide 29
- Usability Testing Example: Low Tech UX and Style Guides User
Testing 29
- Slide 30
- Usability Testing Example: High Tech UX and Style Guides User
Testing 30
- Slide 31
- VISUAL DESIGN
- Slide 32
- Visual Design Visual design is the icing on the cake. It is the
design of the final look and feel of the application and involves
the selection of colors, fonts and icons for the interface. It has
both practical and aesthetic implications for usability.
Description Narrow down design options Finalize visual theme of the
application Develop Themes Finalize Visual Design Approve and Hand
Off Design Clean up visual design Finalize visual style guide Hand
over graphic assets to developers Develop visual themes that adhere
to visual style guide and branding standards Design or obtain
iconography Decide on typography options Write copy Activities
32
- Slide 33
- Visual Design Examples 33 Style Tiles
- Slide 34
- User Experience and Style Guidelines A UX Guidelines document
is expected to be a living record that will be developed over
several iterations. It ensures that the interface is consistent
across screens and releases. UX and Style Guides User Testing
Description Document standard UI behavior, such as: Drop-downs Drag
& Drop Modal boxes Document Screen Components Document UI
Behavior Document Visual Design Standards Create Visual Style Guide
to include visual design standards: Color Palettes Typography
Iconography Screen resolutions Branding Document global components
including: Header Footer Navigation Panel Content Area Activities
34
- Slide 35
- Visual Design Examples 35 A collection of front-end patterns or
code-snippets that can be reused to form the building blocks of a
website. Pattern libraries can include CSS and HTML code blocks and
elements like headers, footers, form elements and list items as
well as more complex elements such as responsive galleries. Pattern
Library SalesforceBBCTwitter Bootstrap
- Slide 36
- UX IN PRACTICE
- Slide 37
- UX Roles Project Manager
- Slide 38
- Role Comparison 38 Responsibilities UI/UX DesignerWeb
DesignerWeb Developer User engagement planning User research User
personas UX guidelines creation Process design Information
architecture Wireframe design Visual/graphic design Branding
considerations Help content creation Usability testing Heuristic
Evaluation CSS development HTML development Integration
- Slide 39
- Size of Company Matters Startup Small or one-person team
Multiple responsibilities Product focus essential UX shapes
strategy and product development Limited time and resources
Bootstrap testing Enterprise Multiple practitioners Can be
independent department or part of development teams Varying levels
of importance to product Political challenges More time and
resources available
- Slide 40
- Integration with Development Involve developers early Document
everything Push the limits
- Slide 41
- Analytics: Goals Revisited Measure Outcomes Set Goals Select
Channel / Platform Establish Audience Determine Content Type
- Slide 42
- 10 Dos and Donts of User Experience 42 DO evangelize
user-centered design and usability within the organization DO
determine appropriate metrics to measure user engagement and
success DO involve stakeholders in workshops and review sessions DO
stay in perpetual beta DO align change management efforts with the
usability approach DONT forget the users DONT let politics or
trends dictate the direction of design DONT leave out frequent user
testing DONT rely on waterfall methodology DONT set unrealistic
expectations of what the UX will accomplish
- Slide 43
- RESOURCES
- Slide 44
- Wireframing & Prototyping Tools Axure
- Slide 45
- Wireframing & Prototyping Tools Balsamiq
- Slide 46
- Wireframing & Prototyping Tools Mockingbird
- Slide 47
- Wireframing & Prototyping Tools Proto.io
- Slide 48
- Wireframing & Prototyping Tools Bootstrap
- Slide 49
- User Testing Tools Remote Screenshare GoToMeeting, Skype,
Google Hangout, etc.
- Slide 50
- User Testing Tools Silverback
- Slide 51
- User Testing Tools A/B testing Google Analytics,
OptimizelyOptimizely
- Slide 52
- Inspiration Dribbble
- Slide 53
- Inspiration Behance
- Slide 54
- Inspiration Abduzeedo
- Slide 55
- Blogs to follow http://www.smashingmagazine.com/
http://www.smashingmagazine.com/ http://uxmag.com/
http://www.boxesandarrows.com http://www.boxesandarrows.com
http://www.useit.com/ http://www.useit.com/
http://www.uxbooth.com/
- Slide 56
- Q&A