📘️ Book Club：UIUXデザイナーがデザインし忘れがちなコンポーネントのまとめ

UIUXデザイナーは、製品開発チームの非常に重要なポジションです。私たちは、顧客とプログラマーの間の架け橋であり、顧客の洞察を解読し、ビジネス目標と調整し、それを製品の機能、相互作用、およびインターフェースに変換します。

UIUXデザイナーは、顧客要件ファイルの最初のステップから完全なUIまでの製品開発プロセスに関与します。一般的な戦略、または製品の流れやボタンの色などの詳細な作業を引き受けることができます。調査とデザインに加えて、製品を最適化するために、UI/UXデザイナーはデータ分析とテスト作業も行います。

UIUXデザイナーは作業の性質上、プロジェクトの主要な問題の処理に集中しがちです。ユーザー・エクスペリエンス、またビジネスの問題点を明らかにし、解決する方法を見つけ出そうとするからでもあります。そのため、他のサブコンポーネントをデザインするのを忘れることがあります。それらのコンポーネントがなくても製品は正常に機能しますが、ユーザーの観点からは、これらのコンポーネントがないと、エクスペリエンスが大幅に悪化してしまう可能性が生まれます。

私たちはこれらの点を改善し、クライアントと開発チームに可能な限り最も完全なUIバージョンを提供する必要があります。今日は多くのUIUXデザイナーがデザイン・プロセスでデザインをするのを忘れがちなコンポーネントのリストを制作しました。

フォームフィールドのエラーテキストと検証テキスト

フォームをデザインするとき、混乱を避けるために、通常、エラーテキストの約80％をスタイルガイドに追加することができます。

多くのデザイナーはこのエラーテキストと検証テキストをデザインし忘れがちです。フォームフィールド検証のエラーテキストとして「エラー」のような一般的なものをよく目にします。

使用する目的

この検証またはエラーテキストは、ユーザーが実行しようとしているアクションを完了するための正しいパスにユーザーを導くのに役立ちます。

これは欲求不満につながる可能性があり、最も深刻なのは、ユーザーのリターン率が下がってしまう可能性を生み出します。「エラー」というテキストだけではなく、何が欠けているのかをユーザーに知らせるエラーテキストをクリアにしましょう。

ボタンのバリエーション

ボタンのバリエーションを積極的に必要としない限り、スタイルガイドからそれらが省かれている可能性が増えます。ボタンのバリエーションは、プライマリ、セカンダリ、およびターシャリと呼ばれます。

ユーザーの観点からは、これらは単なる「ボタン」または「リンク」である可能性があります。ボタンの3つのスタイル（塗りつぶし、アウトライン、テキストなどの）のボタンの状態が異なります。

ボタンのバリエーションは、ボタンのすべての状態と、サイトに追加できるすべての可能なデザインと場所でボタンの一貫性を保つために重要です。ホバーからアクティブ状態まですべてを計画することで、ボタンが突然青から赤に変わるような奇妙なことが起こらないようにすることができます。これに加えて、コンポーネントのデザインと開発プロセスを同等に保つことが重要です。

ボタン、ヘッダー、フォームフィールドなど、考えられるすべての状態を含む小さなコンポーネントから始めると、大きなコンポーネントでも同じことを行う可能性があります。カード、行、さらにはさまざまなアプリケーションの画像など、すべてスタイルガイドで指定することでメリットが得られます。

オンボーディング

ダウンロードしたアプリを最初に開いたときの主な紹介画面は、オンボーディング画面です。

オンボーディング画面はガイドであり、アプリケーション、その主な機能、およびその使用方法を簡単に紹介することを目的としています。

オンボーディング画面はシンプルなスタイルでデザインし、コンテンツをフィルタリングし、主な機能を最初に紹介する必要があります。静的状態ページのようなオンボーディング画面は、ユーザーに通知して教育するために作成されます。

UXに関しては、オンボーディング画面により、ユーザーがアプリケーションの使用を開始するときの混乱や、アプリケーションの機能を自分で見つけなければならないというフラストレーションからユーザーを救うことができます。

