blog

Androidアプリにおけるナビゲーション・デザインの間違いトップ10

[]\n[コアヒント] 今回は、デザインミスというトピックで、Android開発スペースでアプリのナビゲーションをデザインするときによくある間違いを指摘します。\n\n\nAndroid Develo...

Aug 19, 2014 · 8 min. read
シェア

[]

[コアヒント] 今回は、デザインの間違いというテーマで、Android開発の分野でアプリのナビゲーションをデザインする際に陥りがちな間違いを指摘し、より良く避けるためのヒントを提供します。

10ナビゲーションデザイン "アンチパターン "は、Androidの開発者は、あなたが心を提示するためのチームに連絡してください〜私はあなたが幸せに見えることを願っています〜!

1.ナビゲーションアイテムをアクションオーバーフローに配置

もうひとつ重要なのは、AndroidのインターフェースUIは、ナビゲーションは左、操作は右というルールが徐々に出来上がってきているということです。ナビゲーションをアクション・オーバーフローに入れることにこだわると、このルールに違反することになります。

2.誤ったナビゲーション階層

この間違いもよくあることです。Androidにはタブ、スピナー、ドロワーといった一般的なナビゲーションスタイルがあり、これらを組み合わせて使うことができますが、これらを組み合わせて使うときは、それぞれの階層関係に注意してください。ナビゲーションの階層を計画する場合、一般的にはツリー構造を構築し、各レベルの下にサブレベルを置く、といったようにします。Androidでは一般的に、異なるレベルは異なるナビゲート方法に対応します。上のイメージのように、タブを***ナビゲーションレベル、スピナーを次のレベル、ドロワーをその次のレベルとするのは間違ったやり方です。Androidでは、3つのナビゲーションスタイルに対応するレイヤーは厳格なルールに従います。

上の図は一般的に正しい方法です。通常、Drawerが***ナビゲーション階層を表し、Spinners、Tabsと続きます。3階層以上のナビゲーション階層がある場合は、一番上の階層をDrawerに置き、残りの2階層をSpinnersとTabsに割り当てることを強くお勧めします。もちろん、モバイルアプリとして、階層を単純化することも重要であり、アプリ内で非常に深いナビゲーション階層を持つことは、ユーザーを混乱させるだけなので、強く推奨されません。

また、上の図ではスピナーとドロワーが共存しており、スピナーがアクションバーにあるように見えますが、実際にはユーザーがドロワーを引き出すと、ドロワーは他のものにフェードアウトする必要があります。検索のようなアプリに共通するグローバルアクションは残し、スピナーのような他のものは非表示にして、アプリの名前に置き換えます。そうすれば、ナビゲーションの階層が混乱することはありません。

3.スライドで切り替えられないタブ

Androidでは、タブは水平方向にスワイプするものです。ユーザーがタブに期待するのは、スワイプすることです。ページにページ分割されたコンテンツがある場合、そのコンテンツをスライドすると、Tabsのグローバルスライドと混同される可能性があります。もちろん、フルスクリーンでないイメージビューなど、スワイプ可能なページがごく一部である場合は、タブ自体のスワイプジェスチャーと競合しない限り、まったく問題ありません。

正しい方法は簡単で、横向きのViewPagerを縦向きに変更するだけです。もちろん、ナビゲーションとのジェスチャーの衝突を回避する別の解決策があれば、それは素晴らしいことです。

4.深い/頑固なタブ

タブが "深い "とはどういう意味ですか? 深い "を説明するには、"浅い "を比較に使うのが一般的です。Androidでは、タブは浅いものであるべきです。タブは、何かを変更したり、カテゴリーを切り替えたりするために使うもので、タブ内に階層や履歴があってはなりません。通常、タブはナビゲーション画面にのみ表示されるべきです。上の例では、ユーザーが項目をクリックすると、タブ下のコンテンツが更新されるのではなく、全く新しいページが開くはずです。このように常にタブが存在する状態を、ディープ・タブ、またはタブ内の履歴と呼びます。

そうしない理由は、例えばスワイプで別のタブに移動してタブを離れると、タブが厄介な位置に置かれるからです。 ユーザーが別のタブからこのタブに戻ってきたとき、タブを元のままにしておくべきか、それともリストを表示すべきか? この場合、ユーザーは混乱しやすくなります。このような困惑を避けるために、タブ***を軽くすることをお勧めします。

また、タブが同じままだと、「戻る」の役割が大きく影響されます。ユーザーが別のタブに切り替えて、そのタブで何かをした場合、「戻る」の役割が不明確になります。同じビューに新しいコンテンツを表示する必要がある場合は、グローバルなコンテンツ切り替えのために作られたドロワーを使用することをお勧めします。

