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 default UI for most people, there are factors that developers should take care 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.
Transition 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.
Continue reading %Notes for Designing Better Mobile Application Interfaces%
by Tanay Pant via SitePoint
No comments:
Post a Comment