Upload
junichi-ishida
View
6.444
Download
5
Embed Size (px)
DESCRIPTION
Pager Night #1 talker uzulla.
Citation preview
ページャーアンチパターン» これは見た目のお話です。
» アンチパターンといいつつ、ケチをつけるだけのていどひくい奴です
» 真に受けるな
» 当方主に管理画面などで年間多数のページャーを(略
経緯
経緯
経緯
自己紹介
» uzulla
» PHPerです
» 「YAPC PHP」でググって出るトークを応援下さい
兎に角「次へ」を出すページャー» ❌次がないのに!!!
» ❌次のページがあるか見てない
» ❌突然の404
» ✅実装コストが低くてオトク
「○件中」» ❌実装コストが高い
» ❌どうでもいい過去ログをしれっとパージできない
» ❌がんばった結果、「1000件ある」ってかいて4ページくらいしかないようなサイトもある(Googleとか)
» ✅絶対的な数字なので、検索結果とかなら指標になる
「○件中『○件』表示しています」» ❌「だから?」という世界
» 秘伝のタレ感ある
「31件~60件を表示」» ❌「だから?」という(略
» セットの件中がない場合、有用さがない
ページャーの「数字」がよくわからない» みんな大好きFC2動画
» 900件とかあるのに数字が4まで
»
» 「こいつ…増えるぞ!?」
»
ページャーの「数字」がよくわからない2» そしてページをすすむと…
»
» 1,2の特別さが謎い(理由知りたい)
「前へ」がないページャー» はてブロの個別でない記事ページ(正式名称なんていうの?)
»
» (昔は違った気がするな???)
» (個別ページにはあります)
»
「前へ」がないページャー2» (個別ページにはあります)
»
1ページ目なのに、「一番最初に」や「前へ」があるページャー» ✅実装が楽
» ダサイだけで(個人的には)あってもよい
» (後述するが)座標がずれにくいのもよい
» ❌細かいお客様からはクレーム
「次へ」ボタンがじわじわ座標がかわる ページャー» ❌「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 ... > などと前後を省略するページャー
»
» 意義が個人的には正直謎、3Pトバシづつ読むとか?
» 元が全部の数字を出すデザインで、爆発したときに誤魔化(ry という人も多いのではないでしょうか)
「前へもどる」という表記» 丁寧に書いているのだろうが、微妙
» コンテキストによって「前」が変わる
» javascript:history.back()のことか???ってなる
» ただし、「アロー」がコモンセンスかわからん
プルダウンページャー
»
» 現在のページ数を表示するUIを兼ねられる
» 案外ジャンプ性は高い
» ページ数がふえるとやっぱり死ぬ
» iPhoneでは(ry
プルダウンページャー2» ✅現在のページ数を表示するUIを兼ねられる
» ✅案外ジャンプ性は高い
» ❌ページ数がふえるとやっぱり爆死
» iPhoneでは(ry
入力欄式ページャー»
» ❌別途送信ボタンが必要でダサイ
» ❌マウスしか使えない人が死ぬ
» 実装がはてしなく楽
» ❌突然の404
» ❌全角を入れるお客様からクレーム
(余談)プルダウンで何件調整するやつ» 便利な筈だが、恐ろしく使いづらい所にあったりする
» (最初のデザインになくて、雑につけたされたり)
» デフォルトが致命的にすくない件数つらい
» 変更をおぼえてくれない(Cookieとかで…)
» 10 50 100 件の秘伝のタレ感
» キャッシュ効率悪くて死ぬ
おーとぺーじゃじゃいず(インフィニットスクロール)(継ぎ足しロード)» 今風オシャレなのは大体これ
» 「ページャーなんていらなかったんや!!」
» 次を調べなくて良いので楽(失敗したらしれっと死ねばよい)
» サーバ側は多少無駄が増える
» 1Pが長すぎて死ぬ
» 「0件」と、「終わった」ことをユーザーにしめすUIは必要に
» 終わりがみえないので、絶望感が出る
» 深いページ数までいってブラウザがおちるとしにたい
おーとぺーじゃじゃいず(インフィニットスクロール)(継ぎ足しロード)2» サーバ側は多少無駄が増える
» 1Pが長すぎて死ぬ
» 「0件」と、「終わった」ことをユーザーにしめすUIは必要に
» 終わりがみえないので、絶望感が出る
» 深いページ数までいってブラウザがおちるとしにたい
おーとぺーじゃじゃいず(インフィニットスクロール)(継ぎ足しロード)3» 終わりがみえないので、絶望感が出る
» 深いページ数までいってブラウザがおちるとしにたい
手動インフィニットロード(継ぎ足しロード)
» 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]