OPTASY: Drupal Web Development Agency Toronto
(416) 243-2431Drupal SupportRequest A QuoteQuote

Main navigation

  • Home
  • Services
    • Digital Strategy
    • Design
    • Web Development
      • Drupal
      • WordPress
      • Magento
      • Laravel
      • Shopify
      • Sharepoint
      • Contentful
      • Gatsby
      • Next.js
      • Node.js
      • React
      • AngularJS
    • Mobile & App
      • IOS
      • Android
      • Augmented Reality
      • Artificial Intelligence
      • Virtual Reality
    • Maintenance & Support
      • Drupal Maintenance
      • Wordpress Maintenance
    • Staff Augmentation
  • Portfolio
    • Web
    • Mobile
    • Ar
  • About
    • Who we are
    • Values
    • Events
    • Awards
    • News
    • Careers
    • Partners
      • Acquia
      • Google
      • Pantheon
      • Shopify
      • Wordpress
  • Blog
    • Drupal
    • Drupal 8
    • HTML
    • CSS
    • Javascript
    • PHP
    • Microsoft
    • Web Design
    • Design
    • Tips
    • News
  • Contact
(416) 243-2431 Drupal Support Request A QuoteQuote

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?
Tips
Web 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  

Share the article

Development

We do Web development

Go to our Web development page!

Visit page!

Do you want a website

or app developed?

 

Get a Free Quote

and let's make it work!

Get a Quote

Recommended Stories

DrupalTips
How to Migrate Your Drupal Website to Another Host in 5 Steps

How to Migrate Your Drupal Website to Another Host in 5 Steps

  Website owners may need to migrate their web host at some point during their business journey due to the emergence of more lucrative hosting options, such as VPS, shared, or dedicated hosting. This is why many website managers choose to perform host migration. This article offers guidance on managing hosting server migration, one of the most widely-used DevOps services. It does so by breaking down five crucial steps that can lead to a successful migration. What are the factors to consider when moving a Drupal website to a new hosting server? Deciding to change web hosts can be a challenging decision. However, there are several indications that your website may need hosting updates, which can be identified if you know where to look. Although it may be difficult to admit, taking this step will improve your website's performance. Here's a guide on how to identify these indicators on your Drupal website. There is a recurring problem with downtime. Website downtime can harm your reputation as a service provider. The quality of your hosting equipment and security features can impact your site's availability and protection against cyber-attacks. Your host is hard to reach. Efficient communication between a website owner and their web host is crucial. In the event of a server crash or error, prompt contact with the host is necessary for troubleshooting and restoring the site's functionality. Having an unreliable host can negatively impact website functionality and customer retention. Therefore, having a dependable customer service team available is essential for providing optimal user experiences and promoting business success. Your current hosting fees are high. Running a website can require a significant investment in web hosting. It's a recurring expense that you should choose carefully. The most expensive option may not be necessary. Consider the features and server space that your host provides and compare them to your site's needs. Don't overspend on hosting that doesn't fit your requirements. You can always upgrade to a more expensive plan later. The level of security provided may not meet your requirements. Investing in a secure web host can be advantageous for your website as it prioritizes security measures. Investing in a secure hosting server can prevent data loss, compromised user data, and damage to your credibility with your audience. Consider specific features and plugins, such as Secure Sockets Layer certificates, malware scanning, and server firewalls, when selecting a web host. Instructions for migrating to a different hosting provider The process of migrating a Drupal site to a new host involves contacting the current host, backing up the database, connecting to a new server, and uploading files. It is common for issues to arise during this process, such as corrupted backups. To avoid potential issues, consider hiring a professional agency like Optasy to complete the migration process for you. This may help save resources and ensure a smooth transition. Before migrating to a new web hosting server, it's important to follow essential steps. Let's examine some of them. 1. Turn Drupal caching off. To prevent possible disruptions, the initial action is to access the Drupal admin dashboard and follow these steps. To disable caching, navigate to Configuration, Performance, and Caching, then select "No Caching." To disable "Aggregate CSS files" and "Aggregate JavaScript files" in "bandwidth optimization" and ensure all caches are cleared, click "Clear all caches." 2. It is recommended to create a backup of your Drupal files. To connect to your remote server, enter the connection details and select "QuickConnect" to establish a connection with the server hosting your website. To back up your Drupal files, simply download the content from your main site's folder onto your local device. 3. Export your Drupal database. Access the phpMyAdmin tool located in the Database section of your server's control panel. To export your Drupal site database, select "Check all" and then choose the "Export method" and "SQL" options. 4. Transfer the Drupal database to the new hosting provider. To create a new MySQL database on the target server, click on "Import" located at the top of the database. Afterward, select "Choose File" and click "Go." This will successfully restore your site on the new hosting from the backup. 5. Turn on Drupal caching. Go to Configuration - Performance - Enable Drupal caching. And that's it! Your host migration process is completed. Conclusion Building and managing a Drupal website involves various complexities, with hosting being a particularly challenging aspect. A wide range of hosting options are available, which can make it a daunting task to determine the most suitable one for your website requirements. Optasy's team of Drupal experts can provide assistance and guidance on server migration and hosting server management.   Photo credit: Unsplash.... Read more
