洗練されたプロトタイプ–なぜAxureを使用するのか

「デザインは、見た目や雰囲気だけではありません。 デザインはそれがどのように機能するかです。」 - スティーブ・ジョブズ

プロトタイプは、より良い設計上の決定を行うために非常に貴重であることが証明されています。 アーティファクトとして、プロトタイプはUXデザインとプロトタイピングのコア成果物の1つであり、アクティビティとして、ユーザー中心のデザインプロセスの中心にあります。 プロトタイプは、以前のすべてのUXデザイン作業を統合して、仮説を検証し、デザインをテストするために使用される、単一の視覚的に機能する製品に統合したものです。

簡単そうに聞こえますが、豊富な設計ツールで飽和状態にある世界では、適切なプロトタイピングツールを選択することは、慎重に検討する必要のある小さな作業ではありません。 設計者は、コスト、機能、他の設計ツールとの統合、学習曲線、コラボレーション機能、およびレビューとユーザーテストのための再生プラットフォームを考慮する必要があります。

さらに複雑なことに、最近多くの新参者が登場しました。 Figma、InVision、UXPin、Framer、Marvel、Principle、Origamiなどのオンライン専用ツールがあり、一部は、機能の拡張としてプロトタイピングが組み込まれたSketchやAdobeXDなどの従来のデスクトップソフトウェアです。 それらはすべて、長所と短所、機能、および統合を持っています。

しかし、新しいものが常に良いとは限りません。 戦場にはまだ古い軍馬がいます。Axureはその1つです。 設計者が機能豊富で詳細なプロトタイプを提供したい場合、Axureは別の外観に値します。 Axureは、上記の新しく作成されたツールが誕生する何年も前から存在しており、多くの設計者は、Axureを深い機能を備えたワイヤーフレーミングおよびプロトタイピングツールの祖父と見なしています。

なぜAxureを使用するのですか？

現在、ほとんどの場合、設計者はホットスポットベースのプロトタイピングツールを使用して画面をリンクし、場合によってはいくつかの画面遷移を追加します。 問題は、この方法には、テスト中の全体的なユーザーエクスペリエンスを完成させる小さなインタラクションが含まれていないことです。 対照的に、Axureは、プロトタイプに命を吹き込む微妙な詳細とマイクロインタラクションを簡単に処理できます。

人々が特定のデザインとどのように相互作用するかをより深く探求するために、設計者は、条件ロジック、さまざまなユーザー入力、およびプロトタイプをよりリアルに見せるための動的アニメーションを使用してプロトタイプを作成できます。 これは、何が機能し、何が機能しないかについての貴重な洞察を得るための優れた方法です。

あまりにも多くの統合されていない設計アプリケーションを飛び回らなければならないことも、非効率的な問題を提示します。 典型的なデザインワークフローには、デザイナーがSketchでUIを作成し、InVisionやMarvelなどの別のツールでプロトタイピングすることが含まれます。 その後、Zeplinなどのさらに別のツールを使用して設計が開発者に渡されます。

Axureは完全に統合されたアプリケーションであり、さまざまな設計ツールを使用する必要がありません。 たとえば、ユーザーフロー、カスタマージャーニーマップ、ペルソナ、ストーリーボード、サイトマップ、情報アーキテクチャ、ワイヤーフレームを作成した後、設計者はAxure内で複雑なプロトタイプを簡単に続行できます。 設計者がプロジェクトを開発者に渡すと、何かを実装する方法をよりよく理解でき、製品マネージャーとより効果的に連携して範囲を推定し、技術的な実現可能性を評価できます。

適切に設計された製品やサービスを提供する上での最大の障害は、ユーザーについての理解が不足していることです。 Jared Spool、UIE（ユーザーインターフェイスエンジニアリング）

他の設計ツールと同様に、Axureはすばやく手に取って、すばやく使用することができます。 プログラマーでなくても理解できる動的な相互作用を構築するための組み込みウィジェットは、印象的な相互作用のためにすぐに使用できます。 深く掘り下げてアプリケーションを学ぶために時間を費やしたいデザイナーは、複雑で現実的なWebサイトやアプリを複雑な相互作用で構築できます。

実際のAxureプロトタイピングの例

