デザインが良いと思える理由
視覚的に美しいデザインとは、タイポグラフィが一貫していて、明確な階層があり、洗練されたカラーパレットが活用されていて、グリッドに沿って要素が配置されているものだ。 Why Does a Design Look Good? by Sarah Gibbons and Kelley Gordon on March 7, 2021 日本語版2021年8月23日公開 フォントや色、配置などの視覚的なディテールは、ユーザブルなエクスペリエンスを生み出し、ブランドの特徴（親しみやすさや信頼性など）を表現する。 デザインを見て、それが良いということはすぐにわかるものだ。しかし、多くの場合、そのデザインを「なぜ」良いと思うのかを特定することは非常に難しい。この記事では、3つのユーザーインタフェースデザインを分析し、これらのデザインを魅力的に見せているビジュアルデザインの原則について説明する。 例その1：タイ
入力フォームにおけるユーザビリティの再確認
ユーザー登録などに必要な入力フォームですが、今もなお使いにくいフォームを見かけることがあります。U-Siteでは入力フォームについて何度も取り上げてきましたので、ここで、これまでの記事を引用して基本をおさらいします。 HCD事業部・宮内 2016年5月12日 イードではHCD関連の調査業務を多数請け負っております。最近ではユーザー理解のための調査が増えていますが、一方で、基本的なユーザビリティ評価業務も日々行っております。その主な内容としては、ユーザビリティテストやヒューリスティック評価によって現状のサイトやアプリの問題点を明らかにし、改善方針を提案するというものがあります。 サイトやアプリの規模、サービスの種類、運用体制などにより、存在するユーザビリティ上の問題点は様々で、新しいデバイスやデザインパターンの出現によっても変化していますが、共通した問題点もあります。その一つが、ユーザー登録
複雑なアプリケーションのための8つのデザインガイドライン
複雑なアプリケーションがサポートするワークフローとエンドユーザーは非常に多様だが、この8つのデザインガイドラインはそのほとんどに適用可能である。 8 Design Guidelines for Complex Applications by Kate Kaplan on November 8, 2020 日本語版2021年5月7日公開 複雑なアプリケーションとは 我々は、以前、複雑なアプリケーションの定義として、専門分野で高度なトレーニングを受けたユーザーの構造化されていない幅広い目標や非線形のワークフローをサポートするアプリケーション、とした。複雑なアプリケーションには、サポートするワークフローやエンドユーザー（たとえば、研究者から軍の専門家、金融アナリストまで）によって、いろいろな種類があるのは間違いない。しかし、同じような特徴を備えていることが多いものだ。たとえば、複雑なアプリケーシ
ナビゲーションの3クリックルールは誤り
重要な情報にアクセスしやすくすることは重要だが、3クリックルールはデータの裏づけのない恣意的な目安である。 The 3-Click Rule for Navigation Is False by Page Laubheimer on August 11, 2019 日本語版2020年4月9日公開 3クリックルール どんなページもアクセスするのに3回以上のクリック（またはタッチスクリーンでのタップ）を必要としてはならない、という3クリックルールは、根強く残る、正式には認められていないヒューリスティックである。このバリエーションに、最も重要な情報には3クリック以下で到達しなければならない、というのもある。デザイナーはこのルールをWebサイトのナビゲーションや情報探索タスクによく適用するが、中には、（フォームやウィザードの入力など）他の種類のタスクにもこのルールを用いるデザイナーもいる。 タスク
ダイレクトにユーザーの温度感が伝わるからできる、RettyのUXデザイン
毎年恒例、HCD-Net認定 人間中心設計専門家／スペシャリストへのインタビュー。2019年は、Retty株式会社でUXデザインを手がける、デザイナーの山本麻友美さんにお話を聞きました。 羽山祥樹・森川裕美 2019年11月27日 信頼できる「人」を通じて食の体験をつくる、という世界観をもつRetty（レッティ）。月間利用者数が4000万人を超えるサービスです。会社の行動規範として「ユーザーハッピー（User Happy）」を掲げ、普段から「ユーザーのために」をものづくりの基準としています。 そのRetty株式会社で、UXデザインを手がけるデザイナー山本麻友美さん（HCD-Net認定 人間中心設計スペシャリスト）にお話を聞きました。（聞き手：HCD-Net 羽山祥樹、森川裕美） 山本麻友美さん 伝わるデザインを模索して、1000本ノック Rettyには「信頼できる人からお店を探す」というコ
デザインプロセスについて 1/4
設計のプロセスモデルについては、ISO 13407:1999がその考え方を提示して以来、「ぐるぐるまわすこと」というような形での理解がそれなりに浸透している。そこで本稿ではまず、PDSやPDCAについて触れたいと思う。 黒須教授 2019年12月18日 プロセスモデル 設計のプロセスモデルについては、ISO 13407:1999がその考え方を提示して以来、「ぐるぐるまわすこと」というような形での理解(その程度じゃ困るのですが)がそれなりに浸透している。ISOの考え方も、ISO 9241-210:2019で最新版が提示されたこのタイミングで、デザインのプロセスモデルについてのいくつかの考え方を整理しておきたいと思う。 ちなみに、ISO 9241-210:2000のJIS化は、今年、ISO規格の制定から19年が経過した時点でJIS Z 8530:2019として行われたが、ISO 9241-21
ユーザーのコンピュータスキルの分布： ユーザーのスキルはあなたが思う以上に低い
先進33か国において、コンピュータ関連の高い能力を持つ人は人口の5％にすぎない。また、中程度の複雑度のタスクを完了することができる人は全体の3分の1しかいない。 The Distribution of Users’ Computer Skills: Worse Than You Think by Jakob Nielsen on November 13, 2016 日本語版2017年3月16日公開 身につけるのがもっとも困難なユーザビリティの教訓に、（訳注：デザインプロジェクトに携わっている）「あなた方はユーザーとは違う」というのがある。これこそがユーザーのニーズについての推測が大失敗に終わる理由だ。デザイナーは大半のターゲットオーディンエンスとあまりに異なっているため、いいと思っているものや利用しやすいと思っているものが見当違いになるだけでなく、そうした自分たちの個人的好みによって判断す
ジャーニーマップ作成の基礎
ジャーニーマップとは、1人のユーザーが目的を達成するためにたどるプロセスを視覚化したものである。 Journey Mapping 101 by Sarah Gibbons on December 9, 2018 日本語版2019年8月6日公開 ジャーニーマップはよく使われるUXのツールだ。あらゆる形やサイズ、フォーマットがあり、コンテキストに応じてさまざまな方法で利用できる。この記事では、ジャーニーマップとはどういうものか（そして、どういうものがジャーニーマップではないのか）、関連用語、よく使われる変化型、ジャーニーマップの活用方法といった、ジャーニーマップの基本を取り上げる。 また、カスタマージャーニーマップは、いつどのように作るべきか、その5段階のプロセス、ジャーニーマップ作成の実際を論じた記事も閲覧可能である。 ジャーニーマップの定義 定義：ジャーニーマップとは、1人のユーザーが目的
サービスデザインの基礎
サービスデザインとは、組織運営をデザイン・連携・最適化することで、ユーザーと従業員双方のエクスペリエンスを改善して、カスタマージャーニーをよりよくサポートできるようにするものだ。 Service Design 101 by Sarah Gibbons on July 9, 2017 日本語版2017年11月2日公開 サービスとは何か 伝統的な経済学では、財（goods）とサービス（services）には明確な区別がある。財は、ペンやサングラス、靴のように、有形であり、消費が可能である。一方、サービスとは、医療や郵便業務、公共交通機関のように、無形で所有権をともなわない瞬間的に交換されるものをいう。 しかし、現在では、財とサービスの間のはっきりとした区別はなくなってきている。財とサービスが連続した1つのつながりとなって、その間に製品とサービスが組み合わさったものが大量に存在するようになったか
フラットデザイン： 起源、問題、フラット2.0のほうが望ましい理由
フラットデザインとは2012年ごろに広まったWebデザインのスタイルである。それは広く今も利用されているが、過度な利用は深刻なユーザビリティ上の問題を引き起こしかねない。フラットデザインによって発生するユーザビリティ上の最大の課題の1つに、クリック可能な要素のシグニファイア不足がある。フラットデザイン2.0は、それに対する優れた解決策を提供してくれる可能性がある。 Flat Design: Its Origins, Its Problems, and Why Flat 2.0 Is Better for Users by Kate Meyer on September 27, 2015 日本語版2015年11月2日公開 フラットデザインは人気のあるデザインスタイルで、Webページのグラフィック要素に、光沢感や立体感という視覚効果を利用しないもののことである。それは多くのデザイナーからWeb
ユーザビリティコラム：Jakob Nielsen博士のAlertbox
メニューデザインのチェックリスト：17のUXガイドライン 11月5日 読了までに約10分 ユーザーはメニューを使ってコンテンツを見つけたり、機能を利用したりする。このチェックリストを活用し、メニューがその役割を果たしているかを確認しよう。 このコラムについてUIデザイン・ユーザビリティ・UXデザインについて、その道の第一人者・ヤコブ・ニールセン博士（略歴）ら米Nielsen Norman Groupのメンバーが実例を交えて洞察するコラム『Alertbox』。その日本語訳を許可を得て公開しています。 AI時代におけるデザインセンスと技術的スキル 10月24日 読了までに約5分 生成AIによって誰もが何でも作り出せる時代だからこそ、識別力の重要性が一層高まっている。優れたデザインを生み出すには、依然としてクリエイティブなスキルが不可欠である。
低コントラストのテキストは解決策にならない
低コントラストのテキストがトレンドのようだ。しかし、それは視認性が悪く、発見しにくく、アクセシビリティも劣る。代わりに、もっとユーザブルな代案を検討しよう。 Low-Contrast Text Is Not the Answer by Katie Sherwin on June 7, 2015 日本語版2015年9月16日公開 低コントラストのデザインが美しいというのはWebに繰り返し立ち現れる思想だが、それは視認性や発見しやすさを奪い去るものである。低コントラストのデザインは目に負担がかかるので、歳を取って、能力が少し衰えたように我々は感じる。ミニマリズムというトレンドに魅了されたサイトは、高コントラストという従来からの自分たちの流儀を捨て去り、暗黒面（あるいはミディアムグレー面と言うべきか）に寝返ろうとしている。デザインでの評価のために読みやすさを犠牲にしようとするサイトにとって、低コ
入力フォームのプレースホルダーを使ってはいけない
入力フォームのプレースホルダーテキストは、入力欄にどんな情報を入れたのかをユーザーが思い出すことや、エラーのチェック・修正を難しくしてしまう。また、視覚や認知機能に障害のあるユーザーにはさらなる負担となる。 Placeholders in Form Fields Are Harmful by Katie Sherwin on May 11, 2014 日本語版2014年6月17日公開 コンテクストに沿った説明やヒントは、入力フォームのそれぞれに何が入るかを明確にするのに役立つ。その結果、入力が促進され、コンバージョンレートは向上する。ヒントの提供方法はいろいろとある。実装として一般的なのは、入力フォーム内に説明を入れるやり方だ。しかし、残念ながら、入力フォーム内のプレースホルダーはユーザビリティに役立つよりも損なうことのほうが多いことがユーザビリティテストでは繰り返し示されている。 ラベル
UXデザイン教からの脱却
UXデザイン教は、UXという概念を適当に解釈して使っていても受け入れてくれる、とても素晴らしい教義の世界のように思われる。しかし、きちんと編纂された教典もないようだと、早晩雲散霧消してしまうのではないか、と危惧している。 黒須教授 2014年6月2日 慶応大学の増井俊之さんはいつも鋭い指摘をしている。その中のひとつ、「ユーザインタフェース研究者という仕事」には次のように書かれている。 作曲家という仕事という記事を読んで、こんなことを考えてしまった。 （中略） いまだに変なユーザインタフェース研究が生き残っているというのは、どうなっているんでしょうか？ （中略） つまり「システムの有用性」だけで生き残るのは不可能であると言うことになってしまったんです。では、どうするか？と言うと、互助会的な（むかしのフリーメーソンみたいな）組織を作って、架空の「権威」を作るしかない。ユーザインタフェース研究教
iOS 7のユーザーエクスペリエンス評価
フラットデザインは行動のきっかけとなる要素を見えなくしている。また、周辺部付近でのスワイプは、カルーセルやスクロールに干渉する可能性がある。 iOS 7 User-Experience Appraisal by Raluca Budiu on October 12, 2013 日本語版2013年12月2日公開 iOS 7はAppleのタブレットとモバイルデバイス用のオペレーティングシステムだが、iOSの旧バージョンまでの特徴だったスキューモーフィックデザインをやめた。新しい外見はこれまでのバージョンのオペレーティングシステムとは大きく異なっており、Appleがこれまで8年かけて熱心に構築してきた約束事のいくつかを大胆に放棄している。しかし、新デザインは本当に良くなっているのか。新しい外見の好き嫌いにかかわらず、新機能の中にはユーザビリティにとっては歓迎すべき改善もある。その一方、苦痛をもた
メンタルモデル
ユーザーがUIについて知っていると思っていることは、彼らがそれをどう利用するかに強い影響を及ぼす。メンタルモデルのずれというのはよくあることであり、特にデザインで何か新しいことをしようとするときには起こりがちである。 Mental Models by Jakob Nielsen 2010年10月18日 メンタルモデルはヒューマンコンピュータインタラクション (HCI) の最も重要なコンセプトの1つである。実際、我々もインタフェースデザインの原則での1日セミナーで、それがデザインとどう関連するか、かなりの時間をかけて扱うことにしている。 ここではユーザビリティ調査から得られた事例を何件か報告しようと思う。具体的な例を挙げることで、（「メンタルモデル」のような）抽象的なコンセプトの理解の助けになるのは偶然ではないからである。 そうはいっても、まずは少々の理屈について、我慢して読んでもらわなけれ
モバイル：ネイティブアプリとWebアプリ、ハイブリッドアプリ
ネイティブアプリとハイブリッドアプリはアプリストアでインストールするものだが、Webアプリはモバイルに最適化されたWebページで、アプリ的な外見を持つものである。ハイブリッドアプリもWebアプリもHTMLのWebページをレンダリングするが、ハイブリッドアプリはそのためにアプリに埋め込んだブラウザを利用する。 Mobile: Native Apps, Web Apps, and Hybrid Apps by Raluca Budiu on September 14, 2013 日本語版2013年10月28日公開 モバイルの分野で、ネイティブアプリやWebアプリ、さらにはハイブリッドアプリといった用語をよく耳にすると思う。ではその違いは何だろうか。 ネイティブアプリ ネイティブアプリはデバイス内にあるので、アクセスはそのデバイスのホーム画面上のアイコンを通して行う。ネイティブアプリは（Goog
メガメニューはサイトナビゲーションに効果あり
大きな二次元のドロップダウンパネルは、ナビゲーションの選択肢をグループ化することでスクロールの必要性を無くし、タイポグラフィやアイコン、ツールチップを使うことで、ユーザの選択できる内容をわかりやすく提示してくれる。 Mega Menus Work Well for Site Navigation by Jakob Nielsen on March 23, 2009 もうすぐ開催予定のナビゲーションデザインセミナーに向け、我々は様々なナビゲーション機能についてのユーザスタディを実施している。いつものことだが、中にはひどい結果が出てしまった機能もあるし、これまた、いつものことだが、今、流行のようになっている機能（今回の場合はタグクラウド）にはユーザビリティ上の大きな課題が見つかった。 幸いにも、他のウェブトレンドは本質的にユーザビリティに優れており、ユーザの行動やゴールによく合っているというこ
2008年 アプリケーションUI・ベスト10
入選者の多くは、複雑な情報を一つの概要として提供する際にダッシュボード、そしてユーザをダイアログに確実に気付かせるためにはライトボックスを使っている。 また、Office 2007 のリボンの早期採用の著しさは驚きに値する。 Application Design Showcase #1 by Jakob Nielsen on August 12, 2008 最優秀アプリケーションユーザインターフェイスデザイン・ベスト10、初めてのコンテストの入選者は以下の通り: Campaign Monitor by Eyeblaster (イスラエル): メディア・バイヤー向けの複数の広告キャンペーンを統合管理。 CMSBox by CMSBox (スイス): コンテンツマネジメントシステム。 FotoFlexer by Arbor Labs (アメリカ): フォトエディタ。 PRISMAprepare
タブの正しい使い方
13のデザインガイドラインを守ってタブを使っているサイトにYahoo Financeがある。しかし、AJAXの使い過ぎや改善の余地が残るカスタマイゼーションのページなどを見る限り、ユーザビリティはまだ上げられる。 Tabs, Used Right by Jakob Nielsen on September 17, 2007 Web上でダイアログコントロールを正しく使っているユーザ・インターフェイスを見かけることは滅多にない。ラジオボタンやチェックボックスのように単純なものでさえ、正しく使われていないことが大半だ。ドロップダウンメニューに至ってはもっとひどい状態だし、Flashサイトを台無しにする自作のスクロールバーも後を絶たない。 最近リニューアルされたYahoo Financeのホームページでは、タブを正しく使っている。2箇所ほど抜粋してご覧に入れよう。 Yahoo Financeのホー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
