UI and UX for mobile applications, an introduction

| 2 Comments | 8 minutes read

What’s the difference between UI and UX? Does it matter? What makes mobile applications different from web sites on a smaller screen? What are the best practices and current trends in mobile applications development?… This article aims at shedding some light on these topics.

 

TL;DR: strive for simplicity, which is hard. Iteration is the key, guided by user testing. Create your own universe, based on standards, and make it seductive.

 

We are experimented developers, with a keen eye for ergonomy, and we naturally face UI and UX challenges when developing mobile applications. The takeaway points of this article are basic common sense advice, inspired by our experience on several projects. However, take all of this with a grain of salt, I’m not an UX or UI professional, it just captures my thoughts on the subject. Details and a more complete analysis can be found in the ergonomics literature, which I do not pretend to represent here.

This article is aimed at small or medium businesses aiming at creating their first mobile application. Probably coming with a web background, you might want to pinpoint the differences with a native mobile application. Users more experienced might also be interested by our conclusions, which we are happy to challenge.

 

The difference between UI and UX

This is a sensitive and blurred subject. UI (User Interface) is what’s visible on your screen: the shapes and colors, the images and background, the fonts, the layout, and even the animations are part of the UI.
UX (User eXperience) is a broader concept, which tries to determine what is on each screen and why the application is structured the way it is, so as to make it an intuitive and delightful experience to the user.

This is illustrated in a famous infographic by Ed Lea:

Ux and UI as cereals

  • It all starts with data, that you would like to feed to your consumers.
  • Based on research, conventions, user studies…, your team came up with a product and a list of features.
  • UX then optimally arranged these elements to provide an integrated experience to the users.
  • Finally, the user is actually interacting with the UI, which is simple and shiny.

In a sense, UI is part of UX. Both are related, but it would be a big mistake to limit UX to a good UI. The fanciest interface will please the user at first, but will never compensate for an unintuitive screen workflow. Let’s now dive into these notions.

 

UX

A good user experience is the interaction of so many notions: usability, design, wording, system conventions, accessibility, usefulness, human factor, system performance, ergonomics… no wonder it is that hard to achieve. And all these are user/problem/context dependent!

Strive for simplicity

One way to accommodate for these issues is to limit the footprint of the application; a  smaller app with less screens is easier to design. Totally true and logical, but actually not that easy to achieve. Stacking a list of features (such as all the ones available on the sibling web site), plus new ideas coming from the platform (access to geo-location or contact list, touch gestures or accelerometer…) is easy. Selecting which of these features make most sense and provide the greatest value, refraining from stashing these in a hamburger menu or in settings is way more frustrating. Simplicity is hard.

“It seems that perfection is finally attained not when there is no longer anything to add, but when there is no longer anything to take away”

— Antoine de Saint Exupéry

Simplicity might be the one big difference between mobile applications and web sites. It is not only a question of limited screen real estate, it is a practice that emerged in the mobile ecosystem. With such competition, it tolerates no flaw, and an app only has a few seconds to convince its user. It has to do one thing, and do it extremely well. There’s no such thing as a Help menu or a user documentation for mobile applications. Users get used to this and start to consider their desktop applications as bloated and painful, hopefully inciting developers to apply the same simplicity guidelines in that field.

“An app has to do one thing,
and do it extremely well.”

 

Iteration is the key

There is only one way to know if the features you selected and the way they are presented suits the user. It is to ask the user. Unfortunately the user will not be able to name these features (they would have required faster horses said M. Ford), or even to precisely express what is wrong with your interface.

So the only way to solve this conundrum is to guess, measure and iterate. Start from standard conventions, a brainstorm, and previous user’s feedback to imagine new solutions. Prototype these rapidly using plain pen and paper at first, or using tools (Balsamiq, Marvel App, Origami …). Then ask simple tasks to the user, recording without interfering, and gathering feedback to validate or dismiss your initial assumptions. Invest as little as possible to challenge an idea, so that there is no frustration if you have to throw it away, keeping you less biased.

This workflow only scratches the surface of good user testing. If you’re not familiar with it, know that it is hard, and a dedicated field of study, with its own experts that you might want to contact.

