UX Principles for Creating a Great Website

Introduction to Great Websites

Steve Jobs: Design is not just what it looks like and feels like. Design is how it works.

Jakobs Law: Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.


Designing a great website is often challenging and hard. There may be billions and billions of websites out there only a few thousand of them are mostly good websites. People spend a lot of time on the internet for shopping, ordering food online, exploring their university websites, reading articles from different websites and many more. You can make a user’s day bad just by designing a bad website. It’s time to change. If you are on the verge of designing a great website or already have a website and thinking to update your crappy website, this article is totally for you. Don’t worry I got you. I was sailing on the same boat too. So throughout the tutorial, I want you guys to follow two big quotes regarding design.


How to design a good to great website?

Great website design often comes from different expert areas. It’s not a one-step process, you can never design good websites from shortcut steps. We should always focus on these key aspects i.e. Usability and User Experiencefor designing a website. Follow the below discussed 9 general principles and make your websites usable, aesthetic, friendly, engaging to use.

1. Easy Navigation

This is one of the most important features or a principle that you must keep in mind and implement while you are designing a website. According to the survey conducted by Clutchthey found that “Almost everyone (94%) says easy navigation is the most important website feature”. It’s true because if your site is hard to navigate, nothings easily available in the first place, then things might not go smoothly. Easy navigation includes a simple menu layout and the ability to quickly and reliably move through sites. Don’t worry I have some tips for easy website navigation.

  • Keep the navigation bar as simple as possible with minimal options
  • Mitigate the drop-down menu options
  • Follow real-world conventions or use the user’s language for naming the options. Don’t use jargons
  • Avoid too many clicks inside the website

Motivatelearn and teach yourself how to implement the above tips by looking at some of the best websites available out there. For example, Gmail — Google. I will use the same example in most of this tutorial. Because why not it’s one of the best website/application on the planet.

UX Principles for Creating a Great Website
Home page of my Gmail

Everything in the above screenshot is easy to understand, navigate, and this website follows all the tips I have listed above. Go check it out.

2. Responsive design

First, let’s get the basics ready. Responsive design means the design of a website/webpage that fits well with all the smartphones, computers, laptops or any display devices irrespective of their aspect ratios. An aspect ratio is the height and width of a display device. Every user today wants a mobile version of the website. It is the duty of the designer not only to design the website for a bigger screen but also focus on the smaller screens too. The website should not work only for a specific iPhone, Blackberry (if that’s a thing today), Samsung and One Plus phones. The design should fit every single smartphone available in the market. Well, if not every smartphone, at least try to. Some tips for responsive design are:

  • Optimize the images
  • Ensure buttons can be easily clicked on smaller screens
  • Create several prototypes
  • Consider a Mobile-first design approach

Hint: If you need your to design to be the best then follow:

Understand →Explore →Prototype →Evaluate

Now you guys might have heard this term before a million times “Mobile-first design approach”. There are some design requirements in this approach which are listed below:

  • Providing less content on the screen and focus on important details
  • The text size should be appropriate
  • Provide better interactive elements
  • Telling the customers you want them
  • Client Squish Media (keeping the aspect ratio in mind while designing)

The best example of the responsive, mobile design application is Towards Data Science.

UX Principles for Creating a Great Website
Screenshot captured from my smartphone (One Plus 6T)

3. Same Color Scheme (Consistency)

When defining knowledge hierarchy through the websites, color is very important. Users should be able to skim through pages understand what they are about. Keeping the coloring scheme consistent is one of the hardest tasks on the planet. Sometimes the color which we like might not be liked by others. There is often a tradeoff between colors. Make sure that the color you choose is well-liked by others. Some colors might fit well to a certain text and some might not, so maintaining consistency is the key role here. Run a survey, test, and iterate until you get good feedback from the users. Also, the color scheme on your website must be consistent. Don’t do a combo of colors. That’s a bad idea. Below is the chart of the psychology of choosing colors.

UX Principles for Creating a Great Website
Image Credits: Wordstream.com

Some website tips are:

  • Don’t use super bright or dark colors on your website.
  • Highlight the important information where necessary.
  • Make sure you use the right color combination.
  • Keep the colors minimalistic as possible.

For example, just look at your Gmail page again, simplicity at its best. Like I said simplicity is the key here. All the colors are equally balanced. All information is clearly visible.

UX Principles for Creating a Great Website

4. Comfortable Website UI

A user interface is through which the user interacts with the system. It serves as a bridge between the system and the user. If the UI (User Interface) is good then the user would definitely like to spend more time on it. It is the job of the designer to make the UI look fresh and clear. Below are some tips to design a good UI:

  • Keep the interface simple
  • Utilize the page layout efficiently
  • Consistent fonts and color
  • Remove irrelevant information
  • Avoid infinite scrolling of information

To make something intuitive, connect it to users’ own experiences. Use Metaphors while designing. Often the three most important questions that we need to ask ourselves before we design something are:

  • Who the users are
  • What activities are being carried out
  • Where the interaction is taking place.

We need to optimize the interactions users have with their product. So they match the user’s activities and needs.

For example, the same old google’s Gmail has this amazing design wherein we don’t even need the urge to read every option on the left-hand side. Because they associate every option name with its respected symbol. So this is one amazing thing you can implement on your website too.

Watch out the symbols on the left-hand side

5. Contents meet user goals for visiting websites

