モバイルデザイン

モバイルUXの設計上の制約、ベストプラクティス、および開発者との連携

モバイルUXデザインのベストプラクティスに従い、制約を理解し、開発者との強固な協力関係を促進することで、より優れたユーザーエクスペリエンスを実現できます。

モバイルUXデザインとは何ですか？

に最近の記事 TechCrunchで、モバイルeコマースが2018年の感謝祭の休暇期間中のすべてのオンライン販売のほぼ3分の1を占めていることを指摘しました。報告されたデジタルトレンド 2017年には、世界中で50億人がモバイルデバイスを所有しています。グーグルはまた、モバイルファーストインデックスは、検索結果のWebページの半分以上で使用されるようになりました。

人々は、通信、eコマース、コンテンツの消費、仕事、銀行業務、道順、そしてますます唯一のコンピューティングデバイスとして、毎日モバイルデバイスに依存しています。さらに、携帯電話、スマートウォッチ、タブレット、ファブレット、ウェアラブル、ハイブリッドノートパソコンなどのさまざまなデバイスを使用しています。

レスポンシブデザインの一般的な画面サイズ

モバイルユーザーエクスペリエンス（UX）デザインとは、モバイルデバイスとウェアラブル、およびそのようなデバイスで実行されるアプリケーションやサービスの使用中のポジティブなエクスペリエンスのデザインを指します。モバイルUXデザインは、効率と発見可能性に重点を置いています。 - インタラクションデザイン財団

ために UXデザイナーこれらのモバイルデバイスのトレンドは、課題と機会の両方を表しています。一方では、さまざまなデバイスとそれらが使用される方法を考慮する必要があります。一方、これにより、UXデザインにまったく新しい重点分野が開かれます。つまり、まったく新しい世代のユーザーに前向きなエクスペリエンスを提供することを意味します。

モバイルUXデザインのベストプラクティス

モバイルUXの設計には注意が必要です。前に述べたように、モバイルデバイスのリストの増加、人々がそれらと対話する方法、人々がすべてのデバイスタイプにわたって一貫した楽しい体験を望んでいるという事実など、私たちが考慮しなければならないことがたくさんあります。

Googleの25のモバイルUXデザインのヒント

2015年、Googleは社内調査に基づいて25のモバイルUXデザインのベストプラクティスを公開しました。これらのヒントそれらをより最新のものにするために最近更新されました。著者はまた、あらゆるモバイルUXプロジェクトに便利な25のヒントすべてのダウンロード可能なPDFを含んでいます。

Appleのヒューマンインターフェイスガイドライン

便利なもう1つの優れたリソースは、Appleのモバイルデザインのヒューマンインターフェイスガイドライン。それらは美しいレイアウトで読みやすく、ベストプラクティス、ヒント、およびApple独自の設計原則が盛り込まれています。ためにモバイルUXデザイナーこれらのガイドラインは、高品質のユーザーエクスペリエンスを提供するための優れたリソースです。

モバイルデザインのヒューマンインターフェイスガイドライン

Appleのヒューマンインターフェイスガイドラインでは、モバイルUXの設計原則について詳しく説明しています。（沿って林檎）

追加のモバイルUXのベストプラクティス

Googleほど知られていないかもしれないが、次のようなモバイルUXデザインのベストプラクティスをいくつか紹介します。モバイルデザイナー考慮に入れる。

UXリサーチ 。ある時点で、モックアップやプロトタイプにすぐに取り掛かる傾向があると感じるかもしれませんが、適切に実行する UXリサーチまず、控えめに言っても過言ではないものです。「あなたはあなたのユーザーではない」ことを常に忘れないでください。ポジティブなユーザーエクスペリエンスは、すべての場合において徹底的なUX調査に依存しています。ここはアドビのUX調査方法に関する包括的なガイドさらなる参照のために。
クラッター 。私たちは皆、雑然としたデスクトップの不安を経験しました。モバイルデバイスで想像してみてください。追加されたボタン、画像、コンテンツなどはすべて、物事をはるかに複雑にします。絶対に必要ではないモバイルUIの内容をすべて削除することをお勧めします。優れたヒントは、ミニマリズムを目指して努力することですが、使いやすさを損なうことはありません。これは多くの場合、優先順位を付けることで実現できます各画面で1つのメインアクション。
優先順位を付ける 。できるだけ多くの機能を追加しようとする傾向があります。何かを省くことは、どういうわけかユーザーのエクスペリエンスを低下させると私たちは感じています。それどころか、コアの目的に基づいて機能を高度に集中させ、どの機能が最も使用されているかを分析して設計を改良し、それらの機能を直感的で楽しいものにするように努力します。
タッチターゲット 。ユーザーは、何かをタップしても反応しないと、身体的に怒り、モバイルデバイスを叩き始める可能性があります。 A 調査 MITで行われたことは、彼らが小さすぎる何かをタップしていることを発見しましたタッチターゲット。ベストプラクティスは、コントロール、ボタン、リンクなど（タッチターゲットであるもの）を、指先の平均幅である7〜10mm以上作成することです。これらのUI要素の間に十分な間隔があることを確認することもお勧めします。
読みやすいテキスト 。ユーザーが行うことの多くはコンテンツの消費に基づいているため、すべてのタイプのモバイルデバイスで一貫したエクスペリエンスを提供するために、次のことを確認してください。うまく機能する書体を選択してください複数のサイズと重量で。目の疲れを軽減するために、少なくとも11ポイントのフォントサイズをお勧めします。 Googleのようなすっきりと読みやすい書体ロボットそして既知またはAppleの新しいサンフランシスコフォント探索するのに最適な選択肢です。
UI Feedback 。適切に設計されたアプリケーションは、それらと対話するときに情報を提供し続けます。適切なフィードバックがないと、ユーザーは混乱し、何かが起こったのか、起こっているのか、なぜ起こったのか、起こらなかったのかを疑問視する可能性があります。ベストプラクティスは、UI要素またはアプリの現在の状態に基づいて、さまざまな形式のフィードバック（音、触覚、視覚化）を使用することです。
アクセシビリティ 。これはおそらく、ユーザーエクスペリエンスデザイン、特にモバイルUXデザインで最も見過ごされている側面の1つです。世界の人口の15％が何らかの形の障害を経験しています。ザ・ Webコンテンツアクセシビリティガイドラインは無料で利用できるリソースであり、デジタルデザイナーは、ツールボックスの一部として「必須」です。

