スマホのWebコンテンツにはエスカレーターがついている

スマホのWebコンテンツには、ユーザーも気づかずに使っている機能がある。
それは、エスカレーター機能。
ブログや記事広告などの読み物コンテンツを読んでいる時以外は、基本的にこのエスカレーター機能が作動している。

このエスカレーター機能とは

親指です。

ユーザーがWebコンテンツをスマホで閲覧している時に親指が自動スクロールの制御をしている。

これだけだと、当たり前のことを言っているように聞こえると思うので、もう少し丁寧に説明します。

ユーザーが、とあるWebサイトにランディングして、まずとる行動はスクロールです。ディスプレイサイズぴったりのサイトであろうと、とにかくユーザーはスクロールをする。息を吸うようにスクロールをする。そして、興味があるものを見つけた場合のみ強制的に親指を止める。

つまり、エスカレーター機能とは
ユーザーが無意識にとりあえずスクロールをし続けて、たまに親指で画面を止める機能のことだ。

なぜこのような機能がついてしまうのかと言うと、ユーザーがスマホを使う場合の初動は“検索”からはじまるからだ。

上の図のように、ユーザーのスマホ操作は、自分の欲している情報に行くつくまでスクロールをしながら検索をする流れになっているので、エレベーター機能がどうしても付いて回る。

エスカレーター機能に対応することを考えてUIを設計すると

・ファーストビュー
すぐスクロールされちゃうので、見せる情報量を制限。自動カルーセルなんてありえない。ランディングする際にアニメーションをつけて期待感を醸成している場合は、こればかりではない。
・バナー・ボタンエリア
できるだけ1カラムで、リンクエリアと明確にわかるカラールールにしよう。
・マージン
上下のコンテンツの情報干渉を防ぐためにたっぷりあける。

このように、ユーザーの行動も機能としてあらかじめ定義付けしておくと、
UIを設計する時の一つの指標となり、よりシンプルで納得感のある提案ができるかもしれない。

仕事終わりに行った夜の映画館のエスカレーターで、ポップコーンとコーラを抱えながらそんなことを考えた。

その日観た映画はグレイテスト・ショーマン。
ヒュー・ジャックマン超かっこよかった。

映画を観た感想もnoteに書いてみようかな。