Lecture 7

Lecture 7 – App Interface Design (UI): Launch, Tray & List

Launch/Load Screen

The load screen the user will see when the app is loading up. This screen is normally used for branding. Remember this is not the home page!

Tray Screen

The tray is normally located on the left, normally found in hamburger menu. It should be clickable and acts to allow more space for the design on the screen.

• 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

Use the tray to offer more to the user. Normally used for the settings, tools and user profile 40-60% of the screen.

Advanced tray: Login out button, more categories etc.

Bottom tray: the tray is located at the bottom of the screen

Gestures: Swipe/touch to open and close the tray

The Tray should:

• Be Clean and Lean
• Keep the Names Short
• Don’t Scroll too much
• Don’t add other gestures
• Don’t overdo a good thing

The List

• Opening second and third level pages
• Opening or expanding details for a content section
• Enlarging images
• Opening screen or options

Actionable pages should provide an action button in the top navigation bar and provide an action button below the page content.

The List should:

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

Summary:

This lecture helped me understand the importance of the tray and list features within the app. The app I’m currently creating requires a list feature so it was extremely insightful to understand the do’s and don’ts when developing now, and into the future.

It’s also important to never use a launch screen as a home page. This screen is great to advertise the app and show off the brand while the user is waiting. Overall, this week’s lecture was key as I’m currently still developing the app, so I still have time to change any mistakes I’ve made within the tray and list.