UXとは画面遷移。Web屋さんはいったん、その理解でOK！

UX (User Experience) について、一言でピンとくる説明できているのを見かけないので考えてみました。Webデザイナー、Webディレクター、Webエンジニア向けの一言説明です。

UXとは画面遷移。対象となる画面の1つ前、1つ後まで想定するのが大事。

Web制作会社など普段「画面」で会話をしている人は、まずは画面を基点にイメージしたほうがよさそうだと考えました。「体験」「経験」と説明されてもピンとこない場合は、いったん「UXとは画面遷移」と覚えることで50%くらいの理解にはなると思います。

Web屋さんがUXについてできることは、まずは「ワイヤフレームの作り方を変える」こと

例えばクライアントから「コンバージョン率を上げたいのでお問い合わせフォームのUXを改善してほしい」という依頼があった場合のことを考えましょう。
このとき、入力フォームのUIやボタンを並べ替えたり、目に付きやすいように色や形を変えたりして、「お問い合わせ画面 (フォーム)」のユーザー体験を最適化することだけしか考えていないのであれば、その人はまだUXを理解できてはいません。

ユーザーはいきなり「お問い合わせ画面 (フォーム)」にたどり着くわけではなく、Googleで検索したりトップページにあるボタンをクリックしたりするわけです。つまり、お問い合わせフォームのUX改善のためには「ユーザーがどのようにお問い合わせフォームにたどり着き、入力して、送信し、どのようなメール返信を受けるのか」という一連の流れ、ユーザーフローを考える必要があります。

以上を踏まえるとワイヤフレームの作り方にも変化が生じるはずです。その具体例が以下です。

UX視点の具体例: お問い合わせフォーム

通常:
お問い合わせ画面のUX改善_20190410.pdf
入力画面→確認画面→完了画面

UX的視点を追加:
お問い合わせフローの改善_20190410.pdf (*1)
Google 検索の結果 (*2)→トップページ→入力画面→確認画面 (*3)→完了画面→受信したメール (*4)

(*1) ファイル名・プロジェクト名
まずプロジェクトや資料の名前を「〇〇画面の改善」にしているのであれば、別の言葉を使ったほうがいいかもしれません。
というのは、「〇〇画面の改善」という名前をつけてしまうことで、例えば各ページの下部にフォームを設置したり、外部の便利なサービスを使ったり、電話や実店舗でのアナログの対応したり、といった選択肢を除外して考えてしまうからです。
クライアントを含めたプロジェクトメンバー全員に対して、「画面の中」に固執して考えてしまわないように、「〇〇フローの改善」など画面にとらわれないファイル名にすることをおすすめします。

(*2) 画面の「1つ前」
ワイヤフレームにGoogle 検索画面を含めるのは、ユーザーが「1つ前」に何をしているのかの想定です。もしかしたらFacebook広告や、テレビCM、LINEで友達からリンクが送られてきたのかもしれませんが、改善すべきフローや体験の「1つ前」を想定することでユーザーの体感に一歩近づきます。

(*3) 本当に必要?
メールフォームのワイヤフレームを作る際、何も考えずに「確認画面」を用意してしまっていませんか？
確認画面は、ネットリテラシーが低いユーザーに「送信した」という誤解を与えてしまうなど、シチュエーションによってはユーザーにとってメリットのない手間を強要してしまうリスクがあります。
一方で金銭の支払いが発生する場合や、契約など、入力内容の間違いによってユーザーに不利益が生じる場合には、確認画面を用意したほうが親切ではないかと考えられます。
ターゲットやシチュエーションを考えて「本当に必要？」と、自問自答してみてください。

(*4) 画面の「1つ後」
メールフォームを作る際、肝心のメール自体が軽視されがちだと私は感じています。公開直前に慌てて文面を用意して表記ゆれが生じてしまったり、管理側にはメールが送信されるもののユーザー側には送信されない、などの仕様面でクライアントとトラブルが生じたり、といった経験はないでしょうか？
UX以前に、無用なトラブルを回避するためにも、ワイヤフレームの中に実際に送信するメールの内容を組み込むことを強くおすすめします。
そしてUXの観点では「社用PCのThunderbirdで見る」のか「私用スマホのGmailアプリで見る」のか、そのくらいは想定をしておいて、メールソフトやアプリのUIもワイヤフレーム内に再現するということを、一度はやってみてください。これにより、例えばユーザーがiPhone XSでメールを見たときに、文章や飾り線「----」などが変な位置で改行してしまっている、というような残念な見た目を回避できますし、ファーストビューで伝えたいことが伝わっているか、ということも検証可能です。更に踏み込むと、メールアプリの通知の文章が、ちゃんと伝わる内容になっているかというところまで想定できます。
お問い合わせ画面の「1つ後」にユーザーが何を見るのか、重要な点だと考えるので、ぜひ意識してみてください。

まとめ: 「UXとは画面遷移」でとりあえず50%の理解

もしWeb屋さんのあなたが「UXを考慮したデザイン」「UXの改善」を求められて何をしたらいいかわからなかったのであれば、まずは画面遷移が重要と認識し、ワイヤフレームの作り方を変えてみましょう。

具体的には、いつものワイヤフレームを作ったあとに、その「1つ前」と「1つ後」に何があるか答えられるようにしておき、具体的に、画面として追加してみること。またファイル名やプロジェクト名を「〇〇画面の改善」ではなく「〇〇フローの改善」としてみることも意外に有効です。

今回はお問い合わせフォームを例に挙げましたが、Webまわりだとログイン、ユーザー登録、記事投稿、決済、管理画面、このあたりのキーワードが出てきたらUX設計を実践できるチャンス！ です。なので次にこれらの画面・機能を作る必要がでてきたら意識してみてください。

ではまた！