ユーザーインターフェースのデザインパターン

同じような問題を解決する方法として、共通の経験を繰り返し活用する手法があります。 このような手法は、デザインパターンとも呼ばれています。 ソフトウェアデザインパターンの集合は、 経験豊富なユーザーインタフェースデザイナーの役目を果たします。 このウェブサイトでは、UIデザイナーにとってより良い手法を見つけることができます。 同じような問題に苦戦した多くの UIデザイナー達の経験が役立ちます。

UI-Patterns.com(UI-Patterns.jp) は唯一のデザインライブラリではありません。 他のデザインパターン集も有益で、よく似通っており、大きな違いはありません。 このサイトの目的は、長期にわたっていくつかのギャップを埋めることにあります。 特に様々なパターンの例をもとに、どのように実装するのが良いのかを知ることができます。 そしてその議論に参加することができます。

もしここに無いパターンを見つけたら、ぜひ報告してください。

最近追加されたパターン

Collectible Achievements

収集できる成果

ユーザーの中にはポイントをもらったり集めることに夢中になる人もいます。集めた成果は他のコミュニティメンバーへも表示させることができます。

Completeness meter

達成度メーター

ユーザーはゴールを達成したいものです。いつ到達できるのか、どうやって到達できるのかのガイダンスが必要です。

Wizard

ウィザード

ユーザーは、信頼できる複数のサブ・タスクから成る一つのゴールを達成できます。

Adaptable View

適応可能な表示

サイトのコンテンツの表示を、ユーザーの特定のニーズに合うようにしましょう。

Image Zoom

画像のズーム

ユーザーは高い画像解像度で詳細を見るために、画像をズームインしたがります。

Rate Content

コンテンツのレーティング

客観的にどのコンテンツが高品質かを判断するために、ユーザーはコンテンツのうちの特定の部分の評価を上げたいものです。

Input Feedback

入力フィードバック

ユーザーはシステムにデータを入力し、その提出結果に対するフィードバックを受け取ることを期待します。

Account Registration

アカウント登録

個人に合わせたコンテンツや購入を行う機会を提供するために、あなたは誰がアクティブユーザーかを知りたいでしょう。

Vote To Promote

投票を勧める

客観的にどのコンテンツがより人気があるかを判断するために、ユーザーはコンテンツのうちの特定の部分の評価を上げたいものです。

Lazy Registration

簡易登録

ユーザーは、正式な登録を事前に行うことなしに、すぐにあなたのウェブサイトを使ってみたいものです。

Password Strength Meter

パスワード強度メーター

あなたのパスワードが、不正アタックに対して十分強いということを確認したいでしょう。

Inline Help Box

インラインヘルプ域

ユーザーは自分がやろうとしている操作のすぐ横に役に立つ手引きを必要とします。

Tag

タグ

ユーザーは同じカテゴリでより多くのデータを見つけたがり、かつ/または、同じカテゴリでデータを提供しようとします。

Tag Cloud

タグ・クラウド

ユーザーはコンテンツを人気度や最もよくできたトピックにより閲覧したいものです。

Live Preview

動的な確認

ユーザーはフォーム領域の変更が最終結果にどう影響するかできるだけ早くチェックしたいものです。

WYSIWYG

WYSIWYG

ユーザーは整形されたテキストコンテンツを付け加えるために、HTMLを書くノウハウを持っている必要はありません。

Wiki

Wiki

あなたはユーザーにウェブサイト上の情報を追加したり編集する機能を提供したいでしょう。

Live Filter

動的フィルター

ユーザーは検索結果を絞り込むために、異なるカテゴリー毎に検索を特定させたいものです。

Archive

保管

ユーザーは時系列順で興味のある記事を検索したいものです。

Pagination

改ページ

ユーザーはソートしたデータが1ページに表示するのが難しいときに、並べ替えたデータのサブセットを見る必要があります。

Continuous Scrolling

連続的スクロール

ユーザーはデータが1ページに表示するのが難しいときに、そのサブセットを見る必要があります。

Tip A Friend

友達に教える

ユーザーは興味のあるものを友達と共有したいものです。

