tachevインターフェースの設計機能

これは、オリジナルのDesigning for touch記事の翻訳です。







おなじみのデスクトップインターフェイスを管理する原則は、タッチインターフェイスに関しては逆さまになっています。 この記事では、タッチモバイルデバイスのインターフェイスの開発に関するインタラクションデザインのスペシャリストであるJosh Clarkの推奨事項を示し、Android、iPhone、およびiPadデバイスのタッチインターフェイスを比較します。



モバイルインターフェースの開発に成功するには、モバイルデバイスの小さな画面のフレームワークにそれを詰め込むだけでは十分ではありません。 効率的なモバイルタッチインターフェイスにより、不器用な指のジェスチャを制御することができます。 ポータブルデバイスのインターフェイスの機能により、開発者はグラフィックおよび情報デザインの原則を超えて、工業デザインの領域に足を踏み入れることができます。 ここで、感覚装置の世界では、人間工学が危機にatしています。 今、あなたはピクセルを見ることができるだけではありません：それらは触れることができます、そして、彼らは触れて心地よくなければなりません。

経験則

タッチデバイスのインターフェイスを開発する場合、このデバイスが手にどのように置かれ、ユーザーの指がどのようにそれを覆うかを明確に理解する必要があります。 たとえば、携帯電話を使用して、主に親指を振るいます（ただし、おそらく、他の洗練された方法で電話を保持するオリジナルがあります）。 したがって、電話のインターフェイスを開発するときは、ユーザーの親指に適応する必要があります。



ああ、いいね！ 愚かな牛と私たちを区別するのは、彼ら（そして、おそらく、有名人の生活に関するゴシップの愛）です。 残念ながら、親指ですべてに到達することはできません。 もちろん、適切な努力をすると、親指は携帯電話の画面上のほぼすべてのポイントに到達できます（巨大なモデルを考慮しない場合）が、過度のストレスがなければ、画面の3番目の部分（親指の反対側から下側）でしか操作できません



タッチインターフェイスの基本要素を配置する必要があるのは、このゾーンです。 たとえば、携帯電話を右手で持っている場合、親指は画面の左下隅の上になります。







このため、モバイルデバイスインターフェイスでは、ツールバーとナビゲーション要素は通常画面の下部にありますが、従来のデスクトップアプリケーションインターフェイスでは通常画面の上部にあります。デスクトップアプリケーションのメニューは画面またはウィンドウの上部にあり、Webサイトのナビゲーション要素があります。 -ページの上部。 ただし、親指を使用すると制限が課せられ、通常のデスクトップインターフェイスが上下逆になり、ナビゲーションツールとメインインターフェイス要素が画面の下部に移動します。



モバイルデバイスの画面の下部への親指の引き付けは、画面の左側と右側を選択するよりも、モバイルインターフェイスの設計においてはるかに重要な要素です。 結局のところ、ほとんどの携帯電話ユーザーは、デバイスを操作するときに簡単に手を変えることができます。 多くの場合、右利きの人は「左に行く」（時には左手が右よりも頻繁に使用されるようになる）ことを楽しみ、左利きの人はそれぞれ左で右に変わることがよくあります。 平均的なユーザーは左よりも右手を使用する可能性が高いと考えられていますが、明確な十分な傾向はまだないため、開発者はリラックスして「右か左か！」という質問に困惑することはありません。



私たちの経験則は、ユーザーがデバイスを保持している手に関係なく機能し、インターフェース要素の効果的な視覚的階層を構築することができます。 最も頻繁に使用されるボタンは、ユーザーがボタンを押すのに便利な画面の下部に配置する必要があります。 他のすべてのコントロールは、有害な方法から移動する必要があります。 たとえば、iOSアプリケーションでは、「変更」ボタンは通常、右上隅にあります。つまり、可視性ゾーンにありますが、偶発的なクリックを避けるために直接到達できません。







デバイスの画面の下部にメインインターフェイス要素を配置する必要があります。これは、親指でより便利に制御できるだけでなく、単にユーザーの指が画面を覆い隠してしまうためです。 インターフェイス要素を下部に配置するとき、表示されているコンテンツに手が重ならないようにします。 開発中のアプリケーションのコンテンツを可視性ゾーンに保持するには、コントロールの上に配置します。 この論理的で馴染みのあるアプローチは、iPod、電卓、携帯電話、体重計など、ほとんどの物理デバイスで使用されています。コンテンツは上に、コントロールは下にあります。

ミーロボット

