Download Module 3 - Designing a mobile app. - O2 learn

O2 App Building Contest Module 3 – Designing a mobile app.

Rules to live by.

Respect the size of the screen • Optimize for mobile experience • Simple, clear navigation - Pick key functions that are critical • Less is more

Respect the size of the screen

Don’t reinvent the wheel • Convention works • Forget that "special revolutionary drop-down menu" • Be the user - Don't try technology for technology

3. Find X

Don’t reinvent the wheel

Always guide your user • Guide your users along the journey • Loading, updating in progress • Display user-friendly error messages

Always guide your user

Don’t squeeze the world in • Physically tiny screen • Avoid pixel/small font • Give enough space • Account for accidental touches • Think Bigger hit-area

Don’t make users type • Tiny keyboard • You need slender fingers • Pre-populate what you can • Give options and let users pick / auto-complete

Consider where your app will be used • While walking around, make sure that core app functions are easy to see and access is very important. • To sell products or services, make sure that the price, “buy” and “add to cart” buttons are large enough so that they can be easily accessed. • While sitting in a stationary spot, make sure that text is readable and legible and that it is easy to move through content.

Design for touch • Think about where you thumb sit when holding a mobile. This is why many applications have main menus and selectors at the bottom of the screen and content near the top. • Think about how you want to indicate touch feedback. Use visual cues to show that an item is either touchable or has been touched (eg. iPhone keyboard keys grow in size when you touch them). • Take advantage of gestures. Swiping forward and back, pinching to zoom and pulling-down to refresh, can add a lot to your app without taking up tons of space for buttons.

Design for touch

Terminology: Screenshot of an app with labels of elements

Different types of UI • It is a good idea to become familiar with the established general user expectations for each device. • If you lose someone right off the bat because you force him into unexpected methods of interacting with the application, it will be difficult to win that user back.

Example: User expectations (iOS vs. Android) Action

Turn feature on/off

Choose from list

Choose date/time

View current list selection

iOS

Switch

Checkmark

Picker

Disclosure arrow

Android

Checkbox

Radio button

Picker

Down arrow

Android user interface elements

iOS user interface elements

Windows phone user interface elements

Wireframes: Draw a skeleton of the different pages of the app

What is a wireframe? • A visual blueprint or guide that represents the skeletal framework of a app. • Arranges an apps content, including interface elements and navigational systems, and how they work together.

• Lacks typographic style, color, or graphics, since the main focus lies in functionality, behavior, and priority of content. • In other words, it focuses on “what a screen does, not what it looks like.”

Wireframes focus on ... • The kind of information displayed

• The range of functions available • The rules for displaying certain kinds of information

• The effect of different scenarios on the display

Important tips 1. Focus on the primary task. What is your app’s primary task? How will my main features work? Where is the most logical place for them to live within the app? 2. Create use case. Put some thought into who wants an app that performs this task! How will he / she use the app?

3. Draw out the Flow. Walk through the various paths the user could take in your app. 4. If you find yourself drawing a ton of screens, stop and ask yourself – how can I make this simple!

Example

Mood board: Define your target market using images.

What is a mood board and why is it important? • A compilation of inspirational elements used by designers to flesh out ideas at the beginning of a design project. • Extremely useful for establishing the aesthetic feel of an app. • Used to define style, color palettes, typography, patterns, and the overall look and feel of the site. (Example: Soft or hard? Grungy or clean? Dark or light?) • Words fail miserably when trying to translate design concepts. A rough collage of colors, textures and pictures is all it takes to evoke a specific style or feeling. A picture is worth a thousand words!

Example

Example

Example

Designers then use this information to create a simple, consistent app design that is easy-to-use and attractive to their target audience.

Good app design: O2 Healthy

Playful design

Uses native swipe

Clear, simple labeling

Consistent look & feel

Bad example: Health Pad

Small font No hierarchy with headers

Unclear button

Lacks personality

Additional sources •

http://mobile-patterns.com/

•

http://www.lovelyui.com/

•

http://www.erikloehfelm.com/iphone_sketches/iphone_sketchboard.pdf

•

http://blog.merrycode.com/wpcontent/uploads/2010/09/windowsphone7UXsketches4.png

•

http://gliderguns.files.wordpress.com/2010/01/android_wireframe_templates3.pdf

•

http://www.slideshare.net/ronnieliew/mobile-application-design-development5465097

Additional sources (pg. 2) •

http://www.smashingmagazine.com/2009/07/21/iphone-apps-design-mistakesoverblown-visuals/

•

http://johnnyholland.org/2010/09/06/android-iphone-app-design-is-it-twice-the-work/

•

http://anthonyarmendariz.carbonmade.com/projects/2518050#21

•

http://mobile.tutsplus.com/tutorials/mobile-design-tutorials/5-steps-for-wireframingand-paper-prototyping-mobile-apps/

•

http://superdit.com/2011/10/11/10-mobile-app-wireframing-tools/

•

http://www.webdesignerdepot.com/2008/12/why-mood-boards-matter/

•

http://www.slideshare.net/guest924bb5c/mood-board-analysis

Thank you