Ux design 101 crb 2

UX DESIGN 101 WELCOME!

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 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)

who dabbles in physical computing experiences

WHO IS THIS GUY?

SOME OF MY RECENT WORK

Mens Warehouse - Tux Rental Redesign CB2 - Physical Interactive Campaign

Moca - Interactive Conversation tracker OK GO music video - Interaction Builder

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

AGENDA

•What is UX?•Who does UX?•Principles of Usability•Paired Activity

Anyone Know who this is?

HISTORY LESSON

TimBL?Anyone Know who this is?

HISTORY LESSON

TimBL?

Tim Burners Lee

HISTORY LESSON

TimBL?

Tim Burners Lee

What did he do?

HISTORY LESSON

TimBL?

Tim Burners Lee

What did he do?

HISTORY LESSON

TimBL?

Tim Burners Lee

Hypertext Protocol with a server

What did he do?

HISTORY LESSON

TimBL?

Tim Burners Lee

The Internet was Invented!

What did he do?

HISTORY LESSON

TimBL?

Tim Burners Lee

What did he do?

HISTORY LESSON

TimBL?

Tim Burners Lee

What did he do?

HISTORY LESSON

TimBL?

Tim Burners Lee

What did he do?

HISTORY LESSON

TimBL?

Tim Burners Lee

HTML Hypertext Markup Language

What did he do?

HISTORY LESSON

TimBL?

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.

HTML Hypertext Markup Language

What did he do?

HISTORY LESSON

1990 2000 2007 2010

HTML HTML5

JavaScript

timeline

1990 2000 2007 2010

HTML HTML5

JavaScript

timeline

1990 2000 2007 2010

HTML HTML5

JavaScript

timeline You Are

1990 2000 2007 2010

HTML HTML5

JavaScript

timeline You Are

1990 2000 2007 2010

HTML HTML5

JavaScript

timeline You Are

HereClientsmight

be here

WHAT IS THE PROBLEM?

A considered User ExperienceWHAT IS THE PROBLEM?

A considered User Experience

Across Multi Platforms

But the Media Space Reality is :

WHAT IS UX?

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”

-‐Jesse James Garre"

JACOB GUBE

“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

Jacob Gube -‐ h"p://uxdesign.smashingmagazine.com/2010/10/05/what-‐is-‐user-‐experience-‐design-‐overview-‐tools-‐and-‐resources/

JESSE JAMES GARRETT

h"p://www.jjg.net/elements/pdf/elements.pdf

JESSE JAMES GARRETT

BUSINESS ANALYSIS & UX

SPECTRUM OF UX

WHO DOES UX?

WHO DOES UX: UR ･ IA ･ IXD･ DEV

• User Researcher

• User Researcher– Identifies user behaviours, goals and needs through interviews, studies and surveys

• Information Architect (IA)

• Information Architect (IA)– Defines the structure of a system, how content is described, organised and discovered

• Interaction Designer (IxD/UX Designer)

• Interaction Designer (IxD/UX Designer)– Defines interactions, user flows, wireframes, and affordances of a system

• UI Developer

• UI Developer– Builds the system by interpreting the functional specification, sitemaps, wireframes while working

within technical constraints

USER RESEARCHER

• Identify user needs and behaviors– interviews– surveys– existing data

• Carry out user testing– Paper prototyping – A/B testing– Usability / click tracking

IA: STRUCTURE

+ + + + + +

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

Launch

Users Projects

Edit Project

Download

Other User

Not Logged In

My Submits

IXD: WHAT IS AFFORDANCE

“A potential action that is made possible by a given object”

h"p://www.jnd.org/dn.mss/affordances_and.html

DONALD NORMAN

IXD: COUNT THE PERCEIVED AFFORDANCES

DEV: IMPLEMENTATION

Carrier 12:00 PM

MediaTask

TitleDescription

#Submit

sNew Task ProfileFeed

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

Category | ## | ## | ## Days leftDescription...

The Title of the Prject, by User Name Category | ## | ## | ## Days left

Description...

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

INTUITIVE

“There is no intuitive interface! Not even the Nipple, It’s all learned.”

Bruce Ediger

MEASURE UX: USABILITY

5 PRINCIPLES OF USABILITY

•Learnability•Efficiency•Memorability•Error Management•Satisfaction

USABILITY: LEARNABILITY

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

bonobos.com dockers.comvs

LEARNABILITY: PANTS

LEARNABILITY: DOCKERS

LEARNABILITY: MOBILE

source: http://www.uxbooth.com/blog/mobile-design-patters/

USABILITY: EFFICIENCY

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

EFFICIENCY: FITT’ S LAW

EFFICIENCY: TOUCH / DISCOVERABLE

MEMORABILITY

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

USABILITY: ERROR MANAGEMENT

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

ERROR MANAGEMENT: FLOW

USABILITY: SATISFACTION

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?

VOLUNTEERS?

• Share what you came up with• What was done really well?• What ideas do you have to improve the usability?

Ux design 101 crb 2

Documents

UX 101: The secrets of good (web & mobile) design

Crb Scam Final 25082011

UXPA DC UX 101 - User Research

The CRB scam

CRB Section 4

Transformingthecustomerexperience Crb 140621120111 Phpapp01

The UX Design 101- For Engaging Mobile Apps

Crb ip68 busbar system

UX 101: A quick & dirty introduction to user experience strategy & design

UX 101: Personas

UX Design Process 101: Where to start with UX

CV WITH CRB 2014

CRB Case View

UX Auditing 101

Understanding the Power of Lean UX - MentorMate · Understanding the Power of Lean UX A non-technical design guide for development professionals. Lean UX 101 1 Doing more with less

CRB, REVOLUTIONIZING THE CREDIT MARKET · 2016. 11. 24. · APPLICATION OF CRB CLEARANCE Q.6: Under what scenario is CRB Clearance not applicable? Q.7: I paid for CRB Clearance Certificate

CRB Examples

CRB 45 FG PDS.pdf

CRB Index 4 IG

Crb-532 Manual En