Lecture Seven: App UI Patterns

Lecture notes on the week seven lecture pod.



App UI Patterns: Launch, Tray and List

  • Launch Screen
    • Reinforces brand image
    • Allows the app to load in the background
    • Usually require a touch to continue
  • Tray
    • Sidebar, hamburger menu, the draw, the off-canvas layout; these are other names for the ‘tray’.
    • Designed to add more space to the experience
    • Users may need to touch or slide to open the tray
    • Made up of two main components; the active button and the tray area.
    • The active button can be either a hamburger, user icon or custom icon.
    • Should always be a visual button to make it clear to the user the feature is active.
    • When making the tray, some rules include making a unique shape, displaying that it is an active design, large enough for a finger, make it look different when touched and make it part of the navigation.
    • When creating the tray, allow for it to take no more than 70% of screen space to allow users to navigate out of the tray, as well as remind them which page they were on.
    • Good design elements of the tray, include a clean design, short labelling, little scrolling, minimal gestures of (up and down/left and right)
    • Don’t overuse trays.
  • The List
    • A note to the user they are travelling through various pages within the interaction.
    • The list item should have an arrow indicating a lead to a new page as well as a design change to show that it has been selected. The navigation bar should be the same across all pages; it should include a back button to allow users to go to previous pages.
    • Don’t allow ‘the list’ pattern to goo too deep i.e. lead to 4+ pages.
    • Allow the last page to be actionable, whether it may be to share on social media or same as bookmarks etc.

Image Source: https://tubikstudio.com/color-in-ui-design-look-on-the-bright-side/