デザイン

UX思考を学ぶ。UIデザインパターン全28選

UIデザインパターンをユーザーの利用シーンやUI機能別に紹介し、それぞれの問題点と解決策について触れていきます。
読了目安:18分
avator
Misaki Akimoto
2018-11-20

なぜUIデザインパターンを確認するのか、しっかり目的意識を持って確認作業を行っているだろうか。

以下にあげるUIデザインパターンを確認することで得られる4つのポイントを意識していくことで、デザインに役立つ知識が貯まる速度が上がるだろう。

問題の要約

UI上において、ユーザーが抱えている問題は何なのかを一言で表すことができるようになる。

デザイナーとそれ以外との意思疎通の効率が大幅に向上されるだろう。

ソリューション

他の人(あるいはプロダクト)がどのように問題を解決したのかを参照するため。

ナビゲーションに項目を追加したのか、ユーザーが入力できるようにしたのか、などを見ることができる。

意識する点としては、「ユーザーの」どんな問題を解決したのか、という点。

具体例として

クライアント、上司、あるいは投資家などに説明する場合に、具体例として利用することができる。

場合によってはモックアップを作ったほうがいいこともある。

どう使われるべきか

そのデザインパターンはどんなときに使われるべきで、どのような用途においては使われないべきかの判断のため。

慣れているものが使う際のハードルが低いのは事実なので、今のデフォルトが何なのかを把握しておく必要がある。

上記4点に注意しながら、以下のUIデザインパターン28選を確認していってほしい。

