Kamihira_log at 10636

みえないものを、みる視点。

UIを模写してみてわかること

f:id:peru:20170523172043j:plain

先日のこと,カードソーティングゲームを元にUIをつくる演習の回で,「模写」を取り入れてみた.経緯として,昨年度の同じ課題の際に,ペーパープロトのスケッチを描くあたりで手が止まってしまう学生が多くて,毎日いろんなアプリを使っているのにUIは本当に見えないものなのだなぁ,という気付きがあった.でも,考えてみればUIはよく出来ていればいるほど,透明化して意識から消えてしまうものだ.デザインする以前にそもそも意識化する必要があるんじゃないか・・・と思って試しにやってみた次第である.軽くググってみたけど,UIの模写を教育の場で取り入れている例はほとんど無いようだ.

 

ここで模写するアプリとして,料理レシピサービスのクックバッドを選択した.理由として,まず,学生達でも一度は使ったことがあるサービスであること(クックパッドはなんと月間6000万以上のユーザ数らしい.凄い数字だ).そして今回のカードソーティングゲームの題材である犬カフェの「犬を選びながら決めていくプロセス」と,レシピサービスの「料理を選びながら決めていくプロセス」は似たような階層構造になっていること,の2つである.普段当たり前のように使っていたアプリを改めてよく観察しながら,どんな画面要素でできているのか,タップしていく中でどんな風に画面が遷移していくのかを丁寧に書き写していくのだ.

 

そしてやってみた結果.効果はとても大きかったように思う.AndroidiPhoneではUIが全く違うとか,料理の詳細画面に到達するまで何画面あるのかとか,3階層目になるとフッタのメニューが消えて広告に変わるとか,旬の行事(この時期は運動会)に反応して表示リストが切り替わっているとか,細かく分解して見ていくといろんなことを発見して,僕も驚いた.なかなか気付いてないものだね.

f:id:peru:20170523172102j:plain

さて,この模写ワークにクックパッドを選んだのにはさらにもう1点別の理由があった.実は,(偶然ながら)ちょうどこの日,クックパッド社のデザイナーの方々が演習の見学に来られることになっていたのだ.そこで,学生達には内緒にした上で,彼らがせっせと画面を書き写した後に,「はい,本日はクックパッドの方がお越し下さいました!」というドッキリをしかけてみたら楽しいのではないか,と考えた.一方でクックパッドのデザイナーさんも,まさか訪問した先で100人以上の学生達が自分がデザインしたものを模写していることは思わない.双方へのサプライズである.

 

その結果,クックパッドの方々は大人なのでとても喜んでくださったが,学生達はびっくりしすぎて逆に呆然としてしまい・・・・あまりいい反応にはならなかったのが惜しいw

 

なにはともあれ,模写してわかった直後にいろいろなデザインの理由を直接聞くことができたのは大変勉強になった.なぜクックパッドのUIの閲覧履歴アイコンは,iPhoneでは左側にあってAndroidでは右側にあるのか? 観察してみてそれに気付いても理由まではわからない.それは作った人達に解説してもらうのが一番だし,それを通してUIの深さを学ぶことが出来る.

 

模写は地味な作業だけれども,書き写す中で意識しなかったことが細部まで見えてくることに加えて,そういった現象の裏側まで考えるきっかけに繋げることができれば,相当に面白いトレーニングになると言えるだろう.