【翻訳】Facebookのデザイン

Design at Facebook

Original：Design at Facebook（）by Luke Wroblewski

パロ・アルト本社にて、Facebookデザインチームの理念や2.5億人にも及ぶユーザーに対してのデザインアプローチを確認し合った。彼らはコードを書くことの重要性、デザインを早い段階でこまめに共有すること、最初から最後までプロジェクトに関わること、そして自らの仕事に固執しないことを力説した。デザイナーがコードを書くのに十分にテクニカルであると確認した。

  • Facebookデザインチームはプロダクトデザイン、マーケティング、UIパターン、ブランディングやフロントエンドのコーディングに取り組んでいる。チームは、15人のプロダクトデザイナー、5人のUIエンジニア、5人のUXリサーチャー、4人のコミュニケーションデザイナーと、1人のコンテンツストラテジストからなる。1000人の従業員あたり25人のデザイナーがいる。
  • フロントエンドコーディングはエンジニア文化にデザインを結びつける。
  • 2.5億人のユーザーのためにどのようにチームはデザインをしているのか？4つの仮説：最初から最後まで携わること、早くまめに共有すること、泥臭いこともやる、愛着を持たない。

1) デザイナーは戦略からローンチの瞬間までそこにいる必要がある。これは他の企業とは異なる。

  • Facebookはデザイナーが最初から最後まで立ち会うのを確認することに多くの時間を費やす。
  • 例：3月に公開されたホームページのリデザイン。単純化し、情報をあちこち探さなくてもいいように合理化する必要があった。これはデータ構造とビジュアル構造を含んだ問題だ。
  • ビジョンが決定された後、スケッチを作るためにコードを書き始めた。コードでデザインすることで実際のデータがレイアウトの中でどのように動くのか簡単に理解できる。
  • 安定したトレードオフ - ホームページのデザインについて、インタラクションやビジュアルの詳細まで繰り返し調査をした。
  • 会議に様々なチームを席につかせるために：デザインを伝えるためにモックアップを用意した。大抵の場合、静的なデザインはお勧めしない。
  • コードを書けるデザイナーを持つことは理解と実装を早めることができる。

2) こまめに共有する。チームでユーザーヘルプを共有すればデザインがより良くなる。

  • Facebookにクリエィティブディレクターはいない、その代わりにボトムアッププロセスの採用で調整をしている。つまり、自分たちが何をしているのか共有することはチームにとって重要な意味を持つ。
  • 自社開発されたツールを共有することはもっと効果的だ。Pixelcloudと呼ばれるツールはオンライン上のコメント付きギャラリーだ。3月のリリース以来、1日毎に15の画像が追加されている。
  • ワーキンググループはビジュアルデザインをカバーし、フロントエンドコーディングはFacebookのデザインの一貫性を維持するのに役立つ。すべてのワーキンググループは残りのデザイナーにフィードバックを知らせる時間を与えられている。
  • 例：プライバシーウィザードのデザイン。キックオフの段階で12人のユーザーを招いプロジェクトの方向性を理解するために30のモックアップを見せた。開発段階においてはもうちょっと少ないユーザーに7個のモックアップを見せた。
  • フィードバックは良いことだ。できるだけ早くできるだけ多くを得るべき。時間を節約できる。

3) 泥臭いこともやる。Webのコードがどのように動いているのか理解することは重要だ。全てのデザイナーはHTML/CSSを書くことができる。あと、たぶんPHPも。

  • デザインとエンジニアリングの関係を緩和させる。デザイナーはバグを作りがちだが、プロトタイプを早く作る。
  • デザイナーはシンプルにしすぎる傾向がある。エンジニアは機能をつけすぎる傾向がある。
  • この中間を理解することはデザインの役に立つ。
  • 素早い対応は重要。Facebookは多くのエリアで競争をしていて、ユーザーのWebの使い方は常に変化している。これらに素早く対応していくことは極めて重要なことだ。
  • Facebookが信じるコアな部分、つまりプロダクトをユーザーがどのように使うか理解するために早くリリースすることは重要だということ。
  • モックアップは嘘っぱちだ、それらにはコンテンツと文脈が欠落している。デザインがどのように機能しているか理解するためにも実際のコンテンツ、ページデザインでのテストが求められている。
  • 素早い対応をするためにはプロトタイプは早期に必要。例：ユーザーにリリースする前に内部でUIテストすることで批評を受け修正できる。The new design broke the existing scan line in the news stream.
  • Facebookのデザイナーは1週間におおよそ40コミットする。

4) 愛着を持つな。ソフトウェアは永遠ではない、常に変わり続けるものでありそれを受け入れる必要がある。

  • ゴールは絶え間なく変化する。
  • 現状満足でいれば、あなたは出遅れるだろう。デザイナーとして、これからの1年について考え、予測する必要がある。
  • Facebookで最も長い期間、変更しなかったデザインは2004年のトップページで、それは18ヶ月間だった。
  • 例：グローバルナビゲーションのリデザイン。数ヶ月間かけて多くのアイデアを試した。昨日でさえ、サイトのヘッダーを変更した。
  • これまで以上に、私たちの仕事は終わらない。
  • ほとんどの機能がA/Bテストされている。前もって明確に評価指標を定義する。そして測定する。決して指標にデザインを決定させてはいけない。