モバイルUXアクセシビリティデザイン

モバイルUXデザインのベストプラクティスとしての音声ショートカットや読書支援などのアクセシビリティ機能（林檎）。

モバイルUXデザインの制約

ほとんどのUXデザイナーの目的は、楽しい体験を提供し、発見可能性（どのようなアクションが可能か）と理解（製品の使用方法）の両方を実現する優れたデザインを考案することです。ただし、モバイルでは、これらのデバイスが使用されるサイズ、移植性、および環境のために、いくつかの制約が導入されます。

ストレージの制約

ネイティブモバイルアプリを扱う場合、デザイナーは一部のユーザーにストレージの制約がある可能性があることを考慮する必要があります。

モバイルアプリは、Webアプリとは対照的に、モバイルデバイス上でストレージを使用します。これは、使用できるビデオ、オーディオ、および画像の品質に潜在的な制限をもたらすため、モバイルUXデザインに影響を与えます。

ネイティブアプリの場合、ストレージの制約を考慮したモバイルUXデザインが必要です。ユーザーがストレージの制限に遭遇した場合、何を保持し、何を削除するかについて難しい決定を下す必要があります。ユーザーにこれらの選択を強いる場合、ユーザーエクスペリエンスが低下します。

米国を拠点とするフルタイムのフリーランスUXデザイナーが望んでいた

画面とコントロール

モバイルUXデザインで直面するもう1つの制約は、画面サイズとモバイルデバイスのコントロールです。

モバイル画面は小さくなります。のぞき穴から読むと、認知的負荷が増加し、理解が約2倍難しくなります。 - ヤコブ・ニールセン、Webユーザビリティコンサルタント。

画面とコントロールを処理する最良の方法は、可能な限り多くの摩擦を排除することです。情報を再構築し、サムゾーンに注意を払い、クリックを減らし（特にeコマースの場合）、ログインプロセスに注意を払います。これはしばしばイライラする可能性があります。

実行中のモバイルUXデザインの制約

モバイルデバイスは、UXデザインにまったく新しい一連の課題を提示します。（写真提供 Jaelynn Castillo ）

環境

モバイルデバイスでは、UXデザインで考慮すべき環境要因があります。ユーザーはより頻繁にオフラインになる可能性があり、これらの状況は全体的なユーザーエクスペリエンスで考慮する必要があります。どうすれば元の場所に戻すことができますか？彼らが何をしていたかを最初からやり直す必要がないようにするにはどうすればよいでしょうか。

別の環境要因は気晴らしです。私たちが携帯電話やタブレットを使用するとき、私たちはしばしば騒がしいまたは混雑した環境にあり、集中するのが困難です。気晴らしがユーザーの注意を奪い合っているときに、どうすれば優れたユーザーエクスペリエンスを確保できますか？状態を保存し、ユーザーが状態を保存できるようにする方法はありますか？

小さい画面サイズ、単一ウィンドウ

デザイナーがモバイルUXデザインに反対しているもう1つの制約は、画面のサイズが限られていることです。そのため、一度に表示できるウィンドウは1つだけであり、ユーザーエクスペリエンスに大きな制限があります。

「マルチスクリーン」と「マルチタスク」に対応しようとする努力がありますが、これらはまだ標準ではなく、独自の制約があります。

この単一ウィンドウの制約でモバイルUXを改善するための鍵は、デザインが自給自足である必要があるということです。ユーザーが行う必要のあることはすべて、1つの画面またはウィンドウ内で実行できる必要があります。つまり、情報などを見つけるためにアプリを離れる必要はありません。

