“Don’t make users think”, This is the key to successful web design. It should feel familiar when a user browses through the website for the first time. A web-page should be obvious and self-explanatory. The user should be able to find the information they are looking for without any trouble. To build this kind of user experiences, designers need to follow some web design conventions. It leads to a great usability. While the innovative design is great, sometimes it affects the user experience and usability. So you should try to avoid that kind of designs.
Also Read: How to plan before starting design
Here are the 7 web design conventions you should never break when designing a website:
1. Simplicity
“KISS (Keep it simple, stupid)” is a design principle we need to follow. The KISS principle states that most systems work best if they are kept simpler rather than made complicated. Don’t make a design that frustrates people. When adding each element for your site, think twice. If that design is not going to help users in any way, that should not be there.
2. Visual Hierarchy
A visual hierarchy makes information easier to understand and it also makes easier for the visitors to find what they’re looking for.
Size: The larger the element, the more attention it will attract, compared to smaller elements.
Color: Bright colors are more likely to draw attention than dull shades.
Contrast: Every single element of a design such as a line, shape, color, texture, size, space, type, and so on can be manipulated to create contrast. Designs with strong contrast attract viewer’s interest. Weak contrast is not only boring, but it can be confusing. A great contrast also helps users with visual disabilities.
Alignment: It says how and where elements are placed on the page which creates order within the design and guides the viewer’s eye around the page.
Repetition: Repeating a single element many times in a design.Using a repeated logo and keeping the headings, fonts, colors, sizes, and styles the same across all pages gives your visitors a sense of site recognition and uniformity.
Proximity: Similar or related elements should be grouped together, while those that are unrelated or dissimilar should be separated. This will enable a web page to appear organized and simple to navigate.
3. Conventionality
They’re visual shortcuts, capable of conveying complex meanings with the simple visual information. They might be colors, shapes, layouts, icons, placement – any pattern that is quickly identifiable. They are the design elements that have become so well-established in our minds.
Logo Placement: The best place for the website logo is in the top-left corner of your site because this is the first place people will look as we tend to read from left to right. However, if your website targets people who are used to read from right to left (eg: Arabic Countries), it’s better to keep your logo in the top-right corner.
Links: Links should be differentiated using a different color than your body copy. Usually underlined and in blue color, but it has become common practice to match the color to the branding of a website.
Navigation: The main navigation usually placed next to the logo on the top of the web page. If you have many uncommon pages on your website, it is recommended to keep that links in the footer.
Search: If you are designing a large website with a lot of pages, You should include a Search functionality. The best placement for search form is on the top-right side of a website.
Breadcrumbs: For larger websites with a lot of subpages and categories (eg: an e-commerce website) breadcrumbs will help users to identify where they are.
Icons: Using Icons along with main action text will help users to identify the action easier as we look for shapes rather than text. However adding an unrelated icon will confuse users, rather than helping.
4. Consistency
The website design has to be consistent throughout the pages. A consistent website is familiar to users and therefore easily navigable.
- Create different layouts for specific types of pages for visitors to understand what type of information each page gives.
- Keep the same typography and same background and link colors throughout the pages.
- Same vertical and horizontal spacing between elements in the layout.
- Show the logo, search bar, navigation menus in the same place.
- Keep the website icons of the same family or have the same style.
- Keep buttons and menus looking similar both in terms of the order, color and size.
5. Accessibility
It’s about making web pages viewable by people that use assistive devices to browse the web including the deaf and blind.
Alternative Text for Images: Images should include equivalent alternative text (Alt text)in the markup/code. This will assist blind people to visualize image using a screen reader that reads aloud the information on a page. This also helps people who turned off images on their mobile phone to lower bandwidth charges.
Keyboard Input: An accessible website provides all functionality via a keyboard for people who cannot use a mouse. Also, people with disabilities can use assistive technologies that mimic the keyboard, such as speech input.
Read more on Accessibility Standards
6. Credibility
Design elements and strategies that visitors are already familiar with – can help give your site more credibility. Don’t make visitors hunt around for information to find out what they are looking for. One of the best ways to improve your site’s credibility is to be clear and honest about the product/service you’re selling on the site.
7. User-Centricity
It is a user interface design process that focuses on usability goals, user characteristics, environment, tasks, and workflow in the design of an interface. Development proceeds with the user as the center of focus. This includes how convenient the product is in terms of its usage, manageability, effectiveness and how well the product is mapped to the user requirements.
Specify the context of use: Identity who the primary users of the product, why they will use the product, what are their requirements and under what environment they will use it.
Specify requirements: Once the context is specified, identify the requirements of the product and set important goals to make the product successful.
Create Design solutions and development: This part of the process may be done in stages, building from a rough concept to a complete design.
Evaluate designs: Evaluation – ideally through usability testing with actual users – is as integral as quality testing is to good software development. The real key to improving the design of your site is to conduct user testing, gather feedback, and make changes based on what you’ve learned.
Conclusion
Understanding and accepting web design conventions are essential while designing. Breaking the conventions can affect the usability. You can’t expect your users to waste their time learning whatever new design patterns you are presented with. Good design is understandable, and a product that uses design conventions will be more approachable than one that doesn’t. Familiarity and clarity make a product easy to use. Thus Breaking Conventions usually results in a disrupted and frustrating user experience. “Conventions are slow to be adopted and, once adopted, slow to go away.” However, breaking conventions is not an effective way to be innovative, unless you really know what you’re doing. Keep your users happy and they’ll keep coming back.
