Web UI Dos and Don’ts

Do's and Don'ts

1. A One Column Layout instead of multi-columns

  • A one-column layout gives you more control over your narrative. It guides your readers in a more predictable way from top to bottom.
  • On the contrary, a multi-column approach runs the risk of being distracting. It does not guide the users well.

One Column Layout

2. Merging Similar Functions instead of fragmenting the UI

  • It is quite common that designers unintentionally create multiple sections, elements, and features that perform all the same functions.
  • It becomes important to keep an eye out for duplicate functionality labeled in various ways, as it puts a strain on customers.

Merging Similar Functions

3. Repeating Primary Action instead of showing it just once

  • Repeating the call to action is a strategy that is more applicable to longer pages, or repeating across numerous pages.
  • Long pages have become the norm and the idea of squeezing everything “above the fold” is fading. It doesn’t hurt to have one soft actionable item at the top, and another prominent one at the bottom.

Repeating Primary Action

4. Distinct Clickable/Selected Styles instead of blurring them

  • Visual styling such as color, depth, and contrast may be used as a reliable cue to help people understand the fundamental language of navigating the interface.
  • In order to communicate this clearly to users, the styles of clickable actions (links, buttons), selected elements (chosen items), and plain text should be clearly distinct from one another.

Distinct Clickable Selected Styles

5. Undos instead of prompting for confirmation

  • Undos respect the initial human intent by allowing the action to happen smoothly first and foremost.
  • Prompts on the other hand suggest to the user that he or she does not know what they are doing by questioning their intent at all times.

Undos

6. More Contrast instead of similarity…

To continue reading click Download.

download pdf button

 

, , , , , ,
Previous Post
Top 9 Mobile UI Dos & Don’ts
Next Post
Understanding UI and UX
Menu