Less is More – Challenges in Designing UI for Mobile Apps
Having spent years designing UIs for desktops we try to apply all learnt tips and tricks in UI design for mobile apps, but here comes trouble. Surely principles in preliminary research and usability are the same, but designing UIs for mobile apps has certain specifics which set some limits.
The handset isn’t a miniature desktop
Usually we emphasize small screens, less memory and less processor power as the properties of mobile devices which differentiate them from desktop computers, but there are other key factors requiring different approach in mobile app UI design. Those can generally be called “mobile user mental models”. Mental models refer to the way users behave in a particular situation, expect things to work or the tasks they attempt to complete.
What does an iPhone or Android user do with the pics he has taken using the phone camera? He crops or rotates pictures, maybe sharpens them a little, and sends them to friends or uploads them to facebook. Nobody would really try to design a new company brochure using his mobile phone.
To send an e-mail via a mobile phone the user needs basic controls and anything over the top would confuse and hinder him.
The handset has no mouse and the logical sequence of the task’s required actions is a must. The handset has no real keyboard and the users would get impatient if forced to write too much.
So, while researching for the design of a new mobile app it is mandatory to investigate the mental models of the users of the target OS and mobile devices types. Even better – try to look trough the user’s eyes to ensure consistent user experience of your app.
Variety of OS (intuitive interaction)
The diversity of mobile OS’s sets makes understanding the user models of interaction with the mobile OS a challenge.
Android users will not expect any kind of app navigation positioned at the bottom of the screen, while at the same time iPhone users would just look there for tabs.
The iPhone user has no “back” button and all back actions must be integrated in the app while Android or Blackberry users will be surprised if you place a “back” button on the screen.
Designing an app for more than one mobile OS requires more than one design and every mockup has to be intuitive for the specific groups of users (specific OS).
OS developers are aware of the limitations of mobile devices and implement space and resource saving elements such as pop-overs, alerts, software gradients, graphic elements, etc. Using those helps avoid overloaded screens, ensures the app is faster and makes the UI more intuitive in terms of the specific mobile OS.
Breaking the OS convention makes your app less intuitive.
Variety of devices
Having taken care of the relationship between the app and the mobile OS doesn’t get us out of the woods yet. To confuse the issue further there is a healthy variety of handsets running the same OS out there.
The device is a piece of hardware with variations in screen, processor, memory, input/output technology, etc. While working on the “socialibrium” project for BlackBerry, for example, I had to create a screen layout to fit Pearl screens as well as Bold screens. That meant five different sizes including 240/260 px and 480/360 px. At first sight the task seemed impossible, but after lots of adjusting the app was born.
Designing the UI of a mobile app requires looking for reasonable compromises in order to avoid bad feedback and ensure the users don’t shun the app altogether.
One good practice is using the native functionality of the device.
Be ”user-centric” while designing UI for mobile app
- Define and research the target user groups and target devices (OS)
- Focus on the user tasks. Consider the app UI in the context of use (on the street, in the bus or in a dark room, on a small or a big screen, etc.)
- Strive for clear flow and an intuitive navigation
- Avoid “over-designing” – over the top visuals, over-branding, etc.
- Keep the basic elements of the UI in the device native look (don’t break the convention)
- Test with real users
- Mental Models: Aligning Design Strategy with Human Behavior – Indi Young
- Adaptive Path Blog
- Mobile Usability – useit.com
- SmallSurfaces – a site about design for mobile technology
- UX Design Network