ただし、このルールは私たちが望むほど単純ではありません。特に、Android開発者は、各デバイスのタイトな画面の下部にシステムボタンを配置しました（Android 3“ Honeycomb”のリリース前は、 Android 4「アイスクリームサンドイッチ」-仮想のみ）。 もちろん、上記の理由によると、これらのボタンは画面の下部に配置する必要がありますが、これにより、OSコントロールボタンとアプリケーションコントロールボタンが一緒にノックされるという事実につながり、タッチインターフェイスでの作業が大幅に複雑になります。 画面の下部に追加のコントロールを配置すると、ツールバーが山になります-そして、そのようなインターフェイスでは、悲しいかな、ユーザーは常に他の場所をクリックするリスクがあることに注意してください。 そして、親指が重なっている画面の領域では、このようなエラーを回避することはほとんど不可能です。 Androidデバイスのこのメイン画面を見てください。実際には、ユーザーにエラーのない操作の機会はありません。







タッチインターフェイスを開発するときは、このようなコントロールの統合（特に画面の下部）を避ける必要があります。 残念ながら、これは、Androidアプリケーションのコントロールを画面の上部に配置して、システムコントロールで占められている下の群衆を避ける必要があることを意味します。 このレイアウトは理想からはほど遠いです。ナビゲーション要素は親指の直接手の届かないところにあり、ユーザーがそれらに到達しようとすると、彼の手が画面全体を覆います。 しかし、そのような不便さでさえ、押されたときに指が隣接するボタンに絶えず触れている状況と比較して重要ではありません。



Androidデバイスでは、ナビゲーションとコントロールを上部に配置する必要があります。 これは、Androidデバイスのボタンの場合のように、ホームボタンがアプリケーションの操作を妨げないiPhoneデバイスで使用される原則の反対です。 Android（左）とiPhone（右）のFoursquareアプリを比較してください。

インターネット：アプリケーション内のアプリケーション

モバイルデバイスの画面上のインターフェイス要素が乱雑にならないようにしようとすると、Webサイトの使用でも問題が発生します。 ご存知のように、すべてのWebサイトとWebアプリケーションは、別のアプリケーション、つまりWebブラウザー内で機能します。 多くのモバイルプラットフォームのブラウザには、Webナビゲーション用のユーザーインターフェイスでの作業を困難にするボタンとコントロールもあります。 したがって、Webサイトを操作するコンテキストでは、画面の下部にナビゲーション要素を固定しないようにする必要があります。そうしないと、Webサイトのツールバーがブラウザーのツールバーにかなり近くなるためです（固定されているという事実位置（固定：固定）は、すべてのモバイルブラウザーのCSSで等しくサポートされていないため、下部のツールバーを固定するのは非常に困難です）。



この問題の解決策は、Androidデバイスの場合のように、画面の上部にWebナビゲーション要素を配置するのではなく、ページの下に移動することです。 モバイルブラウザのリソースのかなりの部分がさまざまな付加機能によって「食い尽くされる」ため、Webページの上部をナビゲーションパラメータでブロックして、コンテンツを画面から押し出してはいけません。



Luke Wroblewskiは、真にすばらしい本であるMobile Firstで次のように述べています。「ユーザーとモバイルWebアプリケーションとの関係は、多くの場合、コンテンツ自体ではなく、ナビゲーションオプションのリストから始まります。 モバイルデバイスで作業する場合、時間は文字通りその重さに見合うだけの価値があり、ファイルのダウンロードには実際の費用がかかる可能性があるため、できるだけ早く必要なものを提供するようにしてください。



モバイルアプリケーションを使用する場合、コンテンツはフォアグラウンドに配置し、メインナビゲーション要素は下部に配置し、画面全体に表示されないようにする必要があります。 Wroblewskiでは、デザインテンプレートの使用を推奨しています。その一例として、Ad AgeモバイルWebサイトを検討できます。画面上部のツールバーの[メニュー]ボタンを押すと、すべてのナビゲーション要素が非表示になります。 ボタンを押すだけで、ナビゲーションパラメータがデバイスの画面にすぐに表示されます。 メニューは、オーバーレイが発生したかのように即座に表示されますが、実際には、ページの下部にあるナビゲーション要素へのリンクバインドとして機能します。







Luke Wroblewskiは、このアプローチの次の利点を強調しています。



「ここでは最小限のナビゲーション要素セット（上部にある唯一のリンク）を使用しますが、ユーザーは最初にコンテンツに簡単に慣れてからナビゲーションを処理することができます。 このメニューは他のメニューと重複せず、その操作（最も快適な部分）は単純なリンクリンクのみを必要とします。 はい、はい、なし派手なJavaScript、オーバーレイ、または個別のナビゲーションページ-ページの下部にのみバインドします。 これは決して簡単ではありません-HTML 0のようなものです。」



上記のコンテンツ、以下のコントロール-すべてが非常にシンプルに思えますが、アプリケーション開発者がオペレーティングシステムまたはブラウザーがリソースに提示するリクエストを考慮しなければならないため、設計結果が大幅に変化する可能性があることを既に見てきました。 次の結論を出すことができます。

