見出し画像

[UIUXデザイナーのインサイト] モバイルUXデザインで避けるべき5つの失敗例

MK Design

こんにちは！今日は私が実務で経験したモバイルUXデザインの主なミスとその解決策について簡単にお話しします。

  1. 小さすぎるタッチターゲット（Tappable area）と不便なナビゲーション

  2. 可読性が低いテキストデザイン

  3. 不必要なオンボーディング過程

  4. アニメーションの過剰使用による速度低下

  5. ダークモードのサポート不足

ミスを作らないのがベスト！あったとしても改善、改善していくこと！

  1. 小さすぎるタッチターゲットと不便なナビゲーション
    私たちはよくモダンでミニマルなデザインを追求して、タッチ領域を小さくしすぎてしまうというミスをしてしまいます。stroke無しの曖昧な大きさのアイコンはユーザーにとって確実にタップされたかどうかでモヤモヤさせる原因にも繋がります。AppleのHuman Interface Guidelinesでは、最低44x44ptのタッチ領域を推奨しています。意外と順守されてないプロダクトも多いかと思います。
     【解決策】
    - ボタンの視覚的なサイズと実際のタッチ領域を分離して設計する。
    　→たとえば、画面上では小さく見えるボタンを配置したい場合でも、実際のタッチ領域はもっと大きくすることで、ユーザーが押しやすくなります。このように、視覚的にはシンプルで洗練されたデザインを保ちながら、操作性を向上させることができます。
    - 頻繁に使用されるナビゲーション要素は、手が届きやすい位置に配置します。
    - タッチフィードバックを明確に提供する。

  2. 可読性が低いテキストデザイン、Accessibility!!!
    鎧洗練されたデザインを追求していると、可読性を犠牲にすることが多く、特に文字サイズが小さすぎたり、背景とのコントラストが不足している場合が多いです。
    【解決策】
    - 本文テキストは最低14pt以上使用する。（注釈を除く）
    - テキストと背景の十分なコントラストを確保(WCAG基準に準拠)
    - 余白と行間を適切に活用
    - FigmaのContrastでの対比AA以上

  3. 余計ななオンボーディングステップ
    新しい機能を説明したがつのはわかる。でも複雑なオンボーディングはむしろユーザーにとって無駄に余計な場合もあります。タップタップで素早く見通したいユーザーはまずたくさんのテキストは読みません！説明が必要な場面で効率よく表示すればいいです。
    【解決策】
    - 必要な情報だけを選別して簡単に提供
    - 段階的な学習ができるように設計
    - スキップオプションの提供

  4. アニメーションの使いすぎによる速度低下
    派手なアニメーションは良い印象を与えることができますが、過度なアニメーションはむしろ使いやすさを損なう可能性があります。
    【解決策】
    - 目的のあるアニメーションのみ使用しよう。
    - アニメーションの持続時間は300ms以内に制限する。→プロトタイプを使ったUTでユーザーの声を聞きましょう。
    - デバイスの性能を考慮した最適化に！

  5. ダークモードのサポート不足
    夜間や暗い環境での目の疲れが軽減されると感じるユーザーが多くなり、トレンドでもあるダークモードは今は選択ではなく必須となりました。 しかし、単純に色を反転させることは良い解決策ではありません。
    【解決策】
    - ダークモード用の別カラーシステムを構築しておく。
    - 画像とアイコンのダークモード対応に！
    - テキストの可読性を維持するための明るさ調整も。

情報設計段階からしっかり定義する必要あり

まとめ
上記の間違いは、私が実際にプロジェクトを進めながら経験して改善した部分です。良いUXはユーザーの不便さを事前に予測して解決することから始まります。このようなミスを避け、より良いユーザーエクスペリエンスを提供するためには、継続的なテストとフィードバックが必要です。

皆さんはどのような経験がありますか？コメントで皆さんのご意見を共有してください！


いいなと思ったら応援しよう！