TOP デザイン・情報設計・UI ギルズ・コルボーン氏の「Simple and Usable」書籍を読む:勉強会レポート

ギルズ・コルボーン氏の「Simple and Usable」書籍を読む:勉強会レポート

UX DAYS TOKYO 2017 登壇者書籍「Simple and Usable 」2010刊 を教材に、読書勉強会が開催されました。

Parts毎に8人のプレゼンターが交替で解説。現役のUXデザインに関わるメンツ(勉強会募集ページで手を挙げてくれた方とスタッフ)がプレゼンターです。各々、事前に原書で読んできたものに加え、7年前に書かれた内容についての所感や“今はこうだよね”という事例が添えられ、解釈を助けてくれました。

ギルズ・コルボーン氏とは、4月1日のニュースで話題の世界最大に成長した音楽配信サービス「Spotify」をクライアントに持つデジタルコンサルティングファームの共同創始者であり、世界最先端に至る数々のUXデザインに取り組む幅広いキャリアをもつトップスピーカーの1人です。

もちろん、UX DAYS TOKYO 2017の来日で、この書籍に書かれている内容をレクチャーされるわけではないのですが。過去のあのヒット商品はどのような文脈で生まれたのか?を知ることだったり、過去の試行や分析を理解しておくことで、カンファレンスに向けて解像度を上げておこうという目的で開催されました。

時代に遅れないように学び続けるには、未だ翻訳されてない新しい書籍を頑張って読むこともアリですが、生のカンファレンスやワークショップに参加するのは絶好のチャンスでしょう。以下、全訳にはなりませんが当日の様子を紹介します。

Part.1 Why are we here? なぜ、ここにいるのか?

この本について

  • 「シンプル」とは何か?
  • なぜシンプルでないものが生まれてしまうのか?
  • どのようにシンプルなデザインを作ればよいのか?

シンプルとは、使いやすいと「感じる」ことですが、そもそもが主観的なものであり、何をシンプルとみなすかは人によって異なります。Part.4担当の安井さんから「Youtubeの画質が良い悪いは主観的なものだよね」という声が上がりました。

企業単位でのゴール定義が必要、という事

  1. シンプルを目指すことで売上・価格・コストのどれが変化するか?
  2. 重要・実現高いものどれかか?

装飾は全てサービスや機能の目的と結びつくもの、その他は排除されていることが「シンプル」といえる。と書かれています。

株式会社ビービット エンジニア 大谷直也さん

Part.2 Setting a Vision ヴィジョンを設計する

このパートは最もボリュームがあります。心構えや目的設計の話です。

目的設計とは、制限の範囲内に収まらなければならない解決策

まず、オフィスの外へで出なさい。ディーラーのマネージャーが日報というタスクを終えられない、顧客管理フォームを入力できなかった理由を考えます。なぜか?彼らは、接客が主たる業務なのでPCの前でずっと座っていられるわけではありません。そういった「制限」のあるユーザーに対して入力のタスクを短くして、中断したところから再開できるように改善の設計をすればよいのです。

3つのタイプのユーザーについて

  1.  Experts(熟練者)
  2. Willing Adaptors
  3.  Main Streamers(主流派)

なぜExpertの顧客を無視するべきなのか?

Main Streamersは学んだことを忘れたり、指示を無視したり、初心者のような振る舞いに後戻りしてしまう傾向があります。だから、Expertを基準にしていてはそもそもサービスが成立しないということでしょうか。

エモーショナルなニーズについて

感情的な目標を理解することは、設計のなかで何が本当に大切なのかを知る手がかりになります。鍵となる感情はユーザーが(自分で)コントロールできていると(心地よく)かんじること。タスクを先送りにしても後でまた見つけることができるという自信を感じさせることが必要。単純さとは「コントロール」しやすさのこと。

ユーザー体験を描写する

「物語」はビジョンを表現する上で優れた手段です。紙にストーリーを書くときの注意点などが書かれています。ジャーニーを細かく書きすぎることについてのデメリットなど。

ユーザビリティの目標 / シンプリシティの目標について

比較表でその難易度に言及しています。シンプルな体験を設計することとは、究極の目標を目指すこと。成功する解決策について、スティーブ・ジョブスの名言引用などがあります。

WDE 代表:UXスペシャリスト、ノーマン・ニールセンUXマスター 菊池崇

Part.3 シンプルにする4つの方法

