I recently had the wonderful opportunity to assist a startup based in Kyoto, Japan. The task at hand required me to design a user interface from scratch. Over the years, the basic rules that I follow have not only only helped me create minimally beautiful layouts but have also made user interaction more fluid and easy. In this article I shall let you in on some of the insights I’ve gathered over the years.
Rule One: Accessibility Is Everything
Make everything your user needs readily accessible. It can be anything from “character skins” on a gaming website, “fonts list” on a content publishing website or a simple spreadsheet of data on an informatics website. If the user can’t find what they need, they tend to bounce off the website/software rather quickly. Provide clearly marked tabs and label all the tools/services the user might need. By including this in module your website/software becomes far more accessible and less frustrating.
Rule Two: Consistency
Don’t have the Menu on top of one page and on the bottom on the other page. Don’t re-arrange Menu items every time the webpage loads. Make sure your user at all times knows what’s where on the website. Consistency also includes that fonts and designs remain the same from page to page. Additionally you should also make sure that your UI is proper is for your platform. Desktop sites have different layouts/needs than mobile sites, for menus, galleries or product checkouts.
Rule Three: Achieve Clarity
Clarity means that you want your users to know what to do at all times. Don’t confuse your users about the purpose of any site and or page. Only way to achieve clarity is to move from one step to another on different pages. For instance, instead of having a checkout process scroll down the page have your users navigate to (a shopping cart>) page to (a checkout page| ) etc. Just like amazon.com, the users would know where they stand in the process eliminating any confusion or uncertainties.
Rule Four: Feedback
The last thing that users want is to not understand what is going on. If the users press a button provide an indication that the button was pressed. “Loading” icons tend to provide feedback without having to say it. If you allow users to upload files, give an indication of time remaining. Providing a pop or modal that tells the user that their action was a “success” reduces frustration and confusion.
Rule Five: Recognition over Recall
You want the users to recognise everything on your website when they see it, they shouldn’t have to think and recall the information as they move over to other webpages. Streamline your interface so that every part on the page is intuitive and moves point A to B fluidly. This can be used by recognisable icons and well placed messaging on the website indicating the users of the exact functionality of everything.
Rule Six: Elemental Hierarchy
Elemental Hierarchy matters. Make sure that the most important functions are at the top of the respective pages. This kind of structure or hierarchy can lead the user down the page organically. Making use of white-space is also essential, as clutter can stall user progress and draw the eye away from the purpose of the page. Clean lines, lots of space and well defined elements can visually indicate your user how to navigate through your UI without any documentation or annotation.
Rule 7: Free & In-Control
Keep your users free and in-control. While designing your UI the last thing you want the user to feel is confined or restricted by your design. This usually revolves in two parts. Context and Permission. First, whatever action the user needs to take should be located near on what they want to act on. If the user wants to edit the post, “edit” button should be near “save”, “publish” and “preview” buttons. Additionally your UI at all times should make the user feel that they can get out of or revert any action they take. Doing this can be as simple as adding a “cancel” or “undo” feature on your pages so that the user also feels that experimentation is alright too.
I hope these rules help you create stunning pages for your project. If you’ve come across some insights of your own please share them in the comment sections below. Happy Designing!