ユーザー理解に合わせたユーザーインターフェイスデザイン
上野 学（ソシオメディア株式会社）© 2012 Sociomedia Inc.

上野 学（@manabuueno）
ソシオメディア株式会社 取締役
ソシオメディア株式会社（www.sociomedia.co.jp）
ユーザーインターフェース設計やユーザビリティ評価を専門に行う、UXデザイン・コンサルティングファーム。

© 2012 Sociomedia Inc.

© 2012 Sociomedia Inc.

ユーザーフレンドリー

ユーザーに分かってもらう？

© 2012 Sociomedia Inc.

© 2012 Sociomedia Inc.

UCD / HCD 設計

デザインプロセスの冗長化© 2012 Sociomedia Inc.

ユーザーの行動を観察・分析しそれに合ったデザインを試みるのはあたりまえ

我々のチャレンジはデザインによって人の行動を変えること© 2012 Sociomedia Inc.

自動改札の読み取り装置の理想的な角度が13.5度という発見は行動観察の結果だが、実際に人々が毎朝毎晩13.5度でカードをかざすようになったのはデザインの結果である。
© 2012 Sociomedia Inc.

ユーザーは iPod を使っている時間の99%を、iPod を意識しないで過ごす。
製品やサービスの優れたデザインとは、それによってユーザーの行動を変化させつつも、自身の存在を消す試みである。

© 2012 Sociomedia Inc.

道具のデザインとは道具の使い方のデザインと同義

ユーザーの新たな、そして自然な行動フレームワークをデザインする© 2012 Sociomedia Inc.

ユーザー理解 ＝ 自分なりの使い方ができる© 2012 Sociomedia Inc.

© 2012 Sociomedia Inc.

Modal vs. Modeless© 2012 Sociomedia Inc.

Modalモードがある。
間接操作。理論的。動詞 → 名詞。言語的。通時的。
ユーザーが行うタスクに合わせてデザインされる。
Modeless
モードがない。
直接操作。実験的。 名詞 → 動詞。空間的。共時的。
ユーザーが扱うオブジェクトに合わせてデザインされる。

© 2012 Sociomedia Inc.

Modal© 2012 Sociomedia Inc.

Modeless© 2012 Sociomedia Inc.

Modal

直進左折右折© 2012 Sociomedia Inc.

Modeless© 2012 Sociomedia Inc.

Modal© 2012 Sociomedia Inc.

Modeless© 2012 Sociomedia Inc.

Modal© 2012 Sociomedia Inc.

Modeless© 2012 Sociomedia Inc.

Modal© 2012 Sociomedia Inc.

Modeless© 2012 Sociomedia Inc.

Modal© 2012 Sociomedia Inc.

Modeless© 2012 Sociomedia Inc.

Modal© 2012 Sociomedia Inc.

Modeless© 2012 Sociomedia Inc.

Modal© 2012 Sociomedia Inc.

Modeless© 2012 Sociomedia Inc.

••••••••••Modal••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••

キレコード追加追加••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••キ検索••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••

レコード更新••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••

レコード削除戻る••••••••••

開くキ更新••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••キ検索••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••キ削除© 2012 Sociomedia Inc.

Modeless•••••••••••••••••••

検索••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••

新規編集削除••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••

キ保存© 2012 Sociomedia Inc.

モードレスデザインのメリット
操作手順/画面数が少ない。
段階的な試行錯誤ができる。
使えば使うほど効率的になる。
楽しい。
モードレスデザインのデメリット
使いこなすには創造性が必要。

© 2012 Sociomedia Inc.

モードレスデザインの方法
タスクではなくオブジェクトを見せる。
オブジェクトはそれ自身が役割を体現する。
直接操作かつ可逆的。
名詞 → 動詞 のシンタックス。

© 2012 Sociomedia Inc.

国立国会図書館サーチ（開発版）
2009年「情報探索サービス」として開発プロジェクト開始。
全所蔵図書、デジタルアーカイブ、レファレンス情報、全国公立図書館、各種学術機関書誌DB等を横断検索。
オープンソースを積極活用し、外部サービスとの連携も重視。
国内にある豊富な「知」を活用するアクセスポイントとなるサービス。

© 2012 Sociomedia Inc.

要求事項
ターゲットユーザー：国民
機能要件：主力サービスと同等 and MORE
文書検索サービスの傾向
専門用語の多用結果を得るまでに操作が多い
複数の検索モードがあり使い分けられない
試行錯誤しにくい© 2012 Sociomedia Inc.

デザインコンセプト
シンプル
一度に見せる情報量を減らす。
分かりやすい言葉と分類。
サムネールやアイコンなどで検索対象物を具象的に表現する。
モードレス
ひとつの検索画面ですべての機能を使えるようにする。
時間のかかる処理は非同期で随時部分更新。
まずは最小限の条件で結果を出せるようする。
入力画面と検索結果表示画面を分けない。
検索条件を段階的に追加できるようにする。
© 2012 Sociomedia Inc.

© 2012 Sociomedia Inc.

© 2012 Sociomedia Inc.

© 2012 Sociomedia Inc.

© 2012 Sociomedia Inc.

© 2012 Sociomedia Inc.

www.sociomedia.co.jp© 2012 Sociomedia Inc.