Most apps have some version of a launch, load or splash screen. It generally showcases the logo of the app while the app is loading.
The tray is often used instead of users having to load another screen. An example is the hamburger icon, when tapped, the tray comes out and gives you more menu items
- Make the shape of the icon unique
- Make the design of the icon 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
The tray area should use about 60-70% of the screen width, leaving some of the foreground screen visible. You can also allow the tray area to scroll to fit more options.
You can have many buttons in a tray such as:
- search bar
- share buttons
You also have the option to display the tray from the top of bottom of the screen, this allows for a larger use of the screen.
Gestures for the tray
The button usually as a touch and slide gesture to open and close the tray
To scroll in the tray, the gesture should be flick up or down to scroll.
Good design would
- be clean and lean
- keep the names short
- doesn’t scroll too much
- doesn’t add other gestures
- doesn’t overdo a good thing
- opens second and third level pages
- opens or expands details for a content section
- enlarges images
- opens screen or options
The navigation buttons are used to take a user one step back to the previous page.
Today’s Quick Tips
- Don’t have too many levels in your app
- Make sure you don’t have dead ends. Always put an action button on the last screen or even a back button
- Don’t put too much in your tray, it’s a helpful tool not a spare page
- Launch pages are the first thing a user sees when they open your app, so make it look appealing