• 日本語
  • English
  • 中文
MENU
CREATE A PLATFORM FOR DIVERSITY
Web, Game, App, Illustration
https://monstar-lab.com/
Blog
2017/01/06
サービス企画者が抑えておきたいUIデザインの基礎知識

新規サービスを企画する際に「UXD(ユーザ-エクスペリエンスデザイン)」について学ばれる方も多いと思います。UXが語られる時に「UI(ユーザーインタフェース)」がセットになるケースが多いです。ユーザー調査から問題を特定し、その解決策としてのコンセプトを固めた後、スマホアプリやWebサービスでどのように実現するかを考える必要があります。それゆえ、UXを考えるプランナーやディレクターは、UIの基礎知識を習得したい方もいらっしゃるかと思います。今回は、特にUIの基礎概念について紹介していきたいと思います。

| お金はどちらにいれればいいの?

「UI」と聞くとスマホアプリなどデジタルのUIを想像される方も多いとは思いますが、何かしら達成したい目的への手段であるドアや電灯のスイッチも広義に捉えるとUIと言えます。ドアや電灯など、単純に見えるUIでもユーザーを惑わすことが多々あると考えらます。駅にある券売機のコイン投入口での事例を見てみましょう。
[図1]券売機のコイン投入口
コイン投入口中心にある棒をご覧になられた方もいらっしゃるかと思いますが、これはコインづまりを防ぐために設けられた仕掛けです。しかし、とある調査によると一部の利用者から「500円硬貨は右にいれるのですか、左にいれるのですか?」という質問が寄せられたそうです。

| 実行の淵と評価の淵に7つの落とし穴がある

コイン投入口のように、一見シンプルに感じられるUIも、コインづまりの役割を知らない人にとっては確かに戸惑いの原因になることも十分に考えられます。このように、簡単そうに見えるUI設計が意図しない戸惑いを与えてしまうことは、認知工学の生みの親であるノーマン氏が提唱された「ユーザー行為の7段階モデル」によって説明されます。
[図2] ノーマンのユーザー行為の7段階モデル図2 ユーザー行為の7段階モデル
ノーマン氏のモデルによると、ユーザーとコンピュータなどをつなげるUIには、ユーザーが目標を設定してから、それが達成されたかを評価するまでに7段階のステップがあり、それぞれは実行の淵、評価の淵にわけて考えられるとしています。先のコイン投入口のUIは、「500円を投入したい」という目標に対して、その実行さえも妨げているということから実行の淵を超えられなかったという結論になります。では、実行の淵をこえればユーザーは満足なのか?について、もうひとつ事例を見ていきたいと思います。

| 「読み込みボタン」は評価の淵において影の立役者

[図3] 読み込み中のUIデザイン例
図3 読み込み中のUIデザイン例

おそらくほとんどの方が、図3の「読み込み中」を目にされたことがあるかと思います。このUIは、完全に脇役のような存在かもしれませんが、実はユーザーの何かしらの実行が処理されたという合図を送る重要な役割を担っています。これがなければ、「もしかしてアプリがフリーズした?」や「(正しい操作をしたのに)何か間違えたかな。。」という誤認識を与えてしまいます。つまり、読み込み中のUIがあることにより、評価の淵においてユーザーの不安をやわらげることができます。

| 最後に

今回は、UIの基礎概念のひとつユーザー行為の7段階モデルを紹介しました。UIの世界は実に奥深いため学ぶべきことはまだまだありますが、その基礎であるこのモデルが常に達成できている状態を必ず作ることが必要であることを頭の片隅においてみてはいかがでしょうか。

Archives