開発チームに細部の重要性を理解させる
ご存知のように、UXデザインでは、全体像に加えてピクセルレベルの詳細に注意することが重要です。すべてのUI要素が完全に配置されている、正しい色などである、という意味です。
ただし、「これは本当に重要なのか、ユーザーが気付かないのではないか」というコメントがときどきあります。他の開発チームメンバーから。
ピクセル精度と細部の重要性を人々に理解させる最良の方法は何でしょうか？あるいはもっと良いことに、この主題についての良い文献はありますか？
私はキャリアのさまざまな時点で、この1つの両側にいます。この種の競合を適切に回避することは、組織にとって極めて重要です。開発と設計の関係が敵対的なものになると、製品意志吸う、それは時間の問題です。 「あなたの地面に立ちなさい！私の道または高速道路！」特に現時点では、反応の種類はひどく魅力的になりますが、長期的には逆効果になります。
これが単に開発者の怠惰またはスキルの欠如の結果である場合は確かにあります。私たちは皆、それが起こるのを見てきました。同様に、それが傲慢であったり、デザイナー側の知識が不足している場合があります-私は、目が良いがどのように理解していない誰かによってまとめられたWebのレイアウトの受信側にいますHTMLは正常に機能し、（さらに重要なことに）少し調整せずに実装することが不必要に困難でした。
しかし、最良の状況でさえ、双方の善意と才能を前提として、この種の対立は依然として起こります。これを交渉するのは長期的なプロセスです。以下では、目標とする最良のシナリオを説明します。これらのすべてがすべての組織または状況で完全に達成できるわけではありませんが、少なくとも、何を目指すべきか（または、組織がすでに機能不全に陥っており、救済を超えているか...）
仲間を見つけましょう。一部の開発者は、他の開発者よりも使いやすさと製品の外観を重視しています。他の人よりも優れている人もいます。開発チームが十分に大きく、フロントエンドとバックエンドの専門分野に分かれている場合、この整理プロセスはすでに開始されている可能性があります。それ以外の場合は、要素が揃っているか、色が間違っているかを文字どおり確認できないと思われる開発者に注意を向け始め、（製品管理、個別の会話、マキャベリ陰謀、または組織で機能するものを通じて）最小限にしようとします-最小限のダメージを与えることができるタスクに割り当てられたUIに関心のある開発者。
設計プロセスの早い段階で開発者を関与させる。最悪の場合のシナリオは、すべてのコストを避けて、完成した設計を壁を越えて開発チームに送り、次の段階に進むシナリオです。彼らはそれを実装するために孤立して残っている間、タスク。これらのプロセスをより多く統合できるほど、誰にとってもより良いものになります。
これは、「設計作業の一部を開発者に依頼する」ことを意味するわけではありません。しかし、開発チームは、設計の早い段階で、実装が困難であると判明する可能性のある設計の側面を指摘する機会が必要です。ユーザーのワークフローを容易にする技術的な詳細を提供するため。これにより、最終設計をより簡単に、より速く、またはより簡単に実装できるように、初期の開発作業を形作る時間も与えられます。
これの社会的側面についても言及する価値があります。開発者をその最終結果だけでなく、設計プロセスに公開することで、設計者は設計に入る内容と理由をよりよく理解できます。逆に、設計チームが次のことを行うのに役立ちます。
あなたが求めているものの技術的影響を理解してください。いくつかの設計変更は簡単です。コードの大きなチャンクを大幅に書き換える必要があるものもあります。どちらがどちらであるかが常に明確になるとは限りません。多くの場合、何年も前に行われた実装の選択に依存します。たぶん、その美しいデザインの技術的な影響は高すぎるでしょう。おそらく、はるかに低いコストで同じ目的を果たす異なるまたは修正された設計があるかもしれません。これの一部は、チーム間でコミュニケーションの線を開いておくことの問題ですが、一部には、それらのデザインが最終的にどのように構築されるかについて少なくともベースラインを理解することがデザイナーの責任です。 （ありがたいことにますます珍しくなっている）photoshopのみのデザイナーは、ウェブデザインを行う資格がないというだけのことだと私は思っています。これは誰にも利益をもたらしません。
あなたが何を求めているのかを具体的に説明できるようにしてください。自分でデザインしているときでも、これを自分のデザインのリアリティチェックとして常に使用します。紙の言葉で、なぜ私のデザインの特定の側面がそうあるべきである必要があるのかを説明し、そうでない場合はおそらくそうではありません。
「このように見栄えが良い」と言うだけでは不十分です。なぜ見栄えが良いかを説明できる必要があります。
これは非常に重要なキャリアスキルです。もちろん、経営陣や開発者とのコミュニケーションには不可欠です。しかし、それはまた、あなた自身の仕事を批判的に検討し、厳密かつ体系的な方法で、あなたのデザインのどの側面が実際にうまく機能し、どれがとてもきれいであるかを理解することを強いるため、あなたをより良いデザイナーにするでしょう。かなり重要ですが、それだけでは不十分です。
（偶然にも、「ユーザーはそのことに気づかない」ということは赤いニシンです。ユーザーはしばしば気づかない-それが目標です。ユーザーが何かに気づいている場合、それはおそらく問題に気づいていることを意味します。ユーザーは、開発チームがデータベースを適切に正規化したかどうか、またはフレームワークXをフレームワークYに選んだかどうかにも気づきませんが、それはそれらを意味しません同様に、ほとんどのユーザーは、要素が整列していない、またはわずかに間違った青の色合いであることを意識的に意識していないかもしれませんが、それらの十分な量は、全体的なだらしさや磨き不足の印象に寄与します。）
モックアップよりもスタイルガイドを推奨します。モックアップは、定義上、単一のプログラム状態のみをカバーします。考えられるすべての状況でモックアップを作成することは不可能であるため、いつか別の時点で、開発者はあなたが考えていなかったいくつかのケースをカバーする方法を考え出すことになります。プロジェクトのためのしっかりした包括的なスタイルガイドがある場合、彼らはうまくいくものを思い付く可能性がはるかに高いです。ない場合は、設計チームに戻ってモックアップを追加で依頼するか、できる限り一緒にモックアップを作成する必要があります。あなたはそれが通常うまくいくことを知っています。
モックアップに比べてスタイルガイドのもう1つの利点は、開発者がデザインをデザインとして考えることにより深く関与できることです。他の誰かの手紙の計画を達成するという面倒な仕事を楽しんでいる人はほとんどいません。その計画に貢献する力をほんの少しでも持っていると、より魅力的でやる気が高まります。基本ルールの適切なセットがあれば、ほとんどの（確かにすべてではない）開発者はそうすることができます。
そして3つ目の利点は、デザイナーとして正直でいられることです。モックアップを構築するときに、設計の難しい部分をうっかり見落とすのは簡単です。loremipsumは使用可能なスペースに整然と収まり、コンテンツの量は常に適切であり、面倒なEdgeケースのダイアログボックスは必要ありません。個々の画面ではなく、ルールセットとガイドラインにより、製品をきれいな写真のコレクションとしてではなく、システムとして考えることを強いられます。これは常に最終結果に利益をもたらします。
バトルを選択してください。「ピクセルパーフェクトデザイン」は実際には目標ではありません。そのような考え方に陥らないことが非常に重要です。完成した使いやすい魅力的な製品が目標です。これは、デザインの他のすべての側面と同様に、競合する利害の間の許容できる妥協の問題です。これには必然的に開発者の利益が含まれます。
実際、一部のピクセルは他のピクセルよりも重要です。特定の問題に関する戦いに参加する前に、その報酬が戦いに見合う価値があるものになることを確認してください。管理、販売、エンドユーザーと同じように、開発者からの反論や批判を受け入れる準備をし、反対するのではなく、開発者と協力するために最善を尽くしてください。
開発チームからこのような反応を受け取ったら、ユーザーが実際に詳細に気づき始める可能性があると思う時点から、彼らに尋ねることを試みることができます。それは、UIとUXをどのように認識するかについての洞察を与え、これを一緒に議論する別の方法を与えるかもしれません。
UIに気付くか無意識かに気づくかにも違いがあります。たとえば、一部のユーザーは、文字間隔がわずかに異なる2つのテキストの違いを確認できない場合がありますが、おそらくどちらか一方が読みやすくなります。
この問題に対する私の解決策は、基本的に私の開発チームの専門知識のレベルを認識することです。私は本当に開発者を賞賛します、そして私に関する限り、彼らは本当に彼らの分野の魔法使いです。しかし、私は彼らがクエリをどのように構築すべきか、またはどのCSSプリプロセッサを使用すべきかについては意見を持っていません（まあ、おそらくユーザーは気付かないでしょうから）。
開発チームとの健全な関係の基盤は、尊敬と認識です。それを与えることができれば、それを受け取る資格があります。
そして、デザインがピクセル完璧であることを保証するための私のソリューションは、開発者と一緒に修正する必要があるすべての詳細を検討するために、プロジェクトの終わりに向けて開発者に時間を確保することです。したがって、基本的には、それらの隣に座って、すべての問題に一緒に取り組みます（必ずスナックを持参してください。開発者はスナックが大好きです）。
これは間違いなく私にとってはうまくいきます。おそらくこれもあなたのために働くかもしれません。
あなたの戦いを選んでください
- すべてのピクセルが努力に値するわけではありません。コーナーがIE8で四角になっているが、他のすべてのブラウザーでは丸められている場合、IE8をスナッフにするために投資する価値のある開発時間はどれくらいですか？
コストを知る
- 一部の変更（色の一致など）は、ほとんどの場合、実装が迅速です。 「2つの異なるが応答性の高い要素のベースラインを合わせる」など、他の方法は一見難しい場合があります。何でも可能です。予算に費やすのに十分な時間とお金があるかどうかの問題です。
勝利のユーザビリティ
- リクエストには使いやすさの要素がありますか？開発チームがすでにサインオフしているコードをリファクタリングすることは、サイトがすべての人がアクセスできる状態を維持するなどの使命がある場合（そして、会社が訴訟を回避する場合）より高貴なように見えます。
データでリクエストを取り消す
- ユーザビリティテストデータを使用して開発者に戻ると、リクエストの個人化が解除されます。それはあなたがうるさいというだけではありません、ユーザーテストヒートマップは、ユーザージャーニーを完了するための行動を促すフレーズを見つけるのに問題があることを示しています。
関与し続ける
- 明確なデザインとアクセシビリティを組み込むことは、基礎から始めると、より簡単で効果的です。設計の前提とアクセシビリティパラメータを最初から開発者に知らせます。すべて同じ目標に向かっている場合、リファクタリングが少なくなり、設計と開発の間の摩擦が少なくなります。
開発者に、コードを調べて一部のタブをスペースに変更した場合の感想を聞いてください（またはその逆-はい、私はこれまで見てきました 先週のSilicon Valley ）、または数組の中かっこがずれています。
それも、UIのあちこちにあるいくつかのピクセルの位置ずれも機能的な影響はありませんが、どちらもそれぞれのエンドユーザーの目に知覚される品質に影響を与えます。
少し古いですが、エレンアイザックスとアランワレンドウスキーによる Designing From Both Sides Sides of the Screen （2001）のコピーを見つけようとするかもしれません。 、また結婚しています。
それが話しているUI設計方法論は、今日誰にとっても新しいものではありませんが、（セミフィクション）プロジェクトで共同作業している両当事者の観点から書かれています。また、設計者と開発者の間で発生する可能性のある不一致や不一致の優先順位、および（裏表紙にあるように）「理想的な設計が他のエンジニアリング目標と矛盾する」ときに実行できることについても説明します。
@Davidがおそらく最良の答えを持っているので、追加するだけです。 。 。
解決しようとしている問題の根本的な原因は次のいずれかです。
開発における強力なUI開発スキルの欠如（そうです-多くの開発者はリモートでUIに興味さえありませんが、一部のマネージャはUIコードは単なるコードであり、開発者は任意のコードを書くことができると考えています）。
または
開発との関係が成熟していないため、開発者はあなたの判断を信頼できません（逆もまた同様）。
最初のものを修正するには、おそらく開発で不足しているUI開発者の専門知識を採用する必要がありますが、これはあなたの権限を超えていますが、この専門知識を持っていればはるかに優れているので理想的です。
信頼関係を構築するための関係の修正には時間がかかりますが、開発でUX/UIの関係を所有する開発者を1人だけ指名できる場合は、そこから作業できます。教育は依然として私たちのトリックボックスに必要な重要なスキルです。そのため、単一の窓口を持つことは本当に役立ちます（開発チーム全体との戦いの節）。彼らと緊密に連携することで、小さなことでも対処できるようになります。
設計の実行が最初から最後まで行われていないのを見るのが最も残念なことであり、はい、少しの詳細doの問題（私たちの設計は開発者を刺激するための提案ではありません）、結局のところユーザーインターフェイスソフトウェアへの唯一の窓なので、品質が重要であり、デザインと品質はあなただけではなく全員の責任です。
ユーザーが詳細に気づくかどうかは、詳細の影響を受けるユーザーとは異なります。 Amazonは、ページの読み込み時間を100ミリ秒短縮することで、売上を1％増やしました。ユーザーは100ミリ秒の違いを判別できない可能性がありますが、それでも影響を受けます。
A/Bテストを定期的に実行して、インターフェースの細部を最適化する必要があります。開発者は、A/Bテストの結果について知っておく必要があります。A/ Bテストは、細部の価値の正確な画像を提供するためです。