読者です 読者をやめる 読者になる 読者になる

きしこの研究

日々の勉強をアウトプットする用だよ。

UIデザイントレー@PIBO

今回のアプリトレースは、PIBO。

絵本アプリということで、親子で楽しめる子供向けのアプリです。

pibo.jp

f:id:kisico0418:20170103191346p:plain

 

1.トップページ

f:id:kisico0418:20170103191345p:plain

・絵本は角丸でサムネイル画像で表示

・検索バーはない代わりに年齢検索で絞る

・アクションボタンは赤色で統一

(角丸3pxとありますが、6pxの間違いでした…汗)

 

2.本の紹介ページ

f:id:kisico0418:20170103191344p:plain

・読むボタンがとにかく目立つ

ボタン内に絵本のアイコンあり、20pxの角丸のため子供でもボタンと認識しやすい。

・対象年齢や必要最低限の概要で分かりやすい 。

・透過しているので、ライトボックスのような印象を持ち、前の画面に戻りやすい。

 

トレースと元画像の比較

f:id:kisico0418:20170103191347g:plain

f:id:kisico0418:20170103191348g:plain

(同じ画像を使用していないので目がチカチカする…。)

 

ちなみに、このアプリはモーションがすごくいいです。

絵本をめくる感覚だったり、絵本を読むを押した時のぽわんっとしたモーションなど。

 

f:id:kisico0418:20170103202902g:plain

 

気づいたこと:

子供が操作する部分は、単純操作でわかりやすく目立たせ

逆に親が操作する部分はアクション部分が小さかったり、「ボタン感」がなく他のスマホアプリと同じUI(お気に入りボタンやメニューバーなど)で差別している。

一つのアプリを世代の違う人やスマホに対しての慣れ度が違う人が一緒に操作する場合、誰にどの機能を優先して操作してもらうかを考えながら設計する必要があると感じました。