2. Hi, I am Chris R. Becker - chris@chrisrbecker.com
@cbecker
I have a background in
I have done projects for
Painting / Graphic Design - BFA : Colorado State University
MFA - Art Center College of Design : Media Design Program
Adjunct 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
3. 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. 4
Senior UX at TwoBit Circus
twobitcircus.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
5. 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
15. 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
18. 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
19. TimBL?
http?
Tim Burners Lee
He 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
36. 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"
37. 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
38. 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/
46. 20
• User Researcher
– Identifies user behaviours, goals and needs through interviews, studies and surveys
WHO DOES UX: UR ･ IA ･ IXD･ DEV
47. 20
• User Researcher
– Identifies user behaviours, goals and needs through interviews, studies and surveys
WHO DOES UX: UR ･ IA ･ IXD･ DEV
48. 20
• User Researcher
– Identifies user behaviours, goals and needs through interviews, studies and surveys
• Information Architect (IA)
WHO DOES UX: UR ･ IA ･ IXD･ DEV
49. 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
50. 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
51. 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
52. 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
53. 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
54. 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
55. 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
56. USER RESEARCHER
• Identify user needs and behaviors
– interviews
– surveys
– existing data
• Carry out user testing
– Paper prototyping
– A/B testing
– Usability / click tracking
21
57. IA: STRUCTURE
22
+ + + + + +
2
Saved
Search
Starre
d
Followin
g
Recen
t
Popula
r
Nearb
y
Filte
r
Searc
h
Result
s
Projec
t
Galler
y
Submi
t
New
Project
My
Profile
Setting
s
Edit
Profile
Adv
Options
Edit
Notification
Edit
Sharing
Users
Starred
User
Profile
Users
Submits
My
Projects
Share
Logi
n
Home
Launch
Users
Projects
Edit
Projec
t
Download
Other
User
Not
Logge
d In
Hel
p
+
My
Submit
s
58. 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
76. 25
DEV: IMPLEMENTATION
Carrier 12:00 PM
MediaTask
Title
Description
#
Submit
sNew Task ProfileFeed
Title
Description
#
Title
Description
#
Title
Description
#
T7 Profile Page
Tap to view Profile
Page. Transitional
animation: no
animation
T8 Create Project
Tap 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 Page
Tap 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 Info
Tap to view Info
page.
Transitional
animation: slide
up from bottom
T10 Search
Tap 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 Filter
Tap to view Info
Filters.
Transitional
animation: slide
up from bottom
Carrier 12:00 PM
Title
Category ## photos ## videos submitted
User Name
My Projects Recent Popular
MediaTask
T8 Create Project
Tap 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 left
Descriptio
n...
10/40
The Title of the
Prject, by User
Name Category | ## | ## | ## Days left
Descriptio
n...
10/40
The Title of the
Prject, by User
Name Category | ## | ## | ## Days left
Descriptio
n...
Swipe to navigate, tap to
select Feeds . Default feed is
Recent.
T5 Project Page
Tap 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 Page
Tap to view Profile Page.
Transitional animation: no
animation
M3 Filter
Tap 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.
Feeds
My Submissions
Starred
My Projects
Following
Recent
Popular
Nearby
T10 Search
Tap 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.
81. 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 work
Sensors of mobile platforms may allow you to skip steps and make a system easier to learn.
Mobile Implications
86. USABILITY: EFFICIENCY
35
Depth of interactions
Simple structure for both navigation and tasks.
Does my system give feedback?
Reduce hesitation and confusion.
States, Transitions
Leave 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 & Labeling
Direct users and show them their interactions are being accepted.
Mobile Implications
90. 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 Recognition
Labels 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 judiciously
Analyze all the tasks a user must go through and try to apply patterns where possible.
Mobile Implications
94. 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 abound
Turn empty sets and dead ends into opportunities and use empathy to avoid errors.
Mobile Implications
97. 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
99. 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
100. VOLUNTEERS?
• Share what you came up with
• What was done really well?
• What ideas do you have to improve the usability?
49
