In light of the recent COVID-19 pandemic - OPTASY would like to offer DRUPAL website support for any Healthcare, Government, Education and Non-Profit Organization(s) with critical crisis communication websites or organizations directly providing relief. Stay Safe and Stay Well.

What Are the 10 Rules of Good UI Design? What Is Good UI/UX Design?

What Are the 10 Rules of Good UI Design? What Is Good UI/UX Design?

by Silviu Serdaru on Mar 17 2020

In this post, I'll share with you the top 10 rules of good UI design.

You will be learning:

 

  • What are the essential elements of a good UI design
  • What are the most common UI/UX mistakes that designers make
  • What are the UI best practices in 2020
  • Lots more UI design tips

     

Now, let's get started.

 

1. Aim at an Almost Invisible User Interface 

What is a good UI design?

A logical structure & necessary visual elements only.

In other words, in order to design an almost invisible user interface you need to:

 

  • be “merciless” and keep the essential elements only
  • base your UI on a well-thought-out structure
  • use clear language in your text messages and on your labels

     

10 Rules of Good UI Design: Design an Almost Invisible User Interface

Source: Medium.com

A poorly structured and cluttered UI would only make the user ask questions like: “Where's the main menu?”

 

2. Keep It Consistent

And this is one of those good UI design principles that's overlooked or undermined most often.

Consistency should span over the entire ecosystem of elements that make up a UI design: fonts, colors, menus, buttons, icons.

Keeping a consistent UI throughout your website translates into creating patterns aimed at enhancing efficiency.

At improving the user experience.

And here I'm referring to layout, design, language patterns. Once the user gets familiar with a given pattern, it will be easier for him/her to interact with other parts of your website that present the same pattern.

 

3. Be Purposeful with Page Layout

One of the fundamental rules of good UI design is to structure your pages based on importance.

In this respect, here are the crucial principles of user interface design to guide your page layout creation:

 

  • take into account the spacial relationships between various elements on the page
  • place your UI elements strategically: draw users' attention to the most important information on the page and make it easy for them to scan it through 
  • keep in mind that “form follows function”: design each item in accordance to its function (no need to reinvent the wheel and to turn the hamburger menu into a... sandwich menu, for instance)
  • stay away from clutter, at all cost: keep the visual elements on the page to a minimum
  • make smart use of headings, group similar elements together, add numbered items, as well, all in the name of readability 

     

10 Rules of Good UI Design: Be Purposeful with Page Layout

IMAGE Image by 200 Degrees from Pixabay  

 

4. Use Color and Texture Strategically

Make smart use of color, texture, contrast, and light to direct the user's attention to key elements and important information on the screen.

 

5. Use Familiar UI Elements: One of the Key Rules of Good UI Design

One of the UI best practices that's both:

 

  • the easiest to implement
  • the most underestimated

     

And it all comes down to intuitive design. To sticking to common elements when creating your user interface

Again, the hamburger menu makes the best example: once spotted, the user knows what it is and how to open it.

Restrain yourself from showing off your creativity as a web designer. From being "discouragingly" innovative. Form should follow function, remember?

Instead of impressing your users, you should help them get things done quickly and easily.

That's what delivering a good user experience is all about, after all.

 

6. Put the User in Control of the UI

Instilling a sense of control in the user is one of the most powerful UI design principles.

10 Rules of Good UI Design: Put the User in Control of the UI

Source: xd.adobe.com

In this respect, here are some specific measures that you can implement:

 

6.1. Provide enough context 

Ensure that the user knows, at each stage of his journey on your website, where he is, where he's been, and where he could go next.

Tip: place visual cues to help the user develop a sense of mastery and control.

 

6.2. Be transparent about the system status

Another one of those golden rules of good UI design:

Let the user know, at all times, what's the status of the process that he's initiated.

For instance, he/she might have started an action that requires some time for the computer to carry out.

In this case, make sure you provide feedback, at regular intervals, about the system status, about what's going on.

 

6.3. Make actions reversible

In other words, allow users to:

 

  • unselect
  • undo their last actions
  • restart whatever processes that they've engaged in

     

6.4. Design your UI with all user skill levels in mind

And this is one of the most obvious characteristics of a good UI design.

It's an easy to use interface for both casual and expert-level users.

 

6.5. Provide feedback on every user action

It's more than a good UI best practice: it's a matter of... good manners to provide at least some sort of feedback at each point of action.

Therefore, make sure your system delivers a meaningful reaction each time a user:

 

  • clicks on a menu
  • hits a button
  • clicks on a text message tab

     

Let the user know, using specific UI elements — animations, progress bars, pop-up windows, color change — whether he's successfully carried out the action or not.

 

