🐇 👨🏻‍🏭 🔨 まだ読んでいない人のためのインターフェース。子供のUX-UI設計原則 ❓ ⤴️ 🗨️

ウェブ上での子供の行動は大人の行動とは異なります。子供たちは流暢に読むことができず、彼らの優れた運動能力はマウスとタッチパッドでの速いタイピングと器用さを妨げ、彼らはより焦り、そして彼らのユーザーの習慣はまだ形成されていません。製品デザイナーのLeonidLukinは、この記事で、子供向けプロジェクトのインターフェイスを設計し、大人のユーザーエクスペリエンスを向上させるのに役立ついくつかのルールを収集しました。

基本的なスタイルは明確で活気に満ちたモダンです

大人だけでなく子供のためのインターフェースも明確でなければなりません。教育プラットフォームでは、主な職業である学習の邪魔をするものは何もありません。したがって、Uchi.ruスタイルの基本は、オブジェクトの必要最小限の詳細レベルとクリーンな幾何学的形状を備えたフラットなデザインです。

5年前と今の同じイラスト。輪郭がより鮮明になり、色がより豊かになります。

フラットデザインは80年代に登場し、2010年代に再び人気を博しました。40年前、フラットなデザインは技術的な制限によって決定されていました。その後、影やグラデーションを表示することは不可能でした。今日、フラットはそれ自体に注意を向けることなく、モダンに見えます。ユーザーはグラフィックスではなく、それが構成するもの、つまり教育プロセスに焦点を合わせます。

Uchi.ruの外観を明るく、ジューシーで関連性のあるものにするよう努めています。私たちは明るい飽和色合いを使用し、色と白い背景のバランスを保ち、コントラストを監視します。これはすべて、子供たちがインターフェース要素の境界を明確に区別し、それらを直感的に互いに分離するのに役立ちます。

良いコントラストと悪いコントラスト

エンターテインメント要素：キャラクターの宇宙

あなたの子供と彼の言語で話すことが重要です。Nielsen Norman Groupの調査によると、子供たちは主に娯楽のためにインターネットにアクセスします。私たちはこれを考慮に入れて、教育の中核、つまり子供たちが勉強に興味を持っている世界の殻を考え出します。 Uchi.ruの世界の基本は恐竜の世界です。チューメン

学校の

マスコットUchi.ru（恐竜グリシャ）の学童の絵が2015年に登場し、すぐに子供たちに恋をしました。徐々に、彼は親戚や友人を獲得しました-恐竜の宇宙は成長し続けています。キャラクターはインターフェースやタスクを飾るだけでなく、子供たちとの接触を確立するのに役立ちます。グリシャに起こる物語は学生を巻き込み、学習プロセスを促進し、私たちは新しいアイデアに触発されます。

子供たちは恐竜を権威と彼らの英雄として認識します。ユーザーと同じ言語を話すことは私たちに大いに役立ちます。私たちは毎年子供たちから数百通の手紙を受け取ります。彼らはグリシャを描き、彼らの学業の成功について彼に話し、新しい物語を思いつきます。

グリシャのイメージを発展させる段階

しかし、中高生はもはや恐竜の世界にそれほど興味を持っていません。彼らには幼稚すぎるようです。代わりに、5年生から11年生の学生は、大きくてかっこいい10代のキャラクターとスーパーヒーローがプラットフォームに同行します。

高校のスーパーヒーローキャラクター

サイズの問題：フォント、ボタン、テキストサイズ

子供は大人とは異なるインターフェースを認識します。これは特にテキストに当てはまります。

3〜5歳の子供は、まだ1つの単語を読むことができず、単語を絵のように扱うことができません。
6〜8歳の子供はゆっくりと読みます。そして、彼らが若いほど、音節的にそれを行う可能性が高くなります。小学生の場合、画面上のテキストが大きく、単語が読みやすいようにすることが重要です。
9〜12歳の子供はより速く読みますが、それでも不十分です。子供は13〜14歳までにのみテキストをスキャンするスキルを習得できます。

私たちは、子供の読書スタイルの特性を考慮に入れるのに役立ついくつかのルールを開発しました。

インターフェイスのテキストが大きく、高さが少なくとも16pxであることを確認します。
たくさんのテキストがあるべきではありません。単語が1つしかない方がいいです。
良いボタンは大きくて対照的です。それらは少なくとも30pxの高さである必要があり、クリック可能な領域はボタン自体よりもはるかに大きい必要があります。

学生の個人アカウントの例
習慣の力を認識する：予想される形のボタンを作成し、予測可能な場所に配置します。

. (2017)

, , . , , , . . . , .

, , . , .

. , , . , .

. — .
next step button . , , — .

, , . — , -. .

, . , .

: , , , , , , .

子供はマウスとキーボードの使い方が異なります

大人の場合、単語を入力する作業は数秒ですが、子供にとっては、1分以上かかる場合があります。子供が若いほど、手の細かい運動能力が低下し、画面上でカーソルを動かしたり、小さなボタンやリンクをクリックしたりするのが苦痛になります。

最初の画面で、サイトに入るときにこれらすべてを考慮に入れようとしました。

パスワードは、紹介中および子供が「Enter」をクリックするまで表示されます。子供は入力が遅いため、パスワードがアスタリスクの後ろに隠れていると、すでに入力した文字と追加する必要のある文字を忘れてしまう可能性があります。
— . , , , , . , — . .
. . , . .
. . , .

.

注意は金です：ユーザーの経路に障害物はありません

ボタンはボタンのように見えます

子供は大人とは異なり、ウェブサイトやアプリについて詳しく学びます。10歳未満の子供は、標準外の行動を試みる可能性が高くなります。たとえば、ボタンやアイコンのように見えるオブジェクトをクリックし、それらを何度もクリックして、n回目が新しい結果につながることを期待します。大人は、1つまたは2つの試験からの経験を一般化する可能性が高くなります。したがって、子供のインターフェースでは、ボタンをボタンの形で作成し、残りの要素をできるだけボタンとは異なるものにすることが非常に重要です。

待つのは大変です

大人は長い読み込み時間が好きではありません。子供たちは彼女をさらに愛していません！画面をクリックした後、1秒間何も起こらない場合、子供はイライラしてクリックし続けます。アニメーションが続く800msでさえ、子供には長すぎるようです。

コンテンツ間の画面が少ないほど良い

教育プラットフォームのインターフェースの主な単純化された目的は、問題の解決に子供を没頭させることです。カードの間に、子供は成功または失敗に関する通知を見て、自分の個人アカウントのインターフェイスに入り、そこで他の主題に移動したり、解決策を続行したりできます。

時間の経過とともに、アラートの数が増えるとともに、プラットフォームにはより競争力のあるメカニズムがありました。例外なくすべての情報を伝達し続けた場合、カード間の子供のパスは次のようになります。