Considering Design Principles
Cheatsheet for design guidelines
A good website design is crucial because it directly impacts how users perceive and interact with the website. It solves various problems related to usability, engagement, and conversion rates. Good design isn’t just about aesthetics—it’s about functionality, problem-solving, and enhancing overall user satisfaction. It ensures that a website meets the needs of its users while achieving its goals, whether it’s to inform, engage, or convert visitors. The design guidelines are neatly summaried by Dieter Ram, Jakob Nielsen and Ben Shneidermann.
Dieter Ram's 10 Principles of Good Design
-
Good design is innovative: Whether you are making a change or doing something in a new way, developing new ideas or making improvements to existing designs and working alongside new technology, all of these offer a multitude of opportunities for you to be innovative within a design.
-
Good design makes a product useful: It doesn't matter how stunning a product looks if it is practically unusable as it becomes completely worthless. Products are not pieces of art to be admired. They are there to serve a purpose and solve a problem.
-
Good design is aesthetic: Beautiful items tend to make us feel comfortable. If a product is beautiful, you may be more inclined to use and want it. Some may argue against this point as you may have your own subjective idea of what is beautiful, and some well-designed items do prioritize utility over beauty. Regardless of your taste, you may like the things around you to be beautiful irrespective of how you define beauty.
-
Good design makes a product understandable: For example, handles on doors that don't indicate if they should be pushed or pulled or taps that don't indicate if they are hot or cold just leave the user confused. The opposite of this is an instantly understandable product that is completely self-explanatory and communicates what it's about, what it's for and how to use it. This saves a user from breaking the product or spending time reading through instruction manuals.
-
Good design is unobtrusive: An obtrusive product is an over-designed product. Products that tend to fail are those created with the designer in mind or with presumptions of who the user might be and or how they might use it. The very best products allow the user to do exactly what they want to do. These products should also help the user to complete their intended tasks effectively and happily. The design should not hinder the individual's intuitive process.
-
Good design is honest: Good design doesn't have tricks! It doesn't pretend to be something that it isn't, and it doesn't try to manipulate you into buying it by making promises that can't be kept. It should always have the user's best interests in mind, so it shouldn't have to try to lie to you or try to be something that it isn't.
-
Good design is long-lasting: Design should always be thorough to the last detail and avoids being fashionable which means that it never appears old or antiquated.
-
Good design is thorough down to the last detail: A Good design should be detail-oriented and leave nothing to chance. Every single aspect of the design should be considered, and all the elements should qualify to be a part of that design. Products should be designed with care, thoroughness, and concern for the intended user.
-
Good design is environmentally friendly: Pollution can arise from wasted resources throughout a product's lifespan. Design shouldn't be wasteful and should save resources where it can, both physically and digitally.
-
Good design is as little as possible: Design should always be intentional. Anything that doesn't serve a purpose for the user should be excluded. With less clutter, a design will achieve more clarity for the user.
Jakob Nielsen's Heuristics: 10 Usability Principles to Improve UI Design
-
Visibility of system status: Explore your smartphone. Right after the screen lights up, it informs you about its battery and if you have a Wi-Fi connection, any received messages, missed calls and much more. Imagine how insecure you would feel if this information were missing. The system communicates its status and assists users in making better, more informed decisions by using signs, icons and indicators.
-
Match between the system and the real world: Users may make assumptions about how a system will work based on their previous experiences with similar systems. You can help them overcome their initial discomfort by using language they are familiar with.
-
User control and freedom: Digital spaces, like physical spaces, require quick 'emergency exits'. Users frequently select system functions by accident and need a clearly marked way to leave the unwanted position without going through an extended dialogue. So, support the undo and redo functions.
-
Consistency and standards: Consistency is the key. A 'submit' button on one page should look the same across the site on any page. If you show information in a particular format on one page, it should look the same on all pages.
-
Error prevention: A careful design that prevents a problem from occurring in the first place is even better than good error messages. Remove conditions that may cause errors in your design, or look for them and give your users a confirmation option so that they can make an informed decision before tapping or selecting anything.
-
Recognition rather than recall: Allow your users to recognize information in the user interface rather than expecting them to remember or recall it. Simply put, don't make your users work any harder than necessary! Make your navigation as clear, detailed and straightforward as possible. Offer them hints, remind them when something time-sensitive needs to be done and notify them when a screen or a process has been changed.
-
Flexibility and efficiency of use: Simply put, your system must be designed so that both experienced and inexperienced users can use it. Think of designing a system where a new user can find a way to perform a task without knowing any shortcuts. However, also design your system in such a way that an experienced user can use shortcuts to complete the action quickly and efficiently.
-
Aesthetic and minimalistic design: Make a fantastic first impression! Users notice aesthetics or how visually appealing your system is in the first 50 milliseconds of landing on a page, which is ten times faster than it takes them to read it. This means that you should make sure that you establish and reinforce your system's brand identity and credibility.
-
Help users recognize, diagnose and recover from errors: A good error message should be polite, easy to understand, precise, constructive, clearly visible, and take as little time as possible to fix the problem as well as educate your users.
-
Help and documentation: Even though it is preferable that your system can be used without documentation. It is important that any such information should be: easy to find, focused on the user's task, include the actual steps they should take, and not be too large.
Ben Shneidermann's 8 Golden Rules of Interface Design
-
Strive for consistency: Consistency is critical to maintaining uniformity throughout the site, whether it's the layout, the size of the button, the color code, or the tone used when writing the page. Consistency will enable you to establish your identity and stop users from abandoning your site.
-
Enable frequent users to use shortcuts: Think about allowing your users to access all areas of your website with a few clicks. To accomplish this, you should create a good hierarchy in the menu and make things clear. Consider including features for both advanced and novice users, such as keyboard shortcuts or macro-capabilities.
-
Offer informative feedback: If your users have completed or are completing activities on your website, it is best to provide feedback as soon as possible so that they can understand where they are in the system.
-
Design dialog to yield closure: All interactions must have a beginning, middle and end. Once a task is completed, maybe give your users some peace of mind by providing them with informative feedback and well-defined choices for the next step, if applicable. Don't keep them guessing!
-
Offer simple error handling: An interface should be designed to eliminate as many errors as possible. If something goes wrong, the system should make it simple for users to understand and resolve the problem. A good idea is to display clear error notifications and descriptive hints to resolve the problem. These are examples of simple ways to deal with system errors.
-
Permit easy reversal of actions: Finding that there is an "undo" option after making a mistake is a huge relief. Your users should feel less anxious and more likely to explore options if they know there is a simple way to undo any mistakes. This rule applies to any action, sequence of steps or data entry in your system. This can range from a single button to a complete set of actions.
-
Support internal locus of control: It is essential to give your users control and freedom so that they feel in control of the system instead of the other way around. As the designer, try to avoid surprises, interruptions and anything that the users didn't request. Users should be the ones who initiate actions.
-
Reduce short-term memory load: As users, our attention span may be limited, so anything you can do to make your users' jobs easier is a win-win situation. Your users may prefer to recognize information rather than recall it. Try to keep interfaces simple and consistent and keep to patterns, standards and conventions. This may contribute to better recognition and ease of use. Depending on your users' objectives, you can add various features to help them. In an e-commerce setting, for example, a list of recently viewed or purchased items can be presented.
Summary
While heuristic-based decisions can be taken lightly, adhering to a set of rules and guidelines helps to point you in the right direction and allow you to identify significant usability issues early in the design process. These guidelines apply to most user interfaces. You can take inspiration from these examples to develop your own set of heuristics, or you can combine them to solve your own design problems.