1 / 19

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

rhoda
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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. The nature of mobile apps Going native Guiding principles Rule of thumb Navigation design patterns

  2. 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 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?

  3. 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 http://mobile.smashingmagazine.com/2012/06/18/mobile-considerations-in-user-experience-design-web-or-native/

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

  5. 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)

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

  7. Topic 4: Introduction to mobile application design What makes a good navigation? • The nature of mobile apps • Going native • Guiding principles • Rule of thumb • Navigation design patterns • Mobile information architecture • Primary navigation patterns: • Springboard, • List Menu, • Tab Menu, Gallery, • Dashboard, • Metaphor, • Mega Menu • Secondary navigation patterns: • page carousel • image carousel • expanding list

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

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

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

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

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

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

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

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

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

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

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

  19. 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. The nature of mobile apps Going native Guiding principles Rule of thumb Navigation design patterns

More Related