アプリケーションのプロトタイプを作成します：スクリプト、アニメーション、アイコン、My Worldの例の操作性テスト

この記事では、私の世界のモバイルアプリケーションの設計における3か月の経験の例として、作成のすべての段階をどのように経たのか、紙にアイデアを描く理由、フォントとの闘いやその他の困難を克服した方法、UXテストの実施方法などについて説明します友達。



継承



それはすべて、アプリケーションの設計を開発する上で私たちを待ち受けていた最初の難しさは、いわゆるレガシー設計を扱うことであったという事実から始まりました。 前のデザイナーが使用したメタファーを理解し理解するために必要な製品が手元にありました。



プロファイルの例は、それが「前」であり、「後」になったものを示しています。







プロジェクト構造



最初のステップは、プロジェクトの構造図を作成することでした。 準備では、Mindjetプログラムを使用しました。これにより、巨大なマインドマップを作成できます。 すべての説明、スクリプト、ページがありました。 写真は、マインドマップの小さな断片を示しています。







実際、これは、ほとんどすべてのページとユーザースクリプトの説明を含む、ツリー階層を持つ巨大なファイルです。



アプリケーション使用シナリオ



次のステップは、カスタムスクリプトの開発でした。 これについては、通知の例で詳しく説明します。



まず、スクリプトをコンパイルするときに、ユーザーが各アプリケーション画面で達成する目標が特定されます。 通知の場合、目標は、環境内のイベント、つまり、ユーザー自身、彼の友人、同僚などに関連するすべてのものに遅れないようにすることです。 通知を受け取った後、ユーザーは対応するページに移動できます。 通知の種類（ゲームからの通知、友情への招待、コメント、「いいね！」マーク）に応じて、さまざまなシナリオが考えられます。 ユーザーは、ゲームや別のユーザーのプロファイルにアクセスしたり、誰かにメッセージを書き込んだりできます。 これらのオプションはすべて、考えられる交差点に留意して、マインドマップに「登録」する必要があります。







競合他社の経験分析



そのため、シナリオは詳細に記述されており、次の段階である競合他社の経験の分析に進むことができます。 この段階は、アプリケーションのプロトタイプを作成するときに必要です。まず、車輪を再発明することなく、次に可能性のあるエラーを回避することができます。



もちろん、主に直接の競合他社と見なされます。 上位のソーシャルネットワークだけでなく、人気の低いソーシャルネットワークも調査しました。 私たちは膨大なアプリケーション層を研究しました。それらはすべて研究する必要があり、それらの動作を理解し、ユーザーとどのように通信し、情報をどのように提示するかです。



また、間接的な競合他社の経験も分析しました。 たとえば、音楽セクションの場合、これらはiTunesおよびその他の特殊なアプリケーションです。 写真に関しては、Instagram、Mobliなど、絶対にすべてのもので写真を撮りました。 これにより、さまざまなアプリケーションで視聴者がどのように動作するかを理解できました。



ペーパーファースト



A4ペーパーのスタック全体を書き留め、各画面で詳細に作業しました。 なぜ紙の上に？ したがって、問題の解決を始めるのは心理的に簡単です。 どこから「踊る」のかは常に明確です-最初に正方形を描き、他のすべてはすでにそこから構築されています。 これは心理的障壁を克服するのに役立ち、アイデアをシートに「注ぐ」のがはるかに簡単です。







ツール選択



それで、紙の山が描かれます。 次に、アプリケーションのグラフィックレイアウトがどのように作成されるかを理解する必要があります。 Photoshopは、その冗長な機能のためにすぐにマークされました。その機能は、デザイナーがすべての詳細を掘り下げるように誘います。 このような非常に詳細な調査には時間がかかりすぎるため、各部分をほぼ無限に作業することができ、結果を予測することは困難です。



次の候補はInDesignでした。 私はこのプログラムが大好きです。なぜなら、私はかつて雑誌や一般的にあらゆる種類の紙製品を作ったからです。 InDesignよりも急で、おそらくそれを見つけることができません。 しかし、彼の問題の1つがすぐに現れました。ハーフピクセルです。 InDesignは印刷用に研ぎ澄まされており、それほど重要ではありません。 しかし、デジタル環境のために何かを描くために座っているとき、それは大きな問題になります。 紙に焦点を当てることに関連するもう1つの複雑な問題は、ページの識別番号です：新しいページを追加すると、構造が完全にバラバラになり、各ページからどこに行くべきかを理解することができなくなり、最終的にすべてがクラッシュ、怒り、多くの無駄な時間で終わります。



次はAxureでした。 これは設計に理想的なプログラムです。最も強力なプロトタイピングツールがあり、タイミングがあり、人が携帯電話で実行するアクションをエミュレートできます。 ただし、最終的な画像を作成することはできません。まず、これらのすべての画面をどこかに描画し、Axureに入力して、単一のプロトタイプに縮小する必要があります。



その結果、Fireworksが選択されました。 これは、他のアドビ製品（Illustrator、Photoshop）と非常に緊密に統合されたアドビ製品であるため、設計が便利でした。 彼は最終オプションをHTMLにエクスポートします。これは便利です。 さらに、電話から経営陣、同僚などにすべてを直接デモンストレーションできます。



