気遣いのあるデザインの裏にある努力

http://paulstamatiou.com/twitter-video/

1 comment | 2 points | by WazanovaNews 2年以上前 edited


Jshiike 2年以上前 edited | ▲upvoteする | link

フレームワークやツールが進化することで、そこそこのスキルがあれば比較的短い期間でもそれなりのプロダクトをつくれるようになるという恩恵を世の中全体が享受できますが、一方で才能のある人たちは、その便利になった道具を利用して、更に先に進みます。そしてUIの競争は際限なく続きます。

一つの目のパターンは、意外なところまで気遣いをしているので、それを発見したときにポジティブな喜び、驚きを感じるところ。

Slackを使っていると、

  • 登録済のパスワードの入力を求められる画面で、スマホキーボードでのパスワード入力を面倒に思う人、もしくはパスワードが長い人に配慮して、「パスワードを入力する替わりに、リンクをメールに送って、クリックするだけにしますか?」という選択肢が示される。
  • 衝動的に複数人にメッセージを送ろうとしたときに、時差があるところにいるメンバが含まれていたら、「このメッセージを受け取る人が4つのタイムゾーンに分かれてますが、(寝てる人もいるかもしれないのに)本当に送りますか?」と確認のダイアログが表示される。

などは、本当にそこまで仕様として必要かという好みは分かれるかと思いますが、「こうすればユーザはもっと使いやすいはずだ。」と徹底的に考えている人がいて、即実装している結果かと。

二つの目は、ものすごく自然にスムーズで使いやすいのだけれども、どうしてかと言われると説明してもらって初めて気づくようなユーザ体験を実現するために、裏側で相当な気遣いと努力が払われているケース。

そいう意味で、Twitter Videoを担当したPaul Stamatiouが、その取り組みをまとめた長いブログのエントリーはとても参考になります。

Paulは以前、「Provide meaning with motion」というエントリーで、Androidのマテリアルデザインの発表をうけて、「Googleが暗黙的にアナウンスしたのは、これからのデザイナーにとっては、アニメーションや遷移など、モーションをデザインするスキルが重要になるということ。」と発言しています。そして彼自身の日々の仕事のスタイルも、Framer.js & Framer Studioをヘビーに使ったプロトタイプ駆動型です。

プロトタイプのおかげで数千回の会議が不要になる。

但し、

プロトタイプづくりには相当な時間がかかるし、本質でない技術的なチャレンジを解決しなくてはいけなくなることもあるので、「どんな使いごごちになるんだろう。」という大きな問題を解決したくなったときだけ取り組むようにしている。

さて、Twitter Videoに話しを戻します。Paulは、Google Venturesが短いサイクル(Google Venturesでは一週間単位)でアイデアを具現化していくspringメソッドにおいて唱えている「Understand, Diverge, Decide, Prototype and Validate(目標/問題点を理解し、アイデアを膨らませて様々な角度から検証し、方向性を決め、プロトタイプをつくり、ユーザのフィードバックをもらう)」の考えに沿って、750枚を超えるSketchモックアップと54個のFramerプロトタイプを経て作り込んでいます。

最初は、録画のページと再生 / 編集画面のページに分かれた構成にはじまり、

  • 全体を一つの画面にまとめつつ、編集したいユーザはスムーズにできるが、録画から即投稿したいユーザのアクションを妨げないという用件を両立させる。
  • ユーザのアクションに対する明確なフィードバックを与える。録画したビデオの自動再生機能などアプリ側が行うアクションも、その進捗がビジュアル的にわかりやすくユーザに伝わるように工夫をする。
  • 録画中に残り時間を示す進捗バーを工夫なしに表示すると、時間が長く感じるし、ユーザが無駄に最大時間(30秒)録画してしまう
  • ユーザは録画すべきタイミングより前に録画ボタンを押す傾向がある。よって、画像編集画面においては、クリッピングするデフォルト箇所の起算はビデオの頭からでなく、後ろから数えた秒数の範囲が選択されるようにしている。またクリッピングのデフォルト範囲を20秒にすることで、ユーザが最大の30秒を不必要に選ばないようにして、短めのコンテンツの投稿を促している。

などいくつかの問題をステップごとに解決していった様子が、各デモビデオで紹介されてますし、ユーザテストの様子も載ってますので、是非原文をチェックしてみてください。

また、プロトタイプを実際にiOSとAndroidのコードに落とし込んでいくプロセスについても触れています。プロトタイプで設定した値をそのまま適用できなくて、OSごとのノウハウが必要なこと。Paul自身がアプリの実装をするエンジニアとペアプログラミングすることでコードの構成を把握し、プロトタイプをアプリ上に着実に反映させるための指摘力を上げていったこと。

デザインとプログラミングにまたがる人材を育成することの重要性はどんどん上がってきますね。

“The details are not the details. They make the design” - Charles Eames (詳細にこだわるというのは細かいことではなく、それがデザインをつくりあげるということである。)


2014 Topアクセスランキング


Back