─ ユーザー視点を重視した画面設計の高度化 ─(塚田一政) ビジネスに貢献するUI/UXのつくり方

20171211

Webサイトやスマートフォンアプリなど、Webサービスを設計するに当たって、つくり手である企業視点ではなく、ユーザー視点で設計するUCD(User Centered Design:ユーザー中心設計)が注目されている。社内向けの業務システムへの活用も含め、ビジネスに貢献するUCDの手法を2つのケースを例に紹介する。


Webデザイン事業部 UI/UXデザイナー 塚田一政

ユーザー中心設計(UCD)とは

現在、日常生活の中には、利用者に情報を提供し、行動や機器の操作などをサポートするデバイスが多く存在する。自動車のダッシュボードや、駅の運行情報板などがその代表例である。利用者には必ずそれらを利用する目的がある。自動車のダッシュボードであれば、目的は安全・快適に自動車を運転することであり、駅の運行情報板であれば、目的地までの電車を見つけて迷わず乗ることである。

UCD とは、このような利用者の目的・ニーズを分析した上で、最適なインターフェースをデザインし、ユーザー視点で検証を繰り返しながら最適なUI(User Interface:ユーザーインターフェース)を作り上げるプロセスである。近年、Webサイトやスマートフォンアプリ、業務システムにおいても、UCDが用いられるようになってきた。

従来の手法では、業務要件とシステム要件を元に、利用者全員が決まった操作を行うことを前提として画面設計が行われてきた。しかし、スマートフォンに代表されるデジタルデバイスの普及、それに伴う利用者の増加や利用されるシーンの多様化により、従来の手法では利用者のニーズを十分に満たすことができなくなってきている。さらに、多くのWebサービスが乱立する現代において、自社サービスを競争優位に導くためには、UX(User eXperience:利用者体験)が重視される。利用者が求める情報へのアクセスの過程においても、良質な体験を提供することが求められるようになってきている。

UX向上のためのUCDの導入手法と、UIの最適化について、事例を交えながら解説する。

UCDの4ステップ

UCDの特徴として「ユーザー視点による仮説・検証」が挙げられる。ユーザー視点で設計し、出来上がったプロトタイプをユーザー視点で検証するものであり、以下の4 ステップで構成される。

①ユーザーモデルの定義

②目的・課題の定義

③画面デザイン設計、プロトタイプ開発

④ユーザー評価

このステップを繰り返し、より多くのユーザーが満足する画面を設計することがUCDの特徴である。各ステップについて解説する。

①ユーザーモデルの定義

サービスのユーザーモデルを定義する。つまり、「どのような人が」「どのような環境で」「何を使って」サービスを利用するかを定義するステップである。ユーザー調査や観察、またブレインストーミングなどの手法によって、想定するユーザーに関する情報を収集・分析する(表1参照)。併せて自社サービスの特徴、競合サービスや市場環境、システム環境なども分析することで、ユーザーや自社サービスをとりまく環境が明確化されていく。

②目的・課題の定義

ユーザーのサービス利用目的、解決したい課題を明確化し、ユーザーの行動、心理状態を具体化していくステップである。それらを行動シナリオとしてまとめ、シナリオに沿った画面設計を行い、①で定義したユーザーニーズに近い形の画面を設計していく。一般消費者向けのサービスでは、ユーザーモデル、目的・課題は多岐にわたるため、多くの行動シナリオが抽出されるが、できるだけ多くの行動シナリオを画面設計に反映させることが重要である。

③画面デザイン設計、プロトタイプ開発

ユーザーモデル、目的・課題、行動シナリオを元に、画面デザイン、プロトタイプを開発するステップである。例えば「仕事を終えた20代女性会社員が、帰宅途中の通勤電車内で、車内の壁に寄りかかって立ったまま、30 分ほどスマートフォンを操作する」といった行動シナリオの中で、どのようなUI が最適なのかを考える。コンセプトを定義し、Webやアプリに必要な要素の配置をワイヤーフレーム開発により検討してUIを設計し、プロトタイプの開発を行う。

ここではユーザーのニーズに沿った設計を行うために、コンセプトを関係者間で共有し、画面設計の方向性・ユーザーが到達すべきゴールを統一することが重要である。コンセプト、方向性、ゴールを共有することにより、開発の手戻りを最小化する効果もある。

④ユーザー評価

プロトタイプをユーザー視点で評価するステップである。評価手法として代表的なものは、専門家による経験や知見を基にしたヒューリスティック調査や、ユーザーモデルに近い複数の第三者がUIの評価をするユーザーテスト、2種類のプロトタイプを用意しどちらが使いやすいか評価するA/Bテストがある。

前工程で定義した目的が達成されたかを基準として評価する他、ユーザーテストの過程で出た画面設計上の問題をフィードバックすることも、本ステップの目的の1つである。

このようにUCD では、仮説により設計したUI に対し、サービスの利用者(もしくは利用者に近い第三者)が繰り返し評価を行い、改善を重ねることで、よりユーザーニーズに沿った画面を設計できる。

