• Save
An Introduction to UX Design & Testing
Upcoming SlideShare
Loading in...5
×
 

An Introduction to UX Design & Testing

on

  • 43,436 views

An introduction to the user experience design process and "guerilla" user testing, intended to help explain UX to other stakeholders in an organizational context.

An introduction to the user experience design process and "guerilla" user testing, intended to help explain UX to other stakeholders in an organizational context.

Statistics

Views

Total Views
43,436
Views on SlideShare
40,042
Embed Views
3,394

Actions

Likes
340
Downloads
0
Comments
13

57 Embeds 3,394

http://clc.act.edu.au 1393
http://www.lancegarcia.com 413
http://programmingpursuit.com 208
http://list.mk 207
http://www.7ux.nl 131
http://www.realityisagame.com 118
http://www.scoop.it 100
http://flavors.me 94
http://uxuistudy.tistory.com 79
http://www.slideshare.net 78
http://www.techgig.com 74
http://piiar.wordpress.com 66
http://jthco.wordpress.com 63
http://paper.li 53
http://www.roberteijlander.nl 46
http://www.felgner.ch 37
http://storify.com 36
http://www.programmingpursuit.com 28
http://rlance.tumblr.com 22
http://danechan.wordpress.com 17
http://jethrowatson.co.uk 15
http://lancegarcia.com 13
http://simpleandopen.blogspot.com 11
http://localhost 8
http://dipaksblogonline.blogspot.com 8
http://norabro.tistory.com 7
http://pinterest.com 7
http://dipaksblogonline.blogspot.in 5
https://www.facebook.com 4
http://10.150.200.57 4
http://www.linkedin.com 4
http://7ux.roberteijlander.nl 4
http://127.0.0.1 4
http://twitter.com 3
http://webmail.i4unetworks.co.kr 3
http://feeds.feedburner.com 3
http://us-w1.rockmelt.com 3
http://usalonet.tumblr.com 2
http://feedly.com 2
http://rlance.flavors.me 2
http://role-sandbox.eu 2
https://twitter.com 2
http://blue520.textcube.com 1
http://www.pinterest.com 1
http://summary 1
http://www.sharepointuserexperience.com 1
http://simpleandopen.blogspot.in 1
http://dipaksblogonline.blogspot.co.uk 1
http://blog.naver.com 1
http://testing.cultureplex.ca 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

110 of 13 Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…

110 of 13

Post Comment
Edit your comment

