web-dev-qa-db-ja.com

新しいアプリのデザインは、従来の(優れた)インタラクションデザインから逸脱していますか?

Joshua Clark's Tapworthy:Designing great iPhone apps の第3章にいます。

そして、私は最初の数ページに本当にびっくりしました。これらの最初の数ページで、ジョシュアは「親指のホットスポット」、つまり親指が伸びたりつぶれたりせずにさまようことができるiPhone画面の領域について説明しています。

Thumb hotsot : source Tapworthy by Joshua Clark , Page 58

また、このToDoリストアプリのような例もいくつか示しています。

enter image description here

標準のiPhoneツールバーとタブバーは、常にサムスンタップの便利な範囲でiPhone画面の下端に表示されます。 ToDoリストアプリThingsは、編集ボタンを右上の偶発的なタップ範囲外に安全に配置します。

新しいアプリのインターフェースは明らかにこれとは異なります。 VineやGoogle+などのアプリの例左上隅にナビゲーションコントロールを配置します

enter image description here

これは明らかに「サムタッピング」ゾーンにはありません。これは良いことですか、悪いことですか?

同様のメモで、GoogleドライブのiPhoneアプリを検討

enter image description here

IMOによるファイルの追加(+)は、リフレッシュよりも頻繁で重要な機能です。それでも、アプリには右上隅(サムゾーンの外)に(+)ボタンがあり、左下(サムゾーンの内側)に更新ボタンがあります。これは、ToDoリストアプリの例とは明らかに矛盾しています。

正直に言うと、右上の(+)ボタンを左下の更新ボタンよりも簡単にタップできます。元気?

この本はベストセラーであり、ジョシュアクラークは本当に才能があり、よく知られているインタラクションデザイナーなので、この本の信頼性に疑問はありません。私は望みません。誰かがこの混乱から私を引き出すことができれば素晴らしいでしょう。ありがとう

10
Nash Vail

Googleは常に最適または一貫したUX決定を行うとは限りません。彼らのGoogle Voiceアプリケーション(まったく別のチームによって作成されたと想定)には、左下隅に[新規]ボタンと[更新]ボタンがあります。

しかし、私はあなたに同意します、右上隅に「+」を置くことは、アプリの頻繁なユーザーにとって使い勝手が悪いです。ただし、ボタンを目立たせます。おそらく、Googleは、初めてのユーザーがほとんど何もアップロードしていないことを知っています。そこで、彼らはビジネス主導のUXを決定し、「+」を右上に置くことで「+」をより目立たせるようにしました。

そうは言っても、本が出版されたとき、iPhoneの3.5インチが最も一般的な画面サイズでした。また、片手での操作がほぼすべての人に実行可能であったため、人間工学的なガイドラインを思いついた人もいます片手操作。

3年早送りします。

画面が大きくなるだけでなく、背も高くなります。ほとんどの新しいスマートフォンを片手で快適に操作することは、大多数の人口にとって問題外です。デバイスサイズの大きな変動により、人々が同じ方法で電話を使用していることが保証されなくなるため、古いガイドラインは適用されなくなりました。

そのため、クリエイターはデザインをより自由に利用できるようになっています。これは素晴らしいことです。

11
Jung Lee

いくつかのモバイルユーザビリティテストを観察して学んだこと:「サムホットスポット」についてはあまり気にしないでください。

スマートフォンディスプレイのよりアクセスしやすい領域は、ユーザーの個々の能力や習慣とは大きく異なります。あります:

  1. 個々の電話の持ち方:一部のユーザーは自分の電話を一番下に持っており、他のユーザーは電話の中央に持っています。ジョシュアが説明する「親指のホットスポット」もそのときシフトしています。

  2. 手のサイズ:平均的な男性サイズの手で右利きなので、四隅すべてに手を伸ばすことができますが、親指で覆われているため、右下の方が不快です。私のガールフレンドの小さな手では、左上に到達するのがはるかに困難です。

  3. 左利きまたは右利き:それはそれ自体が語っているので、ユーザーが電話を握っている手に依存するため、どちらに到達する方が良いかを予測することはできません。

  4. 手の動きの能力:特に高齢者は指をどの方向にも動かすことができません。伸ばすのに問題がある人もいれば、親指を曲げるのに問題がある人もいます。

最後に、ユーザーがより柔軟になることを学習したを使用しており、ボタンに到達するために電話の位置を変更するのがかなり速いことを忘れないでください。 自分の電話を使用しながら数人を観察するをお勧めします。 Facebookのアプリ(または、使い慣れたアプリ)でいくつかの動きをするように彼らに頼むだけで、彼らがこれらの課題にどれだけ面白く取り組んでいるかがわかります。

9
Marcel Otten

最初の画像に描かれている親指の領域に質問することから始めます。 iPhoneは特別にpre 5(この本で取り上げる予定)は小さい。通常の大人は3つのコーナーをカバーできます。4つすべてではないにしても、どちらの手で電話を持っているかに応じて、2つの下と上を簡単にカバーできます。

リーチに関しては、到達しやすい涙のゾーンに分類します。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

今、上部と下部の違いは次のとおりです:下部のバー全体が人の親指の読み取り範囲内にあります(電話を傾けることにより) 、しかし、トップバーは少しトリッキーで、手の届く範囲にありますが、すべてのコーナーに到達するには少し操作が必要になる場合があります。

ナビゲーションバーとして使用されている上部と下部のバー の両方を確認しました。電話、カレンダーなどのネイティブアプリを見ると、下部のバーはさまざまなモード(お気に入り、最近、連絡先など)間のナビゲーションとして機能し、上部のバーはアクション(アイテムの追加、編集、削除)に使用されます。等。)

+ボタンの配置について。タイトルバーは既に使用されており、他のコントロールがないためです。 +アイコンは「ナビゲーション階層」に収まらないため、グループ化するのではなく、タイトルバーにそのまま残します。 「検索」機能でも同様の結果が見られます。多くのアプリはタイトルバーにそれを持っています(IMDBなど)。

2
rk.