Pager Anti Pattern(Joke)

54
ページャーアンチパター » これは見た目のお話です。 » アンチパターンといいつつ、ケチをつけるだけのてい どひくい奴です » 真に受けるな » 当方主に管理画面などで年間多数のページャーを(略

description

Pager Night #1 talker uzulla.

Transcript of Pager Anti Pattern(Joke)

Page 1: Pager Anti Pattern(Joke)

ページャーアンチパターン» これは見た目のお話です。

» アンチパターンといいつつ、ケチをつけるだけのていどひくい奴です

» 真に受けるな

» 当方主に管理画面などで年間多数のページャーを(略

Page 2: Pager Anti Pattern(Joke)

経緯

Page 3: Pager Anti Pattern(Joke)

経緯

Page 4: Pager Anti Pattern(Joke)

経緯

Page 5: Pager Anti Pattern(Joke)

自己紹介

» uzulla

» PHPerです

» 「YAPC PHP」でググって出るトークを応援下さい

Page 6: Pager Anti Pattern(Joke)

兎に角「次へ」を出すページャー» ❌次がないのに!!!

» ❌次のページがあるか見てない

» ❌突然の404

» ✅実装コストが低くてオトク

Page 7: Pager Anti Pattern(Joke)

「○件中」» ❌実装コストが高い

» ❌どうでもいい過去ログをしれっとパージできない

» ❌がんばった結果、「1000件ある」ってかいて4ページくらいしかないようなサイトもある(Googleとか)

» ✅絶対的な数字なので、検索結果とかなら指標になる

Page 8: Pager Anti Pattern(Joke)

「○件中『○件』表示しています」» ❌「だから?」という世界

» 秘伝のタレ感ある

Page 9: Pager Anti Pattern(Joke)

「31件~60件を表示」» ❌「だから?」という(略

» セットの件中がない場合、有用さがない

Page 10: Pager Anti Pattern(Joke)

ページャーの「数字」がよくわからない» みんな大好きFC2動画

» 900件とかあるのに数字が4まで

»

» 「こいつ…増えるぞ!?」

»

Page 11: Pager Anti Pattern(Joke)

ページャーの「数字」がよくわからない2» そしてページをすすむと…

»

» 1,2の特別さが謎い(理由知りたい)

Page 12: Pager Anti Pattern(Joke)

「前へ」がないページャー» はてブロの個別でない記事ページ(正式名称なんていうの?)

»

» (昔は違った気がするな???)

» (個別ページにはあります)

»

Page 13: Pager Anti Pattern(Joke)

「前へ」がないページャー2» (個別ページにはあります)

»

Page 14: Pager Anti Pattern(Joke)

1ページ目なのに、「一番最初に」や「前へ」があるページャー» ✅実装が楽

» ダサイだけで(個人的には)あってもよい

» (後述するが)座標がずれにくいのもよい

» ❌細かいお客様からはクレーム

Page 15: Pager Anti Pattern(Joke)

「次へ」ボタンがじわじわ座標がかわる ページャー» ❌「1 2 3 4 5 」が「10 11 12 13 14」

→「>」がずれる

» ❌気付かずに20pageくらい飛ばす

» ❌できるだけマウスを動かしたくない

Page 16: Pager Anti Pattern(Joke)

要素サイズが変わるページャー

»

Page 17: Pager Anti Pattern(Joke)

< 1 2 3 4 5 6 7 8 9 10 11 12> などと「全部の数字を出す」ページャー

» ❌爆発する

Page 18: Pager Anti Pattern(Joke)

< 1 2 3 4 5 6 7 8 9 10 11 12> などと「全部の数字を出す」ページャー2» とりあえずデザイナーさんが考えがち

» 金のない管理画面でありがち

» ✅「割り切れば」飛びやすいのも事実

Page 19: Pager Anti Pattern(Joke)

< ... 99 100 101 102 103 ... > などと前後を省略するページャー

»

» 意義が個人的には正直謎、3Pトバシづつ読むとか?

» 元が全部の数字を出すデザインで、爆発したときに誤魔化(ry という人も多いのではないでしょうか)

Page 20: Pager Anti Pattern(Joke)

「前へもどる」という表記» 丁寧に書いているのだろうが、微妙

» コンテキストによって「前」が変わる

» javascript:history.back()のことか???ってなる

» ただし、「アロー」がコモンセンスかわからん

Page 21: Pager Anti Pattern(Joke)

プルダウンページャー

»

» 現在のページ数を表示するUIを兼ねられる

» 案外ジャンプ性は高い

» ページ数がふえるとやっぱり死ぬ

» iPhoneでは(ry

Page 22: Pager Anti Pattern(Joke)

プルダウンページャー2» ✅現在のページ数を表示するUIを兼ねられる

» ✅案外ジャンプ性は高い

» ❌ページ数がふえるとやっぱり爆死

» iPhoneでは(ry

Page 23: Pager Anti Pattern(Joke)

入力欄式ページャー»

» ❌別途送信ボタンが必要でダサイ

» ❌マウスしか使えない人が死ぬ

» 実装がはてしなく楽

» ❌突然の404

» ❌全角を入れるお客様からクレーム

Page 24: Pager Anti Pattern(Joke)

(余談)プルダウンで何件調整するやつ» 便利な筈だが、恐ろしく使いづらい所にあったりする

» (最初のデザインになくて、雑につけたされたり)

» デフォルトが致命的にすくない件数つらい

» 変更をおぼえてくれない(Cookieとかで…)

» 10 50 100 件の秘伝のタレ感

» キャッシュ効率悪くて死ぬ

Page 25: Pager Anti Pattern(Joke)

おーとぺーじゃじゃいず(インフィニットスクロール)(継ぎ足しロード)» 今風オシャレなのは大体これ

» 「ページャーなんていらなかったんや!!」

» 次を調べなくて良いので楽(失敗したらしれっと死ねばよい)

» サーバ側は多少無駄が増える

» 1Pが長すぎて死ぬ

» 「0件」と、「終わった」ことをユーザーにしめすUIは必要に

» 終わりがみえないので、絶望感が出る

» 深いページ数までいってブラウザがおちるとしにたい

Page 26: Pager Anti Pattern(Joke)

おーとぺーじゃじゃいず(インフィニットスクロール)(継ぎ足しロード)2» サーバ側は多少無駄が増える

» 1Pが長すぎて死ぬ

» 「0件」と、「終わった」ことをユーザーにしめすUIは必要に

» 終わりがみえないので、絶望感が出る

» 深いページ数までいってブラウザがおちるとしにたい

Page 27: Pager Anti Pattern(Joke)

おーとぺーじゃじゃいず(インフィニットスクロール)(継ぎ足しロード)3» 終わりがみえないので、絶望感が出る

» 深いページ数までいってブラウザがおちるとしにたい

Page 28: Pager Anti Pattern(Joke)

手動インフィニットロード(継ぎ足しロード)

» geekdojoとか、Githubとか

» 押すまではうごかないので安全(?)

Page 29: Pager Anti Pattern(Joke)

手動インフィニットロード(継ぎ足しロード)» あとは変わらず(良い点も、悪い点も)

» 深いページからおちたときに、二度と戻れない絶望感は倍増

Page 30: Pager Anti Pattern(Joke)

(余談)手動ぺーじゃじゃいずが課金ボタン» Favstar

» うまいけどイラッとする

Page 31: Pager Anti Pattern(Joke)

(削除)ソーシャルボタン» ページャー関係ないけど

» おーとぺーじゃじゃいずと組み合わせると、破滅的にブラウザが重く

» Crowsnest

Page 32: Pager Anti Pattern(Joke)

期待されない位置にあるページャー

» コンテンツの上下以外にあり、目がおよぐ

Page 33: Pager Anti Pattern(Joke)

ショートカット» めっちゃ便利

» gmail, livedoor reader

» なんだけど、Vim系プラグインと衝突して死ぬ

Page 34: Pager Anti Pattern(Joke)

(モバイルの)フリック» 延々やっていると指がもげる

» フリックミスするたびにイライラする

» フリック失敗でもなんらか反応が必要(ずれるとか)

» 不安定な片手持ちだとタップのほうが良い

Page 35: Pager Anti Pattern(Joke)

(モバイルの)タップ» 「次へ」できる領域が見えないので、山勘で押すしかない。

» ハイコンテキスト

» おそろしくタップしづらい所にあるボタン

Page 36: Pager Anti Pattern(Joke)

Bootstrapページャー» (デザインの話です)

» 多すぎ!!!

» 過去にはFlickrページャー

» ^q^

Page 37: Pager Anti Pattern(Joke)

変則ページャー例 はてダ»

» 次へのボタンと継ぎ足しロードがセットに!!

» すごい高機能だぜ!!

» 特に文句ないんですけど、これなんでこうなった?

Page 38: Pager Anti Pattern(Joke)

変則ページャー(トゥ*ャッター)» 継ぎ足しロードとページャーが抱き合わせでオトク!!

»

» ???

» !?!?

» これは本当に分かりづらいし、誰得???

» なにかを防ぎたいの?

Page 39: Pager Anti Pattern(Joke)

変則ページャー(トゥ*ャッター)2» なにかを防ぎたいの?

Page 40: Pager Anti Pattern(Joke)

「TOP」がある» ページャーなのか?

» パンクズとの融合ともいえる

Page 41: Pager Anti Pattern(Joke)

ページャーに「記事名」をいれる»

» ページャーが変則二行になりやすい

» ぱっとみて、どっちが次で前か分かりづらい

Page 42: Pager Anti Pattern(Joke)

私が思う最悪のページャーをもつサービス» Twitpi○

Page 43: Pager Anti Pattern(Joke)

次へのリンクはどれ?

Page 44: Pager Anti Pattern(Joke)

正解

Page 45: Pager Anti Pattern(Joke)

この右上のUIだけでは全部の画像がみれない

»

» ロード時に最近の一定件数を読み込んでループさせてるっぽい

» (過去の画像から入って、ページャさせるともどれなくなる)

» 説明ができないほど謎な設計

Page 46: Pager Anti Pattern(Joke)

突然のまとめ» ページャーに銀の弾丸はない(とかかいておけばそれっぽいでしょ(ドヤァ))

Page 47: Pager Anti Pattern(Joke)

以後オマケ

Page 48: Pager Anti Pattern(Joke)

私が思うページャーグッドパーツ

Page 49: Pager Anti Pattern(Joke)

「次へ」の座標がずれないページャー»

» 左右もそうだが、上下も重要

» 次へと進むのにマウスをうごかさなくてすむ

» 会場ご提供のPixiv様!!

» (一部界隈のご意見)「ファーストビューしかみられないから悪!!!!」

Page 50: Pager Anti Pattern(Joke)

表示件数を画面におさまりきる範囲にしてくれる» 厳密にはページャの機能ではない?

» スクロールと次へを同時駆使しなくてよい

» デカイモニタをかえばよい

Page 51: Pager Anti Pattern(Joke)

最近のブラウザは30MbyteくらいのJSONなら余裕» 一部の特殊用途

» 事前に全件ロード

» 「次へ」ボタンの連打ビリティが上がり、UX(?)向上

» 投稿が発生しても、リロードするまで「ズレ」ない

Page 52: Pager Anti Pattern(Joke)

オフセットがEPOCHとかID

のやつ» 投稿がガンガンふえてもズレてこない

» URLコピペで(それなりに)正しいページを渡せる

Page 53: Pager Anti Pattern(Joke)

ページャーなんていらなかったんや» Ficia(というものがありました)

» よくできた無限スクロール

» 要素のサイズが計算できないと難しい

Page 54: Pager Anti Pattern(Joke)

< 1 ... 41 42 43 44 [45]