プログラマーがやりがちな「ダメなデザイン」10選と対策の例
はじめに
私が過去にやってしまっていたデザインや、他の方が設計されたUIを見て思ったことを簡単にまとめた記事です。
私について
私は主にDiscord関係のシステムを作成・運営している高校生です。
「ゆっくりボイス読み上げbot」という読み上げbotを運営しています。
最近はWebダッシュボードを作成したりしました。
https://tts.siyukatu.com/dashboard/
本題
各項目に提示されている例は「私だったらこういう装飾をする」というものであり、決して「これが正解」と言っているわけではありません。
デザインする人によってデザインは大きく変わるものだと思います。
自分にとって最善の形は自分で発見してください。
レイアウトが整っていない (装飾のない文章)
読むだけならいいですね。
でも、これに何らかの操作UIを付け足すとなればどうでしょうか。
文章の中にこっそり操作のリンクが紛れていたらストレスを感じると思います。
良くない例
改善例
何でも中央揃えにする
短文や短い説明文程度であれば問題ないと思います。
長文を中央揃えにするのはやめておいたほうがいいです。
良くない例
改善例
tableを多用する
そこ、本当にtableを使うべきところですか？
プログラムではdict型を扱っているので、その考え方をデザインに持ってくるとtableを使いたくなると思います。
でも、本当にそれはtableにするべきですか？
デザインするときに「ここは本当にtableでいいのかな」と少し考えるようにしてみてください。
確かにtableでも十分見やすいとは思います。
でも、もっと上を目指せるはず。
良くない例
改善例
余白が無い
これやってしまう人は多いと思います。
特にTailwindCSSあたりを入れているとbodyタグの余白が消え、全て自分で指定する必要が出てくるのでやりがちです。
良くない例
改善例
情報量を増やしすぎてしまう
「これ出す必要ある？」っていう情報を出してしまっているデザインをよく見かけます。
例えばユーザーID等がこれに当てはまります。
同じ画面を見る他の技術者からしたらありがたいかもしれませんが、ほとんどのユーザーにとっては必要ありません。
基本的には非表示にしましょう。
良くない例
改善例
情報に強弱が付いていない・付いているけど理解に繋がらない
文字の大きさや色の強弱で情報に強弱を付けることができます。
一般的に、そこまで強調する必要がない文字を弱く、強調すべき文字を強くします。
強くする場合は、文字を大きくしたり、色を濃くしたり、太字にしたりします。
逆に、弱くする場合は文字を小さくしたり、色を薄くしたりします。
全く同じ大きさだと、見る人は「何を見ればいいのか」が分からず、少しだけ混乱します。
良くない例
改善例
アイコンが無い・あるけど理解に繋がらない
あったほうがいいというだけで必須ではありません。
今開いてるであろうZennにもあります。
良くない例
改善例
文字が見づらい (コントラスト比が足りない)
濃い青の上に濃い黒文字はコントラスト比が足りません。
この配色はものすごく目に悪いですね。
でも、これをやる人はいます。
良くない例
改善例
リンクを識別できない
基本的に、リンクはブラウザ標準のデザインで通常のテキストと差別化されます。
稀にリンクの標準デザインが消されてることがあるんですが、あえて消してるんでしょうか？
良くない例
改善例
「読み込み中」がわからない
これ、かなりやりがちだと思います。
操作した後しばらく画面が切り替わらないとユーザーは不安になります。
仮に開発時点での待ち時間が0.5秒程度だとしても必ず付けてください。
環境や負荷状況によっては10秒以上の待ち時間が発生するかもしれません。
そして、「読み込み中」と表示するだけでは不十分です。
具体的に「今何の操作をしているのか」という情報を付け足すとユーザーは更に安心出来ると思います。
更に、読み込み中はスピナーかスケルトンUIを必ず表示してください。
テキストで「読み込み中」と表示されたら「読み込んでいる」ということは伝わります。
しかし、そこからしばらく画面が一切変化しないとユーザーは飽きてしまいます。
スピナーやスケルトンUIは絶対です。テキストだけではダメです。
「技術的に難しい」みたいな事情がない限り絶対に表示してください。絶対。
実際に操作したほうが分かりやすいと思うので、CodePenを埋め込みました。
良くない例
読み込みに5秒かかる想定です。
改善例
さいごに
私もまだまだ勉強中の初心者なので、他のプログラマーの方々に対して教えられる立場ではありません。
今回私は身につけた知識を一度アウトプットしてみるためにこの記事を書いてみました。
それでも、この記事が他のプログラマーの方々のお役に立てれば幸いです。
日頃から意識して欲しいこと
- 常日頃からどんなアプリやウェブサイトを使ってますか？
- そのアプリは使いやすい・見やすいですか？
- そのアプリはデザインの面でどんな工夫がされてますか？
- そのアプリに使いにくいところはありますか？
- そのアプリの何を改善すれば使いやすくなりますか？
これらを日頃から常に意識してみてください。
これはアプリに限った話ではありません。
あなたの学校・職場やあなたが普段通勤・通学に使っている交通手段の案内表示でもデザインは工夫されているはずです。
私はこれを意識していたら「許容範囲内」のデザインが出来るようになりました。
フィードバックを送ってもらいやすくする
システムを作ったとします。
実際に使うのはどなたですか？
どこかの企業の社員ですか？
それとも、インターネットの不特定多数のユーザーですか？
いずれにせよ、フィードバックは簡単に送れるようにしたほうがいいです。
自分では気がつけないことが結構あると思います。
ユーザーからのフィードバックは大体「ここが使いづらい」という指摘のみで、ほとんどの場合、改善に繋がる「答え」は貰えません。
貰えたとしても、それは本当に「答え」なのでしょうか。
ユーザーに言われた「答え」を何も考えずに反映させるのではなく、自分で考えてみるのも良いのではないでしょうか。
私はユーザーアンケートのフォームを常設し、URLを「すぐに開けるけど邪魔にはならない場所」に配置しています。
それ以外にも、ユーザーに1対1でヒアリングしたり、実際にユーザーとして自分のシステムを使ってみるというのも効果的だと思います。
効果的な勉強法は人によって違うと思いますが、自分に合ってる勉強法は自分で見つけてください。
ここまで読んでいただきありがとうございました！
Discussion