見出し画像

【お悩み回答まとめ】ホバーアニメーションはUI?UX? ほか3件

こんにちは!UXデザイン会社ajikeが提供するUX改善サポート&UIUXデザイナー育成サービスのDods(@Dods_ajikeInc)です。

DodsのXアカウントでは、デザインに関するお悩みの匿名投稿や質問への回答を行っています!今回の記事では、過去に回答した内容をまとめてご紹介したいと思います👀


ホバーアニメーションはUI?UX?

インタラクションデザインはUIとUXの両方を考慮したデザインの一部で、2つのデザインの領域と密接に関連しています。

インタラクションデザインとは

インタラクションデザインとは、ユーザーとサービスとの間で生じる相互作用を設計し、サービスをより効率的でスムーズに、そして楽しく使用できるようにするものです。

画面上でのユーザーの情報理解や行動(ボタンクリックやスクロールなど)から、それらの結果(画面変化やフィードバックなど)までを明確にし、ユーザーの体験にどのように影響するかを綿密に考慮します。


UI/UXデザインとインタラクションデザイン

ホバーしたときのアニメーションのような動きはインタラクションデザインの一部です。ユーザーが行ったアクション(この場合はホバー)に対するシステムの反応になります。

UIデザインの観点
ボタン、リンク、スライダーなどのインターフェイス要素がどのように動作して見えるか
UXデザインの観点
ユーザーがサービスとどのように相互作用するか
その結果ユーザーがどのような体験を得るか


インタラクションデザインの観点

インタラクションデザインは以下のような観点から検討しましょう。これらの観点は「ユーザーとサービスの間の相互作用が効率的かつ直感的であるか」を判断するためのものです。

これらの基準を満たすことで、サービスはより直感的に使いやすくなり、エラーの発生率の低下やユーザーの目標達成における効率性の向上につながります。

・明瞭さ: ユーザーは何をすべきか、次に何が起こるのかを理解できるか
・予測可能性:ユーザーがアクションの結果を予測できる設計になっているか
・フィードバック: ユーザーのアクションに対しての反応が適切か
・効率性:ユーザーが目的を達成するために必要なステップは最小限になっているか
・許容性:ユーザーが誤ったアクションを行った時に簡単に修正できるか
・アクセシビリティ: 様々なユーザーが利用可能なアクセシビリティが考慮されているか



UXデザインの骨格と構造はUIではどこが違う?

情報設計(IA)とワイヤーフレーム作成は多くの場合同時に進行しますが、一般的には「構造」を設計する情報設計が先行し、それに続いて「骨格」を設計するワイヤーフレーム作成が行われます。設計の各段階で情報の整理と配置がより具体的になり、最終的にユーザーにとって使いやすいインターフェースの設計が可能になります。

「構造」と「骨格」のアウトプット

「構造」と「骨格」は、UXデザインの5段階モデルにおける中間段階であり、どちらもUI設計に大きな影響があります。

  • 構造
    情報設計(IA)が中心的な役割を果たします。ユーザーがアプリケーションやウェブサイトをわかりやすく利用できるよう、プロダクト内での情報の整理・分類の方法を決定します。
    構造でのUIデザインのアウトプット:フローチャートやユーザーフロー など

  • 骨格
    「骨格」の段階では、具体的なUIのレイアウトを作成します。画面上での特定の情報の配置場所や、各ボタンと機能の位置を決定する段階です。
    骨格でのUIデザインのアウトプット:ワイヤーフレーム など



デザイン業務の分担のコツは?

デザイン業務を分担して行うときは「レギュレーション」「コミュニケーション」「クリエイティブマネジメント」の3つの観点を意識しましょう!

レギュレーション

ユーザー体験やユーザビリティを担保するため、統一感と一貫性のある表現方法のルール化を意識しましょう。デザインの前提情報とともに、デザインコンセプトやキーワードなどを整理し、基本的なデザイン要素については早い段階で必ずルール化します。また、他のデザイナーとルールの共有・更新・管理について認識を合わせましょう。
ルールは常に更新されるもの(完璧ではない)という前提をチーム内で持ちつつ、Figmaなどのワークスペースやコミュニケーションツールで連動・連携した仕組みを作ることを意識することが大切です。


コミュニケーション

デザインルールを作るだけでは、その背景や意図が伝わらず、逆にルールに縛られたデザインになってしまう場合があります。デザイナー同士でのデザイン確認や双方向のフィードバック、進捗確認などは、短時間でも対面で、あるいはテキストベースでも毎日行うことが理想です。


クリエイティブマネジメント

メインデザイナーの役割としては、プロダクトのデザイン品質を担保するための品質マネジメントの軸を持つことを意識しましょう。デザイン品質の軸には「組織として大事にすべき品質」「プロジェクトとしての品質」「ユーザー体験としての品質」「デザインルールの軸」など、さまざまな軸が存在します。
デザインに対するフィードバックを行う際には、どの軸でのフィードバックなのか、何を優先的に改善すべきなのかを自身の中で言語化・明確化した上で、チーム内のクリエイティブをマネジメントすることが大切です。



ステークホルダーが複数いる場合ペルソナはどうする?

ステークホルダーが複数いる場合、それぞれのステークホルダーを代表するユーザーグループのペルソナを作成しましょう。

同じサービスやプロダクトでも、異なる背景やニーズを持つユーザーが存在する場合があります。それぞれの視点を捉えたペルソナを作成することで、サービスやプロダクトを多様なユーザーニーズに対応させることができます。



お悩み投稿お待ちしてます!

デザインに関するお悩みの匿名投稿・質問はこちらからも受付中!UIUXデザインや改善のプロジェクトの進め方までなんでもお気軽にご相談ください🤝

アドバイスや回答を直接専門家に直接聞いてみたい!という方は無料相談へもぜひ🕊

「こんなことでも相談できる?」などご不安に感じることがありましたら、お問い合わせフォームからもご連絡いただけますのでどうぞご利用ください📨