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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ストレージの制約

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

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

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

画面とコントロール

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

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

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

環境

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

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

小さな画面サイズ、シングルウィンドウ

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

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

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

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

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

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

Steven Hooberの調査によると、Design for Fingers、Touch、People、Part 2で概説されているように、人々はデバイスの持ち方によってデバイスの操作方法が異なり、その後モバイルUXデザインに影響を与えることがわかりました。

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

Stevenの調査による追加のモバイルUXのヒントは次のとおりです。

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

開発者との協力

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

モックアップ

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

機能仕様

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

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

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

コピー

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

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

仕様

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

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

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

それをすべて一緒に結ぶ

モバイルはなくなることはありません。 2016年には、モバイルデバイスでWebにアクセスするユーザーの数が、初めてデスクトップの使用を上回りました。 UXデザイナーにとって、モバイルの採用の増加とさまざまなデバイスタイプの急増により、ユーザーエクスペリエンスの設計ははるかに困難になります。

これらの理由から、一連のベストプラクティスを順守し、モバイルがもたらす制約を理解し、開発者との円滑な協力関係を提供することが、ポジティブな人間体験を生み出す設計を実現するための重要な要素になります。

•••

Toptal Designブログでさらに読む：

• デザインの原則とその重要性
• 最高のUXデザイナーポートフォリオ–刺激的なケーススタディと例
• ゲシュタルトのデザイン原理を探る
• Adobe XDとSketch–どのUXツールがあなたに適していますか？
• トップデザイナーが使用する10のUX成果物