Mobile UXDmytro Svarytsevych, SoftServe

How we use mobiles?

•Messaging•Audio•Imaging, Media Sharing•Microblogging, Social Media•Location-Based•Enterprise•Search, QR Codes•Phone, VoIP•Games

HOW?

• distractions• small screens• one thumb input• little battery

WHERE?

• at home•misc. situations during day•waiting in line• at work

UX

MOBILE BEHAVIORS

•What mobile is good at•Content first, navigation - second•Adjust app organization accordingly•Don’t dumb site down for mobile

TOUCH TARGETS

COMFORT ZONE

EXCESSIVE NAVIGATION

QUICK ACCESS

CONTEXT ACTIONS

FIXED POSITIONING

REDUCE SIZE

•Eliminate redirects•Use CSS sprites•Single files•Minify code•Load contents lazily•Use cache•Use CSS3 possibilities

LEAN ON CSS3

•border-radius•rgba-color•text-shadow•box-shadow•gradients•multiple backgrounds

CLARITY AND FOCUS

•Minimize navigation required•Focus on task

OPTIMIZING SCREEN

Text

http://www.useit.com/alertbox/mobile-redesign.html

OPTIMIZING SCREEN

Text

http://www.useit.com/alertbox/mobile-redesign.html

Web Apps UX

WHO CARES ABOUT UX?

TITLE BAR

TAB BAR

TITLE & TAB BAR

DASHBOARD

TAB BAR VS. DASHBOARD

Mobile Web vs. Native

Native App vs. Web App Hardware features Only GPS

Compiled Code, High Performance Interpreted Code

High Security Low Security

Normal Storage Limited Storage

Complex Gestures Only basic

UI pack for every screen One UI pack

No sharing possible Can share URL

Lower battery use GPRS, Wi Fi or 3G grabs battery

Native Apps - for doing

•Photo editing•Video overlays•Augmented reality•Interactive games

Web Apps - for reference

•To-do's•Schedule•Mail•News•Galleries

Useful Links

• http://mobile-patterns.com• http://pttrns.com• http://androidpatterns.com• http://lovelyui.com

Books