【ダメなUI ✖ 良いUI】イライラするデザインを改善してみた！｜Labo｜株式会社トライム

Webデザイン上にリッチなアニメーションが実装されていたとしても、ユーザーが少しでも不快に感じてしまう部分があると、デザイン全体へ悪い印象を持ってしまいます。
快適さを与えるはずのアニメーションが逆効果になってしまうのです。
この記事では、ダメなUI✕良いUIというテーマで、イライラするWebデザインの改善案を提案します！

カルーセルを多用する

ダメなUI

まずはよく見るカルーセルの問題からです。
このようなカルーセルは最近でもよく見かけますが、ユーザーにとっては気になった箇所しか見られない傾向にあるため、重要な項目では不向きに感じます。
指のスワイプも縦・横を多く使い分ける分、ストレスを感じてしまうでしょう。

良いUI

カルーセル自体が悪いというわけではなく、多用してしまうとストレスを感じてしまうため、重要ではない項目や、ページの長さを抑えるために適度に利用するといいでしょう。

リンク先が同じ場所になっている

ダメなUI

バナーは違うのに「もっと見る」ボタンから同じ場所に飛ばされてしまっています。こういった違和感にユーザーはストレスを感じてしまうでしょう。

良いUI

バナーや画像が違うものに関しては別の飛び先を用意しましょう。

ナビゲーション -サクサク動作させる-

ダメなUI

続いてはハンバーガーナビゲーションのUIを改善します。
このナビゲーションは動きこそ印象的ですが、非常にゆっくりと動作するために使用している側はストレスを感じてしまうでしょう。

良いUI

動きはそのままに全体的な挙動を素早くしました。
同じ動きでもスピードの調整を行うだけで、印象がガラリと変わる事がわかります。
このような、ユーザーの移動や選択にかかわるUIはサクサク動作させる、ということは重要なポイントのひとつです。

アコーディオン -イメージ通りの挙動にする-

ダメなUI

続いてアコーディオンのUIを確認してみましょう。
ナビゲーションと同じように全体的な動作が遅いという点と、アコーディオンが開いて閉じる際の動作がやや不自然に見える点が気になります。

良いUI

全体的な速度を素早くし、選択していないメニューが下方向にスライドするように調整しました。
このようにアニメーションをなるべく違和感のない、イメージ通りの挙動にすることで、ユーザーがストレスを感じる機会を減らすことができます。

ローディング -読み込み状況を伝達する-

ダメなUI

次はページ切り替え時のローディングアニメーション部分のUIです。
アニメーションが実装されている事は素晴らしいのですが、これだけではユーザーは現在行われている読み込みがいつ終わるのかがわかりません。

良いUI

もともとあったアニメーションに加えて、インジケーターを実装しました。
小さな違いではありますが、読み込み状況の進捗がわかるようになり、心理的に落ち着いて見ることができます。

ポップアップ -ユーザーの邪魔をしない-

ダメなUI

上記のような形のポップアップは、様々なサイトでよく見るUIです。
しかし、利用するユーザーとしては画面全体を覆われてしまうことで、閲覧を邪魔されたと感じてしまう、ダメなUIといえます。また、このデザイン上ではポップアップを削除する✖ボタンの表示もないため、ユーザーが扱いづらい不親切なデザインといえるでしょう。

良いUI

ポップアップの表示位置を画面下部へと移動しました。
表示領域を狭めてあり、✖ボタンで削除が可能になったため、不要と感じたユーザーは削除しやすい形になりました。
また、ページ下部にあることでボタンが押しやすくなっており、色も目立つ緑に変更してあるため、ポップアップの情報が必要なユーザーにとっては利用しやすくなっています。

まとめ

ここまで、実際のデザインと改善案の組み合わせを説明してきました。
行った対応はそれぞれ下記の通りです。

• サクサク動作させる
• イメージ通りの挙動にする
• 読み込み状況を伝達する
• ユーザーの邪魔をしない

サイトのブランディングイメージなどの構成にもよりますが、 これらの改善点は本記事で説明した箇所以外でも重要になることが多いポイントです。
WebサイトのUIを良くするために、ぜひ意識してサイト改善に取り組みましょう！