UI設計時に気をつけた方がいい4つのポイント

DMMでデザイナーをやってるksmrです。

ちょっと前まで、自分が担当しているサービスのUIをリデザインする作業をスクラム開発で行っていました。その作業中に意識していたことが4つほどあったので、頭の整理も兼ねてまとめてみたいと思います。 

1. 実装上の都合だけでつくらない

エンジニアと設計周りの話をしていると「Reactは◯◯が苦手だからこういう挙動は難しい」とか「こうした方が値の受け渡しがきれいだからビューもそれに合わせて変更したい」など、こちらが意図した通りにいかない部分がいろいろ出てきます。かといってそこで実装上の都合だけを優先してしまうと、ユーザーにとって使いにくいものがあっという間に出来上がります。

ありがちなパターン
・「こういう条件式だと処理が複雑で・・」 
・「Reactは○○が苦手だから・・」     
・「DBに値がないからそういう情報はちょっと・・」 

でも開発側の事情ってユーザーは知ったこっちゃないものです。なので自分たちのチームの場合は、実装上のコストと利便性の間で上手い落とし所がないか模索し、代替手段があるなら軌道修正を行い、それがない場合は最低限の体験だけは損なわないようにして、より良い改修は次のスプリント以降に回すという判断をしていました。

2. サービスのふるまいを標準マナーにあわせる

ユーザーは自社サービスだけを使っているわけではないので、競合他社や大手サービスの提供するふるまいと変なところでズレていないかどうかもかなり考慮しました。広く認知されたふるまいと違うことを自社サイトで行っていた場合、ユーザーはわざわざ別の行動をしなければならず、とてもストレスを感じます。そうなるとサイトからの離脱などにも繋がってしまうので、差別化やオリジナリティを変に意識しすぎないように気をつけました。

最近だとnoteもリアクションのアイコンをスターからハートに変更するという改善をしてましたね。

サービスが標準マナーに従うことで、ユーザーは直感的に操作できるようになります。学習することが少なくなるので、認知的な負担が軽減されるわけです。結果、ユーザーはスムーズにサービスを使えるようになり、継続率の上昇が期待されます。
スターからハートに変更するのはなぜか?


3. 使いやすさを中級者にあわせる

また、デザインや操作の設計で判断に困った際は、中級者が使いやすいかどうかを判断基準にしました。「使いやすさ」というと初めて訪問するユーザーやリテラシーの低いユーザーに目線を合わせてしまいがちですが、リピーターが多いサイトなら基本的には中級者が操作しやすいかどうかで設計したほうが良いです(その代わり初心者には別途ガイドを用意するとgood)。

そこを無視して初心者に合わせて作ってしまうと、逆に中級者にとっては冗長で使いにくいものになってしまいます。なので迷った際は「中級者だったらどっちが使いやすいだろう?」と考えると、案外答えがすぐに見つかったりします。※ここらへんはインタラクションデザインの古典『About Face 3』に詳しく書いてありますので、興味がある方はぜひ。

4. 認知心理学のナレッジを活用する

それから人間特有の行動や認知パターンなども設計の際の指針として活用しました。「人間は認知プロセス的にこういう情報の並べ方だと読まない」とか「こういう動線だと視線移動が複雑になるから見落とされやすい」とか。ペルソナとかセグメント以前に人間が生物として持っている特性を抑えるのはとても重要だと最近強く感じます。

おわりに

上記のようなことを意識するだけでも、UIはだいぶ使いやすいものになると思います。よかったら参考までに。

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

60

kassy

#デザイン 記事まとめ

デザイン系の記事を収集してまとめるマガジン。ハッシュタグ #デザイン のついた記事などをチェックしています。広告プロモーションがメインのものは、基本的にはNGの方向で運用します。
4つのマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。