2011-03-04

pixiv × UI の話

•自己紹介

•pixiv UI チームの紹介

•pixiv のフロントエンド

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

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

自己紹介

•横野巧也

•よこすけ

•@yksk

•2010年10月から pixiv

•UI エンジニア

好きなこと

♥ お絵描き

♥ Tumblr

Tumblr Life Greasemonkey script

♥ 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 を見よう！いつも使っているサービスがお手本

•Google

•Facebook

•Tumblr

•Twitter

•Vimeo

•GitHub

問題点

•仲間外れがいる

•ステップ数が多い

•検索対象が分からない

仲間外れがいる

•タグ（A）

•タイトル・キャプション（A）

•ウェブ ←？？

•ユーザー（B）

•ランダムピックアップ ←！？

コンテキストを揃える

ステップ数が多い

12

3

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

•対象選択 → 検索

•検索ボタンは必要か？

検索対象が分からない

もう一度触ってみよう…

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

•Google

•Facebook

•Mac

•iPhone

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

•pixiv

•Tumblr

•Vimeo

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

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

解決案

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

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

•ほとんどがタグで足りる（と思われる）

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

= Google

= Twitter

Google 、 Twitter のUI 意図を追体験

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

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

!= Vimeo

!= Tumblr

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

pixiv は…？

作り直す時の注意

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

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

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

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

•しれっと減らす（ Tumblr ）

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