Pager Anti Pattern（Joke）

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

経緯

自己紹介 » uzulla » PHPerです » 「YAPC PHP」でググって出るトークを応援下さい

に角「次へ」を出すページャー » ❌次がないのに！！！ » ❌次のページがあるか見てない » ❌突然の404 » ✅実装コストが低くてオトク

「○件中」 » ❌実装コストが高い » ❌どうでもいい過去ログをしれっとパージできない » ❌がんばった結果、「1000件ある」ってかいて４ページくらいしかないようなサイトもある（Googleとか） » ✅絶対的な数字なので、検索結果とかなら指標になる

「○件中『○件』表示しています」 » ❌「だから？」という世界 » 秘伝のタレ感ある

「31件∼60件を表示」 » ❌「だから？」という（略 » セットの件中がない場合、有用さがない

ページャーの「数字」がよくわからない » みんな大好きFC2動画 » 900件とかあるのに数字が４まで » » 「こいつ…増えるぞ！？」 »

ページャーの「数字」がよくわからない2 » そしてページをすすむと… » » 1,2の特別さがい（理由知りたい）

「前へ」がないページャー » はてブロの個別でない記事ページ（正式名称なんていうの？） » » （昔は違った気がするな？？？） » （個別ページにはあります）

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

１ページ目なのに、「一番最初に」や「前へ」があるページャー » ✅実装が楽 » ダサイだけで（個人的には）あってもよい » （後述するが）座標がずれにくいのもよい » ❌細かいお客様からはクレーム

「次へ」ボタンがじわじわ座標がかわるページャー » ❌「1 2 3 4 5 」が「10 11 12 13 14」 →「＞」がずれる » ❌気付かずに20pageくらい飛ばす » ❌できるだけマウスを動かしたくない

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

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

< 1 2 3 4 5 6 7 8 9 10 11 12> などと「全部の数字を出す」ページャー2 » とりあえずデザイナーさんが考えがち » 金のない管理画面でありがち » ✅「割り切れば」飛びやすいのも事実

< ... 99 100 101 102 103 ... > などと前後を省略するページャー » » 意義が個人的には正直、３Pトバシづつ読むとか？ » 元が全部の数字を出すデザインで、爆発したときに誤魔化（ry という人も多いのではないでしょうか）

「前へもどる」という表記 » 丁寧に書いているのだろうが、微妙 » コンテキストによって「前」が変わる » javascript:history.back()のことか？？？ってなる » ただし、「アロー」がコモンセンスかわからん

プルダウンページャー

プルダウンページャー2 » ✅現在のページ数を表示するUIを兼ねられる » ✅案外ジャンプ性は高い » ❌ページ数がふえるとやっぱり爆死 » iPhoneでは（ry

入力欄式ページャー » » ❌別途送信ボタンが必要でダサイ » ❌マウスしか使えない人が死ぬ » 実装がはてしなく楽 » ❌突然の404 » ❌全角を入れるお客様からクレーム

（余談）プルダウンで何件調整するやつ » 便利な筈だが、恐ろしく使いづらい所にあったりする » （最初のデザインになくて、雑につけたされたり） » デフォルトが致命的にすくない件数つらい » 変更をおぼえてくれない（Cookieとかで…） » 10 50 100 件の秘伝のタレ感 » キャッシュ効率悪くて死ぬ

おーとぺーじゃじゃいず（インフィニットスクロール）（継ぎ足しロード） » 今風オシャレなのは大体これ » 「ページャーなんていらなかったんや！！」 » 次を調べなくて良いので楽(失敗したらしれっと死ねばよい）

おーとぺーじゃじゃいず（インフィニットスクロール）（継ぎ足しロード）２ » サーバ側は多少無駄が増える » １Pが長すぎて死ぬ » 「0件」と、「終わった」ことをユーザーにしめすUI は必要に

おーとぺーじゃじゃいず（インフィニットスクロール）（継ぎ足しロード）３ » 終わりがみえないので、絶望感が出る » 深いページ数までいってブラウザがおちるとしにたい

手動インフィニットロード(継ぎ足しロード) » geekdojoとか、Githubとか » 押すまではうごかないので安全(？)

手動インフィニットロード(継ぎ足しロード) » あとは変わらず（良い点も、悪い点も） » 深いページからおちたときに、二度と戻れない絶望感は倍増

（余談）手動ぺーじゃじゃいずが課金ボタン » Favstar » うまいけどイラッとする

（削除）ソーシャルボタン » ページャー関係ないけど » おーとぺーじゃじゃいずと組み合わせると、破滅的にブラウザが重く » Crowsnest

期待されない位置にあるページャー » コンテンツの上下以外にあり、目がおよぐ

ショートカット » めっちゃ便利 » gmail, livedoor reader » なんだけど、Vim系プラグインと衝突して死ぬ

（モバイルの）フリック » 延々やっていると指がもげる » フリックミスするたびにイライラする » フリック失敗でもなんらか反応が必要（ずれるとか） » 不安定な片手持ちだとタップのほうが良い

（モバイルの）タップ » 「次へ」できる領域が見えないので、山勘で押すしかない。 » ハイコンテキスト » おそろしくタップしづらい所にあるボタン

Bootstrapページャー » (デザインの話です） » 多すぎ！！！ » 過去にはFlickrページャー » ^q^

変則ページャー例はてダ » » 次へのボタンと継ぎ足しロードがセットに！！ » すごい高機能だぜ！！ » 特に文句ないんですけど、これなんでこうなった？

変則ページャー（トゥ＊ャッター） » 継ぎ足しロードとページャーが抱き合わせでオトク！！ » » ??? » !?!? » これは本当に分かりづらいし、誰得？？？

変則ページャー（トゥ＊ャッター）2 » なにかを防ぎたいの？

「TOP」がある » ページャーなのか？ » パンクズとの融合ともいえる

ページャーに「記事名」をいれる » » ページャーが変則二行になりやすい » ぱっとみて、どっちが次で前か分かりづらい

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

次へのリンクはどれ？

正解

この右上のUIだけでは全部の画像がみれない » » ロード時に最近の一定件数を読み込んでループさせてるっぽい » （過去の画像から入って、ページャさせるともどれなくなる） » 説明ができないほどな設計

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

以後オマケ

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

「次へ」の座標がずれないページャー » » 左右もそうだが、上下も重要 » 次へと進むのにマウスをうごかさなくてすむ » 会場ご提供のPixiv様！！ » （一部界隈のご意見）「ファーストビューしかみられないから悪！！！！」

表示件数を画面におさまりきる範囲にしてくれる » 厳密にはページャの機能ではない？ » スクロールと次へを同時駆使しなくてよい » デカイモニタをかえばよい

最近のブラウザは 30MbyteくらいのJSONなら余裕 » 一部の特殊用途 » 事前に全件ロード » 「次へ」ボタンの連打ビリティが上がり、UX(？)向上 » 投稿が発生しても、リロードするまで「ズレ」ない

オフセットがEPOCHとかID のやつ » 投稿がガンガンふえてもズレてこない » URLコピペで（それなりに）正しいページを渡せる

ページャーなんていらなかったんや » Ficia（というものがありました） » よくできた無限スクロール » 要素のサイズが計算できないと難しい

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

Pager Anti Pattern（Joke）

by Junichi Ishida, Working at フリーランス

on Jul 05, 2014

Statistics

Views

Actions

1 Embed 105

Accessibility

Categories

Upload Details

Usage Rights

Report content

Pager Anti Pattern（Joke） Presentation Transcript