Wireframing Flashcards
Design Pattern
design pattern is a reusable, well-known solution to a usability problem.
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.
people look for familiar patterns in the tools and software they use.
For example, when someone sees a photo on a mobile device, they just assume you can pinch to zoom in.
Design patterns are reusable, well-known solutions to a usability problem. So, if we stick to these patterns, users will be able to understand how to use our software without reading a tutorial and without having ever used our software before.
Universal Design Patterns
learnability
efficiency
error management
satisfaction
Learnability
How easy is it for a user to learn how to use your software?
Clear Empty States
Things like favorites, contacts, chat messages, and notifications all typically have some sort of empty state that displays when there’s no information available. Rather than just showing the user an empty screen, empty states can be used to inform the user.
Onboarding
Onboarding is the process of showing the user how your software works via an information walkthrough.
Progressive Disclosure
Your user shouldn’t be presented with any more information than what’s necessary to accomplish the task at hand. This also plays into the concept of cognitive load
cognitive load refers to how much information a user can handle at a single time.
cognitive load
refers to how much information a user can handle at a single time.
Efficiency
Use Proper Hierarchy
Having a clear hierarchy ensures that a user isn’t going to get lost.
Fewer Steps/Clicks
While you shouldn’t remove clicks just for the sake of removing clicks, it’s still important to scrutinize your user flows to determine if a particular task can be accomplished in less steps and, ultimately, fewer clicks.
Simplicity
In the same vein as reducing the number of steps and clicks, it’s also important to make sure you’re only showing the user information that’s relevant and useful on a given screen
Error Management
Plain Language
Always make sure you’re speaking the user’s language
Appropriate Colors
Users have associations with specific colors based on their prior interaction with other interfaces. For example, red often represents errors that are critical and must be resolved, while yellow is often used for alerts or warnings that aren’t quite as critical of an error.
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. When deleting an email in Gmail, for example, you’re given the option of undoing rather than confirming a deletion. This works well because confirming each deletion could become tedious if you’re repeating this action regularly.
Autosaving
Another great pattern that helps account for user error is autosave. Before autosave was commonplace, forgetting to click save could easily result in lost data if your program stopped responding or your browser was accidentally closed.
Gmail also does a great job of this.
Satisfaction
Fun and Personality
Interfaces shouldn’t feel cold and robotic. They should be fun to use and full of personality!
Duolingo is a language learning web application that does this very well. The interface is full of bright colors, fun characters, and memorable sounds that make language learning feel like a fun game.
screen real estate
desktop application, for example, has a much bigger screen real estate to work with than mobile applications
Feature
A feature is something your app can do. It can be as short and quick as something like the “autosave” feature we discussed as above or as complex as a “comment” feature (which could include clicking buttons, writing, previewing, editing, and submitting user input among others).
What about a search function? Or a review function? Perhaps some sort of profile page for users, locations, artists, etc.?
Wireframing
Wireframing is a process where designers draw overviews of interactive products to establish the structure and flow of possible design solutions. These outlines reflect user and business needs. Paper or software-rendered wireframes help teams and stakeholders ideate toward optimal, user-focused prototypes and products.