(※本記事は https://www.uxpin.com/ からダウンロード可能である uxpin_web_ui_design_patterns_2014.pdf を翻訳し、筆者独自の説明を追加した記事になっています。)

全体的な話

レスポンシブ

単純にデバイスサイズに合わせて、コンテンツをリサイズすればいいわけではない。

具体的に、以下の項目に明確答えられる形で"リデザイン"する必要がある。

1. 画面解像度の調節

- デバイスごとに違う画面解像度にどのように対応しているか。

2. 画像のサイズ

- 既存より小さい画面で、画像はどのサイズで表示されているか。どのように実装しているか。

3. レイアウト

- どのようなレイアウトが小さいサイズのデバイスを使うユーザーにとってもっとも使いやすいか。

4. 表示コンテンツ

- コンテンツの優先順位はどうなっているか。デバイスごとに違うユーザーのニーズを捉えているか。

5. コンテンツの追加・削除

- デバイスごとに違うユーザーのニーズを捉えているか。また、同一ユーザーが別々のデバイスでサイトを見た際にコンテンツの有無で混乱しないようになっているか。

6. ユーザーインタラクションの変化

- ユーザーはそのコンテンツやナビゲーション、各種ボタンなどに対しどのようなアクションを行うか。

入力画面

レポーティング

問題点:ユーザーは役に立たないコンテンツをマーキングしたい

解決策:役に立たないコンテンツについて、簡単にマーキングと報告ができるようなUIにする。

自分の使っているサービスに不適切な投稿が表示されていると、サービスへの印象も悪くなってしまう。それを避けるためにも、不適切な投稿にユーザーが対応できる仕組みを作っておく必要がある。

タグ付け

問題点:ユーザーはコンテンツをカテゴリ分けしたい

解決策:適切なキーワードでコンテンツにタグ付けできるようにし、ユーザーにコンテンツの一部を管理させましょう。

ユーザーは、コンテンツを受け取るだけではなく、コンテンツを作る部分にも参加したいと考えている。タグ付けは、ユーザーにとって簡単に行える編集行為であり、かつそれをすることでサービスが使いやすくなる、双方のニーズにマッチした機能です。

インラインフォーム

問題点:ユーザーはより快適に情報を入力したい

解決策:フォームをより対話形式にしましょう。ユーザーに「情報を入れたい」と思わせることが重要です。

フォームを記入するのはめんどくさいものです。ですので、それを如何に楽しませるかが設計者の考えるべき問題となります。

インプットヒント

問題点:ユーザーは、フォームにどのような種類の情報を記載したらいいのか知りたい

解決策:あらかじめフォームに情報を表示しておくことで、ユーザーがその部分にどんな情報を記載すればいいのか分かるようにしましょう。

枠の横に何を書く必要があるかを記載するより、枠内に情報が表示されているほうが分かりやすいためユーザーのストレスを軽減できます。

確認画面の前に間違いを指摘する

問題点:入力フォームに関して、ユーザーは即時のフィードバックが欲しい

解決策:ユーザーが記入している段階で入力された情報を確認し、問題がある場合はリアルタイムで表示する。

全部記入し終わった、と思ってDoneを押したら間違いがあって差し戻し、となると離脱してしまうユーザーが出てきます。記入してすぐに注意してもらえれば、再度その部分を修正して一回の投稿で完了することができます。それとあわせて、何が間違っているのかを記載すると、より快適なフォームになります。

ステップ式のフォーム

問題点:ユーザーはシンプルに見えるもので、かつ文脈的につながりのあり分かりやすい情報を好む。

解決策:ユーザーが一回に把握する入力しなければいけない情報を減らし、フォームのページ数を増やしましょう。

Virgin Americaでは1つの選択肢を選ぶごとに別のフォームに遷移していくため、1画面の情報が分かりやすく、全体の流れもスムーズなためストレス無く飛行機の予約ができるようになっています。飛行場でもスムーズな搭乗ができそうな感じがしますね。

達成度メーター

問題点:ユーザーはいつまで続くか分からない作業に対してストレスを感じる

解決策:グラフ的な視覚情報で現在どれくらいの作業が終わっているかを見せるのがよい。パーセント表示が最もよく使われる。

ゲーミフィケーションと呼ばれる手法ですが、導入したからといってUXの劇的な改善が起こるわけではありません。ローディングが遅ければユーザーは離脱してしまいます。そういった、基本的な部分をクリアした上で導入していきましょう。

ナビゲーション

ナビゲーションへの遷移ボタン

問題点:ユーザーは全てのセクションに移動できるナビゲーションにすばやく移動したい

解決策:トップへ戻るボタンの設置やナビゲーションのabsolute表示などで、すぐにナビゲーションにたどり着けるようにする。

いまだにWebにおいてナビゲーションはメニュー表示で広く使われています。ユーザーはコンテンツを途中まで読んで別のメニューに移動することが多いですが、最上部までスクロールしていくのは退屈な体験です。ワンタッチでナビゲーションまで到達できるようにしましょう。

1ページデザイン

問題点:ユーザーは無駄にページ移動をしたくない

解決策:ページ自体をリロードする必要なく、タブ移動などで表示する情報のみを変更していく。

レコメンド機能

問題点:ユーザーはどのコンテンツが多く見られているのかを知りたい

解決策:ユーザーがあなたのサービスでコンテンツを確認している際に手助けになるように、おすすめのコンテンつであることを表示しましょう。

広告が跋扈している現在において、生身の人間のレコメンドほど信頼できるものはありません。あなたのサービスが広告だらけだと思われないように、レコメンド機能を実装しましょう。

関連性の高いコンテンツ

問題点:ユーザーは、今見ていたコンテンツがニーズと少しずれているとき、それと似たコンテンツを見たいと思います。また、今見たものが面白かったため同じようなものを引き続き見たいという欲求もあります。

解決策:似ているコンテンツや関連のあるコンテンツを該当コンテンツの付近に配置することで、記事を読み終えた(あるいは読み飛ばした)ユーザーが関連コンテンツを見つけやすいようにしましょう。なお、関連性の判断はカテゴリや、ユーザーによって付けられたタグから判断することが多いです。

次のステップを教える

問題点:ユーザーは、一つのタスク(行動)を終えたあと、次に何をしたらいいかを知りたがる

解決策:行動リストを表示することで、次に何をしたらいいかを明示するか、矢印などを表示することでそれを目印にタスクをこなしていけるようにしましょう。

例えば、フォームに情報を入力した後に決定ボタンを押す流れを考えてほしいのですが、決定ボタンがフォーム最上部にあり、そのことがどこにも書かれていないとしたら困ってしまうと思います。ユーザーはあなたではないので、基本的にサービスのことをわからないと思って親切すぎるぐらいの態度を取る必要があるでしょう。

特徴的なコンテンツ

問題点:ユーザーはそのアプリで"何が"できるのかを気にしている

解決策:ファーストビューや登録前の画面で、特徴的なコンテンツを表示し、ユーザーにイメージさせましょう。

無限スクロール

問題点:ユーザーは全てのコンテンツをスクロールで閲覧したい

解決策:ユーザーがコンテンツの最下部に達した際に、自動で次ページがリロードされ、最下部につく形で表示される、無限スクロールを実装しましょう。

一時期話題になった無限スクロールですが、ページ遷移よりもスクロールの方が離脱率を抑えることができます

フィックス・ナビゲーション

問題点:ユーザーは、どのタイミングでメニューを使いたくなるか分からない

解決策:ページがスクロールされても、ナビゲーションがついてくるようにしましょう。

ナビゲーションのところにも記載しましたが、ナビゲーションはすぐに使える状態にしておくことが重要です。

ポップオーバー

問題点:ユーザーは、同じページにいながら関係のある情報を見たい

解決策:重要な通知や追加情報は、ポップオーバーで表示しましょう。移動したくないユーザーにも確認してもらいやすくなります。

ソーシャル

称号、勲章

問題点:ユーザーは自分の行動に対する奨励を常に欲している

解決策:UIの中に、ゲーミフィケーション要素を持ち込みましょう。多くのサービスがメインとなく機能部分以外の、ユーザー情報登録部分でもゲーミフィケーションを用いています。

自動ソーシャルシェア機能

問題点:ユーザーは、ソーシャルシェアをする際はなるべく簡単にしたいと考えている

解決策:ユーザーが、サービスでのアクティビティログを特定のSNSで自動シェアすることができるようになるオプションを設定する。

アクティビティフィード

問題点:ユーザーは、彼らの周りで何が起こっているかをなるべく早く知ることができる状態を望んでいる。

解決策:ユーザーと関連性の高い人やものの最近の情報をまず見せるようにUI設計すること。FBやTwitterのニュースフィードはもちろん、QuoraやMediumといったソーシャル機能を持つものは多くこの考えを実践している。

フォロー

 

問題点:ユーザーは、友人だけでなく特定のテーマやトピックの日々のアクティビティを知っておきたい。

解決策:ユーザーが情報を追いかけていたいテーマやトピックを選択できるようにしよう。

フォローというと、人(芸能人、有名人含む)をフォローするというイメージが強いかと思うが、特定のトピックなどをフォローできる機能も潜在的な需要があります。

投票機能

 

問題点:ユーザーは自分の気に入ったコンテンツに支持表明し、そのコンテンツを共有したがる

解決策:ユーザーが好きなコンテンツに投票できるような、投票システムを実装してユーザーにコンテンツキュレーションを手伝わせよう。

投票機能を使いやすくすることでユーザーのアクティブ率を向上することができます。特に「他人の投票しているコンテンツ」は信頼できるため、投票結果を上手にシェアさせることも重要です。

LIKE

問題点:ユーザーはコンテンツにレーティングしたがるが、どれくらい好きか、といった程度まで考えるのは面倒くさがる

解決策:好きか嫌いかの2択しか用意しないことで、ユーザーは不快感を感じることなくレーティングすることが可能になる

データ&コンテンツマネジメント

お気に入り&ブックマーク

問題点:ユーザーは、自分の好きなコンテンツを保存しておいて、後になってたまに確認したがる

解決策:コンテンツを保存・ブックマークできるような仕組みを実装する。このUIパターンはコンテンツのプロモーションよりも個人の体験を向上させる役割を担っている。

ダッシュボード

問題点:ユーザーは、自分のアクティビティやステータスをいつでもすぐに確認できる状態を望む

解決策:数字を効果的に使いながら、ユーザーのアクティビティやステータスに関する重要な情報・統計値などを簡潔に表示する画面を用意する

ホバーコントロール

 

問題点:ユーザーは、コンテンツの見え方をごちゃごちゃにすることなく、コンテンツへのコントロールを行いたがる

解決策:ユーザーが、該当のコンテンツにホバーするまでアクションボタン等を隠しておき、ホバー時に表示する。これは優れた方法であるが、表示されるボタンが多くなるとコンテンツから注目を奪ってしまうため、注意が必要である。

コンテキストメニュー

問題点:ユーザーは、コンテンツの見え方をごちゃごちゃにすることなく、コンテンツへのコントロールを行いたがる

解決策:ユーザーが該当コンテンツを選択した場合か、右クリックをした場合にのみ、コンテキスト型のメニューを表示する。

グリッド

問題点:ユーザーは秩序だったコンテンツを見たい

解決策:コンテンツのスニペットを表示するためにグリッドを使う。

終わりに

いかがだっただろうか。

UIデザインパターンと言われると「きれいなUIをなんとなく眺めてしまう」、そんな印象はなかっただろうか。

  • 問題の要約
  • ソリューション
  • 具体例として
  • どう使われるべきか

これからは、上記四点に注意してUIデザインを見ていくことで、デザイン力を向上させて欲しい。

なお、 参考サイト からダウンロードできるPDFファイルには今回紹介できなかったパターンも多数掲載されているため、そちらもあわせて確認してみて欲しい。

UIデザイン
UXデザイン
デザインパートナーをお探しではありませんか?
オハコはデザインと実装の力で、サービスをゼロから形にするデザインコンサルティング会社です。 サービスの成長から逆算し、最適なプロジェクトをデザインします。
デザインについてのご相談は下記よりお問い合わせください。
avator
Misaki Akimoto
プロダクトマネージャー/ Product Huntをチェックするのが日課です^^