ユーザーがアプリを離れたり、新しい画面を開いたりする必要がある場合、これは全体的な認知的負荷を増大させ、物事が複雑になりすぎてイライラすることを意味します。

人々がモバイルデバイスを保持する方法

注意すべき最後の制約が1つあります。それは、ガジェットを保持することです。人々はそれらをどのように保持し、これはモバイルUXデザインにとって何を意味しますか？

スティーブンフーバーによる調査によると、指、タッチ、人のためのデザイン、パート2 、デバイスの持ち方によってデバイスの操作方法が異なることが発見されました。これは、その後、モバイルUXデザインに影響を与えます。

人々はモバイルデバイスをさまざまな方法で持ち、常に位置を変えています。これは、使用する指とモバイルUIとの対話方法に影響を与えます（以下を参照）。結局のところ、ユーザーは画面の中央を好み、端に近すぎるアイテムをクリックすることを好みません。

人々がモバイルデバイスをどのように保持するかは、モバイルUXデザインに影響します

人々が自分の電話をどのように保持して使用するか（スティーブンフーバー）。

スティーブンの調査によるモバイルUXのその他のヒントは次のとおりです。

すべてのユーザーおよびすべてのタイプとサイズのモバイルデバイス向けの設計
人々がデバイスを操作するさまざまな方法すべてに合わせて設計する
ほとんどの場合、ユーザーは画面の中央に触れることを好むことを考慮してください
画面の中央半分から3分の2にキーアクションを配置します
指や親指でコンテンツが見えにくくならないようにしてください
選択可能なアイテムは、快適にタップできる大きさである必要があります

開発者との協力

アジャイル/リーンUX環境で作業するかどうかに関係なく、非常に慎重に作成された設計を解釈して実装する必要があるのは開発者です。設計が意図したとおりに実装されていることを確認するために、開発者との間で試行錯誤したベストプラクティスを早い段階で確立することをお勧めします。ここにいくつかの提案とヒントがあります。

モバイルアプリのプロトタイプテストは手動で行うことができますか、それとも何でしょうか？

モックアップ

モックアップを準備して渡すときは、ファイル名をシンプルで一貫性があり、わかりやすいものにするようにしてください。これにより、行き来する時間を大幅に節約できます。また、開発者と共有する前にすべてのモックアップを完成させて、各画面の1つのバージョンのみを受け取るようにすることもお勧めします。もう1つの時間節約のヒントは、プロトタイプとのすべての相互作用をテストして、プロトタイプが機能するようにすることです。モックアップを共有するための優れたツール： InVision そして マーベル 。

機能仕様

UXデザイナーとして行われる作業のほとんどは、プロジェクトの早い段階で開発者が関与します。デザインプロセスの継続的な理解を促進し、より良いコミュニケーションラインを作成するための優れた方法は、機能仕様書、または「Func-Spec」。

Func-Specドキュメントは、設計プロジェクト全体で開発者と共有され、アプリケーションまたはWebサイトがどのように機能するか（UIがどのように見えるか）を理解できることを除いて、アーキテクトが作成する青写真に似ています。

動作するFunc-Specの良い例を以下に示します。

UXツールの機能仕様の1つは、開発者と協力して優れたモバイルUXのベストプラクティスを提供します

開発者と協力するための優れたモバイルUXのベストプラクティスは、機能仕様です。（沿ってミクロスフィリップス）

コピー

通常、モックアップの外にあるコピーがたくさんあり、開発者に伝える必要があります。ここに彼らが間違いなく感謝するアイデアがあります：

近接性の定義のゲシュタルト原理

開発者へのモバイルデザインの引き渡し

コピーを開発者に伝達するためのシンプルだが便利な方法。

上で見たように、環境メッセージがいつ表示または非表示になるかを開発者が理解するのに役立ちます。開発者に何が起こっているのかを知らせて、推測する必要がないようにする必要があります。ザ・ メッセージ 表示される実際のコピーです。ぎこちないものではなく、実際のコピーを使用してください（つまり、lorem ipsum）。開発者はコピーライターになりたくないので、私たちは彼らのために物事をできるだけスムーズにしたいと思っています。

仕様

これは、開発者と設計を伝達する上で最も重要な部分の1つです。ここに次のようなツールがあります Zeplin そして InVisionの検査 測定値、スタイルガイド、フォント、ユーザーエクスペリエンスの流れ、デザインのすべての部分がどのように機能するかなどの仕様の伝達を処理するため、本当に輝いています。

コミュニケーションIRL（実生活）

デザイナーは自分たちのツールが大好きです。電話を取るのを忘れたり、ビデオ通話を開始したり、開発者のところに行って話をしたりするのを忘れがちです。質問やニュアンスをその場で話し合うことができるので、デザインの一部を渡した後、開発者と会うだけで多くの時間を節約できます。これは忘れられがちですが、通常の引き継ぎプロセスの一部にすれば、誰もが節約できる時間を高く評価するでしょう。