Go mobile or go home

The „mobile friendly” compliment from google is not a privilege anymore. Nowadays more than 80% of the websites meet the requirements in one way or another. It has become more of an standrard not only by google, but end users also. In case a company wants to represent itself it’s necessary to design for mobile and do it good.

Approaching the mobile concept

When people hear the word „mobile”, they automatically expect something that’s easily portable. Overall compact, a miniature version of something bigger. This often means reduced functionality. Take the Swiss army knife for an example. It can do a lot of different things, fits in your pocket, but if you find yourself in the jungle creating a path, you’ll probably end up using a big machete. This might be similar to desktop versus mobile situation, however this is a common misconception.

The mobile version does NOT mean less content, or limited functionality. If you ever ordered pizza while sitting on the bus on your way home, you know the drill.

Seriously every platform has it’s own benefits, you just have to make it fit.

Understanding mobile user’s needs

Before we dive into the pool of awesome interfaces and start designing, we must ask a few very basic, yet crucial questions from ourselves:

Who are they and what do they want?

The psychology behind mobile platforms

Smartphones became a key part of our everyday lifestyle. People often treat mobile devices nowadays like they were jewelries. There is a strong emotional boundry between the user and the device.

Just as clothing or jewelry, mobile devices are also affected by trends. The design that users loved two years ago might not fulfill their functional, or aesthetical expectations.

Good news for UX, since this provides a constantly developing, long-term background.

Where and how will they interact with the product or service?

To kill time in long queues, to find the nearest place of interest. Not to mention status updates on social media, the list goes on and on. So as you see, the activities can vary between too much or too little time. Whatever they come up with, you have to decide what your app is supposed to achieve.

„Is it a time killer, or a time saver?”

How can you deal with distraction?

This question comes from the one above. In terms of the surroundings users may find themselves in situations with different level of distraction when using their phones.

Reaching people out of the confort zone

The „one eye one thumb” rule:

In other words, using phones everywhere and anywhere makes it a bit challenging for designers. This often involves completing tasks by one hand. The less concentration it needs from the user to handle the device while navigating through the interface, the better.

What you can do about it?

❤ Make it easy to share and save

❤ Reduce the need of filling out forms by enabling login with social media or google accounts. Only keep the most important ones and optimize those

❤ Find your most important tasks and make them super easy and fast

Supporting multi-channel usage and Multi-device web

It’s obvious that you are limited by the size of the screen when designing the interface, or trying to fit the content. However the key is to focus on the solution rather than just on the negatives. For an example, when planning your design, try to go for multi-channel usage. This means that switching between mobile and non-mobile should be clean and crisp for the end user, without any friction.

Multi-device what?

There were times when the way to go was to optimize for big desktop enviroment or maybe laptop screens. However as the variety of devices grown it redefined the modern term of Web. The „thumb” as new way of input was born. If you look at the modern smartphone trends you can see that while screens around 5 inches are gaining more attention. But the 4.7” is still dominant on the market. This supports the dominance of single handed usability.

How dominant is the single handed usage?

According to a sudy by Steven Hoober in early 2013 the charts look something like this.

„According to Steven Hoober’s study around 75% of the interactions that were performed by single and two handed, were dominated by thumb.”

Prioritize content for the thumb

There’s no such thing as a magical design that will make users puke rainbows. In case of mobile, you have to prioritize your content. While on desktop you have plenty of playground when it comes to fitting content on the screen. You don’t have this luxury on mobile, especially when it comes to smartphones. What you can do is make up a list of your content, choose the ones that influence the users the most and put them on the top.

How to create that badass list?

With the help of user journeys you can streamline the tasks of users. These need to be easy and rewarding to complete. User journeys make it clear for you that a process meets these requirements or it needs redesign.

„It simply defines what goes to the top on your priority list.”

Getting familiar with the desires of your end user’s is one of your top priorities. As you could read about it in the Understanding mobile user’s needs section.

So in a nutshell, if they plan to search a lot on our site, then search bar should be placed near thumb. They want news? Then make sure that you have constantly fresh content on the top segment.

And keep in mind like your life depend on it:

„Priorizing does not mean less content!”

Common mistakes that makes people go bye-bye

☢ You MUST download

When you think, the times „Let me tell you what browser should you use” have gone out of the picture, it greets you back on mobile. The only difference is, that they propmt users to download apps. Many designers, developers think of apps as an easier way to optimize. Keep in mind, if the user is between two WiFi hotspots, or simply does not feel like downloading another app just for one occasion, you’ll end up burning yourself.

☢ The „sorry” websites

Don’t ever make your users scroll down to the bottom of the page to get the full site link.

☢ Forms that look perfect on desktop

In case you need forms, you will probably kill a left aligned label’s perks by focusing only on desktop. Also long drop-downs will be just a waste of time and space.

You can read more about forms in my previous article.

Tips for going mobile

✿ Touch above all

✿ Use controllable password fields

You can integrate a small button near the input field to hide or unreveal the password, so they can perform a double-check. This is extremely important when you apply password failure limitations on sites such as online banking sites.

✿ Optimize forms

✿ Greet your users with respect

Remember they completed one of the most hated task ever — even if you got it optimized — , a registration form. Make sure you thank them and introduce the features briefly instead of just letting them sink in the deep water.

✿ Just in time education instead of boring tutorials

It is a good practice instead of a boring tutorial after an annoying registration form, that the users just want to skip.

✿ Use skeleton screens instead of boring loading indicators

A skeleton screen is basically a pre-loaded version of your website, that serves as an indicator to the end user, telling them

„You’re almost there!” instead of „It’s going to take awhile…”

If you like the article please recommend and share it. I appreciate every help! ❤ Also share your thoughts in the comment section below! :)