開発者向けの設計ワークフローチュートリアル：より優れたUI/UXを時間どおりに提供

公開: 2022-03-11

編集者注： Lubos Volkovは経験豊富なデザイナーであり、彼のキャリアを通じて多くの開発者とリモートで協力してきました。 Toptalの製品デザイナーとして、Lubosはエンジニアリング、コミュニティ、コンテンツなど、さまざまな部門のチームメンバーと毎日やり取りしています。 彼は才能のあるデザイナーであり、そのコミュニケーションスキルが彼の成功に貢献しています。 このチュートリアルでは、Lubosが彼の経験と、デザイナーと開発者のUIおよびUXワークフローを最適化する方法を共有します。これにより、期限までに、または期限前に高品質の製品が提供されます。

優れたデザイナーやデザインチームと協力することは、どのチームにとってもかけがえのない資産になる可能性があります。明確なコミュニケーションチャネルと自由に流れる協力により、設計者は、構築プロセスをスピードアップし、質問や混乱を可能な限り制限するために必要なすべてを提供する必要があります。

UX開発者であるあなたは、ユーザーインターフェイスとユーザーエクスペリエンスの品質を犠牲にすることなく、構築した製品がタイムリーに配信されるようにするために何ができますか？

私の答え：デザイナーを最初から関与させ、UI/UX開発プロセス全体を通してデザイナーを関与させ続けます。開発者と設計者の間で明確なコミュニケーションラインと一貫したメッセージングを確立するようにしてください。

必要なものはすべて揃っていますか？

UIの実装中に発生する可能性のある最悪の事態は、__デザイナーと開発者の間のコミュニケーションの欠如__です（同じ人物でない限り）。一部の設計者は、PSDが送信されると自分の仕事が完了したと考えています。しかし、それは間違っています！ PSDの配信を超えて続く、常時接続の通信ワークフローを作成する必要があります。

設計者が設計ファイルを提出し、開発者がそれらを実装するだけのプロジェクトは、失敗するだけのプロジェクトです。

多くの場合、設計者が実際のUI/UXデザインの実装を確認するまでには時間がかかります。驚いたことに、ビルドは最初の送信とは完全に異なることがよくあります。（これは何度も起こりました。完全な説明とインタラクションのプロトタイプを含むソースファイルを送信しましたが、数か月後、プロジェクトを最終的に見たとき、レイアウト、色が異なり、インタラクションがありませんでした。）

この設計ワークフローでは多くの「余分な」作業が必要になるため、一部の設計者はこれを嫌うかもしれません。ただし、完全な資産と情報を体系的に作成して提供することは、プロジェクトとチーム全体にとってより優れています。

開発者が必要なものをすべて目の前に持っていると、プロセスがスピードアップします。クリーンなPSDだけでは不十分です。

仕事を効果的かつ効率的に行うために何が必要ですか？

これらは、UI/UXデザインを実装するために開発者がデザイナーに期待する必要のある資産です。

リソースファイル-設計者は、アプリのすべての要素を1つのファイルに配置する必要があります。このファイルには、ボタン、チェックボックス、ヘッダースタイル、フォント、色などが含まれている必要があります。基本的に、このファイルの情報に基づいて、開発者は任意のインターフェイスを最初から再作成できる必要があります。開発者は、複数のファイルで要素を検索するよりも、単一のPSDから要素をエクスポートする方がはるかに簡単です。
アセット-ソースファイルにはもう触れないようにするため、開発者が必要なすべてのアセットを取得するようにしてください。
インタラクションのプロトタイプ-「静的スクリーン」の時代はもう過ぎ去りました。スマートインタラクションとアニメーションを使用して、UXデザインのワークフローと実装をスムーズにすることは、現在の一般的な方法です。しかし、開発者に「これは左からスライドインします」とだけ言うことはできません。設計者は、その相互作用の実際のプロトタイプを作成する必要があります。プロトタイプには速度や速度などの情報が含まれている必要があり、設計者はこれらの各値を指定する必要があります。
命名規則-ファイルの命名構造を要求して、整理してください。これにより、両方のファイルを簡単にナビゲートできるようになります。（バックグラウンドフォルダーに物を隠すのが好きな人はいません。）
HDPIリソース-私たちは「困難な時代」に生きており、画面の密度が非常に高くなっています。デザイナーが必要なすべての解像度で画像を配信することを確認してください。そうすれば、アプリケーションはどこでも鮮明に見えます。注：できるだけ多くのベクトルを使用してください。それはあなたに大いに役立つでしょう（svg）。

