0 votes

What are the major differences between designing for web and mobile?

in UI/UX Designing by (140 points)

2 Answers

+1 vote
by (6k points)

Hi Chetna,

As per my experience the main difference is mode of information sharing.  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.

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 = 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.

+1 vote
by (4.7k points)

Hello Chetna,imagePlease go through the below link for more details :

https://99designs.com/blog/web-digital/desktop-vs-mobile-app-design/

I hope this information finds you well.

...