DEV Community

Cover image for Design Principles To Achieve a Better UI/UX Design
Ayesha Sahar
Ayesha Sahar

Posted on • Edited on • Originally published at ayeshasahar.hashnode.dev

Design Principles To Achieve a Better UI/UX Design

Table of Contents

Introduction

  1. Place Users In Control
  2. Make your User comfortable
  3. Reduce cognitive load
  4. Make User Interface Consistent

Introduction

The main aim of any business is to increase its sales in order to increase its overall growth. Here, UX/UI Design plays a fundamental role in achieving this goal. UI/UX Design of your product (website, application, etc) improves the user experience and customer satisfaction. This ultimately helps increase the number of users of the specific product!

So, here are 4 Gold Principles you can implement to achieve a better UI/UX DesignπŸ˜‰


1. Place Users In Control

πŸ‘‰ Good UI/UX design help to instill a sense of "control" in their users.

πŸ‘‰ You can do so in the following ways:

πŸ”· Make actions Reversible

  • This means that you should always include a Redo/Undo option

πŸ”· Interface should be easy to navigate

  • Provide visual cues and add "predictability"

πŸ”· Feedback

  • Users should be able to give feedback and you should act on it!

πŸ”· Status

  • When your app is doing something, show the status of that action to the user.

2. Make your User comfortable

πŸ‘‰ You can do this in the following ways:

πŸ”· Simplification and Elimination

  • Just eliminate anything that is not helping your users to simplify the flow!

πŸ”· Never ask for already entered data again until or unless e.g you want authentication.

πŸ”· Use universal language and universal elements that every user can understand.

πŸ”· Make sure that you use things such as colors, fonts, font sizes, etc to make your design "accessible".

πŸ”· Add well-crafted error messages so the user understands what they did wrong.


3. Reduce cognitive load

πŸ‘‰ It is the amount of mental processing required to perform any task or use any product.

πŸ‘‰ Here's how you can reduce it:

πŸ”· Add info in chunks so that it is easy to process.

πŸ”· No of actions to perform a task should be as few as possible.

πŸ”· Induce visual clarity by organizing the information in a way that is easy to understand.


4. Make User Interface Consistent

πŸ‘‰ Consistency is the key while doing anything! It is also of extreme importance in UI/UX Design.

πŸ‘‰ Here's how you can do it:

πŸ”· There should be a specific color scheme for your product.

πŸ”· Add functional consistency

  • Any object should work similarly throughout the product.

  • Similar functional behavior keeps the users happy!

πŸ”· Don't reinvent terminologies.

  • Use the ones that are already familiar and within the expectations of the user.

Let's connect!

✨ Twitter

✨ Github

Top comments (13)

Collapse
 
curiousdev profile image
CuriousDev

I think maybe the feedback part is not necessarily needed, if you do not plan to continue development (for a long time).
Also I would try to help the user to understand what the application actually is doing, e.g. if calculations are happening, which depend on data records or settings, it can be useful to see how this is happening in order to find any wrong setups (because user could think the App has a bug).

Collapse
 
iayeshasahar profile image
Ayesha Sahar

Ah yes, you"re right!

But in most cases, such as digital products, the products are always being improved on basis of feedback, hence I included this point :)

Collapse
 
lexlohr profile image
Alex Lohr • Edited

#4 should be #1 IMO. Without consistency, even the best design fails. Controls should always have the same logical order (cancel, options, actions) and work in the way they are expected to. A clever design that works in an unexpected way is worse than a plain design that works as expected.

Collapse
 
iayeshasahar profile image
Ayesha Sahar

I didn't number them on the basis of their importance. It was random bcoz I believe that only a combo of various things will help in creating a great design!

Collapse
 
marissab profile image
Marissa B

Great list! The consistency bit can be applied to certain parts of applications in general, too. Like for example, you (as a user) shouldn't really have to think about how a dropdown picker works - it should work like how 90% of sites and apps do it. Places that miss the mark on that stick out as being cumbersome and harder to use.

Collapse
 
iayeshasahar profile image
Ayesha Sahar

Thank you so much for your input!

Collapse
 
muinmundzir profile image
Muhammad Mu'in Mundzir

What's 'predictability' means in line: Provide visual cues and add "predictability"?
Nice read:D

Collapse
 
iayeshasahar profile image
Ayesha Sahar

Thanks!

Let's take a look at an example. All over the world, in websites, whenever we see something blue, we instantly think it's a link, right? So in our website too, we need to make sure something blue with an underline is a link. Users will be able to predict that this element will take them someplace else. The blue color and underline is a visual cue and users thinking that it will take them someplace else is them predicting what will happen if they click it!

Collapse
 
muinmundzir profile image
Muhammad Mu'in Mundzir

I understand now, thanks for replying. Have a nice days! :D

Collapse
 
andrewbaisden profile image
Andrew Baisden

These are great tips I totally agree.

Collapse
 
iayeshasahar profile image
Ayesha Sahar

Thanks. Glad to know that!

Collapse
 
iayeshasahar profile image
Ayesha Sahar

Thanks for your kind words :)