Vashist

User Experience Design Workshop

Vashist

Vashist

UI Process

Dialog

What is UX?

Discussions

UI Design

Techniques

Fun

Workshop

Vashist

Do you really believe what your eyes see?

Vashist

Do you really believe what your eyes see?

Vashist

Charlie Chaplin – Illusion

Vashist

Now that we know, what next?

Vashist

Some Background

Vashist

Usability Definition

• [Usability refers to] the extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use." - ISO 9241-11

Vashist

Who would be using this

application?

What this user would like to

achieve?

Where this user would be

achieving this goal?

Vashist

UserWho would be using this

application?

Persona

Create Scenarios

Can’t be “ALL USERS”

Tasks profiling

Vashist

Understand primary

tasks

GoalWhat this user would like to

achieve?

Focus on important

things

More features less

usability

Vashist

ContextWhere this user would be

achieving this goal?

Personal Interview

Surveys

Contextual Inquiry

Focus Group Support Line

Email

Vashist

Enough theories, How do I design a web app?

Vashist

Vashist

This is where it all begins.

What user want?

Application Feature?

BRS

Vashist

This step transforms strategy into requirements.

SRS

Functional & UI

requirement

Vashist

This gives shape to the scope.

Navigation

Sitemap

Vashist

It makes the site concrete.

Wireframes

Storyboards

Prototype

IA

Vashist

Surface brings everything together visually.

Graphics

Icons

Colors

Vashist

Go low level and talk about design elements

Vashist

Online vs. print content

Create accessible

links

Web users scan text

User short & simple words

Inverted pyramid writing

Vashist

Some gyan about fonts

Times New Roman is a common serif font

Verdana is a common sans serif font

Courier is a monospace font

Times New Roman is a proportional spaced font

Font

Font

Font

Font

Vashist

Avoid italics

Capital = 14-20% less

readable

Sans serif are build for

web 10 points or larger is safe

font gyan continues

Aoccdrnig to rseerach at Cmabrigde Uinervtisy, it deosn't mttaer in waht oredr the ltteers in a wrod are, the olny iprmoatnt tihng is taht the frist and lsat ltteer be at the rghit pclae. The rset can be a total mses and you can sitll raed it wouthit porbelm. Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef, but the wrod as a wlohe.

Amzanig huh?

Vashist

Yo u a e not r adi g th s.

C a y u rea t is?

W at ar ou rea in ?

Vashist

Get user attention

Vashist

Use of colors

Do not use pure red or

blue

Do not use more than 6

colors

7% of population

is color blind Blue is a

safe color

Vashist

Try this color illusion

Vashist

Vashist

Vashist

Use of icons

Familiarity reduces learning Meaning

less icons

Inconsistent icons Unlabeled

icons

Avoid Popular

metaphors

Vashist

Usage of buttons

Button = Action

Link = Navigation

Consistency

Affordance

Vashist

Radio button, dropdown, or shuttle

Number of items

Usage pattern

Space constrain

Searching capability

Auto complete

Vashist

Error handling

Suggest solution

Prevent error

Keep it together

Think about the message

Never show system errors