Crafting Great User Experience
-
Upload
ashutosh-kumar -
Category
Design
-
view
923 -
download
0
description
Transcript of Crafting Great User Experience
1
crafting a great UXmobilefirst FE design & development meet 31 MAR 2013ashutosh kumar Yahoo! Design
Yahoo! Confidential
about meindustrial designer IIT mumbai
ux design practitioner since 12 years
principal designer Yahoo! [email protected]
Yahoo! Confidential
what is great UXa holistic experience which appears
like a modern art that makes you think “I could do that” but you didn’t.
Yahoo! Confidential
few great user experiences
Yahoo! Confidential
characteristics of great UX
Simplicity why didn’t i think like this before
Minimalistic through thoughtful reduction
Useful justifies its creation
Unobtrusive doesn't come in the users’ way
Yahoo! Confidential
how to dofollow experience design principles
leverage visual design
prototype instead of wireframes
define your design principles
Yahoo! Confidential
principles of experience design
Provide context
Limit distractions
Reduce visual clutter
Provide information hierarchy that matches user needs
Provide strong “you are here” cue
Provide feedback
Make actions reversible
Create aesthetic appeal
Yahoo! Confidential
create an aesthetic appeal
if an outcome is not aesthetically rich, it is not the optimum design solution
- buckminster fuller
Yahoo! Confidential
create an aesthetic appeal
if outcome is not aesthetically rich, it is not the optimum design solution
- buckminster fuller
Yahoo! Confidential
typography - the most powerful element
with “flat design” trend, typography has become too important
use fonts beautifully designed and comfortable to readuse subtle – all-purpose – must not make strong statements via appearanceuse fonts that provide broad character support for multiple languages
Yahoo! Confidential
typographic power
with “flat design” trend, typography has become too important
use fonts beautifully designed and comfortable to readuse subtle – all-purpose – must not make strong statements via appearanceuse fonts that provide broad character support for multiple languages
Yahoo! Confidential
play with subtle texture
reveal the fine character
communicate message with power and emphasis
fill white spaces for a visual interest
Yahoo! Confidential
creating delightful interactions
Yahoo! Confidential
responsive design - thoughtful reduction
Yahoo! Confidential
leveraging HTML5
Paper fold behaviorto create novel and rich interactions
3D elementsto create visual interest
CSS3 properties http://leaverou.github.com/animatable/
Yahoo! Confidential
prototype before you build
Wireframe or graphic mock is not enoughprototyping conveys the “magic” of a web application
Static mocks doesn’t help in visualizing dynamic interactionssee problems more clearly—and often earlier
Show it instead of telling storiesusers, customers, designers, developer all will be benefited
Makes development smoothernobody reads hundreds pages of specs and written interactions
Yahoo! Confidential
define your design principles
Sophistication Follow a clear design vision. Make sure that the details consistently support the vision.
Desirability Establish a premium quality of beautiful design. Maintain the highest possible standard.
SimplicityOrganize for productivity. Make it easy to use.
Subtlety Don’t be loud or let the design eclipse content or function.
SeriousnessBe visually clear and not too playful.
Continuity Maintain established design conventions and evolve carefully. Build upon the strengths of the past.
Yahoo! Confidential
set a design language
Yahoo! Confidential
Design at Yahoo!
20
Thank You
Credits: Yahoo! Images, Flickr, Google Images, design blogs