web-dev-qa-db-ja.com

8〜14歳向けのソフトウェアは、カラフルで「子供っぽい」ものにすべきですか。

コンピュータサイエンスの修士号の一環として、8〜14歳の子供向けの学習アプリケーションを開発しています。正式なUIデザインの背景は絶対にありません。以前は、直感的に思えたものに基づいてすべてのアプリケーションを作成していました。しかし、対象とする対象者が今では慣れ親しんでいるものとは大きく異なるため、周りを見回し始めました。

私が作成しているプログラムは、どういうわけか Scratch に似ています(ただし、汎用プログラミングではなく、データベースについてです)。 Scratchのコアデザインであるプログラミング言語は非常にカラフルです。これらの色が非常に明確な視覚的階層を形成していることがわかります。これは、プログラムフローのような抽象的なトピックを扱うときに明らかに役立ちます。 Screenshot of Scratch Blocks

しかし、それはスクラッチだけではありません。子供向けのもののほとんどは、私には少し奇妙に見えます。

それで、私は考えました。「誰もがこれをする」なら、私もアプリケーションでいくつかの明確な配色を使い始める必要がありますか?子供のために開発するときに従うことができる研究論文または一般的なベストプラクティスガイドは何ですか?これは修士論文の一部なので、引用できる正式なものが欲しいです。しかし、「なぜ子供向けアプリケーションをカラフルにすべきなのか」など、単にググリングするだけでは、それほど遠くに行かなかった。

以下は、私が投入した配色の大まかなドラフトです。「エラーは赤」を除いて、これらの色には、より深い意味はありません。

Screenshot of my project

65
Marcus Riemer

ここで説明した内容は「子供っぽく」カラフルではありません。色はさまざまな情報を表しています。色は装飾以上の意味を持っています。

スクラッチは、Sublime Text(および他の多くのコードエディター)と同様の方法で、要素の種類(変数、論理演算、フロー演算など)に従ってコードブロックを色分けします。

Coloured code in Sublime Text

これは確かに幼稚ではありません-これは賢明な情報管理です。コードブロックを除いて、残りのScratchインターフェースはほとんど落ち着いた灰色で、まったく「奇抜」ではありません。

「奇抜な配色」は、細心の注意を払って実行されることを条件に、おもちゃや本(視力の発達に関連している可能性がある)の経験に注意を向けてフィードしているという理由だけで、幼い子供を対象としたソフトウェアの最初の取り込みに役立ちます。赤ちゃん-より強い色は若い目で識別しやすくなります)。ただし、指定した年齢範囲(8〜14)は、年少の子供たちが大人の感性に影響を及ぼし始めている期間にも及びます。年長の子供たちは、(装飾的な意味で)鮮やかな色のソフトウェアを子供じみたものとして拒否し、より抑制され洗練された大人のスタイリングを好むかもしれません。

提案された配色は妥当なように見えますが、一部の明るい色はテキストを読みにくくする可能性があります( 色コントラストアナラ​​イザー で試してください)。あなたがあなたの色に一貫していて、あまりにも「奇抜」に向かわないなら、あなたは大丈夫です。

92
Andrew Martin

それらの色を少しトーンダウンします。画面上の色の影響の2つは生理学的であり、ユーザーの年齢とはまったく関係がありませんが、目の物理学とはすべて関係があります。

まず、すべての目が色収差に悩まされています。赤と青を同時に網膜に集中させることはできません。 (純粋な青色の背景に純粋な赤色のブロックを表示する場合、赤色のブロックは青色の前に距離を置いているように見えます)。これが、すべての背景をある程度パステルにすることをお勧めする理由です。純粋な色ではなく「色付きの白」です。パステルの量は、おそらく好みの問題です。子供たちは微妙に陰影を付けた白よりも明確な色を好むようです。ただし、純粋な色は避けてください。

第二に、目は色の間よりも暗い/明るい細部の識別がはるかに優れています。網膜には、錐体(カラーセンサー)よりもはるかに多くの桿体(モノクロビジョン用)があります。したがって、読みやすくするために、淡い色に暗い色(通常は黒)を付けます。 (あまり良くない、暗い場所では明るい。少なくとも良い色、対照的な異なる色の色)モックアップで最も目立たないのは、黒いラベルの付いた暗い青色の楕円形のボタンです。水色のパネル。

また、子供は大人よりも色覚異常を診断する可能性が高いので、すべての情報コンテンツがモノクロではっきりと見えるようにすることは、大人よりもおそらくさらに重要です。

9
nigel222

カラフル?はい、幼稚ですか?番号。色はデザインの中で非常に大きな位置を占めており、特にあらゆる種類のコーディングIDE他の回答で指摘されているように、色はユーザーに各Wordの機能が何であるかを示すのに役立ちます。明るい色はおそらく問題ありませんも使用しますが、モックアップから下の色をミュートします。白い背景のネオン色は、長すぎると少し見づらくなります。代わりに、太字の明るい色で同様のモックアップを試してください。ここに 配色で遊べるサイト