Raluca Olariu / Mar 23'2023
DrupalTips
How SEO Helps Your Website Grow

How SEO Helps Your Website Grow

  Search engine optimization (SEO) is a powerful tool for helping your website grow and reach its full potential. SEO involves optimizing your website to make it easier for search engines like Google to find and rank it in their search results. By using SEO techniques such as keyword research, content optimization, link building, and more, you can increase the visibility of your website and attract more visitors. With the right SEO strategy in place, you can drive more traffic to your site and generate more leads and sales. In this article, we'll discuss how SEO can help your website grow and become successful. What is SEO? SEO stands for Search Engine Optimization, and it is the process of optimizing a website to make it easier for search engines like Google to find and rank it in their search results. SEO involves a variety of techniques, such as keyword research, content optimization, link building, and more. By using these techniques, you can increase your website’s visibility and attract more visitors. SEO helps your website become more visible in the search engine results pages (SERPs), which can lead to more traffic, leads, and sales. Benefits of SEO for Website Growth Let's have a look at some of the top benefits of SEO for website growth: Increased visibility: SEO helps your website become more visible in the search query, which can lead to more traffic and leads. Improved user experience: SEO also helps enhance the user experience of your website by making it easier to navigate and providing relevant content. Increased brand awareness: SEO can help boost brand awareness by making your website more visible in the SERPs, which can lead to more people recognizing your brand. Higher conversion rates: SEO can also help increase your website's conversion rate by making it easier for visitors to find what they are looking for and take the desired action. More organic traffic: SEO can help you drive more organic traffic to your website, which is free and highly targeted. Keyword Research for SEO Keyword research is an important part of SEO, and it involves finding the right keywords to target for your website. Keyword research helps you identify the words and phrases that people are searching for when looking for products or services related to your business. By targeting these keywords, you can increase your website’s visibility in the SERPs and attract more organic traffic. When doing keyword research, you can use specialized software to make the job easier. Content Optimization for SEO Content optimization involves optimizing your website’s content to make it more relevant to search engines. Content optimization includes optimizing titles, meta descriptions, headings, images, and other elements of your website’s content. Many companies rely on a solid blog approach to boost their content optimization strategy and highlight their SEO efforts. Link-Building Strategies for SEO Link-building is another top SEO strategy, and it involves creating backlinks to your website from other websites. Backlinks are links from other websites that point to your website, and they can help improve your website’s visibility in the SERPs. There are a variety of link-building strategies you can use to build backlinks for your website. These include guest blogging, directory submissions, social media marketing, and more. Conclusion SEO is an important part of website growth, and it can help you increase your website’s visibility in the SERPs, attract more organic traffic, and boost your conversion rates.  In the competitive digital world, brands that harness the power of SEO are on top of the game.  If you, too, want to integrate SEO into your web development project and are looking for professional advice, don't hesitate to contact Optasy. Optasy is a web development company that provides complete web development and maintenance services that support business growth.  Photo credit: Unsplash.  ... Read more
Raluca Olariu / Feb 14'2023
Tips
Website Security Best Practices

