Mobile user experience design

The use of mobile phones has been increasing exponentially since 2007. The tiny device where you can practically touch the content has become an integral part of our lives. UX Designing for mobile phones is important since most users surf the internet on mobile devices. The figure below shows that the usage of mobile phones has been more than that of the desktop and other devices combined!

When it comes to UX, mobile apps differ from the web to a great extent. Mobile phones, with their tiny screens, limit the data you can display. Since the operations are touch-based, the conventional web method of displaying extra information with tooltips fails on those screens. On the other hand, Mobile devices do offer a lot of positive features such as access to locations, a gyroscope and a camera that can show the world what you are looking at! Here is a brief listing of Do’s and Don’ts while designing for mobile phones.

Two types of designs require consideration of a mobile phone. The first one is the mobile native app and the other is responsive web design. There is a third kind of platform emerging for mobile phones called cross-platform apps; we will consider those as well while discussing some sections of this article.

Start with a pencil on paper. 

Whenever you are designing anything, it is always great to start with a pencil on paper. This tool allows you to create the interface at the speed of your thought. The diagrams would be rough, agreed, but at the end of it, you will have the entire concept in a tangible format. Trust me to convince people who know the basic idea behind the app, the rough sketches are enough to give them an idea about how the screen layouts are going to be. The most important thing about using this is that you won’t mind scratching out an entire UI design and starting over! The lesser efforts you have poured into creating a concept, the easier it is to move on to a better one!

Another important point worth mentioning is guidance. If your application involves using gestures like swiping left or right, press and hold, rotate the phone and so many others, you should make sure that you provide sufficient guidance to the users for that on a separate tutorial screen or easy to detect hovering bubbles. Bottom line is, always keep the user focused on a single thing alone.

Use shallow navigation

Navigation is a tricky part and desktop-based application utilize a wide variety of patterns to address this issue. The trouble with conventional navigation is that it eats up a valuable real asset on the tiny mobile screen. People are using a hamburger (three horizontal lines) menu icon to compress the entire navigation into one tiny button. If not coupled with the revised and mobile-friendly information architecture, this can lead to chaos.

Desktop navigation employs cascading menu structure, which means there are different levels in the navigation. There are main menu items, then submenus and sometimes the page level navigation items. If we try to fit everything in a single column mobile menu, the user might have to tap 4 times to reach the desired page. This causes frustration and may impact negatively on the overall impression of the app.

So while designing the information architecture itself, it is essential to keep the mobile part in mind and design a shallow IA. Shallow IA allows direct access to desired pages mostly with scrolling and a single tap. This proves to be less frustrating than the 4 tap navigation on any given day!

In the worst possible scenario, if the shallow IA is not possible, designers can employ a new pattern called the split navigation, where the two vertical sections of the menu provide better and easy navigation for the sites with deep navigation such as e-commerce. e.g. backcountry app

The mode of interacting with the mobile is not a precise pointer like a mouse which can cover an area of fewer than 5X5 pixels. When it comes to mobile, we need to take into account the physical sizes and mode of interaction into consideration. Mobile phones come into various form factors with varied pixel densities. That makes designing for the touch even more challenging. NOKIA’s user interface guidelines suggested the target touch size to be 9mm (highest as compared to all other guidelines so let’s go with that!) with at least a 2 mm gap between two targets to avoid any misinterpretation of the touch event.

Since the size 9mm is the physical size and the designing is usually is done in pixels, this should always be converted to pixel size. Now since the pixel densities of the screens also vary a lot, depending upon the device make and model, the size has to be calculated for every density. [More information about the sizes at https://en.wikipedia.org/wiki/Comparison_of_high-definition_smartphone_displays]

We can calculate the target area by a simple equation that can cater to all the devices. Always keep the target area to be at least “X” px x “X” px; where;

  X= DPI*0.36pixels

While designing the responsive websites, care must be taken to make the UI mobile friendly especially with the UI controls to deliver a seamless experience across web and mobile phone. This might call for making changes in the button styles and layouts for the mobile screens. Still, efforts should be made to keep the UI consistent if not the same for the different form factors.

Design forms to suit mobiles

Since mobile phones utilize an on-screen keyboard, designing forms for mobiles need special attention. The keyboard consumes considerable space on the screen and hence forms need to be simple and short. Here are a few recommendations for the forms

1. Cut down the form fields to the bare minimum. Only gather the extremely essential information

2. For longer forms, it is better to divide them into several small portions and display them one after the other. Also, it is always better to display how far they have come or how much more to finish it

3. Use default values wherever possible to make the form filling time even shorter

4. Use visual pickers instead of plain text fields if possible. The great example of the same would be date picker. Instead of asking the user to type in the date, you can give a visual calendar with the ability to just tap on the desired date.

5. If it is extremely necessary to have a label to the field, prefer using top-aligned labels. If it is possible, use in-field labels

6. Separate alphanumeric fields from numeric fields and invoke the contextual keypad to make filling in easy. For example, the credit card number is a numeric field, hence the use of numeric pad is most apt. for search, the bottom right key could be a search button or a go button.

An important aspect of mobile forms to remember is that they also work fine with large screens like a desktop. If the forms are mobile-friendly, they sure can be used on a desktop, but then, the additional space needs to be utilized wisely.

Exploit hardware capabilities

Mobile phones, as compared to desktop computers/laptops come with a lot of hardware additions. The best utilization of these capabilities needs to be exploited to make a better user experience. Some of them could be:

1. Multi-point-touch: a feature available in most of the new phones. These can be utilized for zoom in / out, sharing and other secondary level functions.

2. Camera: smartphones come with two cameras, one in front and one in the back. This allows the user to see himself on the phone, or show the world what s/he is looking at.

3. Gyroscope: the position sensor allows the app to detect the phone’s position and orientation concerning a stable horizontal plane. This can be utilized for designing games or fun interactive events

4. Calling: on a mobile phone, you can call a number with a single tap.

5. GPS: this detects the phone’s location on earth and can be utilized to prioritize information that a user receives based on his / her location

6. Force touch: the new devices by apple have this concept called 3D touch or force touch which can invoke a completely different set of quick actions to enable user do certain tasks with the app without even opening it.

In the cases of cross-platform apps, these features might not be available or may require special permission. Nut this should not stop you from making the experience great. Great UX is the best use of what is available and delivering the simplest method of performing a task.

Carefully filter the features

While designing an app or anything, it is important to know when to stop. An app can have a lot of features but before adding anything ask yourself “Is it really needed?”. It is important to make this check since every new feature added makes the user lose his focus from the main task. Also, too many features sometimes result in higher development and maintenance costs, which is also an important point to be considered.

To summarize; Designing for mobile phones is different at so many levels than designing for desktop. The new and emerging trends and increasing pixel densities are surely making the UIs more crisp and clean. Most important thing is to keep an eye on the way we use our phones in our daily life and design accordingly towards focusing the user’s attention on a single-core task. The use of gestures and other inbuilt features can not only increase the quality of user experience but can also introduce a learning curve. Ultimately, each element of the mobile UI should be placed with valid justification on that small screen.