Co-Founder
Technology , Innovation, the Future
11th November 2018•Strategy
We are living in a mobile first world and it is paramount that User Experience (UX) on mobile is carefully planned and executed.
Origin Digital has been creating apps ever since Apple allowed third party apps into the app store since 2008.
To help our design and technical teams plan we have produced the following high level guideline to consider when designing and developing for mobile.
Navigation is core and has to be simple and intuitive for the user to easily comprehend how to navigate/use the app. We use combinations of the following popular navigation systems.
Top Navigation Bar
The top navigation bar is a navigation system that sits along the top of the screen and although effective, it does take valuable real estate.
The Tab Bar
The tab bar has been around since the inception of mobile and is a navigation bar that sits along the bottom (iOS) / top (Android) and often contains labels/icons.
The Hamburger Menu (and Variants)
The navigation menu is a neat utility menu that contains a hidden navigation. Upon interaction, the menu is displayed and can contain labels/icons.
The Navigation Hub (AKA Hub and Spoke)
The navigation hub is a screen (usually the home screen) that lists all the navigation options (labels/icons). To navigate to a new location, users will need to go back to the hub and then use one of the options displayed.
Loading Data
Most apps will require external data of some sorts and will communicate and consume data from an Application Programming Interface (API). The API will normally be connected to a data source (database) and its primary function is to exchange data from the database to the app.
The API is in essence a place where the app gets the data from and is located on the Internet and is referenced by a URL i.e https://api.origin-digital.com
Whilst loading data for the API, the app will need to mask the wait by displaying some indication to the user. The preferred way, if possible, is to autoload data in the background so the user has a seamless experience however in most circumstances this cannot happen as the app may need to provide a response, based on the intended action, to the user i.e “We have received your details successfully” etc.
Although using an API is a necessity, to get the external data required, It can be bad because progress indicators call attention to the fact that a user needs to wait. It is paramount that the right indicator is displayed which will distract the user and mask the passage of time.
The following are types of indicators that can intelligently distract the user and mask the load time.
Skeleton Screens
A lot of apps like Facebook, Linkedin and Slack etc now use skeleton screens. Skeleton screens are a blank version of the intended page into which information is gradually loaded when the requested data is received.
Animations
A great way of masking time is to display quirky animations. Based on the nature of the app you could also use this time to provide additional value-added content to the user.
Spinner
The most famous indicator of all will be the Spinner used by Apple since the inception of the iPhone.
Types of transitions
Screens within the app will be transitioned to the user differently pending on the type of information/action is located on the screen. For screens that are primarily for viewing, such as details or lists, should use a push transition.
Push
When transitioning using push, you should take into consideration where the screens are in the hierarchy. If the user is three screens deep into a certain area of the app, and the user tries to go back to screen #2, screen #3 should swipe/push away to the right, for example. If the user tries to go to screen #2 from screen #1, screen #1 should swipe away to the left, with screen #2 swiping in from the right.
Modal
For screens that are forms and require the user to select, edit content or input data a modal should be used
Empty States
When screens have no data (for whatever reason) then it is important to indicate this to your user as otherwise, the user will think that the app is malfunctioning. To display the fact there is no data you can use an empty state. An empty state is a graphical, cool way to signify to the user that there is no data.
https://emptystat.es/
*When carrying out testing it is important to test the app without data and test as a new user.
User Input
When the app needs to collect data via a form then the relevant keyboard should be displayed at all times and should deploy the correct type of keyboard i.e number pad, ASCI etc.
Call-To-Action (CTA)
A call-to-action (usually abbreviated as CTA) is a button, image or line of text that prompts the user to take action. Call To Actions must be clearly identifiable and it is also best practice within mobile to use buttons as opposed to text.
User Feedback
Every CTA event i.e button press should provide visual feedback to communicate the change of state i.e on press. User feedback can consist of colour / text change.
Mobile UX is a vast subject but I hope the above has provided you with a high level foundation from which to start from
Jerry Staple
Technology & Innovation Director
Creating Valuable Digital Since 2006
