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

• 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

Know more about each rule here.

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 or Instagram

Follow our community LinkedIn group, Facebook Page and Twitter for more such articles and posts and meet like-minded people to collaborate.