Designing for the Web vs. Apps in the Mobile Era
Mobile is on rise, as are mobile apps. Although the web is still relevant, mobile apps are here to stay. These days, there is more and more pressure to deliver appealing user experience, and design does the job.
In order to design delightful user experience, we need to understand what we are dealing with.
Let’s start with understanding what web does for us and what apps do for us.
Web was here for quite a long time and still is — under the name Responsive Web. The evolution of web was a direct response to evolving mobile context. So is there any difference in designing for web and designing for apps in the mobile era?
Mobile is still growing, and apps are becoming a big part of our lives, helping us to move through our days. Mobile users have little time, short attention spans, small screens and can be easily distracted. Under this context, we will understand key goals for web and apps.
In the world of apps, the primary focus is the completion of a task. Apps are built around tasks, which should be simple in their nature. Extra features should not be hidden behind buttons; navigation should be simple and straight forward, not hidden behind icons.
Web is quite a different story, though. Web was born as a medium for information. Websites are for searching, accessing and understanding information. Mobile constraints only highlighted the need for well-written, structured and visually prioritized content.
“Mobile apps let us complete a task. Websites give us access to information.”
Mobile apps = tasks, web = Information? How do we get there?
No matter what we are designing, we need to stay focused on the user and his understanding. In a broader sense, we humans have a lot in common. Cognition, visual perception — each of us is wired the same. This is quite a big topic, worth a series of posts in itself. To keep things short, psychology gives us a number of facts about our users we can built upon.
While this is all nice, each of us is shaped by our own experiences and knowledge. The level of user understanding is bit more complicated. Luckily, we as designers have a bunch of design methods to help us. The core methods center around empathy and user research. The rest depends on whether you are dealing with task-oriented apps or information-focused websites.
Apps, get stuff done.
As we know, mobile users have frequent interruptions, little time and short attention spans. The key is to keep apps simple and build around a single task. Nice, right? But how do we achieve this?
First of all, we have to understand the task that a user wants to accomplish. It’s good to know how this task relates to users and what they expect to get done. Since the task should be simple, we need to make tough decisions and say “NO” to nice additional features. To make these decisions you have to remember who you are designing for.
After pinpointing the task a user wants to accomplish, we then must create the right flow to guide the user through the app. Do not forget that users came to your app to accomplish a goal, not to admire your buttons and explore what tapping on them means. Keep UI elements to a bare minimum, adding just enough to help users make progress. Use visual design to draw attention to them; so no matter where users are, they will always know how to proceed. In a more formal way, we can say that interaction design is the key activity here.
Websites, the source of information.
Historically, websites were built to present information, and they still do that. However, mobile arrived and set the bar even higher. We no longer have the safety of closed rooms and spacious desktop monitors. In addition to this, mobile has introduced an infinite number of screen sizes to the market, most of which are smaller than bigger. We have no control over viewports, so we have to make sure that the initial attention of users meets their expectations.
Here are a few questions to consider:
- Can users immediately understand from the title whether this website will be useful to them?
- Are they able to quickly understand the content based on the headlines?
- Can they easily navigate to the content they are interested in?
To address these questions, it is good to have a content strategy tailored to your users, so they get exactly what they are expecting. A good content strategy gives you the structure for good copy. Each title or headline should be an entry gate that invites users to read the copy. Good copy must be easy to read. Reading is seriously difficult. SO, be straightforward. Don’t use uncommon words or complicated sentences.
Once our content is structured and well-written, we must be sure that people understand the navigation system that will steer them towards the content they want. Additionally, we create a strong hierarchy through visual design, so users will know where the key information is.
As we know reading is difficult, typography is here to help and make the reading experience more enjoyable. Font size, line height and character count per line are key variables here. Considering all of that, information architecture is the field that encompasses all these points.
So, is there any difference?
Yes, there is a real difference between designing for mobile apps and designing for website. We need to be aware of that and use the right process. For mobile, we focus on interaction design; for the websites, we focus on information architecture. To be fair, designing for both platforms have a lot in common. At the end of the day, we are all just human, right?
For further reading, see:
