「月刊ムー」のロゴがグッズになりました!

操作の壁と、結果を確かめる壁──使い方と結果が分かる画面へ|デザインの原則 #6

今回のテーマは、「操作の壁」と「結果を確かめる壁」です。「どう操作すればよいか」と「何が起き、目的に合ったか」を理解する難しさを分けて考えます。机の照明を点ける例で見ていきます。

初めて使う照明でスイッチが見つからなければ、明るくしたくても操作に進めません。点灯したあとも、本を読める明るさか確かめる必要があります。ふだん使う照明にも、操作と結果を伝えるUI/UXの考え方が働いています。

前回の行為の七段階──窓を開けることから、操作と結果を考える|デザインの原則 #5では、行動を操作する側と結果を確かめる側に分けました。私たちサンアンドムーンがUI設計の出発点を「操作方法と結果を、別々に確かめること」に置くのは、迷う場所によって必要な手がかりが違うからです。

この記事の要点

  • 操作の壁は、目的を具体的な操作へつなぐ難しさ
  • 結果を確かめる壁は、状態を理解し、目的に合うか判断する難しさ
  • 操作の案内と、実際の状態を知らせる表示の両方を確かめる

操作の壁──目的を操作へつなぐ難しさ

この記事では、やりたいことを機器でできる操作へつなぐ難しさを「操作の壁」と呼びます。正式な用語は「実行におけるへだたり(gulf of execution)」です。「壁」は、操作方法を理解する難しさをたとえた言葉です。ハッチンス、ホラン、ノーマンの論文Direct Manipulation Interfacesで説明されています。日本語の用語は『誰のためのデザイン? 増補・改訂版』に沿っています。

本を読むために机を明るくしたいのに、照明のスイッチが見つからない場面が例です。どこをどう操作すれば明かりが点くか分かれば、目的から行動へ進めます。この照明は、違いを説明するために本記事で考えた例です。

結果を確かめる壁──状態を理解し、目的と照らす難しさ

「結果を確かめる壁」は、機器の状態を理解し、目的に合っているか判断する難しさを表す言葉です。正式な用語は「評価におけるへだたり(gulf of evaluation)」です。同論文は、表示から状態を受け取り、解釈し、評価することを説明しています。

照明を点けたら、明かりと本の文字を見て、点灯したか、読みやすくなったかを確かめます。「点いた」と分かることと、「読むために十分な明るさだ」と判断することは、同じではありません。

ここで確かめるのは、製品の良し悪しではなく、自分の目的を達成できたかです。

Webでも、操作方法と実際の状態を伝える

Webのボタンや表示など、人がサービスを操作する接点がUIです。仮のファイル送信サービスで考えてみます。ここでは、ファイルを選び、ボタンを押すと送信が始まるしくみとします。

「ファイルを選ぶ」「選んだファイルを送信する」といった言葉から、資料を送る方法が分かることが、操作の壁を越える手がかりになります。

操作後の表示は、結果を確かめる壁を越える手がかりです。ファイル名が出ただけでは、選んだのか、送れたのか分からないかもしれません。「選択済み」「送信中」「送信完了」を区別し、送ったファイル名も確認できれば、送りたかった資料かを確かめられます。

見直すときは、何をしたかったか、操作や表示をどう受け取ったかを、使った本人に聞いてみます。ボタンを押したかだけでなく、結果を理解できたかも確かめます。

注意点

処理が失敗したときに「完了」と表示すると、結果の誤解につながります。表示は実際の状態に合わせます。また、選ぶと自動送信が始まるサービスなら、その動作に合う案内が必要です。

操作が止まったという事実だけで、どちらの壁が原因かは決められません。表示を増やす前に、どこで、何が分からなくなったかを確かめます。

よくある疑問

操作できたなら、使いやすいと言えますか

結果が分からなければ、不安や迷いが残る場合があります。目的に合う結果になったかまで、本人が確かめられるかを見ます。