UCDはどのように導入すればよいのだろうか。導入方法について、2 つのケースを元に紹介する。1つは不動産検索サイト、もう1つは社内業務画面である。

CASE 1:不動産検索サイトのUCD

UCD の導入方法について、ケーススタディ形式で解説する。ここでは不動産会社の不動産検索スマートフォンサイト(物件購入画面)を取り上げる。

不動産検索サイトを利用したことがある方はイメージできると思うが、検索フローは、検索条件設定→検索結果一覧→物件詳細情報の流れで進む。目的の物件が見つかったら店舗へ問い合わせをする。ここまでが不動産検索サイトに求められるミッションである。

それでは、前章の内容に沿ってUCD の導入手法を見ていこう。

(1)ユーザーモデルの定義

不動産検索サイトは不特定多数の人が利用するため、ユーザーモデルはさまざまである。ユーザーモデルの例として次のようなものがある。

①ユーザー像

・ 自宅用の物件購入を検討している30代夫婦。子供は3 歳児が1人。

・ 物件の種別(マンション、一戸建て、土地など)は決まっていないが、予算は決まっている。

・ 希望居住地域は決まっていないが都心から電車で○○分以内の地域。

②利用環境

・ 自宅で夫婦そろってサイトを閲覧し、さまざまな物件を比較・検討している。

・ 通勤時や外出時の隙間時間は、夫婦それぞれがサイトを閲覧し、物件の情報をお互いに共有している。

③利用デバイス

・ 通勤時の電車内など、移動中や外出先ではスマートフォンを利用してサイトを閲覧している。

・ 自宅ではPC、またはタブレットを使用している。

(2)目標・課題の定義から、行動シナリオの策定まで

不特定多数の人が利用する不動産検索サイトでは、目標・課題も多岐にわたる。例えば上記のユーザーモデルであれば「できるだけ多くの物件を夫婦で一緒に比較・検討するとともに、高額な買い物なので、長期間かけてじっくり検討した上で良い物件を買う」ことが目標であり課題ということになるだろう。次に、この目標・課題に基づいて具体的な行動シナリオを定義していく。

行動シナリオには、例えば次のようなものが考えられる。

①通勤電車内で大まかに物件を検索し、詳細は自宅で夫婦そろって検討する。

②一定の予算内で、複数の物件種別を検討する。

③比較・検討を長期間行う。

このように行動シナリオは、ユーザーの行動を、時間、場所、人物、思考といった軸にさらに分解し、実際のサービス利用シーンを想像できるところまで具体化することが望ましい。

(3)コンセプト定義からプロトタイプ開発まで

ユーザーの行動シナリオから、以下のようなコンセプトが導き出された。

・スマートフォンとPC 間の情報連携による、シーンを選ばない不動産検索。

・多様な切り口で多数の物件検索。

・不動産選びを長期間サポート。

実際にはユーザーのニーズだけでなく、業務要件、競合サービス、市場環境なども考慮する。またUX 向上のためのコンセプト検討も忘れてはならない。

その後、デザイナーが中心となってUI を設計していく。画面内のレイアウトや、導線、配色、フォント、トランジション(画面切り替え演出)などのUI デザインを設計し、ビジュアル面でのUX を向上させる。デザインに加えてユーザビリティ(使いやすさ)も、UX 向上の重要な要素である。

そして、画面設計コンセプトから、図1のようなプロトタイプのUI 案(検索結果一覧画面)が作り出された。

UI のポイントは、以下の通りである。

・一覧から外観や間取りを比較できる。

・タブによる検索条件の切り替え。多様な切り口で多数の物件検索。

・物件情報をブックマークし、スマートフォンとPC で共有。

つまりこの画面のUX は、「外出先でも自宅でも、自分に合った物件情報を気軽に検索できる」ということである。また、画面の実装に当たり、サーバーとの通信の最適化、閲覧デバイスの物理的な制約など、デザイナーだけでは解決しない問題もある。そのため、開発チーム内での連携が必要であることは言うまでもない。

(4)ユーザー評価

設計・開発時に関係者がユーザー視点で画面設計を行っても、それはあくまで仮説である。仮説を検証するには、実際の利用環境にできるだけ近い状況で、ユーザーモデルに近い第三者による検証が必要である。本ケースの場合、通勤電車内での画面利用が行動シナリオの1つであったため、立った状態、かつ片手で画面を操作し、ユーザーが目的を達成できるか、課題解決ができるか、より多くの行動シナリオに最適化された画面であるかの検証を行った。

併せてビジネス視点での検証も行う。不動産検索サイトのKPI(Key PerformanceIndicator:重要業績評価指標)は、物件への資料請求数や問い合わせ数の場合が多いが、KPI達成のために画面設計に不備がないかについても十分に検証しておく必要がある。

CASE 2:社内業務画面のUCD

商品発注システムや顧客管理システムなどに代表される社内業務画面は、ユーザーが社員に限定されており、一度操作方法を習得すれば操作が可能なものが多い。そのため、情報の掲載量、一覧性、正確性さえ確保されていれば問題ないとして、利用者の使いやすさは重視されてこなかった。また一般消費者向けサービスのように、画面デザインの改善が売り上げに劇的に寄与するものでもなく、業務画面の改善を行う重要性はこれまで認識されていなかった。しかし社内向けの業務システム画面においても、UCD導入のメリットは多い。