使用する目的

• アプリの取扱説明書
  アプリのUIに精通してもらうために必要です。

• ユーザーを歓迎
  エンゲージメントと定着率を高めるため

また紹介画面のオンボーディングの画面はUXデザイナーは最終の状況に制作するケースが多いようですが、オンボーディングで制作されるデザインは、アプリのショップなどでもよく使用されるように思われます。エンドユーザーが最初に目にし、ダウンロードするか否か決める大切な画面なので、プロセスの中で計画的にデザインを進めるのが良いかと思われます。

スケルトンローダー

スケルトンは、データがロードされるのを待っている間に表示したいコンテンツを置き換える、事前定義されたフレームのセットです。

スケルトンはUXを向上させるのに役立ち、Webページやアプリのデータが多すぎてロードできない場合に特に役立ちます。

スケルトンの目的は、データが完全に読み込まれるまでの時間におけるユーザーの期待を減らすために、コンテンツの読み込みを簡素化するプレビューフレームワークです。要素には、アバター、カード、チャート、リスト、テーブル、テキストコンテンツ、画像などのスケルトンが必要です。

スケルトンについての注意点

• コンテンツがロードされ、ユーザーが操作した後のページのリロードには必要がありません。

• 読み込みに時間がかからない場面では必要ありません。

• スピナーローディングとスケルトンローディングは同時に使用しない。

• デザイン時には、さまざまなレベルのグレーを使用して表現し、アニメーションを読み込んでユーザーに読み込んでいることを知らせる必要があります。

• コンテンツに対応する形状を使用します。各形状は、簡単に識別できるようにコンテンツを表します。たとえば、アバターは円を使用し、長いテキストは長方形を使用します。

表示するデータのない空の状態

表示するデータのない空の状態は、ユーザーがページに入ったが表示するものがない場合の状態です。またこのページから、アクションを提案できます。

たとえば、空のTo Doリストページを使用して、「To Doリストの制作」アクションを追加できます。

空の状態が発生する場面

• 最初の使用時
  パーソナライズされたエクスペリエンスでユーザーのデータがまだ存在しない場面などで必要となってきます。

• 結果、またはデータなしで表示するものがない場合。
  誰かが検索を実行し、クエリが空であるか、表示できるデータがない場合に発生する可能性があります。

スプラッシュ画面

スプラッシュ画面は、ユーザーがアプリやウェブサイトを起動したときに表示される紹介画面です。これは、ブランド・アイデンティティを構築するチャンスであり、アプリがバックグラウンドで読み込まれている間、ユーザーを占有し続けます。

この画面は、画像、グラフィック、ロゴ、またはアニメーションのいずれかで、プログレスバーと組み合わされることもあります。スプラッシュ画面は、デバイスが遅く、インターネットがさらに遅いときに頻繁に使用されていました。

404エラーページ

存在しなくなったページに、ユーザーがアクセスした場合、入力されたURLが正しくない場合、またはリンクが行き止まりにつながる場合など、サイトは404ページに移動します。

使用する目的

ユーザーがエラーページに誘導されると、それは彼らの流れを中断し、それは欲求不満の感情につながります。したがって、エラーページをデザインする必要があります。そうしないと、その時点でユーザーはWebサイトに興味を失うことになります。このような場合のバウンスは、製品のUXが良くないことを明確に示しています。

エラーページは明確で簡潔であり、ユーザーが軌道に戻るのに役立つ直接的な行動をユーザーに提供する必要があります。エラーが発生している理由を誰かに直接伝えることができれば、それはさらに良いことです。

エラーページの例

• https://dribbble.com/404

• https://www.canva.com/404

• https://slack.com/404

• https://www.postman.com/404

• https://www.airbnb.com/404

サイトを離れるユーザーは、UXにとって問題であるだけでなく、SEOにとっても悪い問題です。計画的にこれらのページもデザインしましょう。

インターネット接続の問題

ユーザーのデバイスが常にインターネットに接続されているとは限りません。また、飛行機の中で突然Wi-Fi接続が失われた場合に備えて、インターネットの接続が遅い場合があります。

