The main style is clear, vibrant and modern
Interfaces for children, as well as for adults, should be clear. On the educational platform, nothing should distract from the main occupation – learning. Therefore, the basis of the Uchi.ru style is flat design with the minimum required level of detail of objects and clean geometric shapes.
The same illustration five years ago and now. Outlines are clearer and colors are richer.
Flat design emerged in the 80s and became popular again in the 2010s. Forty years ago, flat design was constrained by technical constraints: it was then impossible to display shadows and gradients. Today, the flat looks modern, while not drawing attention to itself. The user focuses not on the graphics, but on what it frames – the educational process.
We try to make the appearance of Uchi.ru light, juicy and relevant. We use light saturated shades, keep the balance of color and white background, monitor the contrast. All this helps children to clearly distinguish the boundaries of interface elements and intuitively separate them from each other.
Good and bad contrast
Entertainment element: universe of characters
It is important to speak with the child in his language. Research The Nielsen Norman Group showed that children come to the Internet primarily for entertainment. We take this into account and come up with a shell for the educational core – a world in which children are interested in studying. The basis of the world of Uchi.ru is the universe of dinosaurs.
Drawing of a student of the Tyumen school
Mascot Uchi.ru – the dinosaur Grisha – appeared in 2015 and immediately fell in love with children. Gradually, he has acquired relatives and friends – the universe of dinosaurs continues to grow. Characters don’t just decorate interfaces and tasks – they help to establish contact with children. The stories that happen to Grisha involve students and facilitate the learning process, and we are inspired to new ideas.
Children perceive the dinosaur as an authority and their hero. It helps us a lot to speak the same language with our users. We receive several hundred letters from children every year. The guys draw Grisha, tell him about their academic success, come up with new stories.
Stages of developing the image of Grisha
But middle and high school students are no longer so interested in the dinosaur universe: it seems too childish to them. Instead, students in grades 5-11 are accompanied on the platform by teenage characters and superheroes who look big and cool.
High School Superhero Characters
Size matters: fonts, buttons, text size
Children perceive interfaces differently than adults. This is especially true for the text.
- Children 3–5 years old cannot read a single word yet and treat words like pictures.
- Children 6-8 years old read slowly. And the younger they are, the more likely they are to do it syllabically. For elementary school students, it is important that the text on the screen is large so the words are easier to read.
- Children aged 9-12 read faster, but still poorly. A child can master the skill of scanning text only by the age of 13-14.
We have developed several rules that help to take into account the peculiarities of children’s reading style:
- We make sure that the text of our interfaces is large, at least 16px in height.
- There shouldn’t be a lot of text. It is better if there is only one word.
- Good buttons are large and contrasting. They should be at least 30px in height, and the clickable area should be much larger than the button itself.
An example of a student’s personal account
- Recognizing the power of habit: make buttons of the expected shape, place them in predictable places.
Ilya Birman. User interface (2017)
Designers come up with what to write on a button or what to draw on a pictogram to make the interface more convenient and understandable. But those who understand the power of habits know how the interface actually works. Oftentimes, specific text or pictures don’t matter. With the formation of a habit, individual, conscious actions are combined into indivisible and automatic ones. Movements are performed by themselves, consciousness is free for another.
Users click on some buttons without reading what is written on them. So children press the button to start the game on a smartphone, and adults automatically confirm the deletion of files.
Therefore, it is important for us to maintain the unity of the appearance and location of the buttons. For example, the end task button is always at the bottom center, and there are no other buttons around. The exit button can always be found at the top left, the exit button to the previous screen is in the same place in all platform interfaces.
The quest exit is always located in the upper corner. Moving to the next – in the center at the bottom of the screen.
- Do not put more than one next step button per page. It should be clear to the student what to do on each screen – we emphasize the target action with the color and size of the button.
Several bright buttons of the same type offer to perform the same type of actions, for example, download all diplomas and certificates one after another. This example is far from an exception, because text links and icon buttons are poorly understood by children. The button must be a button.
If there are several such buttons, select the most priority or popular one. If it is brighter than the others, the child will recognize it faster.
These rules make it possible to take into account all users: children with poor eyesight, and preschoolers, and those who have little experience of interacting with a computer or those who do not yet understand, for example, that you can click on a link in the text.
Children use mouse and keyboard differently
While for an adult the task of typing a word is a matter of seconds, for a child it may take up to a minute or more. The younger the child, the worse the fine motor skills of his hands are developed and the more painful it is for him to move the cursor around the screen, click on small buttons and links.
We tried to take all this into account in the first screen – when entering the site.
- The password is visible during the introduction and until the child clicks “Enter”. Children are slow to type, so if the password is hidden behind asterisks, they may forget which characters they have already entered and which ones need to be added.
- Logins and passwords are short and clear. The passwords that the platform generates consist of words that children already know and a few numbers. If children from the same class are registered on the platform by a teacher, they will have the same login – the school number. This will make it easier to remember.
- The text in the input remains centered. Many children perceive input boxes as buttons and click on them in the center. To prevent the child from losing sight of the entered characters, we left them in the middle of the field. The logins and passwords of adults are bounced along the left margin.
- When entering a username and password, it is not necessary to switch to the desired keyboard layout. The interface automatically substitutes the letters of the Russian alphabet on the same keys. After all, it is so offensive to see gibberish instead of a login and password if you diligently typed them for three minutes.
An example of a login form on Uchi.ru
Attention is gold: no obstacles in the user’s path
Buttons look like buttons
Children, unlike adults, learn more about websites and apps. Children under the age of ten are more likely to try a non-standard action. For example, clicking on objects that look like buttons or icons, clicking on them over and over again, expecting that the n-th time will lead to a new result. Adults are more likely to generalize experiences from one or two trials. Therefore, in children’s interfaces it is so important to make buttons in the form of buttons, and the rest of the elements – to be as different as possible.
Waiting is excruciating
Adults don’t like long loading times. Children don’t love her even more! If after clicking on the screen nothing happens for a whole second, the child will become annoyed and continue to click. Even 800ms, during which the animation lasts, seems too long for children.
The fewer screens between content, the better
The main simplified purpose of the interface of the educational platform is to immerse the child in solving problems. In between the cards, the child sees notifications about success or failure, gets into the interface of his personal account, where he can go to other subjects or continue the solution.
Over time, there were more competitive mechanics on the platform, along with the increase in the number of alerts. This is how the child’s path between the cards could look like, if we continued to communicate all the information without exception:
Such a long journey would inevitably cause a churn of users, so between tasks we show only one screen with a single “Decide Next” button:
About optional – honestly
Give the children the choice to take or not take additional but optional activities.
Details – under the cut
Details and details shouldn’t distract from the main action, so they don’t belong on the main screen.
Children don’t read
In the first seconds, adults will see this screen like this:
And a second grade student like this:
This feature must be taken into account and used for your own purposes. So, a screen with a lot of small text will force the child to call an adult to the screen.
Small print and a complex example turn off children’s attention, but draw their parents to the screen.
In many ways, interfaces for children are similar to interfaces for adults. At the same time, there are features that are easy to take into account. Through trial and error, we have identified principles for ourselves:
- Maintain the balance of color and white background, monitor contrast.
- Immerse the student in a fantasy world – this way the material is easier to learn.
- Large labels are easier to read.
- No long texts.
- The buttons are large and in predictable places.
- Place no more than one targeted action on one page. If there are several of them, highlight the most important.
- Login should be as simple as possible.
- Do not force children to type.
- Buttons are like buttons, all other elements should look as unclickable as possible.
- Don’t keep the kids waiting.
- Be honest. Especially with children.
- Leave only the important. Unimportant to place under cat.