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. ANALYSISDESIGNDEVELOPINTEGRATEEVALUATE

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? Topic 4: Introduction to mobile application design

The nature of mobile apps Going native Guiding principles Rule of thumb Navigation design patterns Mobile information architecture Native as culture Topic 4: Introduction to mobile application design

The nature of mobile apps Going native Guiding principles Rule of thumb Navigation design patterns Mobile information architecture Guiding principles from Apple’s Human Interface Guidelines (Welch, 2011) Aesthetic Integrity Consistency Direct Manipulation Feedback Metaphors User Control Topic 4: Introduction to mobile application design

The nature of mobile apps Going native Guiding principles Rule of thumb Navigation design patterns Mobile information architecture The comfort zone for the right thumb falls on the opposite side Of 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) Topic 4: Introduction to mobile application design

The nature of mobile apps Going native Guiding principles Rule of thumb Navigation design patterns Mobile information architecture Let your thumb point the way. Topic 4: Introduction to mobile application design

The nature of mobile apps Going native Guiding principles Rule of thumb Navigation design patterns Mobile information architecture 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 Topic 4: Introduction to mobile application design

The nature of mobile apps Going native Guiding principles Rule of thumb Navigation design patterns Mobile information architecture Primary navigation patterns: Topic 4: Introduction to mobile application design

Topic 4: An Introduction to JavaScript The nature of mobile apps Going native Guiding principles Rule of thumb Navigation design patterns Mobile information architecture Primary navigation patterns: (Neil, mobile design pattern gallery) Primary navigation patterns:

Topic 4: An Introduction to JavaScript The nature of mobile apps Going native Guiding principles Rule of thumb Navigation design patterns Mobile information architecture Primary navigation patterns: Neil, 2012) (Neil, mobile design pattern gallery) Primary navigation patterns:

Topic 4: An Introduction to JavaScript The nature of mobile apps Going native Guiding principles Rule of thumb Navigation design patterns Mobile information architecture Primary navigation patterns: Neil, 2012) (Neil, mobile design pattern gallery) Primary navigation patterns:

Topic 4: An Introduction to JavaScript The nature of mobile apps Going native Guiding principles Rule of thumb Navigation design patterns Mobile information architecture Primary navigation patterns: Neil, 2012) (Neil, mobile design pattern gallery) Primary navigation patterns:

Topic 4: An Introduction to JavaScript The nature of mobile apps Going native Guiding principles Rule of thumb Navigation design patterns Mobile information architecture Primary navigation patterns: Neil, 2012) (Neil, mobile design pattern gallery) Primary navigation patterns:

Topic 4: An Introduction to JavaScript The nature of mobile apps Going native Guiding principles Rule of thumb Navigation design patterns Mobile information architecture Primary navigation patterns: Neil, 2012) (Neil, mobile design pattern gallery) Primary navigation patterns:

Topic 4: An Introduction to JavaScript The nature of mobile apps Going native Guiding principles Rule of thumb Navigation design patterns Mobile information architecture Primary navigation patterns: Neil, 2012) (Neil, mobile design pattern gallery) Primary navigation patterns:

Topic 4: An Introduction to JavaScript The nature of mobile apps Going native Guiding principles Rule of thumb Navigation design patterns Mobile information architecture Primary navigation patterns: Neil, 2012) (Neil, mobile design pattern gallery) Primary navigation patterns:

Topic 4: An Introduction to JavaScript The nature of mobile apps Going native Guiding principles Rule of thumb Navigation design patterns Mobile information architecture Primary navigation patterns: Neil, 2012) (Neil, mobile design pattern gallery) Primary navigation patterns:

Topic 4: An Introduction to JavaScript The nature of mobile apps Going native Guiding principles Rule of thumb Navigation design patterns Mobile information architecture Primary navigation patterns: Neil, 2012) (Neil, mobile design pattern gallery) Primary navigation patterns:

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.