• iPhoneアプリケーションコントロールは、画面の下部に配置する必要があります。
• Androidアプリケーションコントロールは画面の上部に配置する必要があります。
• Webアプリケーションのナビゲーション要素は、画面の下部ではなく、ページの下部に配置する必要があります。

ただし、これらの推奨事項は主に電話に関するものです。 大型のタッチデバイスはどうですか？ iPadのようなデバイスになると、設計ルールが再び変わります。

タブレット-隅に

経験則はiPadデバイスに適用されますが、電話のようなタブレットを持たないため、直接到達ゾーンは多少異なります。 ユーザーがiPadを保持する方法は、姿勢によって異なります。 立っているときは、両手を使う必要があります。 テーブルに座って、ユーザーは片手で彼をサポートし、もう片方を制御する可能性があります。 椅子の後ろに座って、彼はタブレットを膝の上に置き、片手でデバイスを制御できるようになります。 そして、ユーザーが横たわっているか、何かに寄りかかって、傾いた姿勢にある場合、おそらく彼は片方の手でデバイスを支え、もう片方を制御します。



これらすべての位置で、ユーザーの指はデバイス画面のさまざまな部分にあります。 さらに、各位置で、ユーザーはデバイスを一定の距離で保持します。 すべてに最も近いのは、iPadを立てた状態に保ち、最も遠くに横たわった状態に保つことです。



このすべての多様性から、2つの一般原則を推測できます。 まず、iPadは最も便利に上部に保持されていますが、ユーザーの親指はデバイスの画面の上部の角の上にあります。 第二に、iPadの画面に表示されるすべてのコンテンツをカバーすることは、携帯電話の画面よりも単純に大きいため、一見すると非常に困難です。 視線は主にタブレットの上部（および印刷ページ-この原則は活版印刷デザインの分野から取られています）に焦点を合わせているため、表示される情報の階層はそれに応じて整理する必要があります。 言い換えると、iPadで作業する場合、ユーザーの目と指の両方がデバイスの上部にあります（下の部分が見えなくなることがあります：最も一般的で確かに最もリラックスした位置-横たわっているか横たわっている-デバイスのフロントパネルの下部は毛布のひだに埋まっています、セーターとユーザーのおなか）。



iPadタブレット用のアプリケーションでは、電話とは異なり、メインコントロールとボタンは iPadを手にしたユーザーの親指がある場所である上部 、つまり上部の隅に配置する必要があります。 良い例として、iPad用のInstapaperおよびTwitterアプリがあります。











同時に、これらのボタンを使用すると、表示されているコンテンツがユーザーの手によって閉じられるため、コントロールを上部中央に配置する価値はありません。 原則として、コントロールはそれらに関連付けられたコンテンツのすぐ上に配置するべきではないため、このテンプレート（これらの要素を隅に配置する）は非常に便利です。 たとえば、iPadのDaily Dailyアプリでは、ページの上部に問題があるページを表示できるツールがありますが、それを使用しようとすると、ページのサムネイルが手に重なり、ユーザーのタスクが複雑になります。

まとめると

The Dailyアプリケーションの開発者が犯した上記の間違いは、ルールには例外があることを示しており、場合によっては、コントロールを画面の隅ではなく画面の下部に配置する必要があります。 コンテンツの表示または変更を担当するコントロールは、常にこのコンテンツの下またはその横に配置する必要がありますが、上からではありません。 たとえば、iPad用シドニーモーニングヘラルドの開発者は、独自のナビゲーションツールを導入しました。ユーザーは、画面下部のページ番号で構成されるポインターを指でスワイプするだけで、現在の問題のすべての記事をすばやく閲覧できます。 この管理ツールは画面上にヘッダーの長いリストを表示するため、画面の下部に配置するのが最も合理的です。そうしないと、ツールを使用するときにユーザーの手が表示されたコンテンツに重なるためです。







それで、何を選ぶべきか-上か下か？ それを理解しましょう。

• iPadの画面の上部には、ユーザーがコンテンツを友人と共有したり、お気に入りに追加したり、削除したりできるナビゲーション要素とツールを配置するのが最善です。
• 下部は、アクティブウィンドウにコンテンツを表示する責任があるコントロールに最適です。

そのため、書籍や雑誌のページのサムネイルを下に配置するのが最適です。 別の例：他の機能の中でも、作成しているマップに追加するオブジェクトのパレットを含むマップ作成アプリケーションを開発しているとします。 ご想像のとおり、このパレットは画面の下部にも配置して、カードを操作するときにユーザーの手が画面に重ならないようにする必要があります。

アケラはお見逃しなく