上のイメージは正しい方法で、タブを表示し続けるのではなく、タブなしで新しいインターフェイスを開き、Upを表示します。

5.レトロスペクティブ・タブ

タブは深くあるべきでないと述べたのと同じように、タブは履歴を含むべきでないと述べました。タブに履歴を残すべきではないとはどういう意味でしょうか? タブで行ったことは後戻りできないということです。同じナビゲーションの階層をさかのぼることはできません。

6.レトロな引き出し

タブと同様に、引き出しのナビゲーションアイテムもバックポートされるべきではありません。理由は上記と同じです。ユーザーが異なるナビゲーションアイテムを切り替えたときに、タスクの状態をリセットするべきです。ナビゲーション項目の切り替えは、別のアプリケーションに切り替えるようなものです。ユーザーが「戻る」を押すと、アプリを終了するか、アプリのホーム画面に戻ります。

7.ディープナビゲーションドロワー

前述したように、モバイルアプリは複雑な構造を持つべきではありません。多くのナビゲーションレイヤーが必要な場合、本当に必要なのはアプリの構造をシンプルにすることです。Drawerは安定したナビゲーションハブを提供するために存在し、ユーザーは自分がどこにいるかを覚えておく必要がなく、Drawerを開くだけですべてを自然に理解することができます。しかし、Drawerの中に2番目のDrawerがポップアップすることは、多くの人を狂わせる可能性があります。

Drawerには複数のナビゲーション階層をホストする機能がありますが、これは正しい方法ではありません。

1つの Drawer に複数のナビゲーション階層を配置する必要がある場合、新しい Drawer をポップアップする代わりに、サブ階層を展開/折りたたみとして表示する必要があります。展開と折りたたみによって、コントロール全体が劇的に変化することはありません。ドロワー上のナビゲーションアイテムやタッチエリアの設定については、Android Design で別途説明しています。

ナビゲーションが本当に深い場合は、すべてのナビゲーションアイテムを表示する別のサブナビゲーションページを作ることができます。例えば、Play Musicでは、Libraryの下にあるTabsをDrawerのサブナビゲーションとして使うことができますが、Tabsに広げることでナビゲーションを最適化できます。

8.間違った引き出しの遷移

ここでトランジションと言う場合、トランジションアニメーションと、ドロワーのあるインターフェースとドロワーのないインターフェースの切り替えを意味します。次の2つのエラーは、このトランジションに関連しています。

上のイメージは、アクションバーに引き出しインジケータを表示することで、これを行う正しい方法を示しています。

9.上矢印が表示されません

上で述べたように、Drawer に表示されるすべてのナビゲーションページは Drawer インジケータを表示すべきですし、逆もまた真なりで、Drawer に表示されないものは Drawer インジケータを表示すべきではありません。例えば、上のイメージでは、ユーザがあるコンテンツに入ると Drawer インジケータが表示されます。実際には、このコンテンツページはもはやナビゲーションページではなく、Drawer にはありません。これはアプリケーションのより深いレベルであり、もはや Drawer の管理下にはありません。 ここに表示されるべきものは Up です。

セカンダリインターフェースでドロワーを表示することは、ある種の「高度なユーザーアクション」であるため、ドロワーを表示できることをユーザーに伝えるために、常にドロワーインジケーターを表示する必要はありません。誰かがそれを見つければ最高ですが、見つからなくても問題ではありません、彼らはまだ上に行くことでDrawerを見つけることができます。

10.右側ナビゲーション

前にも言いましたが、Androidには「ナビゲーションは左、操作は右」というルールがあります。左から右に読むユーザーにとっては、左のナビゲーション項目の方がナビゲーションの階層を強調できます。また、スピナーは左側にしか表示されないため、タブは左端をデフォルトとして設定する傾向があり、右側のドロワーはこれらのアクションから遠すぎます。また、Drawer の指示は左に配置され、アクションが実行されると左に引っ込むので、Drawer が右で使用されると、あらゆる種類の視覚的メタファーが衝突します。

正しい書き方は上記の通りです。もちろん、右から左への言語では、これらの位置は逆になります。

*** いつものように、 イベントを開催してくださった +Roman Nurik 氏と +Nick Butcher 氏に感謝します。

Read next

Windows 8.2について知っておくべきこと

Win9の偉大さを達成するために、Win8.2この礎石は、少し不注意、舗装する必要がありますし、崩壊。マイクロソフトはまた言った:2014年は楽しみにして何かをもたらすでしょう。

Aug 19, 2014 · 3 min read