The Essential UI (user-interface) web design tips

A website is a group of pages connected by links. It is an interface where a company or individual's web presence - meets, communicates, and influences each other. This interaction creates an experience for the visitor. As a web designer, your job is to ensure it is as good as it possibly can be. A web design company should have these expectations then it can succeed.

The important thing is to think first and always about your user.

Web design is a relatively new discipline. It owes much to the scientific study of human-computer interaction (HCI). These simple guidelines directly from HCI Research will help you to focus on your users while designing websites and applications.

Know your users

You need to know who your users are. This means knowing all the demographic data of your demographic app (s) can pull. But more importantly, what they need, and what is in the way of achieving their goals.

Careful analysis of statistics is needed to reach that level of empathy. It needs to know the people who use your website. This means talking face-to-face with them, watching them use your product, and asking them questions like, "What do you think about this design?"

What are their goals? What stands in their way to achieve those goals? How can a website work around those challenges or overcome them?

Do not stop knowing what your users want. Go deep and find out what they need. After all, desires are beyond needs. If you can address the deep-seated need of a user, then you will also address their desires while meeting more basic needs.

Analyzing data and talking with users will reveal the information you make, informing you of every decision you make, how people will use your interface to shed light on what kind of content in that interface.

Define how people use your interface

Before designing your interface, you need to define how people will use it. With the increasing proliferation of touch based devices, this is a more important concern than you think. 

People use websites and applications in two ways: directly and indirectly.

Examples of direct interactions

• Tapping a button
• Swiping a card
• Dragging and dropping an item with a fingertip

Examples of indirect interactions

• Pointing and clicking with a mouse
• Using key commands/shortcuts
• Typing into a form field
• Drawing on a Wacom tablet

Sometimes, an interaction is very easy.

Who your users are and what devices they use, you should give in-depth information about your decisions here. If you are designing for seniors or others with limited manual dexterity, you will not want to bend over swiping. If you are designing for writers or coders who interact with apps primarily through the keyboard, you want to support all common keyboard shortcuts to reduce the time you work with the mouse.

Set expectations

Many interactions with any site or app have consequences - clicking a button can mean spending money, erasing a website, etc. If there are consequences at any time, there are also concerns.

So before doing this make sure to tell the users what will happen after clicking that button. You can do this through design or copy.

Setting expectations with design

• Highlight button matching the desired action
• Using a widely understood symbol (such as a trash can for a delete button, a plus sign to add something or a magnifying glass for search) in conjunction with the copy.
• Choosing a color with a relevant meaning (green for "go" button, red for "stop")

Setting expectations with copy

• Write clear button copy
• Providing directional / encouraging copy in empty states
• To warn and ask for confirmation
• For actions with irreversible consequences, such as permanently removing something, it makes sense for people to ask if they are sure.

Anticipate mistakes

People make mistakes, but they should not (always) suffer the consequences. There are two ways to help reduce the impact of human error:

Prevent mistakes before they happen

Provide ways to fix them after they occur

You can see a lot of mistakes-prevention techniques in e-commerce and form design. The buttons remain inactive until you fill all fields. The forms indicate that an email address has not been entered properly. Pop-ups ask you if you really want to abandon your shopping cart.

Making mistakes is often more frustrating than trying to fix them after the fact. This is because they can complete the satisfactory meaning that comes with clicking the "Next" or "Submit" button. Sometimes you just have to let accidents happen. When detailed error messages actually occur automatically.

When you are writing error messages, make sure that they do two things:

Explain the problem

Explain how to fix it. 

Keep in mind that you can take a page from the same book for non-error situations. For example, if I delete something, but it is possible to restore it, let me tell you that "with a line of copy" you can always go to your trash and restore the deleted item and click on restore Are.

Give feedback—fast

In the real world, the environment gives us feedback. Usually, we speak and others respond.

Mostly, digital interfaces fail to deliver much. Let us leave wondering if we should reload the page, restart the laptop, or simply eject the nearest available window.

For example, MailChimp provides both feedback and encouragement when you send a schedule or email.

If a page will load in less than 5 seconds, a progress bar will not display, as it actually takes the loading time longer. Instead, use a visualization. If you use progress bars on your site, consider trying some visual tricks to speed up the load.

Think carefully about element placement and size

The closer and bigger something is, the faster you can place your cursor (or finger) on it. This clearly has all kinds of implications for interaction and user interface design techniques, but the three are the most important:

Buttons and other "click targets" are enough for easy viewing and clicking. This is particularly important with typography, menus, and other link lists, as insufficient space will leave people clicking the wrong link repeatedly.

Make the buttons bigger and more prominent for the most common actions.

Place navigation on the edges or corners of the screen. This may appear to be the final model, as it reduces the need for accuracy. The user does not have to worry about monitoring his click target.

When you are thinking about placing and resizing elements, always keep your interaction model in mind. If your site requires horizontal scrolling instead of vertical scrolling, then you will need to consider where, how, and why you want users of this unusual interaction type.

Don’t ignore standards

Being a highly creative type, designers love to recreate things - but this is not always the best idea.

Why? Because a familiar version or a new version of the interface adds "cognitive load". It lets people re-think about a process they have already learned. Obviously, you can reinforce all the wheels you want but only if it actually improves the design.

This rule of thumb explains why the menu bar of Google Docs has almost all the options of Microsoft Word before Vista:

Make your interface easy to learn

Whenever possible, limit the number of things a person needs to remember to use their interface efficiently and effectively. You can make it accessible by truncating the information into smaller digestible chunks.

All UI designers should make their interfaces as simple as possible. This can also mean masking the complexity of an application behind a simplified interface whenever possible.

Most people only do certain things in Word, such as typing while others can use it to do all kinds of things. But around the world, everyone opens the same version of Word with the same UI, which drops your average. They are overwhelmed by the variety of options they probably never use.

"Learn more" in links and buttons and similarly avoid using non-specific text. Because it doesn't tell users what they "learn more about". Often, people simply scan a page looking for a link and go where they want to go. And "learn more," repeated more times, it doesn't help. This is especially true for screen reader users.

Make decision-making simple

There is a lot of outcries on the web. "Banners" suddenly expand to become full screen ads. Modules pop up, allowing us to subscribe to blogs that you are not yet aware of. Video interstitials stop us in our tracks, forcing us to watch precious seconds.

Hicks Law gives us all the reasons to make one. The easier the result of this idea, the more options you offer to a user. The harder it becomes to decide for them.

It affects almost everything we make:

• Overall layouts
• Navigation menus
• Pricing pages
• Blog indexes
• Content feeds

Sometimes, you really want to slow down users and consider their options. This is why the designs of the tiles on Pinterest, Dribble and many blogs work really well. After all, the more choices you have to decide between, the more likely you are to find one that works for you.

Listen to the data

We all wish that our designs were evaluated purely on their artistic merit. The reality is that optimizing your design to meet its purpose is equally important.

However, user research and testing can be incredibly helpful in directing your design decisions towards meeting your site's goals. The data collected after launch remains invaluable.

So set up analytics for your website, and analyze them regularly. There are a bunch of different analytics tools, but I recommend Google Analytics / Mixpanel based on project type.

Mixpanel focuses on events, so it collects data based on the actions a visitor takes on your website. While Google Analytics is more practical, it gives you session time, traffic sources etc. Both devices can provide both forms of data. So choose whichever is most appropriate for your needs.