Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Pager Anti Pattern(Joke)

8 076 vues

Publié le

Pager Night #1
talker uzulla.

  • Follow the link, new dating source: ♥♥♥ http://bit.ly/39pMlLF ♥♥♥
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Dating direct: ♥♥♥ http://bit.ly/39pMlLF ♥♥♥
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

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]

×