ユーザーが間違えても間違えなくてもエラーは回避せよ － ＠IT
Webアプリケーションのユーザーインターフェイス[8] ユーザーが間違えても間違えなくても エラーは回避せよ 「経験則その4：エラーの回避」 ソシオメディア 上野 学 2006/3/15 ・有効な値がそろうまで先に進めないようにする。 前回の「操作の有効性をイネーブル／ディスエーブルで表す」で説明したように、有効な入力値がそろうまでサブミットボタン（または作業を次の段階に進めるために必要なコントロール）をディスエーブルにしておくという方法も有効です。 入力された値の有効性を完全にバリデートするにはサーバ側での処理が必要だとしても、必須項目に何らかの値が入れられているかどうかはぐらいは JavaScript で判断できるでしょう。またリッチクライアントの技術で、かなり詳細なバリデーションがローカルでも可能になるはずですから、できる限りのことをするべきです。 ただし、入力内容に対するバリデーシ
＠IT：Webアプリケーションのユーザーインターフェイス［1］-1
Webアプリケーションのユーザーインターフェイス[1] ユーザーにとっては “ユーザーインターフェイス”こそが製品そのもの ソシオメディア 上野 学 2005/6/2 ■はじめに Webクライアントの技術が進歩し、多様化するに従って、Webベースのシステムにはデスクトップアプリケーションと同等の品質を持つユーザーインターフェイスが必要となってきています。 しかし開発の現場では、ユーザーインターフェイス（特にGUI）デザインについての専門的なスキルを持った技術者が圧倒的に不足しています。その理由は、ソフトウェア製品におけるユーザーインターフェイスの重要性が正当に理解されていないためと、ユーザーインターフェイス・デザインに関する教育機会がほとんどないためです。 利用者の視点に立てば、ユーザーインターフェイスとは製品そのものです。いくら高度に洗練された仕組みがバックエンドにあったとしても、それが
「戻る」で入力データが消えてしまうフォームはいらない ― ＠IT
Webアプリケーションのユーザーインターフェイス[6] 「戻る」で入力データが消えてしまうフォームはいらない 「寛容性とユーザーコントロール」 ソシオメディア 上野 学 2005/12/22 前回「入力情報を預かる責任を果たせる画面デザインとは？」は、あらゆる経験則の土台となる価値観として、「ユーザーを尊重する」というユーザー中心の姿勢について述べました。今回からは、Webアプリケーションのユーザーインターフェイス（UI）・デザインを行ううえで有効な経験則を、少し具体的に考えていきたいと思います。 その前にまず、連載の第1回「ユーザーにとっては“ユーザーインターフェイス”こそが製品そのもの」で触れた HCI（Human-Computer Interaction）の分野でよく挙げられる、コンピュータを用いた対話型システムの設計原則を紹介しておきます。ここでいう「対話型システム」とは、ユーザー
＠IT：Webアプリケーションのユーザーインターフェイス［1］-2
Webアプリケーションのユーザーインターフェイス[1] ユーザーにとっては “ユーザーインターフェイス”こそが製品そのもの ソシオメディア 上野 学 2005/6/2 ■インタラクションデザイン 人とコンピュータの間のコミュニケーションを仲介するのがユーザーインターフェイスの役割であると述べましたが、では、人とコンピュータの間のコミュニケーションとは何でしょうか。複雑な情報処理が可能になった現代のコンピュータでは、ユーザーはコンピュータと対話式に操作を進めるのが普通です。 つまりある利用目的を達成するためには、まずユーザーが何らかの入力操作を行い、それを受け取ったシステムが内部で何らかの計算を行って処理結果を出力する、というやりとりを繰り返します。そのため、使いやすく利用効率の高いシステムを設計するには、表面的なユーザーインターフェイスを適切にデザインするだけでなく、対話がスムーズに進むよ
「戻る」で入力データが消えてしまうフォームはいらない － ＠IT
Webアプリケーションのユーザーインターフェイス[6] 「戻る」で入力データが消えてしまうフォームはいらない 「寛容性とユーザーコントロール」 ソシオメディア 上野 学 2005/12/22 それでは、Webアプリケーションのユーザーインターフェイスの課題を踏まえながら（参照記事：「経験則その1：「ユーザーを尊重する」）、対話型システムの設計原則をWebアプリケーションのためにアレンジして考えてみましょう。まずは、「寛容性とユーザーコントロール（可逆性と制御権の確保）」です。 寛容性とはつまり、システム（対話の相手としてのコンピュータ、あるいはサービス提供者）が、ユーザーの要望や振る舞いに対して寛容に反応するということです。コンピュータと違って、人は複雑な作業を正確に繰り返したり、膨大な情報を長期間記憶するといったことが苦手です。熟練したオペレーターであっても入力ミスを100％なくすことは
＠IT：Webアプリケーションのユーザーインターフェイス［4］-1
キャッシュカードを挿入し、暗証番号を入力すると、次に表示されたのは引き出し金額を指定する画面でした。これもよくあるように金額を入力するための数字が並んだボタンと、入力した金額が表示される欄、そして次に進むための「確認」ボタンが配置されていました。 ここで私は、下ろしたかった金額である2万5000円を指定するために、「2」「万」「5」「千」「円」の順番でボタンを押し、「2万5千円」という入力内容が表示されているのを確認して、「確認」ボタンを押しました。 するとこのような画面が表示されました。どうやらエラー画面のようです。メッセージを読むと、現在私の行った操作は無効であって、お金を下ろすことができないということが分かりました。そこで「終了」を押してみると、キャッシュカードが排出され、初期画面に戻ってしまいました。私は何がいけなかったのか分からず、非常に混乱し、とても不快な気分になりました。少な
＠IT：Webアプリケーションのユーザーインターフェイス［2］-2
Webアプリケーションのユーザーインターフェイス[2] ユーザーが選びやすい フォームのカタチを考えよう ソシオメディア 上野 学 2005/6/24 ではここで、デスクトップアプリケーションとWebアプリケーションの橋渡し的な存在であるフォームコントロールについて見ていきましょう。GUIではシステムの処理結果がすべてグラフィックとして描画されますが、そこには視覚的な言語としていくつかの単語や文法が用意されています。現在GUIで用いられるこれらの約束事は、主に80年代におけるMacintoshをはじめとしたGUIの普及の中で研究され、洗練されてきたものです。基本的なGUIのコントロールは、次のように分類して考えることができます。 ■命令コントロール 命令コントロールとは、機能を開始するためのコントロールで、先ほどのイディオムの話でいえば「動詞（コマンド）」を指示するためのものです。代表的な
「戻る」で入力データが消えてしまうフォームはいらない － ＠IT
ここで、デスクトップアプリケーションに対するWebアプリケーションのメリットとデメリットを、ユーザーインターフェイス・デザインの視点から整理してみましょう。 ○リアルタイムのデータにアクセスできる Webアプリケーションでは、株価やチケットの予約状況などをリアルタイムに見ながら取引や申し込みといった手続きを行うことができます。即時性はオンラインサービスの大きな利点であり、販売店の在庫管理や決済などのシステムはいまやそのために総合的な発展を遂げています。つまりWebアプリケーションのユーザーインターフェイスは、情報の検索性を重視してデザインされなければなりません。 ○公開が容易 Webアプリケーションはソフトウェアの物理的な流通を必要としないため、利用者はインストール作業やアップデートなどの作業をする必要がありません。また、Webアプリケーションの提供者は、CD-ROMのプレスや発送などをす
すでに入り口にいるのに、ホームに導くボタンは親切か － ＠IT
Webアプリケーションのユーザーインターフェイス[7] すでに入り口にいるのに、ホームに導くボタンは親切か 「可視性とフィードバック」 ソシオメディア 上野 学 2006/2/15 画面上のある要素がどのような役割を持っているのかをユーザーが学習できるようにするためには、その要素の振る舞いを一貫させなければなりません。同じ見た目のボタンが状況によって違う機能を持ったり、異なる見た目のボタンが同じ機能を持ったりしていると、ユーザーは各要素の役割やシステム全体の世界観を理解できなくなってしまいます。 しかし、あるコントロールの振る舞いに一貫性を持たせるということは、そのコントロールを操作したときにいつも同じ処理結果が得られるようにするという意味ではありません。処理の結果は、引数として指定される対象オブジェクトやそのプロパティによって変化するものです。 例えば、検索機能は入力されたキーワードによ
ユーザーが間違えても間違えなくてもエラーは回避せよ － ＠IT
Webアプリケーションのユーザーインターフェイス[8] ユーザーが間違えても間違えなくても エラーは回避せよ 「経験則その4：エラーの回避」 ソシオメディア 上野 学 2006/3/15 ここまで、「ユーザーは間違える」ということを前提に、どうすれば間違えにくいユーザーインターフェイスが作れるかを見てきました。それでも、エラーを完全になくすことは難しいでしょう。例えば電話番号を入力するテキストボックスがあって、「半角数字、ハイフンなし」で入力することが期待されているとします。開発者は正しく入力してもらうために、テキストボックスのすぐ近くに「半角数字で入力してください。ハイフンは入れないでください」といった注意書きをするでしょう。しかしユーザーがそのとおりの書式で入力してくれる保証はどこにもありません。テキストボックスは非制限コントロールであるため、どのような値が入力されるかはユーザーに委ね
＠IT：お金を下ろせないATMの画面デザインを考える
Webアプリケーションのユーザーインターフェイス[4] お金を下ろせないATMの画面デザインを考える 「利用者体験における本質的な問題と表層的な問題」 ソシオメディア 上野 学 2005/9/16 前回まで（「ユーザーにとっては “ユーザーインターフェイス”こそが製品そのもの」「ユーザーが選びやすいフォームのカタチを考えよう」「UCD」）は、ユーザーインターフェイスやインタラクションデザインというもののとらえ方、代表的な GUI コントロールの振る舞い、そして使いやすい製品を実現するための設計プロセスといった、基礎的な話をしてきました。今回からはいよいよ、より実践的なデザインのノウハウに入っていきたいと思います。 実践的なノウハウといっても、デザインには絶対的な正解はありません。「プッシュボタンの大きさは20×60ピクセルで、画面の左端から80ピクセルのところに配置するのが常にベストです」
「戻る」で入力データが消えてしまうフォームはいらない － ＠IT
Webアプリケーションのユーザーインターフェイス[6] 「戻る」で入力データが消えてしまうフォームはいらない 「寛容性とユーザーコントロール」 ソシオメディア 上野 学 2005/12/22 連載の第2回で、「ユーザーインターフェイスのコントロールは基本的にコンテンツの一部として配置されている」ということを書きましたが、このことから、多くのデザイナーはユーザーインターフェイスとコンテンツを混同してしまっているようです。もちろん、コンテンツの一部がホットスポットとしてユーザーの操作を受け付けるというハイパーメディアならではの表現方法を追求したり、リッチクライアントの技術によってHTMLフォームだけでは表現できないような視覚的にリッチなコントロールを提示することは悪いことではありません。しかし、ユーザーが画面を見て「いまそこで何ができるか」「どこがコントロールか」といったことがすぐに分からなけ
＠IT：ユーザーが選びやすいフォームのカタチを考えよう
Webアプリケーションのユーザーインターフェイス[2] ユーザーが選びやすい フォームのカタチを考えよう ソシオメディア 上野 学 2005/6/24 前回「ユーザーにとっては “ユーザーインターフェイス”こそが製品そのもの」は、ユーザーインターフェイスというもののとらえ方と、それをデザインするうえでは、人とシステムとの対話であるインタラクションデザインを論理的に行わなければならないという話をしました。今回は、GUIをデザインするうえで必要な前提知識と、Webアプリケーションの課題、そしてウェブアプリケーションにおけるインタラクションの要となるフォームコントロールについて考えていきたいと思います。 ■WIMPインターフェイス GUIは、別名「WIMPインターフェイス」とも呼ばれます。WIMPとは、ウィンドウ（W）、アイコン（I）、メニュー（M）、ポインター（P）のことで、GUIを構成する代
＠IT：Webアプリケーションのユーザーインターフェイス［2］-3
Webアプリケーションのユーザーインターフェイス[2] ユーザーが選びやすい フォームのカタチを考えよう ソシオメディア 上野 学 2005/6/24 ■選択肢から1項目を選択する ユーザーの選択作業として最もよく行われるのは、「選択肢から1項目を選択する」という行為です。選択肢の数は、2項目の場合もあれば、20項目の場合、200項目の場合もあるでしょう。何百もの選択肢をラジオボタンで用意することも理論的には可能ですが、現実的ではありません。ここでは、選択肢の数に応じて、どのようにフォームコントロールを使い分ければよいかを説明します。 ・選択肢が少ない場合 選択肢が2～10項目と少ない場合、考えられるコントロールは、ラジオボタンとドロップダウンメニューですが、選択肢の一覧性を考えるとラジオボタンを用いるのがよいでしょう。 しかし、1画面に複数の選択肢のセットが必要な場合、ラジオボタンは多く
ユーザーが間違えても間違えなくてもエラーは回避せよ － ＠IT
Webアプリケーションのユーザーインターフェイス[8] ユーザーが間違えても間違えなくても エラーは回避せよ 「経験則その4：エラーの回避」 ソシオメディア 上野 学 2006/3/15 間違った操作によるエラーには、2つの種類があるといわれています。1つは「ミステーク（誤解）」によるもの。もう1つは「スリップ（うっかり）」によるものです。 前者のミステークは、ユーザーが自分のやるべきことを誤解していて、そもそも操作の意図が間違っているときに起こります。ユーザーが「○○という目的を達成するためには△△という操作をすればいいんだ」という意図形成を行う段階で問題が発生するのです。例えば、銀行のWebサイトで「インターネットバンキング」を利用しようとしたとき、なぜか画面上で目立っている「マイレージクラブインターネットサービス」をクリックすればよいのだと思ってしまって、そこから一生懸命ログインしよ
＠IT：Webアプリケーションのユーザーインターフェイス［4］-1
Webアプリケーションのユーザーインターフェイス[4] お金を下ろせないATMの画面デザインを考える 「利用者体験における本質的な問題と表層的な問題」 ソシオメディア 上野 学 2005/9/16 このATMのユーザーインターフェイスとインタラクションでは、表層的な問題もたくさんあります。まず前述のとおり、1万円単位でしか下ろせないということがユーザーにきちんと伝わっていません。どうすればもっと伝わりやすくなるでしょうか。次のようなことが考えられます。 特に「1万円単位」というところを強調して、ユーザーの目に留まりやすくします。ただし、タスクに集中しているユーザーは、画面周辺の注意書きのたぐいはあまり読まないので、効果はそれほど期待できません。文字による注意書きや説明によって正しい操作方法を伝えるよりも、ユーザーインターフェイス要素のデザインによって現在行うべき妥当な操作が示唆されているべ
＠IT：Webアプリケーションのユーザーインターフェイス［3］-3
また、UCDプロセスを実践していくためには、できるだけ専門のチームを組織横断的に構成することが望まれます。メンバーには、UCDプロセス自体の管理をするリーダーをはじめ、マーケティング部門、デザイン部門、開発部門、クライアント部門などのスタッフと、ユーザビリティの専門家がいるとよいでしょう。必要であれば専門家を外部から招いてチームを作り、調査作業、分析作業、デザイン作業、評価作業などをそれぞれの専門的な知見を踏まえて進めていきます。 ■データの収集 データの収集とは、要求分析を行ううえで根拠となる情報を集めることです。クライアントの要望を聞くことはもちろんのこと、UCDでは、ユーザー観察やユーザーインタビューの結果を重視します。 ユーザー観察の作業では、プロジェクトのメンバーが、当該システムが介在することになる場面に出向いて、実際にシステムのユーザーとなる人々の活動を直接観察します。例えば、
すでに入り口にいるのに、ホームに導くボタンは親切か － ＠IT
Webアプリケーションのユーザーインターフェイス[7] すでに入り口にいるのに、ホームに導くボタンは親切か 「可視性とフィードバック」 ソシオメディア 上野 学 2006/2/15 GUIでは、ウィンドウ、アイコン、メニューなどのグラフィックでユーザーインターフェイスが構成されていますので、当然、可視性とフィードバックはユーザーにとっての操作感を決定する重要なテーマとなります。 そもそもコンピュータ内部で情報が処理される様子は目に見えないものであり、ディレクトリやファイル、インターネットやWebサービスといった情報の組織は極めて概念的な存在で、その実態を直接見ることができません。コンピュータは、処理されたデジタルデータを概念上のモデルに沿ってディスプレイなどに出力し、同じモデルに沿ってキーボードやマウスからの入力をデジタルデータに変換します。GUIは、まさにこの概念上のモデルを手掛かりにし
入力情報を預かる責任を果たせる画面デザインとは？ － ＠IT
Webアプリケーションのユーザーインターフェイス[5] 入力情報を預かる責任を果たせる画面デザインとは？ 「ユーザーを尊重するということ」 ソシオメディア 上野 学 2005/10/19 ユーザーの労力とともに、時間も大変貴重なものです。システムは、できる限り高速な処理を行い、ユーザーの時間を大切に扱うべきです。ただし、ここで重要なのは、システムとのインタラクションのペースは、ユーザーが決定するということです。いくら高速処理を行うといっても、画面要素のスクロールやアニメーション表現が速過ぎて、ユーザーが目的の情報を見過ごしてしまわないようにします。 第一に、動画のように時間的な拘束を生むコンテンツは、それがユーザーにとって本当に意味のある内容であるかを十分に考慮したうえで、ユーザーが意識的に呼び出せるようにしなければなりません。システムへのアクセスのたびに、必要であるかどうかも分からないム
「戻る」で入力データが消えてしまうフォームはいらない － ＠IT
セッションの制限時間は、サーバ側のリソースの問題です。サーバ側のリソースを無限にできない以上、当然どこかで制限を設けることになりますが、一般的な利用に問題のない程度の制限にすること（つまりユーザーに制限を意識させずに済むのなら、制限がないのと同じです）、そしてサーバ側のリソース使用の効率をユーザーの利便性の問題としてとらえることが重要です。 フォームコントロールは、ウェブの画面でユーザーが能動的に入力作業を行う部分です。特に業務系のアプリケーションの場合、秒単位の入力効率の変化が会社全体のコストに大きく影響を及ぼします。そのためフォームコントロールの配置をいかに作業のフローに合ったものにするかが問われます。 何をどういった順序で入力するのかといった作業の内容によって、当然コントロールの配置は変わってきますが、基本的には、ユーザーが画面の左上のコントロールから右下のコントロールに向かって順次
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
