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()のことか？？？ってなる

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

プルダウンページャー

»

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

» 案外ジャンプ性は高い

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

» iPhoneでは（ry

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

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

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

» iPhoneでは（ry

入力欄式ページャー»

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

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

» 実装がはてしなく楽

» ❌突然の404

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

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

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

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

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

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

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

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

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

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

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

» １Pが長すぎて死ぬ

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

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

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

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

» １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]