UX/UIデザインカンパニーのオハコがデザインについて発信していくメディア

Powered byOHAKO Inc.

2014.10.28

UI DESIGN

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

はじめに-UIデザインパターンの使い方-

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

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

問題の要約

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

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

ソリューション

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

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

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

具体例として

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

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

どう使われるべきか

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

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

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

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

全体的な話

レスポンシブ

responsive

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

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

1.画面解像度の調節

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

2.画像のサイズ

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

3.レイアウト

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

4.表示コンテンツ

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

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

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

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

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

入力画面

レポーティング

スクリーンショット 2014-10-23 14.37.21

スクリーンショット 2014-10-23 14.39.10

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

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

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

タグ付け

スクリーンショット 2014-10-23 15.36.02

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

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

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

インラインフォーム

inlineform

スクリーンショット 2014-10-23 15.39.09

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

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

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

インプットヒント

スクリーンショット 2014-10-23 15.41.42

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

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

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

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

スクリーンショット 2014-10-23 15.48.43

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

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

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

ステップ式のフォーム

スクリーンショット 2014-10-23 15.54.03

スクリーンショット 2014-10-23 15.54.11

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

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

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

達成度メーター

complete

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

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

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

ナビゲーション

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

navi

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

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

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

1ページデザイン

スクリーンショット 2014-10-23 16.39.41

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

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

レコメンド機能

recommend1

recommend2

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

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

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

関連性の高いコンテンツ

スクリーンショット 2014-10-23 16.45.50

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

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

次のステップを教える

次のステップ

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

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

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

特徴的なコンテンツ

スクリーンショット 2014-10-23 16.47.40

スクリーンショット 2014-10-23 16.48.36

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

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

無限スクロール

スクリーンショット 2014-10-23 16.49.31

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

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

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

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

スクリーンショット 2014-10-23 16.50.39

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

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

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

ポップオーバー

スクリーンショット 2014-10-23 16.52.18

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

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

ソーシャル

称号、勲章

勲章

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

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

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

スクリーンショット 2014-10-23 16.54.48

スクリーンショット 2014-10-23 16.56.10

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

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

アクティビティフィード

スクリーンショット 2014-10-23 17.01.49

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

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

フォロー

スクリーンショット 2014-10-23 17.03.19

 

follow

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

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

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

投票機能

スクリーンショット 2014-10-24 11.24.48

 

スクリーンショット 2014-10-24 11.28.49

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

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

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

LIKE

スクリーンショット 2014-10-24 11.30.22

スクリーンショット 2014-10-24 11.31.05

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

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

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

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

スクリーンショット 2014-10-24 11.43.32

スクリーンショット 2014-10-24 11.44.19

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

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

ダッシュボード

スクリーンショット 2014-10-24 11.44.52

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

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

ホバーコントロール

スクリーンショット 2014-10-23 16.52.18

 

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

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

コンテキストメニュー

スクリーンショット 2014-10-24 11.47.09

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

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

グリッド

スクリーンショット 2014-10-24 11.48.09

スクリーンショット 2014-10-24 11.48.48

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

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

終わりに

いかがだっただろうか。

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

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

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

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

サイト掲載・UI/UXのご相談に関して

UI/UX JAPANではアプリデベロッパーさんのアプリのレビュー・インタビューを企画および、UI/UXに関する悩み相談・改善提案を行っています。

「インタビューを受けてみたい!」や「改善提案をお願いしたい」など、興味のある方は下記お問い合わせより”お気軽に”ご相談ください!

EDITOR'S PROFILE

admin_ohako

菊地 涼太

代表取締役CEO & UI Designer

  • Facebook
  • Twitter

神奈川県生まれ、神奈川県育ち。慶應義塾大学時代より大手企業内でWebデザインの仕事に携わり、フリーランスとして新規事業立案〜UX設計・UIデザインまでを主な担当分野としているうちに、デザイン領域全体に可能性を感じて株式会社オハコを設立。

RELATED POSTS
top

2016.11.11

来客受付アプリから見る、UXをしっかり伝達するためのUIデザインの考え…

はじめまして! 株式会社オハコのアシスタントUIデザイナーの吉川、サーバサイドエンジニアの有馬です。 11月を迎え、本格的に寒い季節になってきましたね。 少し前のことです...

UI DESIGN

wearabledevice

2015.04.10

AppleWatchでどう変わる?ウェアラブルデバイスUXテ…

いよいよ本日、AppleWatchの予約が日本時間16時01分より開始されました。 これまで様々な企業が研究開発を行ってきたウェアラブルデバイスの分野に、ついにAppleが参...

UI DESIGN

dashboard

2015.03.04

ダッシュボードのUI/UXを考える際に重要な3つの視点

「The laws of shitty dashboards(ひどいダッシュボードの法則)」を読んで 成功例を目にすることは多いが、実際にはトライアンドエラーをした軌跡を追う事の...

UI DESIGN

mobileuipatterns

2014.10.10

用途・デバイス別!スマホサイト、アプリのUIデザインパターン17選

弊社でも参考にしているUIパターンサイトを使いやすいようにデバイス別・用途別に分類してみました。 UIデザインで詰まってしまった際や、修正を指示したいんだけど参考になるデザイ...

UI DESIGN

Top

2014.09.30

心地よいUIデザインをする際に考えるべき7つのポイント

多くの人が毎日3時間以上オンラインサービスを利用しています。1,000,000,000,000以上のWebページと数百万件のアプリがリリースされ、それらがユーザーの時間を奪い合って...

UI DESIGN

iphone6_app

2014.09.25

iPhone6、搭載アプリのUIと使い方まとめ

iPhone6,6 Plusの累計売上が1,000万を突破したことはみなさんもご存知だと思う。 今後も引き続き、アプリ開発で国内・海外どちらに主軸をおいた場合でもiPhone...

UI DESIGN