7. Minimize Cognitive Load: Recognition over Recall

“Task-relevant information only” should be one of your key rules of good UI design.

And sticking to a limited number of elements within the display aligns with the very limits that the human attention, itself, imposes.

In this respect, it's human nature that your users prefer to recognize information across a sequence of screens rather than to strive and recall it from their memory.

For instance, our cognitive load is always lighter when we're challenged to answer multiple-choice questions compared to having to tackle short answer questions.

 

8. Stick to One Primary Action per Screen

And here, we go back to the “visual declutter” principle again:

Make sure that each screen supports just one single main action.

Squeezing too much information on the same screen and requesting the user to carry out more than one primary action will just:

 

  • confuse him/her
  • distract him
  • lead to attention overload 

9. Use Typography to Create Visual Hierarchy

Most likely one of the easiest to follow rules of good UI design.

Strategically use different font sizes and display text to enhance:

 

  • readability
  • scanability
  • legibility

     

10 Rules of Good UI Design: Use Typography to Create Visual Hierarchy

Photo by Alice Donovan Rouse on Unsplash 

 

10. Stick to a Small Number of Gestures

Gesturing, swiping, tapping, pressing... no need to “squeeze” all these user actions into your app. Keep them to a minimum.

Tip: Facebook and WhatsApp make some good UI design examples; their interfaces require a limited number of user gestures.

Pro tip: make sure it's crystal clear to your users what gestures they need to perform in order to carry out certain actions on your interface.

10 Rules of Good UI Design: Stick to a Small Number of Gestures

Source: Medium.com

   

The END!

Now, I'm really curious to hear/read your thoughts: 

How does your own list of must-follow rules of good UI design look like? Have I overlooked any key best practices?

Let me know in the comments below.

Image by FiveFlowersForFamilyFirst from Pixabay  

Development

We do Web development

Go to our Web development page!

Visit page!

Recommended Stories

4 Reasons Why You Need Drupal Maintenance Services
  Entering the world of Drupal web development can feel like diving into the unknown for many business owners. Once they've figured it out with the help of a developer or a Drupal development agency, the business runs smoothly for a little while.  However, building and optimizing a website is like buying a new house—it's functional at first, but things break down and need repairing and regular care in time.  Since spring is just over the corner, what better moment to start cleaning, improving, optimizing, and refreshing your website? Whether you do it in-house or hire an agency that offers Drupal maintenance services, it will work wonders and could actually double your potential market value. But first, it's essential to understand why a regular maintenance plan is critical, how to tell when you need Drupal maintenance, and what does Drupal maintenance include. This article will answer these questions.   Why you should stick to a regular Drupal maintenance plan  If you've already entered the world of digital marketing, you know that the journey towards attracting and retaining customers doesn't end with web development and deployment. Change is a permanent constant in life, and businesses have to adapt to this ever-changing dynamic.  Security  A few years ago, website maintenance was optional. Building a static website that you could leave unattended for the entire year was perfectly normal.  Today, as the digital landscape has expanded and become more prone to security vulnerabilities, Drupal support is imperative for maintaining a healthy security posture.  Although Drupal is known for being the most secure CMS, this only applies if your Drupal website is regularly optimized with security updates and patches. The Drupal community and Drupal security team continuously build security patches, fixes, and upgrades, and Drupal users need to be in the loop about these updates. In other words, keeping up with the news and module updates in Drupal security is vital in order to avoid breaches.  Constant Drupal core module updates can boost website protection and secure it against cyberattacks and threats.  Fixing errors To ensure that your website performs well and meets the needs for speed and agility that the modern digital user demands, fixing bugs and errors is a top priority. These malfunctions may happen for multiple reasons—rushed coding and deployment, inadequate testing, or miscommunication. They may affect your site's performance and loading speed or even alter your Drupal website’s functionality.  And since users don't want to spend more than four seconds waiting for websites to load, not paying attention to repairing bugs could cost you customers.  This price is too big to pay, and it's worth considering Drupal maintenance services as part of your website strategies.  Keep your content fresh with new features Another reason why Drupal maintenance matters is related to scalability. Drupal websites can grow together with your business goals. Constant feature and module updates allow Drupal users a high level of customizing capabilities that helps businesses keep up with the changing needs of the customer.  With Drupal 8, integration is much more affordable, so if you haven't migrated yet, you might want to contact a Drupal agency to help you decide whether an upgrade is the right choice for your business.  The user behavior has dramatically shifted in the last year, which is why content optimization, new features, and enhancements allow brands to stay fresh and align to this changing environment.  SEO optimization Ranking high on Google and other search engines is crucial for your website to stay relevant. An excellent Drupal maintenance team has SEO experts that provide Drupal SEO audits and optimization.  “Good SEO work only gets better over time. It’s only search engine tricks that need to keep changing when the ranking algorithms change.” – Jill Whalen   How to tell when you need Drupal maintenance If you're not yet convinced that you need Drupal support and maintenance services for your website, here are some indicators that you can't postpone it any longer without hurting your business: Your website is slow, and you have received complaints about its loading speed. Your web traffic has dropped considerably. You experience more security breaches. Your content and design are outdated. Links, buttons, or forms are not working.   These are some of the red flags of poorly maintained websites. If you recognize these warning signs as part of your website, it's definitely time to start planning your maintenance strategy. What do Drupal maintenance services and support include? A useful maintenance model covers: Security and module updates Third-party integration support Regression testing  Bug diagnosing, fixing, and testing Hosting infrastructure maintenance Hack, malware, down recovery   Partner with the right Drupal maintenance and support agency When thinking about hiring a Drupal maintenance team, you need to consider your needs. At Optasy, we cover a wide range of website maintenance requirements and can create a customized maintenance and support plan to support your website's specific needs.  How does this sound to you? Have you made up your mind whether it is worth investing in Drupal maintenance services or not? If yes, then contact a reliable, dedicated support partner like Optasy and see how our Drupal maintenance services can keep your website up and running.  Photo credit: geralt on Pixabay.     ... Read more
