モバイルアプリのナビゲーションをデザインするときに想像して欲しい3つのこと

デザインの評価ポイントは見た目のよさだけではありません。特にモバイルアプリのナビゲーションのような場合においてはユーザビリティも重要な課題です。

ナビゲーションを会話のように捉えて考えれば、スムーズに使用できることの重要性がわかるはず。どんなにデザインが美しくても、ナビゲーションとして使えなければなんの意味もありません。

今回はそんなモバイルアプリにおけるナビゲーションの基本をご紹介します。

ナビゲーションデザインのポイント

1. モバイルデバイスの持ち方を想像しよう

モバイルデバイスの持ちかたの分布です。スティーヴン・フーバー氏のリサーチによると、ユーザーの49％は片手でデバイスを持ち、親指一本で操作しているとのこと。

How Do Users Really Hold Mobile Devices?

とはいえ、デバイスの持ちかたは人それぞれです。さまざまな使用方法を考慮してデザインをする必要があります。

それぞれの持ちかたにとって合理的なのは、頻繁に使用するアクションを画面の下部に配置することです。ユーザーの持ちかたが片手であっても両手であっても、下部に配置すればスムーズに操作をすることができます。

2. はじめて使う人に必要な情報を想像しよう

誰もがストレスなく使えるように、コンテンツに優先順位をつけて、クリーンにまとめるようにしましょう。ユーザーフレンドリーな白いスペースを設けることによって、UIの外観がシンプルでイージーになり、かつUXも向上します。

3. 検索する人が求めるアイコンを想像しよう

アプリ内に検索ボックスや虫めがねのアイコンがないと、ユーザーはとても不便に感じてしまいます。ユーザーが自由に検索できるように、かならず検索ボックスを設けましょう。

参考にしたいナビゲーションデザイン

1. ボトムタブバー

LinkedInやInstagramなど、多くのアプリがタブバーを採用しています。Instagramはタブバーからコア機能にアクセスできるデザインを採用することによって、ユーザーがすばやく機能を切り替えることを可能にしています。

またLinkedInの例からもわかるように、タブバーのアイコンにバッジを表示して、新しい情報があることを示すこともできます。

ボトムナビゲーションを使用するにあたって気をつけなければいけないのは以下の三点です。

• もっとも重要で、かつ頻繁に使用されるもののみを表示する。
• スクロール可能なアイコンを避ける。
• アイコンの色は統一する。

2. カード型デザイン

カード型のデザインは、アクショナブルなコンテンツを表示できる、モバイルアプリに最適のデザインです。コンテンツをスワイプするという動作によってユーザーを楽しませることもできます。

アプローチの例としてGoogle Primerのアプリを見てみましょう。ユーザーはそれぞれのカードをタップし、読み終わったらスワイプするという構造になっています。

3. フルスクリーンナビゲーション

フルスクリーンナビゲーションは基本的に、すべてのナビゲーション要素を一覧で表示します。スペースの節約とは真逆のデザインですが、一部のモバイルアプリにおいては最適なデザインです。使用する画像や色を適切に選べば、シンプルで一貫性のあるデザインにすることができるはずです。

4. ハンバーガーメニュー

ハンバーガーメニューには基本的にメインメニューとオプションのリストが含まれます。「メニュー」と書かれていないとハンバーガーアイコンがなにを意味しているのか不明な場合もありますが、表示するべきコンテンツがたくさんある複雑なアプリの場合は、ハンバーガーメニューをおすすめします。

おわりに

プロダクトとUXのデザイナーにとって、アプリのナビゲーションをいかに簡単でかつ使いやすくするかというのは大きな課題です。限られた画面スペースの中ですべての要素を表示し、混乱を避け、コンテンツに優先順位をつけるのは簡単なことではありません。

しかし、難しい課題だからこそ今回紹介したようなベーシックな情報が助けになってくれるはず。基本をおさえて、ユーザーフレンドリーなインターフェースを設計しましょう！

（翻訳：Asuka Nakajima）