イオンスマートテクノロジーバックエンド開発 Div 会員基盤チームの金子です。
この記事は、AEON Advent Calendar 2024の23日目です。
普段はバックエンドのお仕事をしていますが、UI関連が大好きなのでUIについてお話しします。

はじめに

システムを作るとき、つい「かっこいいデザイン」を模倣したくなること、ありますよね。
でも、いざ作ってみると見た目は良くても、実際には使いづらい・・・そんな経験はありませんか？
実は、優れたデザインには見た目の美しさだけでなく、人間が直感的に使いやすくなるような科学的な工夫が詰まっています。
本記事では、人間中心設計の重要な概念を取り入れ、システムデザインを「驚くほど快適」に変える考え方をご紹介します。（長いので今日は少しだけ・・・！）

人間中心設計とは

人間中心設計（Human-Centered Design）とは、デザインを行う際に「人間のニーズ、行動、使いやすさ」を中心に据えるアプローチです。
この考え方は、ドナルド・ノーマン氏の名著：誰のためのデザイン？で詳しく解説されています。ノーマン氏は、日常生活で使う製品やシステムのデザインにおいて、見た目だけでなく「使いやすさ」を最優先に考えるべきだと提唱しています。

初めてこの本に出合ったとき、世の中のデザインにはこんなにも深い根拠があったのか・・・と驚かされました。
絵が苦手な私でも、この本を読んでからデザインに対する興味がぐっと高まり、デザインが「科学」であることを実感しました！

ボタンだらけの操縦席でも安全に飛行機が運航できるのも人間中心設計を追求した結果だったりします。

人間中心設計のポイント

ユーザーの視点で考える
デザインする側の思い込みを捨て、ユーザーがどのように操作するかを想定
直感的なデザイン
見ただけで「どう使うか」が分かることを重視
試行錯誤を取り入れる
プロトタイプを作成し、ユーザーにテストしてもらいフィードバックを得る

1.や2.を空で考えることは難しいので・・・考え方や技法が存在します。
巨人の肩に乗りましょう。

デザインについての様々な考え方・技法

人間中心設計の考え方をシステムUIに取り入れるには、具体的な技法を理解することが重要です。
代表して2つの概念を取り上げ、それがどのようにシステムデザインに影響するか解説します。

アフォーダンス（Affordance）とシグニファイア（Signifier）

アフォーダンスとは、物の形状や特徴が、自然とその使い方を示す性質のことです。

シグニファイアは、ユーザーに操作方法を伝える視覚的なヒントや手がかりです。これは、アフォーダンスを補強し、より直感的なデザインを実現するために重要です。

身近なドアの例だと下記の通りになります。

このドアは取っ手があるから引ける。
（取っ手というシグニファイアにより、引くことがアフォードされた）

このドアは取っ手がないから押すことができる。
（プレートというシグニファイアにより、押すことがアフォードされた）

Webに例えると下記の通りになります。

右のボタンは立体というシグニファイアにより、押すことがアフォードされます。

この理論の説明を聞いたときに「ん・・・まてよ、なんで立体だからって押せるになるんや・・・」と私はなりました。
そう、我々は一般的にその形が何を示しているかを知っているから設計者の意図通りシグニファイアを解釈できます。

これを経験知とよび、ユーザーが過去に似たようなシチュエーションで得た経験をもとに、シグニファイアを解釈します。

経験知がない人にもシグニファイアを解釈してもらうために文字などで補足をしている場合が多くあり、デパートのドアとかでは「PUSH」、「PULL」なんてよく見かけますよね！

Webのボタン等のコンポーネントデザインはすでに完成されているものが多くありますが、以外に見落としがちなのが配色になると思います。
例えば、赤のボタンって、危なかったり、確定したりのイメージがあるから気軽には押せない、連打できない気持ちになりますよね・・・これまさに経験知です。
infoや説明分など、気軽に操作していただきたいボタンには青色や無色などの系統を使うことで閲覧率を上げることができるかもしれません。

今後記事にしたい内容

ここでは紹介しきれませんが下記のような考え方がデザインに役立ちます。

フィードバック
- ボタン操作: フォーム送信ボタンを押した後、ローディングアイコンを表示し、「送信中です」というメッセージを出す
- 結果: 操作が成功しているか、処理中であるかが明確になり、ユーザーは安心する
制約
- フォーム入力: 日付フィールドでカレンダーウィジェットを表示し、範囲外の日付は選択不可にする
- 結果: ユーザーが無効な日付を入力するミスを防止
自然なマッピング
- ダッシュボードの設計: グラフや統計データのフィルターメニューをグラフのすぐ隣に配置し、どのフィルターがどのデータに影響するかを直感的に示す
- 結果: ユーザーはどの操作がどの部分に対応するかをすぐに理解できる
スリップとミステイク
- スリップを防ぐ: 「削除」操作を実行する際に、確認ダイアログを表示し、「本当に削除しますか？」と尋ねる
- ミステイクを防ぐ: 商品購入画面で「合計金額」や「注文内容の確認」を目立つ位置に表示して、誤った商品を注文するミスを減らす
  結果: ユーザーの操作ミスを最小限に抑える
ビジュアル・ヒント
- リンクやボタン: 押せるリンクやボタンに視覚的な差別化（色やアイコン）を加える
  例: 「次へ」ボタンを明るい色にし、視覚的に目立たせる
- 結果: ユーザーがどの部分を操作可能かすぐに理解できる

おわりに

デザインは時代の移り変わりで進化します。

ボタン至上主義の時代から、スマホの登場によりその利便性に合わせるため、タッチパネルでも操作しやすいUIが開発されました。
触覚によるフィードバックが少なくなり、ボタンよりタッチパネルのほうが誤操作を招きやすい状況の中、さらに眼鏡型デバイスなどの空中ディスプレイが登場します。
空中を手で操作することとなるため、触覚フィードバックが取れない中でも、操作しやすいデザインを検討・対応してく必要があります。

技術・デバイスの進化とともにデザインも進化する。
我々エンジニアから新たなデザインのデファクトスタンダードを定義することができるかもしれません。

日常でいいな！と思ったデザインはぜひシステムの中にも組み込んで試してみたいですね。

イオングループで一緒に働きませんか？

イオングループでは、エンジニアを積極採用中です。少しでもご興味をもった方は、キャリア登録やカジュアル面談登録などもしていただけると嬉しいです。
皆さまとお話できるのを楽しみにしています！