縁の下のUIデザイン―少しの工夫で大きな改善!

第2回 エラーと確認―スムーズな手続きを実現するには

この記事を読むのに必要な時間:およそ 2 分

インターネットを通じて商品を購入したり,予約をとったり,登録をしたりする機会はますます増えています。スマートフォンをはじめとするさまざまなデバイスがより身近で手軽に扱えるようになる中,これまでの常識では想像しにくい体験も増えています。

そんな中,内容に合わせてそれらの手続きについてしっかりと考えることもより大切になると考えます。

今回はそのような手続きをスムーズに行うための「確認」のUIUser Interfaceを取り上げます。

効果的にエラーを伝えるには

入力画面を作る場合,入力のしやすさを考えることがUIをデザインするうえで必要不可欠ですが,エラーをどのように伝えるかも,スムーズに手続きを完了させるための大切な要素です。その対応を怠ると,ユーザーが離脱する大きな要因になってしまいます。

自由な振る舞いをさせるためのUI

図1のようにユーザーが何かを入力するような画面で,必要な項目がすべて埋まらない限り機能しないdisableボタン注1の使い方は避けることをお勧めします。

図1 必要条件が成立しないとボタンが押せない例

図1 必要条件が成立しないとボタンが押せない例

もし必要な条件を満たしておらず次の画面にいけない場合でも,図2のようにいつでもボタンは押せる状態にして,ちゃんとエラーメッセージを表示し次の画面にいけない理由を確認できる状態にしてあげてください。

図2 どんな状況でも押せる例

図2 どんな状況でも押せる例

筆者が過去にユーザーテストで出会ったユーザーには,まず登録ボタンを押して,エラー項目を見ながら1つずつエラー項目を潰していくような使い方をしていたユーザーもいました。

ユーザーが自分の思ったとおりに行動できなかったり,押せそうなのに押せないなどあいまいな状態にすると,その不自由さに不安を感じたり,なぜそれができないのかを気が付かないことがあります。もしもdisableボタンを用いるのであれば,それがなぜ押せないのか推測できるようにしてあげましょう。

注1)
クリックしても何も反応しないボタンのことです。

文体や色への気配り

一方で,安易にエラーを表示することでユーザーがびっくりしたり,自分が悪いことをしているかのようにネガティブにとらえてしまうことも考えられます。エラーメッセージの文体もできるだけ機械的ではなく,気持ちを込めた人間らしい文体にしましょう。

エラーメッセージの色は赤を用いることが多くありますが,その表現がショッキングな印象を与えすぎないかという視点で気を配る必要があります。もし赤を用いる場合でも,サービスの体裁と調和するよう色合いに変えてあげることで印象が少し緩和します。

状況に応じた確認手段を用いる

インターネットで物を購入する理由は人によりさまざまです。生活用品を定期的に購入すること,めったにしない高額な商品を購入すること,誰かにプレゼントを贈ること─⁠─同じ購入するという体験でも,ユーザーの気持ちはまったく違います。状況に応じた確認方法を考える必要があります。

もし,今デザインしようとしているものが実社会の体験の置き換えなのであれば,デザインする前に実社会での体験を想像してみましょう。スーパーでティッシュをレジを通して買うことと,販売店に何度も足を運びローンを組み車を買うことは,物を購入するという行為としては同じではありますが,意思決定をするまでの訪問回数やスタッフとの接し方,サービスの内容などが異なります。したがって,デザインもこれらは異なっていることが自然なこともあります。

確認せずに気軽に完了

2016年12月に,日本でも「Amazon Dash Button」が発売されました。あらかじめAmazonショッピングアプリをスマートフォンにインストールして設定をしておけば,ボタンを押すだけで希望の商品が届きます。スマートフォンを立ち上げる必要さえありませんし事前確認もありません。

「間違って押したらどうするの?」と考えることもあるかもしれませんが,高額な商品ではありませんし,ルーチン的に購入するもので賞味期限が短いものでもありません。万が一間違ってボタンを押してしまってもストックしておけばよいですし,すぐならキャンセルもできます。それよりも,面倒な手続きを省いて買いたいものをすぐに買うことができるというユーザーの利便性を優先した事例です。

このようにアプリやサービスにおいても,購入の確認をせずにすぐに購入できる遷移にしたほうがよいものもあると感じます。

著者プロフィール

池田拓司(いけだたくじ)

デザイナー。多摩美術大学を卒業後,ニフティ株式会社,株式会社はてなを経て,2012年にクックパッド株式会社に入社。2013年デザイン部長,2014年ユーザーファースト推進部長・執行役。Sassを使ったUIフレームワークの構築,Webアプリケーションなどサービス全体の設計,ユーザーのほうを向いたデザインやサービス開発の組織づくりにも努める。2017年4月に独立し,Design & Life inc.を設立。インターネットサービスをはじめとするさまざまなデザイン業,およびサービス開発などに取り組んでいる。

Design & Life inc.:http://designandlife.co.jp/

バックナンバー

縁の下のUIデザイン―少しの工夫で大きな改善!

コメント

コメントの記入