App Interface Design
Launch Screen
Most apps these days have launch screens, these launch screens are primarily used to help reinforce the brand / logo of the app. The Launch Screen is a screen used when an app is initializing, allowing for features to load in the background. Furthermore, they generally require a touch gesture to continue.
The Tray
This pattern is sometimes referred to as either the tray, the draw, the hamburger, the sidebar or the off-canvas layout. The tray allows the designer to add more space to the experience without the user loading the screen.
The active button is the icon that allows the opening and closing of the tray, which should always be a visible UI element. The intent is to make it clear to the user that the button is interactable and active.
Some tips for an effective 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 a finger
- Make the bottom look different when it is touched
The active tray should appear to be an extension of the user experience, complementing the apps other elements. Once the tray is active, its goal is to enhance the functionality and usability of the screen the user is currently on.
The List
The list pattern is a very commonly used in mobile user experience, the idea is to provide basic navigation to second and third level pages whilst also providing a quick and easy pathway back to the home screen.
The list is made from three components: The list items, the navigation bar, and the navigation buttons.
- The list item: should be a UI element marked with an arrow/hyperlink and have an overstate to show it can be touched to activate. List design should be consistent; having the same look and feel, and all have the use of opening a deeper page.
- The navigation bar: consistent across all pages, providing the wayfinding for the user as the enter deeper into the list.
- The navigation buttons: The buttons are used to return the user one step back in the experience. This is to be consistent across design levels.
A typical list design layout is pictured below.
Reflection
Overall, this lecture pod provided an in-depth explanation of the launch, the tray and the list as design patterns in user interface design. I had learnt about the launch screen which can help support the advertising and branding of the product while it loads, as well as the tray and list elements which help provide an easy user experience. These features are very important when designing for a mobile app as these little gestures are very trendy at the moment and are a main component in most applications as they are effective and usable.
Andre's Blog 