Topic
This presentation is the property of its rightful owner.
Sponsored Links
1 / 19

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


  • 154 Views
  • Uploaded on
  • Presentation posted in: General

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

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

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

The nature of mobile apps

Going native

Guiding principles

Rule of thumb

Navigation design patterns


The nature of mobile apps going native guiding principles rule of thumb navigation design patterns

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?


The nature of mobile apps going native guiding principles rule of thumb navigation design patterns

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/


The nature of mobile apps going native guiding principles rule of thumb navigation design patterns

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


The nature of mobile apps going native guiding principles rule of thumb navigation design patterns

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)


The nature of mobile apps going native guiding principles rule of thumb navigation design patterns

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.


The nature of mobile apps going native guiding principles rule of thumb navigation design patterns

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


The nature of mobile apps going native guiding principles rule of thumb navigation design patterns

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


The nature of mobile apps going native guiding principles rule of thumb navigation design patterns

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)


The nature of mobile apps going native guiding principles rule of thumb navigation design patterns

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)


The nature of mobile apps going native guiding principles rule of thumb navigation design patterns

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)


The nature of mobile apps going native guiding principles rule of thumb navigation design patterns

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)


The nature of mobile apps going native guiding principles rule of thumb navigation design patterns

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)


The nature of mobile apps going native guiding principles rule of thumb navigation design patterns

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)


The nature of mobile apps going native guiding principles rule of thumb navigation design patterns

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)


The nature of mobile apps going native guiding principles rule of thumb navigation design patterns

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)


The nature of mobile apps going native guiding principles rule of thumb navigation design patterns

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)


The nature of mobile apps going native guiding principles rule of thumb navigation design patterns

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)


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.

The nature of mobile apps

Going native

Guiding principles

Rule of thumb

Navigation design patterns


  • Login