62
2011-03-04 pixiv × UI の話

2011-03-04 pixiv × UI の話

Embed Size (px)

DESCRIPTION

pixiv SPRING BOOT CAMP 2011 http://recruit.pixiv.net/springbootcamp/ でインターン生向けにUIについて発表しました。

Citation preview

Page 1: 2011-03-04 pixiv × UI の話

2011-03-04

pixiv × UI の話

Page 2: 2011-03-04 pixiv × UI の話

•自己紹介

•pixiv UI チームの紹介

•pixiv のフロントエンド

•最近考えている UI のこと

•検索フォームを作り直そう

Page 3: 2011-03-04 pixiv × UI の話

自己紹介

Page 4: 2011-03-04 pixiv × UI の話

•横野巧也

•よこすけ

•@yksk

•2010年10月から pixiv

•UI エンジニア

Page 5: 2011-03-04 pixiv × UI の話

好きなこと

Page 6: 2011-03-04 pixiv × UI の話

♥ お絵描き

Page 7: 2011-03-04 pixiv × UI の話
Page 8: 2011-03-04 pixiv × UI の話

♥ Tumblr

Page 10: 2011-03-04 pixiv × UI の話

♥ JavaScript ♥ UI

Page 11: 2011-03-04 pixiv × UI の話

pixiv UI チームの紹介

Page 12: 2011-03-04 pixiv × UI の話

pixiv などの UI をあーだこーだ話すチーム

Page 13: 2011-03-04 pixiv × UI の話

@yksk@ysp @norio

Page 14: 2011-03-04 pixiv × UI の話

•ブレスト

•ペーパープロトタイピング

•デザイン

•実装

Page 15: 2011-03-04 pixiv × UI の話

最近の仕事

Page 16: 2011-03-04 pixiv × UI の話

•HTML、CSS、JS最適化

•マンガビューワー

Page 17: 2011-03-04 pixiv × UI の話

pixiv のフロントエンド

Page 18: 2011-03-04 pixiv × UI の話

簡単に…

Page 19: 2011-03-04 pixiv × UI の話

•HTML5 、 CSS3 化

•巨大 CSS Sprite 画像をどうにかしろ( iPad )

•jQuery 化( Prototype.js 廃止)

•モジュール化

Page 20: 2011-03-04 pixiv × UI の話

最近考えている UI のこと

Page 21: 2011-03-04 pixiv × UI の話

きづかないくらいイージーなクオリティーsuper speeder Judy Jedy / capsule

Page 22: 2011-03-04 pixiv × UI の話

普通を目指す普通 = 引っかかりを感じさせないデザイン

Page 23: 2011-03-04 pixiv × UI の話

UI は減点方式( UX は加点方式)

そうあるべき姿に収める

Page 24: 2011-03-04 pixiv × UI の話

検索フォームを作り直そう

Page 25: 2011-03-04 pixiv × UI の話

これ

Page 26: 2011-03-04 pixiv × UI の話

は糞。説

Page 27: 2011-03-04 pixiv × UI の話

すみません納得しないまま実装しました

Page 28: 2011-03-04 pixiv × UI の話

なんか使いにくい。。

Page 29: 2011-03-04 pixiv × UI の話

違和感を感じたら問題を探す

Page 30: 2011-03-04 pixiv × UI の話

触ってみよう…

Page 31: 2011-03-04 pixiv × UI の話

色んなサービスの UI を見よう!いつも使っているサービスがお手本

Page 32: 2011-03-04 pixiv × UI の話

•Google

•Facebook

•Tumblr

•Twitter

•Vimeo

•GitHub

Page 33: 2011-03-04 pixiv × UI の話

問題点

Page 34: 2011-03-04 pixiv × UI の話

•仲間外れがいる

•ステップ数が多い

•検索対象が分からない

Page 35: 2011-03-04 pixiv × UI の話

仲間外れがいる

Page 36: 2011-03-04 pixiv × UI の話

•タグ(A)

•タイトル・キャプション(A)

•ウェブ ←??

•ユーザー(B)

•ランダムピックアップ ←!?

Page 37: 2011-03-04 pixiv × UI の話

コンテキストを揃える

Page 38: 2011-03-04 pixiv × UI の話

ステップ数が多い

Page 39: 2011-03-04 pixiv × UI の話

12

3

4•マウスオーバーでプルダウン

•対象選択 → 検索

•検索ボタンは必要か?

Page 40: 2011-03-04 pixiv × UI の話

検索対象が分からない

Page 41: 2011-03-04 pixiv × UI の話

もう一度触ってみよう…

Page 42: 2011-03-04 pixiv × UI の話

思考の方向性ワード入力 ⇄ 検索対象選択

Page 43: 2011-03-04 pixiv × UI の話

•Google

•Facebook

•Mac

•iPhone

Page 44: 2011-03-04 pixiv × UI の話

ワード入力 → 検索対象選択

Page 45: 2011-03-04 pixiv × UI の話

•pixiv

•Tumblr

•Vimeo

Page 46: 2011-03-04 pixiv × UI の話

ワード入力 ⇄ 検索対象選択

Page 47: 2011-03-04 pixiv × UI の話

どちらにも行ける = 方向付けが弱い

Page 48: 2011-03-04 pixiv × UI の話

解決案

Page 49: 2011-03-04 pixiv × UI の話

何も要らないんじゃね…?

Page 50: 2011-03-04 pixiv × UI の話
Page 51: 2011-03-04 pixiv × UI の話
Page 52: 2011-03-04 pixiv × UI の話

•デフォルトでタグに飛ばす(現状でもデフォルト)

•ほとんどがタグで足りる(と思われる)

•ステップを踏んだ検索で対象を分かりやすく

Page 53: 2011-03-04 pixiv × UI の話

= Google

Page 54: 2011-03-04 pixiv × UI の話

= Twitter

Page 55: 2011-03-04 pixiv × UI の話

Google 、 Twitter のUI 意図を追体験

Page 56: 2011-03-04 pixiv × UI の話

結果として同じデザイン劣化コピーにならない

Page 57: 2011-03-04 pixiv × UI の話

どうしてこうなった!リバースエンジニアリング

Page 58: 2011-03-04 pixiv × UI の話

!= Vimeo

Page 59: 2011-03-04 pixiv × UI の話

!= Tumblr

Page 60: 2011-03-04 pixiv × UI の話

何を検索出来るのか謎なサービス先に見せる意味がある

pixiv は…?

Page 61: 2011-03-04 pixiv × UI の話

作り直す時の注意

Page 62: 2011-03-04 pixiv × UI の話

•今あるものを変えるとユーザーの再学習が発生

•とりあえず「使いにくい」

•機能を減らすと不満が起こる

•リニューアルを機に減らす(クックパッド)

•しれっと減らす( Tumblr )

•古いブラウザの切り方 → 最初から切れ