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! Indiaashutoshk77@yahoo.com

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