Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Pager Anti Pattern(Joke)

8,053 views

Published on

Pager Night #1
talker uzulla.

  • Follow the link, new dating source: ♥♥♥ http://bit.ly/39pMlLF ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating direct: ♥♥♥ http://bit.ly/39pMlLF ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Pager Anti Pattern(Joke)

  1. 1. ページャーアンチパター ン » これは見た目のお話です。 » アンチパターンといいつつ、ケチをつけるだけのてい どひくい奴です » 真に受けるな » 当方主に管理画面などで年間多数のページャーを(略
  2. 2. 経緯
  3. 3. 経緯
  4. 4. 経緯
  5. 5. 自己紹介 » uzulla » PHPerです » 「YAPC PHP」でググって出るトークを応援下さい
  6. 6. に角「次へ」を出すペ ージャー » ❌次がないのに!!! » ❌次のページがあるか見てない » ❌突然の404 » ✅実装コストが低くてオトク
  7. 7. 「○件中」 » ❌実装コストが高い » ❌どうでもいい過去ログをしれっとパージできない » ❌がんばった結果、「1000件ある」ってかいて4ペー ジくらいしかないようなサイトもある(Googleと か) » ✅絶対的な数字なので、検索結果とかなら指標になる
  8. 8. 「○件中『○件』表示し ています」 » ❌「だから?」という世界 » 秘伝のタレ感ある
  9. 9. 「31件∼60件を表示」 » ❌「だから?」という(略 » セットの件中がない場合、有用さがない
  10. 10. ページャーの「数字」が よくわからない » みんな大好きFC2動画 » 900件とかあるのに数字が4まで » » 「こいつ…増えるぞ!?」 »
  11. 11. ページャーの「数字」が よくわからない2 » そしてページをすすむと… » » 1,2の特別さが い(理由知りたい)
  12. 12. 「前へ」がないページャ ー » はてブロの個別でない記事ページ(正式名称なんてい うの?) » » (昔は違った気がするな???) » (個別ページにはあります)
  13. 13. 「前へ」がないページャ ー2 » (個別ページにはあります) »
  14. 14. 1ページ目なのに、「一 番最初に」や「前へ」が あるページャー » ✅実装が楽 » ダサイだけで(個人的には)あってもよい » (後述するが)座標がずれにくいのもよい » ❌細かいお客様からはクレーム
  15. 15. 「次へ」ボタンがじわじ わ座標がかわる ページャ ー » ❌「1 2 3 4 5 」が「10 11 12 13 14」 →「>」がずれる » ❌気付かずに20pageくらい飛ばす » ❌できるだけマウスを動かしたくない
  16. 16. 要素サイズが変わるペー ジャー »
  17. 17. < 1 2 3 4 5 6 7 8 9 10 11 12> な どと「全部の数字を出 す」ページャー » ❌爆発する
  18. 18. < 1 2 3 4 5 6 7 8 9 10 11 12> な どと「全部の数字を出 す」ページャー2 » とりあえずデザイナーさんが考えがち » 金のない管理画面でありがち » ✅「割り切れば」飛びやすいのも事実
  19. 19. < ... 99 100 101 102 103 ... > な どと前後を省略するペー ジャー » » 意義が個人的には正直 、3Pトバシづつ読むとか? » 元が全部の数字を出すデザインで、爆発したときに誤 魔化(ry という人も多いのではないでしょうか)
  20. 20. 「前へもどる」という表 記 » 丁寧に書いているのだろうが、微妙 » コンテキストによって「前」が変わる » javascript:history.back()のことか???って なる » ただし、「アロー」がコモンセンスかわからん
  21. 21. プルダウンページャー
  22. 22. プルダウンページャー2 » ✅現在のページ数を表示するUIを兼ねられる » ✅案外ジャンプ性は高い » ❌ページ数がふえるとやっぱり爆死 » iPhoneでは(ry
  23. 23. 入力欄式ページャー » » ❌別途送信ボタンが必要でダサイ » ❌マウスしか使えない人が死ぬ » 実装がはてしなく楽 » ❌突然の404 » ❌全角を入れるお客様からクレーム
  24. 24. (余談)プルダウンで何 件調整するやつ » 便利な筈だが、恐ろしく使いづらい所にあったりする » (最初のデザインになくて、雑につけたされたり) » デフォルトが致命的にすくない件数つらい » 変更をおぼえてくれない(Cookieとかで…) » 10 50 100 件の秘伝のタレ感 » キャッシュ効率悪くて死ぬ
  25. 25. おーとぺーじゃじゃいず (インフィニットスクロ ール)(継ぎ足しロー ド) » 今風オシャレなのは大体これ » 「ページャーなんていらなかったんや!!」 » 次を調べなくて良いので楽(失敗したらしれっと死ね ばよい)
  26. 26. おーとぺーじゃじゃいず (インフィニットスクロ ール)(継ぎ足しロー ド)2 » サーバ側は多少無駄が増える » 1Pが長すぎて死ぬ » 「0件」と、「終わった」ことをユーザーにしめすUI は必要に
  27. 27. おーとぺーじゃじゃいず (インフィニットスクロ ール)(継ぎ足しロー ド)3 » 終わりがみえないので、絶望感が出る » 深いページ数までいってブラウザがおちるとしにたい
  28. 28. 手動インフィニットロー ド(継ぎ足しロード) » geekdojoとか、Githubとか » 押すまではうごかないので安全(?)
  29. 29. 手動インフィニットロー ド(継ぎ足しロード) » あとは変わらず(良い点も、悪い点も) » 深いページからおちたときに、二度と戻れない絶望感 は倍増
  30. 30. (余談)手動ぺーじゃじ ゃいずが課金ボタン » Favstar » うまいけどイラッとする
  31. 31. (削除)ソーシャルボタ ン » ページャー関係ないけど » おーとぺーじゃじゃいずと組み合わせると、破滅的に ブラウザが重く » Crowsnest
  32. 32. 期待されない位置にある ページャー » コンテンツの上下以外にあり、目がおよぐ
  33. 33. ショートカット » めっちゃ便利 » gmail, livedoor reader » なんだけど、Vim系プラグインと衝突して死ぬ
  34. 34. (モバイルの)フリック » 延々やっていると指がもげる » フリックミスするたびにイライラする » フリック失敗でもなんらか反応が必要(ずれるとか) » 不安定な片手持ちだとタップのほうが良い
  35. 35. (モバイルの)タップ » 「次へ」できる領域が見えないので、山勘で押すしか ない。 » ハイコンテキスト » おそろしくタップしづらい所にあるボタン
  36. 36. Bootstrapページャー » (デザインの話です) » 多すぎ!!! » 過去にはFlickrページャー » ^q^
  37. 37. 変則ページャー例 はてダ » » 次へのボタンと継ぎ足しロードがセットに!! » すごい高機能だぜ!! » 特に文句ないんですけど、これなんでこうなった?
  38. 38. 変則ページャー(トゥ* ャッター) » 継ぎ足しロードとページャーが抱き合わせでオト ク!! » » ??? » !?!? » これは本当に分かりづらいし、誰得???
  39. 39. 変則ページャー(トゥ* ャッター)2 » なにかを防ぎたいの?
  40. 40. 「TOP」がある » ページャーなのか? » パンクズとの融合ともいえる
  41. 41. ページャーに「記事名」 をいれる » » ページャーが変則二行になりやすい » ぱっとみて、どっちが次で前か分かりづらい
  42. 42. 私が思う最悪のページャ ーをもつサービス » Twitpi○
  43. 43. 次へのリンクはどれ?
  44. 44. 正解
  45. 45. この右上のUIだけでは全 部の画像がみれない » » ロード時に最近の一定件数を読み込んでループさせて るっぽい » (過去の画像から入って、ページャさせるともどれな くなる) » 説明ができないほど な設計
  46. 46. 突然のまとめ » ページャーに銀の弾丸はない (とかかいておけばそれっぽいでしょ(ドヤァ))
  47. 47. 以後オマケ
  48. 48. 私が思うページ ャーグッドパー ツ
  49. 49. 「次へ」の座標がずれな いページャー » » 左右もそうだが、上下も重要 » 次へと進むのにマウスをうごかさなくてすむ » 会場ご提供のPixiv様!! » (一部界隈のご意見)「ファーストビューしかみられ ないから悪!!!!」
  50. 50. 表示件数を画面におさま りきる範囲にしてくれる » 厳密にはページャの機能ではない? » スクロールと次へを同時駆使しなくてよい » デカイモニタをかえばよい
  51. 51. 最近のブラウザは 30MbyteくらいのJSONなら 余裕 » 一部の特殊用途 » 事前に全件ロード » 「次へ」ボタンの連打ビリティが上がり、UX(?)向 上 » 投稿が発生しても、リロードするまで「ズレ」ない
  52. 52. オフセットがEPOCHとかID のやつ » 投稿がガンガンふえてもズレてこない » URLコピペで(それなりに)正しいページを渡せる
  53. 53. ページャーなんていらな かったんや » Ficia(というものがありました) » よくできた無限スクロール » 要素のサイズが計算できないと難しい
  54. 54. < 1 ... 41 42 43 44 [45]

×