【MBTI診断】16タイプ別・フリーランスに向いてる仕事/働き方
- コラム
- フリーランス/個人事業主
- 働き方
デザインの評価ポイントは見た目のよさだけではありません。特にモバイルアプリのナビゲーションのような場合においてはユーザビリティも重要な課題です。
ナビゲーションを会話のように捉えて考えれば、スムーズに使用できることの重要性がわかるはず。どんなにデザインが美しくても、ナビゲーションとして使えなければなんの意味もありません。
今回はそんなモバイルアプリにおけるナビゲーションの基本をご紹介します。
目次
モバイルデバイスの持ちかたの分布です。スティーヴン・フーバー氏のリサーチによると、ユーザーの49%は片手でデバイスを持ち、親指一本で操作しているとのこと。
How Do Users Really Hold Mobile Devices?
とはいえ、デバイスの持ちかたは人それぞれです。さまざまな使用方法を考慮してデザインをする必要があります。
それぞれの持ちかたにとって合理的なのは、頻繁に使用するアクションを画面の下部に配置することです。ユーザーの持ちかたが片手であっても両手であっても、下部に配置すればスムーズに操作をすることができます。
誰もがストレスなく使えるように、コンテンツに優先順位をつけて、クリーンにまとめるようにしましょう。ユーザーフレンドリーな白いスペースを設けることによって、UIの外観がシンプルでイージーになり、かつUXも向上します。
アプリ内に検索ボックスや虫めがねのアイコンがないと、ユーザーはとても不便に感じてしまいます。ユーザーが自由に検索できるように、かならず検索ボックスを設けましょう。
LinkedInやInstagramなど、多くのアプリがタブバーを採用しています。Instagramはタブバーからコア機能にアクセスできるデザインを採用することによって、ユーザーがすばやく機能を切り替えることを可能にしています。
またLinkedInの例からもわかるように、タブバーのアイコンにバッジを表示して、新しい情報があることを示すこともできます。
ボトムナビゲーションを使用するにあたって気をつけなければいけないのは以下の三点です。
カード型のデザインは、アクショナブルなコンテンツを表示できる、モバイルアプリに最適のデザインです。コンテンツをスワイプするという動作によってユーザーを楽しませることもできます。
アプローチの例としてGoogle Primerのアプリを見てみましょう。ユーザーはそれぞれのカードをタップし、読み終わったらスワイプするという構造になっています。
フルスクリーンナビゲーションは基本的に、すべてのナビゲーション要素を一覧で表示します。スペースの節約とは真逆のデザインですが、一部のモバイルアプリにおいては最適なデザインです。使用する画像や色を適切に選べば、シンプルで一貫性のあるデザインにすることができるはずです。
ハンバーガーメニューには基本的にメインメニューとオプションのリストが含まれます。「メニュー」と書かれていないとハンバーガーアイコンがなにを意味しているのか不明な場合もありますが、表示するべきコンテンツがたくさんある複雑なアプリの場合は、ハンバーガーメニューをおすすめします。
プロダクトとUXのデザイナーにとって、アプリのナビゲーションをいかに簡単でかつ使いやすくするかというのは大きな課題です。限られた画面スペースの中ですべての要素を表示し、混乱を避け、コンテンツに優先順位をつけるのは簡単なことではありません。
しかし、難しい課題だからこそ今回紹介したようなベーシックな情報が助けになってくれるはず。基本をおさえて、ユーザーフレンドリーなインターフェースを設計しましょう!
(翻訳:Asuka Nakajima)