taninnosorani blog

What is the UX Workflow?

freeeでのSketch運用の実態

この記事はSketch 3 Advent Calendar 2015 の 23日目のエントリーになります。

10月頃にfreeeの社内でSketchの勉強会を開催しました。その勉強会の感想で「社内事例を聞いてみたい」「外部サービスとの連携した際のモックアップ検証方法」「山田さんのSketch芸を見てみたい」という声を頂いため、ブログという形でtipsを添えた社内事例をご紹介したいと思います。あとfreeeでは企業カテゴリでfreee Engineers Advent Calendar 2015に参加しています。エンジニア向けの記事が多いですが、とても面白いので宜しければこちらもご一読下さい。

freeeではZeplinを使っています

ZeplinはドローイングツールのSketchで作ったデザインをWebブラウザ上から簡単に確認できるツールです。今年の7月7日に1.0がリリースされ、画像出力機能が(やっと)追加されました。これで今まで手間であったデザイナーとエンジニアのデザインの受け渡しが自動で出来るようになりました。ちなみにfreeeでは$25/月のGrowingBusinessプランを買っています。

家計簿アプリCart

Cartは写真で記録する新しい家計簿です

 

そもそも家計簿とは?

家計簿をつける目的は、どれだけの支出があって、それが収入に収まっているのかを管理して把握するためにあると思います。ですが管理することが目的になってしまい、帳簿のたくさんの数字を見ても実感がわかなかったりすることもあるかと思います。結局、支出を把握するのに「日用品」「交通費」「娯楽」などに分けても数字上の「娯楽」は先月と増えた減ったの参考になるだけで、どれだけの支出だったのかを把握するのには向いていないと考えました。

Cartの特徴

家計簿に本当に必要なのは細かな分類や金額ではなく、何を買ったのかを思い出すことです。そういう意味ではCartは大雑把な家計簿です。Cartの家計簿はどんな買い物をして、どれくらいのお金を使っているのかを思い出すためにあります。そのために写真と位置情報と時刻を記録しています。例えばスーパーのレジを読み取って細かな商品名と金額を記録するよりも、レジ袋を撮影して合計金額を入力するほうが後で見返したときに写真と場所から当時の買い物をしていた時の記憶が蘇りやすくなります。

オススメの使い方

  1. 買い物をしているときに商品を撮影して、おおよその金額を入力します

これだけです。
細かな金額や分類は必要ありません。Cartにとって大切なのは何にどれだけ使ったのかを管理することではないので、金額も大雑把に気楽に使います。バスに乗ったら「交通費」なんて入力しなくても、例えばバスから見える景色を撮影してもいいと思います。そして、1日使ってみたら以外なほどに買い物の回数が多いことに驚かれるかもしれません。これは帳簿で管理する家計簿では体験できません。もし細かな金額や分類で管理されたい方は別の家計簿アプリが良いかと思います。特にマネーフォワードがお勧めです。

仕様

CartはiOS7を入れたiPhone4s以上でご利用いただけます。

ユーザビリティテストのタスクシート

ユーザビリティテストの進行やユーザーの行動などを記録するタスクシート(プロトコルのようなメモや議事録の雛形)を作成しました。ただユーザビリティテストを専門で行っているわけではないので、要素の抜け漏れなどはあるかもしれません。ユーザビリティのテストプラン作成やレポート作成、被験者のリクルーティングなどは参考情報をご参照下さい。ここではユーザビリティテスト全体ではなく、インタビュー中に使用するタスクシート(インタビューシート)に関してになります

2014/10/2 新しいタスクシート(ver2)を追記しました

ver2の変更箇所

  • ver1ではフェイズ毎に別の列を記載していましたが、ver2では全て共通の列名を使用しています。列名がバラバラであったためスプレッドシートにしては複雑なレイアウトなっていました。今は列行は1つなので固定行にしてスクロール時にも見やすくなりました。
  • 経過時刻を記載する列を追加しました。進行管理を行うときに遅れているのか進んでいるかのをすぐに把握するためです。
  • テストからの気付きを記載する「テスト結果の感想」列と、タスクを実施するための準備を記載する「準備・メモ」列を分けました。
  • 達成や効率などの評価ポイントを自動で計算するようにしました。ちなみにこのポイントは数字が多いほどユーザーが躓いたことを表します。
  • 13inchのMacBookでなるべく収まるように全体的に幅を短くしました。

Prototyperを使ったモックアップ主導のUI設計プロセス

ユーザーインターフェイスを設計する上で、主にモバイル向けのワイヤーフレームとモックアップ(プロトタイプ)の関係とモックアップツールに関することを記載しています。


UI設計はUXデザインプロセスの4段階目

アプリやWebサービス、サイトなどを作っていく全体の流れは以下のプロセスを行っています。基本的なUXデザインのプロセス通りですが、コンセプトやアイディアの前に調査(理解)を重視している点と、ワイヤフレームではなくインタラクティブなモックアップを作成している点が多少異なるかもしれません。その他のプロセスにご興味がありましたら詳細は問題解決型UXデザインアプローチを御覧ください。

  1. 理解
  2. アイディア
  3. ストーリー
  4. UI
  5. ビジュアルデザイン
  6. 開発
  7. フィードバック

今回は上記の中で画面の要素やレイアウトを検討する「UI」フェイズの「モックアップ」に関してを、整理していきながら記載していきたいと思います。このUIフェイズの目的は「ストーリー」で考えた要素をもとに、スケッチやモックアップを通して最終的に画面詳細設計書を作成することです。画面詳細設計書を作成するのは、基本的に受託UXなので、チーム・組織で活動するためにもドキュメントを成果物として考えていきます。

問題解決型UXデザインアプローチ

受託のUXデザインを進めていく中で作業の流れと自分が心掛けていることを記載しています。基本的なプロセスはHCDやデザイン思考とあまり変わりませんが、ウォータフォールのような受諾型のためドキュメント指向のコミュニケーティングデザインを行いやすいように独自に実践している内容になります。特にここでのUXは受託開発で多い問題解決型のUXを扱うため、最近ではむしろ主流とされている顧客開発型のUXとは多少異なります。また内容は随時更新しています。

問題解決型UXのデザインプロセス

  1. 理解
  2. アイディア
  3. ストーリー
  4. UI
  5. ビジュアルデザイン
  6. 開発
  7. フィードバック