When it comes to finding the right information, a user would not be happy if he/she doesn’t get what they want. Be specific in providing the information. For example, the Yale University School of Arts website, under the tuition fees section they have just provided “The tuition fee for the academic year 2019–2020 is $39,924. The Corporation of Yale University reserves the right to revise tuition rates as necessary”.

Image Credits: Yale University School of Arts

Consider an international student and his mom/dad is exploring this website because they are curious about the tuition fees. They accidentally stumbled upon this page and they are clueless about this vague information. Now the questions that can arise in their mind are:

  • Why is the tuition fees $39, 924
  • What is the international student fees
  • Where is the proper tuition fees breakdown

See, this is how the user feels frustrated, in this case, the contents never meet user goals. Another scenario is the help and documentation pages are such pages that need more attention while providing the details. Even if the program can be used without paperwork, support and documents may be required. Any such information should be:

  • Easyto search
  • Be specific
  • Focus on the user’s task
  • List as concrete steps to be carried out

Hint: Whatever information you lay to users remember “Never beat around the bush

To get a good example of the content just have a look at the support forums of google’s Gmail page. All the information is well laid out. A user can never be lost or frustrated within this page and they get what they want.

Image Credits: Gmail’s Support page

6. Performance: Quick to show something

The performance of the website must be smooth as butter, not slow as a sloth (that’s a terrible example). If the performance of the website is too slow, then it’s will create a bad impact on the company of the website. And the uses might stop using the website. Think and act wisely. There are many website testing tools out there, just choose one and test the speed of your website. One of the popular ones is Pingdom ToolsSo the first step is rather than updating your website without knowing where the problem is. Try one of those tools and they get to where the problem is, which page, section or whatever’s performance is slow. The correct that specific problem. Things might make more sense later on. Some tips to increase the performance of your website is given down below:

  • Compress your files
  • Optimize your images
  • Avoid using many images: use text instead
  • Reduce HTTP requests

I tested the Gmail website using the Pingdom Tools the results were fascinating. Obviously, it’s google’s product, the end results would be amazing. So design your website in such ways that its performance result must look similar to this one shown below:

Results obtained from Pingdom Tools

As seen above in the screenshot this website also suggests the improvements to increase the performance with sufficient documentation. It’s worth trying.

7. Feedback about progress

Feedback is a response about the task, process or event after its completion or during its stage of completion. Know what’s going on inside the system or website in this case. Consider you are using a website for doing some transactions online, there’s one point of time where you don’t know what going on in the system. Suddenly you get a message of transaction failed. At this point you are clueless. It would have been better if the website provides appropriate feedback about the transaction failure or the error behind it such as internet connection issues, money limit in your bank, or even a slight website’s technical glitch. In fact, the feedback about progress is an important aspect of design it’s also the first usability heuristics of user-interface design.

For example, to give you a bit of more clear insight on what I mean by feedback about progress is refer to the below-given screenshot

Uploading image as an attachment on Gmail

Suppose when I upload an image as an attachment on Gmail, with the help of the progress bar I can come to know that the image is being uploaded. These simple things make your website more functional. Some tips for providing feedback about the progress are as given below:

  • Use appropriate loading or percentages to show about the progress
  • If an item or a product is not available for purchase, let the user know about it.
  • Provide a success or a failure screen, such that users come to know that they are on the right track.

8. Avoid “Alert/Dialogs” when not necessary

Don’t annoy the user’s by providing unnecessary dialogs every time when they do something on the website. For example, think the user is trying to make a payment online. Provide a dialog or alert only when the transaction is successful or failure. Don’t provide alerts/dialogue every time when they enter their card details such as name, DOB, or the pin number. Also, sometimes it would be good if you ask the user to receive the notifications before displaying them without their permission.

Don’t Do this

Image Credits: Tom’s Hardware

Do this

Image Credits: Android Police

Some of the things that you need to follow are:

  • If at all you provide the dialogs or alert, be specific don’t fill it with irrelevant information.
  • Remove all the dialogs/alerts where unnecessary
  • Don’t just annoy the user by the opening the dialogs on the website
  • Don’t put the user inside the loop of dialogs

9. Try to mitigate website 404 or 500 errors.

If you have already designed a website or on the verge of designing, then try to develop it completely with all the pages, features, and functionality: the websites must not have broken links and images, incomplete functionalities and many more. Especially the site should not have any 404 or 500 errors. If at all you have broken links by mistake, then try to design a good 404 error page. A user must be happy even though they see a 404 error page but this case is exceptional. Obviously, when your website is almost perfect you don’t have to worry about it. For example, I have been using google’s website for quite a long I have never faced such an issue. One of the best pages for 404 errors in terms of design is the GitHub website. It’s fully animated too. Check it out.

Credits: GitHub

You should design the page in such a way that even though the user lands on a 404 error page, they must navigate back to the other pages or even quit from the website. Give them options to perform other tasks as shown in the above screenshot.

Conclusion

The above are General Principles for Good Website Design. With the help of these principles, you can easily develop user-friendly and functional websites. Without these fundamentals, it would certainly be hard to develop a good and intuitive website. Just keep in mind a website with good user-friendly and usability will always succeed in the real world.

UX Principles

  • Meet the users’ needs. The foremost of all UX design principles is to focus on users throughout the design process. …
  • Know where you are in the design process. …
  • Have a clear hierarchy. …
  • Keep it consistent. …
  • Understand accessibility. …
  • Context is key. …
  • Usability first. …
  • Less is more.


All above Content the property of https://miro.medium.com/