1. Define the Differences Between Desktop and Mobile
Identifying user tendencies, dislikes, backgrounds, and interests can be a great initiative for the design of a desktop or mobile solution because it helps in decision-making. Going one step further would be to develop an accurate understanding of the user’s mental model for each platform. Our goal here is to keep this understanding positive and engaging.
Some notable differences in mental models center around defining the essentials for our two environments: desktop and mobile. Outside of those elements that are specific to the platform being used, everything else should be consistent in design.
Let’s take a dating application that has both a desktop and mobile platform. As far as design consistency is concerned, everything ought to be in the same colors and logical flow. Some key, global features of such an application should be available on both desktop and mobile:
- Filtered Search
- View Profile
Other secondary features should be available only on the desktop. The user will theoretically be willing to go through the dating website at length. A full feature list of options should be made available in this regard. A leisurely mental model motivates a willingness to have more usable features.
As for the mobile user we must assume there are situational restraints on how much functionality it can have as compared to its desktop counterpart (such as restraints due to a smaller screen and less processing power). However, this should not mean the mobile application ought to look and act completely different than its desktop version. It is just a question of availability. The mental model of the mobile user would create a need for location-based functions and viewing a profile. However, a larger effort needs to be made for images on mobile. This is a dating application after all and the image of a user profile is central to its purpose. Optimizing that for an easy user experience needs to be considered just from a design perspective.
2. Don’t Make Users Relearn the App.
The goal of any desktop or mobile application is to keep users engaged. In their initial onboarding experience users may go through some sort of tutorial or learn just by perusing. This is what motivates intuitive usability among similar platforms.
Of course gesture and navigation controls may function differently, but the information architecture of a desktop and mobile app’s structure or flow need to be similar. Introducing a foreign set of features is one thing that reduces consistency and may severely impact the user experience.
3. Don’t Confuse Your User – Brand by Cross-Channel
Let’s take the biking application Strava. This application has both a desktop and mobile version. The primary version is the mobile version which records the time the user was biking, his or her yeartodate miles rode, time, trips, a map based log of where the user traveled, and sharing functions for like minded bike enthusiasts.
For all intents and purposes the application tracks user data very well. In this aspect the mental model developed for the mobile user actually does have more features because it is designed as a mobile experience first. After all, users can’t really ride a bike with their desktop in their pockets! It goes as far as offering more in-depth data on their website, which is where an inconsistent design is apparent.
Their mobile design:
Strava’s mobile app is branded with a black and orange design frame. It remains consistent throughout the mobile app and provides a very modern UI at the same time.
On the other hand, their desktop site, which offers all the recorded data associated with a boarded account does not look like its mobile counterpart: