MEMOPATCH

ルールを再構築してより良いものを作ろう ~Wunderlistはどのようにして作られたか~

  • このエントリーをはてなブックマークに追加
WUNDERLIST

みなさんWunderlistというアプリをご存知でしょうか?iPhone, iPad, Android, Windows, Mac, Webで使えるいいデザインのtodoリスト管理アプリです(無料)。とても素晴らしいアプリなので使っている方も多いかと思います。
先日このアプリを作っている会社6Wunderkinderのブログを読んでいたら、Wunderlistがどのようにして新しいデザインを作ってきたかが書かれた興味深い記事がありましたので翻訳(意訳)しました。


[以下Break Rules To design better productsの翻訳(意訳)]


私たちは一日のうちに、スマートフォンやタブレット、ノートパソコンといった様々なデバイスを使い分けています。それぞれに独自のガイドライン、インタラクションの種類、そしてもちろん異なったインターフェースがあり、私たちはデザイナーやエンジニアとして、様々なOSやプラットフォームに合わせてプロダクトを最適化する必要があるでしょう。

Wunderlistの雰囲気や動きは、ユーザーが現在、または将来どんなデバイスを使ったとしても一貫していなければなりません。そして私たちの究極の目標は、すべてのデバイスにおいて、ユーザーが直感的に操作できるようにすることです。

デバイスの定義が拡大するにつれて、私たちは既存の規則を破り、新しいインタラクションのパラダイムを定義する必要があると感じています。そこで今回は私たち6Wunderkinderがどのようにしてデザインを決定しているのか、その方法を紹介します。

ルールを知る

ユーザーに好まれるプロダクトをデザインするためには、ユーザーがどのようにそのプロダクトと関わっているかを深く理解しなければなりません。そして”どのように” ユーザーがそのプロダクトを使っているかだけではなく、”なぜ” 、そして”どこで” 使っているかも知る必要があります。全てのプロダクトはある種のパラダイムと、それに基づいたプロダクトデザイナーとしての判断の結果生まれるものです。

ユーザーは一度慣れるとその使い方が習慣となるため、プロダクトをデザインする上でパラダイムに一貫性を持たせることは重要です。そのためにGoogleやApple、Microsoftなどの企業は、OSでの操作やインタラクションの一貫性を持たせるために、開発者に対してのパラダイムを決めています。

ユーザーはあっという間に習慣を作ってしまいます。よって私たちが既存のパラダイムを使えば使うほど、ユーザーはプロダクトをより自然に扱えるようになるでしょう。私たち6Wunderkinderは複数のOSで使われるソフトウェアをデザインしているので、どのデバイスでも簡単に使えるよう、それぞれのプラットフォームのパラダイムに合わせたものをデザインする必要があります。けれども各プラットフォームのルールに固執することで、かえってユーザーが混乱する場合もあります。

ルールを破る

どんなデバイスやOSでWunderlistを使っても一貫性があるように、何か矛盾を見つけた際には既存のパラダイムより単純で、しかも自然な解決策を見つけられるよう全力を尽くします。そうすることによって、既存の枠を越え、ルールを破り、インタラクションデザインを進化させていくのです。

Twitterが何年か前に洗練されてない更新ボタンの代わりに、シンプルなジェスチャーの“Pull to Refresh” を導入しました。 そして今や、iPhoneやiPad、アンドロイド、またはMacを使っていようと、それ以外の更新方法は考えられないでしょう。シンプルかつ遊び心のある“Pull to Refresh” は、どのようにパラダイムのルールを破り、そしてどのプラットフォームでもユーザーが簡単に使え、ついには誰にとっても自然になるようなものをどのように発明するのかを示すとても良い例です。


デザインのパラダイムはこのように進化していくのです。私たちはWunderlist 2へとアップデートするにあたって、スマートフォンやデスクトップでは見たことがないような2つの新しいデザインパラダイム、Detail ViewとMinified Viewを生み出しました。

Detail View

Detail Viewをデザインしたとき、非常に単純な紙のメタファーを使いました。私たちの目標はユーザがToDoリストの詳細ページからリストの一覧へと、たった2回のスワイプで素早くたどり着けるようにすることでした。例えばスクリーン上のアイコンをタップしたり、ページ遷移をしないといったものです。ユーザーにとって重要な情報を全て表示するのに必要なスペースを拡大しながらも、Detail Viewの導入によってもっと早く、もっと自然にアプリが使えるようになっています。

Minified View

WunderlistにMinified Viewを導入することで、デスクトップアプリの画面に対する既存のパラダイムを進化させました。具体的には、他のアプリと一緒にWunderlistを使えるよう、アプリケーション画面をリサイズさせるようにしました。これはWebサイトで使われているレスポンシブWebデザインからヒントを得ており、デスクトップアプリをレスポンシブデザインにしたのは新しい取り組みでした。リストのための十分なスペースは残したまま要素を再配置し、アプリケーション画面はリサイズされるべきだと考えたのです。

新しいルールを定義

この仕事の素晴らしいところは、自分たちの作ったものが誰かに影響を与えているのを見られることです。誰かが私たちの作ったコンセプトを利用し、そしてそれが彼らの新しいパラダイムとなったらさらに素晴らしいでしょう。Wunderlist 2をリリースした後、エンジニアとデザイナーがDetail Viewのインタラクションに関するガイダンスを提供できないか尋ねてきました。そこで私たちは数ヶ月前にAndroid向けにオープンソースコードを提供したのです。それからBasecampProducteevなど、WunderlistのDetail Viewのコンセプトを使って作られたアプリをいくつか見てきました。

プロダクトデザイナーとして、私たちはそれぞれのプラットフォームのパラダイムやガイドラインを尊重しますが、最終的にはユーザーのニーズに基づいて判断します。プラットフォーム間で一貫しない操作を見つけたとき、より良い解決策を見つけるのが私たちの仕事です。ガイドラインに従うことは簡単ですが、いつそこから離れるべきなのかを判断するのは難しいでしょう。より使いやすく、より使っていて楽しいプロダクトを作るために、すべてのエンジニアとデザイナーが既存のパラダイムに疑問を持ち、現在のデザインの限界を越えていって欲しいと願います。


以上です。
原文のタイトルに「Break Rules」というフレーズがあったので、ガイドラインなどを無視して新しいものを作るという趣旨の文章なのかと一瞬思ってしまいましたが、ガイドラインを尊重しつつ、再構築してユーザーにとってより良いアイデアを考えるという文章でした。アプリやWebサービスのデザインを作る人たちにとても有益な情報だったのではないかと思います。 また今回のような記事を見つけたら紹介させて頂きます!


※この記事は6Wunderkinderと著者であるBenedikt Lehnertさん (@blehnert) より翻訳転載許可を頂いて掲載しています。

Benedikt Lehnertさん (@blehnert)
Chief Marketing Officer at 6Wunderkinder
(原文: Break Rules To design better products

  • このエントリーをはてなブックマークに追加

RECRUIT

Goodpatchで一緒に働きませんか?

弊社ではエンジニア、ディレクター、デザイナーを随時募集しています。インターネットが大好きで、UIデザインを愛し、新しいことにチャレンジしたい、という方なら大歓迎!皆様からのご応募をお待ちしております!

Goodpatchに今すぐエントリー


RELATED ENTRY

Twitter and RSS

ブログの更新情報はTwitterやRSSで流します。UIに関する記事を投稿します。