Why UX is Important UXDI Lunch Talk
Sep 17, 2015
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 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
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
4
Who We Are
DO GOOD BUSINESS
5
Who We Are
DO GOOD BUSINESS
6
A Hundred Years is about what’s possible.
Who We Are
7
Our Team
We are design thinkers, storytellers and technologists with a sharp focus on creating experiences that matter.
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
9
Who We’ve Helped
TED Ed
STATE OF CALIFORNIA
®
®®
Smithsonian
theintelligencegroupA DIVISION OF
LEARNING OBJECTIVES
• Why UX maers in modern businesses from startups to big corporations
• Who does UX
10
AGENDA
•What is UX (user experience)? •Why UX maers •Who does UX? •Q/A
11
?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
1990 2000 2005 2010
HTML HTML5
2015
CSS
JavaScript
CSS3
HTML4
FLASH
timeline You Are Here
Clients might be here
A considered User Experience
But the Media Space Reali is :
Across Multi Platforms
WHAT IS THE PROBLEM?
14
15
Title Page
Why UX Matters A quick overview
16
USER EXPERIENCE CONSIDERS :
Business Design
Technology
UX
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
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
UX IS MEASURABLE
19
PROCESS DIAGRAMS
20
h,p://www.jjg.net/elements/pdf/elements.pdf
USER EXPERIENCE TOUCH POINTS
21
“
Bruce Ediger
There is no intuitive interface!
Not even the Nipple,
It’s all learned.”
23
UX INFLUENCES “THE WHY” OF THE PROBLEM
24
UX IS PROCESS : ITERATIVE + AGILE
25
Title Page
Who Does UXSection Title Subhead
26
Fig 1: Joey Roth
•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
USER RESEARCHER• Identi user needs and behaviors – interviews – surveys – existing data
• Carry out user testing – Paper protoping – A/B testing – Usabili / click tracking
28
INFORMATION ARCHITECTURE : STRUCTURE
29
+ + + + + +
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
Process Flows & TemplatesSite Maps
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
USER INTERFACE: GUI / UI PATTERNS
31
GUI (graphical User Interface) - wireframe templates GUI - Design Sets
DEVELOPMENT: IMPLEMENTATION
32
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.
Annotation & Functional Specs
33
Title Page
Some UX PrinciplesSome of the Roles
5 PRINCIPLES OF UX & USABILITY
• Learnable • Efficient • Memorable • Good Error Management • Satisfying
34
UX RESOURCES WEBSITE/APPhp://uxmag.com/ hp://www.uxmaers.com hp://www.uxbooth.com hp://uxdesign.smashingmagazine.com/ hp://designmind.frogdesign.com/ hp://www.dexigner.com/ hp://wireframes.linowski.ca/ Human Centered Research hp://creativegood.com/blog/ hp://www.experientia.com hp://labs.ideo.com/ Mobile talk hp://www.touchytalk.com/?p=174
35
36
Title Page
Question and Answer
THANK YOU
37