縁の下のUIデザイン―少しの工夫で大きな改善!

第6回 「もっと見る」をちゃんとデザインする

この記事を読むのに必要な時間:およそ 2 分

インターネットは紙媒体と違って情報量を気にしなくてよいとしばしば語られます。しかし,ユーザーに意図した情報がちゃんと届けられるかは別問題です。前回の本コラムでも,画面にコンテンツが増えていくことをどう考えるか,またどのように効果的に情報を追加するかについて触れました。

今回はその中でも特に,一部の情報をまず見せたうえで,それ以上見たいユーザーが能動的に情報を表示するアクションのためによく使われる「もっと見る」のUI User Interfaceについて考えます。

「もっと見る」を使うシーン

「もっと見る」には,大きく分けて2つの使い方があります。1つ目(⁠a】⁠は,さまざまな目的を持つユーザーが訪れるような画面において,特定の切り口の情報だけではなく,いろいろな切り口で情報を少しずつ見せる必要がある場面です。2つ目(⁠b】⁠は,一覧画面ですべての情報を一度に表示させると件数が多すぎるため途中で切って表示し,続きを見たい人が「もっと見る」を押すような場面です。

【a】複数の切り口をコンパクトに見せるために使う場合

トップページなどサービスの顔となる画面は,サービス全体の目次のような役割を果たすことがあります。そのためいろいろな切り口の情報を少しずつ見せてあげることで,そのサービスの全体像をつかんでもらいやすくなります。またいろいろな切り口の情報を見せることが楽しさの表現にもつながります。図1のネットショップのプラットフォームサービスBASEでは,⁠フォローショップの商品」⁠おすすめの商品」など作品をさまざまな切り口で紹介してユーザーの興味の入り口を作っています。

図1 BASEのiPhoneアプリ

図1 BASEのiPhoneアプリ

【b】連続する情報を途中で切るときに使う場合

こちらは,検索結果画面やユーザー一覧などの画面において,20件や50件などで情報を切って「もっと見る」で続きを読ませる場合です。図2のYahoo!ニュースは,⁠もっと見る」をタップすることでその画面下にニュースの一覧の続きが表示されるUIです。

図2 Yahoo!ニュースのスマートフォンWeb

図2 Yahoo!ニュースのスマートフォンWeb

この【b】の使い方については「もっと見る」ではなく,特定の件数ごとにページを分けて表示するページャを用いたり,ユーザーが画面下部に到達し続きがある場合は自動的に次の情報を読み込む手段(オートページャ)など対案もいくつかあります。どの方法を用いたらよいかは優先的に実現したいユーザー体験などによっても異なります。

著者プロフィール

池田拓司(いけだたくじ)

デザイナー。多摩美術大学を卒業後,ニフティ株式会社,株式会社はてなを経て,2012年にクックパッド株式会社に入社。2013年デザイン部長,2014年ユーザーファースト推進部長・執行役。Sassを使ったUIフレームワークの構築,Webアプリケーションなどサービス全体の設計,ユーザーのほうを向いたデザインやサービス開発の組織づくりにも努める。2017年4月に独立し,Design & Life inc.を設立。インターネットサービスをはじめとするさまざまなデザイン業,およびサービス開発などに取り組んでいる。

Design & Life inc.:http://designandlife.co.jp/

コメント

コメントの記入