UX DESIGN 101 WELCOME!
Hi, I am Chris R. Becker - [email protected]@cbecker
I have a background in
I have done projects for
Painting / Graphic Design - BFA : Colorado State UniversityMFA - Art Center College of Design : Media Design ProgramAdjunct Professor : Loyola Marymount University
Mataxa, Art Center, Jet Propulsion Laboratory (NASA), VW, CB2, Adobe, Toyota, EA, Mattel, Hyundai, Starwood Hotels, Fresh and Easy, HTC, OKGO, Hand Made Mobile, Pearson, and More.
I am a
UX / Interaction Designer / Design Researcher / Educator
I have worked for
Red Design Consultants, JPL/NASA, Art Center, Schematic, Syynlabs, Saatchi & Saatchi, Phenomenon, Innocean, Blitz, DeutschLA, the Ayzenberg Group, Handmade Mobile, Boombang, TBWA|Chiat|Day, & Two Bit Circus (currently)
I
who dabbles in physical computing experiences
WHO IS THIS GUY?
2
SOME OF MY RECENT WORK
3
Mens Warehouse - Tux Rental Redesign CB2 - Physical Interactive Campaign
Moca - Interactive Conversation tracker OK GO music video - Interaction Builder
4
Senior UX at TwoBit Circustwobitcircus.com• Hackers / Makers & Story Tellers• A mixture of startup, product design & technology company with a focus on bringing fun to education• Focusing on agile UX & rapid prototyping•Kickstarter : STEAM carnival : http://2bc.io/ks
CURRENT ROLE
LEARNING OBJECTIVES Identify the different roles within UX and the responsibilities of each
• Talk about the changing role of UX in modern business for startups to big corporations
• Use Jakob Nielsen’s 5 Principles of Usability to evaluate web and mobile experiences
5
AGENDA
•What is UX?•Who does UX?•Principles of Usability•Paired Activity
6
Anyone Know who this is?
HISTORY LESSON
7
Anyone Know who this is?
HISTORY LESSON
7
TimBL?Anyone Know who this is?
HISTORY LESSON
7
TimBL?
Tim Burners Lee
Anyone Know who this is?
HISTORY LESSON
7
TimBL?
Tim Burners Lee
Anyone Know who this is?
What did he do?
HISTORY LESSON
7
TimBL?
http?
Tim Burners Lee
Anyone Know who this is?
What did he do?
HISTORY LESSON
7
TimBL?
http?
Tim Burners Lee
Hypertext Protocol with a server
Anyone Know who this is?
What did he do?
HISTORY LESSON
7
TimBL?
http?
Tim Burners Lee
Hypertext Protocol with a server
The Internet was Invented!
Anyone Know who this is?
What did he do?
HISTORY LESSON
7
TimBL?
http?
Tim Burners Lee
Hypertext Protocol with a server
The Internet was Invented!
Year?
Anyone Know who this is?
What did he do?
HISTORY LESSON
7
TimBL?
http?
Tim Burners Lee
1990!
Hypertext Protocol with a server
The Internet was Invented!
Year?
Anyone Know who this is?
What did he do?
HISTORY LESSON
7
TimBL?
http?
Tim Burners Lee
1990!
Hypertext Protocol with a server
HTML
The Internet was Invented!
Year?
Anyone Know who this is?
What did he do?
HISTORY LESSON
7
TimBL?
http?
Tim Burners Lee
1990!
Hypertext Protocol with a server
HTML Hypertext Markup Language
The Internet was Invented!
Year?
Anyone Know who this is?
What did he do?
HISTORY LESSON
7
TimBL?
http?
Tim Burners LeeHe made a proposal for an information management system in March 1989, and on 25 December 1990, with the help ofRobert Cailliau and a young student at CERN, he implemented the first successful communication between a Hypertext Transfer Protocol (HTTP) client and server via the Internet.
Tim Berners-Lee is the director of the World Wide Web Consortium (W3C), which oversees the Web's continued development. He is also the founder of the World Wide Web Foundation, which writes and creates standards for HTML 5.
1990!
Hypertext Protocol with a server
HTML Hypertext Markup Language
The Internet was Invented!
Year?
Anyone Know who this is?
What did he do?
HISTORY LESSON
7
1990 2000 2007 2010
HTML HTML5
2013
CSS
JavaScript
CSS3
HTML4
FLASH
timeline
1990 2000 2007 2010
HTML HTML5
2013
CSS
JavaScript
CSS3
HTML4
FLASH
timeline
1990 2000 2007 2010
HTML HTML5
2013
CSS
JavaScript
CSS3
HTML4
FLASH
timeline You Are
Here
1990 2000 2007 2010
HTML HTML5
2013
CSS
JavaScript
CSS3
HTML4
FLASH
timeline You Are
Here
1990 2000 2007 2010
HTML HTML5
2013
CSS
JavaScript
CSS3
HTML4
FLASH
timeline You Are
HereClientsmight
be here
WHAT IS THE PROBLEM?
WHAT IS THE PROBLEM?
WHAT IS THE PROBLEM?
WHAT IS THE PROBLEM?
A considered User ExperienceWHAT IS THE PROBLEM?
A considered User ExperienceWHAT IS THE PROBLEM?
A considered User Experience
Across Multi Platforms
WHAT IS THE PROBLEM?
A considered User Experience
But the Media Space Reality is :
Across Multi Platforms
WHAT IS THE PROBLEM?
A considered User Experience
But the Media Space Reality is :
Across Multi Platforms
WHAT IS THE PROBLEM?
WHAT IS UX?
11
h"ps://vimeo.com/19131028
MULTI MEDIA PORTION :
JESSE JAMES GARRETT
“the design of anything independent of medium or across [device] with human experience as an explicit outcome and human engagement as an explicit goal”
12
-‐Jesse James Garre"
JACOB GUBE
13
“User experience is how a person feels when interfacing with a system or product.”
Includes but is not limited to websites, apps or software
UX INCORPORATES SCIENCE AS AN ART
14
Jacob Gube -‐ h"p://uxdesign.smashingmagazine.com/2010/10/05/what-‐is-‐user-‐experience-‐design-‐overview-‐tools-‐and-‐resources/
JESSE JAMES GARRETT
15
h"p://www.jjg.net/elements/pdf/elements.pdf
JESSE JAMES GARRETT
16
BUSINESS ANALYSIS & UX
17
SPECTRUM OF UX
18
WHO DOES UX?
20
WHO DOES UX: UR ・ IA ・ IXD・ DEV
20
• User Researcher
WHO DOES UX: UR ・ IA ・ IXD・ DEV
20
• User Researcher– Identifies user behaviours, goals and needs through interviews, studies and surveys
WHO DOES UX: UR ・ IA ・ IXD・ DEV
20
• User Researcher– Identifies user behaviours, goals and needs through interviews, studies and surveys
WHO DOES UX: UR ・ IA ・ IXD・ DEV
20
• User Researcher– Identifies user behaviours, goals and needs through interviews, studies and surveys
• Information Architect (IA)
WHO DOES UX: UR ・ IA ・ IXD・ DEV
20
• User Researcher– Identifies user behaviours, goals and needs through interviews, studies and surveys
• Information Architect (IA)– Defines the structure of a system, how content is described, organised and discovered
WHO DOES UX: UR ・ IA ・ IXD・ DEV
20
• User Researcher– Identifies user behaviours, goals and needs through interviews, studies and surveys
• Information Architect (IA)– Defines the structure of a system, how content is described, organised and discovered
WHO DOES UX: UR ・ IA ・ IXD・ DEV
20
• User Researcher– Identifies user behaviours, goals and needs through interviews, studies and surveys
• Information Architect (IA)– Defines the structure of a system, how content is described, organised and discovered
• Interaction Designer (IxD/UX Designer)
WHO DOES UX: UR ・ IA ・ IXD・ DEV
20
• User Researcher– Identifies user behaviours, goals and needs through interviews, studies and surveys
• Information Architect (IA)– Defines the structure of a system, how content is described, organised and discovered
• Interaction Designer (IxD/UX Designer)– Defines interactions, user flows, wireframes, and affordances of a system
WHO DOES UX: UR ・ IA ・ IXD・ DEV
20
• User Researcher– Identifies user behaviours, goals and needs through interviews, studies and surveys
• Information Architect (IA)– Defines the structure of a system, how content is described, organised and discovered
• Interaction Designer (IxD/UX Designer)– Defines interactions, user flows, wireframes, and affordances of a system
WHO DOES UX: UR ・ IA ・ IXD・ DEV
20
• User Researcher– Identifies user behaviours, goals and needs through interviews, studies and surveys
• Information Architect (IA)– Defines the structure of a system, how content is described, organised and discovered
• Interaction Designer (IxD/UX Designer)– Defines interactions, user flows, wireframes, and affordances of a system
• UI Developer
WHO DOES UX: UR ・ IA ・ IXD・ DEV
20
• User Researcher– Identifies user behaviours, goals and needs through interviews, studies and surveys
• Information Architect (IA)– Defines the structure of a system, how content is described, organised and discovered
• Interaction Designer (IxD/UX Designer)– Defines interactions, user flows, wireframes, and affordances of a system
• UI Developer– Builds the system by interpreting the functional specification, sitemaps, wireframes while working
within technical constraints
WHO DOES UX: UR ・ IA ・ IXD・ DEV
USER RESEARCHER
• Identify user needs and behaviors– interviews– surveys– existing data
• Carry out user testing– Paper prototyping – A/B testing– Usability / click tracking
21
IA: STRUCTURE
22
+ + + + + +
2
Saved Search
Starred
Following
Recent
Popular
Nearby
Filter
Search
Results
Project
Gallery
Submit
New Project
My Profile
Settings
Edit Profile
Adv Options
Edit Notification
Edit SharingUsers
StarredUser Profile
Users Submits
My Projects
Share
Login
Home
Launch
Users Projects
Edit Project
Download
Other User
Not Logged In
Help
+
My Submits
IXD: WHAT IS AFFORDANCE
“A potential action that is made possible by a given object”
23
h"p://www.jnd.org/dn.mss/affordances_and.html
DONALD NORMAN
24
IXD: COUNT THE PERCEIVED AFFORDANCES
24
IXD: COUNT THE PERCEIVED AFFORDANCES
24
IXD: COUNT THE PERCEIVED AFFORDANCES
24
IXD: COUNT THE PERCEIVED AFFORDANCES
24
IXD: COUNT THE PERCEIVED AFFORDANCES
24
IXD: COUNT THE PERCEIVED AFFORDANCES
24
IXD: COUNT THE PERCEIVED AFFORDANCES
24
IXD: COUNT THE PERCEIVED AFFORDANCES
24
IXD: COUNT THE PERCEIVED AFFORDANCES
24
IXD: COUNT THE PERCEIVED AFFORDANCES
24
IXD: COUNT THE PERCEIVED AFFORDANCES
24
IXD: COUNT THE PERCEIVED AFFORDANCES
24
IXD: COUNT THE PERCEIVED AFFORDANCES
24
IXD: COUNT THE PERCEIVED AFFORDANCES
24
IXD: COUNT THE PERCEIVED AFFORDANCES
24
IXD: COUNT THE PERCEIVED AFFORDANCES
24
IXD: COUNT THE PERCEIVED AFFORDANCES
25
DEV: IMPLEMENTATION
Carrier 12:00 PM
MediaTask
TitleDescription
#Submit
sNew Task ProfileFeed
TitleDescription
#
TitleDescription
#
TitleDescription
#
T7 Profile PageTap to view Profile Page. Transitional animation: no animation
T8 Create ProjectTap to Create a New
Project. Transition: display cut to new view w same footer and new highlight
state, no animation
T2 Feed Tap to view Feed Page (Home
Page). Transition: display cut to new view w same footer and new
highlight state, no animation. Until page contents loads display
header, footer, and a loading spinner w message.
T5 Project PageTap to view Project Page. Transitional animation: slide left from right When a project has no submissions display a Submit button that takes users directly to the camera capture step. See T5
Project List Item Includes Image
from project creator, Title,
Description, # of Submissions, and
up to 5 of the most recent submission
images.
Drag list down to refresh feed.Display with animating arrow or spinner and message:"Pull down to Refresh""Release to Refresh""Updating""Not Connected to Interent"
T1 InfoTap to view Info
page. Transitional
animation: slide up from bottom
T10 SearchTap to view Search Page. Transitional animation: slide left from right When a project has no submissions display a Submit button that takes users directly to the camera capture step. See T5
M3 FilterTap to view Info
Filters. Transitional
animation: slide up from bottom
Carrier 12:00 PM
TitleCategory ## photos ## videos submittedUser Name
My Projects Recent Popular
MediaTask
T8 Create ProjectTap to Create a New Project. Transition: display cut to new view w same footer and new highlight state, no animation
Pull down to refresh.
Search
Title, by User Name
0/100
Category | ## | ## | ## Days leftDescription...
10/40
The Title of the Prject, by User Name Category | ## | ## | ## Days left
Description...
10/40
The Title of the Prject, by User Name Category | ## | ## | ## Days left
Description...
Swipe to navigate, tap to select Feeds . Default feed is Recent.
T5 Project PageTap to view Project Page. Transitional animation: slide left from right When a project has no submissions display a Submit button that takes users directly to the camera capture step. See T5 This is a project with no submissions.
M1 Project List Item Includes Title, User Name,
Project Image, Category, # of photos, # of videos, # days left till project close, Description, Goal Gauge,
optional gallery.
Drag list down to expose search, and then refresh feed. On release without reaching refresh threshold keep search visible. Upon reaching refresh threshold display with animating arrow or spinner and message:"Pull down to Refresh" >"Release to Refresh""Updating""Not Connected to Interent"
T3 Profile PageTap to view Profile Page.
Transitional animation: no animation
M3 FilterTap to view Filters.
Transitional animation: slide down from top
For projects with submissions, swipe
anywhere on a list item to navigate a gallery of up to 10 recent entries. Swiping
also displays the submissions button. See M1 for full specification.
FeedsMy SubmissionsStarredMy ProjectsFollowingRecentPopularNearby
T10 SearchTap to view Search.
Transitional animation: slide keyboard up; expand the
height of search to include the location field, slide up list
of recent searches. see animation from Yelp Search.
PRINCIPLES OF USABILITY
27
INTUITIVE
“There is no intuitive interface! Not even the Nipple, It’s all learned.”
Bruce Ediger
28
MEASURE UX: USABILITY
5 PRINCIPLES OF USABILITY
•Learnability•Efficiency•Memorability•Error Management•Satisfaction
29
USABILITY: LEARNABILITY
30
How essential is your site? Is it client or internal facing?Do I have to use it?
How many features do you have? It’s the difference between using a basic Google search and the Google advanced search.
Core experience Your product offering should be distilled to its most core elements. Desktop conventions for set up and customization may be too difficult to use in mobile.
Using features to remove workSensors of mobile platforms may allow you to skip steps and make a system easier to learn.
Mobile Implications
LEARNABILITY: PANTS
31
bonobos.com dockers.comvs
LEARNABILITY: PANTS
32
LEARNABILITY: DOCKERS
33
LEARNABILITY: MOBILE
34
source: http://www.uxbooth.com/blog/mobile-design-patters/
USABILITY: EFFICIENCY
35
Depth of interactionsSimple structure for both navigation and tasks.
Does my system give feedback? Reduce hesitation and confusion.
States, TransitionsLeave the same way you came in, know what you can do when you need to, satisfaction
Gesture Affordances Design and ergonomics increase ease and intuitiveness.
Feedback & LabelingDirect users and show them their interactions are being accepted.
Mobile Implications
EFFICIENCY: ASANA
36
EFFICIENCY: FITT’ S LAW
37
EFFICIENCY: TOUCH / DISCOVERABLE
38
MEMORABILITY
39
Do you repeat walk throughs or tips?If your site has many features then teaching everything at once will not help users who have a lot to remember. Begin with core functionality and save the advanced tips for later experiences.
How many steps does it take?Analyze all the tasks a user must go through and apply patterns where possible.
Recall vs RecognitionLabels or icons may be the difference between remembering something and being satisfied by design. Which is better?
Introducing new patterns As systems grow and meet the quickly growing capabilities, new interactions may mean throwing away familiar patterns.
Use what is at your disposal judiciouslyAnalyze all the tasks a user must go through and try to apply patterns where possible.
Mobile Implications
MEMORABILITY: ESCAPEFLIGHT.COM
40
MEMORABILITY: ESCAPEFLIGHT.COM
41
MEMORABILITY: ESCAPEFLIGHT.COM
42
USABILITY: ERROR MANAGEMENT
43
Are my error messages clear? Interactive Negative Space
How often are mistakes being made?Track early and often.
Is it the system or the user?Need can often be greater on mobile which means frustration comes quicker. Admit fault.
Opportunities aboundTurn empty sets and dead ends into opportunities and use empathy to avoid errors.
Mobile Implications
ERROR MANAGEMENT: KINDLE
44
ERROR MANAGEMENT: FLOW
45
USABILITY: SATISFACTION
46
How do you keep the users coming back?This is the most subjective part of usability.
What pleases as many users as possible?It is easy to get into a circular argument. Investigation is important.
InnovateShow OffTouchShow the wayAnimations
Mobile Implications
PAIRED ACTIVITYPair up with your neighbor and introduce yourself!
YOUR COMPANYS’ WEBSITE/APP
How easy is it for you to learn and start using it?
• Are there features that help make performing tasks more efficient?
• Are there features that make it easy for you to remember the tasks you are
performing?
• What errors are coming up? How are they handled?
• Is there anything else that makes the site particularly satisfying to use?
• What ideas do you have to improve on any of these usability principles?
48
VOLUNTEERS?
• Share what you came up with• What was done really well?• What ideas do you have to improve the usability?
49