The Great, The Mediocre and The Poor of Web UI Design Principles
Everyone landed on websites that made a repulsive impression and everyone landed on websites that did not make any impression at all. But, many of us have been and frequently are landed on websites that creates an irreplaceable place in our memory. These three types of websites represent the great, the mediocre and the poor of web UI design principles. While the poor web UI tells you what are the shortcomings and design elements you should beware of, mediocre UIs tells you about the bare minimum necessities to find a moderate success and traffic. Finally, the great web UI principles are the ultimate guidelines to follow if you want your website to deliver and stay above the crowd.
The Essence of Great Web UI
Websites are primarily for human beings and so to speak, to communicate with people in a meaningful way. To be more precise your website is supposed to serve a purpose or offer a solution. Now the question is, how better and in an organized way your website serves a purpose or offers a solution to the visiting traffic. Any great UI never gets confused with the basic objective that is to say communicating a message or serving a purpose.
The Key Design Principles of Great Web UI
Why so much fuss about the use of white space in website designs? Because, it let the users eye breathe while seeing and using the web page to access information. The white space around the piece of text helps to make better readability and increased attention from the user.
- Make sure that any web page does not contain too much information creating visual clutter.
- Make sure that the content takes the center stage with enough white space around.
- Break the content into parts so that surrounding space can optimize viewing.
Use of white space can be augmented with appropriate layout. Website layout ultimately assures better readability and accessibility of web content. Layout is also the area that offers scopes for variety of experiments. The so called layout formula of using grid can be further enriched with useful and visually captivating experimental layouts. This is a tricky area where a bit of behavioral science and a bit of artistic perception is involved.
- Layout depends on the type of content to be displayed. A layout for displaying text content will be different from layout for a mixed content with images and text. A layout for audiovisual web content will be different than the previously mentioned ones.
- Your layout must address the varying device screen sizes and resolution.
- A layout must address the preferred position of the displayed content in a responsive manner to fit appropriately and proportionally on a variety of device screens.
- Grid layout requires less art and more science. Through grid layout you achieve fairly optimum visibility as far as the science of better viewing is concerned. But this layout offers less scope for creating something extra ordinary to stand apart from the crowd.
- Organic layout is involves creative spurt to give a website some splendid attributes displaying content. But, while it offers huge freedom you always have the risk of experimenting with a visual layout that will prove futile.
- Using a basic grid layout with a mix of organic elements is a safer approach that couples benefits from both types of layout.
The Design Flow
The website layout will work hand in hand with an appropriate design flow. The flow will determine as you want the layouts to appear on the screen in a sequence. You have some really effective choices.
- Scrolling to develop a story is great for describing a brand or product.
- Parallax scrolling is another great choice that can quickly orient the user with the site.
- Continuous scrolling is also great if you have a really content rich website.
- Visual slides to represent separate sections or storylines make another great design flow embraced by many websites.
- Finally, it is your layout choice that will guide your site flow.
Useful Navigation Menu
Though at late but we have finally arrived on the golden principle of any great web UI – useful navigation menu. There have too many styles of menu experimented with. Bad menu design makes accessibility suffer. Consider every pros and cons before deciding on the type of menu for your web UI.
- The dropdown or hovering menu which makes quite challenging to click for many people is not advised at all. They are specially challenging to click through when accessed on mobile devices.
- A good proposition is a main heading menu with links to respective pages. With this menu the user first clicks on the general menu and then goes to the sub menu and then clicks on the target page link.
Making Colors Work
Color in the modern web design is not only an aesthetic choice pertaining to so called look. Color is actually a useful element of design that effectively optimizes an array of design attributes and makes the site more useful.
- Wise use of color makes better readability of content.
- Using color hierarchy you can prioritize ‘Call to Action’
- With color you can create a sense of difference in importance among variety of contents.
- Color is suggestive of the mood of a web page and purpose of the content.
- Finally, color is essential element to create your brand statement in the website.
Cross Browser and Cross Device Support
Ultimately, a web UI design must be supported by a variety of web browsers across devices. The variety of browser and device combination and the typical redundancy they show in respect of some design elements should be addressed with utmost priority. Most common browser platform combinations like Safari-IOS, Android-Chrome, Windows-IE, Android-Firefox and Windows-Firefox should display your web UI without compromising a single design element.
Displaying Error Messages
Most websites appear terrible ignorant on the importance of displaying error messages in an engaging way. Often hitting on a badly designed error message the visitor decides to leave. There are too many ways to lose potential leads and customers and bad error message is certainly one of them. How to create good error message that says you take care of the difficulty experienced by the visitor? Here are some tips.
- Error message can include visually captivating graphic design to make the point.
- Always provide hints as what can possibly go wrong.
- Error messages either visually or with engaging text should request a comeback try.
Web UI design principles as discussed above must have made the elements clear that make some websites stand above the crowd. Obviously, with these principles the creative spurt, design analysis and objective focus on each element are equally important for a great web UI that delivers business.
Keval Padia is a Founder & CEO of Nimblechapps, a fast-growing website design and mobile game development company. The current innovation and updates of the field lures him to express his views and thoughts on certain topics.