UI or User Interface is a set of commands or menus through which a user communicates with a program. In other words, it defines the way a user feels about your app.
UI development best practices attempt to lay down standards for designing UIs in order to produce user friendly apps. As UI development is essentially user centric, it will not be far-fetched to say that your target users define your mobile UI designs.
Before getting started with the mobile UI designing, you should know who the intended users are. The best way to go about this is to start with some user research and competitor analysis.
Your aim is to come up with designs that result in apps which are practical and easy to use. This can be done by implementing standard interfaces and good user experience design. Using the latest UI trends like Google material design or iOS flat design will ensure a good user experience.
Building a good user interface for applications is like completing a good story. The app flow must be clear to the user – from the start point till end point – this is very important in assuring good user experience.
1. Understand Your Customer
This is the most important component of your UI design. Sharing design architecture and UI wire frame design with your customer during the earlier stages of the application development is critical, since you get feedback when it matters the most.
This can be done on paper or using wireframing tools like Balsamiq or mind mapping tools like XMind. This will help you in building astrong foundation for your app.
2. Prototype Your App
For preparing a prototype of your app, you can add individual screen shots along with their design descriptions in a word document or any other similar tool to depict the overall flow of design. However, the best practice is to export all wire frame designs to png or jpeg and build a prototype in InVisionApp.
This tool will help to simulate real app flow, complete with button clicks. It can be installed in mobiles also. You can write design descriptions in the comments section, which can be shared live with your team or colleague. It’s fast and easy.
3. Know About Your Target Users
Users are different from customers in that, the customer gets the app built so that the users can use it. The users could be experienced users or new users. Make sure you follow new UI Pattern trends, include good Gestures and Animation for effective UI designs.
Here are some sites that showcase creative work:
4. Control Scope Creep in the Project
Identify and baseline the requirements and your designs early. Extra features identified during later stages can be incorporated after discussion with the client, as long as it doesn’t impact the overall design. Taking up design changes that interfere with the overall flow of app without proper planning will result in poor user experience and design failure.
5. Create Natural and Smooth Navigation Design
Make sure that the application is simple, straight forward, and at the same time engaging for your users. The following tips will help you to achieve this:
App flow is very important. Keep back button to go previous screen and home button to jump quickly to the dashboard screen in all the screens.
Highlight the current button state and text from previous state with different UI element colors.
Guide user with good UI elements, colors, icons and labels etc.
Notify user if there are any actions required in app. For example, enabling location information, etc.
Use good dashboard design.
Use readable / clickable text and buttons in app.
You can read more about Google’s material design guidelines here
. Please take a look at the iOS Human Interface Guidelines outlined here
Steps Involved in Designing Android Mobile UI
Here are a few things to be considered while designing UIs for Android mobiles.
Designers can use Photoshop or Illustrator tool to design application UIs. The biggest challenge in producing Android UIs is ensuring its compatibility with different screen resolutions for all the distinctive devices available in market.
Density Screen Resolution
The standard screen resolutions are:
xxxhdpi 1440px x 2560px
xxhdpi 1080px x 1920px
xhdpi 720px x 1280px
hdpi 540px x 960px
mdpi 360px x 640px
Preparing Elements that Fit into all Screens
1. Designer can select bigger canvas 1440px x 2560px screen for portrait and landscape vice versa. This will help the designer to extract UI components without losing element clarity. Make sure all UI Elements are designed in vector format. This will help in quick UI extraction.
Some Photoshop plugins can be implemented to do an effortless job in extraction. UI element names should be the same for all densities. For elements with same naming, you can create different folder like xxxhpi, xxhdpi, xhdpi, hdpi and mdpi and segregate them.
Following are common UI extraction tools that you can try out:
Layercraft: This plugin crops from small screens to higher screens (UI Elements should be in vector format).
Cut and Slice Me: This plugin crops from higher screens to smaller screens.
User guide for both these tools are available in their sites.
In some cases you might have to extract the UI elements manually, and then you can use DPI calculator
All these tools will help in saving your UI extraction time and DPI calculation.
2. You need to design different density icons and other UI elements (images, logos etc) to fit in all screen densities.
3. Make sure all UI Elements are readable and that they fit in small screens. Make your designs for small screens and scale them up for bigger screens (mobile and tablet).
4. You can use the latest Android design pattern templates to know actual UI elements size and proportions. Google provides free design templates and UI components. Check here for more details
Steps Involved in Designing iOS Mobile UI
The steps mentioned for Android UI development applies for iOS as well. The screen sizes for iOS are:
Device Resolution Naming - iPhone
You can read more about iOS Design Guidelines here
Emerging UI Design Trend – Create your App for Internet of Things (IoT)
Internet of things (IoT) is getting very popular now, creating opportunities for more direct integration between the physical world and computer-based systems. Internet of things has brought a big change in the way people use technology, triggering similar changes in user experience.
The scope of such UI designs includes implementing UI/UX in smart watches, Android wearables, Google glass, etc. Here are a few links from where you can download GUI Kits & Templates:
Hope you enjoyed this article!
At Cabot Technology Solutions, we're proud to admit that we follow all these mobile UI best practices outlined above. If you need help in developing a professional app for your business, we'd love to be of service.
Contact Us Today!
SHARE THIS BLOG ON