Quick Guide to Designing Usable Mobile UI A 80 minute workshop at Mobile World India 2013 delivered by

Aurobinda Pradhan & V Durga Prasad of PeepalDesign

Design is to invent with intent.

If you take away the ‘invent’ bit, you have an engineer.

If you take away the ‘intent’ bit, you have an artist.

So what is this quick guide all about?

GET YOUR BASICS RIGHT

STICK TO A PROCESS

FOLLOW DESIGN PRINCIPLES

LEARN CONTINUOUSLY

Get Your Basics Right 1.  Stay inspired by real world 2.  Observe people & context 3.  Appreciate constraints but don’t let them dictate your vision

Stay inspired by real world

Observe people & context

Appreciate constraints but don’t let them dictate your vision

Get Your Basics Right

Stay inspired by real world

Observe people & context

Appreciate constraints but don’t let them dictate your vision

Let’s think of a mobile app to order a Pizza

Stay inspired by real world

Observe people & context

Key Takeaways -  People always look for a good deal -  Based on the context they look for a meal or a snack -  Decision is usually based on where the pizza is being

consumed

-  Health conscious people tend to worry about calories/fat content, but hardly ever ask these questions while placing an order

-  Environmental friendly people look forward to reuse/recycle aspects of the delivery

Stick to a Process 1.  Scope your application 2.  Tell a story through storyboard 3.  Conceptualize and define a vision 4.  Architect the information 5.  Map the info arch to wireframes 6.  Build the right interaction flow 7.  Test it with real users 8.  Give it a great visual polish

Scope your application

Use Case-1 -  Select a pizza Use Case-2 -  Look for Offers Use Case-3 -  Order Quickly

Use Case-4 -  Check Order Status

Use Case-5 - View Calories

Tell a story through storyboard

http://theflippydochronicles.blogspot.in/2012/04/my-dinosaur-husband.html

Conceptualize and define a vision

Architect the information

Map the info arch to wireframes

Build the right interaction flow

Test it with real users

Give it a cool visual polish

Stick to a Process 1.  Scope your application 2.  Tell a story through storyboard 3.  Conceptualize and define a vision 4.  Architect the information 5.  Map the info arch to wireframes 6.  Build the right interaction flow 7.  Test it with real users 8.  Give it a great visual polish

Follow Design Principles 1.  Be Methodical (its no abstract painting) 2.  Follow a visual language 3.  Keep design clean 4.  Accentuate what is important 5.  Make it life like 6.  Make it lively 7.  Let information stand out 8.  Make it fit into different user and usage context

Be Methodical (it’s no abstract painting)

Define & follow a visual language

Keep design clean

Accentuate what is important

Make it life like

Make it lively

Let information speak

Make it fit into different user and usage context

Follow Design Principles 1.  Be Methodical (its no abstract painting) 2.  Follow a visual language 3.  Keep design clean 4.  Accentuate what is important 5.  Make it life like 6.  Make it lively 7.  Let information stand out 8.  Make it fit into different user and usage context

Build

Learn Continuously 1.  Get a fair understanding of target platforms and design constraints 2.  Get a good hang of pre defined standards & guidelines 3.  Learn about gestures, transitions, motions & interactions 4.  Keep learning

Get a fair understanding of target platforms and design constraints

Get a good hang of pre defined standards & guidelines

Learn about gestures, transitions & motions & interactions

... keep learning & keep innovating

GET YOUR BASICS RIGHT

STICK TO A PROCESS

FOLLOW DESIGN PRINCIPLES

LEARN CONTINUOUSLY

Coming Soon UX Workshops by PeepalDesign Follow us to stay tuned Facebook: /PeepalDesign Twitter: @peepaldesign Linkedin: company/peepaldesign

http://www.visualquest.in/2011/04/gestalt-principles-doughnut-chartspies.html http://psychology.about.com/od/sensationandperception/ss/gestaltlaws.htm http://asinthecity.com/2011/05/13/explaining-personas-used-in-ux-design-%E2%80%93-part-2/ http://www.docstoc.com/docs/23416566/Writing-Effective-Use-Cases http://developer.ean.com/docs/best_practices/mobile/ http://www.smashingmagazine.com/smashing-newsletter-issue-47/

Some of the Image Credits