どこに置く？ Navigation UI
分かりやすい Navigation UI ってなんぞや？
メニューを作ってみたけどなんだかまとまりかける...
かっこいいNavigationのUIを見つけたけど、どうにも自分のプロダクトに落とし込めない...
と悩んだことはないでしょうか？
今回は 「どこに置く？Navigation UI」ということで個人的に考えるNavigation UIの作り方について記事を書きたいと思います。
< Navigation UI とは >
Navigationと聞くとどんなものを思い浮かべるでしょうか。
様々ある方と思いますが、その役割は大きく分けて二つあると考えています。
1) そのアプリで何が見れるのか “ Veiw Navigation “
2) そのアプリで何ができるのか “ Action Navigation ”
次で具体的に見ていきましょう。
<要件の分類/分析する>
例えば以下のような要件定義のスマホタスク管理アプリがあるとします。
・アプリの設定画面
・有料プラン登録の機能
・ユーザーにアカウントを持たせ、TaskContetのPostできる機能を入れる
・Taskに期限を持たせるためにカレンダー情報を付ける
・Taskにtodo/doing/doneの三つの状態を持たせて任意に状態を変更できるようにし、TaskPostsを状態に依存して表示できるようにする
・ユーザのTask達成情報などアナリティクスを見れるようにする。
こちらを少し分解して先ほどの二つの要素に分類してみます。
1) “ Veiw Navigation “
・アプリ情報を表示
・有料プラン登録情報を表示
・アカウントの情報を表示
・TaskContentの情報を表示
・カレンダーからTask情報を表示
・TaskPostsの情報を状態に依存して表示
・Task達成情報などアナリティクスを表示
2) “ Action Navigation ”
・有料プラン登録できる
・Task ContentをPostできる
・Taskにカレンダー情報を追加できる
・Taskにtodo/doing/doneの三つの状態を変更できる
次に、先ほど出た項目を分析して以下の二つを考えます。
1) 何に依存するか
2) ユーザーがみたいのはどれか
1)
Task → ユーザー
TaskPost機能 → ユーザ&Task
カレンダー → Task
Task状態 → Task
アナリティクス → Task&ユーザー
ユーザー → アプリ
有料プラン → アプリ&ユーザー
アプリ設定 → アプリ& ユーザー
2)
要件 : 優先度
Task : 1
TaskPost機能 : 2
カレンダー : 3
Task状態 : 4
アナリティクス : 5
ユーザー : 6
有料プラン : 7
これらの分類/分析を元に根拠立てて組み合わせ、UIを作り上げるとこのような配置になりました。
順番に追っていきましょう。
1, Footer ツールバー
まず、ユーザー優先度の高い項目(カレンダー/Task状態/アナリティクス)かつTaskに依存するもの(カレンダー/Task状態/アナリティクス)は使いやすい手元に来るべきですので、いわゆるツールバーとして下にまとめるべきでしょう。
しかし、ユーザ優先度の高いTaskPost機能は他の項目と違いAction Navigationですのでより強調されるとユーザーは見やすいかもしれません。そのため大きなボタンにします。
2, Main(真ん中の部分)
こちらは言わずもがな一番優先度の高いメインコンテンツであるTaskを表示させるべきです。
2,Header
ユーザーの情報はどうでしょうか。こちらもユーザーが頻繁に使う項目かと思いますが、依存先がアプリであるため、Taskに依存する他のNavigationとは区別するべきです。しかし、同じアプリ依存である会員登録やアプリ設定はユーザー情報よりも優先度が低いため区別して配置するとより使いやすいかと思います。(ハンバーメニューに画像ではまとめています)
最後まで読んでいただきありがとうございました。
今回は自分の個人的なNavigation UI配置の仕方について書かせていただきました。
また次の記事でお会いしましょう！
