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

行為の七段階──窓を開けることから、操作と結果を考える|デザインの原則 #5

今回のテーマは、行為の七段階です。「何をしたいか」「どう操作するか」「望んだ結果になったか」を分けて考えるためのモデルです。窓を開ける身近な例で見ていきます。

部屋が蒸し暑く、暑さを和らげるために窓を開ける場面を考えてください。ふだん何気なく行う操作にも、目的を決め、方法を選び、結果を確かめる働きがあります。前回の概念モデルとシステムイメージ──作り手の考えを、使う人へ伝える手がかり|デザインの原則 #4では使い方を理解する手がかりを考えました。今回は、操作する人の行動に目を向けます。

私たちサンアンドムーンがUI設計の出発点を「操作の先にある目的を確かめること」に置くのは、ボタンを押せるだけでなく、望んだ結果になったと分かる画面を考えたいからです。

この記事の要点

  • 行為の七段階は、目的、操作、結果の確認を分けるモデル
  • 操作できたことと、目的を達成したことは違う
  • Webでも、操作方法と実際の結果の両方を伝える

行為の七段階を、窓を開ける例で見る

行為の七段階(seven stages of action)は、目的から操作へ進み、結果を受け取って確かめる行動を、7つに分けて考えるモデルです。ノーマンは『誰のためのデザイン? 増補・改訂版』の第2章で説明し、著者の改訂版の序文でも紹介しています。

鍵を外して横に動かす窓を開け、風が入り、暑さが少し和らいだ場合を考えます。

  1. ゴール(達成したいこと):部屋の暑さを和らげたい
  2. プラン(方法を選ぶ):窓を開けてみようと決める
  3. 詳細化(操作を具体的に考える):鍵を外し、窓を横に動かそうと考える
  4. 実行(実際に操作する):鍵を外して窓を動かす
  5. 知覚(目や体で受け取る):窓の開いた部分を見て、風や暑さの変化を感じる
  6. 解釈(受け取った意味を理解する):窓が開き、先ほどより暑さが和らいだと分かる
  7. 比較(目的と照らして確かめる):求めていた涼しさになったかを確かめる

2〜4が「実行の側」、5〜7が「評価の側」です。ここでいう評価は、製品の採点ではなく、自分の目的を達成できたか確かめることです。窓の例は、このモデルを説明するために本記事で作ったものです。

窓が開いたことと、涼しくなったことは違う

窓を開けても、外の空気が暑かったり、風が入らなかったりすれば、期待したほど涼しくならないことがあります。

「窓を開ける」は、目的のために選んだ方法です。目的は「暑さを和らげること」でした。操作ができたかに加え、目的に近づいたかを確かめると、方法と目的の違いが分かります。

Webでも、操作と結果の両方を伝える

Webサイトのボタンや表示など、人がサービスを操作する接点がUIです。申込フォームでも、七段階の見方を使えます。

送信ボタンを押せても、何も表示されなければ、申込が受け付けられたか分かりません。送信が成功したときに「申し込みを受け付けました」と表示し、申込内容も確認できれば、望んだ結果になったか確かめる手がかりになります。

画面を見直すときは、使う人が何をしたかったのか、どんな操作をし、表示をどう受け取ったかを確かめます。操作が完了したという記録だけで、本人の目的も達成できたと決めつけないようにします。

注意点

すべての行動が、必ず7つの順番どおり進むと決めるモデルではありません。操作に慣れた人が、各段階を意識しているとも限りません。

処理中や失敗したときに「受け付けました」と表示すると、結果の誤解につながります。実際の状態に合う情報を伝えることが必要です。

よくある疑問

ゴールとプランは、どう違うのですか

ゴールは達成したいこと、プランはそのために選ぶ方法です。暑さを和らげたいのがゴール、窓を開けてみようと決めるのがプランです。

ここでいう評価は、製品の良し悪しを決めることですか

目的を達成できたか確かめることです。窓が開いたかだけでなく、求めていた涼しさになったかを見ます。

画面にも7つの段階を作る必要がありますか

行動を考えるモデルなので、画面の数を決めるものではありません。操作と結果のどこで迷ったかを整理するために使います。

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

参考文献

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

  1. 誰のためのデザイン? 増補・改訂版:認知科学者のデザイン原論ノーマン, D. A. (2015).
  2. Preface. Design of Everyday Things, Revised EditionNorman, D. A. (2013).

窓を開けられても、求めていた涼しさになるとは限りません。Webでも、操作の完了と目的の達成を分けて考えられます。私たちサンアンドムーンは、操作のあとに、望んだ結果まで確かめられる画面を考えます。使う人の目的を確かめることが、必要な表示を整える第一歩になります。

執筆・監修

中谷 浩和

中谷 浩和

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

1976年創業のデザイン事務所を前身に、Webコンサルティング・UI/UXデザインを専門とする。国際標準のUX設計プロセスを学ぶ Google UX Design 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. 京都大学 教育学研究科 SIPプログラム 「デジタル・ポートフォリオ」

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

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

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

人気記事
  1. 1

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

  2. 2

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

  3. 3

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

  4. 4

    【パートナー募集】モーションデザイナー(After Effects等)

  5. 5

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

関連事例

無料オンライン相談

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

無料で相談する