Week 7 Lecture Notes

The quality of the experience provided by a mobile application is dependent on the provided interface’s ability to incorporate functionality that is easily understandable and responsive as expected. Through the continued evolution and standardisation of the mobile phone application as an understood interactive medium, a number of interface trends have emerged.

Launch Screen

1385164035422-2013-11-20 16.58.45.png
Twitter launch screen

The launch screen acts as preparatory screen to the application. Typically this screen will consist of the logo or brand name, but may sometimes include full graphic illustrations relevant to the app. The purpose of this screen is to provide an introduction to the application, while subsiding the user as it loads in the background. This screen is intended to only appear upon startup and should remain inaccessible once the primary content of the application has been presented.

Tray

The tray button and menu act as a means of providing additional functionality to the application without reducing available screen space for the main content. This hidden menu is accessible through a small, but visible menu button typically found in the top corner of the interface. Accessing this menu is done via a tap or slide which also doubles as the means of returning to the previous screen once opened. This underlying menu provides a list of selectable buttons pertaining to contained content of the application. Apart from providing navigation options, the tray allows for additional functionality such as a search function or a link to the settings.

When producing a tray menu, a designer must remember its supplementary intentions. The menu must not overwhelm the user by containing too many options or require the scrolling of an amount greater than two pages. In addition to this, as a tool intended to support the core content of the application, its visual presence should never overwhelm, and instead be relegated to take up no more than 70% of the screen when activated. This ensures the user is always able to easily return to the underlying content.

List

iOS-10.3-Settings-App-Compatibility-section-iPhone-screenshot-001
An example of a list found within the iOS settings menu.

A commonly used navigational tool is the implementation of lists. This series of vertically laid buttons divide content hierarchically and presents the user with a means of traversing several layers of pages along with the means of returning back. The visual appearance as well as functionality of these menu buttons should be consistent throughout. When implementing a list, a designer must ensure a user is able to delve no deeper than two levels of pages to avoid the possibility of disorientation. When doing so, they should also be able to easily identify their current position within the hierarchy with clear indication of location.

Final thoughts

When deciding upon user interface functionality, its important for a designer to implement tools that are proven to resonate with the user and be quickly understandable. These aforementioned examples exist as tried and tested methods of providing functionality and conveying meaning to the widest possible audience. Despite their consistent reoccurrence and adoption, their successful implementation still relies heavily on the designer’s ability to incorporate them correctly within the context of their existing visually and functionally cohesive application.

References
Apple Inc. (n.d.). Settings menu [Screengrab]. Retrieved from http://www.idownloadblog.com/2017/02/20/new-in-ios-10-3-beta-3-name-and-shame-list-for-outdated-32-bit-apps/
Twitter Inc. (n.d.). Launch screen [Screengrab]. Retrieved from http://www.mobile-patterns.com/splash-screens
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