Top Banner
MOBILE USER INTERFACE DESIGN
45
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Mobile UX Design workshop

MOBILE USER INTERFACE DESIGN

Page 2: Mobile UX Design workshop

VINCE BASKERVILLE DIRECTOR, USER EXPERIENCE @CALLRAIL

DESIGNING FOR MOBILE

Page 3: Mobile UX Design workshop
Page 4: Mobile UX Design workshop

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

Page 5: Mobile UX Design workshop

vince baskerville | @whoisvince#mobileUX

MOBILE FIRST OR RESPONSIVE WEB DESIGN?

Page 6: Mobile UX Design workshop

vince baskerville | @whoisvince#mobileUX

Page 7: Mobile UX Design workshop

vince baskerville | @whoisvince#mobileUX

Page 8: Mobile UX Design workshop

vince baskerville | @whoisvince#mobileUX

Page 9: Mobile UX Design workshop

vince baskerville | @whoisvince#mobileUX

Page 10: Mobile UX Design workshop

vince baskerville | @whoisvince#mobileUX

Page 11: Mobile UX Design workshop

Throughout the design process, our work should be situated in the context where it will be used

Page 12: Mobile UX Design workshop
Page 13: Mobile UX Design workshop

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

Page 14: Mobile UX Design workshop

vince baskerville | @whoisvince#mobileUX

INNOVATING CAPABILITIES

• Touch

• Location

• Orientation

• Voice

• Gesture

Page 15: Mobile UX Design workshop

vince baskerville | @whoisvince#mobileUX

Page 16: Mobile UX Design workshop

vince baskerville | @whoisvince#mobileUX

Page 17: Mobile UX Design workshop

vince baskerville | @whoisvince#mobileUX

INFORMATION ARCHITECTURE

Page 18: Mobile UX Design workshop

vince baskerville | @whoisvince#mobileUX

Page 19: Mobile UX Design workshop

vince baskerville | @whoisvince#mobileUX

Page 20: Mobile UX Design workshop

vince baskerville | @whoisvince#mobileUX

Page 21: Mobile UX Design workshop

vince baskerville | @whoisvince#mobileUX

Page 22: Mobile UX Design workshop

DESIGN FOR OPPOSABLE THUMBS

Page 23: Mobile UX Design workshop

vince baskerville | @whoisvince#mobileUX

Page 24: Mobile UX Design workshop

vince baskerville | @whoisvince#mobileUX

Page 25: Mobile UX Design workshop

44pts

vince baskerville | @whoisvince#mobileUX

Page 26: Mobile UX Design workshop

points vs pixels

vince baskerville | @whoisvince#mobileUX

Page 27: Mobile UX Design workshop

¯\_(ツ)_/¯

vince baskerville | @whoisvince#mobileUX

Page 28: Mobile UX Design workshop

vince baskerville | @whoisvince#mobileUX

Page 29: Mobile UX Design workshop

BAD EXAMPLES

Page 30: Mobile UX Design workshop

vince baskerville | @whoisvince#mobileUX

Page 31: Mobile UX Design workshop

vince baskerville | @whoisvince#mobileUX

Page 32: Mobile UX Design workshop

GOOD EXAMPLES

Page 34: Mobile UX Design workshop

ENGAGEMENT LOADS

Page 35: Mobile UX Design workshop

3 ENGAGEMENT LOAD TYPES

vince baskerville | @whoisvince#mobileUX

Cognitive Visual Motor

Page 36: Mobile UX Design workshop

COGNITIVE

vince baskerville | @whoisvince#mobileUX

In relation to thinking and the users memory; high human energy & attention

Page 37: Mobile UX Design workshop

VISUAL

vince baskerville | @whoisvince#mobileUX

Pertaining to the users perceiving, noticing the interface flow

Page 38: Mobile UX Design workshop

MOTOR

vince baskerville | @whoisvince#mobileUX

Physical actions; using the keyboard, taping, scrolling, pinching, zooming, etc

Page 39: Mobile UX Design workshop

vince baskerville | @whoisvince#mobileUX

cognitive loads are the *most expensive* —  take lots of human energy

while motor loads are least expensive

Page 40: Mobile UX Design workshop

vince baskerville | @whoisvince#mobileUX

Page 41: Mobile UX Design workshop

vince baskerville | @whoisvince#mobileUX

Page 42: Mobile UX Design workshop

vince baskerville | @whoisvince#mobileUX

Page 43: Mobile UX Design workshop

vince baskerville | @whoisvince#mobileUX

when you lower all the loads you are also lowering engagement and entertainment.

Page 44: Mobile UX Design workshop

Q&A

Page 45: Mobile UX Design workshop

STAY CLASSY