デザインビギナーが「使いやすさ」を深掘りしてみた
こんにちは、りんたです。
デザインビギナーのみなさん、使いやすさの根っこはなにか知ってますか？
もちろんわたしは知らなくてですね。参考デザインをまねて、なんだかよさげなUIをつくれるようになったかな？というところです。しかし、なんだか雲の上を歩いているような不安がありまして…
きちんとポイントをおさえて石橋たたきたいな～と思っていたところ、うれしい知らせが。なんと、デザインコミュニティBONOにかゆいところに手がとどく動画シリーズがあったんです！
今回のnoteでは、使いやすさについて学んだことをまとめてみました。おなじ不安をもつ方のお役に立てたらうれしいです。
ざっくりあらすじ
使いやすさの根底には、ユーザーのメンタルモデルが関係しているようです。メンタルモデルをベースにUIをデザインするコツについて、お話ししています。
使いやすさの根っこ＝人間の特性を知ろう！
じつは、使いやすさの根っこには人間の特性が大きく関わっています。まずはそこから学びましょう。
メンタルモデルを考慮しないUIはストレスがたまる…
人間には、メンタルモデルという自覚のない思いこみや習性があるそうです。すべての物事についてゼロから何かを考えるのではなく、おのおの培ったメンタルモデルスカウターをとおして解釈しているのです。
わたしたちはつねに「これはこうだろう」と予測しているので、想定外のことが起こると強いストレスを感じます。
みなさん、会員登録で延々と入力欄が続くサービスにイライラしませんか？これは、入力項目はこれくらいという予測が外れたストレスから、イライラが発生しているのです。
使いにくさの一因として、メンタルモデルが考慮されていないことが影響していることが分かります。これを逆説的に考えると、メンタルモデルを考慮したら使いやすいサービスがつくれそうですね。
「決断」にも大きなストレスがかかる？！
また、決断疲れにも考慮する必要があります。
わたしたちは、朝ごはんに食べるもの、今日取り組むタスク、お風呂に入れる入浴剤…と、日々しんじられない量の決断をして生きています。
ある推定によれば、些細な事柄から重大な事柄に至るまで、ビジネスパーソンが日々取捨選択している事柄の数はおよそ3万5,000にも及ぶという（参考文書 (英語)）。
しかし、人間が意思決定に使えるエネルギーには限りがあるそうです。そして、エネルギーが切れるとめんどくさいから考えたくないモードになってしまいます。
ということは、決断だらけの自由度が高すぎるサービスは使うのがおっくうになりそうですよね。ある程度レールをしいてあげることが使いやすさにつながりそうです。
学び①：メンタルモデルをUIの3構造におとしこめ！
使いやすさのいち根っことして、メンタルモデルを考慮することが大切だと分かりました。ここからはメンタルモデルをもとに、UIをデザインするポイントを３構造ごとにおさえましょう。
ナビゲーションの場合
ユーザーは、ナビゲーションがいまどこにいてどこに行けるのかおしえてくれるものだと認識しています。よきガイドになるポイントは、以下の４つです。
階層構造をととのえる
ナビゲーションの階層構造
◆ グローバルナビゲーション
◇ ページ内ナビゲーション
・ サブナビゲーション
【グロナビ】コンテンツとアクションのナビゲーションを使い分ける
【グロナビ】粒度をそろえる
【グロナビ】使用頻度をそろえる
アクションの場合
ユーザーは、アクションをなににどう作用するかわかった状態で実行できるものだと認識しています。直感で操作できるUIを目指すために大切なポイントは、以下の３つです。
自然な視線移動を理解する
使い慣れた操作感にする
ネガティブ操作を事前に予測できる
コンテンツの場合
ユーザーは、コンテンツを目的をすべて達成させてくれるものだと認識しています。ユーザーのやりたいことと行動フローをふまえて、いろんなパターンをつくりましょう。
質の高いUIデザインをまねる
質の高いUIデザインってどういうもの？
・世界的に使われているサービス
Youtube、X、Instagram、Pinterest、Shopify…
・デザインシステム
HIG、Material Design…
パーツ単位でバリエーションをつくる
競合サービスをみる
仮説を立てて検討する
学び②：モードでユーザーに道を示せ！
使いやすさのもうひとつの根っことして、決断を減らすことが大切だと分かりました。ユーザーに操作のレールをしくために、モードを活用しましょう。
モードのおさらい
モードがまだよくわからない…という方に向けて、とあるゲームの世界に入って例えてみます。
ゲーム内で特定の土管に入ると、コインをとるだけのボーナスステージにつながります。ボーナスステージにいるあいだは、もとのステージにはなにも影響がありません。
これがモードで、やってほしい操作しかできない状態にすることで、進むべきルートを示すことができます。案内なしでコインをとって右の土管から戻ってこれるのって、すごくないですか？
モードをストレスなく進ませるには…
ただし、モード中にもストレスがかかる恐れがあります。気をつけなければいけないポイントをしっかりおさえましょう。
通常画面とは別の次元でフローが進んでいることがわかる
モード中はルート外の操作ができない
モードの終了＝ゴールを達成した状態である
１モードで達成できることは１つにする
まとめ
人間がもつ特性を知ることで、使いやすさの根っこが見えてきました。今回のポイントを根拠に、石橋をたたきながらUIデザインをつくっていきます。
これからも新しい学びをまとめていきますので、ぜひぜひフォローのほどよろしくお願いします。
元エンジニアのりんたが未経験からUI/UXデザイナーを目指して学んでいく道のりをnoteにまとめています。
デザインコミュニティBONOで学んだことを中心にまとめています。BONOについては以下のリンクからどうぞ。
今回取り組んだ「使いやすいUIの秘密」シリーズとは？
UIデザインをはじめる前に、ベースになる考え方や着眼点を学べるシリーズです。ユーザーメンタルモデルに則したUIデザインをつくるためのポイントについて、実例とワークをとおして理解できます。