設計者は常に時間が不足しており、特定のユーザーフローがレビューでどのように機能するかを示し、ユーザーと一緒に製品設計を早期にテストする必要があります。 設計者は他の設計ツールからの画像をインタラクティブなプロトタイプにすばやく変換できるため、Axureの基本機能はこれらのシナリオで際立つ可能性があります。

以下のB2B製品の例では、一連の画面がOmniGraffleからPNGとしてエクスポートされています。 画像はトリミングされ、マスクされ、Axureのレイヤーに配置されました。 次に、ドロップダウンメニューやフォームフィールドなどのホットスポットとインタラクティブコンポーネントがAxureウィジェットライブラリから追加され、リッチで機能的なプロトタイプが作成されました。 次に、製品の機能をリモートのモデレートされたユーザーテストを使用してテストしました。これにより、ユーザーのフィードバックに基づいて設計を迅速に繰り返すことができました。

別の例では、設計チームとエンジニアリングチームは、複雑なB2B製品用に2つの特にトリッキーなウィジェットを設計するための最良の方法を見つけることができました。 目的は、使いやすさを向上させ、技術的にも実現可能な、データ量の多いテーブル用の高度なフィルターとカスタム列セレクターを設計することでした。

このシナリオでは、さまざまな状態の画像がSketchからエクスポートされ、Axureでクイックインタラクションが追加およびアニメーション化されました。 インタラクションとその効果を示すために、ボタンやチェックボックスなどのUIコンポーネントが追加されました。 チームは、レビューおよびテストされたいくつかの反復を経ました。 他のプロトタイピングツールでは、この作業にはるかに時間がかかった可能性があります。

Axureの機能と利点

私は最近、InVisionで作成された基本的な画面間プロトタイプのみを使用し、ユーザーテストをあまり行ったことがない会社で働いていました。 今後の主要な製品機能をテストするために、詳細な製品プロトタイプを作成する必要がありました。 この新機能には多くのことが乗っており、利害関係者はそれを正しくしたいと考えていました。

さまざまなシナリオで製品がどのように動作するかを示す、さまざまな状態と多くのマイクロインタラクションを備えた詳細なプロトタイプをAxureで作成するのに、2日弱かかりました。 予期しない利点として、設計チームが対処できた多くのエッジケースが表面化しました。

テストすると、ユーザーが設計に苦労した場所とその理由を確認できました。これは、静的スクリーンで構築された詳細度の低いプロトタイプでは不可能でした。 その結果、発見した問題に迅速に対応することができました。

また、プロトタイプを開発者に渡して、レスポンシブデザインのブレークポイントがどこにあるか、フォーカスまたはエラー状態がどのように見えるか、予測検索がどのように機能するかを示しました。

フロントエンドの開発者がプロ​​トタイプを手に入れることができたとき、それは彼らの生活もはるかに楽にしました。 バックエンド開発者でさえ、最終製品がどのように機能するかを確認できたため、プロトタイプを高く評価しました。

この種のラピッドプロトタイピング、テスト、および新製品機能の実装は、以前に行った他のどの機能開発よりもはるかに高速であり、QAフェーズで表面化した問題は少なくなりました。

すべてが語られて行われると、チームの全員が詳細なプロトタイプがどれほど役立つかを述べ、この種のプロトタイピングプロセスをより頻繁に行うように依頼しました。 詳細なプロトタイプの作成、レビュー、およびテストは、大きな違いを生む可能性があるということです。 チーム全体が、ユーザーにとって意味のある本質的で包括的な相互作用を見ることができました。

Axureを使用すると、最も複雑なユースケースも含め、すべてをテストできます。 私たちのプロトタイプは、本物のように見え、動作します。 ジュリー、ユーザーエクスペリエンスラボ

Axureの特徴と強み

設計者は、Axureで複雑で動的な機能豊富なプロトタイプを作成するためのコーディング方法を知る必要はありません。 洗練された複雑なインタラクションは、インタラクションパネルを使用して、簡単な「if this、thenthat」ステートメントで設定できます。 以下は、いくつかの追加のAxure機能のリストです。

基本および高度なプロトタイピング

