前提：
・UI改善/スピード改善が目的のリニューアル
・今回は、エンジニアサイドで、ディレクション部分もカバー
まずUIUXについて基本をおさらい
UIとは
UIはユーザーインターフェイス（User Interface）の略です。
Interfaceとは「接点、接触面」という意味で、UIはユーザーと製品・サービスの接触面を指すので、「ユーザーの目に触れる部分使用する部分」はすべてUIとみなすことができます。
ホームページの場合、パソコンやスマートフォンに表示されるデザイン、フォントなど、製品であれば製品そのものや外観など、ユーザーの視覚に触れる全ての情報が「UI」と呼ばれます。
UXとは
UXはユーザーエクスペリエンス（User Experience）の略です。Experienceとは「体験、経験」を意味し、UXとは「ユーザーが製品・サービスを通じて得られる体験」を指します。
参考：UIとは？UXとは？違いを理解しよう！｜ferret [フェレット]
私なりに考える理想の「UIUX設計」とは、
上記踏まえて、
ユーザーが、ストレスフリーにそのサービスの価値(体験)を得られるUIを設計すること。
そして、それによってサービスを人にも薦めたくなるような満足感(体験)をユーザーが得れるようにすること
UIUX改善リニューアル設計を具体的に描く前の準備
- リニューアル(サイト)の目的の確認
- ビジョン・サービスのコンセプトなど方向性の確認
- ターゲットユーザー・ペルソナの確認
- ユーザーヒアリング
- 現サイトのダメ出し
- 参考にしたいサイト候補の収集
- 現サイトの機能洗い出し
- 現サイトの機能の優先度確認
- カスタマージャニーフレームワークにそった現状と理想を整理
- 今回の目的を叶えるために重要となる機能/要素の確認
- ★ユーザーアクション洗い出し/分類/優先順位付け
- ★ユーザーシナリオまとめ
デザイナーさんにUI設計をお願いするための準備
下記のスライドで紹介されているものをもとに、少しカスタマイズしてやってみました。
上記であげている、★の部分になります。
UIUX設計参考スライド： UXのためのUIデザイン
＜紹介されていたUIUX設計ステップメモ＞
- 1. ユーザーアクションを挙げる
-
2. ２つに分ける
分類1. 一次的アクション（mandatory） ユーザーがUXを達成する上で、必ず行うこと。
分類2. 二次的（副次的）アクション（optional）
※補足：
分類１の達成に不可避だが、二次的なもの（e.g. アカウントを作る。）
サポートしなくてもユーザーはUXを達成できるが、
サポートすることでよりよい UXが提供できるもの。
上記に分けられないものは捨てる
- 3. 優先順位をつける
ユーザーが期待するアクション(何をしたいか？)
ユーザーがよく行うアクション (何を行うか？)
- 4. 描く
＜上記を参考にUIUX設計ステップを進めてみる＞
-
1. ユーザーアクションを挙げる
-
2. 分ける
→カスタマージャーニー※1を先に整理していたので、分類を２つではなく、
カスタマージャーニーの横軸で振り分けてまとめました
※1：
カスタマージャーニーとは、簡単にいうと顧客がサービスゴールに至るまでのプロセス
カスタマージャーニーについて参考： 顧客をより具体的にイメージできる「カスタマージャーニー」とは？｜ferret [フェレット]
-
3. 優先順位をつける
-
4-1. ユーザーシナリオ※2を数パターン整理する
→UIを描く前に、
デザイナーさんと３まで共有をして、
もっと具体的に描くには、ユーザーシナリオを数パターン整理しておくことが必要と
アドバイスを頂いてユーザーシナリオを整理することにしました。
※2：
ユーザーシナリオ整理の仕方参考：
ユーザーシナリオから考える、ユーザー視点に立ったWebデザインの作り方- Catcher in the tech
- 4-2. UIを描く
まずは、手書きレベルのラフ案を書いて protなどをつかって検証
そこからよければ、モックアップで検証して、作りこんでいく
WebサイトUI改善参考本
具体的なUIに落とし込んでいいくのは、まだこれからですが、
デザイナーさんに出して頂いたものに対して、意見交換ができるように
今のうちに出来ることとして、UIUX系の本を数冊読みかじってみてよかったなと思った本がありました。
タイトルは、きつめですが^^;
学術的なUXについてまとめられている本とは別に、プラスαの事例本としてよかったです。
内容は、具体的に、左ページが良くない例/右側が良い例という構成でとても見やすいく、有り難かったです。
一言
今までは、ワイヤーフレームをディレクターサイドで作ったものを渡して
それをデザイナーさんにだいたいそれどおりに
作って頂くことが多かったのですが、
今回はできたら、サイトを多く見られているデザイナーさん主体で
UI設計〜デザインをサポートできないかなと思って試行錯誤中です。
リニューアルの機会を最大限に活かして、良くなったと言えるよう努めていきたいと思います。