Mobile Monday

20
EffectiveUI Juan Sanchez | Experience Architect

description

A presentation from Mobile Monday Colorado on Mobile UI Design.

Transcript of Mobile Monday

Page 1: Mobile Monday

EffectiveUIJuan Sanchez | Experience Architect

Page 2: Mobile Monday

Who is this guy?

Page 3: Mobile Monday

EffectiveUI?

Page 4: Mobile Monday

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.

Page 5: Mobile Monday

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

Page 6: Mobile Monday

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

Page 7: Mobile Monday

EffectiveUI + eBay

Page 8: Mobile Monday

EffectiveUI + Herff Jones

Page 9: Mobile Monday

EffectiveUI + National Geographic

Page 10: Mobile Monday

EffectiveUI + Mobile

Page 11: Mobile Monday

Lessons LearnedMobile UI Design

Page 12: Mobile Monday

• 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

Page 13: Mobile Monday

• 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

Page 14: Mobile Monday

• 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

Page 15: Mobile Monday

• “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

Page 16: Mobile Monday

• 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

Page 17: Mobile Monday

• 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

Page 18: Mobile Monday

• 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

Page 19: Mobile Monday

• Test interactions

• Gestures

• UI overload/fatigue

• Performance

Mobile UI Design: Test, test, test

Page 20: Mobile Monday

Any questions?