プロのUIデザイナーに学ぶ！UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.12

デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。
プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。

第12弾は、フォームやアクセシビリティに関するデザインのテクニックです。

UI & UX Micro-Tips: Volume Twelve.
by Marc Andrew

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• はじめに
• 1. ラジオを使用する場合、ドロップダウンを使用する場合
• 2. デフォルトのシャドウから卒業しましょう
• 3. ダークにデザインする時はホワイトも和らげる
• 4. 最高の画像で、プロダクトを正しく紹介する
• 5. フォームのエラーは色だけに頼らない
• 6. 入力例でフォームのUXを向上させる

はじめに

次のプロジェクトのために効率的で美しいUIを作成するとき、デザインをすばやく改善するためにわずかな調整で済むことがあります。

UIのデザインにちょっとした一手間を加えるだけで、クライアント、ユーザー、そしてあなた自身が本当に満足できるものを作ることができるかもしれません。

第12弾となる今回のテーマは、フォームやアクセシビリティです。前回までの小技は、以前の記事をご覧ください。

• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.1
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.2
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.3
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.4
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.5
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.6
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.7
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.8
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.9
• 2021年、最も注目されたUIデザインのテクニックのまとめ
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.10
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.11

1. ラジオを使用する場合、ドロップダウンを使用する場合

複数の項目がある場合、ラジオボタンを使用するか、ドロップダウンを使用するか、迷うことはありませんか？ 商品のリストでどのような入力方法を選択するのが最適なのか迷うことがあります。

ラジオボタンとドロップダウン、どちらがよいと思いますか？

Eコマースで使用する時はスクリーン占有率が高く、ユーザーの情報過多を避けるため、選択肢が4つ以下の場合はラジオボタン、それ以上（5つ以上）の場合はドロップダウンを使用するのが一般的です。

5つ以上の場合はドロップダウンを使用するのが一般的

2. デフォルトのシャドウから卒業しましょう

色のついたキャンバスで要素を扱うときは、デフォルトのブラックのドロップシャドウを避けて、可能であればもう少し現実的なシャドウにします。

現実世界では、色のついた背景の上に要素が配置されている場合、その要素によって投影されるシャドウには背景の色がにじんでいます。

そのため、偽物っぽいシャドウは避け、背景の色を少し混ぜて、より説得力のあるものにします。

左: デフォルトのシャドウ、右: 現実的なシャドウ

3. ダークにデザインする時はホワイトも和らげる

ダークテーマをデザインする場合、多くのユーザーの使いやすさに影響を与える可能性があるため、ピュアブラックは使用しないでください。できる限り、ブラックを和らげるようにしましょう。

そして、ダークなデザインにホワイトの要素を加える場合も、同様です。

ホワイトがピュアホワイトだと、ダークな要素に対して違和感があり、視覚的な印象が悪くなります。ホワイトも和らげて、コントラストを少し下げて、ユーザーの目に優しいものを提供しましょう。

上: コントラストが高すぎる、下: ホワイトを和らげると目に優しい

4. 最高の画像で、プロダクトを正しく紹介する

優れたタイポグラフィと素晴らしい画像は、優れたプロダクトをプレゼンテーションする基礎であり、常に最大限の愛情を注ぐべきものです。

最高のテキストコンテンツを用意し、非の打ちどころのないフォントを選択しても、そこに並べられたプロダクト画像が最悪だと、あっという間につまらないものに見えてしまいます。

あなたが見つけることができる最高の写真を使用して、プロダクトを完璧にプレゼンテーションしましょう。

右: 見つけることができる最高の写真を使用する

5. フォームのエラーは色だけに頼らない

フォームのアクセシビリティで、ユーザーに異なる状態を伝えるのに、色だけに頼らないでください。

たとえば、エラー状態であることを色だけで伝えると、色覚異常のある人はエラーを見逃してしまうかもしれません。それでは困ります。

アクセシビリティの観点から、アイコンとエラーメッセージを組み合わせて表示し、多くのユーザーに問題を伝えられるよう心がけてください。

上: エラーを色だけで伝える、下: アイコンとエラーメッセージを組み合わせて伝える

6. 入力例でフォームのUXを向上させる

フォームの入力欄にプレースホルダーテキストを使用すると、フォームのコンバージョンが増加し、ユーザーエクスペリエンスが向上することが証明されています。正しい方法で使用した場合です。

それをさらによくすることができます。入力例です！

単に「メールアドレスを入力してください」のようなプレースホルダーテキストを使用するのではなく、「hello@marcandrew.me」のような実際の入力例を表示することで、ユーザーエクスペリエンスを向上させ、プレースホルダーを本来の目的に沿って使用することができます。

上: メールアドレスを入力してください、下: 実際の入力例を表示

デザインにちょっとした調整を加えるだけで、あなた自身とユーザーの両方にとってより良い結果が得られるということを少しでも理解いただけたらと思います。