店頭端末・セルフレジのインクルーシブデザインガイドライン

【連載第2回】 インクルーシブな店頭端末・セルフレジに求められるUI・UXデザインとは？13のデザインガイドライン

近年、小売店や飲食店、公共施設など、さまざまな場所でセルフレジや券売機、受付端末といった店頭端末の導入が進んでいます。人手不足への対応や業務効率化を背景に、店頭端末は今後さらに広がっていくと考えられます。
一方で、店頭端末はすべての人にとって使いやすいものとは限りません。高齢者や障害のある人、デジタル操作に不慣れな人、日本語に不慣れな人など、多様なユーザーにとって、操作の分かりにくさや身体的な使いづらさが利用障壁になることがあります。

そこでCULUMUでは、店頭端末・セルフレジにおけるインクルーシブな設計のあり方を探るため、既存端末のアクセシビリティに関するリサーチを行いました。
本記事では、その調査をもとに、店頭端末・セルフレジに求められるインクルーシブデザインの考え方と、UI改善ガイドラインを紹介します。

ガイドライン作成におけるリサーチ概要

CULUMUでは、店頭端末・セルフレジにおけるインクルーシブなUI・UX設計のあり方を探るため、実際の店舗・施設を対象にリサーチを行いました。
調査では、大型スーパーマーケットや商業施設を中心に、セルフレジや発券機、受付端末などの利用状況を観察し、操作導線やUI構成、アクセシビリティの観点から分析を行っています。

また、本ガイドラインは、セルフレジだけでなく、飲食店注文端末、発券機、タクシー精算端末、ホテル・旅館の客室タブレットなど、さまざまな店頭端末への応用を想定しています。
本記事では、こうしたリサーチをもとに、誰もが迷わず、安心して利用できる店頭端末・セルフレジのUI改善ガイドラインを紹介します。

インクルーシブなセルフレジ・店頭端末をデザインするためのポイント

セルフレジや店頭端末では、レジを見つけるところから、商品を置く、支払い方法を選ぶ、決済を完了するまで、さまざまな行動や判断が発生します。
その中で、高齢者や障害のある人、デジタル操作に不慣れな人など、多様なユーザーによって困難を感じるポイントは異なります。
そのため、インクルーシブなセルフレジ・店頭端末を設計するためには、単に画面UIを改善するだけでなく、利用前後を含めた体験全体を設計する視点が重要になります。

セルフレジのアクセシビリティ向上・インクルーシブな設計は、単純なUI改善のみでは完全ではありません。実際のリードユーザーの方それぞれの状況を考慮し、包括的な解決方法が求められます。そこで、セルフレジを利用する流れを「環境要因UX改善」「画面のUI改善」の2つの観点に分け、セルフレジのインクルーシブデザインについてまとめます。本記事では、画面のUIガイドライン策定と具体的な改善案を提示します。

UI改善ガイドライン

カラーコントラストの最適化

色同士のコントラストが低いと文字が見えにくくなり、情報伝達力が下がります。特に高齢者など視力の衰えのある方にとっては、文字が読み取れず操作上のミスやストレスとなるため、アクセシビリティ向上のためにはコントラスト比に注意が必要です。

文字色と背景色のコントラスト比を高くすることで、文字の判別が容易となり、ストレスなく操作できるUIが実現できます。国際的なウェブコンテンツアクセシビリティのガイドライン(WCAG 2.1)でもコントラスト比4.5:1以上が推奨されています。

文字サイズの調整

文字サイズが小さいと、内容を読み取ることが困難になります。視力の弱い方だけでなく、急いでいる際に、小さな文字は認識しづらく、誤操作やストレスの原因となります。最小限の文字サイズは12ポイント以上が推奨されています。
大きな文字サイズを使用することで、内容を読み取りやすくなります。可能な限り大きい文字サイズを使うことがアクセシビリティの観点からは望ましいです。特に重要な内容は最小14ポイント以上の文字サイズを推奨します。

アイコンとテキストを併用する

テキストのみの情報表示は、画面内の文字が多くなるほど、情報のまとまりが分かりづらくなります。画面内の主要なボタン、エラー時のアクションボタンなど目立たせたいエレメンツや商法重要度に応じてアイコン・イラストの併用が望ましいです。
アイコンとテキストを組み合わせることで、情報の意味が明確になり内容が把握しやすくなります。また、情報の重要度・理解しやすさに応じて、アイコンのみで情報を表示するなど、情報量とまとまりを意識した多面的な情報の見せ方が重要になります。

適切の操作エリアをとる