(1)UCD導入のメリット

社内業務画面へのUCD導入のメリットには、以下の2 点が挙げられる。

①画面操作時間の短縮による生産性向上

②新規利用者に対する教育コストの圧縮

仮に1レコード当たり入力に100秒かかる業務があるとする。これを業務の正確性を担保しつつ、1レコード当たり90秒の入力で済む画面デザインに改良すると、業務全体としては10%の生産性改善に寄与することになる。この10%の生産性向上に、多大な投資は必要ない。画面を設計・開発する際に、UCDを導入し、ユーザーモデル、ユーザーの目標・課題に合わせた画面設計を行うことで、10%という数字は十分に実現可能である。

また新規利用者向けの操作研修においても、操作しやすい画面であれば利用ガイドの配布だけで済む場合が多く、その分の教育コストの圧縮にもつながる。

(2)業務画面設計のポイント

社内業務画面は、利用者、利用シーン、利用目的が比較的限定されているため、UCDによって適切な設計ができれば、その効果は社内に波及しやすい。そこで、業務画面にUCDを導入し、効果を得るためのポイントを挙げる。

まず、業務知識と業務フローの徹底的な理解・共有が必要である。

従来は、顧客、エンジニアから提供された機能要件、表示項目、遷移図などを元にデザイナーが画面設計を行う場合が多く、業務に対する理解が不十分なまま画面内の要素(入力フィールド、ボタン、グラフなど)の設計を行っていた。その結果、実際の業務に沿わない、使いづらい画面が量産されてしまっていた。UCDを導入するに当たり、デザイナーが業務について理解を深めることはもちろん、発注側の担当者、エンジニアも含め、業務に関する議論、情報提供を十分に尽くすべきである。

次にパーツレベルでのUI の最新化、最適化を行う。特にWeb技術を使った業務画面の場合、最新のUIパーツがコンポーネント(部品)として数多く提供されており、業務に合ったUI の導入は容易である。

これらの活用によりUIを最新化することで、正確性を担保したまま、社内の作業効率を改善できる。

(3)事例:横スクロールUIの改善

ここでは業務要件とUCDとの関係を、事例を使って解説する。業務画面で多用される表の横スクロールUIの改善策を例として挙げる。

図2左側のように、表を画面の横幅以上に配置し、横スクロールでその表の見える位置を操作するUI である。スクロールバーの操作で全データを表示できるが、操作性は良くない。またスクロール操作は、業務の処理時間を増加させる原因でもあった。

あらためて業務要件を確認すると、この業務画面には以下の業務要件があった。

・ 各項目はすべて必要な情報である。

・ 項目には優先順があり、一覧の中で重要な項目とそうでない項目がある。

・ 利用者によって項目の優先順が異なる。

これらの要件から改善前のUI は最適でないことが分かる。なぜなら、業務の特性や利用者の行動・思考を考慮せず、ただ情報の一覧性のみが重視されていたからである。図2右側の改善策のように、表内の項目を優先順に、かつ利用者ごとにカスタマイズできる機能を設ければ、横スクロールを使わずとも2段テーブルで十分機能するのである。

真のビジネスゴール達成のために

UCDによる画面設計について解説してきたが、UCDを導入しただけで企業のビジネスゴールが達成されるわけではない。利用者サイドの視点を持ちつつも、企業サイドの視点も忘れず、利用者と企業双方の目的達成、課題解決を実現できるようなサービス、システムを世の中に提供してこそ、初めてビジネスゴールは達成される。

従来のような業務要件、システム要件、画面設計という、ウオーターフォール型の開発プロセスはもはや適さない。ビジネスのプロである企業担当者、画面設計のプロであるデザイナー、システム開発のプロであるエンジニアが、それぞれの専門性の上に議論を展開しつつも、それぞれが企業ビジネス理解、利用者理解を一層深め、三位一体の議論を重ねることが求められている。そして、要件検討時において、業務要件やシステム要件と同等に、UI/UX の要件についても、UCD を用いてしっかりと議論されるべきである。

野村総合研究所(NRI)グループの一員として、Webビジネスシステム開発を行うNRIネットコムは、お客さまのビジネスへの深い理解から始まり、要件定義、画面設計、システム開発、仮説検証の一連の流れをワンストップで提供している。本稿で解説してきたUCDの手法を用い、今後もお客さまのビジネスに貢献するWebビジネスシステムを提供していきたい。

塚田一政

執筆者 塚田一政

WebサイトのUI/UXデザイン、アートディレクションを専門に行っています。
(Webデザイン事業部 UI/UXデザイナー)

本稿は、野村総合研究所発行の「ITソリューションフロンティア」2017年10月号に掲載されました。

お問い合わせ

当社のサービス・製品に関するご相談やご質問、お見積りのご依頼など、こちらからお問い合わせください。