web-dev-qa-db-ja.com

注釈付きのモックアップを共有する

私はUXチームと協力して、モックアップでデザインのアイデアや相互作用を開発に伝達するためのより良い方法を見つけ出そうとしています。

現在、基本的には2つのバージョンのデザインをdevとUX/designの間の共有サイトにアップロードしています。モックアップの1つのバージョンには番号付きの注釈があり、画像の横にある番号付きリストで説明されています。 2番目のバージョンは、注釈を取り除いたものであり、単にグラフィック表示のためのものであり、最終的にはドキュメントで使用される可能性があります。

これは退屈です。番号付きのアノテーションを作成する必要があります。 2つの画像をエクスポートする必要があります。 2つの画像をアップロードする必要があります。注釈を入力する必要があります。

このプロセスを容易にするツールまたは個別のアプローチはありますか?プロトタイプを機能させることは必ずしも選択肢ではなく、フラットな画像だけでは必ずしも十分ではありません。タマネギのスキニングは役立ちますが、それは、実行する必要があるさらなる設計作業です。多くの場合、説明で十分です。

このプロセスを簡単にして、ワークロードを2倍にしない方法を教えてください。ソフトウェアの場合、理想的には、既存のWikiページに埋め込むことができます。


EDIT:さらに検討した結果、必要なのは、埋め込み可能な注釈ソフトウェアのようです。 Bounce のようなものですが、埋め込み可能であるため、注釈を表示するためにリンクにアクセスする必要はありません。

7
Jon

適切なオーディエンスに適切な出力を見つけることが、ここで重要です。答えや解決策が明確に存在しないため、何が機能するかは組織によって異なります。たとえば、Fireworksとillustratorを使用すると、Axureなどのツールと比較して、プロトタイピング段階に到達するのが難しくなります。

最近のプロジェクトでは、成果物をいかにリーンにすることができるかを実験的に試し、忠実度が中程度のプロトタイプ(完璧なピクセルではなく、グラフィックスと色を配置したもの)を使用して、インタラクションとそれが関係者やチームとどのように機能するかを伝えました。付属のPDFに最小限の注釈を付けたPhotoshop最終デザイン(PSD)を作成しました。

この方法により、細部に何時間も費やして注釈を付けることなく、希望する場所に90%到達できました。私たちはリモートの開発者がいて、開発者がスカイプ/オンライン会議ツールを介して毎日私たちと話すのははるかに迅速でした。細かい部分をカバーし、正しくない場合は数分で修正できます。私たちは、開発時にギャップを埋めることもできます。特定のボタンにロールオーバー状態があるべきかどうかなどと答えます。

このプロジェクトは巨大ではなかったのでうまくいきましたが、細かい注釈や大きな複雑なドキュメントを作成するのに時間がかかり、参照されないので意味がないということを学びました。大きなものを提供することはカバーされており、開発者が同じ部屋にいるか別の大陸にいるかに関係なく、オープンで友好的で、小さなものについて話し合うか、すぐに応答できるUXの人々がいます。出力の品質と速度維持することができます。

1
Stewart Dean

これは退屈です

うん。確かです。

そして、悲しいことに、多くの組織で典型的です。

理想的には、解決策は、それほど多くのドキュメントの作成を停止することです。 UXは、SharePoint内の失われた保管庫に送信される大量のPDFを発行するのではなく、物事を改善することに関するものでなければなりません。イライラして、特に大企業のUXチームは何よりもドキュメントチームになる傾向があります。

代わりに、(UX)が必要とする忠実度でワイヤーフレームを作成し、それを通常のやり取りの形でUXと共有します。理想的な世界では、開発者はUXと並行して作業します。あまり理想的ではない世界では、質問に即座に答えるのに役立つ定期的な会議を試すことができます。アジャイルワークフローでの毎日のスタンドアップミーティングに似ています。

これの利点は、必然的に発生するすべての質問にすぐに回答できることです。また、UXの変更を必要とする開発のポップアップが常に存在するため、柔軟性を維持することができます。事前に用意していたドキュメントが少ないほど、これらの問題が発生したときにすべてのドキュメントで行う必要がある更新が少なくなります。

やがて、再利用されているワイヤーフレームの多くの部分があることに気付くでしょう。この時点で、パターンライブラリの構築を開始します。時間の経過とともに、パターンライブラリには特定のワイヤーフレーム上の個々のUI要素の大部分が含まれるようになります。これは中央の場所にあり、完全に再利用できるため、ドキュメントで詳細を確認できます。

4
DA01

Axureは、プロトタイプに付属する個別の仕様書を生成できます。さらに、Axureでは注釈の順序の変更は自動的に行われます。アノテーション5が現在7番である場合、Axureは他のアノテーションを適切に自動的に再番号付けします。さらに、生成されたプロトタイプを介してインラインで注釈にアクセスできます。

2
erik_lev