Raluca Olariu / Mar 02'2021
4 Key Things to Know When Optimizing Your Drupal Website for Mobile
  Approaching a mobile-first strategy for your Drupal website is imperative. Since 52% of all website traffic comes from mobile devices, businesses that want to strive must ensure that they optimize their site for mobile.  Why is mobile optimization important? A website designed for desktop use can be non-functional on a phone or tablet. Building a mobile-friendly site that looks good regardless of how users access it is no longer optional for companies that want to deliver high-quality digital experiences.  "If I were to start Drupal from scratch today, I'd build it for mobile experiences first and desktop experience second." - Dries Buytaert, founder and lead developer of the Drupal CMS There are plenty of benefits and competitive advantages of implementing a mobile-first approach to your Drupal website. We'll name a few: Positively impacts search ranking Improves loading times Increases visibility across all devices Enhancing mobile performance for Drupal websites is not rocket science, but if you're a rookie in web development, hiring a Drupal developer to help you implement some of the steps highlighted in this article may be the safest strategy.  Without further ado, let's start to learn how you can optimize your Drupal website for mobile use.   1. First things first: you need a mobile menu.  Start your mobile optimization journey by installing a mobile menu that enables navigation links to be displayed accurately on narrow screens.  A popular style for mobile menus is the 'hamburger' icon. This type of menu is substituted by a symbol with three horizontal lines when the screen narrows to a particular width. When clicked on, the icon displays the mobile-friendly main menu of the Drupal website. Want to use this type of menu? Start by installing the Responsive Menus module and download the tar.gz.file.  In your dashboard, open the Extend tab and select the Install New Module button.  Lastly, use the file browser to upload the tar.gz file. You should now be ready to use the module to customize and style your website's menu.  Remember that you can also hire Drupal developers at any stage of your optimization process to help you streamline your operations.    2. Don't ignore code minification.  One of the top priorities for mobile site functionality is quick loading times. As CSS or HTML files can get bulky, removing unnecessary elements from your website's code can help it render more fastly.  There are a few steps for successfully minifying your code: Install the Minify module  Download the tar.gz file and unarchive it Move the resulting folder into your website's Drupal modules section.  Enable the module from your dashboard You also have the option to enable the minify module to start working automatically. This will assist your Drupal website in loading quicker on mobile devices and thus improving the user experience.    3. Browser cache implementation for mobile-friendly Drupal websites. The next step in optimizing your Drupal site for mobile is to implement browser caching, which allows a user's browser to store data, so it doesn't have to repeatedly download the same files.  This reduces latency if, for example, your site has an extensive background image. The browser caching allows the picture to be stored on each visitor's device, so it doesn't have to be downloaded every time the user visits your site.  Browser caching is a built-in tool in Drupal, and although you can configure it in your control panel, we recommend that you consult the official guide before doing it or hire a Drupal developer to help you.    4. Consider image optimization.  Websites that contain many large image files can have longer loading times on mobiles. You don't want that if your goal is to provide high-quality experiences for your mobile users. Therefore, you can start optimizing your images to accelerate your site's performance. How can you reduce the size of your photos without jeopardizing their quality? It's actually easy. Drupal's ImageAPI Optimize module helps you manage your images before uploading them onto the website.  You only have to download the module's tar.gz file, install, and enable it in your dashboard. To automatically optimize your images for mobile devices, make sure to select ImageAPI Optimize as the default toolkit.  When creating responsive images, the amount of space an image fills on the screen is significant. Drupal lets you use @media rules to modify images depending on each user's screen size. This high level of personalization is allowed by the Breakpoint and Responsive Images modules.    Why Drupal 9 might be the best option for a mobile-first approach The latest version of Drupal provides optimized modules and features for mobile devices that enhance the user experience and address modern customers' needs.  Among the key benefits of Drupal 9 for mobile optimization are: Improved speed of content delivery Responsive design for various screen's widths  Editing content on mobile is easier  In conclusion, if you want to deliver high-quality, personalized user web experiences in the modern era, optimizing your website for mobile devices is a must. Optasy can help you build a mobile-first approach that satisfies the need for speed and high functionality that today's mobile users expect.  Image credit: deeptuts on Pixabay... Read more
