「深津貴之氏に学ぶ、スマホUI/UX講座 〜iOS7についての考察とfladdictデザイン論〜」に参加してきました。

はじめに

「深津貴之氏に学ぶ、スマホUI/UX講座 〜iOS7についての考察とfladdictデザイン論〜 【NTT DOCOMO Ventures OPEN Event】」に参加してきました。講演の内容をレポートいたします。

目次

• iOSヒューマンインターフェースガイドラインについて
  • iOSヒューマンインターフェースガイドライン(iOS Human Interface Guidelines, H.I.G)とは?
  • デザインとは？
  • ヒューマンインターフェースの原則
• iOS 7のフラットデザインを理解する
  • iOS 7のデザイン
  • 手触りにも全て意味がある
• プロトタイピングについて
  • fladdict式メソッド (気をつけてること、つかっているもの)
• まとめ

iOSヒューマンインターフェースガイドラインについて

iOS Human Interface Guidelines (https://developer.apple.com/library/ios/documentation/userexperience/conceptual/MobileHIG/index.html)

iOSヒューマンインターフェースガイドライン(iOS Human Interface Guidelines, H.I.G)とは?

• Appleが配布しているドキュメント
  • iPhoneアプリのユーザーインターフェースを扱う際のガイドラインを解説
  • iOS Human Interface Guidelines
• iOS以外のプラットフォームにもそれぞれ独自のガイドラインがある
  • User Interface | Android Developers
  • User interface for Windows Phone 8
• 1つのプラットフォームのガイドラインを学ぶと、他も学びやすくなる
• 良いアプリを作るにはHIGを深く理解することが重要
  • エンジニアやプロジェクトリーダーも読むべきドキュメント

デザインとは？

いろんなデザイン

目的を提案する	デザイン
満足を与える	UX
使いやすくする	UI
わかりやすくする	情報デザイン

「デザイン = かっこ良くすること」だとは限らない。

デザインとは?

• 設計
• 複雑な問題を整理して解決すること
• わりとエンジニアリングに近い
• 文章を書く練習をすれば読みやすい文章を掛けるようになるのと同様に、勉強すれば人を困惑させないデザインは作れる。

ヒューマンインターフェースの原則

• インターフェース = 接点、境界面、接触面、接合面、仲立ち、橋渡し
• ヒューマンインターフェース = 人とモノをつなぐもの
• ヒューマンインターフェースの原則 = アプリがユーザーとコミュニケーションをする時の原則

1.必然性のあるビジュアル

• 機能と外見が調和しているか？
  • TPOにあわせた格好をさせる
    • ユーザーとコミュニケーションを取る
    • ドレスコードみたいなもの(例:ゲーム:楽しく、ツール:信頼性ありそうな)
• 機能に最適な外見を与えることで...
  • 使い方がつたわる。
  • とっつきやすくなる

2.一貫性

• アプリ全体でルールを統一する
  • 小さいルールや大きいルール
    • 操作方法、色の意味、アイコンの意味など
  • 他のアプリとルールが一貫しているか
    • ルールが一貫していれば、初めて触るアプリでもなんとなく操作が検討つく
  • アプリ内でルールが一貫しているか
    • ルールの例：重要な文字の色、タップ可能なUIの色
  • アプリの古いバージョンと新しいバージョンとの間でもルールを一貫させる
    • タイプライターの時代から変わっていない「QWERTY配列」
      • 打つ速度を落としてアームの衝突を防ぐため
      • 物理的な問題がない現代のパソコンでは新しい配列にすることも可能だが、移行は難しい
    • 人々が慣れ親しんだUIを採用する (変えるとしたら少しずつ変えていく)
• デバイスの文法
  • iPhoneアプリにおいては、どんな操作・どんなUIがスタンダードなのか?

3.直感的な操作

• 入力を直接的、直感的にする
  • 良くない例：スマートフォンゲームのゲームのバーチャルパッド
  • 推奨される例：直接キャラを操作
• ズームボタンより、ピンチ(iPadのアルバムアプリ)

4.フィードバック

• フィードバック = ある操作をした時に返ってくる反応
  • 水たまりにとびこんだ時の水しぶき、プチプチをおした時の感触
• iPhoneのタッチスクリーン：押した感触がない
• ユーザーの行動にしっかり反応を返すことは重要
  • タップされたボタンをハイライトする
  • アニメーションを使ってコンテンツの追加などを伝える
  • サウンドやバイブレーションで反応する
• どこで何が起きているか(起きたか)をユーザーに必ず伝える

5.メタファー

• メタファー = "なにか"を"他の別のもの"に例えて説明すること
• 慣れ親しんだものを使えば、学習ステップを省略できる
  • PCの"ゴミ箱"、ファイル、フォルダ
• 現実をモデルにしていれば、ユーザーは理解しやすい
• 使い方を認知してもらうための道具
• 注意点
  • 現実世界の欠点まで持ち込まない
  • 世代間や文化の違いで伝わらないものが存在する：フロッピーディスク、ダイヤル式の電話
• iOS 7で抽象的なデザイン要素が増えたのは、ユーザーがスマートフォンの操作に慣れてきたであろうから

6.ユーザーに選択肢を

• ユーザーに操作の主導権を与える
• 意思決定を奪わない
• 難しい操作、危険な操作を行う場面では...
  • キャンセル／アンドゥを実装する
  • 奥に隠したり、階層を深くしたりする

iOS 7のフラットデザインを理解する

Apple - iOS 7 (http://www.apple.com/jp/ios/)

iOS 7のフラットデザインは他のプラットフォームのフラットデザインとは細かいところが違う

iOS 7のデザイン

視覚的にはフラットだが、概念的／構造的には多層化

• ジャイロを用いたパララックス
  • 階層構造を伝えるための視覚的手段
• 曇りガラス上のブラー
  • 一時的なステートメントであることを明示的に提示
  • 前の画面に戻れることを暗示
  • 状況説明のために使ってる。おしゃれ機能じゃない
  • 完全に別画面にしてしまうと現在位置が喪失してしまう
• 画面遷移の変更
  • 俯瞰からコンテンツを拡大していく表現
    • カレンダーアプリの年→月の遷移
    • アルバムアプリの一覧→個別写真の遷移

コンテンツを中心に

• ナビゲーションを控えめに
• コンテンツを中心にする
• 色使い 大きさにきをつける

テーマカラー

• 押せる部分を伝えるために
• 色を使うことで分かりやすく

手触りにも全て意味がある

視覚的言語

• 非言語情報(グラフィックなど)をつかってユーザとコミュニケーションする
• 言葉じゃないけど、メッセージを伝達できる
• アニメーションを使ってできること
  • 注目を集める
  • 状態の変化をユーザーに伝える
    • ナビゲーションと遷移にアニメーションを使うことで「階層を潜る／階層を戻る／一時的モーダル」などを伝えられる
    • 一瞬の変化は知覚できない
  • 感覚のチャンネルが増えることで分かりやすくなる
  • 考える時間を与える
  • 処理中にアニメーションを表示することで、体感待ち時間をなくす
• 音を使う
  • 画面を見ていないユーザーにメッセージを伝える
• 良いデザインには、位置、色、動き、音、あらゆるものに意味・目的がある

プロトタイピングについて

Paper Prototyping Pad for iPhone (http://theguild.jp/archives/190)

• 道具
  • ピクセル定規
  • ノート・ペン・鉛筆
  • ステンシル
• 一番最初にリスクを検証するためにプロトタイプをつくる
• アプリ開発はスピードが大事だし、評価と検品が最後たと危険すぎるので
• 良いプロトタイプ
  • 問題を分割して作成したもの
  • コアだけ取り出してそこだけに特化したもの
• 良くないプロトタイプ
  • 一球入魂
  • モニタ上で作業が完結(チームでの共有が難しい/使いやすさが検証しにくい)
  • ゴージャスすぎる

fladdict式メソッド (気をつけてること、つかっているもの)

1.みんなでやる

• アプリのビジョンなどを共有できる

2.プロコンリスト

• 思い込みにブレーキを掛け、客観的に見れる
  1. 1. 長所と短所をリストにする(下表はプロコンリスト自体の検討の例)

  長所	短所
  客観的な評価可能 簡単に作れる 共有可能	感覚面の評価できない 正確な重み付けが難しい

  1. 重要度が同じものを相殺し、長所・短所のどちらに傾いているかを判断する

3.最初にプレスリリースを書く

• まだ商品がない状態であっても、商品の需要を測れる
• 商品の強みを確認することもできる
  • 強力なプロトタイピング!

4.フィッシュボーン図

• 問題を再帰的に分割していく
  • 「フワっとした問題」が具体的なものになる
  • 解決策も具体的に考えることができるようになる

5.ペーパープロトタイピング

• 長所
  • 速い!
  • 安い!
  • リスク最小!
  • みんなでできる!
• 短所
  • 遠隔での共有は難しい
  • アニメーション再現できない
• 手順
  1. 鉛筆で書く
  2. ペンで輪郭を清書する：UIの重要さごとに、太さを使い分け
  3. 濃い色と薄い色で要素わけ
  4. ポストイットを活用すれば、アラートなどの共通部品を使いまわせる
• 必ず複数のパターンを作る
  1. フィッシュボーン図を使って、問題を分割して
  2. その問題に対する複数(3つ4つ)のアプローチのペーパープロトタイプを作る
  3. その複数のアプローチに対してプロコンリストを作る
  4. 検討を行い、選択する
• ペーパープロトタイプ完成後の作業
  • 紙＋ポストイットの画面を撮影
  • 撮影したものを使ってPOP(POP prototyping on paper)でシミュレート

まとめ

ヒューマンインターフェイスガイドラインを参考にしながら「アプリの目的やユーザーの目的」を達成できるようなデザインを組み立てたり、 それぞれの「視覚的言語」が効果を発揮する場面を学んでユーザーとうまくコミュニケーションをとったりすることが大切だと思いました。 また、「フィッシュボーン図」「ペーパープロトタイプ」「プロコンリスト」の組み合わせを使うことで、プロジェクトの手戻りリスクを抑えることができそうです。