「複雑なものをシンプルにした経験を聞かせて」デザイナーの面接で必ず聞くこと

シンプルにする課題はテレビのリモコンです。ボタンは40~50もあります!

  1. Remove 削除する→Part.4
  2. Organize 整理する→Part.5
  3. Hide 隠す→Part.6
  4. Displace 移す→Part.7

この4つの手法は次のPartに続きます。一長一短なので、抱えてる問題によって正しいものを選択しましょう。

フリーランスエンジニア 梶嶋佐知子さん

Part.4 Remove 削除する

完成したソフトウェアの機能の64%は”ほとんど使われない”

2002年のStandishのグループの研究によるファクトが示されます。しかし、ただ取り除けば良いというものではない。商品価値を上手く伝えるため、共感する商品に洗練させるため機能を削除したプロダクトの例があげられます。(安井さんは、最近発売された保温機能のないバルミューダの炊飯器も例にあげました。)機能を盛れば盛るほど特徴が薄れ平凡になっていきます。機能 vs ユーザビリティ=機能追加は戦略を失うことだと言っています。一度作った(コストをかけた)ものは外せない「コンコルド効果」とも言うそうです。

機能に優先度をつけよう。

  1. ユーザの目的を定義、機能に優先順位をつける。→ DVDを見る、CDやMP3が聴ける…
  2. メイン機能にフォーカスする。→ DVDを見る
  3. メイン機能の外乱となる要素を定義する。→ 電話がかかってくる
  4. 外乱を取り除くようにする。→ 一時停止できるように…
  • 認知 情報量を減らす。言葉を完結にする。(データインク使用量を減らせ)
  • 判断 デフォルトを用意する。選択肢を減らす。(フォルクスワーゲンの広告)
  • 操作 アップルストアのエレベーター(操作させない)

安井さんのサンプルは、現在の日本都市において共感するものが多かったです。

株式会社ジャストシステム UXデザイナー 安井鯨太さん

Part.5 Organize 整理する

構造化し、整理することは、物事をシンプルにするための一番の近道

ユーザーは、たくさんのカラフルなボタンが欲しい(使いやすい)のではなく、重要なものだけを強調するのがあるべき姿です。

「どこから操作をはじめるか」は「どうやって話しかけるか」

  • 整理すること
  • 情報を分類すること
  • 行動や振る舞いに合わせて整理すること
  • 抽象的 かつ、明確な違いがあること
  • アルファベット順とフォーマットの形式
  • 検索すること

情報の分類、いわゆるカテゴライズを使用した整理について

情報 は「一口で食べられる大きさに整理すること。」チョコレートの粒にたとえています。わかりやすいですね。

7±1で大丈夫

マジックナンバー7±2:わたしたちが短期記憶で記憶できる情報の数は、7プラスマイナス2の範囲(1956 George Armitage Miller)
マジックナンバー4±1:わたしたちが短期記憶で記憶できる情報の数は、4プラスマイナス1の範囲(2001 Nelson Cowman)認知心理学の観点ですが、50年幅でこんなに差があるんですね。

ユーザーの行動や振る舞いを理解する

オンラインマーケットのユーザー手順の例

分類する際のラベリングについて

クルマを買うときの「標準装備」「オプション」「アクセサリー」の例があげられます。「外装」「内装」「性能」というカテゴリーが良いと言っています。
期待している一連の行動とタスクに沿った整理について「アルファベット順は多くの場合、項目をごちゃ混ぜにする。」とも言っています。

検索による整理。時間(タイムライン)と場所による整理。グリッドによる整理。大きさと位置による整理。レイヤー構造による整理。色分けによる整理。と続きます。

田屋さんご自身のリアルな現場感覚で、時代差分も示してくれました。

Tigerspike UXデザイナー 田屋和美さん

Part.6 Hide 隠す

「いくつかの機能を隠すことは、低コストのソリューションです。しかし、どの機能を隠すべきですか?」

めったに使わないけど必要な機能を隠す

メインストリームのユーザーがめったに使うことはないが、更新する必要のある機能は、通常、隠すのに適しています。これらの機能は、「ビジョンの設計」セクションで書いたストーリーには、ユーザーの目的には関係なく、またはどこにいるのかという点では表示されません。

☓ ユーザーにカスタマイズさせる
☓ 自動カスタマイズ

失敗例が

