クローズドSNSアプリ『Path』から帰納法的にまなぶ、UIデザイン。

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

スマホファーストの時代に重要性が高まってくるスキル、そのひとつが「UIデザイン」だと思っています。

PCと比較したときのスマートフォンの特徴、それはデバイスの制約条件でしょう。いわずもがな、PCとくらべてスマホは画面が小さい。そして、処理速度が遅い。すると自然と、一度で・求められる情報を・遷移させることなく、表示できるウェブアプリを設計できるひとが求められてきます。

このスキルは実はとても専門性が高い。見せられたウェブアプリのUIを評価することはできても、ゼロから自分で設計できるノウハウを持っているひとは多くないでしょう。そしてUIは、ウェブデザインとプログラミングの知識・(ある程度の)経験なくしては設計できません。なぜなら、UIはプログラミング言語による、実現可能性にも依存するからです。

私自身の職種はウェブデザイナーでも、プログラマーでもありません。しかし、彼らと同じ言葉でともに優れたUIを設計できるようになるために、研究を続けていきたいと思います。

さて、前置きが長くなってしまいましたが、私がもっとも “UIが優れている” と思っているアプリをご紹介します。もちろん “UIだけ” が優れているわけではありません。それが、クローズドSNSアプリ『Path』です。

Pathはフォローしあえる友人の数を150人までに制限している、スマホだけで操作可能なSNSアプリです(PCでは投稿内容の閲覧のみ可能です)。最近私は、FacebookとPathを50:50ぐらいの割合で使い分けており、私のまわりでは使うひとが増え始めています。

Pathから帰納法的にまなぶ、UIデザイン3つのtips

Pathに対して “UIが優れている” と感じる理由を整理すると、以下の3つに集約されるかなと思いました。

1)実装する機能に優先順位をつけ、1位のみに絞り、2位以下を勇気を持って削っている。

Pathの一番の特徴と言っても過言ではないのが「+」ボタンです。画面の左下に位置し、タップすると6つのボタンが飛び出してきます。これらのボタンで、写真・一緒にいるひと・場所・音楽・つぶやき・就寝を投稿することができます。ユーザーがPathに一番求めていることは「近況を投稿すること」です。それを実行するためのボタンを、限られたスペースのもっとも重要な位置に配置しています。

逆に、自分の投稿のみを振り返る・各種設定・友達を追加するなど、次点以降で求める機能はどこに配置されているか。実は、隠されています。画面の左上にある「横線ボタン」、これを押すと “自分の投稿のみを振り返る・各種設定” ができます。また、画面の右上にある「ひとボタン」、これを押すと “友達を追加” することができます。つまり、ファーストビューでは隠れているのです。

機能を隠す、これは勇気のいることです。しかし、スマホという限られた画面においてスペースを有効活用するためには必要なこと。逆に言うと、一番大事にしている機能に自信があることの裏返しかもしれませんね。

2)意味が似ている機能は1つのパーツにまとめる。でも、できるだけ遷移させない。

すこし分かりにくい言い方になってしまいました。もう一度、「+」ボタンに注目してみましょう。

ボタンをタップすると6つの投稿の種類を選べるようになっています。それぞれのボタンで、写真・一緒にいるひと・場所・音楽・つぶやき・就寝、という投稿の種類を選ぶことができます。Facebookモバイルの投稿の仕方を思い出してください。ホーム画面に近況・写真・チェックインという3つのボタンが常に表示され、常に一行分のスペースを使っています。Pathは「投稿する」⇒「なにを投稿する?」と投稿のステップを1つ増やすかわりに、省スペースを図りました。

さらに「投稿する」⇒「なにを投稿する?」の間に、ウェブページの遷移をさせない設計にすることで、ユーザーの操作感を損ねないようにしてあります。もし投稿するたびに遷移させられていたら、ものすごくストレスに感じると思います。そのストレスが積み重なって、アプリを使わなくなることだって考えられます。

意味が似ている機能はできるだけ1つのパーツにまとめる。でも、できるだけ遷移させない。ということです。

そして最後、

3)ユーザーがアプリになにを求めているか、をできるだけ挙げきっている。

「+」ボタン以外にも、Pathの気に入っている機能がいくつかあります。1つは、自分の投稿を何人・だれが見てくれたかを知れることです。

投稿されたつぶやきや写真の右上に「顔マーク+数字」が書かれています。これが自分の投稿を何人・だれが見てくれたかを知るためののボタンです。mixiに「足あと」という機能がありましたよね。やはり、自分の投稿をだれが見てくれているかは気になるものです。それが分かっていれば「このまえアップした写真ね」という会話にもつながります。

あともうひとつは、「就寝ボタン」です。寝るときにタップすると、ほかのひとに寝たことが伝わり、起きたときにタップすると、目覚めたことが伝わります。FacebookやTwitterをだらだらやって寝不足になることがたまにあるのですが、これがあれば軽減されるかもしれません。私はこの機能を見るたびに「ほどほどにね」と言われている気がして、ホスピタリティーを感じてしまいます。

Pathにはこれ以外にも、デザイン的に、そしてプログラミング的に素晴らしいところがたくさんあります。UIデザインの勉強がてら、ぜひ使って、その魅力を体感してみてください。

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

This entry was posted in blog. Bookmark the permalink. Both comments and trackbacks are currently closed.

Comments Closed

トップ | tadashiku, Incについて | 製品・サービス | 実績のご紹介 | ニュース | ブログ | パートナーシッププロジェクト | お問い合わせ