12 User Interface Design Principles

User interface design is a field of study in its own right, and a full treatment of the topic is beyond the scope of this book. We’re focusing here on programming rather than graphic design and layout. But it is still worth noting how the HTML and CSS techniques we have looked at so far can be used to support best practices in user interface design.

Consistency

Users will be able to navigate and more quickly find information or complete tasks on a web site if its layout follows the principle of consistency. The first time a user arrives on a page or looks at a content element on a page, they might have to do some searching and reasoning to figure out its layout, or find the information and functionality they want. When they come to the next page or content element within the same site, it will help a lot if the new item looks and behaves just like the other item did. Don’t make them learn a new layout every time!

For a multi-page site, this means that headers, footers, navigation sections, color schemes, fonts, and other layout choices should be replicated on each page. CSS supports this kind of between-page consistency by allowing designers to create external stylesheets that contain the default set of styles, and include these stylesheets in every page via the link element.

Within a site, content sections should look and feel the same. For example, a desktop layout might contain a grid of elements, each with its own with headers, graphics, and links. The style and layout of each such element should also be consistent. This is supported through the use of the HTML class attribute and the CSS .class selector, allowing multiple elements with the same class to share a common style.

There are also many web development frameworks that support consistency. For example, BootStrap contains pre-defined CSS classes that make it easy to develop a consistent interface, SASS allows you to define CSS variables that can help keep your interface consistent as you modify your design, and REACT allows JavaScript developers to define custom HTML elements that can easily be re-used.

Ease of Navigation

Related to consistency, it’s important that users be able to easily navigate your web app. Links and navigation sections should be placed in consistent locations. Where possible, single-click shortcuts should help users get where they are going quickly. Consider placing links to the home or dashboard page prominently on every page of the app, and make sure that pages the users will use most often have “short cut” links that are also prominently placed.

Effective use of the CSS Box Model and display properties allows you to create large, easily-tappable links that will work well for everyone, whether navigating with a mouse, a track pad, or their fingers.

Universal Usability

Web apps are public interfaces and should be usable by everyone, regardless of the technology they are using to access the site. CSS Media Queries enable the creation of responsive web apps that will work well on any device.

HTML also contains a number features that are designed to work well with screen readers for the visually impaired. For example, the alt attribute for img elements can be used to specify a text description of an image. And in addition to div elements, HTML also allows the use of semantic elements with more descriptive names such as header, footer, article, and so on. These elements work just like div elements, but because they have meaningful, or “semantic” names, they can be processed and presented more effectively by screen readers. For a rundown of HTML accessibility features, see this W3 Schools page.

The BootStrap framework is one of many that makes it easy to develop a universally-accessible interface. The classes and JavaScript functions that come with Bootstrap make responsive design easy, and Bootstrap’s many templates and example layouts make full use of HTML’s semantic elements.

Error Prevention

It’s important that the user not be exposed to unnecessary error messages. You can use validators such as the W3C Markup Validationand CSS Validation services to make sure that you’re using HTML and CSS correctly. But the HTML and CSS standards also include specifications about how the browser should behave when the code contains errors. Browsers will do the best they can to display a page that contains syntax errors, and will hide many error messages from users in the developer console.

Error prevention in user interface design is also about constraining a user to prevent them from making mistakes or causing errors through their actions. At the moment, your users are already quite constrained by the limited options in the links you provide for them to use, but we will be exploring other user constraints more as we allow the user to do more with our apps in Part 3: Programming on the Client Side.