
Webアプリケーションのユーザーインターフェイス[6]
「戻る」で入力データが消えてしまうフォームはいらない
「寛容性とユーザーコントロール」
ソシオメディア 上野 学
2005/12/22
| 経験則その2:寛容性とユーザーコントロール |
- - PR -
寛容性とはつまり、システム(対話の相手としてのコンピュータ、あるいはサービス提供者)が、ユーザーの要望や振る舞いに対して寛容に反応するということです。コンピュータと違って、人は複雑な作業を正確に繰り返したり、膨大な情報を長期間記憶するといったことが苦手です。熟練したオペレーターであっても入力ミスを100%なくすことは不可能であり、暗算が得意な秀才でもコンピュータのスピードにはかなわないでしょう。そもそも人がコンピュータを利用するのは、単純なアルゴリズムの組み合わせと繰り返しによって膨大な情報処理を短時間で行うことができるという性質を活用して自分の作業を効率化するためです。システムは人の仕事を助けて、人が人にしかできない創造的で楽しい活動により多く携わることができるようにするべきもののはずです。ところが現実には、コンピュータを十分に利用するために、コンピュータの仕組み(コンピュータがどのように情報を処理するか)について理解し、コンピュータが働きやすいように気を配りながら入力作業を行わなければなりません。これでは本末転倒です。
![]() |
| 画面1 「しまった、ファイル名が重複しちゃいけなかったんだ。今度から気を付けよう。…… でもどうして同じ名前のファイルがあってはいけないんだ? そんなのこっちの勝手じゃないか!」 |
システムが寛容であれば、ユーザーは自由に操作できます。寛容とは、操作の取り消しが可能であることを意味し、これによりユーザーは、システム上のデータや入力内容が失われる心配なしに利用方法を学習することができるようになります。またユーザーがコンピュータのために最適化された言葉で入力作業を行うことができないときにも、その能動的な作業を無効な値としてではなく有効な意思の断片としてできるだけ理解し、ユーザーが期待する結果を少しでも多く返すことです。
一方、ユーザーコントロールとは、作業の主体をシステムではなくユーザー側に置くということです。ユーザーを主体的な操作者として扱い、操作の自由を与え、システムはユーザーの操作に従順に従うという構図を徹底させます。
人は対象物に能動的に働き掛けているときに最も学習効果が高まります。しかし多くのシステムは、限定的に決められた手順で作業を進めることをユーザーに強要します。たとえそれがよく考えて設計されたフローであったとしても、自由を奪われたユーザーは「システムにコントロールされている」という感覚の中で意味の分からない恣意的な一連の操作を続けなければならず、大きなストレスを感じてしまいます。もしスーパーマーケットで、通路の順序が決められていて、好きなところから商品を見ることができないとしたらどうでしょうか?
![]() |
| 図1 このような注意書きは一見ユーザーをガイドしているように見えるが、実際にはユーザーの自由を奪ってストレスを与えている |
| できるだけすべての操作を可逆的にする |
操作が可逆的であれば、ユーザーは安心してシステムを利用することができます。タイプライターの時代、一度タイプした文字は消すことができなかったため、1枚の手紙を間違いなしに書き上げるためには多大な心的労力(とやり直し作業)が必要でした。その後消去用のリボンを実装したタイプライターも登場しましたが、それでも同じ個所を何度も消していると汚くなるため、ストレスがなくなったわけではありませんでした。パソコンのキーボードには「Back Space」キーがあって、何度でも文字を打ったり消したりできるので、こういったストレスはなくなりました。
同様に、デスクトップアプリケーションに実装されている「取り消し(アンドゥ)」機能は、私たちが日々パソコンを使ううえで非常に重要な役割を果たしています。操作を取り消すことができるということは、まだ使ったことのない機能をいつでも試してみることができることを意味し、それはアプリケーションの操作方法についての学習を促進します。また、誤って消してしまった文字列を再び元に戻すことができるということは、もはや最初の消去は「誤り=エラー」というネガティブな行為ではなく、「試行=生産的作業」というポジティブな行為になるため、作業フローが常に前進しているという健全な感覚を得ることができます。
Webでは、ブラウザーの「戻る」ボタンが「取り消し」に近い振る舞いをします。ユーザーの操作の多くはリンクのクリックであり、ブラウザーの「戻る」ボタンはリンクをクリックする前の状態に画面を戻します。またブラウザーによっては、フォームのテキスト入力フィールド内で、文字列の編集コントロールに対して一般的なデスクトップアプリケーションが実装している「取り消し」機能を提供している場合があります。
しかしネットワーク上で動作するWebアプリケーションでは、ユーザーの入力操作が、サーバのデータベースに保存されたレコードの変更を意味する場合が多く、クライアント側で簡単に「取り消し」機能を実装することができません。そのため少なくとも、ユーザーが変更を加えたデータは、再度変更できるようなインターフェイスを用意する必要があります。例えば、ユーザー登録時に入力したプロフィール情報は、後日プロフィール編集画面から任意に変更できるようにするといったことです。
![]() |
| 画面2 自分で入力したものは、後で変更できるようになっているべき |
また、Webでは画面単位のサブミット行為によってタスクが進められるため、入力を開始してからサブミットによってそれが保存されるまでの間、サーバ側のプログラムでユーザーの作業を把握することができません。よく、「直前のフォーム画面に戻ったら入力した内容がすべて消えてしまっていた」という問題がありますが、そのようなことが起きるとユーザーのストレスは最高潮に達します。セッション管理や、リッチクライアント技術をうまく使って、ユーザーの作業を把握し、操作に可逆性を持たせることが望まれます。
ただし、「フォームに入力した内容をEメールで送信する」といった作業は取り消しが利きません。そのため、ユーザーが行う作業が対外的にどういった影響を及ぼすのかということを常にユーザーにフィードバックし、必要があれば確認画面を提示して意思の確認を行う必要が出てきます。
| 3/5 |
|
INDEX |
||
| Webアプリケーションのユーザーインターフェイス(6) | ||
| Page1<対話型システムの設計原則/対話型システムの設計原則/経験則その1:「ユーザーを尊重する」> | ||
| Page2<WebアプリケーションのUIデザイン/メリット(リアルタイムのデータにアクセスできる/公開が容易)/どこからでも利用できる/デメリット(不十分なインタラクション表現/やりとりが煩わしい/見た目に関する一貫性の欠如)> | ||
| Page3<経験則その2:寛容性とユーザーコントロール/できるだけすべての操作を可逆的にする> | ||
| Page4<ユーザーが自分のペースで作業できるようにする/コントロールを作業の流れに合わせて配置するユーザーの意思を優先する> | ||
| Page5<UIからゲーム性を排除し、簡単なマウス操作で利用できるようにする/ユーザーを信頼する> | ||
関連記事 |
Webアプリケーションのユーザーインターフェイス バックナンバー
ユーザビリティのヒント
Webアプリケーションのユーザーインターフェイスデザインに役立つさまざまなヒント集。自動販売機でジュースを買うときの不要な動作から考える
- 第1回 多くのユーザーは一度に1本しかジュースを買わない
- 第2回 「メールは送信されました」伝えるのなら、控えめに
- 第3回 虫眼鏡のアイコンは『検索』か『拡大』か?
- 最終回 「OK」と「キャンセル」、どちらが有効か
ホワイトペーパー(TechTargetジャパン)
- 画像を美しく魅せる効果を加えるjQueryプラグイン3選 (2010/3/17)
2つ重ねて比較するBefore/After、部分ごとに切り替えるpanelGallery、ズーム/カーテンなどができるcycle - 現場の無駄な流血を止めるための「プロトタイプ」とは (2010/3/12)
サイトやWebアプリ/RIAの設計やデザインを効率良く進めるには、プロジェクト関係者の想定を一致させていくことが大事だが… - Flashを閃光のごとく高速化するための基礎知識 (2010/3/9)
Flash高速化のための基礎知識や実践的テクニックを紹介する連載。初回は“処理負荷”を調べる具体的な方法を解説します - Windows 7でどんだけ“おばか”なアプリが作れるの? (2010/3/4)
おばかの発想の源やアプリの作り方などについて、おばかアプリ選手権の歴戦の受賞者や、マイクロソフトの代表者に話を伺った。アイデアのご参考に
|
|
スキルアップ/キャリアアップ(JOB@IT)
スポンサーからのお知らせ
| 「いつかは壊れるサーバ」そんな故障に 迅速で安価に手軽に対応する方法とは? New! |
| 「特権ユーザー」の事件を防げ! 万能権限を持つユーザーの管理方法とは? New! |
| 仮想環境の構築とデータ保護の特効薬?! 実績と信頼性の高いパッケージで安心運用 |
| 仮想環境のバックアップもこれまでどおり 「まるごと取ってまるごと戻す」簡単運用 |
| おばかアプリ選手権、第4弾開催中!! ムダにカッコよくてくだらない作品求ム! |
| 社内ファイルサーバを“クラウド”に統合 VPN直結「クラウド型ストレージ」を紹介 |
| その数、なんと400台以上! グループ内 サーバの「統合管理」によるメリットは? |
| 美人!? まあまあ? 気になる いやし系!! PV急増で「美人時計」がとった手段とは? |
| 進化を続ける富士通ストレージETERNUS DX 製品開発者の自信を裏付けるものとは何か |
| 運用管理の課題を“2つの観点”から分析 ユーザー満足度の高い「仮想環境」とは? |
お勧め求人情報

