先週末に実施した #DevLOVE のワークショップは、30名程度の参加者といっしょに題材のデスクトップサイトをモバイルサイトの再設計をするというものでした。やっと時間の隙間が作れたので思い出して書いてみます。
まず、前提として「IAシンキング」を定義しました。
IAシンキングとは、人間中心デザインに基づいた、情報アーキテクチャの分野におけるソリューションを提供するための手法。
現状を調査し情報を可視化したうえで目的や課題を明らかにし、新たな情報の提供方法を構築すること。
デザイン思考でもそうですが、「アイデア発想法」だけだとなんだかよくわからないのでちょっと細かくなったかも知れませんが、書いてみました。
ワークショップ
本編のワークショップの流れは以下のような流れで行いました。すでにあるデスクトップサイトの画面構成を分析して、ジャーニーマップ的なストーリーにすることで、新たなモバイルサイトの要求を整理します。最後にその要求に応えるモバイルサイトのUIを検討します。
- 現行サイトの情報を把握する
- ユーザー行動を設計する
- 新たな要求から設計する
題材は、ティップネスのパーソナルトレーニングの画面です。最近ティップネスに通っていることもり、検索して探してみたらモバイル対応できていなかったのでちょうどいい題材になりました。
現行サイトの情報を把握する
まず、画面構成を分析してコンテンツを整理します。そのなかで Stephen Hey 著「Responsive Design Workflow」にある「ライナーデザイン (Linear Design)」を紹介しました。レスポンシブウェブデザイン対応に関連して、モバイルファースト = コンテンツファーストの話もするわけですが、コンテンツをどう整理するかを作業としてイメージしてもらうのには非常にわかりやすい例だと思います。
具体的には、レイアウトされた画面要素を一列に並べ直して優先順位を検討するというものです。構造化という言葉を使う場合もありますが、単に並べて考えてみるというだけでいいでしょう。スクリーンサイズの小さいモバイルを考える際にはもっとも基本的なデザインになると思います。
ユーザー行動を設計する
ユーザー像を決めたうえで、シナリオを考えます。そのシナリオは、ジャーニーマップのフォーマットに埋めてもらうようにして、ワークショップ内での共通言語をつくりました。そのフォーマットは、ステージ・行動/心情/思考・ニーズ/課題・タッチポイントをマッピングし、最終的にはステージごとに要求を整理するというものです。こうしたツールを使う目的は、要求事項をひとつの軸で整理することに尽きます。
新たな要求から設計する
ジャーニーマップにまとめたうえで、要求事項に合う画面設計を進めます。その際に1で分析した既存のアセットを把握したうえで、新たな創造をしてみます。このあたりは、非デザイナーの場合とデザイナーとでとらえるレイヤーが異なりますが、非デザイナー向けには講義でもご説明したデザインパターンの適用が有効です。
まとめ
今回のワークショップでは、こうした論理的なプロセスを経験している方と経験していない方とでどうしてもクオリティに差が出てしまいます。たとえば、画面設計をした際に書かれた要素は、どういう要求に答えているのかが対になっていない場合があります。プロセスは上から順に追っているものの、進めていく中でつい思いつきで要素が増えたり「こういう情報も必要だ」という観点で要素が増え続けていく傾向もあります。
こうしたジャーニーマップを使う場合には、ほかの方法でも見つけられそうな情報を組み入れることやヌケモレを防ぐように働きかけることは原則求めないことを作成前にポリシーとして定めておくほうがいいでしょう。
以前、「Lean UX への違和感」を書いたボクのブログを DevLOVE の主催者である市谷さんが読んでくださったらしく、そこから今回のワークショップ実施につながっている背景があります。ギリギリまで資料を共有することもできず、バタバタでしたが、無事こうした感想ブログを書けて今はホッとしています。また呼んでいただけるよう精進して参ります。ありがとうございました。
