タブの正しい使い方
以下のタブコントロールに関する12のデザインガイドラインに従い、タブをサイトのナビゲーションと区別し、また、ユーザーが自信を持って、タブをクリックできるようにしよう。 Tabs, Used Right by Jakob Nielsen on July 9, 2016 日本語版2016年10月3日公開 Webのたいていの機能は非常にシンプルなGUIウィジェットで構成されている。しかし、すべてのダイアログコントロールを正しく利用しているサイトはめったにない。ラジオボタンやチェックボックスのようなシンプルなものでさえ、正しく使われていないことは多いし、ドロップダウンメニューに関しては、言うまでもない。というのも、ひどい扱いをされているからだ。そして、この記事では誤用されることの多い、もう1つのデザイン要素について論じる。その要素とは、タブである。 （今回論じるのは、下のスクリーンショットの例にあ
フロントエンドスタイルガイド： 定義と要件、コンポーネントチェックリスト
フロントエンドスタイルガイドは、デザインやテストを効率化し、UIの一貫性を高める。今回は、スタイルガイドの要件8個と、一般的なコンポーネント25個を紹介しよう。 Front-End Style-Guides: Definition, Requirements, Component Checklist by Page Laubheimer on March 27, 2016 日本語版2016年6月23日公開 フロントエンドスタイルガイドとは何か フロントエンドスタイルガイドがUXの現場でますます一般化してきている。Jeff GothelfとJosh Seidenが彼らの著書『Lean UX』で説明しているように、フロントエンドスタイルガイドはアジャイルやリーンな環境で生まれたものである。 定義： フロントエンドスタイルガイドとは、製品のユーザーインタフェースにある全要素のモジュールコレクショ
画像重視のデザイン：大きければいいのか
大きな画像には視覚に訴える力がある。しかし、その優先順位づけを誤ると、全体のユーザーエクスペリエンスにとっては害になりうる。 Image-Focused Design: Is Bigger Better? by Kathryn Whitenton on September 28, 2014 日本語版2014年10月20日公開 百聞は一見にしかず、と言うように、人は視覚的な生き物である。ユーザーの関心を引き、自分たちのメッセージを伝えるのに、画像は効果的な手段だ。ネットワークやデバイスによってより大きな画像が表示可能になるにしたがい、目をひく、巨大な画像を組み込むWebサイトは増えるばかりだ。そうしたサイトでは画像を1枚だけ選択することができず、カルーセルで数枚の画像を表示していることも多い。 Southwest Airlinesの新しいトップページはこのトレンドのいい例である。ページで最も
Webデザインの慣習を破ることは、ユーザーエクスペリエンスを破壊すること
Bucknell Universityのサイトの、型破りなレスポンシブデザインへの変更は話題を呼んだが、それによってユーザビリティがかなり犠牲になっていることが、学生と保護者によるテストで明らかになった。 Breaking Web Design Conventions = Breaking the User Experience by Katie Sherwin on July 20, 2014 日本語版2014年10月6日公開 大学のWebサイトのトップページを頭に思い浮かべてほしいと言われたら、どのようなイメージが浮かぶだろうか。浮かぶのはSUNY Cortlandのトップページのようなもの、つまり、芝生の上に学生がいる画像があって、ページの上部にはナビゲーションがあり、そこにAcademics（：学部・大学院）、Admissions（：入学案内）、Prospective Studen
入力フォームのプレースホルダーを使ってはいけない
入力フォームのプレースホルダーテキストは、入力欄にどんな情報を入れたのかをユーザーが思い出すことや、エラーのチェック・修正を難しくしてしまう。また、視覚や認知機能に障害のあるユーザーにはさらなる負担となる。 Placeholders in Form Fields Are Harmful by Katie Sherwin on May 11, 2014 日本語版2014年6月17日公開 コンテクストに沿った説明やヒントは、入力フォームのそれぞれに何が入るかを明確にするのに役立つ。その結果、入力が促進され、コンバージョンレートは向上する。ヒントの提供方法はいろいろとある。実装として一般的なのは、入力フォーム内に説明を入れるやり方だ。しかし、残念ながら、入力フォーム内のプレースホルダーはユーザビリティに役立つよりも損なうことのほうが多いことがユーザビリティテストでは繰り返し示されている。 ラベル
レスポンシブWebデザイン（RWD）とユーザーエクスペリエンス
多数のデバイスをサポートするためにレスポンシブデザインのチームが作成するサイトは1つだが、ユーザビリティを確実なものにするには、全デバイスでのコンテンツやデザイン、パフォーマンスを考慮する必要がある。 Responsive Web Design (RWD) and User Experience by Amy Schade on May 4, 2014 日本語版2014年6月4日公開 レスポンシブデザインの定義 レスポンシブWebデザイン（RWD）とは、Webサイトの外観を、それを見るために利用しているデバイスの画面サイズや向きに合わせて動的に変化させるWeb開発アプローチである。RWDは、ごく小さなスマホから巨大なデスクトップモニターまで、顧客が利用する多数のデバイス向けにデザインする、という課題に対する方策の1つといえる。 RWDはいわゆるブレイクポイントを利用して、サイトのレイアウト
Webサイトの階層構造：フラットにするか深くするか
フラットでも深くでも、情報の階層は構造化が可能だ。しかし、両者にはそれぞれ長所と落とし穴がある。 Flat vs. Deep Website Hierarchies by Kathryn Whitenton on November 10, 2013 日本語版2014年1月20日公開 Webサイトの階層構造 数ページ以上あるWebサイトはほぼどれも、コンテンツを構造化する何らかの構造を利用している。最も一般的な（そして、理解しやすい）構造はページをカテゴリーごとにグループ化したもので、そこには特徴別のサブグループが伴うことも多い。その結果、コンテンツは最終的に階層構造になるが、こうした構造はほとんどの人には組織や家族、自然界とのインタラクションによっておなじみのものである。 まさにどのようにコンテンツをグループ化すべきかについての決断は、サイトの構造がユーザーの役に立つ（あるいは役に立たない
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