実装中に他に何か足りないものを見つけた場合でも、恐れることはありません。デザイナーにpingを送信して要求します。決してスキップしないでください、そして決してけちるしないでください！あなたは同じチームのメンバーであり、あなたの仕事は可能な限り最高の製品を提供することです。デザイナーが失敗した場合、あなたも失敗します。

進行中の作業

UI/UX開発プロセス中にデザイナーを活用します。単に「ピクセルを押す」ことを期待して、傍観者にしないでください。設計者は、実装が開始される前であっても、考えられるイノベーションを確認します。これを利用するには、それらをループに入れておきます。進行中の作業を確認およびテストするためのアクセス権を提供します。未完成のプロジェクトを共有するのが好きな人はいないことを私はよく知っています。ただし、ビルドの最後よりも途中で変更を加える方がはるかに簡単です。そうすることで、時間を節約し、不要な作業を防ぐことができます。設計者にプロジェクトをテストする機会を与えたら、問題と解決策のリストをまとめて改善を提案するように設計者に依頼します。

開発者がアプリケーションの外観を変えるアイデアを持っている場合はどうすればよいですか？設計者と話し合い、開発者が設計者に相談せずに設計を変更することを許可しないでください。この設計ワークフローにより、ビルドが順調に進むことが保証されます。優れたデザイナーには、画面上のすべての要素に理由があります。なぜそこにあるのかを理解せずに1つのピースを取り出すと、製品のユーザーエクスペリエンスが損なわれる可能性があります。

UI/UXデザインプロジェクト管理

設計者は、開発者が1日、あるいは1時間で設計を実現できると考えています。しかし、優れた設計と同様に、優れた開発には時間と労力がかかります。気になるデザイナーにビルドの進行状況を見せて、気になるデザイナーを寄せ付けないようにします。外部のプロジェクト管理ソフトウェアを使用して、すべてのリビジョンが確実に考慮されるようにすることは、電子メールの会話やSkypeセッションで議論された重要な情報を見逃さないようにするための優れた方法です。そして正直に言うと、変化や活動は、それが起こるまで伝えられないことがあります。

どのソリューションを使用する場合でも、チーム全体が採用し、一貫して使用するワークフロープロセスを1つ選択してください。 私たちのチームでは、Basecampをプッシュしようとしましたが、それは私が使用していたものでしたが、フロントエンドの開発者は、Basecampの機能が限られていると考えていました。彼らはすでに、JIRA、GitHub、さらにはEvernoteなど、バグや進捗状況などを追跡するために他のプロジェクト管理ソフトウェアを使用していました。プロジェクトの追跡と管理はできるだけシンプルにする必要があることを理解したので、UIデザインワークフローをJIRAに移行しました。彼らが私のワークフローと進捗状況を理解していることを確認したかったのですが、デザインが別の管理対象であると彼らに感じてほしくありませんでした。

プロジェクト管理ツールに関するいくつかの提案を次に示します。

Basecamp-設計および開発に関連するタスクの進行状況を追跡し、タスクを簡単にエクスポートできるようにします。シンプルなモバイルクライアントもあります。
JIRA-さまざまな領域にカスタムボードを簡単にセットアップできる、完全にカスタマイズ可能なプラットフォーム。たとえば、ボードを整理して、バックエンド、フロントエンド、デザインなどのアクティビティを追跡します。モバイルクライアントは少し弱いと思いますが、大規模なチームにとっては優れたソリューションであり、バグ追跡機能が含まれています。
メール-会話の設定や画像の送信に最適です。ただし、フィードバックにメールを使用する場合は注意してください。物事は簡単に失われる可能性があります。

Trelloやその他のプロジェクト管理ソフトウェアを試すこともできますが、私たちの業界で最も広く使用されているのはBasecampとJIRAです。繰り返しになりますが、最も重要なことは、誰もが一貫して使用できるプロジェクト管理システムを見つけることです。

UXの設計と開発が一体になる

デザイナーと開発者は強力な組み合わせです。 UIとUXをできるだけ頻繁に一緒にブレインストーミングしてください。開発者は、設計者がアイデアを思いつくのを喜んで支援する必要がありますが、設計者は、少なくとも使用されているテクノロジの基本的な知識を持っている必要があります。

