In May this year Google announced that mobile search had finally officially surpassed desktop search for the first time. Mobile is now the default format for the majority of users.
So, as the mobile UI has become the new ‘home UI’ for most people, there are factors that developers should be mindful of while creating either mobile apps or web-based applications for mobile.
Let’s examine some common mobile app UI elements, see how a novice might typically implement them, and then look at a better way of tackling the problem.
Limit Use of Text Input Whenever Possible
Most mobile applications have an input field to capture the user’s feedback. In my opinion, text fields should only be employed in mobile apps when absolutely necessary – password fields are the perfect example.
Even users with large screen phones will still be less comfortable typing than they are on desktops computers. Typing input can be minimised in a number of ways.
- Alternate input methods such as slider and spinner elements
- OAuth for logins can provide a better way of verifying identities
Case Study: Uber’s mobile application has addressed this UI concern in a brilliant way. Uber uses GPS to track a user’s location and asks then to pin their location instead of asking the users to enter the address. This allows the users to book a ride easily and more quickly.
Text Interface Elements
The use of text UI elements should be minimised in an application. in favor of the use of icons. For instance, you can use a trash bin icon in the app instead of a button with the text “Delete” on it.
However, one important thing that should be taken care of is the fact that the icons and their representations should be uniform throughout the application.
Case Study: Kudos to iOS’s Photos application which has made use of icons and text in a very good proportion. The symbols of Delete, Like and Share are uniform throughout the UI and their meaning is evident even to a first time user.
Transitioning Between Screens
The transition between the various screens should be smooth and the transition controls should ideally be located towards the lower half of the screen. This is because the thumbs are commonly used for navigating between screens, and most thumbs can’t easily access the upper section of a large phone screen.
This helps the user to switch between various parts of the application more quickly.
Chrome on iOS lets you ‘edge-swipe’ with your thumb to move forward and back in your browser history.
Case Study: Twitter application’s transition buttons are located at the bottom of the screen. This helps the thumb to quickly access various parts of the app such as Home, Notifications, Messages and Me. Had the buttons been on the top, it would have been difficult in the case of large screens .
Mobile: More is Never More
The overall design which is one of the most important aspects of the UI/UX of a mobile application should be minimal and the screen should not be cluttered. Heavy animations should not make their way into the application.
In modern design philosophies such as Google’s Material Design, emphasis has been placed on the minimalistic approach to design. An application’s landing page is where it makes its first impression and a cluttered UI can disorient the user and will almost certainly reduce their chances of the continuing.
Case Study: Google Inbox does a great job of implementing the Material Design Framework, keeping a clean, easy-to-use and intuitive UI. The screen remains uncluttered, the transitions are smooth and it displays a pleasing image when my inbox is empty. Despite the simplified UI display, I don’t have any difficulty finding any functionality in the application.
Wrapping up
Phones are cheaper, faster and more powerful than ever before and they are only going to become more prevalent in the next decade. Mobile application developers need to follow these simple design principles to make their applications more intuitive, neat and easier to work with.
Developers should make sure to read and follow the OS specific style guides as they provide important insights of what will and what will not work in terms of UI.
Tanay PantTanay Pant is an Indian author, hacker, developer and tech enthusiast. He is known for his work on Learning Firefox OS Application Development, which was published by Packt. He is also an official representative of Mozilla, and has been listed in the about:credits of the Firefox web browser. His personal website is tanaypant.com.