Website Security Best Practices

  Website security is an important consideration for any business or organization with an online presence. With the ever-increasing threats posed by cybercriminals, it is essential to ensure that your website is secure and protected from malicious attacks. Implementing best practices in website security can help protect your website from hackers, malware, and other malicious activities and security issues. This article will discuss some of the best practices for website security and how you can stay away from cybercriminals and improve your security posture.    "Cybersecurity is a shared responsibility, and it boils down to this: in cybersecurity, the more systems we secure, the more secure we all are." - Jeh Johnson Overview of Cybersecurity in 2023 The cybersecurity landscape heads towards a privacy-first approach to information security in 2023. Also, aligning regulations globally will allow businesses to gain more security and data protection.  There are growing voices that give their positive vote to passwordless authentication, which will presumably eliminate the risk of password breaches and amplify organizational security.  However, the rise of the Internet of Things (IoT) devices will likely increase security risks for organizations and expose more security vulnerabilities.  So how can websites cope and become more agile and accessible in this uncertain cyber landscape?   Best Website Security Practices in 2023 At the moment, the best website security practices involve a combination of proactive measures and reactive responses. Proactive measures include implementing strong authentication methods, encrypting data, and regularly patching software. Reactive responses include monitoring suspicious activity and responding quickly to identified security threats or security breaches. Strong Authentication Multi-factor authentication is one of the most important best practices for website security. It involves using two or more factors to verify a user’s identity, such as strong login credentials, and a biometric factor like a fingerprint or facial recognition. This ensures that only authorized users can access the website and its data, protecting it from unauthorized access. Additionally, strong authentication can help protect against phishing attacks, which are attempts to gain access to sensitive information by posing as a legitimate website. Encryption Encrypting data is another significant best practice for website security. Encryption scrambles data so that it can only be read by the intended recipient, making it more difficult for hackers to access sensitive information. It also helps protect against man-in-the-middle attacks, which occur when a hacker intercepts data as it is being transmitted between two parties. Software Patching Software updates are another important best practice for website security. Regularly patching software helps protect against vulnerabilities that can be exploited by hackers. It also ensures that the latest security features are in place, making it more difficult for attackers to access sensitive information. Monitoring and Response Reactive responses like monitoring suspicious activities or responding quickly to identified threats are two valuable tools for website security. Monitoring for suspicious activity can help identify potential threats before they become a problem. Responding quickly to identified threats can help minimize the damage caused by malicious code. Conclusion Keeping websites secure in 2023 involves a combination of proactive measures and reactive responses. These best practices are just some measures you can take to protect your digital assets. If you want to go more in-depth and opt for complex ways to secure your website, don't hesitate to contact Optasy.    Photo credit: Pixabay.... Read more
Raluca Olariu / Jan 25'2023

Browse cities

×

Toronto

WordPress Development Services in Toronto
iOS App Development Services in Toronto
Drupal Development Services in Toronto
Magento Development Services in Toronto
Laravel Development Services in Toronto

Montreal

WordPress Development Services in Montreal
iOS App Development Services in Montreal
Laravel Development Services in Montreal
Drupal Development Services in Montreal
Magento Development Services in Montreal

Vancouver

Magento Development Services in Vancouver
iOS App Development Services in Vancouver
Drupal Development Services in Vancouver
WordPress Development Services in Vancouver
Laravel Development Services in Vancouver

New York

WordPress Development Services in New York
Laravel Development Services in New York
iOS App Development Services in New York
Drupal Development Services in New York
Magento Development Services in New York

Need a new Project?

Dare us to shape and boost your idea(s)!

Start a Project

(416) 243-2431

Contact

(416) 243-2431

contact@optasy.com

Toronto Downtown

First Canadian Place,
100 King St. W. Suite 5700, Toronto

Toronto West

2275 Upper Middle
Rd. E, Suite 101
Toronto

New York

1177 Avenue of the
Americas, 5th Floor,
New York

Newsletter

Get the latest OPTASY news, tips and how-to’s on the go, right in your inbox!
OPTASY
clutch
Pantheon Premier Partner
  • Drupal 8
  • Services
  • Contact Us
  • Partners

  • Drupal
  • Google
  • Magento
  • Shopify
  • Wordpress
Facebook
Twitter
LinkedIn
Drupal
  • Cities
  • Support

© 2023 All Rights Reserved. Built with Drupal