4 Proven Steps to Make Mobile Design Admirable

How to Make an Effective Mobile Design — 4 Key Principles

Igor Izraylevych
6 min readJul 27, 2017

Two years ago smartphone owners became the main internet users. They are demanding. They hate your website for advertising banners, but search and buy the goods using phones. They never rush, but they can’t wait another second.

In 2014 the amount of mobile internet users exceeded the amount of desktop devices users. They dictate the rules forcing us to make internet more convenient, easier and more accessible. If you can’t meet their demands, then you have to admit that you’ll be out of business soon.

It’s important to design the websites interfaces and consider the convenience of viewing and using them on a mobile device. That compels us to learn the goals and needs of our visitors better.

We try to follow some simple principles in our work. We’ll describe them in this article.

Mobile first?

«Mobile first» philosophy sounds good in general, but in most cases, it’s too radical for designing complex interfaces. If you don’t have enough experience in designing by Luke Wroblewski’s rules, as the output you’ll get convenient, but poor interface. Our global task is to satisfy the website visitor with both content and functionality.

Principle #1. Getting rid of excess

Think what’s the most important thing for your website visitor.

Duplicate links on the same page? One is enough.

Advertising banner? Well, you should know that 84% of visitors from 25 to 34 years old leave a website because of an obsessive or simply irrelevant advertising. This doesn’t mean that you should avoid advertising. This means that before placing it you should be twice as cautious.

There is a lot of visual and information junk on any poorly designed website — unnecessary pagination (web pages numbering), inappropriate and non-functional graphic blocks etc. Feel free to send all the junk right where it belongs!

We earn through our website. Money, social significance, ground for self-admiration — no matter what. The main thing is that our visitors are our investors. And they always invest their attention before investing money.

Principle #2. User’s attention is a resource

Like any resource, the user’s attention is strictly limited. Imagine that attention is money. And the cost of information on your website increases in proportion to the complexity of its understanding. As soon as the «price» of information begins to exceed the «amount of attention» the visitors are willing to spend on your website, they leave you immediately and go to your competitors.

You should try to offer your visitor only necessary and useful information. Design an information structure of your site so that the visitor could have an obvious and simple way to get what is needed.

Such focus on content has a lot of advantages. But its main disadvantage is that it will keep you busy. Be sure that the visitor will definitely notice bad content. If you offer secondary, uninteresting or not clear information — you will get the opposite effect!

Principle #3. Design not interface but content

If you are engaged in designing interfaces for at least six months, you know that text is a part of design. Approximately 95% of all websites content is text. Does it mean that design is a part of text?

Okay, let’s leave the philosophy of design for now. We should understand that the quality of content and its correct presentation — typography — affect the design perception more than anything else.

We pay great attention to typography compared with other elements in designing our interfaces. Improve your knowledge in this area, read good blogs (for example, Typewolf), experiment (but not on your visitors). Eventually, users will love your website not only for content but for the accuracy and attention to details during publication.

Ask yourself questions

Now we’re ready to move on. You know about our three principles of designing interfaces. They help to answer the following questions:

  • Why?

We ask this question when we want to leave something on the screen.

  • For whom?

Here we understand what part of the audience’s attention we can count on.

  • How?

Answering this question we decide what to do with the rest of valuable information so that the user could get it in the most accessible way.

All these principles are favorable for designing popular and successful products. As you noticed, we haven’t mentioned mobile interfaces for a long time, and are talking about development in general. The value and convenience of the information you offer the user increase overall. It’s so obvious that it’s weird that we even write about it.

«A fear of open spaces»

In any case, when we design the website interface, we try to give visitors what they need. Fortunately, it’s true — we’re trying. Unfortunately, these efforts are wasted in a lot of cases. Even if you want to give only necessary and useful things in designing interfaces for large screens, there is a great temptation to add something else. Just a little bit. And a little bit more. And more. Here is too much empty space, though, let’s fill it with something. 9 out of 10 young designers do this. We call it «a fear of open spaces». As a result, the website interface becomes overloaded and too «expensive» for users’ attention. The needed information is available, but it’s difficult to find. Users can also be lazy to find information — they have every right to it and, even more, they enjoy it. As a result, the product loses its value. Visitors concentrate on secondary and just extra interface elements. Not to mention about owners of mobile devices.

We described ideal conditions — designing website interface from scratch. In real life tasks to make interface comfortable both for large and mobile screens are not so rare in order to keep up with the times. And in real life our resources, that is, resources of our customers, are limited, so we need to be inventive.

Principle #4. No scaling

The fastest and cheapest way to show your website on a mobile device is to make its interface smaller. Cheap solutions have expensive consequences. Users’ interaction with their smartphones radically differs from interaction with laptops and desktop devices.

It’s important to point that active elements sizes, displaying elements within a visible area of the screen, a presence of such elements shall be considered as well as many other things. Not less important to design them for interaction with touch-devices.

Therefore, we don’t like pagination (except the «next» and «back» buttons), we can’t stand the drop-down lists and don’t put links back-to-back. We love all our users!

Conclusion

As you noticed, these principles of development and design of interfaces for websites are not so hard to follow. We still want to make our products more useful and available, just like a few years ago. A tight framework helps to search and find the most effective decisions. The approach when we have to think about the price of errors, is important in itself. At the same time, its indirect influence helps the developed interface to be more meaningful, the placed content to be more interesting, and the information architecture to be easier and more understandable.

Of course, we are not limited to these principles. There are a lot of big and small rules or sudden insights. We use everything that can help with an interface design, taking into account the requirements of the most demanding audience of its users.

This approach makes your website interface able to meet all its visitors’ needs, whatever devices they use.

Do these principles help you? Maybe you have your own unique hack for mobile design? Share your experience!

If you liked this, show your support by clapping us to share with other people on Medium.

Follow us on Facebook, Instagram, LinkedIn, Behance, Medium and visit our corporate blog for more news and articles on smart solutions.

Any questions? Feel free to contact us!

--

--

Igor Izraylevych

Co-founder and CEO of S-PRO, Entrepreneur, Advisor & Expert in Mobility & IT Strategy. Custom solutions for enterprise and startups http://s-pro.io/