選んでから送るまでが、簡潔!ソーシャルギフトアプリ「Karma」 | CA Beat デザイナーブログ

CA Beat デザイナーブログ

CA Beatデザイナーがオシャレで使いやすい
注目の海外アプリを中心にレビューしています!


こんにちは!CA Beatデザイナーの”ニイヅマ”です!

iPhoneアプリデザインレビュー第7回目は
"ソーシャルギフトアプリ"Karmaです。
なんだか、Beatのデザイナーは誰かに何かを送るのが好きなようですね...

Karmaはまず誕生日などが近い友達のリストからプレゼントを送りたい相手を選び、
次に提携ショップのギフト候補の中からギフトを選ぶと、
Facebook上もしくは
メール等で相手にギフト(厳密にはデジタルのギフトカード)を贈ることができます。
さらにギフト券を受け取ったユーザーは、他の商品に換えたり、
チャリティーに寄付することもできます。


ちなみに、このサービスでは友達の住所を知っておく必要はありません。
個人情報は貰った側が自分で入力するので、「自宅の住所を教えるのはちょっと…」と
いう人も安心して使えます!


_______________________


アプリ名:Life style
カテゴリ:ソーシャルギフトアプリ
金額:無料
AppStoreからのダウンロードはこちら

_______________________

では、デザインレビューを始めます!


1.高さを取らずに、沢山見せる!



まず、アプリを開くと上の画面になります。

このページでは、まず上の「Start New Gift」ボタン、
その下には各カテゴリでの説明文や画像が表示されています。

「Browse Prducts」や「Celebrate a Friend」などでは、

写真を横フリックすることで、ページ遷移せずに
5つまで画像を見る

ことができます。

素敵な写真はユーザーの興味をひくのにとても重要ですので、
こうして1ページに複数の写真を載せる方法は最近主流になっていますよね。

先日紹介したAirbnbでもカルーセルを駆使していました)

_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 


ちなみに少し話はそれますが、本日リリースされたiOS6の「App Store」と
「iTunes Store」は、かなりUIが変わり、こちらでも横フリックを使っています。
iPhone5で画面サイズが縦に伸び、さらに横フリックを駆使したUIが増えると、
1ページに表示される画像数が増え、必然的に容量が重くなってしまうので、
画像の軽量化などを図っていかないといけないと感じました。
さらに画面の解像度が上がったりすると画像サイズも上がるし.....考えるだけでも
怖いので、こちらの記事で紹介されている「マスク用PNGを使った軽量化」なども
積極的に試していこうと思います。

_ _ _ 
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 

2.沢山あるのに選びやすい!おしゃれな絞込み検索


上の画像の左側はカテゴリー別でギフトを選ぶページです。
カテゴリ選択のボタンは左にスワイプすると、隠れているカテゴリを見る事が
できます。シンプルなアイコン付きで分かりやすい。


右の画像のページでは金額でギフトを絞れます。
この2つは1つのページ上ですので、まずカテゴリを選んでから、
金額を決めて~という感じでギフトを選ぶことが出来ます。

$0~$100までの間で、自分の予算に合わせてスライドバーの
スライダーを移動させれば良いので、直感的で分かりやすいです。
(現状$が¥で表示されてしまうバグあり。日本人だけめちゃくちゃお買い得に
なってるわけではありません)


カテゴリーと金額、この2つを設定する事によって、それに適したギフトを
紹介してくれます。ごちゃごちゃしてしまいそうなページですが

・写真、商品名、ジャンル、金額という
 必要最低限の情報のみを表示している。 

・ベースがグレーでリスト自体も白なので
 窮屈さを感じさせない。
 

この2点がリストをスッキリさせている要因かと思いました。

3.メッセージカードの選び方も気持ちいい

ギフトが決まったら次はどんな用途であげるギフトなのかを選びます。

このアプリ内ではカテゴリー選択など、ボタンの種類の多い場合は
統一して横フリックを使っています。

同じ種類のボタンなのに違う見せ方を使うと
ユーザーの混乱を招くので、この場合は統一するのがベストですね。


カードを選ぶ場合はフリックを使い、ペラペラとページをめくる感覚で
選ぶ事が出来ます。

実際に触っていて感じましたが、このアプリは全体を通して
アニメーションの使い方が上手い!

画像のさりげないフェードインから始まり、メッセージカードを選んだり、
開いたりするアニメーション。

これが付く事により、アプリのクオリティが上がったり、ユーザーが
使っていて飽きないという利点はありそう。

ローディング画像も、ロゴを利用していてオリジナリティがあり可愛いです。


4.さり気なく...UIに遊び心を。

上の2画面はギフトを選んで、送信する前の設定画面です。

ここでは、表示しなければいけないテキスト数も多いので、UIにはシンプルで
見やすいものが求められます。

しかし、左の写真の金額部分がレシートっぽくなっていたり、
右の送り先情報が荷札になっていたり、シンプルなリストだけでは
表現できないちょっとした遊び心があります。

UIのバランスを壊さずに、かつユーザーが自然とワクワクし、
さらにそこに書いてあることを読まなくてもなんとなく分かる!
計算されたシンプルさだと感じました。



カード情報の入力画面も、カードっぽくなってる!

4.まとめ

リアリティの高いアプリは一見「おっ」と思うし、
ダウンロードしたくなりますが、実際触ってみると
飾ることを優先しすぎて使いにくいUIになっていることもしばしば。

もちろん簡単なログアプリなどでは問題ないのかもしれません。

大事なのは
アプリの内容によって「適度な装飾」をしていく
ことだと思いました。

Karumaはシンプルなベースであるものの、そこに載るであろう画像や
テキスト数を計算し、アニメーションや荷札などほんの少しの遊び心を
プラスして、見やすいし飽きない全体的にバランスの良いアプリだと感じました。

ただ、スタートページの「Start a new gift」のボタンは、
メイン要素だと思うのでもう少し大きくしてくれたほうが、
パッと見でどこからスタートするのかの認識が
出来やすくなると思います。

以上、お読みいただきありがとうございました!
では~♪チャオヽ(*´ω`*)


★宣伝★

CA BeatではTwitter、Facebookページの運営も行っております!

ブログの更新情報だけでなく、役立つスマホトピックニュースを

選りすぐって配信しております♪


ブログ右サイドバーからぜひフォロー、いいね!してくださいねヽ(´▽`)ノ