モバイルアプリのデザイン: ナビゲーションバーの戻るボタンの代替案

ふう、また夜に新商品を更新する時間です。実際、私は時々 Be For Web にアクセスして、約 2 年前に書いたブログの冒頭の言葉を読みます。当時の私のモチベーションは今も変わらず、当時私が愛した世界は今も愛されており、私はますます誇りに思い、幸せを感じています。土曜の夜に冷たいビールを飲んでいる兄弟姉妹はいますか？もしそうなら、まずはバーチャルで乾杯しましょう。良い週末をお過ごしください =)

iOS7のプレリリース版のインターフェースデザイン仕様について、13回連続で記事を書いてきました。今週は通常のペースに戻り、いくつかの短い記事を書いています。今回は、戻るボタンについて説明してきましたが、実際には、タブ バーの下部またはツール バーの左端に戻るボタンを配置するという、ますます人気が高まっている代替ソリューションについてはあまり触れてきませんでした。もちろん、正確に言えば、この場合、コンテナー自体はタブ バーやツール バーとは呼べなくなります。始めましょう。

ここに翻訳を入力してください。私は iPhone 5 が大好きです。640×176 ピクセルの追加は非常に便利です。しかし、最も重要なボタン、つまり「戻る」ボタンをクリックするのが難しいことがよくあります。 UX デザインには、頻繁に使用される機能はクリックしやすい場所に配置するというルールがあります。

モバイル ユーザーの 49% が片手で携帯電話を使用しています。つまり、2 人に 1 人のユーザーが 1 日に複数回、片手で [戻る] ボタンをクリックすることになります。計算すると、これは数億回のクリックに相当します。携帯電話が少し大きい場合は、もう一方の手で戻るボタンを押す必要があります。これは、多くの Android スマートフォンがハードウェアの戻るボタンを左下隅に配置する理由の 1 つだと思います。ただし、Android プラットフォームでは、アプリ内の「前のレベルに戻る」ボタンとハードウェアの戻るボタンの機能が異なるため、この解決策は最適ではありません。

ジェスチャーによる問題解決

戻るボタンの問題に対する最も簡単な解決策は、ジェスチャを使用することです。ユーザーがすでにアプリの動作に慣れている場合は、ジェスチャーが効果的です。また、視覚的なボタンの補足としてジェスチャー操作を使用するのも良いでしょう。

少し驚いたのは、数え切れないほどのアプリを試してみた結果、このようにして戻るボタンの問題を解決する製品がすでに市場にたくさんあることがわかったことです。もちろん、あらゆる状況に当てはまる単一の解決策はありませんが、少なくともそれは始まりです。私個人としては、デザイナーたちが徐々にもっと創造的な解決策を見つけられるようになることを心から願っています。

トス

「投げる」というのは、私たちが実際のオブジェクトとやりとりする方法の比喩です。このモードを使用すると、現在アクティブなインターフェースを簡単に「捨てる」ことができます。たとえば、Letterpress では、ユーザーはすばやく下にスワイプしてポップアップ プロンプトを消すことができます。これは非常に興味深い機能です。

Facebook では、写真を全画面で表示しているときに、写真を上または下にフリックすると、前のインターフェースに戻ることができます。

水平スライド

新しいインターフェースは画面の右側から左側にスライドして表示されます。これは iOS の標準的なアニメーションです。同様に、反対方向にスワイプすることで、前のインターフェースに戻ることもできます。たとえば、Pinterest では、右にスワイプすると大きな画像インターフェースが右に移動し、前のインターフェースに戻ることができます。

同様に、Flipboard では、特定のトピックのコンテンツ インターフェイスで右にスワイプすることで、メイン インターフェイスに戻ることもできます。

iBooks には、左または右にスワイプすることで次のページを開いたり、前のページに戻ったりできることを知らせる明確な視覚的なガイドがありません。ただし、スワイプだけでなく、画面の左右の部分をタップすることでも同様のナビゲーションの役割を果たすことができます。このようにして、視覚的なガイダンスが不足しているためにナビゲーション機能が発見されない可能性が大幅に減少します。また、ページめくり効果は強力なメタファーを使用しているため、ユーザーが画面をクリックしてページめくり操作を完了すると、美しいページめくりアニメーションに基づいて左右にスワイプするナビゲーション機能を簡単に見つけることができます。

垂直抗力

水平スライドの本来の意図と同様に、一部のインターフェースが画面の下部または上部からスライドして表示される場合は、垂直ドラッグを使用して戻ることができます。 Day One アプリには独自の「プルダウンして更新」機能があり、ユーザーは垂直操作で前のコンテンツまたは次のコンテンツに直接アクセスできます。

Clear では、下に長押しドラッグすると前のリストに戻り、下に短押しドラッグすると新しい項目を作成できます。

Haze では、ユーザーはインターフェイスを下にドラッグすることで設定インターフェイスに入ることができます。もちろん、厳密に言えば、これは「戻る」ナビゲーション操作には属しません。

長押しやダブルクリックはどうでしょうか?

長押しとダブルクリックはどちらも親指で独立して実行できる操作なので、将来的には戻るナビゲーションに役立つのではないかと個人的には思っています。

視覚とレイアウトの観点から問題を解決する

実際、iOS のデザイン ガイドラインで要求されているように、戻るボタンをナビゲーション バーの左側に配置すると、最も自然に見えます。しかし、必要に応じて戻るボタンの視覚的なスタイルや位置を完全に変更することは可能です。ボタンらしくない外観にすることも可能です。

Basecamp は、ToDo コンテンツ インターフェースを半カバー パネルとして設計しました。ユーザーは、左側のカバーされていないスペースをクリックしてパネルを右側に折りたたみ、前のインターフェースに戻ることができます。

コンテンツ タイプが適切であれば、Basecamp のようにサブ インターフェイスを何らかのオーバーレイまたはパネルとして扱い、「完了」ボタンを使用してサブ インターフェイスを閉じ、親インターフェイスに戻ることができます。 「完了」ボタンは、インターフェースの右上隅に配置すると、左上隅よりもクリックしやすくなります。

要約する

Apple がより薄くてエッジの薄いスマートフォンをリリースするまで、デザイナーはジェスチャーを使って一般的な操作を実行することにもっと寛容になるようアドバイスします。インタラクティブなオブジェクトがどのように動くか、人々がその動きをどのように認識するかを完全に理解し、その理解をデザインに反映させることができれば、ジェスチャーは非常に効率的で直感的な操作方法になります。デザイナーとして、私たちは人々が実際に携帯電話をどのように使用しているかを理解する必要があります。そうすることでのみ、人々をイライラさせるのではなく喜ばせる製品を設計することができます。

この記事はもともとこのサイトでまとめられたものです。転載が必要な場合は、次の旨を明記してください: この記事は Be For Web から引用しました http://beforweb.com/node/213

オリジナルの英語:

http://blog.mengto.com/solving-the-back-button/翻訳者情報: c7210 - UX プレーヤー、インタラクション デザイナー、元ビジュアルおよびフロントエンド開発者、猫好き、ギター愛好家...現在は Ctrip ワイヤレス部門で働いています。

元のタイトル: モバイル アプリケーションの設計: ナビゲーション バーの戻るボタンの代替について

キーワード: モバイル、アプリケーション、ガイド、ナビゲーション バー、戻る、ボタン、代替、夜、実際、私自身、ウェブマスター、ウェブサイト、ウェブサイトのプロモーション、お金を稼ぐ