Steps Left

残りステップ

ユーザーはデータを複数のステップにわたって入力する処理をもうすぐ終えようとしているときに、案内が必要です。

Coupon

クーポン

あなたは商品の購入を促すためにユーザーを惹きつけなければなりません。

Blank Slate

白紙の状態

ユーザーはヘルプにより、または、アプリケーションが完全に動作してデータが整ったときにどう動くのかの感覚をつかみ、使い始めなければなりません。

Subscription

登録

ユーザーはサービスの登録を開始したいものです。

Shopping Cart

ショッピングカート

ユーザーは一連のショッピング作業の中で集めた複数の商品を購入したいものです。

Carousel

回転台

ユーザーはセットになったアイテムを閲覧する必要があり、もしかしたらそのうちの一つを選択します。

Thumbnail

サムネイル

ユーザーは、それぞれのフルサイズ画像をダウンロードすることなく、複数の写真の概観を得ることが必要です。

Copy Box

コピー用の領域

ユーザーは整形されたテキスト文をウェブサイトからコピーして、テキストエディターや似たようなアプリケーションに挿入したいものです。

Alternating Row Colors

行の色を交互に

ユーザーは、表の中の各行のデータを一致させるために、似たように見える行を見た目で区別する必要があります。

Table Filter

表形式フィルタ

ユーザーは特定の列を使って表の中の検索結果を絞り込みしたいものです。

Sort By Column

列の並び替え

ユーザーは表を興味のある値をさがして検索したりざっと見る必要があります。

Inplace Editor

内蔵エディタ

ユーザーはページ上の値を簡単に素早く編集する必要があります。

Captcha

Captcha

アプリケーションはデータが実際の人間が生成したものであってロボットが生成したものでないことを検証する必要があります。

Good Defaults

分かりやすい初期値

ユーザーはシステムにデータを入力しなければなりませんが、その場合いくつかの選択肢があるときは初期値にできるだけ一致するようにします。

Input Prompt

入力プロンプト

ユーザーはシステムにデータを入力しなければなりません。

Fill In The Blanks

空白に記入済み

ユーザーはシステムにデータを入力しなければなりません。

Structured Format

構造化された形式

ユーザーは、コンボボックスや他の選択手段からデータを選択させられたりすることなく、素早くデータを入力する必要があります。

Forgiving Format

あいまい形式

ユーザーはシステムに素早くデータを入力していき、システムはその後順次ユーザーの入力を解釈しなければなりません。

Accordion Menu

アコーディオンメニュー

ユーザーはウェブサイトの主要セクションの間をナビゲーション操作しながら、同時に他のセクションのサブセクションを素早く閲覧する必要があります。

Horizontal Dropdown Menu

水平ドロップダウンメニュー

ユーザーはウェブサイトのセクションの間をナビゲーション操作しなければなりませんが、そのようなナビゲーションを表示するスペースは限られています。

Vertical Dropdown Menu

垂直ドロップダウンメニュー

ユーザーはウェブサイトのセクションの間をナビゲーション操作しなければなりませんが、そのようなナビゲーションを表示するスペースは限られています。

Fat Footer

多量のフッター

ユーザーは階層構造によらず高速な方法でサイトのなかの特定のセクションや機能にアクセスする必要があります。

Home Link

ホームリンク

ユーザーはサイトの安全なスタート地点に戻る必要があります。

Shortcut Dropdown

ショートカットドロップダウン

ユーザーは階層構造によらず高速な方法でサイトのなかの特定のセクションや機能にアクセスする必要があります。

Breadcrumbs

パンくず

ユーザーは、できることなら階層構造のより上位レベルへ戻って閲覧するために、ウェブサイト中の階層構造のどの場所にいるかを知る必要があります。

Navigation Tabs

ナビゲーション・タブ

ユーザーはウェブサイトの中の複数のセクションの中をナビゲーションしながら、一方でユーザーが現在どのセクションを見ているのかを明白に示される必要があります。

Module Tabs

モジュール・タブ

ユーザーはページを再読み込みすることなく、一連のタブにわたって閲覧する必要があります。