Let’s start from a common situation when the form to fill in is enormously big, which makes developers and users want to die.
The triсk is very simple. You have to split the form on two logically related blocks. Personal information in one block, information about an account in another block, and so on ad infinitum, depending on how long the form is to be done.
It works almost according to the same principle, but the relationship may seem less obvious. However, generally speaking this is just a super-cool design feature. Сlient doesn’t like a business card? Voila! He likes it with the one-pixel line. Does the text on the banner look boring? Once again, the line makes it look different. Well, when you have to split some information from each other, of course, the line will help you in this overpowering mission.
The mini-lifehack! The form would be easier to comprehend if you align the labels not to the center of the form, but at the same time apply the principle of "group similar" to them. Well, of course, it would be great not to forget about examples in placeholders. This is a manifestation of concern about users.
Group similar (more!)
Nightmare selectionsThis is actually a painful topic. You need to offer a user to select necessary information. Nonetheless, it would be great to do this in a less painful way, isn’t it? There is one awesome solution for this issue, which is currently used even in Lightning, which is a horizontal select. Usually it works in case if there are no more than five options. Anyway, it's worth it.
When the life forces you to use a drop down, there is still a possibility to simplify user’s life. As regards other input fields, you may use the same method when doing a design. What about a field for a “city”? For instance, you may offer a user to choose the capital of the selected country. At the same time this placeholder will be the most advantageous in this case.
At my previous job I had a very gifted trainee, who made a banner of “incredible beauty” when I was absent. After this incident, a very capacious expression "crazy carnival" appeared in our everyday life. You can only imagine how awful this banner was.
In fact, everything is very simple, there is just one important element, the rest is only complementary. Only one catchy and colored element should be illustrated, the rest is ... less flashy.
Color accents quickly help to understand information or realise what kind of action is required at the moment, which, accordingly, reduces the cognitive stress. This would be very useful especially at our complex, oversaturated with information era.
Here is another example of color hierarchy which shows how without reducing the font and making something LARGE or BOLD, highlight elements or make them secondary instead.
How to make a table look awesome and not to die in agony
First of all, in order to get rid of torment, it is very necessary to remember that secondary elements can be represented in a lighter style, and it won’t be an eyesore anymore.And, of course, you do not have to do alignment throughout the table. Some columns are more readable with alignment to the side. You can see from this example, names of employees are aligned to the left side. Sometimes reading and comprehending with the right alignment is more convenient. For example, if you skim through the column with sums, then in the second example it's much easier to distinguish the smallest or the biggest amount.
“Dates” can also be made easier for perception, if you make them look decent. And if they are responsible for different sort of information, you should also consider and reflect this - as in the example, one of the dates is a deadline, and the other is the date of adding a record. When they look the same, you have to think about each line, comparing and picking out the information. This obviously slows down the process of reading the table, and shortens the life of users. Of course, you can use this knowledge if you hate people.
Well, the cherry on top, is the carnival itself ... you should refuse using it with no regrets, leaving the interaction only on the required line.
That’s it! Now you can consider yourself as a guru of UI/UX design. However… there is something more…
Same type buttons
Let’s imagine that we have an interface. In this interface, users can register, make an order, send a request or whatever.
And after all, there is only one button "send" for all these purposes. This is bad... Yes, indeed, it's bad. But you always can do it well. You just have to tell user what will happen next. What will he achieve by clicking on this button? What can he expect from filling out the form? He may create his account in a database. That's what we put in our UI. You do not have to think up anything at all, unless you are a copywriter, and you generate the coolest micro-texts that increase the conversion of the button by 300%.
I do not know what about you, but I am not that kind of copywriter. Therefore, I use the simple method I’ve just described.A solution in the Apple style
The problem is that in the built-in text editor on Mac, the toolbar usually does not fit into the screen in width. And the brilliant solution is ... not to consider this a problem.
Very often during development process we spend a lot of time thinking about some details, which in fact can be insignificant. Therefore, facing these problems and the necessity to provide some special solution for them, it is worthwhile first to see what will happen if nothing to do about it. Nonetheless, it helps to get rid of unnecessary stress. In addition, almost all the time it actually works. Well… at least for Apple.
As regards Empty States, you may check it here.