ワイヤーフレーム



もう1つの大きなステップはワイヤフレームです。 通常、彼は「紙」段階に従います-これは一種の思考の固定であると言えます。 この段階では、ボタンの色は関係ありませんが、詳細には触れていませんが、紙の上にあるブロックをすでに構成的に信頼しています。 既に最初のクリック可能なプロトタイプを収集し、同僚と一緒にどのように機能するかを簡単に見ることができます。 これは一種のプロトタイプコンストラクターであり、おかげでプログラムはすでに具体化され始めています。



ダイアログと左側のメニュー用に作成されたワイヤフレームのオプションを検討してください。 ほとんどすぐに、支配者がどこに位置し、他のすべてがどこにあるかを見ることができます。 ブロックをそれぞれの場所に配置した後、グラフィックでこれを完成させるだけです。







クリック可能なレイアウト



Fireworksでは次のようになります。







ターコイズブロックはクリック可能です。 もちろん、これは氷山の一角にすぎません。 相互につながり、絶えず交差しているページは約100ありましたが、現時点では、混乱することはありません。 しかし一般的には、最終版で製品がどのように見えるかをすでに示すことができます。



アニメーション



私たちは次の仕事の層に来ました。 プロトタイピングアニメーションは非常に重要です-これにより、開発者との対話が行われ、a）すべての遷移が論理的に実装され、ユーザーがナビゲートできるようになります。b）あなたと開発者は同じ言語を話し、これらの遷移がどのように実装されるかについて同じ考えを持ちます。

場合によっては、多くの作業を詳細に行うことができます（たとえば、アニメーションとしても開発されたドラッグツーリフレッシュ）。開発者に渡すことができます。 iOSは優れたアニメーションツールを提供し、通常はプログラマーが自分で作成します。



Androidでは、非常に複雑で、各フレームをカットする必要があります。 これからゆっくりと夢中になります。 その後、4つの異なるサイズで行う必要があります。 最終的には、Android向けのアニメーションをどれだけ作成したくないのか、iOS向けに作成したいのかを実感します。



その結果、iOSとAndroid、およびモバイルWebでMy Worldが視覚的なアイデンティティを保持できるようにしています。 一般に、私たちのアプリケーションはすでに最終的な外観に近く、ファサードの装飾が始まります。



単一フォント



このアイデンティティの達成は、単一のフォントに大きく貢献しました。 モバイルWebの実装に問題はないことが知られていました。無料のフォントを選択し、モバイルWebのフォントフェイスを介して接続するだけで十分でした。 IPhoneとAndroidにも「フォントのカスタマイズ」機能があります。 すべてのプラットフォームでさらに同一になることを非常に嬉しく思いました。 しかし、問題はここから始まりました。



開発者は毎日私のところに来て、私は悪党であり、デフォルトのフォントに同意するべきだと言いました。 iOSで選択されたフォント、Open Sansは、異なるフォントを接続するための警告と要件を発行しました：iOSには、文字が正しく配置されていないように見えました（実際には、視覚的には何も変わりませんでした）。 iOSには行間隔の独自のアイデアがあるという事実に関連する問題もありました-それらはただ巨大でした。 ハッキングによってシステムをハッキングし、選択されたフォントを見栄えよくすることができたプログラマーに感謝します。



もちろん、Androidでも問題はありませんでした。 何らかの理由で、彼はナビゲーションバーにシステムフォントが付属していると考えています。 さらに、このフォントがどこでも同じであれば、すべてがそれほど悲しくありません。 しかし、違います！ 各シェルには独自のフォントがあり、開発者が愛情を込めて選択します。 たとえば、SamsungではComic Sansに似たフォントでした。 最後に、フォントとのすべての矛盾が克服され、次の段階に進みます。



プロジェクトの単一グリッド



統一に影響するコンポーネントは、フォントとアニメーションだけではありません。 3番目の「クジラ」は単一のグリッドで、3つのプラットフォーム用にすぐに開発されました。 モジュールとして何を取り入れ、それから他のすべての要素を構築するのか-この質問は、計算に費やした約2日間苦しみました。



最初に、オペレーティングシステムの開発者によって既に定義されている定数を理解する必要がありました（たとえば、iOSでは44ピクセルのサイズのナビゲーションバー）、グリッドを構築するときにこれを考慮する必要がありました。 その結果、4x4ピクセルがマイクロモジュールとして選択されました。 水平リズムは、4ピクセルの溝を持つ6列に基づいています。







アイコンセット



プログラムの最終的な光沢はアイコンを使用して与えられました。 私は長い間アウトラインアイコンを見てきました-私はiconwerkの仕事が本当に好きでした。 My Worldのアイコンを作成するモジュールを作成しました。 iOS 7の最初のベータ版が発表されたとき、「悪くない、トレンドに出た」と思った。 その後、iOS 7ではなく、アプリケーションにすでに実装されている類似点がさらに多くありました。 したがって、私たちはiOS 7アプリケーションの市場に参入した最初の企業の1つです。







