20 Key Principles of Effective Web Design (2022) | Elementor
https://elementor.com/blog/principles-of-website-design/
The 10 User Experience (UX) Laws The 10 User Experience (UX) Laws The are a collection of design principles by — senior product designer at General Motors — from his book “Laws of UX: Using Psychology to Design Better Products & Services”. These are solid guidelines that every designer should consider. Here are some of the most important principles Yablonski lists: 1. Make the Main Actionable Targets Easy to Reach (Fitts’ Law) originates from the psychologist Paul Fitts’ work while examining the human motor system. This law states that the distance and size of a target element directly impact the amount of time it takes for a user to navigate to and interact with it. This means you’ll want to make your main actionable targets easy to reach.Additionally, if you have multiple targets, there should be enough space between them. For example, when designing for mobile, clickable icons need to be large enough to tap: The extra spacing between buttons will ensure that users don’t click on the wrong icon accidentally. As a rule, the minimum clickable area for mobile designs should be 40 x 40 pixels. 2. Keep Users’ Choices to a Minimum (Hick’s Law) If you’ve ever been so overwhelmed by the number of choices before you that you had trouble deciding between them, you’ll understand how too many options can be paralyzing for users. This is Hick’s law in a nutshell. The more choices available, and the more complex each of them is, the more time it’ll take for users to arrive at a decision., also the Hick-Hyman law, is named after William Edmund Hick and Ray Hyman, two psychologists who examined the correlation between the number of stimuli presented to an individual and their reaction time.This principle effectively means you want to remove clutter and show your users only the most essential options they need. For example, most websites will give a clear choice between “Save” or “Cancel” and “Yes” or “No” when confirming some action: Likewise, this law can also be applied to streamlining your navigation menu, displaying products or services, and other website design elements. 3. Place Related Elements in Common Areas (Law of Common Region) The , one of several laws from the school of Gestalt psychology, simply states that if elements on a page are grouped together closely, they are perceived as connected to one another. You can accomplish this with borders, backgrounds, or spacing. For example, navigation links are generally placed together to form a menu: This principle is all about composition and spacing, and you’ll want to use it wisely. As another example, on the homepage of a blog where previews are displayed chronologically, the title, description, and image of each post should be visually grouped together. 4. Use Familiar Scenarios and Logic (Jakob’s Law) , coined by Jakob Nielsen, a co-founder of the Nielsen Norman Group, advocates the use of familiar scenarios and logic in UI development. Your users will generally expect — and prefer — that your site works the same way as others they’re already familiar with. We each build up mental models around conventions surrounding websites. This enables your users to focus on what they want to achieve rather than learning their way around an unfamiliar UI.This means you’ll want to stick with what they already know and not overwhelm them with unfamiliar scenarios. A “burger” icon, for example, will usually open some kind of menu: If you use this icon in your design, it should behave the way your users will expect it to. 5. Use Simple Structures and Avoid Complex Shapes (Law of Prägnanz) In 1910, Max Wertheimer, a psychologist, observed a series of lights flashing on and off at a railroad crossing. Although it appeared as though a single light moved around the marquee between bulbs, it was really a series of bulbs switching on and off.This observation formed the basis for a set of principles regarding how we visually perceive objects. One of them is the , which recommends using simple structures and avoiding complex shapes.Your users will interpret your design using the least cognitive effort possible. Complex images will be perceived in their simplest forms. Reducing cognitive overload should be an important part of your design goals.You can apply this principle by grouping and aligning elements into relevant blocks, columns, and sections, instead of throwing them all over the page: Simple structures and elements will make for easier interpretation. 6. Place Grouped Elements Close to Each Other (Law of Proximity) The , another principle attributed to Gestalt psychology, states that elements that are near each other will be perceived as a group. This also reduces cognitive overload for your users as they will more easily make sense of information.Applying this principle is all about making wise use of spacing. The elements that make up a group should be closer together than those of different groups.In many website headers, menu links are grouped together while Calls-to-Action (CTAs) are aligned to a side or somehow divided from the navigational elements: This is a perfect illustration of the law of proximity. Since menu links and CTAs serve different functions, they’re visually separated. 7. Use Similarity to Unite Elements into Groups (Law of Similarity) Another Gestalt law, the , states that similar objects will be perceived as related regardless of how much separation exists between them. This is the basis behind styling feature sets with similar , icons, and text: You’ll want to use this principle wisely to unite connected content into groups through similar and consistent styling. 8. Connect Design Elements to Show their Relation to Each Other (Law of Uniform Connectedness) The , also from Gestalt psychology, states that elements which are connected visually will be seen as being more related than elements not at all connected. One application of this law is using a progress stepper in your onboarding or checkout flows: This creates a visual connection that shows all the steps are parts of the same process. 9. Divide Content into Small Chunks (Miller’s Law) is named after cognitive psychologist George Miller, who asserted that an average person could keep just five to nine pieces of information in their working memory. This principle suggests separating content into chunks. For example, credit card numbers are usually broken into groups of four to help people parse them.This law underscores the importance of proper design planning. As an application gets larger and acquires more features, it becomes harder to use. You should plan your interface with this in mind so that it can accommodate new features while remaining easy to operate.Another way to apply this rule is by limiting the amount of content your user has to perceive at any given time. Divide content into chunks instead of showing it all in one block: Additionally, design with the most popular screen sizes in mind and control how many elements users see at a glance.Be critical about your design. If you think there’s too much content in a section, move it to another one and separate items logically. 10. Accent the First and Last Items in a Series (Serial Position Effect) was coined by German psychologist Herman Ebbinghaus, who pioneered experimental methods for measuring memory. It states that users will remember the first and last items in a series best. You can use this tendency to highlight the most important areas of your webpages. For example, key content such as CTAs, forms, or purchasing options are most effective at the top or bottom of the page.1. Stay Familiar With Best Practices 1. Stay Familiar With Best Practices You’ll want to keep learning and educating yourself on UX design best practices. Learn from existing solutions related to the web. Start your projects with a research or inspiration phase where you learn more about your users’ needs and collect quality references to learn from.2. Choose Which Principles You Use Wisely 2. Choose Which Principles You Use Wisely As every project is an individual case and will benefit from different design principles. You’ll need to prioritize which ones can help you the most for each website you create. Keep in mind the main functionality of the site, its primary user flows, and its corresponding business goals.3. Regularly Test and Improve Your Designs 3. Regularly Test and Improve Your Designs You’ll need to test your website as much as possible with real target users. If you are unable to do so, you can solicit help from and test with co-workers, clients, and even your co-designers to gather relevant input about your website’s usability.At this stage, you’re not looking for perfection. Nothing is perfect from the start, so don’t be afraid to polish and improve your design according to feedback from usage data.4. Practice 4. Practice As you practice them, you’ll begin to apply design principles almost subconsciously. The more you design with usability principles in mind, the easier it will become for you to quickly generate effective solutions and avoid issues.5. Form Your Unique Style — But Only After You Understand the Basics 5. Form Your Unique Style — But Only After You Understand the Basics Rules are designed to make processes easier but aren’t meant to be followed blindly. However, you’ll often only be able to break rules successfully when you fully understand their purpose.These design principles form a core toolkit and foundational knowledge for you to experiment with and develop your own unique style. Once you’ve mastered them, you can produce extraordinarily successful design solutions by breaking them purposefully.6. Use the Elementor Editor 6. Use the Elementor Editor Our is founded on design principles and logic. By using our and , you can organize your website’s content structure better and ensure you’re building a user-friendly digital product.For example, Elementor’s sections and columns help you group content logically. Widgets provide an easy way to chunk content, employing the principles of similarity and visual connections to ease your users’ perception.Overall, Elementor removes the hassle of organizing content from scratch. With our widgets and Templates Library, you have numerous solutions for implementing design principles in the best possible way. Wrapping Up To , you need to be familiar with staple design principles and implement them wisely in your work. This will help you improve your designs by making them more appealing, easier to use, and best of all, more profitable.We covered a lot of ground in this post, including compiled by Jon Yablonski, and developed by Jakob Nielsen. Additionally, we shared several ways you can implement these best practices in your work, including using our .Do you have any questions about applying design principles in your work? Let us know in the comments section below! Share Share on facebook Share on twitter Share on linkedin Share on whatsapp Share on email Looking for fresh content? Get articles and insights from our weekly newsletter. Email Address Subscribe By entering your email, you agree to our and . Alina Khazanova Alina is a Product Designer at Elementor. Her passion is to bring valuable and satisfying Product Experience to the users. She enjoys drawing & painting, reading books and going to art museums in her free time.NFT 101: A Beginner’s Guide for Web Creators Ben Salomon May 3, 2022
Reviews: 51
DA: 47 PA: 15 MOZ Rank: 74