**先週の人気講座ランキング**
〜CCNA編〜
| ◆ | TomcatやJBossなどAPサーバ環境に関する 情報を集約! “業務”用APサーバ大百科 New! |
| ◆ | 一気に解説! 最新のクラスタストレージ 「RAIDを超えたストレージ基準」……など New! |
| ◆ | クラウド的ユーザー体験の変化は脅威か? 仮想化技術を使いこなす運用管理術を紹介 New! |

| ◆ | 上司や部下、部署内メンバーとの情報共有 を“ガラッ”と変えるコラボツールとは? New! |
| ◆ | おばかアプリ選手権、第4弾開催中!! ムダにカッコよくてくだらない作品求ム! |
| ◆ | 社内ファイルサーバを“クラウド”に統合 VPN直結「クラウド型ストレージ」を紹介 |

| ◆ | Twitterのアカウントはなぜ突破された? メールによる新手の攻撃手法とその対策 |
| ◆ | もう仮想化のお試しフェイズは終わりだ! Hyper-V 2.0が基幹システムも仮想化 |
| ◆ | 美人!? まあまあ? 気になる いやし系!! PV急増で「美人時計」がとった手段とは? |

| ◆ | クライアント企業から求められる人材 ⇒IT技術と経営戦略を併せ持つ「戦略家」 |
| ◆ | .NET編集長が実践する「技術情報検索術」 サンプル・コードを簡単に探す“技”は? |
| ◆ | 業務効率と情報セキュリティ対策を両立! 手間なく確実に機密情報を守る方法とは? |

| ◆ | 進化を続ける富士通ストレージETERNUS DX 製品開発者の自信を裏付けるものとは何か |
| ◆ | 運用管理の課題を“2つの観点”から分析 ユーザー満足度の高い「仮想環境」とは? |

| ◆ | 【CTC事例】約30の基幹システムを統合! 膨大なバッジジョブを制御した方法は? |
| ◆ | 仮想化すればコストは削減できるか? 仮想化に必要な「3つの視点」を解説する |
| ◆ | その数、なんと400台以上! グループ内 サーバの「統合管理」によるメリットは? |