Such rapid iterations is a field where companies’ traditional waterfall process fails miserably and needs to be challenged. No matter how well you (think you) understand your users and the market, you will be amazed by the mistakes you do when designing applications. The result after a few iterations of this process is so much better than what you originally came up with.

UI

The User Interface is the visible part of your application. It conveys your brand image and users will judge your brand based on the experience you provide.

A user interface is like a joke, if you need to explain it, it is probably not that good.

A good UI shall follow the platform standards, so that the user feels comfortable and immediately knows how to use it. Some of the current trends in mobile applications are detailed in this section [inspired by techblog.betclicgroup.com/2015/02/06/mini-training-mobile-ux-trends/].

However, UI should also carry the uniqueness of your brand and be immediately recognized. The sexyness of your design is a key factor in the adoption of your application. An inspiring and beautiful gallery of UI ideas can be found here [inspirationmobile.tumblr.com].

Many other aspects of mobile interfaces must be taken into account to design a good UI, such as most convenient touch areas on screen or the UI conventions of the different platforms. Devil is in the details, note how the following chart is for right-handed users.

 

Flat design

Probably first introduced by Windows 8 Metro interface, flat design now rules mobile interfaces. Skeuomorphism is dead, borders and gradients are gone and leave clean and flat design elements. Introduced in iOS7 and Material Design, it now spreads to applications, which want to match the platform’s style.

National Geographic

FlatDesign

 

Spacing

Although limited on mobile, adding space in your layout relieves the user. again, it means making choices and showing less information. But the result is a calmer application that goes straight to the point, with large touch targets.

Airbnb

Soundcloud

 

Images

Images are no longer limited to a thumbnail role. Full width or even full screen, images tend to replace the background and are part of the general atmosphere of the screen. Blurring effects and main color palette extraction now make images a first class citizen in mobile screens.

Rdio

Gogobot

 

Animations

The processing power of mobile devices now enables fluid animations inside or between screens. These eye candies not only participate in the general atmosphere of the application. When done properly, these subtle clues also provide context awareness and user feedback.

Click on the following images for examples, or go to capptivate.co for a large gallery of these.

StoreHouse

Flickr

 

Gestures

Unknown in the web universe, touch gesture are now standard in mobile apps. Two-finger pinch to zoom on maps or images is so obvious it does not need to be explained (although Apple tried to patent it).

The new contestant is the swipe, which is becoming so standard it sometimes is the main mode of interaction and no longer the action shortcut it used to be. Usually highlighted in the onboarding tutorial, swiping is about to become an implicit way of interaction.

Long presses, double taps and more complex gestures are for the moment reserved for specific actions, not mandatory to use the app, but some apps leverage these.

iOS Mail

tinder

 

Conclusion

According to me, for mobile applications, the key point to User eXperience (UX) is simplicity, guided by iterations and user testing.

User Interface (UI) is a complex alchemy between platform conventions and creating your own attractive style.

The contribution of such an article is the selection of items it chooses to highlight. If these would not be yours, I’d be happy to discuss about it, so please leave a comment.

 

Like it?  Share  it!

Share Button

2 Comments

  1. Hey, your article is great. But let me point out some more topics that you might have escaped. Like hidden navigation, the smooth and vibrant UI design, font, style etc. It took me a long time to research on these topics and now I came to an end that app design trends are not evolving time to time. Last year there was a craze of retro-themed UI design but according to my investigation the more your UI looked calm and vibrant, the more it will be liked by your users. Pastel colors, neon themes are in trend now. Many alike past two years people like simple format of text styles rather than any other complex style. So if you want to rule, make it simple 😀

  2. Hey Gilles,

    Nice Post!!!

    Everyone is busy in launching their own mobile applications nowadays. But to launch one it is very necessary to know about the current trends going in the merket so that you can match up with your competitors and do well. User Experience(UI) Designer is concerned with the conceptual aspects of the design process. User Interface Design is its compliment, the look and feel, the presentation and interactivity of a product.

    Thanks for sharing such an imformative article and Keep Sharing !!!!

What do  You  think? Write a comment!

Leave a Reply

Required fields are marked *.


CommentLuv badge