Why UX is Important UXDI Lunch Talk

Sep 17, 2015

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

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