UI/UXを考えてみる

これまで、salesforce標準を中心にやってきた方や、
企業向けシステムを中心にやってきている方は、
これまであまり携わることがなかったり、あまり興味がなかったかもしれない「UI/UX」のお話をしたいと思います。

今後は、salesforce上のシステム構築でも Lightning Experience が中心になってくる。

ということは、デザインの機能が重要になってくるかも！？
そんなわけで、自分自身の復習という意味も込めて取り上げてみました。

UI/UXの基本は一言でいうと
　

誰に何を伝えるのか

ということだと自分では理解しています。

UI/UXというと、心理学に基づいた・・・とか難しい話もあるのですが、
そこまで難しそうに捉えずに、どう表現したらエンドユーザが困らないか／悩まないか。
と、そのくらい簡単に考えればまずはよいかと思います。

今回は、最近ツラいと感じたデザインの話を例にお話していきます。

WEBページでも現実世界の案内等でも、とてもツラいと思うことの一つに、
「 書いてある内容と実際が違う 」というものがあります。
「え？さっき見た話と違う」と思われたら、即離脱してしまうことでしょう。

では、WEBシステムで最近見た例を3つ。

1. 「ユーザ一覧」というボタンClickで、「顧客一覧」ページが開く。  

2. 登録フォームで「登録」ボタンをClickすると、さらなる項目入力フォームが開く。

3. なにが起こるのかはっきりわからない「アイコンだけ示されたボタン」。

まあ、世の中こういうWEBページがたくさんあるようです。

上記の例では、 それぞれこんな対応を考えます。

1. 呼び元と呼ばれる先の表記を統一すればOK。
2. 利用者のActionを促す表記と、その結果とをきちんと合わせればOK。
3. アイコンを見直したり、メッセージを置く等で、ボタンの意味がわかるようにすればOK。

たったこれだけでも、不安はなくなります。
言われてみれば当たり前のことと思われるかもしれませんが、意外に見落としがあるものです。

そのコンテンツや操作部品に、使う人がどう反応するか考えてみてください。
ビジネスシステムの場合は、利用者は違和感持ちながら強制的に使うことになってしまいますので。

「押したらどうなるかわからない　」ボタンやLINKは押しません。

「操作する際に提示されたメッセージ」と異なる動きをした場合、戸惑います。

次は、現実世界のツラい例

これは、実際に見た方も多いのではないでしょうか。
コンビニのコーヒーメーカーにこれでもか！ と貼られた説明の言葉。

「温かい」「冷たい」「大きい」「小さい」・・・・

もともとのコーヒーメーカーのデザインではお客様が迷うケースが多く、
お店の側でなんとかしようとした結果です。

これは、コーヒーメーカーのデザインの問題です。
見た目のかっこよさを優先したのか、海外でもそのまま使えることを想定したのかわかりませんが、
結果的には、残念な使われ方になってしまった例です。

こういうケースに出会ったときチャンスです。
自分ならどうするかを考え、UI/UXの練習に使ってしまいましょう。

私の場合は、こんなふうに考えました。

　まず最初に＜HOT、ICE＞と＜R、L＞の配置を変更しようと思います。
　上下に分類している　＜HOT＞と　＜ICE＞　を、左右に変更します。
　次に、カップの大きさを分類している＜R＞と＜L＞は、「量」を表すボタンなので、
　上下に配置するほうがわかりやすいかと思います。

　あとは、可能なら、＜R、L＞の表記変えたいところです。
　意味的には、「R = レギュラー／L = ラージ 」ですが、
　例えばこれを「レギュラーコーヒー」と認識してしまうと、
「焙煎されたコーヒー豆100％のコーヒー」を意味してしまいます。
　サイズの話と混ざると、本当にわけがわからなくなります。

　日本語にできればよいですが、出来ないことを想定して、アイコンとあわせます。

　最後に、視覚的にコーヒー購入のSTEPが理解できるように考えます。

　　１. レジでカップを買う（もしくは購入方法を見直し）
　　２. 購入者がここにカップを置く
　　３. 商品を選択する
　　４. コーヒー抽出
　　５. 完了

ざっくりした例ですが、このように「どこで迷う可能性があるか」を考えながら組み立てていきます。　　

再び、WEBページへ戻ります。
企業サイトのTOPページでよく見るパターンが
大量の画像が乗ったカルーセルと、大量バナーと、ニュースと、お知らせという組み合わせでしょうか。

大量のバナー、それClickされてますか？  

大量の画像が乗ったカルーセル。最後まで見てる人なんていませんよ。  

気になるのがFAQ。  
本当に「よくある質問」なのだとしたら、きちんとコンテンツ作ったほうがよいのでは？  

もはや、バナーには「初めて訪れた人への訴求力」は無いのではないかと個人的には思っています。
むしろ、頻繁に訪れる人向けのショートカットとして使ったほうがよいのでは？　と。

カルーセルは、５枚程度におさめておくことをお勧めします。この数字は、人の短期記憶と関係します。
気になる方は、「マジカルナンバー７」をググってみてください。

FAQは、 「通常のコンテンツとするには特殊だが、それでも多くの人が出会う問題」を
解決するためのコンテンツであると、私は理解しています。
あくまでも、コンテンツが主で、FAQで補うイメージです。

次に、企業サイトへアクセスしてくる人について考えてみます。

企業サイトは、TOPページと各製品やサービスのランディングページの組み合わせが比較的多いパターンだと思います。

では、
TOPページに来る人ってどんな人でしょう？
検索してランディングページに直接来る人って、どんな人でしょう？

このあたりを踏まえて、考えてみたいと思います。

たとえば、こんな人達がページアクセスしてきます。

• ざっくり会社情報がほしい人。
• 投資先を探している人。
• システム開発の依頼先を探している人。
• 就職先を探している人。
• 商品の購入を考えている人。

などなど

そして、このページにアクセスする人の求める情報の深さはどうでしょうか。

「なにを知りたいのか」

「どこまで知りたいのか」

「その時点でどこまで知っているのか」

このような視点で考えてみます。
ここまで考えるようになると、ページやコンテンツの構成を変えてみたくなっているのではないでしょうか。

求める情報の深さに応じて、そのWEBページでどれだけ頑張る（あれこれ試みる）か。が変わります。

就職先を探しているなら、全部真剣によむでしょう。

特定の商品の情報がほしいなら、そこへの入り口を探します。

このWEBサイトに何度も訪れていて、使い方を知っている人は、 目立たないLINKまで知っていて、最速で情報にたどり着くのかもしれません。

アクセスしてきた人全員を満足させたいのか、ターゲットを絞るのか、それはサイトオーナーの判断ですが導線については作り手側の考えどころです。
これについては、正解／不正解では判断できません。
時代とともに要求は変化していくものでもあります。

salesforce標準画面を用いたシステム構築でも、javascriptで動的にHTML生成するシステムでも、
利用者が迷わない使いやすさ／わかりやすさを求めることの重要性は変わらないと思います。

このblogの内容がどうこういうよりも、
UI/UXに興味を持ち、考えることを楽しんでいただければ幸いです。