hitode909の日記

以前はプログラミング日記でしたが、今は子育て日記です

高速にUIを作ると餅つきっぽい

UIを作るとき,とりあえずデザイナーつかまえて,紙にお絵描きする.

何をどう置くかとか,どこを押すとどうなるか,ここにはこういう説明の文章,とかお絵描きしながら考える.
使いやすさを損なわない限りで手早く作れればラッキーなので,サーバーサイドでこういうデータの持ち方をするとか,こういうJS書けばうまくすばやく作れる,とかまで考えておく.
画面で考えるんじゃなくて,やって来た人がどうなって何をしてどう帰っていくか,というインタラクションで考えるのが大事だと思う.

たとえば,ハンバーガー屋だったら,やって来て,カウンターでメニューを見て,なんとかバーガーのセットとか注文してお金払ってちょっと横によけて待つ,ハンバーガー受け取ったら席まで運んで食べてゴミ捨ててトレイは重ねて帰る.こういうインタラクションが分からないままハンバーガー屋の設計をすることはできない.カウンターからメニュー撤去するとどうなるかとか想像すると,デザインを買えるとインタラクションが変わることが分かると思う.客から見ると上の動作だけど,ハンバーガー屋として機能するには,店員のインタラクションも合わせて考える必要がある.
楽しく使いたいところなら,どうなったら楽しいかとか,喜びみたいなのも考える.写真撮ったらシャッター切る音が出るほうが楽しいかもしれないけど,動画撮るたびに間抜けなポロロンって音するとうるさくて邪魔かもしれない.
SoundCloudは気が効いていて,ページを遷移しても再生は続いたり,別のタブで曲を流すと前の曲は止まったりする.前の曲が止まるだけで喜びがある.きびきび動いて,作り込まれたUIがSoundCloudの良さにつながっている.
どう使うか考えたら,画面作っていく,途中まで適当に作って,ここまで作ったからよろしくとか言って,デザイナーと二人で同時にHTMLとかCSSとか触る.ここ触るとかここよろしくとか,これこうしたとか,チャットで話しながら進める.悩んだらとりあえず席まで話しに行く.デザイナー隣に居ると2秒くらいで行けるので早い.隣に居ないと精密なモックを作って送ってもらうことになって大変そう.同時に同じファイルを変更するので,コンフリクトしないように気をつける.ここが一番餅つきっぽい.

おまけ.この本おもしろかった.

マイクロインタラクション ―UI/UXデザインの神が宿る細部

マイクロインタラクション ―UI/UXデザインの神が宿る細部