Week 7: App Interface Design (UI)

Launch screens

  • Launch screens are used to reinforce the branding of the app.
  • Also allows the app to load in the background.
  • Launch screens are not to be confused with the home screen, as you wouldn’t go back to the launch screen after getting into the app.

Examples of iOS launch screens:

Screen Shot 2017-05-25 at 10.06.21 am

Examples of Android launch screens:

Screen Shot 2017-05-25 at 10.07.38 am

The Tray

  • Allows the designer to add more space to the experience.
  • The tray can include navigation, tools, profile information.
  • The tray area should take up to 60-70% of the wide screen width.
  • It is important to be visible UI elements that make it clear that this element is clickable.

There are two main components to a tray:

  1. The active button
  2. The tray area

Screen Shot 2017-05-25 at 10.14.16 am

Some Rules for the tray

  • Make the shape unique.
  • Make the design look active.
  • Make a button look like it is part of the navigation.
  • Make sure it is large enough for a finger.
  • Make the button look different when it is touched.

Advanced Tray

  • A tray with a scrollable view can give access to a larger tray area.
  • Includes other UI Elements inside the tray.

Having most of the options and links in theThis can make the tray into the one stop area for accessing content.

Example of an advanced tray

Screen Shot 2017-05-25 at 10.20.28 am

Good Design: The Tray

  • Be clean and lean.
  • Keep the names short.
  • Don’t scroll much.
  • Don’t add other gestures.
  • Don’t overdo a good thing.

The List

  • The list is most commonly used in mobile user experience.
  • Opening second and third level pages.
  • Opening or expanding details for a content section.
  • Enlarging images.
  • Opening screen or options.

Example of a pattern using the list

Screen Shot 2017-05-25 at 10.28.50 am

Example of navigation buttons

Screen Shot 2017-05-25 at 10.32.02 am

Navigation buttons are used to return the user one space back in the experience.

Advanced List

Screen Shot 2017-05-25 at 10.33.43 am

There shouldn’t be any dead ends to a users exploration to ensure this we must make your last Page actionable.

To do this there are 2 methods:

  1. Provide an action button in the top navigation bar.
  2. Provide an action button below the page content.

Good Design: The List

  • Don’t overdo a good thing.
  • Don’t skip a step.
  • No dead ends.

This weeks lecture pod allowed me to have a better understanding on different UI elements. Having a better understanding on what should and shouldn’t be in different UI elements will aid in the development of my app. For my app I will most likely be using the List element.