Upload
takuya-yokono
View
4.617
Download
1
Embed Size (px)
DESCRIPTION
pixiv SPRING BOOT CAMP 2011 http://recruit.pixiv.net/springbootcamp/ でインターン生向けにUIについて発表しました。
Citation preview
2011-03-04
pixiv × UI の話
•自己紹介
•pixiv UI チームの紹介
•pixiv のフロントエンド
•最近考えている UI のこと
•検索フォームを作り直そう
自己紹介
•横野巧也
•よこすけ
•@yksk
•2010年10月から pixiv
•UI エンジニア
好きなこと
♥ お絵描き
♥ Tumblr
♥ JavaScript ♥ UI
pixiv UI チームの紹介
pixiv などの UI をあーだこーだ話すチーム
@yksk@ysp @norio
•ブレスト
•ペーパープロトタイピング
•デザイン
•実装
最近の仕事
•HTML、CSS、JS最適化
•マンガビューワー
pixiv のフロントエンド
簡単に…
•HTML5 、 CSS3 化
•巨大 CSS Sprite 画像をどうにかしろ( iPad )
•jQuery 化( Prototype.js 廃止)
•モジュール化
最近考えている UI のこと
きづかないくらいイージーなクオリティーsuper speeder Judy Jedy / capsule
普通を目指す普通 = 引っかかりを感じさせないデザイン
UI は減点方式( UX は加点方式)
そうあるべき姿に収める
検索フォームを作り直そう
これ
は糞。説
すみません納得しないまま実装しました
なんか使いにくい。。
違和感を感じたら問題を探す
触ってみよう…
色んなサービスの UI を見よう!いつも使っているサービスがお手本
•Tumblr
•Vimeo
•GitHub
問題点
•仲間外れがいる
•ステップ数が多い
•検索対象が分からない
仲間外れがいる
•タグ(A)
•タイトル・キャプション(A)
•ウェブ ←??
•ユーザー(B)
•ランダムピックアップ ←!?
コンテキストを揃える
ステップ数が多い
12
3
4•マウスオーバーでプルダウン
•対象選択 → 検索
•検索ボタンは必要か?
検索対象が分からない
もう一度触ってみよう…
思考の方向性ワード入力 ⇄ 検索対象選択
•Mac
•iPhone
ワード入力 → 検索対象選択
•pixiv
•Tumblr
•Vimeo
ワード入力 ⇄ 検索対象選択
どちらにも行ける = 方向付けが弱い
解決案
何も要らないんじゃね…?
•デフォルトでタグに飛ばす(現状でもデフォルト)
•ほとんどがタグで足りる(と思われる)
•ステップを踏んだ検索で対象を分かりやすく
Google 、 Twitter のUI 意図を追体験
結果として同じデザイン劣化コピーにならない
どうしてこうなった!リバースエンジニアリング
!= Vimeo
!= Tumblr
何を検索出来るのか謎なサービス先に見せる意味がある
pixiv は…?
作り直す時の注意
•今あるものを変えるとユーザーの再学習が発生
•とりあえず「使いにくい」
•機能を減らすと不満が起こる
•リニューアルを機に減らす(クックパッド)
•しれっと減らす( Tumblr )
•古いブラウザの切り方 → 最初から切れ