優れたユーザーインターフェイスを作成するのがなぜそんなに難しいのですか？
Mark Millerの記事の翻訳： Great UIを達成するのが難しいのはなぜですか？
今朝、ガソリンで車に燃料を補給していたとき、 ほとんどのユーザーインターフェイスが優れたインターフェイスの3つの主要な指標である明確性 、 効率性 、発見可能 性を 満たさないという別の証拠に突然衝撃を受けました。
私たちの周りの物理的な世界で発生する最も一般的なエラーの1つは、 同じ周波数で押されるかのようにデバイスにあるボタンです。 これはすぐに判断できます。そのようなボタンは同じサイズであり、場合によっては他のボタンよりも頻繁に押す必要があるボタンが最も小さく、手の届きにくい場所にあります。
ボタンに戻って、ガソリンスタンドで今日見たインターフェイスの一部を次に示します。
左側にある燃料ポンプボタンを使用すると、米国で最も人気のあるガソリングレードを選択できます。 右側にあるのは、人気が低く高価なガソリンを選択するためのボタンです。 左側の浸食は、ボタンを押す頻度と場所の指標と見なすことができます。 左側のボタンをクリックした人が、彼らが提供しているPush Hereエリアよりも大きなボタンを見たいと思っていることは明らかです。
このインターフェイスを変更してみましょうが、同時にその本質を保ちます：
変更点のリストを次に示します（このような変更の理由については、今後の記事で説明します）。
したがって、一部のボタンが他のボタンよりも頻繁に押されるという明確な証拠があります。 同時に、そのようなインターフェースの作成者はこの事実をほとんど知らなかったと結論付けることができます。
私のお気に入りの大きなボタンの1つは、最新のコンピューターキーボードのスペースバーです。 もちろん、このキーの位置とサイズは、古いタイプライターの時代に由来します。 残念ながら、現在普及しているQWERTY構成は、最も一般的に使用されるキーがキーボードの届きにくい領域に配置されているため、完全とはほど遠いものです。 これは、最初からQWERTY以前のキー構成のタイプライターを使用していた人々が非常に速く動作するため、タイプライター間でタイプされたレバーが詰まることが多かったためです。
1874年に会議に出席したいという希望を表明することはできません。 この決定だけでも、生産性の損失という点でこれまでで最も費用のかかるユーザーインターフェイスの設計エラーと見なされます。
それでも、スペースバーは生き残りました。それは大きく、親指で押すのは簡単です。 そして、私はこのキーが本当に好きです。
右側の交差点に行く必要があると想像してください 。 どっちがいい？
デザイナーのアイデアは左側に赤で強調表示されます。 右側には、より効果的なパスが青で示されています。
私たちは、人々がより良いアスファルトではなく効率を選択するという証拠に取り組んでいます。
あなたはテレビを見ています。 チャンネルを切り替えて、音量を変更する必要があります。 どのリモコンを手にしたいですか？
ボリュームを変更するには、どのリモコンを選択しますか？
右側の白いリモコンでは、上部のチャンネル切り替えボタンが、右下にある音量ボタンから離れすぎています。
また、これらの水平方向と垂直方向には一貫性がなく、慣れるにはある程度のメンタルトレーニングが必要です。 さらに、これらのボタンの視覚的な重み （形状、サイズ、コントラスト）は、このリモコンのほとんどすべての他のコントロールと同じです。これには、 言語と時計のマークがめったに押されないキーも含まれます。
シアトル空港のNターミナルエレベーターにいます。 飛行機に乗る必要があります。 エレベーターには行き先を選択するための3つのボタンがあります。
どのキーを押しますか？ アスタリスクの反対側にあるRAMPボタンは非常に魅力的に見えます。 最後に、飛行機に乗るにはランプを下る必要があります 。 また、エレベーターのボタンに使用されている星は、メインフロアまたはホールを示していますか？ そして、なぜコンコース（空港のメインホール）が必要なのでしょうか？ ターミナル内にあるはずの着陸ゲートに行く必要があります。
このエレベータコントロールパネルのより完全な写真を次に示します。
明らかに、RAMPレベル（乗客がなりたくない隠れた中間レベル）とCONCOURSEレベル（飛行機に搭乗できるレベル）の間には多くの不確実性がありました。 おそらくこの理由から、コンピュータープログラムで一般的に使用されるツールチップの物理的な同等物が追加されています。 もちろん、そのような手がかりは、 * Rとマークされた床に群がる可能性が高い視覚障害者には完全に見えません。
これは、私たちの周りのもの（コンピュータープログラムを含む）の設計者が重要な問題に注意を払っていないことのもう1つの証拠です。
元の問題に戻りましょう。 優れたユーザーインターフェイスを作成するのが難しいのはなぜですか？ 最終的な答えはいくつかの要因に影響されますが、最も重要な要因はトレーニングのレベルだと思います。 人々のためのインターフェースを作成するほとんどの開発者やデザイナーは、通常よりもはるかに優れたインターフェースを作成するのに役立つような知識を一滴も所有していないように思えます。
この違いがどれほど大きいか尋ねますか？ さて、まずは、今朝ガソリンを買ったガソリンスタンドに戻りましょう。 クレジットカードを使用した後、画面に次のメッセージが表示されました。
「これはデビットカードですか？」
もちろん、この質問に答えるまで操作を続けることはできません。 まあ、私は実際に借方ではなくクレジットカードを使用しているので、答えはノーであることがわかります。 しかし、その瞬間に、この答えをコンピューターにどのように伝えるべきかははっきりしませんでした。
それで、次の瞬間、数字キーパッドを調べるために見下ろします。 半ダースのキーの名前を読んだ後、キーボードの右下に「はい」と「いいえ」のキーがあります（実際に参照しているメッセージからはるかに離れています）。
質問 （たとえば、「デビットカード」）が燃料補給から燃料補給に変わることも言及する必要があります-コンピューターがクレジットカードを使用しているかどうかを知りたい場合があります。
今回は質問がデビットカードであることが判明したため、[ いいえ ]ボタンを押して上の画面を見て、今すぐ給油できるかどうかを確認しました。
これらすべては、例外なく、クレジットカードを使用するたびに私の人生の約10秒を 食い尽くします。 そして、これはガソリンスタンドだけでなく、食料品店や支払いが必要な他の場所でも行われます。 私が売り手にお金を払おうとするたびに、彼らはただ私を遅くしようとします。 これは彼らにとって有利なことでも、私の利益でもありません。
不十分に設計されたユーザーインターフェイスは、経済に摩擦力として作用します。 費用はいくらですか？ さて、これらの10秒に、これらすべてのコンピューターで毎日処理される数百万のトランザクションを掛けることから始めましょう。そうすれば、膨大な時間の無駄がわかります。 今回に人々の平均給与を掛けると、そのような決定の価格が得られます。
では、なぜこのデビットカードの質問に悩まされるのでしょうか？ 個人的には、デビットカードを携帯していません。 私にとって、答えはいつも同じです。 質問がコンピューターごとに変わらない場合、同じことです。 そしてもちろん、私たちはコンピューターが自分のカード（ガソリンスタンド、銀行など）で自分のカードがどのカテゴリーに属しているかを特定できる世界に住んでいます。
そのため、私たちの周りでは低品質のユーザーインターフェイスが非常に一般的です。その理由は、単にそのデザイナーのスキルの不足にある可能性があります。 理由は他の何かにあると考えているかもしれませんが。
このようなステートメントは簡単に確認できます。 この一連の記事を読み、必要なスキルを身に付け、優れたインターフェースを作成する能力がどれほど劇的に向上するかを見てください。
次の記事では、インターフェイスの「明確さ」の概念を検討します。
今朝、ガソリンで車に燃料を補給していたとき、 ほとんどのユーザーインターフェイスが優れたインターフェイスの3つの主要な指標である明確性 、 効率性 、発見可能 性を 満たさないという別の証拠に突然衝撃を受けました。
私たちの周りの物理的な世界で発生する最も一般的なエラーの1つは、 同じ周波数で押されるかのようにデバイスにあるボタンです。 これはすぐに判断できます。そのようなボタンは同じサイズであり、場合によっては他のボタンよりも頻繁に押す必要があるボタンが最も小さく、手の届きにくい場所にあります。
ボタンに戻って、ガソリンスタンドで今日見たインターフェイスの一部を次に示します。
左側にある燃料ポンプボタンを使用すると、米国で最も人気のあるガソリングレードを選択できます。 右側にあるのは、人気が低く高価なガソリンを選択するためのボタンです。 左側の浸食は、ボタンを押す頻度と場所の指標と見なすことができます。 左側のボタンをクリックした人が、彼らが提供しているPush Hereエリアよりも大きなボタンを見たいと思っていることは明らかです。
このインターフェイスを変更してみましょうが、同時にその本質を保ちます：
変更点のリストを次に示します（このような変更の理由については、今後の記事で説明します）。
- 「グレード選択」（グレード選択）は、ノイズの少ない「グレード選択」に変換されます。
- 「グレード選択」-下から不要な下線を削除しました。
- 余分なテキスト「グレード選択」を削除しました。
- 「グレード選択」というテキストのあるタブを削除しました。
- ボタンのサイズを大きくし、低コントラストの境界線を追加しました。
- 「Push Here」（「Click Here」）の碑文のコントラストを下げました。
- Regular 、 Plusテキスト、および背景のコントラストが向上しました。
したがって、一部のボタンが他のボタンよりも頻繁に押されるという明確な証拠があります。 同時に、そのようなインターフェースの作成者はこの事実をほとんど知らなかったと結論付けることができます。
私のお気に入りの大きなボタンの1つは、最新のコンピューターキーボードのスペースバーです。 もちろん、このキーの位置とサイズは、古いタイプライターの時代に由来します。 残念ながら、現在普及しているQWERTY構成は、最も一般的に使用されるキーがキーボードの届きにくい領域に配置されているため、完全とはほど遠いものです。 これは、最初からQWERTY以前のキー構成のタイプライターを使用していた人々が非常に速く動作するため、タイプライター間でタイプされたレバーが詰まることが多かったためです。
1874年に会議に出席したいという希望を表明することはできません。 この決定だけでも、生産性の損失という点でこれまでで最も費用のかかるユーザーインターフェイスの設計エラーと見なされます。
それでも、スペースバーは生き残りました。それは大きく、親指で押すのは簡単です。 そして、私はこのキーが本当に好きです。
いくつかの例
右側の交差点に行く必要があると想像してください 。 どっちがいい？
デザイナーのアイデアは左側に赤で強調表示されます。 右側には、より効果的なパスが青で示されています。
私たちは、人々がより良いアスファルトではなく効率を選択するという証拠に取り組んでいます。
あなたはテレビを見ています。 チャンネルを切り替えて、音量を変更する必要があります。 どのリモコンを手にしたいですか？
ボリュームを変更するには、どのリモコンを選択しますか？
右側の白いリモコンでは、上部のチャンネル切り替えボタンが、右下にある音量ボタンから離れすぎています。
また、これらの水平方向と垂直方向には一貫性がなく、慣れるにはある程度のメンタルトレーニングが必要です。 さらに、これらのボタンの視覚的な重み （形状、サイズ、コントラスト）は、このリモコンのほとんどすべての他のコントロールと同じです。これには、 言語と時計のマークがめったに押されないキーも含まれます。
シアトル空港のNターミナルエレベーターにいます。 飛行機に乗る必要があります。 エレベーターには行き先を選択するための3つのボタンがあります。
- コンコース（CC）
- ランプ（* R）
- 電車（TRN）
どのキーを押しますか？ アスタリスクの反対側にあるRAMPボタンは非常に魅力的に見えます。 最後に、飛行機に乗るにはランプを下る必要があります 。 また、エレベーターのボタンに使用されている星は、メインフロアまたはホールを示していますか？ そして、なぜコンコース（空港のメインホール）が必要なのでしょうか？ ターミナル内にあるはずの着陸ゲートに行く必要があります。
このエレベータコントロールパネルのより完全な写真を次に示します。
明らかに、RAMPレベル（乗客がなりたくない隠れた中間レベル）とCONCOURSEレベル（飛行機に搭乗できるレベル）の間には多くの不確実性がありました。 おそらくこの理由から、コンピュータープログラムで一般的に使用されるツールチップの物理的な同等物が追加されています。 もちろん、そのような手がかりは、 * Rとマークされた床に群がる可能性が高い視覚障害者には完全に見えません。
これは、私たちの周りのもの（コンピュータープログラムを含む）の設計者が重要な問題に注意を払っていないことのもう1つの証拠です。
元の問題に戻りましょう。 優れたユーザーインターフェイスを作成するのが難しいのはなぜですか？ 最終的な答えはいくつかの要因に影響されますが、最も重要な要因はトレーニングのレベルだと思います。 人々のためのインターフェースを作成するほとんどの開発者やデザイナーは、通常よりもはるかに優れたインターフェースを作成するのに役立つような知識を一滴も所有していないように思えます。
この違いがどれほど大きいか尋ねますか？ さて、まずは、今朝ガソリンを買ったガソリンスタンドに戻りましょう。 クレジットカードを使用した後、画面に次のメッセージが表示されました。
「これはデビットカードですか？」
もちろん、この質問に答えるまで操作を続けることはできません。 まあ、私は実際に借方ではなくクレジットカードを使用しているので、答えはノーであることがわかります。 しかし、その瞬間に、この答えをコンピューターにどのように伝えるべきかははっきりしませんでした。
それで、次の瞬間、数字キーパッドを調べるために見下ろします。 半ダースのキーの名前を読んだ後、キーボードの右下に「はい」と「いいえ」のキーがあります（実際に参照しているメッセージからはるかに離れています）。
質問 （たとえば、「デビットカード」）が燃料補給から燃料補給に変わることも言及する必要があります-コンピューターがクレジットカードを使用しているかどうかを知りたい場合があります。
今回は質問がデビットカードであることが判明したため、[ いいえ ]ボタンを押して上の画面を見て、今すぐ給油できるかどうかを確認しました。
これらすべては、例外なく、クレジットカードを使用するたびに私の人生の約10秒を 食い尽くします。 そして、これはガソリンスタンドだけでなく、食料品店や支払いが必要な他の場所でも行われます。 私が売り手にお金を払おうとするたびに、彼らはただ私を遅くしようとします。 これは彼らにとって有利なことでも、私の利益でもありません。
不十分に設計されたユーザーインターフェイスは、経済に摩擦力として作用します。 費用はいくらですか？ さて、これらの10秒に、これらすべてのコンピューターで毎日処理される数百万のトランザクションを掛けることから始めましょう。そうすれば、膨大な時間の無駄がわかります。 今回に人々の平均給与を掛けると、そのような決定の価格が得られます。
では、なぜこのデビットカードの質問に悩まされるのでしょうか？ 個人的には、デビットカードを携帯していません。 私にとって、答えはいつも同じです。 質問がコンピューターごとに変わらない場合、同じことです。 そしてもちろん、私たちはコンピューターが自分のカード（ガソリンスタンド、銀行など）で自分のカードがどのカテゴリーに属しているかを特定できる世界に住んでいます。
そのため、私たちの周りでは低品質のユーザーインターフェイスが非常に一般的です。その理由は、単にそのデザイナーのスキルの不足にある可能性があります。 理由は他の何かにあると考えているかもしれませんが。
このようなステートメントは簡単に確認できます。 この一連の記事を読み、必要なスキルを身に付け、優れたインターフェースを作成する能力がどれほど劇的に向上するかを見てください。
次の記事では、インターフェイスの「明確さ」の概念を検討します。
All Articles