We analyze the interface details-errors on the example of one bank client
The time has changed. Now alone you can write an application for millions of people. You do not need to think about hosting, distribution or scalability - the clouds will do everything for you.
Now one person can affect millions. This means that the greater the burden of responsibility for their own actions and for the quality produced. In the poor post-war years, the subway was made so pompous and "palace" not only for the sake of boasting, but for millions of ordinary people to develop taste every day.
It is worthwhile for some “Engry Birds” to write “2 birds”, and all the younger generation will incorrectly increase the end of the numerals (in fact, only ordinal numbers are increased: “2nd house”, “1st winner” , but "2 birds").
')
Therefore, any self-respecting client programmer should have read Taffe, Chihold, Ruskin and Milchin long ago. Even if you have a designer and editor in the company. Because sometimes he can carry nonsense (it all depends on the qualifications). Or, on the contrary, to correctly follow the guidelines and continue to develop the application in the same style.
Let's talk today about the attention to detail on one practical example (there will be a lot of pictures).
Yes, yes, no one forces you to be a good designer. Become, for starters, a good programmer. Learn to work with threads. After all, you know that never, under any scenario, you can not perform heavy tasks in the UI-stream.
No matter how functional your application is, if it is impossible to use it. Learn all about MVP (not a “presentation presenter”, but a minimum viable product) and tell your project managers about this if suddenly they still want to do a lot without thinking about quality at all. Know how to fight back and plan timelines correctly (so that you are not forced to work overtime).
Here is an example of opening credit card information (the quality is specially degraded to hide banking transactions). The application freezes for a few seconds and does not respond to any clicks while the operation history is loading. Moreover, when scrolling, it continues to slow down. As if this is not a bank client, but a simulator of the first brake versions of the “Android” for Apple’s phones.
Each platform has its own stylistic rules. You should not change the progress bar from right to left simply because you so wanted. There is, commonplace, common sense: everything that turns counterclockwise or goes left - slows down or makes a movement back.
Here it is worthwhile to carry out a certain excursion on the basic rules: Never Write Nothing in Russian from a Big Letter, unless you know exactly what you need to do (you can find out exactly from Chapter 3 of the Publisher and Author's Handbook ). English has its own rules, Russian has its own, and mixing them is just as stupid as speaking in Russian "I implement consulting e-mail" or refuse declensions (Internet from Megafon; by the way, never say "from" if Only this is not a postal package from your friends - you don’t say “BMW car”). It will be correct "Tinkoff credit systems." The question of how much (and, most importantly, by what miracle) in the Russian language are interconnected the words “Tinkoff” and “credit systems” are left on the conscience of marketers (who would now happily write “Russian Post,” not “Russian Post”) .
Writing so unnatural (not to mention the features of perception and difficulty of reading, where the eye clings to large letters), and often insanity does not pass: employees refuse to write nonsense (below the headers of two pages on the same site).
There are many books about letters and typography, but for a start, it will be enough for you to read this essay here . Later you can, if you wish, go deeper into Chikhold, Gordon, Pronenko, etc.
We explain the example below. By the way, in terms of the quality of the “About the Program” dialogue, one can often get a first idea of ​​the program as a whole.
Capital letters in shape all look like a square, so the eye sees fewer details for which you can "catch". The "big" letters have no detail. The text typed by them is much worse and slower to read ( read, read ).
Do you have a task to make an inscription unreadable? Now you know what to do. You can also mechanically narrow and get this:
How can I improve? Make the uppercase discharge 5–12%. Or, better yet, write lowercase.
Similarly with text alignment in width. Never do this, unless you arrange hyphens and manually remove the horse spaces between words. There is nothing wrong with left alignment (more precisely, this is your only option if there are no hyphenation).
Love and brush the text if you want to read it. Use the correct “quotes”, put spaces in “etc.”, find out about dashes (-), hyphens (-) and minuses (-). Better yet, read the first chapters of the Publisher and Author Handbook. Put typographic layout .
There are 2 errors here:
Plus, the love for “caps-loka” continues, which is completely unreadable in small letters (look at the “stucco” signatures of the 4 buttons at the bottom of the window).
Context and padding are generally strong. Here is an example:
It is necessary to add an indent between the text field and the subsequent title, as it will not be necessary to duplicate the name “Your e-mail” - “Your e-mail”.
Speaking of indents, do not do them where they will impede reading:
It would be much better to align the numbers along the “ruler” or along the left border, so that the eye would not need to “go” from one edge of the screen to the other. At the same time, we put a colon between the number of shares and the value, and also get rid of the renegade "In which participation was taken" - everything is bad here, starting from a passive pledge (participation is taken, and not (you) participated) and the whole phrase, before singling out into a separate a sentence (at a minimum, there should have been an ellipsis at the beginning).
Wrong indents or their complete absence look even worse:
Here it is worth saying that paid services, such as "debt insurance" are included without additional warning (there is no protection against accidental pressing).
Now remember the context. Do not push the functionality somewhere simply because you are too lazy to create a separate section suitable for the meaning of this functionality. Here is an example: the blocking of the card was placed in the lower part of the connected services section. If you didn’t specifically go into this section before, you would never know where to look.
Go ahead, about indents:
Regarding exchange rates: do not show zeros, if there is nothing besides them (32.5 is better than 32.5000). And do not leave trailing prepositions, as I did above (“remove to”) - transfer them to a new line, using an unbreakable space.
Never take legal texts in order to explain something in the interface. Otherwise, you will cause even more questions about what “nominated”, “prolongation”, “card account”, etc., are, as well as a bunch of words with capital letters and an “and / or” style. All this can be written “in Russian,” that is, it is understandable. I love the example from Bullshit to English .
To change the limit, you need to change the limit ... By the way, with limits - a separate problem, let's talk about this later.
And this is the text of the tips currency rates (on the move and can not be said).
Oh, this great Card Account, the only and unique Service Center and the most famous Internet bank - God forbid, write with a small letter.
As mentioned earlier, the endings are increased only by ordinal numbers (just to “2” read as “two”, and “2nd” - as “second”). Plus, the point suggests itself in front of an “example.”
Remember the load indicator at the beginning of the article, spinning in the opposite direction? Apparently, this is a trend:
If you have not noticed the trick in the order of intervals, I will show the standard behavior (first week, then month, quarter and year - not vice versa):
Separately, about designers and ordinary developers: it is clear that the spending schedule was done without looking at the rules.
Everything is good here:
- you are offered to transfer 290 rubles (see the text on the yellow button). Although, in fact, you transfer a zero, and the bank will eat 290 rubles of the commission;
- the bank (more precisely, the Bank with a capital letter) is ashamed of the commission, so he tries to justify himself and shove the blame onto another. As if “we are not against transferring without commission”, this is all the point of “Your tariff plan” is to blame. This is a classic example of false copywriting. In fact, there is no need to write anything at all, but simply to show the size of the commission;
- and, of course, you do not need to write 290.00, and 2.90, if you can write 290 and 2.9. Plus, we recall the quotes, the space after the percent and the comma as the decimal separator.
Always explain the advantages of the new functionality and do not forget to dispel fears. Here is an example:
What questions can a user ask?
Even worse, if you cause negative associations. Here is an example:
That is, in fact, there may be more harm than good. Instead of spending money, the client starts to have a headache, insomnia appears, hair falls out.
In fact, it was necessary to tell that even if the card was stolen, then for any operation it will be possible to return the money (to dispute within a month), except for those who entered a PIN code or a one-time SMS code. That is, do not worry dear user, the bank will help you in case of loss of the card. And the limit is in case you are a shopaholic.
Better yet, simply do not raise this topic and think about introducing this functionality several times.
The user may fairly not trust you and not allow the application access to geolocation. However, this does not mean that you can not download the map for about 20 seconds and try to get a location at the first entry (however, it may have been a problem with the 100-megabit Internet ;-)).
Do you know that in order to display information on another map, you need to swipe your finger over the name to the left? I have not known for several weeks. Moreover, if you click on the small triangle on the right, then nothing will happen (you just need to swipe in the direction of the name).
Here we return to the issue of context. What do you think will happen if you click on the "i" circle to the right of the debt and minimum payment data? Do you think that information about debts and ways to pay off the minimum payment will open? No, the information about the connected services on the map will open.
Speaking of debt: neither in the Internet Bank nor in the mobile bank, you will never know how much you have to pay on the loan so that interest will not accrue. They will tell you how much you owe at the end of the billing period and how much money you paid for (you are asked to make pens on the calculator). More precisely, there is a certain section in translations where you need to choose a debit and credit card, but a) this section was turned off for several months (called several times in support, asked to be returned), b) you just may not have a debit card. Respect users, not try to cheat them: deception will be remembered for a lifetime; Reputation is not returned.
Love users, do not be lazy to do well, appreciate the details. And check the rules if you don’t want everyone to write “simpotichny” in 10 years simply because it is written in your application with an audience of millions of users. Now, from you, and not from the Ministry of Education, a lot depends on the culture and literacy of the nation. Instill the taste and unwillingness to put up with second-rate products made anyhow.
Teach beauty, do not be that “director” who, in the 80s and 90s, bought a computer, flooded the market with trash and made an entire generation illiterate. Just because she believed that the Word saves her from knowing the rules of the Russian language, the services of editors, metranpagas and designers.
Continued.
Now one person can affect millions. This means that the greater the burden of responsibility for their own actions and for the quality produced. In the poor post-war years, the subway was made so pompous and "palace" not only for the sake of boasting, but for millions of ordinary people to develop taste every day.
It is worthwhile for some “Engry Birds” to write “2 birds”, and all the younger generation will incorrectly increase the end of the numerals (in fact, only ordinal numbers are increased: “2nd house”, “1st winner” , but "2 birds").
')
Therefore, any self-respecting client programmer should have read Taffe, Chihold, Ruskin and Milchin long ago. Even if you have a designer and editor in the company. Because sometimes he can carry nonsense (it all depends on the qualifications). Or, on the contrary, to correctly follow the guidelines and continue to develop the application in the same style.
Let's talk today about the attention to detail on one practical example (there will be a lot of pictures).
Be a good programmer
Yes, yes, no one forces you to be a good designer. Become, for starters, a good programmer. Learn to work with threads. After all, you know that never, under any scenario, you can not perform heavy tasks in the UI-stream.
No matter how functional your application is, if it is impossible to use it. Learn all about MVP (not a “presentation presenter”, but a minimum viable product) and tell your project managers about this if suddenly they still want to do a lot without thinking about quality at all. Know how to fight back and plan timelines correctly (so that you are not forced to work overtime).
Here is an example of opening credit card information (the quality is specially degraded to hide banking transactions). The application freezes for a few seconds and does not respond to any clicks while the operation history is loading. Moreover, when scrolling, it continues to slow down. As if this is not a bank client, but a simulator of the first brake versions of the “Android” for Apple’s phones.
Respect the platform, love the little things
Each platform has its own stylistic rules. You should not change the progress bar from right to left simply because you so wanted. There is, commonplace, common sense: everything that turns counterclockwise or goes left - slows down or makes a movement back.
Here it is worthwhile to carry out a certain excursion on the basic rules: Never Write Nothing in Russian from a Big Letter, unless you know exactly what you need to do (you can find out exactly from Chapter 3 of the Publisher and Author's Handbook ). English has its own rules, Russian has its own, and mixing them is just as stupid as speaking in Russian "I implement consulting e-mail" or refuse declensions (Internet from Megafon; by the way, never say "from" if Only this is not a postal package from your friends - you don’t say “BMW car”). It will be correct "Tinkoff credit systems." The question of how much (and, most importantly, by what miracle) in the Russian language are interconnected the words “Tinkoff” and “credit systems” are left on the conscience of marketers (who would now happily write “Russian Post,” not “Russian Post”) .
Writing so unnatural (not to mention the features of perception and difficulty of reading, where the eye clings to large letters), and often insanity does not pass: employees refuse to write nonsense (below the headers of two pages on the same site).
Love typography
There are many books about letters and typography, but for a start, it will be enough for you to read this essay here . Later you can, if you wish, go deeper into Chikhold, Gordon, Pronenko, etc.
We explain the example below. By the way, in terms of the quality of the “About the Program” dialogue, one can often get a first idea of ​​the program as a whole.
Capital letters in shape all look like a square, so the eye sees fewer details for which you can "catch". The "big" letters have no detail. The text typed by them is much worse and slower to read ( read, read ).
Do you have a task to make an inscription unreadable? Now you know what to do. You can also mechanically narrow and get this:
How can I improve? Make the uppercase discharge 5–12%. Or, better yet, write lowercase.
Similarly with text alignment in width. Never do this, unless you arrange hyphens and manually remove the horse spaces between words. There is nothing wrong with left alignment (more precisely, this is your only option if there are no hyphenation).
Love and brush the text if you want to read it. Use the correct “quotes”, put spaces in “etc.”, find out about dashes (-), hyphens (-) and minuses (-). Better yet, read the first chapters of the Publisher and Author Handbook. Put typographic layout .
Think about the user
There are 2 errors here:
- Context. It can be seen that the text on a gray background describes what is under it. Improper use of visualization led to the fact that 24 hours a day, you can send a message and not call. And when can I call?
- Give the opportunity to call by clicking on the plate numbers. However, they forgot about geography. I can go on vacation, but the application will still offer me to call through the eight, although in other countries the exit to the long-distance is completely different (plus, 8-800 may not work). A check with a change of location (through an American VPN) confirmed this conjecture.
Plus, the love for “caps-loka” continues, which is completely unreadable in small letters (look at the “stucco” signatures of the 4 buttons at the bottom of the window).
Context and padding are generally strong. Here is an example:
It is necessary to add an indent between the text field and the subsequent title, as it will not be necessary to duplicate the name “Your e-mail” - “Your e-mail”.
Speaking of indents, do not do them where they will impede reading:
It would be much better to align the numbers along the “ruler” or along the left border, so that the eye would not need to “go” from one edge of the screen to the other. At the same time, we put a colon between the number of shares and the value, and also get rid of the renegade "In which participation was taken" - everything is bad here, starting from a passive pledge (participation is taken, and not (you) participated) and the whole phrase, before singling out into a separate a sentence (at a minimum, there should have been an ellipsis at the beginning).
Wrong indents or their complete absence look even worse:
Here it is worth saying that paid services, such as "debt insurance" are included without additional warning (there is no protection against accidental pressing).
Now remember the context. Do not push the functionality somewhere simply because you are too lazy to create a separate section suitable for the meaning of this functionality. Here is an example: the blocking of the card was placed in the lower part of the connected services section. If you didn’t specifically go into this section before, you would never know where to look.
Go ahead, about indents:
Regarding exchange rates: do not show zeros, if there is nothing besides them (32.5 is better than 32.5000). And do not leave trailing prepositions, as I did above (“remove to”) - transfer them to a new line, using an unbreakable space.
Write clear texts
Never take legal texts in order to explain something in the interface. Otherwise, you will cause even more questions about what “nominated”, “prolongation”, “card account”, etc., are, as well as a bunch of words with capital letters and an “and / or” style. All this can be written “in Russian,” that is, it is understandable. I love the example from Bullshit to English .
To change the limit, you need to change the limit ... By the way, with limits - a separate problem, let's talk about this later.
And this is the text of the tips currency rates (on the move and can not be said).
Oh, this great Card Account, the only and unique Service Center and the most famous Internet bank - God forbid, write with a small letter.
As mentioned earlier, the endings are increased only by ordinal numbers (just to “2” read as “two”, and “2nd” - as “second”). Plus, the point suggests itself in front of an “example.”
Interface elements
Remember the load indicator at the beginning of the article, spinning in the opposite direction? Apparently, this is a trend:
If you have not noticed the trick in the order of intervals, I will show the standard behavior (first week, then month, quarter and year - not vice versa):
Separately, about designers and ordinary developers: it is clear that the spending schedule was done without looking at the rules.
Interaction Screens
Everything is good here:
- you are offered to transfer 290 rubles (see the text on the yellow button). Although, in fact, you transfer a zero, and the bank will eat 290 rubles of the commission;
- the bank (more precisely, the Bank with a capital letter) is ashamed of the commission, so he tries to justify himself and shove the blame onto another. As if “we are not against transferring without commission”, this is all the point of “Your tariff plan” is to blame. This is a classic example of false copywriting. In fact, there is no need to write anything at all, but simply to show the size of the commission;
- and, of course, you do not need to write 290.00, and 2.90, if you can write 290 and 2.9. Plus, we recall the quotes, the space after the percent and the comma as the decimal separator.
Danger of new functionality
Always explain the advantages of the new functionality and do not forget to dispel fears. Here is an example:
What questions can a user ask?
- Why do I need these limits?
- What happens if I run out the limit?
- Will I be reminded that the limit is coming to an end?
- Can I change the limit after setting it? How quickly will the changes be applied?
Even worse, if you cause negative associations. Here is an example:
- Does this mean that I have to set a limit because if a card is stolen from me (or I lose it), the set limit will help not to write off all funds from it?
- It turns out that I now can not spend money with the established limit, constantly not thinking about whether I have enough for the next purchase.
That is, in fact, there may be more harm than good. Instead of spending money, the client starts to have a headache, insomnia appears, hair falls out.
In fact, it was necessary to tell that even if the card was stolen, then for any operation it will be possible to return the money (to dispute within a month), except for those who entered a PIN code or a one-time SMS code. That is, do not worry dear user, the bank will help you in case of loss of the card. And the limit is in case you are a shopaholic.
Better yet, simply do not raise this topic and think about introducing this functionality several times.
Respect someone else's privacy
The user may fairly not trust you and not allow the application access to geolocation. However, this does not mean that you can not download the map for about 20 seconds and try to get a location at the first entry (however, it may have been a problem with the 100-megabit Internet ;-)).
Do not reinvent the wheel, or at least train it to use users.
Do you know that in order to display information on another map, you need to swipe your finger over the name to the left? I have not known for several weeks. Moreover, if you click on the small triangle on the right, then nothing will happen (you just need to swipe in the direction of the name).
Here we return to the issue of context. What do you think will happen if you click on the "i" circle to the right of the debt and minimum payment data? Do you think that information about debts and ways to pay off the minimum payment will open? No, the information about the connected services on the map will open.
Speaking of debt: neither in the Internet Bank nor in the mobile bank, you will never know how much you have to pay on the loan so that interest will not accrue. They will tell you how much you owe at the end of the billing period and how much money you paid for (you are asked to make pens on the calculator). More precisely, there is a certain section in translations where you need to choose a debit and credit card, but a) this section was turned off for several months (called several times in support, asked to be returned), b) you just may not have a debit card. Respect users, not try to cheat them: deception will be remembered for a lifetime; Reputation is not returned.
Kel resume?
Love users, do not be lazy to do well, appreciate the details. And check the rules if you don’t want everyone to write “simpotichny” in 10 years simply because it is written in your application with an audience of millions of users. Now, from you, and not from the Ministry of Education, a lot depends on the culture and literacy of the nation. Instill the taste and unwillingness to put up with second-rate products made anyhow.
Teach beauty, do not be that “director” who, in the 80s and 90s, bought a computer, flooded the market with trash and made an entire generation illiterate. Just because she believed that the Word saves her from knowing the rules of the Russian language, the services of editors, metranpagas and designers.
Continued.
Source: https://habr.com/ru/post/203432/
All Articles