Interface design

Launch/Load

launch screen'
NG,S. (2012). Sample Splach Screens / Launch Images. Retrieved from http://bit.ly/2ouwV3J

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

tray
N/A,. (2017). They Tray. Retrieved from http://bit.ly/2p0qHsX

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:

  • bookmarks
  • settings
  • 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

The list

  • 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
Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s