ユーザーがデバイスを保持してコントロールの位置を決定する方法と同様に、ユーザーの指のサイズがこれらの要素のサイズを決定します。 タッチインターフェイスの要素は、ユーザーが画面を見つめずに見逃すことがないように十分大きくする必要があります。



タッチインターフェイスの要素のサイズは？ 反問：指先のサイズは？ 各プラットフォームには独自の推奨事項があります。 Appleは、いつものように、最も永続的であり、すべてのプラットフォームに対して最高の（記事の著者による）普遍的な推奨を提供します： タッチインターフェイス要素のサイズは、少なくとも44ポイント（1/4インチまたは7 mmに等しい）でなければなりません Webアプリケーションの場合、この44ピクセルの制限も非常に適切に適用されます。



デスクトップインターフェイスに慣れている開発者にとって、これらのコントロールは巨大でおもちゃのように見えるかもしれませんが、慣れる必要があります。 タッチインターフェイスの巨大なボタンや巨大な要素に簡単にアクセスできるだけでなく、非常に目立ちます：ぼんやりしたユーザーでも、モバイルデバイスの画面で目的のボタンを簡単に見つけることができます。



理想的には、タッチインターフェイスのすべての要素のサイズは少なくとも44 x 44である必要があります。しかし、ここでは、他の場所と同様に、妥協案を探す必要があります。 標準のiPhoneコントロールのサイズでさえ、宣言されている44ピクセルとは異なる場合があります。 たとえば、キーボードボタンのサイズは、高さ44ドット、幅30ドットのみです。 横向きでは、ボタンの幅はそれぞれ44ポイント、高さは38ポイントです。 ここでは、Apple開発者には操作の余地があまりありません。QWERTYキーボード全体が表示されることが非常に重要であり、すべてのキーのサイズを44 x 44に設定すると、1つの画面に収めることができません。 何かを犠牲にしなければなりません。



以下は、狭いスペースでタッチスクリーンインターフェイス要素を開発するのに役立つ良いルールです。 たとえば、インターフェイス要素の幅が少なくとも44ポイントである場合、必要に応じて高さを30ポイントに減らすことができます。 したがって、タッチインターフェイスの要素の実際の最小サイズは44 x 30である必要があります。

押さないで

この記事の著者は、浪費された若者をカシオのエレガントな腕時計計算機の会社で長年過ごし、1985年にようやく別れました。 さらに、ボタンが小さかっただけでなく、作者が卒業式の王様になることもできませんでした...しかし、これでさえ彼らの主な欠点とは言えません。 実際には、上記のボタンは近すぎて配置されていました。 「5」を押して、結果として「2」または「8」を押します-計算機ではなく、純粋な宝くじで結果を予測することは不可能です。 つまり、ボタンのサイズが唯一の決定要因ではありません。ボタン間の距離を考慮する必要があります。





ジョン・ローリンソンによる写真



小さな画面を備えたデバイス用のインターフェースを開発する場合、インターフェース要素のレイアウトをコンパクトにすることにより、限られたスペースの問題を解決する誘惑に対処する必要があります。 「これをもう少し近づけましょう...このツールバーに別のボタンを追加してください...」電卓時計の全盛期の人気のモットーを引用して：「ノーと言ってください。」



ボタンが近ければ近いほど、ボタンの数は多くなります。 iPhone用のVoIPテレフォニーアプリをいくつか考えてみましょう。SkypeとCall Global Appです。 どちらのアプリケーションでも、キーボードボタンは非常に近くに配置されていますが、これは上記の最小44 x 44を大幅に超えるサイズで補われています。したがって、ボタンがかなり近接していても、比較的簡単に操作できます。







ただし、これらのアプリケーションはすべてが同じというわけではありません。画面の下部を見てみましょう。 どちらのアプリケーションでも、ボタンはナビゲーションタブバーの上部にあります。上記のように、この配置はユーザーに常にいくつかの困難をもたらします。 しかし、Skype（左）では、ボタンのサイズが印象的であるため、設計上の欠陥が取り除かれています。 ただし、Call Global Appでは、ブックマークバーの上のボタンが狭すぎるため、それらを閉じるとユーザーエラーが発生します。 これらのボタンのサイズが実際に宣言された最小サイズの44 x 30を超えているという事実にもかかわらず、それらの間にスペースがないことと、画面の一番下の位置そのものが致命的な役割を果たします。 ここでは、大きなボタンとインターフェイス要素のより自由な配置が必要です。



締めくくりましょう。 これは常識に反するように思われるかもしれませんが、小さな画面を持つデバイスのインターフェイスの効率は、大きなインターフェイス要素とそれらの間の十分なスペースによって保証されます。 はい、デバイスの画面は非常に小さくてもかまいませんが、指（および注意の範囲）はそれほど小さくありません。 だから、ワークアウト時に太い指を忘れないでください。



投稿者：Josh Clark