操作ボタンやリンクなどのタップ・クリックするエリアが小さ過ぎると、正確な操作が困難になります。特に高齢者は手元の精密な制御が難しくなるため、小さなエリアは押し間違える可能性が高くなります。エリアをある程度大きく取ることで、ストレスなく操作できるようになります。
操作エリアをある程度大きく確保することで、操作が容易になります。大きめのボタンやリンクは手元の制御がしやすく、押し間違えることが少なくなります。手元で細かな操作が難しくなった利用者や手が塞がった状態でも、ストレスのない操作を実現できます。

情報を補助するイラスト

支払い方法の選択などで、クレジットカードや電子マネーなどを抽象的なイメージイラストやシンボルマークで表現すると、支払い方法の識別が困難になります。実際のカード会社ロゴやアプリのアイコンを使用することが望ましいです。
実際のクレジットカード会社のロゴや、支払いアプリのアイコンを使用することで、支払い方法の選択がしやすくなります。利用者は直感的に支払い方法を識別できるため、ストレスなく操作できるでしょう。

表示する情報の取捨選択

商品確認時にクーポンやポイントカードの登録を促すバナー等の不要な情報を表示すると、商品内容の確認が困難になります。商品情報以外の情報により、分かりにくくなり、操作ミスの原因となりかねません。
商品確認時は、商品名や価格といった必要最小限の商品情報のみを表示することが望ましいです。不要な情報を排除することで、商品内容をスムーズに確認でき、誤操作が防げます。

レイアウトの導線

ボタンや商品情報が画面内で明確にセクション分けされず、操作の流れが分かりづらいレイアウトでは、ユーザーが次の操作を迷ってしまうことがあります。情報設計が利用者の視点に立っておらず、操作がストレスになるでしょう。
操作の流れに沿って画面をセクション分けしたり、重要なボタンを目立たせるなど、利用者視点で分かりやすいレイアウトを設計することが大切です。ユーザーの視線の動きを考慮した情報設計はストレスなく操作できるUI/UXの実現につながります。

イラストによる操作説明の補助

テキストのみの操作説明では、ユーザーが具体的な操作イメージを掴みづらくなります。抽象的な文言のみの説明では不十分で、操作手順が分からないまま進み、エラーを引き起こす可能性があります。
操作手順をイラストやアニメーションで分かりやすく視覚的に示すことで、ユーザーは具体的な操作をイメージしやすくなります。視覚情報を活用した説明は操作を直感的に理解できるため、エラーを防ぐことができます。

会計フローの可視化

決済操作の際に、操作手順のステップ数や進捗が表示されないと、ユーザーは全体の流れが掴みづらくなります。どこまで操作したのか分からないため、操作ミスの原因となりえます。
決済操作の各ステップの数と現在の進捗ステップを表示することで、ユーザーは全体の流れがつかみやすくなります。ステップ数の見通しが立つことで、ストレスなく操作を完了できます。

1画面1アクション

1画面で複数の操作を要求すると、ユーザーは次のアクションを迷ってしまうことがあります。また、操作順が分からないとストレスが生じます。操作ごとに画面を分ける必要があります。
1画面で1つの操作だけを要求するようUIを設計することで、ユーザーは次のアクションを迷うことなくスムーズに操作できます。1画面1アクションの分割は、ストレスなく操作を完了できるため重要です。

状況をわかりやすく説明をする

エラー発生時に、エラー内容のみを表示して次の操作を提示しないと、ユーザーはどう対応して良いか分からなくなります。エラー発生時の対応は分かりやすく表示する必要があります。
エラー発生時、エラー内容に加えて現在の状況と次に取るべきアクションを明示することで、ユーザーはスムーズに対応できます。エラー時の分かりやすい対応表示は重要です。

音声/サウンドの併用

操作手順の説明を画面表示のみで提供すると、視覚障害者や視力が低下した高齢者にとって操作方法が分かりづらくなります。音声ガイダンスを併用する必要があります。
操作手順の説明だけでなく、アクション完了時や現在の状況を音声でも伝えることで、弱視者でもスムーズに操作できるようになります。音声ガイダンスの併用は重要です。

言語対応

日本語のみで情報提供や操作ガイドを行うと、外国人旅行者や在住外国人にとって利用が困難になります。言語面の障壁から操作方法が分からず、トラブルの原因となる可能性があります。訪日外国人旅行者数の増加も踏まえ、多言語対応は必要です。
日本語に加え、英語や中国語など主要な言語でも操作ガイドやエラー表示を用意することで、外国人利用者もストレスなく利用できるようになります。

まとめ

本記事では、店頭端末・セルフレジにおけるインクルーシブなUI改善ガイドラインについて紹介しました。
セルフレジや店頭端末は、今後さらに社会の中で普及していくと考えられます。一方で、利用者の年齢や身体特性、デジタルリテラシー、利用状況によって、操作時の困難や不安は大きく異なります。
そのため、単に操作を効率化するだけではなく、誰もが迷わず、安心して利用できる体験を設計することが重要になります。