UI & UX terms have become unavoidable in web design in recent years. It is a fact and a fact that without the application of these approaches, it is not possible to design an excellent website today. This article will help you learn more about them and use this approach to significantly improve the results of your website.
Meaning of UX and UI
UI stands for User Interface, meaning user interface and means the entire display of visuals on the screen. You can not only represent the look of your website, but also the overall image of a smartphone app or even an operating system. The visual design of each interactive interface is related to the UI area.
So what does UX mean?
UX stands for User Experience, also known as the English term. In other English, we mean the user experience. This is not something that can be seen, so in this area, you can rely primarily on measurements, tests, and experience. UI and UX are closely related, as the latter allows you to change the visual appearance to achieve better results, making users more satisfied.
UI and UX design aspects, rules, approach
UI and UX have a relatively short history, so in most of these areas they are not set in stone, they are eternally applicable rules. In our blog article, therefore, in addition to a few “golden rules”, you can largely find arguments and considerations. Our goal is to give our readers a special approach.
At the end of this article, we hope that you will see how much the User Interface and User Experience can contribute to the success of a business and use the aspects you know to benefit from your own project.
Golden rule: responsive design is mandatory
It’s about 2020, more than a decade since we’ve had the smart devices with us. As a result, one of the most important aspects of web page design today is the responsive look. This fund, without it, we can not talk about a modern website. Worldwide, there are already more internet queries coming from mobile than desktop. For the time being, the latter is still leading in Hungary, but the mobile device category is expected to take over in the coming years. The current Desktop vs Mobile vs. Tablet ratio can be viewed here: https://gs.statcounter.com/platform-market-share/desktop-mobile-tablet/worldwide/
When designing a responsive design, it is not enough to make sure that the website looks right on different screen sizes, but also to make sure that all functions work correctly. In addition, we need to take into account the comfort of the user, we also need to carefully design navigation options for both desktop screen and mobile screen.
Some navigation tools are only recommended for desktop devices, others only for mobile. For example, in a mobile view, you can insert an extra connection button between long text blocks so that the user doesn’t have to scroll through the entire screen.
A responsive website is important not only to users but also to you.
If you advertise your website, you can get better results by getting mobile users to buy/inquire. We find that there are also more and more webshops among our customers where the number and transaction value of mobile purchases exceeds desktop numbers.
In addition, responsive design is an advantage in search engine optimization, as you can get more organic traffic with a properly optimized website. Today, it is almost impossible to get into the ball with websites that are slipping apart or unreadable on mobile and tablets.
Faster is better, or why loading speed is important
The user experience is also improved by the speed of the website. Even if you have a website with great-looking, exciting features, you can keep interested in waiting when you open it. Many users leave a page before it is fully loaded if they find the process too long. For mobile users, this is often the case, as often slow mobile nets and weaker hardware put a shovel on the load time.
The speed of the website can depend on many things, first, you should analyze the performance of the website, which you can do with Google’s free speedometer tool: https://developers.google.com/speed/pagespeed/insights/?hl=HU
A slow hosting provider or an overloaded server can do a lot of damage to your business, but of course, you don’t have to rush to the service provider immediately if the load speed is slow. There’s a lot you can do to reduce the load time of your website, so it’s a good idea to review the elements that slow down your website first.
Images and videos can add very long seconds to the load time, so it’s a good idea to treat them in the ins and apply only those that are really necessary. You can design a nice UI with a few, small images, and the white surface is no enemy.
Of course, there are exceptions, such as for photo or graphic portfolio pages, you should use visual content in the best possible format for full presentation, but even if you optimize the dimensions first. That is, you set the resolution of the images to the same size as they will appear on the website. Even if the image is full HD, if it appears only as part of a small block, it will slow down the web page unread suffocatingly. It’s always a good idea to do this, no matter what website you’re planning, and you can also save on file size with fine image comms.
For example, the following two free online image unitaskers are perfectly fit for the purpose:
For videos, it is easiest to use embedded ones in several ways, e.g. Youtube and Vimeo. You’re also saving storage, and these video sharing sites compress files pretty well, so they load faster than uploading them to your storage with FTP. In addition, it’s easier for others to find your movies, even if they didn’t know your website before if you make them public.
Speed also counts in search engine optimization, which is why you should pay attention to the user experience.
Less is more: make your website transparent
The design field is a perpetrated rule that less (usually) is more. This can be used in the same way, e.g. in the design of a new car and in the construction of UI surfaces. This is not the same as minimalism, you do not have to strive at all to display as few things as possible. Instead, it represents the view that it is worth weeding out all unnecessary things during planning. If you can’t explain why that particular object is there, what it’s for, then it probably doesn’t really make sense for it to be there.
For example, consider forms where you should only ask fill-ins for information that you really need. The more things you need to enter, the fewer users will be willing to fill in.
In some cases, a very long-form is unavoidable, for example when ordering from a webshop. In this case, it is worth splitting the whole thing into several parts and showing the filler only certain parts at a time. This makes the filling process less lengthy and more transparent, as only a few details need to be provided at a time. Plus, if the data is automatically saved during the filling out process, and users who leave the form can return to the same place later.
As we wrote, this approach is not about minimalism, so you should not go over the other side of the horse. The page will not be transparent because we show the user as few things as possible. A good example is the hamburger icon menu, which is a great navigation tool for mobile, but it is very rarely justified to use on a desktop screen. Its small size makes it harder to find on a larger surface, and if the menu fits in text, why force the user to click one more?!
Is it about the size? That is, why proportions and layout are important
It doesn’t matter what size each object appears on the web page, but that doesn’t mean that if something is important, it should be bigger than anything else. Proportions can help your eyes navigate, but other tools like layout, colors, contrasts, and typography can also help.
Some items, such as ads, pop-ups, or CTA, may be annoying to the user. It’s a good idea to keep them as low-key as possible.
In Western culture, we read from left to right, so it is preferred to arrange the website in F form. That is, as much as possible to focus the relevant objects on the above and left areas. For example, this is why the logo placement on the top of the page to the left has become fashionable so that the user’s gaze quickly meets it. Therefore, you can use this principle when you want to highlight something without changing its size.
For example, ads can help you maintain a news website, but if half the page is covered, it can easily turn around. Make sure that the page is transparent with your ads and doesn’t interfere with your carefree browsing. Often, a website also deploys full-page ads to get users to click. It’s an extreme case, most of it’s seen in online newspapers and blogs. If you’re using this, make sure that it’s clear to the user how to leave the ad. Otherwise, he won’t even look at the merits of your Page and choose to quit.
Pop-ups can hurt a lot, even if their app is important. Try to use as little as possible and position it according to importance. Less important, such as pop-up evaluation mini forms, should be placed in a small size in the lower-right corner. If something is important, of course, it will be in the middle. The GDPR acceptance window should not be too large, as it can be unpleasant for a new visitor if they cannot see most of the page before it is accepted.
For buttons, there are several ways to easily notice the user without being the size of the title text. Even the contrasting background color can make it quite striking, but if you really want to spice it up enough, you can apply an animation to it.
In general, we advise you to think about a system for designing a website. Irrelevant details can’t override the big picture: it doesn’t make much of a good thing by “jumping off the screen.”
It’s not just the text that’s internal, it’s the outside that counts.
The appearance of text on the Web is as important as its content. A professional website is not a quick-fold office Word document that only a few colleagues will quickly review, but an interface that will be thoroughly viewed by a multitude of people. For this reason, the appearance of the text is also important, not only the aesthetic quality of images, icons, and videos matters.
The first step is to select font/typeface, i.e. font. A website is worth using up to 2-3 different types of fonts, but in most cases, a font family is enough. It’s easiest to choose from Google Fonts fonts: they’re free and easy to integrate.
On the Web, it is primarily worth using console fonts, as they give a more modern look, but this is not a rule set in stone. You can experiment with advanced web designers with footed letters as well. What’s important, though, is that you don’t use a very creative, hard-to-read font family as body text. In the case of long texts, the most important thing is not to show what an exciting pound you have found, but to make the text as easy to read as possible for anyone.
Some fonts are available on Google Fonts, which are always available for body texts:
- Montserrat
- Roboto,
- Poppins
- Titillium Web,
- Lato
If you’re over the font and you’re uploading your wording, here are some things to keep in check:
- Logically define headings: Apply only one of H1, preferably at the top of the page, and adjust the dimensions in order. So if the H1 is 42px in size, then H2 should be, say, 36px, H3 28px, and so on.
- The body text size should not be too large or too small, the most common size you can use at any time is 16px.
- Keep the text in paragraphs for better readability.
- It’s a good idea to close long text to the left almost always, and center only titles and short text, such as captions.
- You may want to avoid the out-of-line option on the web. Without proper fragmentation, the blocked content looks bad. And websites are almost impossible to fragment because of the responsive look.
- You can use colors on letters, but you should only highlight them, such as titles, subtitles, or links.
What to look out for when updating your website
You should always use caution to update your website. Make a backup of the page before making the change. Murphy’s law is also true in the online space: what can go wrong also goes wrong. Even if you’ve looked at everything before, everything has been carefully planned, it could still be that some speck of dust falls into the machine, a few lines of code or plugins can ruin the whole thing.
If your website is already basically working well, you just want to patch up a few shortcomings or complete it with something new, it’s a good idea not to take a 180-degree change of direction during the design. Users don’t really like things that are familiar to change and can’t find a feature or content.
You’d better take small steps and rebuild the website slowly. For big websites like Facebook, Google, Youtube, they’ve all been doing it that way for a while. Even if you’re making big changes, keep an eye on communication, give returning users instructions on how to make changes. You can do this for minor but important changes by adding a new feature to your website. For example, if your webshop introduces a new payment method, you can use a small highlighted message on the shopping cart page to let users know.
Finally, keep in mind that your website doesn’t have to meet your needs or your friends’ sense of beauty in the first place, but rather your visitors or customers.
If you’re not enough and want to learn more about UI and UX design, you can find great advice and tips in the articles and books below:
