[&] CSS Nite LP33 #3

CSS Nite LP33
----------------
アプリケーションのイディオムデザイン 上野 学（ソシオメディア）

普段、コンサルタントとして話すことが多いのですが、
会話する相手はネクタイしているおじさんなので、
自分より若い人の前で話すのはあまり無いのですが、

UI/UX ということで、専業系で15年ちかくこういうことをやっています。
UXの良いものを作ろうというと、ユーザーを観察しよう。
好きな観察スポットがあって、某牛丼チェーンに行きます。
何ヶ月か前に、チケット販売（食券）の画面があります。

[店内] [お弁当] の選択肢がありました。
[店内] を押すと、メニューらしきものが出てきます。
[牛すき丼] を押します。
もう一画面でてきます。ごちゃごちゃしていてわかりません。
その中で一つを選びます。
やっと買えましたと思ったら、
その瞬間、この機会は「お金を先に入れてください」と
大きな音が流れます「えっ？」となります。

非常にこれは悪いデザインだな〜と
初めてこの機械を使った人は、95% 機械に怒られると思います。
プロトを作れば一瞬で問題が解るようなものです。

外国人のお客様が大量に来た時、「お金を先に入れてください！」と
言われても、日本語が解らない。「どうやって買うんだ？」となった。
今のところ改善されていません。

こういったことは、テストすれば解決するのではないかと？
そもそもアンチパターンとして避けるべき。
設計するときの基本的の、よくやるやり方をお話しできれば。

@manabuueno
ソシオメディア株式会社
90年代後半から、Apple Japan の Webサイトの構築でした。
基本のフォーマットはアメリカのもので、日本のローカライズで、
Apple ガラモンドを日本でのデザインガイドラインを作っていました。
ソシオメディア、UXデザイン戦略コンサルティング

われわれの仕事のほとんどは見せられない。
初期の段階のコンサルティングなどだったりして。

国立国会図書館サーチ
学術系、
法律関係のデータベース、複雑なものが100画面あっり、
フジテレビオンデマンドの設計デザインをしたりしています。

Testwell というエディタ、JavaScript でアクションを追加できる。

ウェブ
ビジネス
モバイル
タブレット
デスクトップ
専用端末
ウェアラブル

ウェブ戦略としての「ユーザーエクスペリエンス」
Web情報アーキテクチャ
デザイニングインタフェース

MacOSメタファー、
ちょっと前の Podcast アプリ、オープンリール風、バカバカしいところで凝ったものを作るのがいいところ、
フラットデザインみたいな話しになってきて、
Window8 も、Google Now も、
iPhone も。
この時に、前のメタファーみたいのからフラットになって、
スキュオモーフィックから、フラットになりました。
アドレス帳、装飾が減りました。ゴテゴテしたところが減りました。
それだけじゃないと思っています。

アドレスブックみたいなメタファーがデザインされています。
ページをめくる操作とか、
ブックマークとか、
それがべたっとしたわけですが、
情報の見せ方が変わっています。
3階層、スクロールも面積が増えました。
単純に現実のものっぽいグラフィックよりも、
情報の見せ方が変わっています。
非常に前のものと、最近のものと、見た目も変わっています。
画面構成要素はかわっていないのですが、
月を跨いでスクロールできるようになっている。
メタファーとしてカレンダーは月ごとにめくるものだったのだが、
コンピュータの動きを考えると、エンドレスでスクロールしても良いという
気づきがあって、単にフラットになったというか、
ソフトウェアならではの情報操作に変わってきている。

スキュアモーフィック　→　フラット
メタファ　→　イデオム

イデオムに変えていく。
我々がパソコンを使うとき、インタラクションの階層があると思います。

マウス移動。マウスダウン、マウスアップ
テキスト表示、四角、丸、
OSが持っている機能があると思います。

押し下げて離すとクリックになります。
ダブルクリック、ドラッグ＆ドロップ
アイコン、チェックボックス、メニュー

イデオム
ビジュアル言語として、あるいはインタラクションのパターンとしての慣用表現
プリミティブの組み合わせでアプリの概要を示す
ちょうど良いメタファを探すことよりも、学習しやすいイデオムを作る
インタラクションの記号性や規則性から、ユーザーが自然にその意味や扱い方を学習できるようにする
すべてのイデオムは学習を必要とするが、優れた井でオムは一度学習すれば身に付く Alan Cooper

iPhone 、コンテンツを触ればスクロールする、スクロールバーではなくて、

