Mobile UI Design Principles



Every team member at Pixelworm has a strong history in mobile app development and design. Making sure the design is implemented just right is the raison d’etre of Pixelworm but one step prior, designing the correct experience, is just as important, if not more so. Mobile usage is at its highest now, with more than half the world using mobile phones and, with daily usage in the range of 5 hours per day. This massive, and still growing, market has become a target for enterprises and solo developers alike with 1.7 new apps being released every minute. Naturally, users have become spoilt for choice and regularly delete apps they’ve only opened once.

In order not to be one of the single serving apps out there, it is crucial to design an experience not only fit for mobile but smooth and functional enough to claim a permanent seat on the user’s mobile device. In this post we will go over important points designers must take into consideration when building a mobile experience.

Intuitive Navigation

One of the most important aspects of mobile design is navigation. When it comes to screen space and usage, mobile phones are quite limited. Peripheral input is generally a single hand, in fact most often just a thumb and, though resolution has skyrocketed, the actual size of the screen is generally narrow. Taking this into consideration navigation should be intuitive and familiar.

Using familiar navigation patterns is preferable to creating your own custom navigation. However, one must also take care not to mix up navigation patterns - once the user gets in the flow of using one pattern, the sudden emergence of a new one can be jarring and confusing.

No matter how familiar the pattern, information tends to trickle down deeper and deeper and the user eventually asks him or herself ‘Where am I’? Therefore it is important to communicate the user’s position with visual cues at any given moment.

Finally, as a bonus, functional animation can be added to show the user the path that was taken to get where they are. A good example of this is the expansion of view in the App Store.



Consistency

Consistency is a strong pillar of design in general and is especially important when it comes to designing for mobile. Whether the mobile app is intended to be an extension of a desktop or web app, or designed from the ground up as an independent platform, consistency should be emphasized.

Using the same buttons, typefaces, and labels throughout the app helps convey visual consistency. Choosing a common work style for interactive elements is important in establishing functional consistency. Last but not least, if a web app or web site exists, maintaining the same look and feel throughout the ecosystem is required for external consistency.



Minimize data input and display

As mentioned earlier, mobile screen estate is quite limited and, due to this limitation designers should be careful in choosing which data to display and where, as well as the means with which data is collected from the user.
For starters, designs should be decluttered and kept to a minimum. The most important information should be stripped, ordered, and displayed in a clear enough fashion to be understood at a glance. Tasks, especially complex ones, should be broken down into bite sized chunks and logical steps helping the user comprehend and follow along. In line with consistency, familiar screens and components should be used to avoid confusion.

Input from the user should also be kept to a minimum. Typing on a phone is both difficult and error prone. If a lot of information is necessary, the forms should also be split up into manageable bites. Whenever possible, information should be pre-filled using defaults and or intelligent estimations. Autocompletion and keyboards relevant to input fields should be used generously. Additionally, rather than giving the user a long list of errors at the very end of a task flow, validation should happen every step of the way.




First Time Experience - Focus on it

As we mentioned earlier, your target user base will not hesitate to delete your app within the first few minutes of trying it out. Hence the reason first impressions in this ecosystem are more important and more decisive than your first date. Which is why designing a great onboarding experience should be prioritized. Unless it is absolutely necessary, we recommend avoiding sign in walls where all the functionality of your app is hidden behind a registration/login page. Tutorials and walkthroughs, though helpful, should be contextualized. In other words, guide your users as they use your app, rather than confronting them with everything upfront - they will forget. And when it comes to permissions, ask for them when they are needed. Clustering them together from the getgo will, inevitably, frighten your privacy sensitive users.



Aniticipate User input

Anticipating and helping the user along their journey is always a good idea when it comes to designing a digital experience. This applies even more so when working on a mobile platform, since apps are generally used ‘on the go’. Users do not want to expend more thought than is necessary for what they expect to make their life easier. Simple touches, such as clarifying, with images, what a security code on a credit card is go a long way.



Rule of thumb:

We touched upon the thumb being your only point of contact with the phone in the Intuitive Navigation section. Navigation, however, is not the only part of the mobile experience where you should take that into consideration. In fact, ever since the advent of touch screen phones, designing for the ‘thumb zone’, the area on a phone a user can easily reach with their thumb, has become necessary.



Gestures:

Standard gestures used to navigate mobile apps have become so common that even toddlers catch on. Standard, however, is the key here. Pinch to zoom, flick to scroll, and many similar gestures have been around long enough to be considered common sense. And an appeal to common sense is a designer’s best bet in crafting an intuitive exprience. Adding custom gestures, though they may be catchy enough to get other designers talking, mean steepening the learning curve of your app. We recommend supplementing already standardized controls with creative gestures - in other words, adding quicker, or fancier, option for the power users.



Accessibility

Accessibility, is unfortunately left as an afterthought because of stretched deadlines and limited budgets. However, taking into consideration the fact that 4.5% of the global population is color blind and 4% suffer from low vision, it should be prioritized. Visual feedback that is second nature to people with healthy vision means next to nothing to those who suffer from disability. One very common example is using red to highlight errors and green to indicate correctness. Green and red are indistinguishable to users with color-blindness. Rather than relying on color, designers should add other components such as ticks and crosses to convey the same message.

In conclusion, though it may seem like a smaller version of the web browser, the mobile experience requires a different design approach. One that prioritizes mobility, ease of use, established navigation, and accessibility. Users tend to be more fickle when it comes to the apps they install and keep installed on their phones. Designing an experience that is familiar with small touches of customization that augment rather than replace the status quo will go a long way in convincing your users to keep on using your app.