Being a designer involves a lot more than just making things functional and aesthetic. In fact, I often find myself analyzing people’s behavior and integrating psychology into my workflow. When it came to making the transition from designing for desktop to designing for mobile, I was faced with new challenges. I was forced to look further into the user’s experience, understanding thoroughly the differences between using a desktop and using a smartphone. Here is a guide about mobile design, from psychological insights to utilizing small screens and adapting to suit the different operating systems.
1. Understand the difference
As a designer, making the transition from desktop to mobile isn’t easy. When I started, the first thing I became aware of was that you can’t simply recreate the same screens you have on the desktop version of the product on mobile. You need to rethink each flow and feature, its importance and relevance to this platform. Basically, you need to change your way of thinking.
One of the biggest differences I noticed is that when people use their desktop computer they usually have an intent. They sit next to a machine, ready to invest their time in something they probably decided in advance – play a video game, answer emails or build a website. They know they’re going to spend some time on this task so they’re most likely to be more patient. Mobile devices, on the other hand, are mostly used on the go, and their users’ mindset is different.
Try to get inside your users’ heads. What are their surroundings? Where and when will they be using your product? Maybe they’re in a hurry or standing in a line, or the sun is blinding their screen. Possibly they just woke up and only want a clear overview of a summary of what they missed. The time your user spends engaging with your product is very limited. Also, unless your product is mobile only, the user is already familiar with the desktop version and is used to a certain flow. They expect the mobile version to bring the same value.
2. Keep it clear: navigation and hierarchy
In his book, “The Design of Everyday Things”, Don Norman wrote: “Two of the most important characteristics of a good design is discoverability and understanding. Discoverability: Is it possible to even figure out what actions are possible and where and how to perform them? Understanding: What does it all mean? How is the product supposed to be used? What do all the different controls and settings mean”.
Norman’s famous example of a good versus bad product design is a door – when users stand in front of a door, they need to immediately understand if it should be pushed or pulled. Of course, a written sign can always help, but how can the shape of the door handle itself hint to the user how to relate to it? If, as a designer, you fail to provide the right usability signals for the usage of your design – it won’t work.
A similar outlook should be used in mobile design. Communicate clearly what can be done with your product and manage expectations to avoid confusion of the user. Hierarchy of navigation is very important and has to be logical. It has to immediately show what the main functionality of the app is. Using clear icons and labels for your navigation will make your design as accessible and intuitive as possible.
Let’s look at Snapchat – although the navigation of the app is confusing at first glance, the intent is clear: the main screen is the camera, suggesting that the main functionality of the app is taking photos and videos. Everything else is secondary.
The same goes for Shazam. When you open the app there’s a very clear intent: the big button in the center of the screen, along with very clear text saying “Tap to Shazam”, plainly indicates that this button performs the main action – it recognizes songs. You can’t go wrong here.
3. Keep it minimal: one screen, one intent
As we all know, mobile screens are much smaller than desktop screens. Having less real estate means that, more than ever, you need to decide what’s most important. This is a little like downsizing your house. Think about what you would put in each room if you could only take a few essential objects. What do you need in order to perform each room’s designated activity?
When designing each screen, ask yourself: what is the primary action your user will perform here? What are they looking for? What are the most common actions they’ll perform? Ensure not to overload your users with a lot of information at once. Instead, expose them gradually. A new user will only need a certain amount of features, while a pro user will need more. If your navigation is clear, they’ll find what they’re looking for. Any hefty tasks, such as filling in an online form, should also be designed as simply as possible, with a clear flow. Instead of making the form super long like you might on a desktop, break it down into a flow of steps so that each screen contains only a small amount of information. On mobile, users get scared when they see a lot of info on one screen, especially if it’s small.
4. Create functional animations
Good UI animation provides much more than just bringing the page to life. It creates a sense of context, clarifying to the user where they are on the app, how to get back to the previous page and also offers visual feedback. Clicking on a list item, for example, should make it expand to full view, or an animation, while the app is loading, will ensure the user knows that something is going on. Subtle, clear transitions can really take your app to the next level, creating an interesting, lively interface, as well as enabling the user to understand the change to another layout. Just don’t go overboard: you don’t want more than one thing happening on the screen, creating chaos and breaking your user’s concentration. Also, if you’re going for a purely delightful animation, make sure it’s not in a main flow, because it will soon become repetitive and annoying.
5. Use push notifications to your advantage
Unlike emails, push notifications are instant. They let your users know something important has happened – maybe an action they did generate feedback (likes on photos they posted) or they got an important message from one of their customers. You can also use these to tell your users about new value they can get from the product, such as tips and updated features. Understand what brings the user to your product and what kind of content and notification can increase engagement and retention. Consider what can be meaningful and useful to your user and when the best time is to notify them.
When creating the Wix app, for example, we understood that users need the possibility to contact their site’s visitors. That’s why we decided to create the “visitors” feature, that lets you see who’s on your site right now and enables you to start chatting with them wherever you are. You can also find the location of the visitors, the duration spent on the site and what page they’re on. This feature lets our users provide help to their website’s visitors, answer questions immediately and even send links to products in their shop. All that plays an essential role in increasing the chance for them to generate a sale, so we ensure they receive a push notification for each new visitor. Just be careful, as too many notifications can feel like spam and make your users uninstall your app.
6. Design for both operating systems
Another challenge of building a mobile app is deciding how it behaves on different operating systems – iOS and Android. In my opinion, it’s most natural to have an app that looks pretty much the same but behaves naturally on the OS it’s running on. Adjust the fonts, sizes and usage patterns accordingly, so that the app won’t feel weird on the user’s phone and will be intuitive. Start your research by reading the material design guidelines and the iOS human interface guidelines – they’re a great source of information for mobile designers. Check out popular apps, like Instagram or Airbnb to see what changes and what stays the same across platforms. If you’re an Android user, get yourself access to an iPhone (and vice versa). Make yourself switch for some time so that you can get a thorough feel for the device. There’s no amount of screenshots that can replace daily usage of an OS to fully understand it. If you do, however, want to get a rough idea of how designs for the two operating systems differ, take a look here.
It’s up to you if you want to design a completely different experience for Android and iOS, or just make a few adjustments. You’ll need to consider the technology you’re using to build the app and the time you have for the design and development.
7. Connect with other apps
Your app will sit on your users’ device along with many others. Take advantage of that by adding features like social login or sign up to shorten the time it takes to get started using your product. Enable sharing content from your app into others and the other way around. Consider connecting to photo editing apps that are installed, if you don’t support those kinds of features. This interconnectivity will really make your users’ lives easier and help create an overall flowing sensation on your app, increasing the chances that they’ll want to use it.
My last tip applies to both desktop and mobile design: use your product on a daily basis. This will help you understand what’s missing in the user experience, find bugs you were not aware of and think of new ideas and fixes that will improve your current version and bring more value to your users.
