コンテンツ
- 戦術的なプロトタイピング
- スケッチ
- モバイルテンプレート
- スケッチと冷酷な編集
- 小さな画面でデータを視覚化
- ペーパープロトタイピング
- ペーパープロトタイピングの基本
- ペーパープロトタイピングとタッチスクリーン
- インタラクティブなオンデバイスプロトタイピング
- 画面内モバイルプロトタイプ
- モバイルブラウザのプロトタイプ
- プレゼンテーションソフトウェアを使用したモバイルプロトタイプ
- プラットフォーム固有のプロトタイプ
- 一般的なオンデバイスプロトタイピングツールの長所と短所
- 画面内のプロトタイプの基本
これは、の第6章からの編集された抜粋です。 モバイルフロンティア：モバイルエクスペリエンスを設計するためのガイド、 ローゼンフェルドメディアが発行。
特定のプロトタイプの「理由」に関係なく、モバイルUXプロジェクトに適切なプロトタイピング方法を選択することは、優れた本を選択することによく似ています。選択できるオプションは無数にありますが、どのようにして適切なものを選択しますか？ 「私はどのタイプの本を求めているのか」と自問するのと同様に、適切なプロトタイピング方法を特定するための最初のステップは、「どのタイプのデザイン調査に着手しようとしているのか」を尋ねることです。適切なものを選択するのとは異なります。数え切れないほどの本のジャンルから資料を読むと、モバイルプロトタイピング方法は2つの基本的なジャンルに分類される傾向があります：「戦術的」（以下の抜粋で見る）と「経験的」プロトタイピング。
モバイルプロトタイピングを戦術と体験の2つのジャンルに分類しましたが、「ストリームを横断する」ことを妨げるものは何もありません。たとえば、ストーリーボードなどの経験的なプロトタイピング方法を、より戦術的なタイプのプロジェクトで使用することはまったく問題ありません。その逆も同様です。ただし、実行しているプロジェクトの性質を特定することは、モバイルUXの意思決定プロセスの最初のポイントです。これは、プロジェクトに最適な設計プロトタイピング方法を特定するのに役立ち、モバイルメディアの設計に着手するときに最も価値があることが証明される可能性があります。
戦術的なプロトタイピング
私が繰り返し向きを変え、最も価値があることが証明されている3つの戦術的なプロトタイピング方法は次のとおりです。
- スケッチ
- ペーパープロトタイピング
- インタラクティブなオンデバイスプロトタイピング
スケッチ
紙の上でペンを動かすよりも直接的で効率的なことはほとんどありません。それが、スケッチをそのような強力な設計スキルとプロトタイピング方法にしている理由です。ホワイトボード、レシピカード、カスタムプラットフォームのUIステンシルやスケッチパッドのいずれを使用する場合でも、スケッチは直接、生成的、安価で、プロトタイピングの私のお気に入りの形式です。
低レベルのコミットメントでアイデアを探求することができます。その生成特性のため、スケッチはあらゆる設計プロジェクトの分岐段階での完璧な活動です。スケッチを使って画面の流れやレイアウトの大まかなアイデアを練っていますが、それは画面ベースの体験を伝えるのに最も適したアクティビティだと思います。
モバイルテンプレート
描くことができませんか？問題ない。ほとんどのモバイルソフトウェアプラットフォームには、オンラインで購入できるステンシルがあります。これらのステンシルは、スケッチ能力について自覚している場合、命の恩人です。比較的低額の投資で、モバイルのアイデアをすばやく紙に書くことに関心のある人には便利です。
スケッチと冷酷な編集
アイデアを早期に、そして頻繁にスケッチすることは、「彼らの力を語る」直感的なインターフェースを作成するための重要なステップです。どんな媒体でも、直感的なインターフェースは長い間、優れたユーザーエクスペリエンスの特徴でした。ただし、モバイルデザインに固有の認知的制約により、直感的なインターフェイスを作成することがさらに重要になります。優れたモバイルインターフェースは、電灯のスイッチやショッピングカートのようなものです。彼らは彼らの力を話します。
自分の力を話すUIには、探索を促すアフォーダンスがあります。彼らのデザインそのものがユーザーに相互作用の手がかりを提供します。 PCエクスペリエンス用に設計されたWebページと、モバイルデバイス用に調整された同様のエクスペリエンスの違いを比較します。 PCエクスペリエンスの大画面領域により、期待に注釈を付けるためのより多くのスペースが可能になります。モバイルでは、オプションをすぐに明らかにする必要があります。設計要素は、それらとの関わり方をユーザーに即座に伝える必要があります。
自分の力を話すインターフェースを作成するには、モバイルを初めて使用するデザイナーは、冷酷な編集スキルを身に付ける必要があります。冷酷な編集とは、無関係なテキスト、視覚的な処理、間抜けなトランジションを取り除くことです。それは、画面デザイン、インタラクション、トランジション、フロー、視覚的処理、触覚、サウンドなど、すべてのデザイン要素を組み合わせて、情報をすばやく直感的にガイドすることです。生い茂った木を象の形に剪定するトピアリーアーティストのように、冷酷な編集とは、混沌を抑え、ビジョンを形にするために必要なカットを行うことができるようにすることです。冷酷な編集とは、適切な決定を下すことです。それはノーと言うことを学ぶことについてです。
小さな画面でデータを視覚化
小さなモバイル画面でデータを効率的に視覚化する方法を学ぶことは、習得するための重要なモバイルスキルです。設計プロセスの早い段階でインデックスカードにスケッチすることは、現実的なサイズの制約を同時に与えながら、さまざまなアイデアを試すことを可能にする実践です。
ペーパープロトタイピング
ペーパープロトタイプは、基本的に画面ベースの製品またはサービスのペーパーモデルです。スケッチと同様に、ペーパープロトタイピングには、設計に生成的かつ反復的に取り組む手段を提供しながら、適度な時間と少額の投資が必要です。ペーパープロトタイピングは、画面のフローと順序付けの詳細を処理するだけでなく、画面のレイアウト、ボタンの配置、タッチとジェスチャの大まかなアイデアに関する決定を検証するための優れた手法です。
ペーパープロトタイプについて私が最も気に入っているのは、ユーザーとのやり取りのアイデアをテストし、設計プロセスの早い段階でフィードバックを収集する具体的な方法であるということです。モバイルを初めて使用する設計者にとって、ペーパープロトタイピングは、テスト実行の設計上の前提を早期かつ頻繁に実行し、プロジェクトの終わりが死の行進のように感じられないようにするための理想的な方法です。ペーパープロトタイプは、単一の概念をすばやく反復する機会、または複数の設計方向を同時に処理する機能を提供できます。
ペーパープロトタイピングの基本
ペーパープロトタイプは、設計プロセスの早い段階で設計アイデアを処理するための優れた方法です。以下に概説する手順は、ペーパープロトタイプを簡単に作成するのに役立ちます。
1.主要な相互作用を決定します。 完全なモバイルアプリケーションまたはWebサイトのペーパープロトタイプを作成する必要がない可能性があります。代わりに、キーの相互作用のプロトタイプを作成することをお勧めします。ペーパープロトタイピングプロセスの最初のステップは、プロトタイプを作成する主要な相互作用と、プロトタイプに回答する中心的な質問を特定することです。
2.画面レイアウトをスケッチします。 次に、ユーザーに情報を最もよく伝える画面レイアウトのタイプを決定します。インデックスカード、特殊な紙のテンプレート、またはコンピューターで作成された忠実度の高いコンプのいずれを使用する場合でも、このステップでは、情報を伝達し、必要な情報に到達するために一連の画面を直感的に操作する方法を決定します。
3.画面の流れ/順序を決定します。 個々の画面レイアウトとそれらの画面のフローをマップします。これは、ユーザーが作成中のシステムをナビゲートするときに、何がどこに行き、何が表示されるかを特定するプロセスです。このプロセスは、一次および二次ナビゲーション要素を特定し、主要な相互作用の基礎となるシステムを最も効率的にマッピングする方法を特定するのに役立ちます。
4.インタラクティブな要素を準備します。 ペーパープロトタイプを使用すると、ある程度の双方向性を偽造できます。プロトタイプには、テキスト入力、キーボード、アラート、ハイライト、ピッカーなどの要素を自由に含めて作成してください。これにより、ユーザーエクスペリエンスをより正確に把握できます。
5.プロトタイプをテスト実行に持ち込みます。 すべての要素を作成したら、プロトタイプを持って同僚や友人とテストを実行します。何が機能していて、何をさらに改良または変更する必要があるかを特定します。
ペーパープロトタイピングとタッチスクリーン
最近、現代のスマートフォンは、タッチスクリーンやジェスチャーベースのインタラクションを優先して、4方向キーやダイヤルパッドなどの物理的なボタンによって引き起こされるインタラクションから離れています。これはおそらくすぐには変わらない傾向です。 GUIから、マウスベースのインタラクションからタッチスクリーン/ジェスチャベースのインタラクションに移行すると、モバイルを初めて使用する設計者にとって、予期しない重大な課題が発生する可能性があります。ペーパープロトタイピングは、NUIパラダイムとGUIパラダイムの主な違いを解決するための優れた方法です。
インタラクティブなオンデバイスプロトタイピング
今日まで、モバイル設計作業の初期のデバイス上のプロトタイプを見ると、まだ少し目がくらんでいます。画面レイアウト、インタラクションフロー、ジェスチャーなど、すべての要素が一緒になっているのを見ると、何かがあります。それは…まあ、エキサイティングで少し魔法のようなものです。その魔法の一部は、本格的なモバイルプログラミングのスキルがない限り、実際にデバイス上でデザインを機能させ、それを体験することは歴史的に困難であったという事実から来ています。デバイス上のプロトタイプを立ち上げて実行することにはハードルがありますが、大きなメリットがあります。デバイス上での作業を見るという完全に素晴らしい感覚は別として、デバイス上のプロトタイプを使用すると、あなたや他の人があなたの設計上の決定を批判的に評価することができます。モバイルUXが普及するにつれて、モバイルデバイスで初期の設計作業を表示するのが簡単になる可能性があります。それまでは、デバイス上で試す方法をいくつか紹介します。
- 画面内モバイルプロトタイプ
- モバイルブラウザのプロトタイプ
- プレゼンテーションソフトウェアを使用したモバイルプロトタイプ
- プラットフォーム固有のプロトタイプ
画面内モバイルプロトタイプ
画面内プロトタイプは基本的に、デバイスのカメラで画面の写真を撮ることによってモバイルデバイスに移植される紙のプロトタイプです。画面内のモバイルプロトタイプを作成するには、忠実度の低いスケッチを作成し、それらをモバイルデバイスにインポートして、モバイルデバイスのカメラのスライドショーなどのアプリケーションで表示する必要があります。
モバイルブラウザのプロトタイプ
ブラウザのプロトタイプは、HTMLやJavaScriptなどの他のブラウザベースのプログラミングを使用しているモバイルデバイスのブラウザを使用してレンダリングされたプロトタイプです。画面はHTMLを使用して作成できます。これは、特にモバイルWebサイトを構築していて、HTMLに習熟している場合に、優れたオプションとなる可能性があります。ただし、広範なマークアップにあまり詳しくない場合は、画面レイアウトの一連のリンクされた画像マップを簡単にアップロードして、携帯電話のブラウザで表示できます。
プレゼンテーションソフトウェアを使用したモバイルプロトタイプ
AppleKeynoteやMicrosoftPowerPointなどのプレゼンテーションソフトウェアを使用してプロトタイプを作成することは、モバイルデバイスでインタラクティブ機能とトランジションのプロトタイプを作成するための効率的な方法です。プラットフォームコンポーネントをWebから簡単にダウンロードし、プレゼンテーションソフトウェアを使用してプロトタイプを作成し、ソフトウェアに含まれるインタラクションとトランジションを微調整し、ファイルをモバイルデバイスにダウンロードできます。
デザイナーはさまざまな種類のツールを使用してワイヤーフレームのアイデアを文書化しますが、プレゼンテーションソフトウェアはモバイルUXの分野で人気のあるツールとして浮上しています。画面上のデザイン要素の配置を指定することに加えて、プレゼンテーションソフトウェアを使用すると、デザイナーは自分の作業を忠実度の低いデバイス上のプロトタイプに変えることができます。プレゼンテーションソフトウェアは、フラットで静的なドキュメントの代わりに、トランジションとインタラクティブ機能を試す機能を設計者に提供します。
Keynotopiaは、Keynoteプロトタイプ作成者にとって素晴らしいリソースです。このサイトの作成者であるAmirKhellaは、標準のコントロールとウィジェットの包括的なコレクションを備えた、本当に便利なテンプレートのコレクションをまとめました。これらの視覚要素を所定の位置にドラッグするだけで、モバイルデバイスで実行されるモックアップを作成できます。 Travis Isaacsは、Keynoteなどのプレゼンテーションソフトウェアを使用してプロトタイプを作成するための優れたオンラインリソースも作成しました。彼のWebサイトKeynoteKungfuには、デバイス上のプロトタイプを作成するための優れたリソースが含まれています。
プラットフォーム固有のプロトタイプ
あなたが自分の袖をまくり上げてコードに入るのが好きなタイプのデザイナーなら、SDK（ソフトウェア開発キット）に投資し、ターゲットプラットフォームのプログラミング言語を使用してプロトタイプを作成するのが良い方法かもしれません。このアプローチにより、ネイティブコードを使用してプロトタイプを作成でき、労働集約的でありながら、プロトタイピング方法の中で最もインタラクティブ性が高くなります。
一般的なオンデバイスプロトタイピングツールの長所と短所
インタラクティブなプロトタイプをデバイス上で起動して実行することは簡単な作業ではありませんが、それは可能です。以下の表は、一般的なモバイルプロトタイピングツールの長所と短所を理解するのに役立つだけでなく、プロジェクトのリソースを考慮してどのタイプのプロトタイプが最適かを判断するのにも役立ちます。
画面内のプロトタイプの基本
私はコーダーではなくスケッチャーなので、画面内プロトタイピングは私のお気に入りのオンデバイスプロトタイピング方法です。詳細なインタラクティブ機能や画面間の遷移を表現するのには適していませんが、デバイスで作業をすばやく行うための簡単な方法です。 UXMagazineが発行したDiegoPulidoの記事で概説されている基本事項は次のとおりです。
1.画面レイアウトをスケッチします。
2.スケッチをスキャンまたは写真撮影します。
3.ファイルに必要なサイズ調整を行います。
4.サイズ変更された画像をモバイルデバイスでサポートされているファイル形式で保存します。すべての画面イメージをシナリオの正しい順序に整理します。それに応じて、画面とラベルファイルの順序に注意してください。
5.ファイルをモバイルデバイスのフォトギャラリーにインポートします。
6.クリックしてスワイプします。
これは、の第6章からの編集された抜粋です。 モバイルフロンティア：モバイルエクスペリエンスを設計するためのガイド、 ローゼンフェルドメディアが発行。 ローゼンフェルドメディアから購入したすべての製品の20％オフに有効な割引コードNETMAG12を使用してください
