[&] CSS Nite LP33 #4

CSS Nite LP33
----------------
人間だからこそできる、気配りデザイン 秋葉ちひろ（ツクロア）

今日、気配りデザインということで、ググっても出てこないです。
普段デザインする時に考えていることを突き詰めると「きくばり」になるかと。

普段、Webサイトのデザイン、設計、プロトタイプの作成、
フロントエンドのコードを書きながら、デザイン全般をやっています。
執筆や講演も、FireFoxOS, Effective Android, 日経 Linux でも連載しています。
デザインに関するところを幅広くやっています。

気配りデザイン？
アプリ、普段作ったり、使ったりしていると思うのですが、
使いやすい、使いにくい、そのニクイの判断基準はどこにありますか？
何で？つかいやすいと思うのですが、
ちょっと考えてみると、答えは凄く難しいと思います。
設計とかを見るようになってきて、基準が何だろう思ってきて、
その判断基準として、こういう学問とか、上流の設計に必要な知識は
あると思うのですが、これって、ぶっちゃけ専門的すぎるので、
ちょっと壁が高いと思うのですこれを「気配り」に考えてみれば良いと思ったのです。

人と人の例をだしてみたいと思います。
女子がカフェでお話しをしていると思います。
ウェイトレスさんを目で追って、気になる感じで見ていたと思います。
青い人が気づきましたが、きになりながら話しを続けてしまいました。
あ、今日たばこ吸ってない！灰皿がないんだ！と気づいて、
店員さんを呼び止めるわけです、すいません灰皿下さい！

ユーザーとアプリの関係に置き換えてきます。
アプリの人が何かをしたいということに気づいて、
ユーザーが何をしたいんだろうとアプリが考えて、
ユーザーがわざわざ頼まなくても、いいように気配りする。
気配りに落とし込めるんじゃないかな〜と思っています。

ユーザーが快適に過ごせるために

要求をまとめてみると、
　どんなときに
　　たばこを吸いたい時に
解決：なにができるか？
　　灰皿を頼む

●気配りデザイン
　ユーザーが快適にアプリを使えるために施すデザイン

なぜ？気配りデザイン
ごちゃっとしていたら、何を選んだら良いかあわからない。
見るだけでもきついのに、操作すると、もっときつい。
ユーザーが「ごちゃ」と思った時点でダメ。
ひとと人との気配りに落とし込んでいくと、誰でもわかる。

誰でもできる気配りデザイン
専門の人がいない場合、デザイナーやエンジニアが気を配って作らなければいけない。

３つの気配り
1) ユーザーの手間を省く気配り
2) 操作を予測させる気配り
3) 気持ちよく操作させる気配り

●ユーザーの手間を省く気配り
デンシカルテ的デザイン、歯医者、歯科衛生士、歯医者の受付の人が見るようなサービス
もうすこし掘り下げて使いやすくするには？

要求：どんな時に？
　患者さんと会話するとき
何をしたい？
　来院頻度
もう一工夫欲しくは無いですか？

解決：何ができるか
　今を起点にする時間の計算をする
　タイムライン系ではあたりまえになっている。2-3年前はそういう概念が無かった。
　日付と時間ではなく、1時間前、2日前、1ヶ月前で表記すれば良い

●回数や時間の尺の表示に関して
乗り換え案内、所要時間／金額／乗り換え回数
読まないと理解できない、もうちょっと良い見せ方があると思っている

要求：どんなときに？
電車の経路を調べるときに
早くて安くて楽な経路を知りたい

乗り換える回数／場所を見やすくする
　乗り換え回数が一目瞭然
　どこで乗り換えしたいかも出ている、考えなくていい
　実際こういう風なアプリがあって、Expedia トランジットの時間が書かれている。
　横に長いと滞在時間が長いことがわかる

●URLをシェアしたいとき
Google+ のアプリ、リンクを押すと、何もしなくても、ペーストが行われる。
ユーザーがいちいち長押しして貼付ける手間を省いている。

要求：URLコピー
URLがコピーされていたら自動で貼付ける
この手間を省くだけで、アプリは格段に使い勝手が良くなる。

●スマホでカッコを入力するとき
Simeji の開発をしていたとき。
両括弧を表示して、その『』の間に、カーソルが間に入ります。
Simeji になれると、iPhone では辛すぎる

●ユーザーの手間を省く気配り
　ユーザーが頭をつかわなくてもよい
　ユーザーの手間を減らし目的のことが早くできるようにする

●操作を予測させる気配り
どうしたらいいの？
アプリの方で操作をうながす

●一瞬出てきて消える
Moldiv というアプリ、一瞬ポヨンとなって、メニューが左側にあることで、
ユーザーの操作をうながしている。

●タップするとその方向に動く
右から左に出てくることがわかる。
iPHone のロック画面から起動するカメラアプリ

●ページ送りを予想させるようなデザイン
Google+ のコメント表示、重なって表示される。5件表示される。
奥行きで重ねるので予測させる。

●操作を予測できる気配り
チュートリアル無しでもユーザーが自然に操作を取得できる。

●気持ちよく操作させる気配り

●スライドショーの動きを考える
ページ送りの際のトランジション、
スワイプしていると、次の写真が半分でてきて、次の写真に移る
Android のホーム画面、次のものが奥から出てくる、
Android のような動きだと、三半規管が弱い、目の負担が少ない、
目の動きが動きすぎなくて、負担がかからない。

●タイムライン
Google+ でタイムラインを送っていきますよね。
普通に次のタイムラインがちょっと遅れて出てきます。
微妙に深度をもって表示されます。
この意味は？

　次のカードが出てくる遊び心
　常に一定で動かすより、わくわくした気持ちにすることができる
　
●画面が大きな端末での動き
　Facebook アプリのリンクを開くところ。
　真ん中から分かれて開く。

真ん中から割れることで、あたかも自分たちのアプリ内でのコンテンツであるかのように思わせる体験
違うアプリにいったのかな？とユーザーが思ってしまうかもしれない。
FB内のコンテンツ

●気持ちよく操作させる気配り
　身体的に負担がかからない
　人の感情に訴えかける

誰でもできる　気配りデザイン

●待ちで見かける気配りデザイン
ユーザーの手間を省く街の気配り
　駅の行き先表示
　駅の電光掲示板　乗り換えや通過駅
　井の頭線、どこで接続するのかが行き先表示のところに表示される

●ユーザー体験
野菜の売り方、焼き野菜、炒め物、
透明じゃないレジ液晶だと圧迫感が出る、安心できる。

●音による気配り
扉が開く時と、締まる時の音、
レジ、右と左のレジで音の高さが違う。
自分の音だということがわかるように。

気づくこと、しっかり観察する
他と違う点に気づく

人に体する気配りと同じ
いったん人に置き換えてみる

理由を考えること、しっかり言語化する

気配り上手になろう！