ただし、作業に使用する年齢範囲を覚えておいてください。あなたは主に10代前の子供と10代の若者に対応しているので、ソフトウェアを子供っぽく見せることは、あなたができる最悪のことの1つです。子供がもう自分が子供ではないことを証明しようとするのは、この年齢の頃です。未就学児向けに作成されたように見えるソフトウェアを用意することは、愚かで無意味、または彼らの下にいると彼らに思わせるための確実な方法の1つです。最初の例のデザインは、若すぎます。明るい色でもかまいませんが、ファンキーな形状や過度に膨らんだデザインは避けてください。インターフェースを使いやすくすることは、「楽しく」することよりも重要です。公立学校時代に使用していたプログラムがそれを忘れているかもしれません。

5
Kwuz

特に、赤を黒にしたり(代わりに白または黄色を使用)、暗い色の黒のテキストを使用したりしないでください。つまり、背景とのコントラストが強いテキストを使用します。

アンドリュー・マーティンは彼の答えで素晴らしいポイントを作りました:この年齢層の子供たちはより洗練された感性を発達させ始めています。しかし、どの年齢でも、明るい色を選択して使用する、より控えめなカラーパレットには、認知上の利点があります。たとえば、良い地図作成やグラフを見て、どの色がより効果的に色を使用するのに効果的かを考えてください。色のタイプが多すぎたり多すぎたりすると、まったく色がなくなるよりも悪くなったり悪くなったりします。

明るくて落ち着いた色、透明度、さまざまな線の太さやスタイルを使用して、構築手順を伝える方法を検討してください:

construction steps

明るい色のテキストは、単色のブロックと比較して数ピクセルを占めます。そのため、これらの色はテキストエディタで機能する可能性がありますが、彩度が低下しない限り、より多くの線量で圧倒される可能性があります。

4
Stonetip

私はこれをそこに捨てると思いました。

かなりの割合の人が色覚異常です。色は便利ですが、サイズ、アウトラインなども無視しないでください。

私は子供の頃の輪郭が本当に好きで、視覚的にそれが最も便利だと思いました。私にとって、カラーリングは忙しすぎます。

少なくとも色付けに何らかの意味を加えようと思います。

2
Tommy
  • 私の息子は、幼稚なUIとやり取りしながら、「これは屈辱的です!」とつぶやきました。彼は約6歳でした。
  • 子供の目は大人の目と変わりません。鮮やかなカラーパレットのデザインで、どのようなメリットがありますか?
  • カラフルな背景の上に置かれたテキストを読むには、より多くの労力が必要です。そのため、カラーのテキストを太字にする傾向があります。フォントエンジンは黒と白(アンチエイリアスのようなもの)に最適化されているようで、カラーテキストを最適にレンダリングしません。
  • テキストの色の変更は、フォントタイプの変更に似ています。目と脳は「再計算」する必要があるため、マルチフォントデザインの品質が低下します。これは、大人と同じかそれ以上ではない子供に影響を与える追加の認知負荷を意味します。
  • 非常に忙しい環境にさらされた子供たちは、不安のために気が狂う傾向があります。
  • 子供たちは大人として扱われることを望んでいます。完全ではないことは明らかですが、それがいつ発生するかを理解しています。
  • 最初の1年間に目にするカラフルな幼稚なUIの数が多いにもかかわらず、子供には美的な美意識があります。いくつかの恐ろしいおもちゃを含みます。

上記のすべての理由から、私は通常の(礼儀正しい)デザインを行い、主題に関連する装飾をいくつか行います。

1
Juan Lanus

他に方法がないのではないかと思います。本で物事をやりたい場合は、ユーザー調査を行うか、プロセス全体に精通している人に連絡する必要があります。そして、あなたはそうです。

子供を扱っているので、ユーザー調査は必ずしもお勧めしません。通常、ターゲットユーザーに関係なく、ユーザーリサーチは正しいことです。

ターゲットオーディエンスがどのように見えても、単純にターゲットオーディエンスにアプローチすることに関する節約の経験則などはありません。

これが、UXフィールド内の運用コンセプトの1つが「ペルソナ」である理由です。これは、ユーザーエクスペリエンスの開発におけるガイドラインとして機能する、ターゲットオーディエンスの架空の代表です。

Xペルソナの作成方法

ペルソナの作成

たとえば、アプリケーションが色覚異常の子供向けである場合、カラフルなデザインの不文律はまだ有効ですか?いいえ、すべてを変更します。

これは根本的な例に過ぎませんが、ターゲットオーディエンスには、成功または失敗を決定するわずかな変動があり、それらをより適切に制御できます。

1
Mircea