Mobile App Design
Design is the first thing the user notices when he installs a mobile app on the smartphone. The first glance determines whether the person would use the app further or would he remove the app and proceed to other “candidates”. In this article, we reveal some secrets we use to create the design of attractive apps.
People use mobile applications to reach their goals. Therefore, the development of “static” app design uncoupled from the user experience wouldn’t be successful. Before drawing the design prototypes, think about the actions the user performs in the app and their results:
define the use cases.
A visual representation of the use cases would be the screenflow containing sketches of the app windows (screens) and arrows denoting transitions between them.
An useful hint how to build a proper mobile app design. Rather than thinking what the app screen should contain,
imagine what the user would see on the screen and how that helps him to rich his goals.
All displayed content should be considered in the context of the user interaction with the application. Frequent actions must require minimal efforts from the user, whereas scarce use cases may require more efforts to complete.
Nowadays, when one talks about the visible content, User Experience (UX) is more frequent term than User Interface (UI), which proves the preference of the use cases over the content itself.
First user experience is most crucial, this use case should be thoroughly designed and tested,
because it determines whether the person would use the app or leave it after a few seconds.
Well known mobile design templates and icons
Mobile app interface already has well-known templates of user interaction:
Navigation Bar or Action Bar: a panel at the screen top displaying the current user location within the app and available actions.
Drawer: a button at the left top of the screen drawing the app main menu when tapped. A well-known gesture is the swiping the screen from left to right (which shows the main menu), and swiping from right to left which hides the main menu.
Tab Bar is the panel at the screen bottom containing icons and texts. The user can tap an icon and switch between different sections of the app.
If the user’s action could be implemented by a well-known UI template, do not disregard it. Well-known actions are better perceived and remembered by users.
Besides the user interaction templates, there are well-known icons, such as “Remove”, “Share”, and “Back”. For the user’s convenience, frequent actions should be denoted by well-known standard icons.
Brevity and minimalism
In distinction from the desktop-related websites, the mobile apps are mostly used on smartphones. According to our statistics,
80 percents of app usages are on smartphones, whereas only 20 percents are on tablets.
You shouldn’t display all content on one screen. Use the context of user interaction with your app, and determine which content is the most important for the user. For instance, the list item should contain only the information required for the user to make a choice. Secondary content could be moved to the detail screen.
For example, the contact list contains the name as the primary content, whereas the phone number, address, and email are not visible in the list. Those attributes could be only seen on the contact detail screen.
Gesture is the specific feature of touchscreens which expands the user capabilities while working with the mobile app. The most frequently used gesture (besides the tap) is scrolling up and down.
Experienced users know also such gestures as:
swipe: horizontal movement used either for opening or closing the main menu or for the treatment of the list item (edit or remove);
long tap: edit or move the list item.
Since the use of gestures in the UI is not obvious, you can use hints how to use gestures. These hints could be shown to the user at the first start of your application.
Responsive UI and animation
Since the smart phone screen is limited in size, the animation helps the user to navigate in the app. For example, when the user taps a list item and opens it in a new screen, the “expansion” of the list item onto the whole screen shows the relation of two sequential screens to the user.
A good manual on usage of the animation to emphasise the navigation in the mobile app is “Human Interface Guidelines” developed by Apple.
Animation can give user a cue which actions could be done with certain UI elements. For example, a slight shift of the list items can reveal the possibility to swipe these items, whereas the animation at start and end of list can show that there’s no more items to scroll to. The interface using animation to direct users is often referred to as responsive interface.
As other design elements, the app color scheme should be selected taking into account the app usage context and the user’s goals. While selecting the color scheme, it is required to provide
sufficient contrast and visibility of the app content.
When this condition is satisfied, you can use your company’s brand and follow the recommendations of the operating system manufacturer. For example, Material Design Guidelines for Android proposes color styles which you can apply to your software.
Do not forget about the influence of the color to the emotions of the user. For instance, red color must be used with care because it could trigger negative and danger emotions at first app usage. You can find the information about the emotional effect of different colors in Internet.
The mobile app design should often follow the corporate style (brand) of the customer. In this case, it is required to find a compromise between the corporate style and the usability. Our designers insist upon the preference of the usability, however the customer’s representative could think opposite.
Mobile app design guidelines
Before start working on the Android or iOS app design, you must read the official development recommendations of operating system manufacturers. These recommendations were written by best design experts in the world so you shouldn’t neglect them during the mobile app development. Guidelines describe well known user interface elements and give you general recommendations on the mobile app design layout.
Google’s Material Design
The Google corporation uses its concept of “Material Design” in all its web services and mobile apps since 2014, when Android 5 Lollipop has been released.
The material design is the step after the “flat design” used in Windows, Apple iOS, and Macintosh. The UI elements are different by depth, for example, the buttons are above the primary content in the same way as they do in the real life.
Another interesting and widely used material design template is “card”. This is a block of object info which is a part of a list, for instance, user or application info. Cards can incorporate images, text blocks and interactive elements, and could be used to build lists of mixed elements.
Material design guidelines contain info about the recommended UI layouts, animations, widely used and well-known UI templates.
These principles would make the Android application usable and stylize them in the same way as other apps on the smart phone. Material design guidelines are available on the following site: https://material.io/guidelines/.
Apple’s Human Interface Guidelines
Apple is a leader in the development of usable interfaces, therefore it is important to consider the Apple’s principles during the application development. These principles are represented by Apple’s designers in the “Human Interface Guidelines” document. These design guidelines are common and could be used in both iOS and Android applications, as well as applied to web services.
In accordance with Human Interface Guidelines, the UI must help user to reach his goals, and must be as predictive and intuitive as possible.
Opacity and layout design should help users in the navigation through the app.
Interface elements should be responsive, that is, they should provide feedback to the user. For example, buttons should be “pressed”, and swipeable UI elements should be swiped.
Similar to Google Material Design, the animation should help user to navigate through the app. It is not allowed to decorate the app by “unnatural” animation, for example, when the child window appears from an unexpected place.
An important principle of Apple’s design is metaphors. They help user to understand the purpose of UI elements by their similarity to the real life objects. Examples of Apple metaphors are switchers and spinners.
Human Interface Guidelines are available on the following URL: https://developer.apple.com/ios/human-interface-guidelines/.
App design flow
The first step is the cooperation of our designers with analysts. They are laying down the scenarios of user interaction with the future application and estimating their usage frequency.
This information is used to build a UI prototype in the form of screenflow diagram containing screens and transitions between them.
After that, the designers choose the app color scheme, based on the info about the application goals and the customer’s corporate style.
Once the software architects build the data models, the screen content is specified. Primary and secondary object attributes are selected based on the analysis of the user behavior. This info is used to specify the screen content.
On the customer’s demand, the dynamic UI prototype containing responsive screens and transitions could be built. This prototype could be used by the customer’s representatives and our engineers to test the user interaction with the application and correct the mobile app behavior if required.
The final step is the development of background images, startup screen and the app icon. These works must not be underestimated because they are forming the initial impression of the user when he installs the application.
Design review and update
Besides the designing “from scratch”, our company can review and update the UI and UX of the existing mobile app. If you feel that user loyalty is low and the required goals are not reached, you can give us your app for reviewing and updating.
To order the mobile app design works, please send us a brief description of your task through our contact form.