私たちはUIに接続の問題を通知する画面を表示する必要があります。これは、空の状態やエラーと同様に、ユーザーエクスペリエンスを混乱させる問題です。

ユーザーが接続しているときにのみ使用できる機能がアプリケーションにある場合は、現在の接続ステータスについてユーザーに通知する必要があります。

登録後のケア

ユーザーは、新しくダウンロードしたアプリ、サインアップしたウェブサイト、または新しく購読したニュースチャンネルから通知を受け取っても苛立ちません。

トーストメッセージ

「登録していただきありがとうございます」と言うトーストメッセージは感謝と同時にそのユーザーがサインアップに成功したことを知らせることができます。メールアドレスやその他の詳細が正常に追加されたことを確認するだけでなく、会社の専門的なアプローチを反映した前向きなメッセージを送信します。

ウェルカムメッセージ

誰かがあなたのウェブサイトにうまくサインアップしたら、ウェルカムメールを送って個人的な体験に変換していくことが大切です。クリエイティブで前向きな方法で会社を紹介し、割引、特別オファー、アップデートなど、サインアップのメリットを伝えることができます。

また、プロダクトを販売しているのならば、ユーザーへの感謝の印として、クーポンや割引を提供することをお勧めします。アイデアは、単純な「ありがとう」を超えて、ユーザーとつながることです。

ノーティフィケイション

またノーティフィケイションは、ユーザーが通知を受け取るタイミングを選択できるようにしましょう。仕事中に電話が鳴り止まないアプリのアップデートには苛立ちます。仕事後に受け取れるようにセッティングできたら、ユーザーからのアテンションも増えます。

パスワードのリセットページ

サインアップするとき、人々は急いでパスワードを入力しますが、後で忘れます。 ほとんどの人はどこでも単一のパスワードを使用しているようですが、別のパスワードを使用する人もいるため、パスワードを忘れてしまうケースも多々あります。

別のメールアドレスから再度サインアップしたり、アカウントを完全に放棄したりすることは望ましくありません。システムが不必要に混雑し、登録ユーザーを失う可能性が高くなります。したがって、新しいパスワードを電子メールで送信して、アカウントを取得できるようにすることが重要です。

ハイエンドのバックエンドシステムを強調するだけでなく、両方に役立ちます。

利用規約ページ

多くのユーザーは利用規約を読みません。それでも、これらのページをデザインし、見つけやすい場所に配置することが非常に重要です。 これは、ユーザーがサービスを使用するために従わなければならない一連の規則と規制です。

利用規約ページは、ユーザーとサービスプロバイダーの間の法的拘束力のある契約です。 これは、サービスプロバイダーが収集するデータと、そのデータが使用される場所をユーザーに通知します。

このページでは、Webサイトのコンテンツを要求し、ユーザーがそのコンテンツをどのように使用または共有できるかを判断できます。これは、知的財産条項とも呼ばれます。

このページは、不正なアカウントのブロックなど、ポリシーを明確にするために重要です。 また、エラーが発生した場合の責任を制限します。

アカウント削除

ユーザーにアカウントを削除してほしくないことは当然ですが、アカウントを削除が必要な場合もあります。例えば、ユーザーはメールアドレスを変えて、別のアカウントでサインアップしたり、アカウントを新しく作り直したい場合もあります。

例えば、Tinderではアカウントを簡単に削除できるようになっているので、安心感と便利さが加わります。

ユーザーは閉じ込められるフィーリングが好きではありません。必要に応じてアカウントを削除するオプションを提供することは、安全性と利便性を提供します。

私も色々勉強中なので、皆さまのご意見・ご感想をお聞かせください。
お読み頂きまして、ありがとうございました。

メルボルンを拠点にプロダクトデザイナーとして働いています。 主にデジタル・プロダクトの制作に携わっています。

［参考資料］

6 things UI/UX designers forget to design

Are You Forget to Design this?

My top 5 frequently forgotten design elements

13 Things You Probably Forget to Design for Almost Every Project13 Things You Probably Forget to Design for Almost Every Project - InstantShift