An Introduction to UX Design & Testing An Introduction to UX Design & Testing Presentation Transcript

  • An Introduction to User Experience Design & User Testing AJ Kandy • Marks & Pixels marksandpixels.com
  • On today’s agenda....
  • On today’s agenda.... What is User Experience Design?
  • On today’s agenda.... What is User Experience Design? Why should we care?
  • On today’s agenda.... What is User Experience Design? Why should we care? Where can we apply UX processes?
  • On today’s agenda.... What is User Experience Design? Why should we care? Where can we apply UX processes? How can we measure its effectiveness?
  • On today’s agenda.... What is User Experience Design? Why should we care? Where can we apply UX processes? How can we measure its effectiveness? Who needs to be involved?
  • On today’s agenda.... What is User Experience Design? Why should we care? Where can we apply UX processes? How can we measure its effectiveness? Who needs to be involved?
  • What is user experience design?
  • What is user experience design? Usually, some or all of the following
  • What is user experience design? Usually, some or all of the following Information design
  • What is user experience design? Usually, some or all of the following Information design Information architecture
  • What is user experience design? Usually, some or all of the following Information design Information architecture Interaction design
  • What is user experience design? Usually, some or all of the following Information design Information architecture Interaction design Visual Design
  • What is user experience design? Usually, some or all of the following Information design Information architecture Interaction design Visual Design Human Factors / Cognition
  • What is user experience design? Usually, some or all of the following Information design Information architecture Interaction design Visual Design Human Factors / Cognition Usability / Accessibility
  • What is user experience design? The User Experience Honeycomb, Peter Morville, 2004
  • adapted from “The Elements of User Experience,” Jesse James Garrett, 2000
  • adapted from “The Elements of User Experience,” Jesse James Garrett, 2000
  • adapted from “The Elements of User Experience,” Jesse James Garrett, 2000
  • adapted from “The Elements of User Experience,” Jesse James Garrett, 2000
  • adapted from “The Elements of User Experience,” Jesse James Garrett, 2000
  • Web as Task-Oriented Software Interface Graphic Treatment of interface elements (the “look” in “look-and-feel”) Design of UI elements to facilitate user interaction with functionality Information presentation to facilitate understanding Feature set: detailed description of functionality to meet user needs Externally derived goals identified through user research, ethnography, psychographics, etc. Business, creative or other internally derived goals for the site adapted from “The Elements of User Experience,” Jesse James Garrett, 2000
  • Web as Task-Oriented Web as Information- Software Interface Oriented Content Destination Graphic Treatment of Visual treatment of text, graphic interface elements page elements and navigational (the “look” in “look-and-feel”) components Design of UI elements to facilitate Design of UI elements to facilitate user interaction with functionality user’s movement through the IA Information presentation to Information presentation to facilitate understanding facilitate understanding Feature set: detailed description Content elements required in of functionality to meet user needs the site to meet user needs Externally derived goals identified Externally derived goals identified through user research, ethnography, through user research, ethnography, psychographics, etc. psychographics, etc. Business, creative or other Business, creative or other internally derived goals for the site internally derived goals for the site adapted from “The Elements of User Experience,” Jesse James Garrett, 2000
  • All creative endeavours follow... adapted from “Understanding Comics,” Scott McCloud, 1994
  • adapted from “Understanding Comics,” Scott McCloud, 1994
  • adapted from “Understanding Comics,” Scott McCloud, 1994
  • adapted from “Understanding Comics,” Scott McCloud, 1994
  • adapted from “Understanding Comics,” Scott McCloud, 1994
  • adapted from “Understanding Comics,” Scott McCloud, 1994
  • adapted from “Understanding Comics,” Scott McCloud, 1994
  • On the web, this translates to:
  • The development cycle 1 2 3 4 5 6 Needs Specs Information Interaction Visual Coding, Architecture Design Design Testing & QA
  • The development cycle 1 2 3 4 5 6 Needs Specs Information Interaction Visual Coding, Architecture Design Design Testing & QA Market & user esearch User r Experience Team ent opm s de vel eam A t & Q
  • adapted from “Understanding Comics,” Scott McCloud, 1994
  • adapted from “Understanding Comics,” Scott McCloud, 1994
  • You can’t start from the surface
  • You can’t start from the surface There’s something cool on the Web! We’ve gotta have that!
  • You can’t start from the surface There’s something cool on the Web! We’ve gotta Start your photocopier Paste and then have that!
  • You can’t start from the surface There’s something cool on the Web! curs Start your photocopier Paste and then C oc We’ve gotta MAGI have that! here
  • The development cycle 1 2 3 4 5 6 Needs Specs Information Interaction Visual Coding, Architecture Design Design Testing & QA Market & user esearch User r Experience Team ent opm s de vel eam A t & Q
  • What, and who, is your product for?
  • What, and who, is your product for? Business or user needs
  • What, and who, is your product for? Business Research, abstract, big-picture goals or user needs
  • What, and who, is your product for? Business Research, abstract, big-picture goals or user needs “A thousand songs in your pocket.”
  • What, and who, is your product for? Business Research, abstract, big-picture goals or user needs “A thousand songs in your pocket.” “Provide voting info to US seniors”
  • What, and who, is your product for? Business Research, abstract, big-picture goals or user needs “A thousand songs in your pocket.” “Provide voting info to US seniors” “Teach students how to trade stocks”
  • What, and who, is your product for? Business Research, abstract, big-picture goals or user needs “A thousand songs in your pocket.” “Provide voting info to US seniors” “Teach students how to trade stocks” External: “Play a fun online game”
  • What, and who, is your product for? Business Research, abstract, big-picture goals or user needs “A thousand songs in your pocket.” “Provide voting info to US seniors” “Teach students how to trade stocks” External: “Play a fun online game” No decisions are being made about form or design yet
  • What, and who, is your product for? Business or user needs
  • How do you address those needs? Business or user needs
  • How do you address those needs? Business Specs or user needs
  • How do you address those needs? Business Specs Decisions about form or user needs
  • How do you address those needs? Business Specs Decisions about form or user needs ...An MP3 player & software
  • How do you address those needs? Business Specs Decisions about form or user needs ...An MP3 player & software ...A find-your-voting-office tool
  • How do you address those needs? Business Specs Decisions about form or user needs ...An MP3 player & software ...A find-your-voting-office tool ...Tutorials and articles
  • How do you address those needs? Business Specs Decisions about form or user needs ...An MP3 player & software ...A find-your-voting-office tool ...Tutorials and articles ...A stock market contest
  • How do you address those needs? Business Specs Decisions about form or user needs ...An MP3 player & software ...A find-your-voting-office tool ...Tutorials and articles ...A stock market contest Still no design decisions here
  • How do you address those needs? Business Specs or user needs
  • Function and content organization Business Specs or user needs
  • Function and content organization Business Specs Information Architecture Structure & taxonomy or user needs SURVIVOR U - SITEMAP 1.2 Login / Registration on Survivor U is for this section only (for now), no integration with the main ASP.NET single-sign-on login Wall Street Survivor nav scheme (links to appropriate WSS pages) - Dashboard, Trade, Research, News, Survivor U, Community, Video, Store, Support Survivor U landing page Aggregate feed with all new posted official content Financial Feature Columnists Expert Newsletter Learn Survivor U Survivor U FAQs Glossary Register News articles Picks Home Trading Video Video Home Home / Forgot home Channels Tutorials Login Home Home Individual Individual Beginner, Newsroom, FAQ Topic Alphabet news news news Intermediate news INO TV and news news news news Columns news Experts news news Groups news Lettergroup articles articles articles and Advanced articles ClipSyndicate articles articles articles pages (skip articles articles articles sections channel pages articles articles letters with no content) news news Feature news individual news Individual Blogs news Individual news Individual news news Individual news Individual news Individual Individual news news news news news news Newsletters news news news news news articles articles articles articles column articles Expert articles articles Lessons articles video posts articles Tutorials articles Q + As Glossary articles articles articles articles articles articles articles articles articles articles articles articles articles Articles with Tran- Terms scripts comments feed comments feed comments feed comments feed comments feed comments feed per post per post per post per post per post per post Ideally, on-page What’s news news Ajax popups with This? info articles articles explanatory notes items for things like RSS feeds, etc.
  • Card-Sorting Exercises
  • How people will actually use your site / software Business Specs Information or user Architecture needs
  • How people will actually use your site / software Information Architecture
  • How people will actually use your site / software Information Architecture
  • How people will actually use your site / software Information Architecture Interaction Design Thinking about user flows High-level process flow
  • How people will actually use your site / software Information Architecture Interaction Design Thinking about user flows Detailed process flowchart
  • Wireframe Sketches
  • Wireframes - Paper Prototypes
  • High-fidelity wireframes and clickable prototypes
  • Wireflows
  • EightShapes Unify Modular Template System
  • Approaching the surface, Captain Information Interaction Architecture Design
  • Approaching the surface, Captain Information Interaction Visual Architecture Design Design
  • Approaching the surface, Captain Information Architecture Interaction Design Visual Design Look & Feel
  • Approaching the surface, Captain Information Architecture Interaction Design Visual Design Look & Feel This isn’t just about decoration, slickness, or branding
  • Approaching the surface, Captain Information Architecture Interaction Design Visual Design Look & Feel This isn’t just about decoration, slickness, or branding How it looks is how it works.
  • Typographical grids & hierarchy
  • Typographical grids & hierarchy
  • Typographical grids & hierarchy Header and nav {
  • Typographical grids & hierarchy Header and nav { image {
  • Typographical grids & hierarchy Header and nav { image { first item {
  • Typographical grids & hierarchy Header and nav { image { looks like date and time first item {
  • Typographical grids & hierarchy Header and nav { image { looks like date and time looks like content summaries first item {
  • Typographical grids & hierarchy Header and nav { image { looks like date and time looks like content summaries looks like archive or search? first item {
  • Typographical grids & hierarchy Header and nav { image { looks like date and time looks like content summaries looks like archive or search? first item { looks like more info?
  • Typographical grids & hierarchy Header and nav { Site layout conforms to our expectations based on our experiences image { looks like date and time looks like content summaries looks like archive or search? first item { looks like more info?
  • Visual design of user affordances unclear relationships obvious relationships (Mac System 6) (Mac System 7)
  • Making functionality more obvious Action 1 Action 2 inactive Active Cancel Submit ® Cancel ‘ Submit ® Cancel ‘ Submit
  • Attractive things work better. Don Norman, Nielsen Norman Group
  • Which do you feel would work better?
  • How it looks is how well it works. Affective design •Aesthetic pleasure •Practical needs •Emotional benefits
  • Building actual working products Information Interaction Visual Architecture Design Design
  • Building actual working products Visual Design
  • Building actual working products Visual Design
  • Building actual working products Visual Coding, Design Testing & QA
  • Building actual working products Visual Design Coding, Testing This deserves its own slideshow & QA
  • Building actual working products Visual Design Coding, Testing A note on user testing & QA
  • Building actual working products Visual Design Coding, Testing A note on user testing & QA Double-checks your assumptions.
  • Building actual working products Visual Design Coding, Testing A note on user testing & QA Double-checks your assumptions. If done well, helps nail low-hanging fruit to improve usability
  • Building actual working products Visual Design Coding, Testing A note on user testing & QA Double-checks your assumptions. If done well, helps nail low-hanging fruit to improve usability Can be done for “10 cents a day”
  • Building actual working products Visual Design Coding, Testing A note on user testing & QA “Guerrilla” usability testing
  • Building actual working products Visual Design Coding, Testing A note on user testing & QA “Guerrilla” usability testing 3-4 users. once a month, is all it takes
  • Building actual working products Visual Design Coding, Testing A note on user testing & QA “Guerrilla” usability testing 3-4 users. once a month, is all it takes Test on paper prototypes, use simple apps like Silverback
  • Budget usability testing with Silverback.app
  • Tracking clicks with Google Analytics
  • A/B Testing with Google Website Optimizer
  • Multi-variate testing with Google Website Optimizer
  • Play our Options Game, Make Friends & Win Cash! Become an Options Master Absolutely FREE! You’ve got nothing to lose. Sign up today! Win Big! Options Are Fun! Learn Options Today Fourscore and seven years ago....
  • Multi-variate testing with Google Website Optimizer
  • Multi-variate testing with Google Website Optimizer
  • The development cycle 1 2 3 4 5 6 Needs Specs Information Interaction Visual Coding, Architecture Design Design Testing & QA
  • One more thing... 1 2 3 4 5 6 Needs Specs Information Interaction Visual Coding, Architecture Design Design Testing & QA
  • One more thing... 1 2 3 4 5 6 7 Needs Specs Information Interaction Visual Coding, Rinse Architecture Design Design Testing & Repeat & QA
  • The circle of life(cycle), Simba 1 2 3 4 5 6 7 Needs Specs Information Interaction Visual Coding, Rinse Architecture Design Design Testing & Repeat & QA
  • The circle of life(cycle), Simba 1 2 3 4 5 6 7 Needs Specs Information Interaction Visual Coding, Rinse Architecture Design Design Testing & Repeat & QA
  • In reality, feedback is constant 1 2 3 4 5 6 7 Needs Specs Information Interaction Visual Coding, Rinse Architecture Design Design Testing & Repeat & QA
  • Critical Path
  • The Nine Pillars of Successful Web Teams project management Where do you sit Jesse James Garrett <jjg@jjg.net> 9 July 2003 on this map? The most successful Web teams build their team structures and their processes on these nine essential competencies: Project Management: The hub that binds all the tactical competencies together as well as the engine that drives the project forward to completion, project management requires a highly specialized set of skills all its own. concrete Neglecting this area often results in missed deadlines and cost overruns. d i design Concrete Design: Before the abstract design can become a fully realized user experience, you must determine the specific details of interfaces, navigation, information design, and visual design. This realm of concrete design is essential to creating the final product. tactical Content Production: Knowing what content you need isn't enough. You also technology content need to know how you'll produce it. Gathering raw information, writing and editing, and defining editorial workflows and approvals are all part of content implementation production production. Technology Implementation: Building technical systems involves a lot of hard work and specialized knowledge: languages and protocols, coding and debugging, testing and refactoring. The more complex your site, the more important a competency in technology implementation becomes. abstract bstra Abstract Design: Information architecture and interaction design translate d design strategic objectives into a conceptual framework for the final user experience. These emerging disciplines addressing abstract design are strategic increasingly recognized for their value in the Web development process. Content Strategy: Content is often the reason users come to your site. But what content can you offer to meet your users' expectations? How much technology content content is appropriate, and what form should it take? What style or tone should it have? Before you can produce that content, you need to answer strategy strategy fundamental content strategy questions such as these. Technology Strategy: Web sites are technologically complex, and getting more intricate all the time. Identifying the technology strategy for the site – platforms, standards, technologies, and how they can all interoperate – is essential to avoiding costly mistakes. site Site Strategy: Defining your own goals for the site can be surprisingly strategy trateg tricky. Arriving at a common understanding of the site's purpose for your organization, how you'll prioritize the site's various goals, and the means by which you'll measure the site's success are all matters of site strategy. User Research: User-centered design means understanding what your users need, how they think, and how they behave – and incorporating that understanding into every aspect of your process. User research provides the raw observations that fuel this insight into the people your site must serve. user research adaptive path http://www.jjg.net/ia/pillars/ http://www.adaptivepath.com/ adapted from “The Nine Pillars of Successful Web Teams,” Jesse James Garrett, 2003
  • The Nine Pillars of Successful Web Teams project management Where do you sit Jesse James Garrett <jjg@jjg.net> 9 July 2003 on this map? The most successful Web teams build their team structures and their processes on these nine essential competencies: Project Management: The hub that binds all the tactical competencies together as well as the engine that drives the project forward to completion, project management requires a highly specialized set of skills all its own. concrete Neglecting this area often results in missed deadlines and cost overruns. d i design Probably in Concrete Design: Before the abstract design can become a fully realized user experience, you must determine the specific details of interfaces, navigation, information design, and visual design. This realm of concrete more than one design is essential to creating the final product. tactical Content Production: Knowing what content you need isn't enough. You also technology content need to know how you'll produce it. Gathering raw information, writing and editing, and defining editorial workflows and approvals are all part of content implementation production neat, tidy area production. Technology Implementation: Building technical systems involves a lot of hard work and specialized knowledge: languages and protocols, coding and debugging, testing and refactoring. The more complex your site, the more important a competency in technology implementation becomes. abstract bstra Abstract Design: Information architecture and interaction design translate d design strategic objectives into a conceptual framework for the final user experience. These emerging disciplines addressing abstract design are strategic increasingly recognized for their value in the Web development process. Content Strategy: Content is often the reason users come to your site. But what content can you offer to meet your users' expectations? How much technology content content is appropriate, and what form should it take? What style or tone should it have? Before you can produce that content, you need to answer strategy strategy fundamental content strategy questions such as these. Technology Strategy: Web sites are technologically complex, and getting more intricate all the time. Identifying the technology strategy for the site – platforms, standards, technologies, and how they can all interoperate – is essential to avoiding costly mistakes. site Site Strategy: Defining your own goals for the site can be surprisingly strategy trateg tricky. Arriving at a common understanding of the site's purpose for your organization, how you'll prioritize the site's various goals, and the means by which you'll measure the site's success are all matters of site strategy. User Research: User-centered design means understanding what your users need, how they think, and how they behave – and incorporating that understanding into every aspect of your process. User research provides the raw observations that fuel this insight into the people your site must serve. user research adaptive path http://www.jjg.net/ia/pillars/ http://www.adaptivepath.com/ adapted from “The Nine Pillars of Successful Web Teams,” Jesse James Garrett, 2003
  • UX Design
  • UX Design Product Management
  • UX Design Product Management Engineering
  • UX Design What’s usable, useful & desirable Product Management Engineering
  • UX Design What’s usable, useful & desirable Product Management What’s needed & therefore valuable Engineering
  • UX Design What’s usable, useful & desirable Product Management What’s needed & therefore valuable Engineering What’s possible, and what’s not
  • UX Design Product Management Engineering A constant cycle of design and testing
  • UX Design Product Management Engineering A constant cycle of design and testing adapted from ‘Sharing Ownership of UX,” Pabini Gabriel-Petit, 2007
  • So what does all this get us?
  • So what does all this get us? Clearer direction from the start - saves time
  • So what does all this get us? Clearer direction from the start - saves time Design process driven by knowledge
  • So what does all this get us? Clearer direction from the start - saves time Design process driven by knowledge Documentation of planning & design decisions
  • So what does all this get us? Clearer direction from the start - saves time Design process driven by knowledge Documentation of planning & design decisions Improved functioning between teams
  • So what does all this get us? Clearer direction from the start - saves time Design process driven by knowledge Documentation of planning & design decisions Improved functioning between teams Better products, and happier users
  • Questions? Comments? ajkandy@marksandpixels.com AJ Kandy • Marks & Pixels marksandpixels.com