Desktop & Mobile App Flashcards
screen real estate
Desktop screen size
Navigation patterns
navigation patterns can change drastically based on the platform and device. Let’s take another look at our Spotify example. Notice that, while general sections and features are present in both mobile and desktop versions, the method for accessing them is completely different.
Navigation Heuristics
Make it Visible
Always use the space you’re given. Menu systems shouldn’t hide from the user; they should be placed in familiar locations.
Show Your Current Location
A good menu system always gives you an indication of where you currently are as well as where you came from.
Easy to Read
Menu systems should use plain and consistent language that the user can understand rather than getting too technical. These navigation bars from Duolingo, for example, use simple language that’s very easy to understand and that describes the sections of the site in ideally just one word.
Big Enough to Tap
This is even more of an issue on mobile, where users are using their own fingers on much smaller screens to interact with navigational elements. For this reason, mobile platforms offer their own guidelines specifying the minimum size for these elements.
tabbed navigation
Solid Starts example
About; Toddler; Baby; App
At the top of desktop
Design Patterns
design pattern is a reusable, well-known solution to a usability problem. As humans, we look for familiarity in our everyday lives. Cloud formations might look like dogs and bunny rabbits, star constellations take human form, and we see familiar faces in seas of people. These are all patterns we look for instinctively, or perhaps even haphazardly.
The down arrow next to “Room type” and other filters implies there are more options to discover either by hovering or clicking.
Each photo has a heart to the top right, which we can safely assume is a sort of favoriting system so that you can mark the places you’re interested in.
We can also safely assume that clicking any listing’s image will give us more detail about that listing as that’s how pages like this typically function on other sites.
universal design patterns
Learnability
How easy is it for a user to learn how to use your software?
Onboarding is the process of showing the user how your software works via an information walkthrough.
Error Management
Plain Language
Always make sure you’re speaking the user’s language. If you use technical terms or dry language, it can be hard for the user to relate, making the software feel more robotic and less personable.
Helpful Errors
Errors should not only explain what went wrong, they should also offer courses of action to correct an error or move on from it.
Undo vs. Confirm
Sometimes, instead of confirming a user’s action, it’s better to let them go ahead and do the action, but give them a way out in case it was done in error.
Autosaving
Another great pattern that helps account for user error is autosave.
