Transitioning your UX/UI Design from Desktop to Mobile
As a designer, no matter what kind of designs you need to create, moving from one form of design to another is not an easy transition. Since couple of years, there has been a major revolution in the user experience design industry. UI designers used to focus on developing screens for desktop/web application users, but now mobile users are the center of attention.
Google’s executive chairman Eric Schmidt says “if you don’t have a mobile strategy, you don’t have a future strategy.”
As a Web designer, and now a mobile UI designer, I would like to explain some of the challenges in creating UI/UX design for mobile over desktop. These are also the key factors to consider while creating the UI for an application.
The Key Challenges and Factors to Consider
1. Real Estate
Mobile devices have smaller real estate, lower memory, lower processing power, lower resolutions, navigation restrictions, and inefficient data entry methods. It doesn’t have a mouse and in most cases no keyboard either (only a virtual key board), people search for information online with a thumb or finger.
Users expect a quick response from their mobile phones compared to their PCs, since they only require the basic functionality. For example – When a user clicks a picture from their mobile camera, they may crop or rotate the captured image and upload to social network sites or share it via email. Generally, the mobile usage is not meant to involve heavy graphic manipulation.
As a good designer you must consider the benefits and limitations of the mobile environment to create the most usable navigation for mobile application. Some believe that the basic principles that are applicable to Web design should also be applicable in Mobile UI, but this is a misconception. After all, Web design has evolved from basic, text-based HTML pages into today’s Web standards.
Finding space for mobile navigation can be trick. You need to carefully plan the navigation flow. In Mobile you should limit our navigation buttons to five or less, you can add nested menu if necessary. Another main parameter to keep in mind is to minimize the number of actions on the mobile device. This will help you to avoid user’s irritation to some extent.
Retain the important navigation menu on the top or bottom side of the screen depending on the type of mobile platform. For example – While designing mobile app on iPhone, Tab bar for navigation in iPhone should be at the bottom of the screen and in Android phone should be on the top.
3. Different Platforms
There are wide range of smartphones available in the market. Android has more than a dozen screen resolutions, each with different pixel densities. iOS has also joined the bandwagon after the release of their retina powered iPhone 5 and the rumors about iPhone 6. This being the case, a designer has to be aware of how the UI should adapt when viewed on a plethora of different screen sizes and resolutions.
The concept that a design should be the same across all platforms is not justifiable. Each platform has its own design principles and guidelines which have to be followed; the only exception is in Gaming applications. iOS users do not follow the top action bar and Android user do not follow the back arrow. Each user is used to a particular device platform, to keep it simple for the user, the UI should be designed suitable to that device platform.
This figure illustrates a login screen designed for three different device platform users – iPhone, Windows Phone and Android Phone.
4. Varying Design Trends
Device manufacturers are constantly innovating and launching new devices with different OS versions. Android OS such as Kitkat and Jellybean are latest, and in iOS, the latest is iOS7. Every new OS versions released have new functionality added. You as a designer need to adapt quickly to create designs on new OS versions, thus to support new features & functionality, which is exciting at the same time challenging. For example – In iOS7 mobile applications, minimalism in design is based on a flat design, whereas previous iOS versions would follow a skeomorphic design.
5. Outdoor and Indoor
Another major factor that affects Mobile UI is light. Since desktop screens are usually well lit, not that much attention has to be given to it. Whereas in mobile, the situation can vary. And it is hard for the designer to predict the incident light a user will have while using the mobile app. Therefore, you need to produce a neutral UI design that works under all kinds of lighting.
As a UI/UX designer what are your thoughts? Have you faced similar challenges while developing the UI for mobile apps?
Senior UX/UI Designer, RapidValue Solutions