業務システムを使用していて「使いづらい」「ストレスが溜まる」と感じたことはありませんか？こうした問題は、UIデザインが良くないことにより引き起こされている可能性があります。
また、UIデザインは、エンドユーザーの定着率にも関係します。ここではこれらを解決するために、UIデザインについて解説していきます。
UIデザインとは？
UIデザインとは、文字通りUser Interfaceをデザインするという意味です。Userは製品を利用するユーザーを指しており、Interfaceには接触面、接点といった意味合いがあります。このことから、UIは製品とユーザーを繋げる接点を指します。
たとえば、Excelを開くと、中央に枠線とマス目があって上部にメニューが表示されています。また、Webサイトを開くと最初に目に入るのはバナーや本文、メニューなどです。
こうした視覚に訴えかける情報や、データをやりとりするための機能をUIと呼びます。そして、こうした情報を設計する作業がUIデザインです。
UIデザインの概要
ユーザーは、製品を利用するときにUIを見て操作します。そのため、UIデザインは「使いやすさ」「わかりやすさ」「楽しさ」「便利さ」などと直結しています。
たとえば、前述したExcelのUIでは中央に表計算のための枠線が配置されており、最上部にカテゴライズされたメニュー、その下部にメニューの下層にある機能が表示されています。ユーザーは、フォントや文字のサイズなどを上部にある機能をクリックするだけで簡単に変更できるように配置してあります。
さらに機能のロゴは何を意味するのかがわかりやすくなっており、マウスを置けば機能の名称がポップアップします。こうした機能によりユーザーは使い方を調べなくても、何となく基本的な操作だけはわかるようになっています。これが「使いやすさ」「わかりやすさ」を考えた、UIデザインです。
UIデザインを考える上では、ユーザーに配慮して設計することが重要です。
UIデザインの重要性
前述したExcelのUIデザインが悪かった場合、ユーザーは「フォントを変更する場所がわからない」「使用方法がわからない」といった印象を持つ可能性があります。そうなると他の競合製品に移行する可能性を生み出します。
そのため、UIデザインは、業務アプリケーション、Webサイト、ゲームなど幅広いジャンルで意識されています。ユーザーと製品の最初の接点はUIです。UIを見たときに「使いやすそう」「かっこいい・かわいい・綺麗」「わかりやすい」といった反応が得られれば、製品を再度利用してくれる確率が高まります。
また、業務においても使いやすさは重要です。業務アプリケーションのUIデザインが優れていれば、従業員の作業効率の向上やストレス軽減につながります。このように優れたUIデザインを導入することで、ユーザーは製品を快適に使えて、販売者はユーザーに愛用される製品を提供できるわけです。
UXデザインとの違い
UIと似た言葉にUXがあります。UXはUser Experienceの略称で、直訳するとユーザー経験となり、転じて製品を通したユーザーの体験を指します。たとえば、ユーザーがある商品を欲しくてECサイトにアクセスした場合、大抵は検索した商品だけでなく関連した商品が表示されます。
こうしたおすすめ商品の表示は「関連した商品が他にもある」「もっと安い商品がある」といったように新しい発見をユーザーに促します。このような製品を通した体験をUXと呼ぶわけです。
このとき、表示されている商品の並び方や画像の配置などはUIが担当する部分となるため、UIはUXと密接に関わっています。しかし、以下のようにUIが視覚を主として訴えかけるのに対して、UXは体験を主軸としているため意味合いが異なります。
UIの例
- ボタン配置
- レイアウト
- 遷移の導線
UX例
- 読み込み速度が早い
- おすすめ機能などにより新しい知見が得られる
- 製品独自の機能
UIデザイン設計時に押さえるべきポイント
UIデザインの設計では、「グループ化」「配置」「コントラスト」「パターン化」の四つのポイントがあります。それぞれを意識しないとUIの統一性が失われてしまい、UIデザインが悪化してしまうので注意が必要です。
最初のポイントとなるグループ化は、UIの中で関連があるものをグループ化してまとめるという手法です。たとえば、文章作成ソフトのメニュー欄では「フォント」「文字サイズ」「位置」「色」といった文字に関する情報がグループ化しています。
このように関係性の高いものを集約してルールに沿って配置することで、わかりやすいUIデザインの作成が可能です。さらに重要な情報は、コントラストを付けてメリハリを持たせ、より大事な情報が目につくようにします。
また、使いやすいUIにするために、同じ要素を持ったものは繰り返して使用します。Webサイトでは、Topページのカラム（メニューと本文の配置）がどのページでも採用されています。遷移した先が別のレイアウトになっていると混乱してしまうため、全体で統一しているわけです。
良いUIデザインを作成するコツ
優良なUIデザインを作成して、ユーザーにとって利用しやすい製品を考えましょう。ここではそのコツを3点ご紹介します。
ユーザーに考えさせない
UIデザインの設計では、ユーザーが考えるという動作をなるべく行わないように作成します。製品を使用する上で「考える」「調べる」といった動作は不必要であり、離脱の原因となるからです。
たとえば、以下のような問題点がある場合、ユーザーが考えたり・調べたりする可能性があります。
- 探している情報・機能が見つからない
- 言葉・ロゴの意味が直感的にわからない
- クリックできるかどうかがわからない
- クリックしたあとの動作がわからない
製品を利用していて、「使い方がわからない」「機能が見つからない」といった問題はよく起こります。こうした問題は、ボタンの文言・ロゴの意味がよくわからないとも連動しており、ボタンを押した後の動作がわからないと、ユーザーはクリックしなくなります。
また、ボタンを配置しても「マウスを乗せても動作が変わらない」「メリハリがなくて埋もれている」状態では、クリックができるかどうかも認識されません。まずはこうした問題点を払拭して、直感的に使用しやすいUIを目指します。
求められているUIを理解する
業務アプリケーションでは、それぞれ目的があります。一般的なアプリケーションで言えば、Excelは表計算、Wordは文書作成、Power Pointはプレゼンテーションといった具合です。
それぞれの主軸となる機能は、Topメニューなどのわかりやすいところに置いておくことが必須です。また業務システムは、そのほとんどが多くの機能を備え付けています。そのため、「機能の階層構造」を意識して作成しなければいけません。機能の階層構造は、システムの機能をグループ分けした際に発生する構造です。
機能が50や100と複数あるシステムでは、トップページに全てのメニューを表示するわけにはいきません。それぞれの機能をカテゴリ分けして、カテゴリ名をクリックすることで任意の機能が探せるようにします。
ここで問題となるのが、階層構造の深さです。たとえば、100も機能があるシステムなのに、メニューが「機能」「ヘルプ」の2つだけだった場合はどうなるでしょうか。必然的に機能メニューをクリックすると100の機能が表示されるようになりますが、このような場合は目的の機能が探しづらくなります。
一方、100の機能に対して50のメニューを作成して、それぞれのボタンをクリックした場合はどうでしょうか。この場合は、メニューを押すとふたつの機能が表示されますが、メニューが多すぎるのでどこに何があるのかがわかりづらくなります。
前者は深い階層構造、後者はフラットな階層構造と言い、UIを考える上では機能や遷移の数から適切な階層構造を考えなくてはいけません。もし階層が複雑になるのであれば、低層部分に他の階層へアクセスする手段を考える必要もあります。
ターゲットやペルソナを設計する
ユーザーの求めているUIを理解することは容易ではありません。そこでペルソナを作成して、ユーザーがどのような行動をとるのかを詳細に予測します。
ペルソナとは、実際には存在しない仮想のユーザーを作成することを言います。仮想のユーザーを設定して考えることで、ユーザー視点で物事を考えることが可能です。
ペルソナの設定では、以下のように詳細な設定をして人物像を作り込む必要があります。
- 性別
- 年齢
- 正確
- 職業
- 収入
- 家族構成
- 趣味
この他にも、「勤務態度」「業績」「スキル」など、対象となる製品にあわせて人物像を考えます。このとき個人の主観が入ってしまうと、第三者としての評価ができなくなるので注意しましょう。
まとめ
UIデザインはユーザーと製品を繋ぐ接点であり、適切に設計されていないと使いにくくわかりにくい製品となってしまいます。UIデザインを意識して製品を作成することで、ヘビーユーザーを生み出す製品となります。
また、自社で作成した業務システムは使いにくい場合は、大手の製品にシステムをシフトするのもひとつの手です。たとえば、「Microsoft Dynamics 365」では、ERP、CRMに関するソリューションを提供しています。
プロの手で作成されたUIにより、使いやすく利便性のよいシステムとなっており、さまざまな業種にフィットします。従業員の業務効率向上やストレス軽減にも役立てることが可能です。