• 高速ワイヤーフレーミングとプロトタイピングのための組み込みウィジェット
• ドラッグアンドドロップ環境
• コーディングせずにブラウザベースのプロトタイプを構築する
• Sketchアセットからのインタラクションの構築
• モバイルエミュレーションとモバイルデバイスの表示
• ユーザー入力を可能にする作業フォームフィールド
• 条件付きロジック、変数、および式の追加
• 動的コンテンツとアダプティブビューの操作
• アニメーション効果の追加
• オフラインプロトタイプ表示
• カスタムウィジェットライブラリ
• AdobeXDの統合とプラグイン
• ブラウザで表示できるAxureCloudでのプロトタイプの共有

共著とコラボレーション

• AxureRPとAxureCloudを使用すると、複数の人が同時に同じプロジェクトで作業できます。

共有資産

• インタラクティブコンポーネントのライブラリを作成して共有し、Sketchからアセットをインポートします。

開発者ハンドオフ

• RPとSketchからAxureCloudにデザインを公開して、自動レッドラインとCSSおよび画像のエクスポートを行います。

ドキュメントと仕様

• プロセスフロー、製品の分解、および視覚的な仕様を作成します。

Axureプロトタイピングミニケーススタディ

単純な画面間プロトタイプを超えるAxureの機能を紹介するために、既存のeコマースサイトであるZalandoの微妙な相互作用を備えた画面をいくつか作成しました。 完了すると、これらのプロトタイプシーケンスはすべてHTMLにエクスポートされ、AxureCloudを使用してどこでも誰でもブラウザで確認できます。

最初に、メガメニュー、検索、製品の水平スクロール、お気に入りの投稿、ニュースレターへの登録を示すいくつかのサイトインタラクションを作成しました。

商品リストページで、メインの商品画像の下にあるサムネイルにホバー効果を作成して、商品をさまざまな色で表示しました（ホバーで画像を入れ替えます）。 また、商品を再び優先することと、価格帯を設定して商品リストページをフィルタリングするためのドロップダウンウィジェットを追加しました。

次に、上の画面と同じように、商品の詳細ページのサムネイル画像にカーソルを合わせたときに、さまざまな商品の画像を入れ替える方法を示したいと思いました。 また、買い物客が商品の説明、サイズとフィット感、配送、レビューに関する情報を確認できるように、別のホバー機能を追加しました。 最後に、サイズセレクターを組み込んで、ショッピングカートに商品を追加しました。

次のユーザーフローを説明するために、微妙なスライド、フェード、要素交換アニメーションを使用して、ショッピングカートの管理がどのように機能するか（たとえば、カートから商品を削除する）を示したいと思いました。 これらの微妙なマイクロインタラクションを作成するためにコードは使用されませんでした。

最後になりましたが、ユーザーが間違ったログイン情報を入力したときに、ログイン画面に微妙なUI変換を表示し、どのようなエラーメッセージが表示されるかを示したかったのです。

これらの微妙な相互作用とUI変換は、製品の機能をテストするときに役立ちます。デザイナーとユーザーリサーチャーは、より詳細なユーザーテストを実施し、eコマースサイトに対する人々の反応についてより深い洞察を得ることができるからです。 それらは、他のプロトタイピングツールでは作成できない、または作成が非常に難しいことが判明する可能性のある、特定の洗練されたルックアンドフィールを示しています。

概要

最新かつ最高のワイヤーフレーミングおよびプロトタイピングツールを求めて、設計者は時の試練に耐えてきた確立された有能なツールを見落とすことがあります。

デザイナーはAxureに別の外観を与える必要があります。 Axureは、その深さ、機能セット、および柔軟性により、他のソリューションと比較して有能で堅牢なツールであり、設計ツールとしての関連性を維持するために更新を続けています。

Axureの無料試用版をダウンロードできます。 設計者は、SketchからUIをエクスポートし、Axureにインポートして、リアルな外観のプロトタイプを作成できます。 また、あらゆるタイプのプロジェクト（YouTubeおよびAxureのサイト）で利用できるチュートリアルがたくさんあり、すぐに使用できるAxureウィジェットも広くダウンロードできます（無料および有料）。

•••

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

• UXデザインプロセスを完璧にする–プロトタイプデザインのガイド
• トップデザイナーが使用する10のUX成果物
• UXの神話–プロトタイピング、ユーザーテスト、およびUXの成果物
• フレーマーチュートリアル：見事なインタラクティブプロトタイプを作成する方法
• これらのトップUXツールであなたの技術をマスターする