インフィニティ、ページネーション、もっと見る．．． は、けっきょくどれ？

# インフィニティ、ページネーション、もっと見る．．． は、けっきょくどれ？

* Web UIにおいて頻出するリスト表現
	* リストUI、フィードリスト などと呼ばれる
	* 複数の情報ブロックが縦に、あるいは数カラムのグリッド構造などで羅列された、リスト状のUI
	* Twitter、Facebook、Instagram ともに、メインUIにリスト構造が採用されている
	* Google 検索結果もリスト構造
* リスト表現の多くは、対象情報の件数が多量になる場合がある
	* 1回の表示件数を数十件以内に抑えて、UX や Webパフォーマンス を担保することが一般的
		* 情報の続きを追加表示する手段を提供する必要がある
* 情報の続きを追加表示する手段の例
	* インフィニティスクロール
	* ページネーション
	* 前後ボタン
	* "もっと見る"ボタン
* 本考察においては表示デバイスをスマートフォンと仮定する
* 遷移やリクエストなどの各挙動ごとにURLは書き換えられ、SEO性は担保できていると仮定する



# 情報の続きを追加表示する手段

## インフィニティスクロール

* インフィニティスクロール、無限スクロール、ロングスクロール、Infinite scroll、Infinite Scrolling などと呼ばれる
* ユーザーのスクロール操作により1回分の情報表示の終端が表示される際に追加情報を表示する
* SNS（SP UI） の多くが採用


## ページネーション

* ページネーション、ページング、ページャー、Paging、Pagination などと呼ばれる
* 書籍における"ページ"に例えて2ページ目、3ページ目のように追加情報を遷移表示する
* PC UIにおいて散見される
* スマートフォン UIでは限られた画面サイズの中で十分なUXを提供しづらい場合がある
* ebay が採用

### ebay の ページネーション ナビゲーション

> <img src="https://sekiyaeiji.github.io/image-storage/dist/img/about-list/paging.png" alt="">
> 
> <https://www.ebay.com/>


## 前後ボタン

* 市場においてこのUIについての呼び名が存在するかどうか不明．．．
* 前ページ、次ページのみの遷移ナビゲーション
* 1回分の情報表示の終端に前ページ、次ページへの遷移ボタンのみ配置される
* ページネーションのページ数リンク部分を削除したようなナビゲーションデザイン
* Airbnb、Amazon が採用

### Airbnb の 前後ボタン ナビゲーション

> <img src="https://sekiyaeiji.github.io/image-storage/dist/img/about-list/nextprev01.png" alt="">
> 
> <https://www.airbnb.jp/>

### Amazon の 前後ボタン ナビゲーション

> <img src="https://sekiyaeiji.github.io/image-storage/dist/img/about-list/nextprev02.png" alt="">
> 
> <https://www.amazon.co.jp/>


## "もっと見る" ボタン

* もっと見るボタン、Show more button、Load more button などと呼ばれる
* 1回分の情報表示の終端に「もっと見る」等とラベリングされたボタンを配置する
* ユーザーのボタンタップ操作により追加情報を表示する
* Google検索結果が採用

### Google検索結果 の "もっと見る" ボタン ナビゲーション

> <img src="https://sekiyaeiji.github.io/image-storage/dist/img/about-list/showmore.png" alt="">
> 
> <https://www.google.com/>



# ユーザー観点における比較

## インフィニティスクロール

* ユーザーにとって、操作コストが低い
* 機能に対するUIパーツが一切不要
* ユーザーに、画面の状態に応じて"自動的に処理してくれている"感覚を提供する
* ユーザーにとって、操作の"主導権を奪われている"感覚を与える可能性がある


## ページネーション

* ユーザーに対して操作コストを要求する
* "ページ"というメタファにより、情報の全量や序列を把握しやすい
* ユーザーに、堅苦しいイメージを与える可能性がある


## 前後ボタン

* ユーザーに対して操作コストを要求する
* 情報の全量や序列を感覚的に伝える装置が排除されている
* シンプルなUIが提供できる
* ユーザーに要求する操作は簡潔
* 1アクションの操作が簡潔であるがゆえに、操作コストに納得感を得られない可能性がある


## "もっと見る" ボタン

* ユーザーに対して操作コストを要求する
* シンプルなUIが提供できる
* ユーザーに要求する操作は簡潔
* 1アクションの操作が簡潔であるがゆえに、操作コストに納得感を得られない可能性がある



# メリデメ（pros and cons）による比較

## インフィニティスクロール

### メリット pros

* ユーザーアクションコストが低い
* コンテンツ利用の集中力が持続しやすい
* 利用しやすいと感じられるケースが多い

### デメリット cons

* 再訪性へのケアが必要
* 遷移フロー設計のコストが高い
	* 遷移フローが破綻しないための仕様定義
	* 大量に表示したリストから遷移後のもどるボタンの挙動へのケア
* コンテンツフッターを基本的には配置できない
* 大量にスクロールした場合のブラウザパフォーマンスへのケアが必要
* スクリーンリーダーユーザーにとって意図しない挙動へのケアが必要


## ページネーション

### メリット pros

* 画面フローが破綻しない
* ユーザーにとって自身の操作の状態を把握しやすい

### デメリット cons

* ユーザーに対して操作を要求する
* スマートフォンUIにおいてUXが減損する場合がある


## 前後ボタン

### メリット pros

* 画面フローが破綻しない

### デメリット cons

* ユーザーに対して操作を要求する
* ユーザーにとって自身の操作の状態を把握しづらい


## "もっと見る" ボタン

### メリット pros

* アクションが直感的でハードルが低い
* コンテンツ利用の集中力が途切れにくい

### デメリット cons

* ユーザーに対して操作を要求する
* 再訪性へのケアが必要
* 遷移フロー設計のコストが高い
	* 遷移フローが破綻しないための仕様定義
	* 大量に表示したリストから遷移後のもどるボタンの挙動へのケア
* 大量にリストを表示した場合のブラウザパフォーマンスへのケアが必要



# 著者の個人的な所感まとめ

* あくまで著者の予測であり、検証には開発実践やユーザーテストによるエビデンスが必要


## インフィニティスクロール

* メリデメの数に比例して要件仕様も増大するため、実装コストは他の選択肢と比較するとはるかに大きくなる
* 再訪再現性のケアに関するコストが高い
* ユーザー満足度は高いため、実装コストが十二分にかけられる場合は選択したい
* アクセシビリティ課題にどう取り組むか、も、選択のポイント


## ページネーション

* 安心確実な実装
* スマホUIにおいては、面積をとりすぎたり、省スペース化するため本来の効果が得にくい
* 実装コストはそこまで低くないので、得られる結果を考慮するとコストパフォーマンスが高いとは言えない


## 前後ボタン

* スマホUIにおいて割り切った実装であり、ユーザーにとって直感的で抵抗が少ないことが期待できる
* アウトプットに対する実装のコストパフォーマンスが優れていると判断できる


## "もっと見る" ボタン

* シンプルではあるがインフィニティスクロールの半分程度の要件仕様は発生する
* インフィニティスクロールと同様、再訪再現性のケアに関するコストが高い
* 実装コストに一定以上の余裕があれば選択肢になる
* もっと見るボタンと前後ボタンのABテストが必要と感じる
	* どこかに実績があれば教えてください m(_ _)m


# 最後に

* 以上は4者択一とは限らない
	* 4者のうち2者複合のような実績も存在する
	* ユーザー選択式のようなアイディア提案もなされている
* また、以上の4択以外の定番も今後間違いなく生まれてくる
* つまり、新定番を発明する余地がまだまだ存在する分野である