モバイルデザイン
モバイルユーザビリティの基本ガイド
モバイルユーザビリティは、さまざまなデバイスに合わせてWebサイトを縮小するだけではありません。それは、人々がモバイルデバイスを使用する方法に注意を払い、モバイルエクスペリエンスがユーザーと同じくらいユニークであることを理解することです。
モバイルデバイスのユーザビリティデザインは、それと同じくらい重要です 感じる 見た目と動作として。人々は、マウスとキーボードの従来のデスクトッププロキシではなく、指、より具体的には親指を使用して画面を操作します。これは、モバイルデザインがデスクトップよりもはるかに触覚的な体験であることを意味します。ユーザーはそれを見るのと同じくらい感じます。
良くも悪くも、デスクトッププロキシの障壁はなくなり、モバイルデザイナーは使いやすさのための新しいUXデザイン原則のセットに直面しています。
画面と指の両方のサイズが膨大であるという理由だけで、モバイルユーザビリティに万能なものはありませんが、次のユーザビリティの原則は物事を正しい方向に動かします。
- ユーザーを知る
- コンテキストを理解する
- 経験則に従ってください
- コンテンツを最優先する
- （タッチ）ターゲットにとどまる
- ジェスチャーで現実の世界をエコーする
- 段階的開示を使用する
これらについては、この投稿でさらに詳しく説明しますが、最初に、モバイルフレンドリーな設計のいくつかの重要なポイントと、この分野の著名な設計者からの調査結果と推奨事項について説明します。
ピクセルを超えて–モバイルデザインと工業デザインの出会い
モバイルデザインは非常に触覚的であるため、視覚的なデザインや画面上のピクセルを超えています。モバイルユーザビリティでは、設計者は次の要素を考慮する必要があります。 工業デザイン そして 人的要因 ;つまり、実際の物理的なオブジェクトの設計です。モバイルUXデザイナーは実際に物理的な製品自体を設計しているわけではありませんが、モバイルインターフェースのデザイナーは、ユーザーがアプリを物理的にどのように体験するかを理解している必要があります。
タッチスクリーンには UXデザイナー 検討する 人間工学 、物理的な製品の設計者が行うのとほとんど同じ方法です。人々はモバイルデバイスを物理的に操作するため、快適さが重要です。不快な椅子に座りたくない人は誰もいません。同じように、痛みや不快感を引き起こしたり、ナビゲートするのが面倒だと感じたりするアプリを使いたくない人もいません。
工業デザイナーがユーザーの調査と観察に多くの時間を費やすように、 モバイルUIデザイナー 真に認識するために、観察、理解、共感を構築するために継続的に取り組む必要があります どうやって 人々は、画面の設計に直接飛び込む前にモバイルデバイスを使用します。
人々がデバイスをどのように使用するかを理解するには、文字通りの物理的な持ち方と、デバイスを使用するコンテキストの2つが関係します。これらの両方が同じように重要です 使いやすさ 画面が自分でデザインするときのモバイルエクスペリエンスの
ユーザビリティ調査–人々がモバイルデバイスをどのように使用するか
モバイルリサーチの重要人物の1つは スティーブンフーバー 、UXデザイナー兼社長 4番目のモバイル 。 2013年に、彼は人々がどのように携帯電話を持ち、使用するかについて広範な調査を実施し、記事に彼の発見について書きました。 ユーザーは実際にモバイルデバイスをどのように保持していますか？
しかし、彼はそこで止まりませんでした。彼の研究は継続され、分野がより成熟するにつれて、彼は他のモバイル研究データも取り入れ始めました。
2017年に、彼は書いた 3部構成のシリーズ 彼の最初の発見を更新し、新しい重要な学習を指摘し、彼の最も古い作品を標準として参照するのをやめるようにデザイナーに強調して懇願します。彼は、特に1つの図（以下に示す）は、ユーザーが電話を保持する方法の標準としてラウンドを続けていますが、それが唯一の標準として正しくないことを述べています。
実際、2017年の執筆時点で、ユーザーがスマートフォンを保持する方法は6つあります。 75％が親指だけを使用 画面に触れ、片手だけでスマートフォンを持っているのは50％未満です（ 指、タッチ、人のためのデザイン、パート1 ）。
これらの調査結果から、従来のデスクトップは F字型パターン ユーザーが画面上で2回水平方向に目を動かした後、左側を1回垂直方向に動かした場合、モバイルデザインと同期していません。
ほとんどが UXデザイナー デスクトップデザインでウェブコンテンツを読むためのF字型のパターンに精通しているため、モバイルにうまく変換できるパターンではありません。
モバイルにF字型のパターンがないことも、ハンバーガーメニューを使用してメインナビゲーションを折りたたんだり、重要なコンテンツを非表示にしたりすることを避ける理由の1つであり、モバイルデザインをデスクトップとは異なる方法で処理する必要がある理由です。
Fパターンでない場合は、どうしますか？
モバイルユーザーは、最初に画面の中央を見る傾向があります。センターはまた、ほとんどのスマートフォンで親指で手を伸ばして触れるのに最も簡単な場所を表しています。ユーザーが画面の最も外側の隅に近づくと、タッチの精度が低下します。
もちろん、モバイルは電話だけにとどまりません。ユーザーは依然としてタブレットを持っているときに親指を使う傾向がありますが、通常、スマートフォンを持っているのと同じようにデバイスを持っているわけではありません。代わりに、タブレットを両手で横から持ち、親指を使って画面に触れる傾向があります。
モバイルデバイスの7つの指導原則
モバイルデバイスのサイズと人々の使用方法にはばらつきがあるため、「1つのサイズですべてに対応」する設計基準はありません。むしろ、モバイルの使いやすさを向上させるために設計者が理解する必要のある一連の原則と概念です。
次の原則は、デザイナーがタッチと人間工学を考慮して、モバイルエクスペリエンスをより楽しくユーザーフレンドリーにするのに役立ちます。
1.ユーザーを知る
デザイナーがモバイルデザインで犯す可能性のある最初の間違いは、誰もが同じようにデバイスを使用するか、同じデバイスを使用すると想定することです。この仮定を避けるようにしてください。
次の間違いは、二次資料からであれ、以前に実施された一次調査からであれ、以前の調査からのすべての既存のデータがユーザーに永遠に当てはまると想定することです。ユーザーの変化、テクノロジーの変化、ユーザーの行動は大きく異なる可能性があるため、最新の状態に保つには継続的な調査が重要です。
Steven Hooberは、彼の調査で、ユーザーがスマートフォンを保持する6つの方法を確立しましたが、ターゲットユーザーは、主にあまり一般的ではない方法の1つでスマートフォンを保持する可能性があります。たとえば、高齢者が自分の薬に関する情報を記録するように設計されたアプリには、いくつかの固有の要件がある可能性があります。この特定の人口統計では、モバイルデバイスの保持（および表示）方法に影響を与える可能性のある障害が発生する可能性があります。これは、設計者として理解することが重要です。
ユーザーに関する情報を取得する方法はいくつかあります。開始するのに適した場所は、Web分析が利用可能かどうかを確認し、ユーザーが使用しているデバイスを見つけることです。もう1つのオプションは、デバイスと、デバイスを使用するアクティビティについてユーザーを調査することです。経験サンプリングは、設定された時点でユーザーを捕らえるためのさらに別のオプションです。そして、すべての中で最も強力な研究：実際にデバイスを使用している野生のユーザーを観察します。
重要なポイント：モバイルデバイスを使用してユーザーを調査および観察し、ユーザーの設計方法を真に理解します。
2.使用状況を理解する
これは密接に関連しています ユーザーを知る 、しかしそれはとても重要なので、それ自身の呼びかけの価値があります。 モバイル 文字通り「自由に動くことができる」という意味です。ほとんどの人は、モバイルアプリを使用しているときに、じっと座っているか、デバイスに100％集中していません。彼らはしばしば他のことをしています—店を歩いたり、テレビを見たり、運動したり、レストランに座ったり、運転したりします。
どこ 人々がデバイスを使用することは、デバイスの使用方法と同じくらい重要であり、それは全体的なデザインとエクスペリエンスに影響を与える可能性があります。たとえば、実行中のアプリは、銀行のアプリとは非常に異なるユースケースを持っている可能性があります。
ユーザーがモバイルデザインを操作する場所と方法、およびデバイスの使用中に他に何をしているのかを理解することが役立ちます デザイナー ユーザーのために機能するアプリを作成します。
重要なポイント：ユーザーはモバイルデバイスを使用しながらあらゆる種類のことを行い、おそらくアプリに細心の注意を払うことはありません。
3.経験則に従ってください。
ユーザーは主に親指でモバイルデバイスをナビゲートするため、モバイルデザインは、マウスクリックではなく親指用に設計する必要があります。つまり、ユーザーが画面上でアクセスする必要があるものはすべて、不自然に手を伸ばしたりねじったりすることなく、親指が届きやすい距離にある必要があります。
これが、レスポンシブデザインが非常に重要であり、モバイルでの単一列のレイアウトが複数の列よりも望ましい理由の1つです。複数の列を使用すると、画面の領域が自動的に縮小され、重要なコンテンツの一部がサムゾーンの外に配置されるため、ユーザーがアクセスしにくくなります。
重要なポイント：重要なコンテンツとナビゲーションが親指で簡単に手の届くところにあることを確認してください。
4.コンテンツを最優先する
これは工業デザインに明確なルーツを持っています。ジョシュクラークが指摘するように タッチのためのデザイン 、工業デザインの主な原則の1つは、ユーザーの手が視線を遮らないように、コンテンツは常にコントロールの上に表示される必要があるということです。
従来のWebデザインでは、ナビゲーションが最初に画面の上部に表示され、コンテンツはその下に表示されますが、工業デザインはその逆であり、モバイルデザインもそれに続く必要があります。
ユーザーが画面を表示およびタッチする方法のため、最も重要なコンテンツは画面の中央に配置し、他の主要なナビゲーションコントロールは下部に配置する必要があります。
タブレットでは、このアドバイスは少し変わりますが、それでもユーザーが親指で触れてナビゲートできるようにし、指でコンテンツがブロックされないようにすることに重点を置いています。重要なコンテンツとナビゲーションコントロールが画面の横に移動するはずです。
重要なポイント：最も重要なコンテンツを画面の中央に配置し、メインのナビゲーションコントロールを、デバイスに最も適切で、指がコンテンツの表示を妨げない場所に配置します。
5.（タッチ）ターゲットにとどまる
デバイスが何であれ、モバイルはタッチ用に設計する必要があります。しかし、タッチは不正確です。 2人のユーザーがまったく同じ親指のサイズを持っていることはなく、マウスクリックを考慮するほど簡単ではありません。
による ジョシュクラーク 、UXエージェンシーの創設者 ビッグミディアム Designing for Touchの著者である、モバイルユーザビリティで本当に重要な数字は44です。
最適なタッチターゲットは7x7mmで、ピクセルに換算すると約40になります。ただし、さまざまな表示サイズを考慮すると、タッチゾーンをカバーし、ユーザーエラーを回避するための理想的なスペースは44ピクセルです。
タッチターゲットを少し大きくすると、ユーザーがデバイスを操作するコンテキストと状況をカバーするのに役立ち、多くの場合、デバイスに細心の注意を払うことはありません（を参照）。 使用状況を理解する ）。
重要なポイント：タッチは不正確で予測不可能です。タッチターゲット領域を拡大して対応します。
6.エコーの実世界のジェスチャーと動き
ユーザーが適切なマイクロインタラクションでスワイプ、フリップ、ピンチできるようにしますが、物理法則、より具体的には 運動の法則 。デザインの応答は、ユーザーが実行するアクションに基づいて意味をなす必要があることに注意してください。
たとえば、ユーザーが画面上でカードをスワイプするだけの場合、画面から移動するカードの動きは、加えられた力に比例しているように見えるはずです。つまり、カードがゆっくりと飛び出したり、速く飛び出したりしてはいけません。
モバイルでのマイクロインタラクションは、アプリに命を吹き込み、タッチに基づいて追加のコンテキストを提供するのに役立ちます。マイクロインタラクションのエクスペリエンスを改善する方法の詳細については、デザイナーのオンドレイドスタルの記事をご覧ください。 マイクロインタラクションによるより良いUX 。
重要なポイント：ジェスチャーとインタラクションにより、モバイルUIはタッチしやすくなりますが、やりすぎないでください。
7.段階的開示を使用する
これは、ユーザーに適切なコンテンツと適切なコンテンツを提供することを意味します 量 適切なタイミングで、必要なときにさらに多くを取得するためのアフォーダンス。
実際には、それは デザイナー 一度にすべてのコンテンツでユーザーを攻撃することは避けなければなりませんが、同時に、最も重要な情報がナビゲーションの背後に隠れてはなりません。メインユーザーのニーズがメインコンテンツの公開で満たされていることを確認してから、必要に応じてユーザーがより深く掘り下げることができるようにコントロールを追加します。
ザ・ 新鮮な空気 アプリは、メイン画面に現在の気温と降水量を表示するだけで段階的開示をエレガントかつ直感的に処理し、ユーザーが時間ごとの天気情報を水平方向にスクロールできるようにします（関連するジェスチャーとアクションを使用）。
重要なポイント：ユーザーにとって最も重要なものだけを表示し、必要に応じて残りを見つけるために必要なコントロールをユーザーに提供します。
それを一緒に入れて
モバイルデザインは、1つの画面や1つのデバイスよりも幅広く複雑であり、モバイルエクスペリエンスは普遍的ではありません。いくつかの一般的なユーザビリティの原則に従い、工業デザイナーのように考えることで、モバイルデザイナーは基本的な人間工学的基準を順守し、使用しているデバイスや使用場所に関係なく、ユーザーがモバイルエクスペリエンスを快適で楽しいものにすることができます。
•••
参考文献と参考資料
以下は、この記事で使用されているソースのリストと、モバイルユーザビリティの向上についてさらに学ぶための追加資料の推奨事項です。
UXマターに関するStephenHooberの記事は、モバイルユーザビリティの設計の背後にある幅広い研究と科学をカバーしています。
モバイルのユーザビリティとさまざまな画面タイプの設計の詳細については、JoshClarkの本をご覧ください。 タッチのためのデザイン だけでなく、彼の概要 別のイベント：タッチのためのデザイン プレゼンテーション。
科学世界ジャーナル 研究論文を発表し、 モバイルインターフェースのヒューリスティック評価：新しいチェックリスト 、JakobNielsenのに基づくモバイル固有のガイドラインの非常に詳細なPDF ユーザーインターフェイス設計のための10のユーザビリティヒューリスティック 。
•••
ApeeScapeデザインブログの詳細：
- eコマースUX–ベストプラクティスの概要（インフォグラフィック付き）
- 製品設計における人間中心の設計の重要性
- 最高のUXデザイナーポートフォリオ–刺激的なケーススタディと例
- モバイルインターフェースのヒューリスティック原則
- 予測的デザイン：魔法のユーザーエクスペリエンスを作成する方法
基本を理解する
モバイルユーザビリティの目標は何ですか？
モバイルユーザビリティを考慮した設計は、見た目や動作だけでなく、感じ方も重要です。人々は親指を使って画面を操作し、モバイルデザインを触覚的な体験にします。モバイルの使いやすさには、直感的なビジュアルデザインだけでなく、ユーザーの快適さと物理的な使いやすさが含まれます。
タッチスクリーンの種類は何ですか？
モバイルデザインに万能なものはありません。画面とエクスペリエンスはユーザーによって異なるため、画面のデザインに取り掛かる前に、特定のユーザーを調査して理解することがさらに重要になります。
s corp ccorpとllcの違い
なぜユーザビリティがそれほど重要なのですか？
モバイルデザインでは、使いやすさはインターフェースを介した使いやすさだけではありません。モバイルユーザビリティには、デバイスを持ってアプリを使用するときのユーザーの身体的な快適さも含まれます。使用するのが不快で不自然なアプリは廃止されます。
