アサモンノデザイン

こんにちは、浅本です。

Webサービスを使っていると一覧ページと詳細ページはよく目にするページかと思います。正直、それを見るのが目的でそのWebページを訪れているといっても良いかもしれません。

今回はアプリのGoogle Inboxを使っていて、一覧と詳細の見せ方で学べる部分が多々あると感じたので、自分の言葉でその良い点をご紹介します。

ページ遷移なく詳細情報を表示できる点

ページ遷移がないことによって、何件メールがあってもスムーズに確認することが出来る。それがInboxにおけるUIの魅力的なポイント。もし、いちいち遷移していたら戻る動作や読み込み時間などが邪魔をして、メールの確認作業が遅くなりますよね。詳細ページへ遷移しない方法で詳細情報が見れる形はいくつも確認したい・いくつも確認させたいコンテンツにおいては良い方法だと思います。

ここで気をつけたいのは、それによってページ読み込み速度が遅くなるなら必ずしも喜ばれるUIではないということ。

ページ読み込み速度が遅くならない工夫を出来て、このUIだと最高の体験になりそうな予感がします。

ピン留めしたアイテムのみ表示できる点

つまり、いちいちページ遷移することなく、ピン留めしたコンテンツを確認できるということです。

お気に入り登録したものを見るためにページ遷移するよりも、一覧でお気に入り登録したものを絞り込んで表示できたほうがスムーズで納得ができる動きではないでしょうか？

これまたメールとの親和性は非常に高いので、いつも利用しています。

個人的には気になる商品をピン留めしておいて、いくつか選んだらピン留めしたものだけ表示する形に絞り込んで、それらを比較したいと思います。

こういう使い方が出来るので、比較することがあるコンテンツを提供しているWebサービスに取り入れると便利なUIだと感じています。

スライドすることで完了にできる点

Google Inboxには完了という概念があり、左側から右側にアイテムをスライドすることで完了にすることができます。

つまりはもう見たから要らないという削除に似たものです。また誤操作の場合もあるので一定時間は完了をキャンセルすることができます。

ここから学んだことはピン留めしたコンテンツのみ表示している時に左側から右側にアイテムをスライドしたらピン留め解除、一定時間は解除をキャンセルすることが出来る、そんなUIも使い勝手が良いのではないかということです。

iOSの基本操作でもこの動作は削除したりといった際に多い動作なので、自然と操作出来る方法かなと思います。

まとめ

Google Inboxはあくまでもメールのアプリケーションなので、必ずしもWebサービスで取り入れられるUIとは限りません。

しかしながらコンテンツの特徴を理解すれば、これは応用できるかもしれないというものがいくつかありました。

ページ遷移をさせずに…というのは技術的にも難しさを感じますが、ピン留め機能とその解除機能に関しては実現への難易度は低いと思います。

比較して使われるかもしれないシーンではこういうUIを取り入れてみると良いかもしれませんね！

Google Inboxを使ってみる（無料）