UIデザインでやってはいけないこと7選【海外記事メモ】

2022年5月30日 00:48

こちらの海外記事のメモになります。

UIデザインにおいて考慮するポイントがまとめらていたので、そちらを英語力よわよわの筆者が英語学習も兼ねてポイントをまとめてみようと思います。

基礎的な内容ですが、改めて自分も意識しようと思わされる内容でした。

１．機械的な言葉を使う

左図のような機械的な言葉ではなく、人間的な言葉を使うことでUXが向上します。

在庫２→残り２個のみ
カート→カートに入れる

左図のようにジグザグな配置は視線でコンテンツを追うのに苦労してしまう一方で、右のように上下一方の視線の方向性であれば視線の負担が軽減されます。

テキストのみの羅列は複雑な印象をユーザーに与えてしまいます。

テキストの他にアイコンやアニメーションなど、それらに関連する要素を組み合わせることでユーザーの認知が向上します。

左図のような長く区切りのない文章はユーザーに負担をかけることになります。

ユーザーの負担を軽くするため文章の適当な部分で区切り、短い言葉でタイトルを入れるようにしましょう。

プロセスバーはユーザーがフローのどこに位置しているか、あとどれくらいのフローがあるのかを可視化します。

オンラインショッピングなどいくつか特定のフローが存在するサービスにおいてはこのフォーマットがよく用いられます。

無効やエラーがある場合、ユーザーへはわかり易い言葉で明確に何が誤っているかを示す必要があります。

左の図はエラーの原因が具体的に示されていない上、エラーとなっている場所もわかりません。右の図のように、エラーとなっている原因を明確にし、どこがエラーとなっているかがわかるような表示が望ましいです。

CTAとは「コールトゥアクション」の略で、サイト閲覧者が実際に購入や問い合せを行うためのボタンなどのことを指します。

CTAの外観は他のボタンよりも際立ち、正確にアクションが起こせるのに十分な大きさで分かりやすい場所に配置する必要があります。

ブログの本文とあまり関係ない内容な上半分愚痴になりますが、会社のイントラネットってこういう基礎的な部分が抜け落ちていてめちゃくちゃ使いづらかったりしないでしょうか。

お客様に見せるものじゃないしデザインの専門家に入ってもらうほどコストをかける費用対効果がないと見られて、社内のシステム部門が要件だけ詰め込んだめちゃくちゃ使いづらいWebから重要な情報を探さなくてはならない状況に置かれている会社員の方って多いと思います。もちろん私もその一人です。

この会社のイントラネット、会社にもよるでしょうが日々の社内の情報を得たり、出張費や福利厚生の申請をしたり社内評価の資料を提出したりなど、社会人生活の中で利用する場面がかなり多いものです。

しかしこれらが使いづらいがゆえに相当な無駄な工数が発生している会社って本当に多いのではないでしょうか。

会社のイントラのデザインにこそ投資すべきじゃないかとずっと考えています。結構これってビジネスになったりしないのでしょうか。

_________________________________________________________
＠やました
Twitter : https://twitter.com/yamashita_3
Portfolio:https://www.saito-t-design.com/
__________________________________________________________

サポートいただいたお金は今後の発信活動に関わるものに活用させていただきます。