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

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

第15弾は、ユーザビリティ・フォーム・ミニマルにデザインする弊害に関するデザインのテクニックです。

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

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

• はじめに
• 1. ページ内リンクを効果的に用意する
• 2. ボタンのラベルは一貫性を保つ
• 3. 長いフォームは冗長な作業を最小限に抑える
• 4. 長いフォームは常にラベルを上部に配置する
• 5. 不要なテキストでフォームのUIを乱雑にしない
• 6. 特定のUI要素でミニマムな外観を避ける

はじめに

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

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

第15弾となる今回のテーマは、ユーザビリティ・フォーム・ミニマルです。前回までの小技は、以前の記事をご覧ください。

• 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
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.12
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.13
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.14

1. ページ内リンクを効果的に用意する

ページ内リンクは、これまでUXコミュニティの一部で嫌われてきたものです。しかし、うまく実装すれば、長いページにたくさんのコンテンツがある場合のユーザーエクスペリエンスを大きく向上させることができます。

たとえば、非常に長いページに多くのセクションがあり、それぞれに多くのコンテンツがあるとします。目次があれば、ユーザーが興味のあるコンテンツを見つけるために無駄にスクロールすることなく、必要なセクションに素早く移動することができます。

ページ内リンクは、ユーザーが興味あるコンテンツに素早くアクセスできるようになり、コンテンツの発見力とエンゲージメントを大幅に向上させます。

ページ内リンクを効果的に用意する

2. ボタンのラベルは一貫性を保つ

前提としてボタンのラベルは、タップしたときにどうなるのかが分かる説明的なラベルをつけるようにしてください。次に、時々軽視されがちですが、ボタンのラベルの文言は一貫性を保ち、明確にします。

同じアクションを伴うボタンに一貫性がなく、時には曖昧なラベルを付けているのを見かけることがあります（私自身もそうでした）。「Join Now（すぐに参加する）」「Let's do this（これをしよう）」は同じアクションで異なるラベルです、こういうのを避けるようにしてください。

ボタンの文言は全体で一貫性を保つように実装しましょう。ユーザーの認知的労力を軽減し、推測させることなく目標を達成できるようにします。

左: 文言が統一されていないボタン、右: 文言が統一されたボタン

3. 長いフォームは冗長な作業を最小限に抑える

特にEコマースの場合、ユーザーの配送先や請求先を入力するために長いフォームが必要になります。

こういった長いフォームはユーザーにとって合理化する必要があります。たとえば、配送先と請求先の住所はほとんどの場合、同じ内容です。こういった冗長なタスクは最小限にしてください。

そこで、チェックボックスのようなシンプルな操作で、ユーザーが入力したデータを複製できるようにしておくと、ユーザーの時間を大幅に短縮します。

配送先と請求先が同じ場合を想定して、入力を省略できるようにする

4. 長いフォームは常にラベルを上部に配置する

短いフォームではコンテンツが少ないので、おなじみのZパターンに従ってラベルをフィールドの左側に配置してもかまいませんが、長いフォームでは常にラベルを上部に配置するようにしましょう。

長いフォームではより一般的なFパターンを使用することで、ユーザーはより自然な方法でフォームをスキャンし、目的をより早く達成できます。

長いフォームは美観だけを追求するのではなく、ユーザーに最小限の労力でフォームを達成してもらうことが目的です。

左: ラベルを左側に配置、右: ラベルを上部に配置

5. 不要なテキストでフォームのUIを乱雑にしない

わたし達の目標は、ユーザーをA地点からB地点まで最短時間で移動させることです。そのためには、不必要な言葉、テキストを配置しないことが重要です。

フォームでユーザーが取るべき行動は明らかです。フォームにシンプルなタイトルを付けるだけで、それが何のフォームなのか伝わります。

分かりやすいものであれば、不要なテキストは省いてもかまいません。

左: 不要なテキストがある、右: 不要なテキストを削除したフォーム

6. 特定のUI要素でミニマムな外観を避ける

特にダウンロードのインジケーターのようなUI要素は、どんなに魅力的でもスーパーミニマムな外観にするのは賢明であるとは限りません。

こういったインジケーターはできるだけ有益で、インタラクティブなものにしてください。カラーや現在の進行状況を示すバーの数値など、いつでもキャンセルできるボタンを用意し、可能な限り情報量を多くします。

ミニマルは、ユーザーエクスペリエンスを犠牲にしてはいけません。

左: ミニマルすぎるUI要素、右: 必要な情報や機能を備えたUI要素

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