ux design workshop
DESCRIPTION
User Experience Design: A basic level understanding of UXD for developer community. This is a quick summary and also consists of few tips and tricks to make your application usable.TRANSCRIPT
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
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