The nature of mobile apps Going native Guiding principles Rule of thumb Navigation design patterns

transcript

• The nature of mobile apps• Going native• Guiding principles• Rule of thumb• Navigation design patterns

Topic 4: Introduction to mobile application design

By the end of this lecture you should be able to :•Understand how mobile apps differ from websites and other multimedia works•Define what is meant by a ‘native’ application•List some guiding principles for the design of mobile apps•Explain what is meant by the ‘rule of thumb’•Identify common navigation design patterns for both primary and secondary navigation•Explain what is meant by the term mobile information architecture•Explain the concept of a wireframe and flowchart and understand when it is appropriate to use them.

ANALYSIS

DESIGN

DEVELOPINTEGRATE

EVALUATE

The nature of mobile apps

Going native

Guiding principles

Rule of thumb

Navigation design patterns

Mobile information architecture

The nature of mobile apps is quite different to the nature of something like a multimedia work or a website.

Do you think this is true? Why/Why not?

Going native

Guiding principles

Rule of thumb

• Native as culturehttp://mobile.smashingmagazine.com/2012/06/18/mobile-considerations-in-user-experience-design-web-or-native/

Going native

Guiding principles

Rule of thumb

Guiding principles from Apple’s Human Interface Guidelines (Welch, 2011)

• Aesthetic Integrity

• Consistency

• Direct Manipulation

• Feedback

• Metaphors

• User Control

Going native

Guiding principles

Rule of thumb

The comfort zone for the right thumb falls on the opposite sideOf the screen, at the left edge and bottom of the screen. The top and bottom right are the toughest thumb zones for the right handed user. (Clark, 2011 – Tapworthy)

Going native

Guiding principles

Rule of thumb

Let your thumb point the way.

Going native

Guiding principles

Rule of thumb

What makes a good navigation?

Primary navigation patterns: • Springboard, • List Menu, • Tab Menu, Gallery, • Dashboard,• Metaphor, • Mega Menu

Secondary navigation patterns:• page carousel• image carousel• expanding list

Going native

Guiding principles

Rule of thumb

Primary navigation patterns: Topic 4: Introduction to mobile application design

Topic 4: An Introduction to JavaScript

Going native

Guiding principles

Rule of thumb

Primary navigation patterns:

(Neil, 2012- mobile design pattern gallery)

Going native

Guiding principles

Rule of thumb

Neil, 2012)

Going native

Guiding principles

Rule of thumb

Neil, 2012)

Going native

Guiding principles

Rule of thumb

Neil, 2012)

Going native

Guiding principles

Rule of thumb

Neil, 2012)

Going native

Guiding principles

Rule of thumb

Neil, 2012)

Going native

Guiding principles

Rule of thumb

Neil, 2012)

Going native

Guiding principles

Rule of thumb

Neil, 2012)

Going native

Guiding principles

Rule of thumb

Neil, 2012)

Going native

Guiding principles

Rule of thumb

Neil, 2012)

• The nature of mobile apps• Going native• Guiding principles• Rule of thumb• Navigation design patterns

By the end of this lecture you should be able to :•Understand how mobile apps differ from websites and other multimedia works•Define what is meant by a ‘native’ application•List some guiding principles for the design of mobile apps•Explain what is meant by the ‘rule of thumb’•Identify common navigation design patterns for both primary and secondary navigation•Explain what is meant by the term mobile information architecture•Explain the concept of a wireframe and flowchart and understand when it is appropriate to use them.

The nature of mobile apps Going native Guiding principles Rule of thumb Navigation design patterns

Documents