Week 7: App UI Patterns

Screen Shot 2017-05-16 at 21.32.02.png
IOS Launch/Load Screens
Screen Shot 2017-05-16 at 21.33.23.png
Android Launch/Load Screens
  • Used to reinforce the branding of the app.
  • Allows the app to load in the background.

    *Not to be confused with the home screen*

The Tray

Screen Shot 2017-05-16 at 21.35.00

  • Extension of the experience.
  • The tray can include navigation, tools, profile information.
  • The tray area takes up 60-70% of the wide screen width.
  • Allows the designer to have more screen space.
  • 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-16 at 21.38.20.png

Some Rules for the tray include..

  • 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 finger.
  • Make the button look different when it is touched.

Advanced Tray

  • A tray with a scrollable view.
  • Includes other UI Elements inside the tray.

Another option is the bottom tray which gives the designer a wider use of the screen area.

Screen Shot 2017-05-16 at 21.37.04

Good Design: They 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

Screen Shot 2017-05-16 at 21.39.44

  • Commonly used mobile user experience.
  • Opening second and third level pages.
  • Opening or expanding details for a content section.
  • Enlarging images.
  • Opening screen or options.

Screen Shot 2017-05-16 at 21.40.23.png

Advanced List

Make your list Page actionable

Use 2 methods:

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

Screen Shot 2017-05-16 at 21.42.22

Good Design: The List

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


Week 7’s content is quite informative, as it helped me to identify key features on an app, that could be applied to my own apps. I personally learned what to do and what not to do, and what the guidelines were for an easy navigational interface design.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s