ユーザビリティテスト



これで、アイコンに至るまで、すべての準備が整いました。テストの時が来ました。 これで、計算がどのように真になったか、ユーザーの行動をどの程度正確に予測できたか、各アプリケーション画面の機能と使いやすさのバランスを取ることができるかどうかが明らかになります。 開発者にとって、ユーザビリティテストは常に課題です。 テストでは、すべての相互作用シナリオを想定して規定する必要があります：ユーザーがどのように振る舞うか、クリックして取得する場所、ユーザーから何を取得するか（結果が期待どおりかどうかを理解するため）。











さらに、より困難です。アプリケーション全体をテストしました。 スクリーンショットに示されているのは構造の一部にすぎず、さらにテストするためのプロトタイプでは、要素の数が大幅に増加しました。







私がアドバイスできるのは、この段階では、すべての詳細を絶対に最小ピクセルまでなめる必要はありません。 最も重要なことは、ユーザーが正しく設定したルートに従っているかどうかを確認することです。 必要な速度ですべてを満たせば、つまり、情報をすぐに認識し、特定の場所に行くことがどれだけ重要か、どのセクションがどこにあるか、話したい相手を見つける方法、通知があるかなどをすぐに理解します。 など、それは帽子の中のものです。



編集と実験



ほぼインタラクティブに実施したユーザビリティテスト。 私たちは隣の部屋に座って、アプリケーションで作業しているテストを受けている人々を見ました。 回答者が「Find Friends」ボタンに意図したとおりに応答しなかったことに気付いたとします。その後、すぐにFireworksを開き、「Find Friends」をすぐに「Good」に変更しました。 次のテスト参加者に新しいプロトタイプを提供し、彼らがどれほど速く反応するかを観察しました。 理論がうまくいった場合、彼らはそれを残しました。



メタファーチェック



このテスト段階では、ユーザーがアイコンをどの程度正しく認識しているかを理解できます。 一般的に、私は絵文字やアイコンの大ファンではありません。 言葉で書く方がはるかに良いと思います（ちなみに、明らかに、iOS 7で作業するときは、これから始めましたが、基本的にすべてがすべて口頭になりました）。



特に、2つの比phorのユーザーの理解可能性に関心がありました。 最初は円です。 前のスライドを見ると、ナビゲーションバーに3つのボタンがあります。標準バブル（ダイアログ）、プラス（新しいエントリの追加）、そして実際には、将来のロゴのコンセプトから生まれた円です。 かつて概念的なロゴのアイデアを思いついた：惑星の光輪のような円。 その結果、この比phorはアプリケーションに流れ込み、通知を示すために使用され始めました。 最も驚くべきことは、通知が届くとすぐに、すべてのユーザーがこのアイコンの後ろに隠れているものを理解したことです。



私たちが興味を持った2番目のメタファーはダイヤモンドでした。 彼の背後には、写真の自動補正がありました。 結局のところ、ユーザーはこの比phorを認識しませんでした。 ダイヤモンドを残しましたが、ヒントを追加しました。クリックすると、「写真が改善されました」というメッセージが表示されます。



ユーザビリティテストが明らかにした別のポイントは、他の人がコメントした投稿内のアバターの位置です。 最初は、知覚するのが難しいため、2つのアバターを近くに配置する必要がないという考えがあり、コメンテーターをイベントのすぐ下に配置しました。







すべてが紙の上で大丈夫だった。 しかし、ユーザーにそれを見せたとき、彼らはこのバージョンを理解していませんでしたが、2人のアバターが近くにいるときにオプションを選択しました。



石を集める時間



そして、ここにリリース、石を集める時間です。 つまり、App Store、Google Playなどのソースからのレビューです。 「一般的に、設定画面はどこですか？」というコメントが表示されたら、考えてみましょう。 これが1回のレビュー（ユーザーがアプリケーションに "デュース"だけを与えた）の場合、原則として、耳をスキップできます。 しかし、それらのいくつかがある場合、あなたは明らかにどこかで間違えられました。



私たちのアプリケーション全体は、ユーザーに好評でした。 AppStoreとGoogle Playでは、平均4ポイントを獲得しました。 更新直後に受け取ったフィードバックの一部は、ユーザーがページの提供にアクセスできなかった友情提案の通知に関するものでした。 これは修正されました。 もう1つの欠点は、メッセージの削除とクリアに関する問題であることが判明しました。ユーザーはこのメッセージに対して4ポイントを与えました。 最後に、ギアを追加しただけで、ダイアログのこのような設定の隠phorになりました。



このアプリケーションの作業により、アプリケーションの設計と作成における多くの段階の重要性が確認されました。構造研究とユーザーシナリオ、「紙」設計、エラーの分析、競合他社の発見の成功です。 さまざまなプラットフォームでアニメーションとフォントの問題を解決する豊富な経験があり、完成したアプリケーションをテストする際のユーザーの実際の動作に関する多くのデータも収集しました。



コメントで同様のクエストの経験を共有してください！