Progressive disclosure 階層型の情報開示の例

最初は、ユーザーに最も重要なオプションのほんの一部 を表示します。ユーザーがそれらのオプションを要求した場合にのみ、より多くの特殊オプションを表示します。「ファイルを保存する」「どこに保存する?」

Staged disclosure 逐次型の情報開示の例

例えばAmazonで買物するときの、サインイン〜注文確定までユーザーがインターフェースに深く進んだときに機能を表示するもの。

合図と手がかり(Adobe illustratorツールパレットの▼押すと展開される)

見つけやすく(路地へ誘導するサイン)
川井さんのPart ではサイドメニューとして「ハンバーガーメニューは何が問題でしょうか?」というサンプルをいくつか解説していただきました!

株式会社ジャストシステム UXデザイナー 川合俊輔さん

Part.7 Displacing 移す

デバイス間の「移す」ということ

リモコンの設計の改善話の続き、7章のテーマは「移す」で始まります。
必要最小限の機能しか残さない:stop, pause, play, navigation button
他の機能はテレビ画面に移動します。移動することで、作るコストも削減できます。
ユーザにとってわかりやすく、使いやすくなります。

適切な機能を適切なプラットフォームに移す

プラットフォームによって、移し方も変わっていきます。例えば、RunKeeperというランニングアプリではモバイルとウェブの機能設計はそれぞれ異なっています。モバイルの方の機能はランニングした時の時間、ルート、距離、消費カロリーなどといった一時的な時間のデータを集める機能です。こちらの機能を使うユーザにとって「スタート、ストップ」ボタンを押すと、すぐ利用できます。一方、PC側ではモバイルにより取得してきたデータを詳細に表示します。役割分担ですね。

上記のような設計により、全機能を複数のプラットフォームに分けることで、シンプルになります。

旅行を計画するサービスtrip advisorの再設計の例もありました。

「ナイフ」と「ピアノ」共通点は一般の人も、熟練者も自分の技術力に応じて様々な使い方ができます。「便利な」機能数を最小限に抑えているからでしょう。

プロトタイプとモックでテストし、ユーザの行動を適切に理解しましょうと書かれています。

システムエンジニア  VU thuy trang さん

Part.8 efore we go さらに進む前に

シンプルにしても複雑さは常にどこかに表れる

(もぐらたたきのように)複雑さの上手い配置を決めて、シンプルに感じさせること
Flipの自動フォーカス or iPhoneの指を使ったフォーカス

1回の登録ですぐ使えるfacebook or ユーザーが自由にカスタマイズするTumblr

世の中にあるプロダクトを比較してUXを考えます。

ユーザー体験の細部に気を配らないと不快感を生みかねない

デザインはユーザーの能力を超えない。
デザインはユーザーにゆとりを与える。

最終章では、シンプルさと複雑さの裏腹を(いつも)意識しなさい!と言っている気がしました。

コンサルタント 柴田真吾さん

勉強会を終えて

技術書の読書会というとコードレビューのようなページをめくる淡々とした場面を想像していましたが、8人の事前準備のおかげで、わずか2時間のうちに1冊を読み終えることができました。

いま読むべき“UXデザインに関する”書籍情報など、プレゼンテーターからトレンドをキャッチできたり、勉強会後も話しが尽きません。書籍によっては1日で終わらない可能性もありますが、また、タイトルを選んで皆で読み込みたいと思います。ともかく、UX DAYS TOKYO 2017 当日が楽しみですね。ワークショップは逐次通訳で手を動かしながらの学習です!

UX DAYS TOKYO オーガナイザ/デジタルマーケティングコンサルタント 著書 ・ノンデザイナーでもわかる UX+理論で作るWebデザインGoogle Search Consoleの教科書 毎年春に行われているUX DAYS TOKYOは私自身の学びの場にもなっています。学んだ知識を実践し勉強会やブログなどでフィードバックしています。 UXは奥が深いので、みなさん一緒に勉強していきましょう! スローガンは「早く学ぶより深く学ぶ」「本質のUXを突き止める」です。

まずは言葉を覚えよう

「UX用語」のカテゴリー

UXを取り入れるためのマインドセット

「UX格言」の新着

UX格言 一覧

現場の声をリアルで届ける

動画で学ぶUX 「You X Tubo(ゆーえっくすつぼ)」の新着

You X Tubo(ゆーえっくすつぼ) 一覧