1. Why UX is Important
UXDI Lunch Talk
Sep 17, 2015
2. Hi, I am Chris R. Becker - chris@100yea.rs
@cbecker
I have a background in
I have done projects for
Painting / Graphic Design - BFA : Colorado State Universi
MFA - Art Center College of Design : Media Design Program
Teach at: Art Center College of Design, Loyola Marymount Universi
UCLA-Extension
Mataxa, Art Center, JPL/NASA, VW, CB2, Adobe, Toyota, EA, Mael, Hyundai, Starwood Hotels, Fresh and Easy, HTC, OKGO, Hand Made Mobile,
Pearson, and More.
I am a
Sr. User Experience Designer at A Hundred Years
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, Yoi/Ferrazzi Greenlight & A Hundred Years
I
who dabbles in physical computing experiences
WHO IS THIS GUY?
2
3. 3
A Hundred Years is a design studio
committed to creating long-term impact
by imagining what's possible and driving
meaningful action today.
Who We Are
7. 7
Our Team
We are design thinkers, storytellers and
technologists with a sharp focus on
creating experiences that matter.
8. 8
Press & Awards
The Creative Force Behind The
World's Most Important Causes
Nonprofits, and Businesses, Can Be
Self-Sustaining. Just Think 100
Years Ahead
Webby
Awards8
W3
Awards6
Communicator
Awards3
11. AGENDA
•What is UX (user experience)?
•Why UX maers
•Who does UX?
•Q/A
11
12. שּׂmBL?
hp?
שּׂm Burners Lee
He made a proposal for an information management system in March 1989, and on 25
December 1990, with the help of Robert 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.
שּׂm 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
12
13. 13
1990 2000 2005 2010
HTML HTML5
2015
CSS
JavaScript
CSS3
HTML4
FLASH
timeline
You
Are
Here
Clients
might
be
here
14. A considered User Experience
But the Media Space Reali is :
Across Multi Platforms
WHAT IS THE PROBLEM?
14
17. Most people make the
mistake of thinking
design is what it looks
like. People think it’s
this veneer – that the
designers are handed
this box and told,
‘Make it look good!’
That’s not what we
think design is. It’s not
just what it looks like
and feels like. Design
is how it works.”
“
Steve Jobs, Apple CEO
18. UX TREATS COGNITIVE SCIENCE IS AN ART
18
Jacob
Gube
-‐
h,p://uxdesign.smashingmagazine.com/2010/10/05/what-‐is-‐user-‐experience-‐design-‐overview-‐tools-‐and-‐resources/
Decision Maps & trees
27. •User Researcher
–Identifies user behaviors, goals and needs through interviews, studies and surveys
–User testing & segmentation analysis
•Information Architect (IA)
–Defines the structure of a system, how content is described, organized and discovered
–Relates content and production
•Interaction Designer (IxD/UX Designer)
–Defines interactions, user flows, wireframes, and affordances of a system
–Creates protopes, defines interactions, user flows, time to task & outcomes
•Interface Designer / Visual Designer (UI / Design)
–Defines the User interface element (GUI sets), how content is described, organized and discovered
–Creates look and feel for systems with color, paern, iconography, pography and structure
•UI Developer
–Builds the system by interpreting the functional specification, sitemaps, wireframes while working within technical constraints
–Creates working protopes, defines limitations to
WHO DOES UX: UR ・ IA ・ IXD・ UI ・ DEV
27
28. USER RESEARCHER
• Identi user needs
and behaviors
– interviews
– surveys
– existing data
• Carry out user testing
– Paper protoping
– A/B testing
– Usabili / click tracking
28
29. INFORMATION ARCHITECTURE : STRUCTURE
29
+ + + + + +
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
Process Flows & TemplatesSite Maps
30. INTERACTION DESIGN: AFFORDANCE
“A potential action that is made possible by a given object”
30h,p://www.jnd.org/dn.mss/affordances_and.html
DONALD NORMAN
31. USER INTERFACE: GUI / UI PATTERNS
31
GUI (graphical User Interface) - wireframe templates GUI - Design Sets
32. DEVELOPMENT: IMPLEMENTATION
32
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.
Annotation & Functional Specs