Raluca Olariu / Feb 22'2021
10 Best Headless CMS in 2020, That Cover Most of Your Requirements (Part 2)
Ready to compare the features of 5 other best headless CMS in 2020? We've got them ready for you to just dive in and: survey the key reasons why you'd choose one over the other discover each one's main use cases narrow down your options … and pick the one that matches your requirements. What Is the Best Headless CMS in 2020? 5.6. Directus An open source tool for managing and delivering content across an entire network of platforms and devices. And here are some of the top reasons for choosing Directus: it provides your editorial team with an easy to use admin app for managing content it can be in the cloud or self-hosted it provides API for your development team to fetch content 5.7. Netlify CMS  One of your top 10 headless CMS options, an open source one, that you get to add to any static site generator of your choice. A React single-page application that provides you with an easy to use UI, playing the role of a… wrapper for your Git Workflow. Basically, when using Netlify CMS your content gets stored in your web app's git repository (as markdown files), close to your codebase.   "How does a Netlify CMS Gatsby setup work?"   It's pretty straightforward: You enter your content via that user-friendly interface, then Gatsby uses it to come up with the right pages for your web app. Why would you use it? it fits both large and small-sized projects, with fewer pages to create, to add content to, to edit, and to manage you get to review/preview your content and make changes in real-time, and even control entries status in editorial workflow mode it provides you with an easy-to-use UI, with just 3 tabs: workflow, media, and content you're free to use it with any static site generator you get to extend its functionality: add your own UI widgets, editor plugins, customized previews, etc. 5.8. GraphCMS     An API-first content management system, a GraphQL-native one, that allows you to distribute content across multiple digital platforms. And not just anyhow, but… within minutes. Your developer team gets to create content APIs in no time, whereas your content team gets all the tools they need for a smooth editor experience.   Source: capterra.com GraphCMS vs Contentful: Main Differences GraphCMS works best for enterprise and mid-market companies, enabling them to build highly scalable applications GraphQL is its underlying technology: an open source query language for APIs, that's been growing more and more popular among developers Contentful targets top global brands, helping them distribute digital content experiences across complex networks of markets and channels REST is its underlying technology: a programming paradigm for distributed systems And here are 2 good reasons for choosing GraphCMS as your go-to headless content management system:  you get a CMS that's client-side and JAMstack compatible you get to tap into the benefits of a JAMstack approach to development (JavaScript & Markup & API) 5.9. Cosmic A cloud-hosted headless content management system that provides you with both GraphQL and REST APIs. But what makes Cosmic one of the best headless CMS in 2020? Why choose the Cosmic Headless CMS?  it ships with features like content modeling, media management, localization, and webhooks it grants you a smooth editor experience with its WYSIWYG  editor, that you can use to incorporate (by embedding code) third-party services like Typeform and GitHub. it integrates smoothly with AWS, Slack, Algolia, Stripe, HubSpot 5.10. Kentico Kontent A cloud-based content delivery API that turns your structured content into content that's easy to be "consumed" by any device or digital platform that you might use as a front-end delivery layer.  Why would you choose it over other great options of headless CMS? you get an AI chatbot when using Kentico Kontent it provides webhooks and custom elements that make third-party integrations a lot smoother you get content management API enabling content consumption And we've come to… the END of the list of 10 best headless CMS in 2020. Which one checks the most features off your list? Now, if you're facing a "Headless Drupal 8 vs Contentful" dilemma, we're here to: help you identify the one that works best for your business and your requirements make your headless CMS-based project work Just drop us a line!   Image by tdfugere from Pixabay   ... Read more
Adriana Cacoveanu / Sep 26'2020