#UiCamp
Yahoo!検索のデザイナー
あで検索すると「あで検索したあなたへ」という表示が出る。 これはiOS6でブラウザ開いたとき、真っ白なのでとりあえず「あ」で検索する人が多かったことからつけた。
= ユーザーのために。
「考える、つくる」がとにかく開発に必要 「つくる」は大体皆できる。「考える」にユーザーファーストを入れる。
インタビュー・観察(30min)、分析・ブレスト(30min)、プロトタイピング(30min)、ユーザーテスト(30min)
僕たちはユーザーを知らない。遠くにいるユーザーよりすぐ近くにいるユーザーの好み、使い方をインタビューしてまず洗い出してみる。
すぐ話したらインタビュー直後だから頭が活性化していてアイディアがいっぱい出る。
ペーパープロトタイピングでもいいし、フロントエンド開発してモック作っちゃってもいい。一番得意な方法でやっちゃう。
仮説があったら5分で作ったものがダメかどうか試してもらったらわかる。
GMOデザイナー
例:カメラアプリ
- カメラを起動
- 撮影対象にピントをあわせる
- シャッターを押す
- 撮った画像を確認する
- 更に取る場合は1.に戻る
開始があって完了がある。 タスクの流れをチェックすることで各タスクが滞りなく終えられているかがチェックできる。
提供するサービスでの体験とユーザーの心の動きを記述する。(うちでやってるユーザーフロー) 画面をならべてユーザーのフローを作ってユーザーのエモーション(欲求)に対応した構造(遷移)になっているかどうかチェック。
- 行動をサポートできているか?
- 行き止まりを作っていないか?
- 障害を作ってないか?
リブセンス フロントエンドエンジニア
おもいっきりフロントエンドのエンジニアリングの話なので割愛 どのようにデザインすればフレームワーク化しやすいかはいずれまとめたい。
GMO シニアクリエイター
デザインガイドラインを読もう Apple, Microsoft, Google
でも、実装との間でギャップが出てくる。
モバイルデザインパターン(オライリー)
どんな優れた機能でも使いにくいものは使われない 0から生み出すのは難しい
UIをパターン化しよう
成功事例をいっぱいサンプリングしてパターン化(例:上位人気ゲーム10個のUIを抽出してパターン化) パターン化したら、自分のアプリのUIにとりあえずPhotoshopで適用してみる
- 比較検討できる
- 成功事例なので意思決定しやすい
- 成功確率が高い
デザインはセンスではなく理論 理論の上にセンスを載せよう
リブセンス デザイナー
実装とデザインのギャップをなくそう
- デザイン時点でHTML構造を考える
- アイコンはベクターで作成(ウェブフォントにも対応可)
デザインのフレームワーク化とかやると、整理の過程で皆の頭にパーツが入っていくから良い
Twitterの#UiCamp
で検索してスライド写真を見よう