一緒に設計ワークフローを理解します。デザイナーが作成したものを盲目的に実装しないでください。 2つの異なる視点を活用して、積極的に行動し、美しく見え、優れたユーザーエクスペリエンスを提供するものを作成します。デザイナーは箱の外で考え、クレイジーなアニメーション、アイデア、ピクセル、ボタンを目にしますが、開発者はテクノロジー、スピードバンプ、限界を目にします。

このUIデザインのチュートリアルに従うと、デザインワークフローが明確になります。

私の経験では、すべてのデザイナーはピクセルと興味深いコンセプトに夢中です。しかし、設計者がアイデアを思いついたときに、開発者が押し返し、「実装するとうまく機能しない場合があります。パフォーマンス消費の問題が発生します。」最近、背景がぼやけたモーダルウィンドウを実装しようと考えていましたが、このぼやけにより読み込み時間が長くなりました。この問題を解決するために、開発者は通常のフルカラーオーバーレイを使用することを提案しました。これにより、読み込みが速くなり、画質が維持されます。 デザイナー、注意してください：デザインのユーザーエクスペリエンスを妥協しないでください。

フィードバックループ

設計者からのフィードバックは非常に重要であり、可能な限り頻繁に行う必要があります。それはおそらくあなたがする最も時間（そしてエネルギー）を消費することです。ただし、完璧な結果を出すには、それを採用する必要があります。フィードバックを完璧にする方法に関するUXとUIデザインのワークフローのヒントをいくつか紹介します。

視覚的にする-フィードバックはできるだけ具体的にする必要があります。正確にするための最良の方法は、簡単なスクリーンショットを撮り、修正したい問題を強調表示することです。 現在の実装の写真と、それがどのように見えるかについての写真があれば、さらに良いでしょう。ビジュアルコミュニケーションは質問の50％を排除します。
説明的である-フィードバックは正確である必要があります。「このボタンを上に動かす」とだけ言うことはできません。設計者は、ボタンを移動するピクセル数、使用するパディングなどを指定する必要があります。常に問題の説明とその適切な解決策を含めてください。かなり時間がかかりますが、それだけの価値はあります。
辛抱強く-デザイナーと開発者は同じ焦点を共有していないことに注意してください。開発者が設計者のアイデアを完全に理解していないと、混乱や誤った決定につながる可能性があります。いずれの場合も、双方が忍耐強く、他のチームメンバーを喜んで支援する必要があります。時には大変なこともありますが、すべてのデザイナーや開発者が学ぶべきソフトスキルです。

これらを組み合わせて適切な設計ワークフローにする必要があることは明らかです。しかし、実際にフィードバックを提供するのに役立つツールは何ですか？

電子メール-これがフィードバックを提供するための最も一般的なプラットフォームであると言うことを恐れません。いくつかの簡単なルールに従うのであれば、それを使用することはまったく問題ありません。
- まず、フィードバックに単一のメールスレッドを使用します。個別の微調整をすべて、件名が異なる新しいメールにしないでください。
- 次に、修正のリストを作成します。座って、気付いたすべての微調整や修正について考えてみてください。
- そして最後に、一度に巨大なリストを送信しないでください。それをより小さな個々のリストに分解し、部分的に行ってみてください。
Skype（ハングアウト） -音声はフィードバックのための非常に強力なツールです。すぐに質問したり、質問に答えたりできます。ただし、必ずメモを取り、電話の後にフォローアップメッセージ（電子メール）を送信してください。
コラボレーションツール-正直なところ、私はコラボレーションツールの大ファンではありません。しかし、それらには大きなメリットがあります。フィードバックを適切に保つのに役立ちます。質問をしたり答えたりするのは速く、それは永遠にそこにとどまります。

優れたツールのいくつかを次に示します。

フィードバック注釈：

https://redpen.io/
http://collabshot.com/
http://www.designdrop.io/

コラボレーションツール：

http://www.invisionapp.com/
https://basecamp.com/

結論

設計および開発プロセス全体を通じて通信回線を開いたままにするシステムおよびUI/UX設計ワークフローを確立します。これにより、優れたアイデアを実装し、潜在的な問題を予測し、重要な問題に優先順位を付けることができます。

開発者とデザイナーは、チームとして働く意欲がある限り、一緒に素晴らしいものを作成できます。お互いから学び、このようなチュートリアルを設計してください！