完了メッセージを出すだけで十分ですか

「何が完了したか」が分かる必要があります。ファイル送信なら、送ったファイル名も表示することで、目的の資料だったか確認できます。

2つの壁は、どちらから見直せばよいですか

先に、実際に迷った場所を確かめます。操作方法が分からないのか、結果を読み取れないのかで、見直す言葉や表示は変わります。

操作への反応は、フィードバックがないと、人は続けられない|反応の即時性でも扱っています。UI/UXコンサルティングでは、操作方法と結果の伝わり方を一緒に確かめます。

参考文献

この記事の作成に参照した資料

  1. Direct Manipulation Interfaces. Human–Computer Interaction, 1(4), 311–338Hutchins, E. L., Hollan, J. D., & Norman, D. A. (1985).
  2. 誰のためのデザイン? 増補・改訂版:認知科学者のデザイン原論ノーマン, D. A. (2015).

操作の壁と結果を確かめる壁は、別々の手がかりで越えやすくなります。操作を案内する言葉と、目的に合った結果か判断できる表示の両方が必要です。私たちサンアンドムーンは、使う人が迷った場面を確かめ、案内と結果の表示を見直します。操作と結果の両方を見ることが、必要な改善を選ぶ第一歩になります。

執筆・監修

中谷 浩和

中谷 浩和

株式会社サンアンドムーン|代表取締役

1976年創業のデザイン事務所を前身に、Webコンサルティング・UI/UXデザインを専門とする。国際標準のUX設計プロセスを学ぶ Google UX Design Professional Certificate を取得し、上級ウェブ解析士 としてデータ主導のサイト改善にも精通。Google Project Management Professional Certificateも取得。デザイン思考を軸に、ユーザー認知・行動・文脈からWebサイトの課題を捉え直し、成果につながる設計へ落とし込むことを使命としている。システム設計、フロントエンド技術、SEO・パフォーマンス改善まで技術知識を横断し、サイト全体を見通したディレクションを得意とする。自動車メーカー、銀行・クレジットカード、保険などの大手から中小企業まで、数値で検証しながら改善を積み重ねる実践的なコンサルティングを提供している。

サンアンドムーンへのご相談はこちら

直感で選ばれるデザインへ。心理学に基づいたUI設計を。

無料でUX診断を依頼する
最近の事例
おすすめ事例
人気事例
  1. ミキハウス ベビースキンケアシリーズ

  2. LittleArtchive(リトルアーカイブ)

  3. SHIFT LINK

  4. 株式会社ミキハウス 新卒採用サイト

  5. SaltyArts inc.(株式会社ソルティアーツ)

  1. 株式会社ミキハウス 新卒採用サイト

  2. SaltyArts inc.(株式会社ソルティアーツ)

  3. スヌーズレン・ラボ

  4. NEMO Equipment Japan

  5. for,Freelance株式会社

  1. 「ムー」タイトルロゴ

  2. ミキハウス ベビースキンケアシリーズ

  3. 京都大学 教育学研究科 SIPプログラム 「デジタル・ポートフォリオ」

  4. 「第一紙行」カレンダー

  5. 株式会社 東京設計事務所

人気記事
  1. 1

    【パートナー募集】WEBエンジニア(コーダー)募集のご案内

  2. 2

    【パートナー募集】WEBデザイナー/UI・UXデザイナー(業務委託・フルリモート)

  3. 3

    【パートナー募集】グラフィックデザイナー/イラストレーター

  4. 4

    【パートナー募集】WordPress開発エンジニア募集のご案内

  5. 5

    選択的注意とは?日常の具体例と見落としを防ぐUX設計

関連事例

無料オンライン相談

「どこに問題があるのか分からない」という段階からのご相談も歓迎です。
サイトの改善やUI/UXデザインのお悩みを、オンラインでお聞きします。

無料で相談する