抽象度がいろいろありますが、
フォームが整然と並んでいると、入力フォームだと、なんとなくわかる。
モーダルシーケンス、ウィザード、これはモーダルシーケンスだなとわかる。
文字のスタイルを変えるボタンが上部にあれば、エディタだとわかる。
ツールパネルみたいのがあれば、これはグラフィック系のキャンバスだなとわかる。
格子状に線がはいっていれば、スプレッドシートだなとわかる。
Webブラウザだなと解る。
メディアプレイヤー、再生／ストップ／ポーズ
全画面でグラフィックが表示されていればゲームだと思う。
人のアイコンが並んでいればタイムラインだとわかる
マップっ報じ

一覧と詳細
マスター＆ディテール
アプリケーションを作る上で基本です。
一覧の中から選ぶと、詳細が表示される。
カレンダー、ファイルマネージャー、ビデオ／サウンドオーサリング
チャットみたいなもの、
スプリングボード、アイコンが並んでいるものがあればホーム画面だとわかる
スライド、タッチパネルデバイスで、指で横になぞると、次の画面に移るイデオム
古いiPHoneを見ると、前後の矢印がある。最近は前後ボタンが無くなってます。
イデオムを学習したのだから、余計なものとしてボタンをがなくなった

イディオマティック・デザイン
それをどうやって作るのか？

まずアプリケーションを作るとき、
ウィンドウという概念、GUIの基本的なもの、
iPhone にも ウィンドウという概念はあって、
ドキュメトウィンドウ、ドキュメントごとにウィンドウが開くもの、
アプリケーションウィンドウ、アプリケーションが1画面で全て含まれるもの、
ダイアログ、パネル　も一種のウィンドウ

ブラウザ、モバイル、もアプリケーションウィンドウです。
それぞれに共有して、ボタンや機能がついている。
ブラウザならではの機能があったり。

オブジェクト VS タスク
ユーザーに何を最初に見せるのか、
例えば、タスクを最初に見せるケース、
同じみの ATM , やることがボタンとして並んでいます。
タスクが最初に見えています。
オブジェクトベースのものもあります。
もの、対象物が最初に見えているもの、写真ギャラリーなど。

まずここでの考え方、

オブジェクトベース
　同じ性質の対象物が複数あり、共通のアクションがある
　一覧と詳細
　ドキュメントウィンドウ
タスクベース
　タスク同士が独立している、あるいは対象物が一つしかない
　モーダルシーケンス

●顧客管理システム
ある顧客管理システム CRM, ここで何をやるかというと
左にメニューがあります。顧客がどういうステージにいるかというステージで
分けられています。
ある顧客の情報を見たいと思えば「顧客情報」メニューを押します。
「これはいけませんね〜」と作り直したのがこういうものです。

水平のグローバルナビがあって、

●コンテンツオーサリングシステム
ページの追加と削除／内容編集／ページ設定／サイト設定
ページの追加
ページの移動
ページの削除

サイト設定があって。

ここで何をやったのか？
基本手順。

●デザインパターンを知っていること
●オブジェクトベースの場合
　ユーザーにとっての主要オブジェクトを抽出
　オブジェクトの階層に応じてペイン／ドリルダウンを作る
　オブジェクトの選択　→アクションの選択

●タスクベースの場合
　タスク（業務）を把握
　作業効率の高い順序でモーダルシーケンスを作る
　タスクの選択　→必要なパラメーターの入力

先ほどの顧客管理システム。
オブジェクトベースに作り直しました。
案件検索はタスク、ごちゃごちゃになっていたこと。

主要オブジェクトはスケジュール、案件、顧客、営業資料
これを整理して、案件とか、オブジェクとのグループ名を分類項目として持って来て、
レイアウトは当然、上の方にあるものが階層が高い。

ページというオブジェクトがあって、
ページの内容というオブジェクトがあって、
サイトという概念がある。

サイト、ページの一覧、ページ設定、メタデータ、内容、

●コツ

タスク選択ではなく、オブジェクトグループの選択から操作が始まるようにする
処理対処オブジェクトの一覧をできるだけ早く見せる。
エンティティアイコンをつけるといい。（ページアイコンとか。目印になる）
同じ性質ものがならぶところにアイコンを作る
タスクをタスクの数だけでなく、

通過換算
1 ドル を 円で。
左側と右側が＝になろうとする、線形の流れはなく、どこから操作しても良い

直進／左折／右折
ハンドルという新しい世界観、新しいイデオムを発明していくことが求められている。

イデオムオリエンテッドなプロジェクト
上流工程でちゃんとやります。

What - What - Gap - How
プロジェクトの開発プロセスの中で、上流でデザインする
物として成り立つのか？意味があるのか？初期の段階で作らないといけない。

企画の始まりはデザインの始まり。
仕事でも要件定義とかRFPが出来る前、の支援をすることもあるのだが、
その段階でデザインを作ってしまう。
プロジェクトによっては許されないこともあるのですが、

イディオム、プロト、リファレンス実装
本番と同等のコードを書いて、検証する。

イディオムデザイン
プロトタイピング＆テスト
リファレンス自走＆テスト