10 Principles of well-designed web UI

by Reagan

“The simplest way to achieve simplicity is through thoughtful reduction” – John Maeda,

Well-designed interfaces, like good educators, should build a “teacher-student” relationship that guides users to learn and enjoy what they are doing. Visitors won’t just be looking at your site; they’ll be interacting with it, sometimes in ways you didn’t expect. It’s vital that you take the time to really explore UI design prior to embarking on a web UI design. Their interactions with web interface should be “success begets success.” Each positive experience with a a website allows users to explore outside their area of familiarity and encourages them to expand their knowledge of the interface.

User interfaces (UI) are what separate top-notch websites from crappy websites. The absence of a useful UI can render an extremely useful web app useless. Why? Because the UI wasn’t thought out and thoroughly tested. If a user can’t easily navigate a website, he/she will skip happily along to another similar site that provides a better user experience.

Here are 10 extremely useful principles .

1. Information Flow
Placement of information is of utmost importance in designing a website as it often establishes user’s perspective. According to Jakob Nielsen’s studies, Users don’t read, they scan picking out individual words and sentences. As a result, a web page design should encompass important keywords, significant sub-headings, and bulleted lists instead of plain text where appropriate.

2. Affordance
Buttons should look like buttons. Links should look like links. Form fields should match the data-type they manipulate.

3. Visual Hierarchy
The UI should be there, but not begging for attention. Content and forms or whatever the primary function of the page is should rise to the top of the visual hierarchy, the UI should almost blend into the background.

4. Correct vocabulary 
The words you use to describe and label the functions of buttons, links, navigation items, etc should use the user’s vocabulary, not the business or designers vocabulary. Is it ‘Sign up’, ‘Profile’ or ‘Account’?

5. User conventions
User conventions improve the relative intuitiveness of a site. Conventions include: The site logo links to the homepage, sign-in and register links in the top right. Search near main navigation, right aligned. Footer links for more site-contextual or site-informational links.

6. Usability
Usability is all about making web sites that are easy to use and work well for people. According to Krug’s first law of usability, the web-page should be obvious and self-explanatory. It’s all about making users comfortable on your website. This includes easy and clear site navigation.

7. Speed & Simplicity
Not only should your UI be as simple as possible, but it should also be designed for speed.Simplicity in web design in a skill of managing minimum information at the same time conveying clearly company’s key message. It is an ease with which one can locate for information for which a user is on that site. A careful planning and conscious thought process should be there to remove all un-necessary cluttering of information which includes elements of design and code.

8. Typography and Whitespace
Typography is one of the basic and important elements needed to create good web design. Good typography helps in maintaining visual hierarchy which helps reader to scan through the page in accordance to the level of importance of content and pictures. Its helps to convey more important messages clearly to grab user’s attention direct to the page where needed.

Whitespace is often used to create a balance and a feeling of elegance and beauty in a layout which gives some breathing space to the content on the web page. It helps user to navigate through the page with ease and clarity and focus on key terms.

9. Grid Based Approach
The concept of grid-based design is related to visual and structural balance of the layout, which helps to enhance the visual experience of users. Grid based design gives your layout a uniform spacing with well structured and consistent look.

10. Your UI should be tested
Conduct a task-based user test of your UI. Find out where users are tripping up. Find out where you can improve their experience of your UI. User goal is more important.

The actual implementation of these principles will, of course, vary according to the user interface capabilities of the system, and interface design goals. Often, business decisions influence the designer’s use of the principles and the priorities that may be assigned to them. At critical points in the interface design process you’ll be asking the question, “What happens next?” The answer should be, “Whatever users want to do!” Remember—“Know thy users, for they are not you.”