ユーザーにとってはUIがすべて:UIデザイン原則をソシオメディアが語る

冨田秀継(編集部)
2008-10-01 22:40:01
  • このエントリーをはてなブックマークに追加

2. すぐにユーザーインタフェース

 デザインコンセプトを決めたら、すぐにユーザーインタフェースの作成に取りかかろう。ただし、上野氏自身、これには「賛否両論がある」と語っている。それはアジャイル開発における負の側面を踏まえてのことだ。

 しかし、それでも上野氏は「とりあえず半分適当でもいいので、見た目を作ってそれを叩き台に」してみようと話す。まずはデザインを起こすということで、HTMLから作ってもよし、Photoshopなどのグラフィックツールでユーザーインタフェースを起こしてみてもよい。

 上野氏はモックアップ作成時の注意点として、「UIデザイン原則」を守ることが重要だと強調している。この原則は、

  1. ユーザーに主導権を与える
  2. 直接操作の感覚を与える
  3. 一貫性を高める
  4. 目に見えるようにする
  5. 操作を可逆的にする
  6. モードを減らす
  7. エラーを回避する
  8. マジョリティに最適化する
  9. ユーザーの作業を加速化する

 と、まとめられている。原則の多くは説明が不要なほど明確ではあるが、いくつかを補足したい。

 3の「一貫性を高める」は、見た目の統一感だけでなく、ふるまいの統一感も含む原則だ。これは「画面の中に見えているオブジェクトに対して、ユーザーがそれに直接働きかける」ことが重要だという、2の「直接操作の感覚を与える」ともつながる原則。その働きかけの結果にも統一感が求められるということだ。

 4の「目に見えるようにする」必要があるのは、「基本的にGUIは操作の対象が目に見えるようになっていなければわからない」(上野氏)からだ。重要な要素をマウスオーバーの中に隠してしまうようなユーザーインタフェースは避けたい。

 5の「操作を可逆的にする」は、ユーザーが前の操作に戻れるようにすること。データの入力後に次の画面へ進んでも、いま一度前の画面に戻って再編集できるようにしておくべきだという。

 6の「モードを減らす」は、テレビのリモコンを例にとるとわかりやすい。高機能なテレビリモコンは、1つのボタンに複数の機能が付与されている。機能が切り替わるタイミングは上蓋を開けたときや画面の状況によって異なるため、ユーザーはその都度、現在状況を把握して文脈を読みながら操作しなければならない。

 特に説明の必要がない項目ではあるが、意外とできていないのが8の「マジョリティに最適化する」だろう。限られたリソースで開発しているのであれば、100人中95人が使う機能と5人が使う機能が並んだ場合、「95人の方を徹底的にやる」(上野氏)。これくらいフォーカスして開発すべきなのだという。

 9の「ユーザーの作業を加速化する」は次の例で端的だ。直前に開いたドキュメントファイルをもう一度確認する場合、本来であればファイルを「探す」「見つける」「展開する」という3つのアクションが必要だ。しかし、「最近開いたファイル」を見れば一発で展開できる。この考えを進めると、ウェブサービスのレコメンデーション機能などにも結びつくだろう。

 なお、本稿では便宜上、9原則に番号を付した。しかし、これらは「原則」であるため、上野氏は講演で番号付け(序列)のようなかたちで紹介しなかったことを付記しておく。

 では、実際にソシオメディアではどのようにモックアップを制作しているのか、図で見てみよう。

ソシオメディアのコーポレートサイト

  • コメント(4件)
#1 amd64x64   2011-05-04 11:30:23
やたらに多い画面数の記事だ
#2 そげ   2011-05-05 13:46:59
画面数がやたらに多いことで、一瞬で済むことに5分くらいかかってしまった。これはユーザーに取ってUIというか、ユーザビリティがすべてなのではないだろうか。説得力が(ry
#3 アモイ   2011-05-08 16:43:18
PVとか広告impとか欲しいんだから仕方ないんだよ。
UIよりもお金だと思ってんのさ。
#4 モリト   2013-12-02 22:54:33
下の印刷アイコンで幸せに
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]