UI/UX - ユーザー視点デザイン

#vue #webdev #design #css

Web アプリを作る上で、コードが正しく動くことはもちろん重要です。しかしそれと同じくらい、あるいはそれ以上に大切なことがあります。ユーザーが使いやすいと感じる「見た目」と「操作性」 です。

これが UI/UX (ユーザーインターフェース / ユーザーエクスペリエンス) の考え方です。

Web デザインにおける UI/UX

UI (User Interface): ユーザーが直接操作する「インターフェース」のこと。ボタン、テキストボックス、メニュー、画像などのレイアウトや色、形といった 視覚的な要素 がこれにあたります。
UX (User Experience): ユーザーが 製品やサービスを通じて得る「体験」 のこと。 Web サイトを閲覧する際の心地よさ、スムーズな操作性、目的達成のしやすさなど、 感情的な側面を含めた総合的な体験 を指します。

たとえばオンラインストアの検索機能で、次のような状況だとします。「工夫無し」「工夫あり」のどちらが人気が出そうでしょうか。

項目	工夫無し	工夫あり
検索UI	小さく目立たない検索ボックス、検索ボタンがない	画面上部に大きな検索バー、アイコン付き検索ボタン
入力補助	無し	入力中の検索候補表示、過去の検索履歴表示
検索結果	単純なリスト表示、絞り込み機能無し	商品画像、価格、評価が分かりやすく、多様な絞り込み機能
UX (総合)	目的の商品にたどり着くのに時間がかかり、ストレスを感じる	直感的に操作でき、素早く目的の商品を見つけられる