MOBILE USER INTERFACE DESIGN
VINCE BASKERVILLE DIRECTOR, USER EXPERIENCE @CALLRAIL
DESIGNING FOR MOBILE
vince baskerville | @whoisvince#mobileUX
LEARNING OBJECTIVES
‣Discuss the considerations designers need to take into account when designing for mobile experiences
‣Understand how to design simple, but powerful interfaces for mobile screens
vince baskerville | @whoisvince#mobileUX
MOBILE FIRST OR RESPONSIVE WEB DESIGN?
vince baskerville | @whoisvince#mobileUX
vince baskerville | @whoisvince#mobileUX
vince baskerville | @whoisvince#mobileUX
vince baskerville | @whoisvince#mobileUX
vince baskerville | @whoisvince#mobileUX
Throughout the design process, our work should be situated in the context where it will be used
vince baskerville | @whoisvince#mobileUX
A FOCUS ON CONSTRAINTS
• Forces us to keep content relevant
• No hover — information needs to be at-the-ready
• Speed! Speed! Speed!
• Context matters
vince baskerville | @whoisvince#mobileUX
INNOVATING CAPABILITIES
• Touch
• Location
• Orientation
• Voice
• Gesture
vince baskerville | @whoisvince#mobileUX
vince baskerville | @whoisvince#mobileUX
vince baskerville | @whoisvince#mobileUX
INFORMATION ARCHITECTURE
vince baskerville | @whoisvince#mobileUX
vince baskerville | @whoisvince#mobileUX
vince baskerville | @whoisvince#mobileUX
vince baskerville | @whoisvince#mobileUX
DESIGN FOR OPPOSABLE THUMBS
vince baskerville | @whoisvince#mobileUX
vince baskerville | @whoisvince#mobileUX
44pts
vince baskerville | @whoisvince#mobileUX
points vs pixels
vince baskerville | @whoisvince#mobileUX
¯\_(ツ)_/¯
vince baskerville | @whoisvince#mobileUX
vince baskerville | @whoisvince#mobileUX
vince baskerville | @whoisvince#mobileUX
vince baskerville | @whoisvince#mobileUX
3 ENGAGEMENT LOAD TYPES
vince baskerville | @whoisvince#mobileUX
Cognitive Visual Motor
COGNITIVE
vince baskerville | @whoisvince#mobileUX
In relation to thinking and the users memory; high human energy & attention
VISUAL
vince baskerville | @whoisvince#mobileUX
Pertaining to the users perceiving, noticing the interface flow
MOTOR
vince baskerville | @whoisvince#mobileUX
Physical actions; using the keyboard, taping, scrolling, pinching, zooming, etc
vince baskerville | @whoisvince#mobileUX
cognitive loads are the *most expensive* — take lots of human energy
while motor loads are least expensive
vince baskerville | @whoisvince#mobileUX
vince baskerville | @whoisvince#mobileUX
vince baskerville | @whoisvince#mobileUX
vince baskerville | @whoisvince#mobileUX
when you lower all the loads you are also lowering engagement and entertainment.