the nature of mobile apps going native guiding principles rule of thumb navigation design patterns
DESCRIPTION
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 - PowerPoint PPT PresentationTRANSCRIPT
• 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?
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 culturehttp://mobile.smashingmagazine.com/2012/06/18/mobile-considerations-in-user-experience-design-web-or-native/
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 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)
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, 2012- 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, 2012- 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, 2012- 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, 2012- 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, 2012- 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, 2012- 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, 2012- 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, 2012- 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, 2012- 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, 2012- 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.