【AIIT】人間中心デザイン 講義ノート#1「人間中心デザイン入門」
概要
これは産業技術大学院大学（AIIT）で絶賛開講中の履修証明プログラム「人間中心デザイン」の私的まとめです。※多分に主観が含まれてます。
2014年8月9日（土）より講義が始まっており、初回からアクセル全開の内容だったので記憶が鮮明な内に早いとこまとめておこうと思っていたのですが、先送りに次ぐ先送りにより、早くも2回目の講義が迫ってしまったため、急ピッチでまとめる事に。
人間中心デザイン入門
人間中心設計とは
「人間中心」の勘所：なぜ使えない、使われない製品やシステムが生まれるのか？
使えないシステムの例としてアメリカの国境警備に関するビデオを見る。国境警備では広大な国土に監視の眼を行き届かせるシステムが必要で、密入国者などの不審な事象を検知した場合、スタッフが即座に現場に急行できるような警備システムが求められており、既製品の組み合わせで済むと考えられていたが、結果的にまったく使えないシステムが出来上がってしまったという話。
なぜ使えないシステムが生まれてしまったのか：考えられる理由
- 使う人の声を聞かなかった
- 現場をみなかった
- テストや試すプロセスがなかったのでは？
- 納期や予算の問題
- 既存のシステムを当てはめようとしたのが間違いではないか
- 要件が大きすぎた（国境全てをカバーしようとした）
- （このシステムの要件で言えば）非日常の状態であるという事を把握していなかったのではないか
- 機器の使用環境や国境警備という業務について現状の状態や利用状況が把握出来ていなかったのでは？
- 要するに調査不足
どうすればこの問題を回避出来たと考えられるか
- プロジェクト初期の段階で実現不可能な約束をしなければ良かったのではないか
- まず徹底的に調査を行いその上でどのようなシステムが最適なのか考えるべきだった
- 既存のシステムを当てはめるのではなく目的に沿って考案すべき
- 設計者・開発者が現場を見に行くべきだったのでは？
- 時間と場所をユーザーと共有して問題を探るべきだった
ユーザービリティについて
ユーザビリティとは利用品質（Quality of use）のこと。
以下、括弧ばかりですけど、「ある利用状況で（ここ重要）、ある製品やサービスを使用する利用者にとって（ここも重要）の使いやすさ（不満やストレスがなく、快適に使う事が出来るかという使い勝手）の事」を指す。多分。
※詳しい事はISO9241-11で定まってるらしいので良い子はちゃんと確認しておこう。
参考：
以下続きます...
（2回目、3回目の講義後の更新になります）
はてなブックマークのナビゲーション増加が止まらない
※1ヶ月くらい前に書こうと思ってずっと放置してました。
前々から気になってましたが、はてなブックマークのPC版トップページのナビゲーションの増加が止まりません。一列に並ばせるメニュー数としては明らかに多すぎる気がするのですが、インターネット界のEXILEを標榜するはてなにおかれましては、ここもまた通過点に過ぎないのでしょう。
いい機会ですので、ここではてなブックマークのリニューアルから現在に至までのナビゲーションの遷移をまとめてみました。
リニューアル直後のナビゲーション（2013年01月09日 頃）
賛否両論というかどちらかというと否定的な意見の多かったはてなブックマークリニューアル直後のナビゲーションです。今では画像リンクになっていますが最初期はテキストリンクで左寄せになっていました。当初からこのナビゲーション部分は変動する事が予見されていたらしく、後々簡単に変更出来るように柔軟性の高い仕様にしていたと考えられます。
ナビゲーションの画像リンク化（2013年01月20日 頃）
いきなりテキストリンク形式を廃して画像リンクに変わります。hover後の画像が上からフレームインするといういい感じのエフェクトも付いてました。まだまだナビゲーションの幅には余裕があります。
ヘッドラインの追加（2013年05月22日 頃）
旧デザインに近いリスト形式でホットエントリーの一覧を表示するヘッドラインが追加されました。まだナビゲーションには余裕がありますが、これくらいが丁度いいのではないでしょうか。
おすすめの追加（2014年03月04日 頃）
1年近い沈黙をやぶって「おすすめ」メニューが追加されます。またスペースの都合からトップメニューが削除されました。そろそろデザイナーの悲鳴が聞こえてきそうです。
画像と動画への変更（2014年03月31日 頃）
動画メニューが拡張されて「動画と画像」になりました。ついでにヘッドラインと総合の位置が見直され、ヘッドラインが一番左端に来ました。もうこれくらいで十分だと思います。
ランキングの追加（2014年04月03日 頃）
ここでまさかの「ランキング」メニューの追加です。ブックマーク数は削除され注目キーワードがタグっぽい感じで表示されるようになりました。破綻は近い。
ガールズの追加（2014年05月08日 頃）
そうです。忘れてはいけません。はてなブックマークはモヒカン以外にも女子も利用するのです。@cosmeベストコスメ大賞が毎年ホットエントリー入りするなど、はてブには女子力の高いユーザーが数多く存在するのです。彼女たちがそれ以外で活動している様を普段見る事はあまりありませんが女に秘密はつきものです。リニューアルから1年以上経つというのに未だにガールズが無いなんて常軌を逸していました。一列に14個もメニューが並んでいるって？それが何だってんです。居酒屋のメニューを見た事が無いのですか？
画像と動画の分離（2014年05月15日 頃）
あーっとそうでした。この広い世の中、動画にしか興味が無い人間も、画像にしか興味が無い人間も沢山いるのです。動画と画像ではどちらか一方にしか興味が無い人にとっては半分がノイズとなってしまいます。多様なニーズに訴求するはてなブックマークとしてはこんなことで離脱されるのはあまりにもおしい。パンが無いなら手持ちのパンを二つにして分け与えれば良いのです。これこそがインターネットの良心です。しかしもうこれが限界でしょう。デザイナーは憤死寸前です。
一般の追加そして現在へ（2014年06月12日 頃）
私が間違っていました。限界という言葉はそれを越えるために存在するのです。そういえば無理というのは嘘つきの言葉であると偉い人が言っていました。はてなブックマークには「一般」が足りなかったのです。モヒカンとガールズだけでは世界は回りません。9割は一般なのです。ここに気づいたはてなは偉い！
このようにはてなブックマークは多くのニーズに応えられるよう、日々進歩を続けているんですね。とても勉強になりました。
ちょっといいなと思ったUIメモ3
アプリ版「Yahoo!乗換案内」の現在時刻の大まかな現在地表示のナビゲーションが良い。あくまでも目安だけど、初めて利用する路線などで正しい方向に進めているか確認する場合に十分効果的。
ちょっといいなと思ったUIメモ2
見出しにページ内リンクが割り振られており、クリックするとロケーションバーが「http://jquery.com/download/#jquery-1-x」といった感じに遷移するため、ページ内リンクのURLを簡単に取得する事が出来るようになっている。
ちょっとした工夫だが、ページの該当部分を簡単にシェアする事が出来る。
ちょっといいなと思ったUIメモ1
[View as single page]をクリックするとページングで分割されている各ページ内容が1ページ内に表示される。
ページング自体、UIとしては微妙な感じですが、自動読み込み型だとユーザーの意図に反してコンテンツが勝手に読み込まれる場合があるため、ユーザーに選択権を与えるという意味ではありかなと思いました。
参考：Times Higher Education - Education news and university jobs
Amazonの注文確定画面に関する難癖
※まるで重箱の隅をつっつくような話ですが気になったので書きます。
Amazonでは注文を確定する前に事前に登録した配送先を選択出来る機能があるのですがこれがちょっと分かりにくい。
どう分かりにくいかというと具体的に画面を見てもらった方が早いと思うので、まず以下のAmazonの注文確定前の画面を見て下さい。
今回はこの画面の内「お届け先の住所」を変更したいと思ったのですがどこを選択すれば良いのか良く分かりませんでした。
パッと見、目についたのは電話番号の右にある [変更] というリンク。
が、しかし、この変更というリンクはどうやら「電話番号」の変更であって住所の変更ではないのでは無いかと思い最初は選択しませんでした。（結局このリンクが正解なのですが。）
なぜ、電話番号の変更という風に受け取ってしまったかというと、この画面の[変更]というリンクは「左に表示されている項目に対して変更を行う為に利用するもの」という風に思い込んでしまったためではないかと思います。
じゃあなんでそんな風に捉えてしまったのかというと、以下の図に示すようにこの画面においてはそういう風に認識するのがどちらかというと自然な設計になっているためだと考えられます。多分。
配送先の住所以外は上記の図に示すようにほぼ1行で項目と変更のリンクが紐づいていますが、住所の部分だけは以下の図のように複数行に対しての変更という意味合いになっているため、ちょっとした混乱が生じたのだと思います。
じゃあ、どうすりゃ分かりやすくなるのかという事ですが、それは次回以降の更新で気が向いたら書こうかと思います。
無駄にハードル上げたのでこのまま放置かもしれませんが。
フォームやボタンなどの部分ごとのUIが探せる「UI Cloud」
UI Cloud http://ui-cloud.com/
今更知ったのでメモ。
国内のサイトだと主にWebサイトの部品を中心とした「ブブンデザインアーカイブ」さん等がありますが、それと同様にWebデザインやモバイルアプリのUIを紹介しているサイトです。
こんな感じでPSD形式のUIキットがまとめられてるのが良いですね。
ライセンスはそれぞれ異なるので、利用する場合は要確認。
