Mobile Monday

Post on 01-Nov-2014

2.501 views 1 download

Tags:

description

A presentation from Mobile Monday Colorado on Mobile UI Design.

Transcript of Mobile Monday

EffectiveUIJuan Sanchez | Experience Architect

Who is this guy?

EffectiveUI?

EffectiveUI is a user experience agency

EffectiveUI is an award-winning, user-centered design

and development agency that creates and implements

custom web, mobile and desktop applications for

today’s most respected organizations.

What EffectiveUI does

• User Research

• Competitive Analysis

• Use Case Development

• Interaction Design

• UI Development

• User Acceptance

• API Architecture

Legacy Systems

API

Mobile Desktop Web

User Experience and Design

8 criteria for good user experience

• provide valuable feedback

• behave with consistency

• behave in a familiar way

• be obvious and efficient

• be responsive and perform

• help people and businesses accomplish goals

• be brand consistent and elegant

• be progressive and trustworthy

EffectiveUI + eBay

EffectiveUI + Herff Jones

EffectiveUI + National Geographic

EffectiveUI + Mobile

Lessons LearnedMobile UI Design

• What’s the “soul” of the app?

• Find the true use for the application and what sets it apart from other applications

• Mobile does not mean shrinking your website or app down, it degrades the experience

• Can it be a web app?

Mobile UI Design: Figure out what matters

• How is this app going to be used?

• Primary touch point?

• Companion application?

• Optimized UI for a larger app?

• A lot of what's done with a mobile app informs the mobile or web app

Mobile UI Design: What’s the use case?

Image via mindingthegaps.com

• Device prototypes

• Made a wooden iPad to test before device was available

• Go to Best Buy and play around with the phones, cameras, TVs, etc. They're a great device lab.

Mobile UI Design: Device knowledge

• “Small things” like app icons can make a difference

• Metaphors can work

• Design can win over features

• Maintain focussed views

• Don’t overwhelm*

• Remember how people interact with devices: fingers

• Long processes can be smoothed over with delightful interactions

Mobile UI Design: Appearance

• Use the native UI

• Read the HIG and design guidelines

• Follow established conventions

• Don't follow established conventions

Mobile UI Design: Design jump starts

Image via metaspark.com

• Get designers as close to the real thing as you can

• Get them set up with the dev environment

• Test and run on the simulators

• Even better, get them loading on to a device

• Show them what it means to implement their designs

• Even let them add assets and commit :-O ?!??!

Mobile UI Design: Help designers see

Image via blogs.tech-recipes.com

• Testing your design

• Create a simple HTML website with hotspots and send the URL to a client

• Email images to a client that they can load in their phone

• Great way to show clients what their (and your) decisions mean

Mobile UI Design: Help clients see

Image via testiphone.com

• Test interactions

• Gestures

• UI overload/fatigue

• Performance

Mobile UI Design: Test, test, test

Any questions?