Thumb rule for Designing UX
Tags: ux, beginners, webdev, design
Published: 2020-09-16 14:43:46

##### THE UX BASICS

## Thumb rule for Designing UX

#### A **heuristic** evaluation is a usability inspection method for computer software that helps to identify usability problems in the user interface (UI) **design**.


Have you ever wondered how we get hooked to certain websites and spend hours without realising? Or, how it becomes so easy to navigate between some websites while with others it’s simply annoying even to identify the provided action items. So what makes these websites or products stand out? The answer to all these questions is a better User Experience Design. So grab a cup of coffee and let’s know, how, when and where we can use UX to make our products stand out by focusing on the User as the primary source of inspiration.

## Design Heuristics (Rule of Thumb)

A **heuristic** evaluation is a usability inspection method for computer software that helps to identify usability problems in the user interface (UI) **design**. It specifically involves evaluators examining the interface and judging its compliance with recognized usability principles (the “**heuristics**”).

Before starting the designing process we need to follow a few rules to achieve a perfect system.

## Must have knowledge:

* How people perceive information

* How do they remember it

* How they decide to act on it

## **Guidelines for Design?**

* [usability.gov/index.html](http://usability.gov/index.html)

* [https://material.io/design/usability/accessibility.html#understanding-accessibility](https://material.io/design/usability/accessibility.html#understanding-accessibility)

## **Drawbacks of having guidelines:**

* It might be a little overwhelming

* The designs will be Platform dependent

### **Solution:**

* Make the rules specific to each scenario.

* Make use of widely accepted guideline.

## Jakob Nielsen’s 10 Heuristics

![](https://cdn-images-1.medium.com/max/2460/0*aWqjiJ_NvHZ5cKL5)

Know more about each rule [here](https://www.nngroup.com/articles/ten-usability-heuristics/).

### Features of Jakob Nielsen’s 10 Heuristics:

* Small, complete and usable set to follow.

* Time Saver

* Well supported by theories of perception and cognition

## **Visibility of System Status**

***(Bridges gulfs and support feedback and signifiers)***

### Solves

 1. Feedback for action by the user

 2. Shows all the available actions and constraints

 3. General status of an action/ reaction (buffer or loading gif)

## How users react to delay

* Less than 100 milliseconds of delay is instantaneous

* Up to 1-sec delay is noticeable but tolerable

* Up to 10-sec delay is annoying but willing to wait

* More than 10 sec will turn into lose of focus

### Solution

* Strive for avoiding delay

* Do stuff in the background

* Give status indicator

## **Match system to the real world:**

 1. Follow layman language(not technical terms) to connect to the user

 2. Uses user’s schema

 3. Maintain consistency of design

 4. **Using the same flow as real-world action flow:** Like while writing down something in a paper or doc

### Solution

* Use of Metaphor (Icons)

* Match the real-world actions of users

## User Control and freedom:

 1. Freedom to do mistakes and redo or undo

 2. **Support 7 stages of action:** For example, saving data while going back

 3. Emergencies exist

## **Consistency and Standards**

* Be consistent with design (even with competitors)

* Consistent with language, Layout and Behavior

## **Error Prevention**

Help recognize, find the cause, diagnose and recover from errors

* Prevent potential error

* **Provide constraint:** Make it specific

* **Provide Feedback:** Feedback in the process of action

* Ask people to confirm the action

* Prevent actions that are likely to fail

### **Error Recovery:**

* Give feedback

* Speak the user’s language

* Allow user to undo mistakes

* Prevent and detect eros obviously

* Give options for more relevant information

## **Recognition rather than recall wherever possible**

* Easily retrievable information

* Make something recognisable with **Match system to the real world**

## **Where do recalls come up?**

* Terminal Commands

* Passwords

* Speech UIs etc.

### The solution to recall fails

* Suggestion

* Re-setup

* Backup information on the data (hint question)

## **Error Prevention**

* Prevent potential error

## **Flexibility and Efficiency of Use**

* Flexibility for both beginner and advanced user

* Shortcut and bookmark

* Personalize

## **Minimal Design**

* No extra information

* Good use of colour, shape, motion

* Reduce clutter

* Gestalt principles for non-linear principles

## **Help and Documentation**

### Documentation is important

 1. Easy to search for help

 2. Contains a list of action

 3. Best Practices

 4. Self Explanatory

### Generic help vs conceptual( help for a particular action) help

 1. Searchable help

 2. Task focused output on search

 3. Concrete search result

So that’s it for this article. I hope you all liked it and if you liked it then do not forget to tell us your thoughts in the comment section below.
>  *If you want to connect with me, here I am at [Twitter](https://twitter.com/anishaswain) or [Instagram](https://www.instagram.com/anisha_swain_/)*

Follow our community [LinkedIn group](https://www.linkedin.com/groups/13894715/), [Facebook](https://www.facebook.com/iamtheuigirl) Page and [Twitter](https://twitter.com/the_ui_girl) for more such articles and posts and meet like-minded people to collaborate.