プロダクトは「見えない部分」がユーザーとの信頼関係を作る

Source

ユーザーに見えないような細部をしっかりと作りこむことで、プロダクト全体のクオリティを上げ、ユーザーに忠誠心を持ってもらえるようになる。ディーター・ラムス氏の「グッドデザインの10の原則」をデジタルプロダクトに当てはめた考察。

グッドデザインは細部まで完璧

あいまいさや予測不能な要素をいっさい残してはならない。デザインをするうえでの細心さ、正確さは、消費者への誠意を示すものだ。 — Dieter Rams氏「グッドデザインの10の原則」

昔、HTML5 Boilerplateが使われていたころ、テキストを選択した時にピンク色にハイライトされることで、正しくコーディングされていないことが分かった。一見素晴らしいサイトに見え、全てのピクセルは正しい場所にあるが、間違いがあると忌々しいピンク色になってしまう。

その後、色は攻撃性の低いブルーに変わってしまったが、フロントエンドデベロッパーとして細部まで手が回らないときにすぐ気付かせてくれる、小さくて便利な隠し機能だった。

細部とは細かい部分をいうのではない。細部とは製品を形成する材料の事である。— Charles Eames氏

細部がプロダクトの質を変え、ユーザーを楽しませる。いくらアイデアが素晴らしくても、細部によって記憶に残るかどうかが決まる。Googleは世界を変えたテクノロジーだが、ユーザーは検索機能よりもGoogle Doodlesに愛着を覚えている。Uberやその同業は交通産業を変えたが、そのうちの特定のブランドに忠誠心を持たせるのはユーザーエクスペリエンスなのだ。

デジタルプロダクトの細部とは?

デジタルプロダクトのインタラクティブな性質は、使っていて楽しい細部志向のデザインになるためのたくさんのチャンスをもたらす。特定の場所では、小さな変化が豊かなエクスペリエンスを作る。

ローディングステータス

コンテンツがロードされる前にプロダクトがどのように見えるだろうか?ユーザーはブランクページを見たままだろうか?ローディングのイラストや、ダミーコンテントが現れるのだろうか?

素晴らしいUXとは、ローディングの実際の時間ではなく、感覚的な時間である。それは実際よりも短く感じられるのだ。

404 pages

グッドデザインは、最悪のケースのシナリオでも、良いエクスペリエンスを与えるために配慮されている。素晴らしい404ページは、ページが存在しないというストレスを相殺する。記憶に残る404ページはたくさんあるが、最も素晴らしいものはユーザーが最初に探していたコンテンツを見つけられるページだ。


GitHubの404 pageは個性的であるだけでなく、探している場所へ辿り着くための検索機能もある

Hover/Focusのデザイン

見えない部分は、見える部分ほどデザインされていないことが多い。ホーバー、フォーカス、クリック/タップ状態などは、自然とインタラクションを誘発するが、それらはプロダクトのアイデンティティーを、微力ではあるが効果的に補強する。

エラーアラート

エラーやアラートに対処していると、ついシステムデフォルトのままにしてしまう。JavascriptポップアップやiOSスタンダードモーダルはデベロッパーにはアクセスしやすく、早くリリースしたかったり、心配事を少しでも減らそうとしている人に簡単な方法を提供する。

もちろん、うまく使われないと、カスタムエラー/アラートはデフォルトの対応と同じようにうっとうしいものになってしまう。グッドデザインとはデフォルトとカスタムを必要に応じてうまく使い分けることだ。細部まで素晴らしいエクスペリエンスとは、例えうっとうしいデフォルトを採用していたとしても、ほとんど見えないように作られているのだ。

繰り返される細部の効果

細部は繰り返される時により効果を発揮する。小さなストレスは数回なら気にされないが、50回も繰り返されると大きなストレスになる。同じように、素晴らしい細部は大きな時間節約へと拡大される。


メールのスワイプ機能のように、細かな機能は繰り返し使われたときに、グッドデザインをより素晴らしいデザインへと進化させる

周辺の機能

プロダクトの周辺部の機能はメインの機能ほど注目を集めることはない。

インターフェースの細部のミスは、ソフトウェアを徹底的に壊したり、主要なメトリクスに影響を与えたりしないが、ユーザーとの信頼関係を徐々に壊していく。— Cap Watkins氏「The Dark Corners of Your UI」

プロダクト細部を磨きあげることはいかなる場面でも重要なのだ。

モーションインターフェース

モーションはインターフェースに息吹きを与えるものと過大評価されている。取り除かれると、プロダクトは完全に不自然になってしまうい、使われすぎると、Dribbbleのいいね!要求のようになってしまう。

現状のモーションインターフェースにおいて基準を作るデザイナーはPasquale D’Silva氏であり、彼の記事「Transitional Interfaces」は素晴らしいUIアニメーションの原理と実践について鋭い要点を述べている。インターフェースデザインに関わる全ての人は読むべき1冊だ。

まとめ

より多くのプロダクトをより早くリリースするという欲望にまみれた業界では、細部志向とミニマムに実行できるプロダクトとのバランスを取るのが難しい。素晴らしいものを作ろうとしたら、細部にこだわらなければいけないが、完璧主義者になってはいけない。プロダクトにとっては完璧であることよりも、リリースされることの方が重要だからだ。私の経験上、一番良い方法はプロダクトが完成したらできるだけ早くリリースし、何度も細部を修正していくことだ。

これはThe Industryのサイトのリデザイン後に書く初めての文章であり、私はこの原則をずっと心に留めていた。追加したり修正したい細部はまだたくさんあるが、完璧に仕上げることよりも、リデザインをリリースすることを優先しなければいけなかった。改善点は常にあるものだから、いつこの記事を読まれようと、未完成のままだろう。改善するたびにリリースしていく。


細部のデザインのインスピレーションリソース
Dribbbleの300×400ピクセルにおさまった画像は、細部をじっくり観察するためにぴったり。

Little Big Detailsはデザインの細部にのみ注力したサイト。


この記事はシリーズ「グッドデザインの10の原則: デジタルプロダクトへの展開」(全10回)のPt.8です。
Pt.1, Pt.2, Pt.3, Pt.4, Pt.5, Pt.6, Pt.7, Pt.8, Pt.9

「グッドデザインの10の原則」はDieter Rams氏と長年の連携をもつVitsœのWebサイトで発表された。原則はクリエイティブコモンズラインセンスのもと、ここで見ることができる。