Blog 28: Best practices while designing your UI

Before designing our product’s UI, we researched on UI best practices.

We found a blog by Shopify that talks about the 7 essential UI design principles.

Source: https://www.shopify.com/blog/ui-design-principles

Some of the key highlights of this Shopify blog:

UI design vs. UX design

• UI design focuses on the visual and interactive elements of the product, like layout, typography, colours, icons, and buttons.

• UX design is concerned with the overall user experience, like the general purpose of the product and how the user feels about it.

7 important UI design principles

1. Make the user comfortable

   1. Make the navigation more intuitive and user friendly: Less is more: Minimalism is the name of the game in UI design.

   2. Keep the visual hierarchy clear: Ensure important elements like Buy button are prominent; and key information are easily noticeable.

   3. Keep it simple: Great UI uses simple language, readable fonts, and a pared-down colour scheme. White space is desirable.

   4. Keep it consistent: UI design elements like buttons, page layout, and colour schemes should remain uniform.

   5. Avoid jargon: Make users feel comfortable and that is free of unnecessary technical terms.
      

2. Let the user control the experience

   1. Based on user research, gain insights into the users’ needs and interests.

   2. For example, what buttons and visual information do users want upfront? What might more experienced users want tucked away? etc.

   3. Allow users to undo an action and inform them where exactly they are (for example, breadcrumb trails).
      

3. Make it intuitive

   1. Good user interfaces are intuitive, with everything exactly where the user expects it.

   2. Familiar patterns, templates, font choices, and page layouts reduce your user’s cognitive load.
      

4. Be accessible

   1. The World Health Organisation reports that 253 million people have some form of blindness or vision impairment.

   2. One rule of thumb is not to rely on only one way of communicating with the user.

   3. For example, two buttons labelled “Yes” and “No” could also have a checkmark and an X on them, respectively.

   4. Making them green and red can add another layer of communication.

   5. This ensures that colour-blindness or reading skills don’t stop a user from being able to navigate the site.
      

5. Let users know when things are working

   1. Such as adding a light animation when a button is clicked, or a thank you page to close the loop, or a progress bar and etc.
      

6. Also plan for when they don’t work

   1. Well-designed error messages and 404 pages are clear and helpful, redirecting the user to something else.
      

7. Embrace iteration

   1. Think of the design process as an iterative loop with no real endpoint. It’s about repeating steps to improve.

   2. Listening to feedback, hiring users to test, or diving into analytics to see which pages have a high bounce rate.

   3. Small changes to the design of a checkout page, for example, can fix a leaky sales funnel.

Jump to blog 100 to refer to the overall product management mind map.

I wish you the best for your journey 😊