User interface design
Check some UI design fundamentals to create consistent and predictable interfaces and access a web interface handbook
On this page:
1. General best practices
First, know your users, their goals, skills, or preferences. Then, consider the following best practices when designing your web interfaces.
Simplicity
Keep the interface simple and avoid unnecessary elements.
- Use elements that are clear in the language your audience use on labels and in messaging
The simpler you make your designs, the faster and easier it is for users to make the decisions you want them to make.
- Landing pages and promotional or informational emails should only have one call-to-action (CTA)
Consistency
Create consistency and use common UI elements. Your users will feel more comfortable and will be able to get things done easier.
Patterns
Create patterns in language, layout, and design throughout the site to help facilitate efficiency. Once a user learns how to do something, they should be able to transfer that skill to other parts of the site.
Colours
Use colour and texture strategically. You can direct attention toward or redirect attention away from items using colour, light, contrast, and texture to your advantage.
Contrast
When visual design elements appear clearly different (for example, have contrasting colours, users can easily deduce that the contrasting item is different or special in some way. As a result, if the item is different, this enhances usability.
Typography
Use typography to create hierarchy and clarity. Carefully consider how you use typeface. Use different sizes, fonts, and arrangement of the text to help increase scannability, legibility and readability.
Feedback
Always inform your users of location, actions, changes in state, or errors. The use of various UI elements to communicate status and next steps can reduce frustration for your users.
Language
Speak the language of your users. All interfaces require some level of copywriting. Keep things conversational, not sensational.
2. Set expectations for interactive elements
Many interactions with a site or app have consequences: clicking a button could mean erasing a website or making a disparaging comment. Any time there are consequences, there is also anxiety.
Make sure that you let your users know what will happen after they click that button before they do it. You can do this through design and/or copy.
Setting expectations with design
To make let your users know what happens next using design elements:
- Highlight the button that corresponds to the desired action
- Use a widely understood symbol (such as a trash can for a delete button, a plus sign to add something, or a magnifying glass for search) in combination with copy
- Pick a colour with a relevant meaning (green for a “go” button, red for “stop”)
Setting expectations with copy
To make let your users know what happens next using copy:
- Write clear button copy
- Provide directional/encouraging copy in empty states
- Deliver warnings and asking for confirmation
For actions with irreversible consequences, like permanently deleting something, it makes sense to ask people if they’re sure.
3. Placement and size of interactive elements
Fitts’ Law, a fundamental principle of human-computer interaction (HCI), indicates that the closer and/or bigger something is, the faster you can put your cursor (or finger) on it. This has some important implications:
-
Make buttons and other “click targets” (like icons and text links) big enough to easily see and click. This is important with typography, menus, and other link lists, as an insufficient space will leave people clicking the wrong links again and again.
-
Make the buttons for the most common actions larger and more prominent.
-
Place navigation (and other common interactive visual elements, like search bars) on the edges or corners of the screen. It works because your users do not need to worry about overshooting their click target.
While you are thinking about element placing and size, always keep your interaction model in mind.
4. Web interface Handbook
The “Web interface Handbook” is an online resource about the fundamentals of creating a good web interface. You will find out design tips on how to create effective forms or work with typography, grids, and many other components of web design.
Handbook sections
To access specific sections of the handbook, the following is a list of website components.
⚠️ The sections link to a PDF which is available for OCASI Basecamp users only.
