アプリのデザイン

・良いデザインの10か条
1.革新的であること
2.実用的であること
3.美的で感性的であること
4.製品の理解を助けること
5.謙虚であること
6.誠実であること
7.長持ちすること
8.細部にいたるまで一貫していること
9.環境に配慮していること
10.出来る限り抑えられたデザインであること

Dieter Rams


HUNDREDS

先日、採り上げたHundredsは本当によく練りこまれたデザインで出来上がってる。
関連記事:【iPhoneアプリ】Hundredsがシンプル・ミニマルに面白い
f:id:paradisecircus69:20130108150738j:plain
まずゲームを開始するとボールと数字だけがある。
ボール以外の部分は触っても何も起こらない。
ボールを触ると数字が増えボールが大きくなる。
触ると触っただけ数字が増えて100になると画面が切り替わる。

この事で、このゲームの基本になる
・ボールを触ると数字が増え大きくなる
・数字を100にするのが目的

と言う二つのルールが直感的にわかるようになっている。
何の説明も無いし、そもそも必要がない。
ミニマルなデザインが最低限の操作に誘導させ、ユーザーに操作を行ってもらう事でゲームのルールを学習する事に繋がっている。

もしHunderdsの開始画面に
“ボールにタッチすると数字が増えます”
“100にしてみましょう”
と書いたらどうだろう。
f:id:paradisecircus69:20130109091758j:plain
果たしてこの記述は必要か。
確かに日本語のユーザーになら伝わるし親切かもしれない。
でも英語圏の人間なら伝わらない。

直観的な操作は、言葉が判らない国の人間にでも伝わる。
言葉を省く事でユーザーは自分でルールを探して、ゲームを始める。
この後どんなステージが出てきても、ユーザーは自分でルールを探す。

UI UX IX

ZEN BOUNDというゲームでは、縄に繋がった木像が浮かんだ画面から始まる。
ユーザーはスワイプなどの操作で像を回転させて、縄を巻き付けていくと言うゲームだけれど、これもゲーム内に大した説明は無い。

f:id:paradisecircus69:20130109093543j:plain
木像を動かす度に軋む縄の音を聴けば縄がゲームに関係しているのがわかるし、巻きつけていくと左下のパーセンテージが上がって行き、その数字の変化にユーザーは巻き付ける事がこのゲームの目的だと理解できるようになっている。
そしてパーセンテージが上がっていくと木像の釘が光り、釘に縄を付ければ終わりだと視覚的にわかるように作られている。
f:id:paradisecircus69:20130109093605j:plain

例えばZEN BOUNDに縄が必要無い「木像を早く回転させる事が目的」のゲームだったらどういうデザインにすればいいだろう。

例えば、縄の音をオフにする。
それだけでかなり印象が変わる。
縄を画面手前では無く、画面奥下部から伸ばして、背景の一部にしても良いかも知れない。
ユーザーに縄を意識させないように、縄を印象付ける要素を減らす

木像の回転にユーザーの意識が向くように「木像をスワイプすると効果音(風音、重いモノが動くような音)が鳴る」要素を足してもいいかも知れない。
早く回せば回すほど音が激しくなったり、周りで風が起きるグラフィックが追加されれば視覚にもわかりやすくなる。
左下のパーセンテージ表示も速度に応じて変わるメーター(単位はm/s、r/minなど)のようにすれば伝わりやすいかも知れない。

User Experience Design

ユーザーエクスペリエンスデザインはエクスペリエンス設計の一種であり、デジタル機器/システムに対するユーザーの見方に影響を与えるようなアーキテクチャやインタラクションモデルの生成に関する手法である

Wikipedia

ユーザーがアプリを使用する際、どのような体験を得るか。
UXの話をする時、よく引き合いに出されるのがUserExperienceHoneycombだと思う。
UserExperienceHoneycomb(2004)
f:id:paradisecircus69:20130111162813j:plain
見つけやすく、
信頼があり、
操作が容易で、
魅力的(望ましい/望まれる)で、
誰にでも簡単に操作が出来て、
役立ち、
価値がある。
全てを満たしているものはとても少ないし、キチンと満たすのはとても難しい。

TWITEE LITE

一部、iPhoneアプリレビュー系ブログでバズっているTwiteeLiteは(見た目のセンスはともかくとして)UIをよく考えたデザインだろう。
f:id:paradisecircus69:20130109102858j:plain
ツイートの投稿に特化して、センター部分のスライダーはカーソルの移動。
中央のアイコンは左から選択範囲一括指定、半角カナへの変換、カッコ入力。
両端の〇を下にドラッグすればツイート出来る。
実際にツイート(文字入力)を行う際、既存アプリの「片手で操作しにくい」「範囲指定がしづらい」「ツイートボタンの位置が気になる」などの使用経験から、ツイートに特化したこういうアプリの発想に繋がった、っていうのは容易に想像できる。

参考:新しい操作感が気持ちいいTwitter投稿専用アプリ『 Twitee Lite 』/Halfway

UIで世界を席巻する

ClearはUIの美しさとシンプルさで話題になった。
参考:一夜にして世界中を席巻したiPhoneアプリ「Clear」の裏側/WIRED
Todoアプリなら通常あるだろう他サービスとの連携などは一切削って、Todo用とも定めずあくまでも「一行程度のメモ書きを階層構造に出来る」自由度の高いUIを提供し、それをスワイプやピンチアウトでの操作でコントロール。ユーザーに「iPhoneならではの操作でリストを操れる」事によって、紙などでは味わえない感覚を与えた。
f:id:paradisecircus69:20130109154419j:plain
買い物リスト、仕事で使う、ブレインストームに使う、など用途は広いし、シンプルなだけに操作感覚に慣れればレスポンスも早く、ストレスも無い。

参考:リマインダーとの比較から検討するToDoアプリ【Clear】の利点&欠点/Applogy

そうですね。
美しい表現の背後には、美しい構造が隠されています。

我々は、外部の見栄えが良いデザインというものは、磨きこまれたコンセプト、矛盾のないシステム構造から、自然に導き出されると考えています。なので、こうなってくると、もはや“GUIの設計”という観点を超えて、サービスとか世界観全体を考えることにもなってくる

“記憶に残るデザイン”の作り方 ― WOW 鹿野護のUI・デザイン論。[2]/CAREER HACK

アプリとは芸術作品でもなんでもなく、ツールだ。
だからこそユーザーに与える感覚や経験が重要になって来る。
ほんの少しの小さな操作感、レスポンス、機能。
スワイプ操作の有無、外部連携、ボタン位置、立ち上げ・画面遷移の速度。
どんな素晴らしい指向も、少しでも欠ければ評価されないかも知れない。
どんなユーザーに使いやすく、ずっと使っていたいアプリ。
毎日使える、何かあればまずそのアプリを使おうと思える。
今年もUser Experience Honeycomb全てを満たすような、そんなアプリに多く出会いたいと思う。