UX Movementの創立者、ライターです。ユーザーに優しいUXデザインのスキルを読者の方が上達できるよう、UX Movementのブログを始めました。 モバイルアプリをデザインするとき、ソリッド（塗りつぶし）かアウトライン、どちらのアイコンを使用するか決めなければいけないときがあります。ユーザー体験にはどちらが最適なのでしょうか。 単なる好みの問題だと考える人もいますが、研究によると、認識の速さに違いがあることがわかっています。 ソリッドアイコンとアウトラインアイコンのどちらを使うべきかがわかれば、モバイルアプリの操作がしやすくなります。ユーザーはアイコンをより早く認識し、正しい選択をすることができるのです。 「Filled-in vs. Outline Icons: The Impact of Icon Style on Usability」という調査で、アイコンのスタイルは作業効率

すべてのボタンがアクションを実行するわけではありません。たとえばトグルボタンなどは、アプリの状態を変えるために使われます。１つのコントロールで複数の機能をもつので、UIのスペースを節約することができます。トグルボタンは押すと状態が瞬時に切り替わりますが、それ故に正しく設計しないと問題が発生します。 反転したカラースキーム vs 通常のカラースキーム トグルボタンの課題は、現在の状態をいかに明らかにできるかというところにあります。視覚的な手がかりが明確でない場合、ユーザーはアクティブな状態を認識できないことがよくあります。これにより、誤ったオプションを選択してしまい、意図しない状態を引き起こしてしまう可能性があります。 特に混乱が起きやすいのは、現在の状態を示す視覚的な手がかりが反転色である場合です。このトグルボタンは一般的ですが、最適解ではありません。ユーザーには、暗い色のボタンがアクティ

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 優秀なUXデザイナーについて書かれた記事はインターネットに多く存在しますが、本記事はそれらとは違います。今回は悪いUXデザイナーを見分ける方法について話したいと思います。 デザイナーが優秀かどうか見極めるのに役立つセリフを10個ご紹介します。 私はUXデザイナーなので、ユーザーにとって何が最善か知っています ステークホルダーよりも、チームメンバーよりもはるかに問題領域に詳しいと信じているデザイナーは少なくありません。ときにはユーザーより把握していると考える人さえいます。したがって、デザイナーが自分たちのソリューションに固執し、批評から逃れようとする状況がよく起こります。 理解しておくべきは、どれだけ長くデザイナーとして経験を積んでいようと、すべてのアイデアは仮説

よく知られているように、人間の行動は予測がつかないものです。重力、電気、摩擦とは違い、毎回いつも同じように振舞うわけではないようです。 そしてこのことが、フィッツの法則を興味深いものにしています。フィッツの法則とは、人間の振る舞いについての非常によくできた予測モデルです。 デザイン時にフィッツの法則を活用することで、標準的な人間の振る舞いを用いて、使いやすいインターフェイスを作れるようになります。あなたのWebサイトにも、ソフトウェアのプログラムにも、ゲームにも、これを用いることができます。食料品店のセルフレジから金融系のWebサイトまで、人間の行動は変わらずに同じままなのです。 どんなインターフェイスも、フィッツの法則から得られる教訓を用いることで、ユーザーが起こすエラーを減らして、彼らがタスクをより素早く達成するようにできます。 フィッツの法則とは何か フィッツの法則は、人間の行動をモ

この記事はSpeckyboy Design Magazineからの翻訳転載です。配信元または著者の許可を得て配信しています。 Staying in Touch with What Users Want Webデザイナーとして、私たちは専門知識に基づいてクライアントのためにサイトを構築します。ナビゲーションやCTAなどのアイテムを配置するための確かな方法論がある一方で、他のデザイン判断はより属人的です。多くの場合、私たちはユーザーが何を望んでいるかを考えて機能を実装するのです。 これはすべてのデザイナーにとって、特にフリーランスや小さな代理店にとっては、非常に困難なことでもあります。なぜならほとんどの場合、実際のユーザーテストを実施するための予算がつかないからです。小規模なプロジェクトを数多く行う場合、優れたUXを構築するために１～２個の何らかの根拠に基づいた推測を基に進めることもあるでしょ

フォームが複数ページに渡る場合、ステップインジケーターは必要不可欠です。ステップインジケーターはユーザーに対して自分たちが今どのステップにいて、あとどのくらいのステップが残っているかを示す役割があります。 画面上のスペースが限られているためモバイルフォームで、ステップインジケーターを提示することは困難です。デスクトップと同じインジケーターをモバイルフォームで使用すると、可読性と可視性の問題が生じてしまいます。 直線型 vs 放射型 無理やり狭いスペースに各ステップのタイトルを収めると、テキストサイズが小さくなりユーザーが読みにくくなります。さらに一度にあまりに多くのステップ名と番号が表示されるため、可視性も下がります。結果、視覚的なノイズが発生し、ユーザーが現在いるステップを把握することが難しくなってしまいます。 モバイルフォームには放射型のインジケーターを使用してください。こちらの方がユ

多くの会社はWebで強力なプレゼンスが必要な理由を理解しているものの、しばしばユーザーをそのプロセスから放置しています。競争が激しいデジタル世界において、企業はシームレスなユーザー体験を保証するためにできる限りの努力をしなければなりません。 私たちの生きるデジタル時代において多くの場合、企業のWebサイトは人々がそのブランドに触れる最初の接点となります。人々は実際の店舗に（もしあるならば）入るはるか前にWebサイトを訪れます。Chain Store Ageによると、顧客の39%は、Webサイトで選択肢が多すぎると不満を覚え、離脱するそうです。 それでは、企業はどのようにしてデジタルプラットフォームを通じて良好な体験を提供し、ユーザージャーニーを充実させ、購買の意思決定に影響を与えられるのでしょうか？ 良いUXの秘訣はインタラクションデザインにある インタラクションデザインは、ユーザーをもて

シンプルにデザインする方法を学び、なぜデザインが過度に複雑になってしまうのかを知りましょう。もっとも成功した企業が作り出し、広く使われているプロダクトの多くは明らかにシンプルなものです。 また、シンプルさは一部の企業が競合よりも成功している主な理由でもあります。Googleの検索エンジンや、AppleのiPhone、WhatsAppメッセンジャー、よくできている天気ウィジェットなどは、シンプルさが表に出ている人気プロダクトのほんの一例です。 この記事ではシンプルさを見分けて獲得する方法と、シンプルさがすぐれたUIをもたらす理由を紹介します。 シンプルさとは何か？ 今シンプルなものが大流行しています。シンプルさは、成功した企業とそのファンの多くに支持されているデザイン哲学です。大成功を納めているApple社はデザインのシンプルさを求めて常に戦ってきました。米国出身の起業家であり投資家でもあっ

UX Movementの創立者、ライター。ユーザーに優しいUXデザインのスキルを読者の方が上達できるよう、UX Movementのブログを始める。 生年月日の表記方法は国によって異なります。さらに、生年月日のフォームは年、月、日という３つのデータで構成されているためわかりにくくなりがちです。生年月日の入力フォーマットがわかりにくい場合、ユーザーを苛立たせることになります。 わかりにくいフォーマット ユーザーは、誕生月が最初に来るフォーマット（月/日/年）か、誕生日が最初に来るフォーマット（日/月/年）のどちらかに慣れています。そのため、フォームがいつものフォーマットと異なると混乱してしまいます。 生年月日でユーザーがよく見るフォームは、「月/日/年」か「日/月/年」です。「MM」が「月」、「DD」が「日」を表していることを知っているユーザーもいますが、混乱したり無視するユーザーもいます。

Alanは、ITの領域において幅広い経験をもつ、テクノロジーに関する熱心なブロガーです。彼は現在、ロサンゼルスに拠点を置くSPINX Digital Agencyと連携して仕事をしています。 些細なことがユーザー体験を大きく左右することもあります。私たちがインターネット上で行うことの大部分は、無意識下で行われます。私たちは、漠然と画面を見て、Webサイトを訪れ、コンテンツを消費しています。 ユーザーはほとんどのことを無意識に行っていますが、Webサイトはユーザーの行動を強く意識しなくてはなりません。Webサイトは、いかなるときでもユーザー１人ひとりのニーズとウォンツに対して責任を負う必要があります。Webデザイナーは、顧客データとペルソナを活用してWebサイトのトーンやビジュアル要素を作り出し、ターゲットユーザーに最適な形でサイトを提供しなければなりません。 画面のスクロールは過小評価され

「ソフトバンク」というと、皆さんはどのようなイメージを持っているでしょうか？ 最近は、UberやWeWork、ARMなど有名企業への出資や買収で話題になっていますが、実際にソフトバンクでどのようにサービスが作られているのかイメージがある人は少ないのではないでしょうか。 そこで今回は、ソフトバンクのクリエイティブディレクターである梅津氏に、ソフトバンクにおけるUXデザインの現場と、その事例のひとつとして公式サイトのリニューアルについてお聞きしてきました。 インタビュイー ソフトバンク株式会社 顧客基盤推進本部 UX企画課 梅津 しおん氏 新設されたUX専任チーム ― 今回お話いただくにあたって、まずは梅津さんの仕事内容について教えてください。 梅津：簡単に説明すると、ソフトバンクが提供するサービスの情報設計やクリエイティブ全般を担当しています。私のチームであるUX企画課は約２年前に新設された

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 あなたが書いた文章をすべてのユーザーが楽しみながら読んでいると想像するのは簡単です。しかし、現実を見てください。ユーザーはそんなことはしません。ただ斜め読みをするだけです。 ユーザーはWebページを読まず、斜め読みをします。何か目を引くものがあったときにだけ、斜め読みをやめて文章を読むのです。 デザイナーは、デザインしたWebページ上で人々がどこを見るかコントロールできます。ユーザーの目線を誘導するには、目がどのように情報を処理するのかを理解する必要があります。この記事では、Z字型パターンを使用したWebデザイン内に視覚的階層を生み出す理論と実践について説明します。 Z字型パターンとは何か、どのように作用し、なぜそうなるのか 読んで字のごとく、Z字型パターンのレ

Chrisはロンドン在住のフリーランスのUXデザイナーです。彼はシャーピー（油性ペンが有名なメーカー）、コーヒー、プロトタイプ、付箋紙を愛しています。彼はブログやポートフォリオのウェブサイト、Just UX Designの中で色々な思いを書き綴っています。 検索はWebデザインの重要な要素であるにもかかわらず、ユーザビリティが悪いことがよくあります。このような使いにくい検索が及ぼす影響を認識することで、経済的な損失を防ぐことができるでしょう。 お客様が実際に店舗へ出向いたとき、スタッフが把握していない商品について尋ねたとしましょう。スタッフは肩をすくめて、商品がないことに関して謝罪するだけでしょう（もしくはそれすらしないかもしれません）。お客様はその店舗に不満を抱き、代わりに近くにある競合店舗へ向かうでしょう。 あなたがこの架空のビジネスのオーナーだとしたら、こんな対応をするスタッフには嫌

Ben Gremillionは、UXPinのコンテンツデザイナーです。Webデザインとバックエンドの開発の、両方の仕事をしています。 デザインプロセスがUXの問題を解決することならば、サービスをリリースする前のルーチンはUXの問題をあらかじめ防ぐためにあります。 プロダクトというのは複雑なものです。非常にシンプルに見えるアプリや、たった１ページのWebサイトでさえ、数千行ものコードが含まれている可能性もあります。開発者と話すと、セミコロンひとつのミスが、プロジェクト全体をめちゃくちゃにしたなんて話をよく耳にします。 ユーザーテストが重要なのと同様に、技術面でのテストも非常に重要です。ここでは、サービスのリリース前、リリース中、リリース後に確認できるチェックリストを紹介します。 サービスリリースの１週間前 CSSや画像を使わずにユーザビリティテストをする CSSや画像を削除することで、データ

高画質なスクリーンが一般的になったことで、視覚的なメディアとして発展するWebデザインにおける、写真の役割が大きくなっています。美しい写真の使用は、不変のテクニックです。 この記事では、Webサイトでの写真においてもっとも人気のある６つのトレンドを紹介します。 目を引くヒーローイメージ スクロール画像上の全面を占めるヒーローイメージは、Webデザインにおいて、もっとも人気の高いトレンドの１つです。 ヒーローイメージの価値は、瞬時にユーザーを夢中にさせることです。 人間にとって、視覚はもっとも強い感覚です。そのため、高画質なヒーローイメージは、もっとも速くユーザーの関心を引く方法の１つになります。 ヒーローイメージにより、ユーザーはすぐに引き込まれ、そのサイトへ期待を持ちます。

現代のビジネスで生き残るためには、ユーザーと常に良好な関係を維持しなければなりません。その最善の手段は、ユーザーを夢中にさせ、記憶に残る貴重な体験を作り出すことです。 Webデザインのようなコンテンツは、さまざまな画面やデバイスを介して直感的に訴える手段として、ユーザーの体験に決定的な影響を及ぼします。その中でもマイクロインタラクションはユーザーを夢中にさせる大きな可能性を秘めているのですが、見過ごされがちな手段です。 マイクロインタラクションとは、ユーザーが特定のアクションを実行したときに表示される小さなアニメーションや視覚的な反応のことです。たとえば、Twitterで「フォロー」アイコンを押すと色がついたり、「いいね」を押すと小さくてカラフルなアニメーションが出たりするものを指します。マイクロインタラクションは一見取るに足らないもののようですが、人間の心理に基づいており、ユーザーに大き

ユーザーはデザインを見たいのではなく、コンテンツを求めてサイトにアクセスします。Web UI Patterns 2016 Vol. 1で説明した通り、デザインは直感的で分かりやすくコンテンツを表示するための手段にすぎません。 この記事では、Webにおける12通りのレイアウトのパターンを実際の例や良い実践方法、共通のシナリオを通して見ていきます。 1. カード 2. グリッド 3. マガジン 4. コンテナの不使用 5. スクリーン分割 6. シングルページアプリケーション（SPA） 7. Ｆパターン 8. Ｚパターン 9. 水平的なシンメトリー 10. 水平的なほぼシンメトリー 11. 放射線状のシンメトリー 12. アシンメトリー 1. カード

いくらコンテンツが良くても、見やすいサイトでないとユーザーはすぐに離脱してしまうでしょう。「見やすい」というのは、コンテキストやユーザーに依存する部分も多いのですが、そこには最低限守るべきルールがいくつかあります。 この記事では、見やすいサイトを作るときに最低限チェックしておきたい項目をご紹介します。 フォントサイズ フォントサイズや行間などは文章の視認性を大きく左右します。 WCAG 2.0では英語などの場合は18ptまたは14ptの太字、日本語の場合はそれと同等の文字サイズが望ましいとされています。1pxは0.75ptと同等とされているので、18ptは24pxとほぼ同等です。さらに、行の高さ（line-height）は150%〜200%、段落の間隔は行送りの1.5倍以上が推奨されています。 ＊18ptは1.5emと同等、14ptは1.2emと同等 そのほか、Googleも読みやすいフォ

メニューと検索バーは、コンテンツ間を回遊させるための二大手法です。しかし、メニューと検索バーを使うのはどのような人なのでしょうか？　そして、双方のユーザーニーズに合わせたユーザーインターフェイスとはどのようなデザインでしょうか？ この問いは、さらなる疑問をもたらします。何をもって、ユーザーはマウスをメニューの上に動かすのでしょうか？　あるいは、検索バーを使うのでしょうか？　確かなユーザー体験をつくるには、ユーザーの多くがメニューを使いたくなる、または検索したくなる状況を理解する必要があります。 ほとんどの人がメニューを使います。CentralwayのUX責任者であるZoltán Gócza氏は、次のように説明します。 人間は、記憶から何かを思い出すよりも、認識することに優れています。検索する言葉を入力するよりも、リンクをクリックする方がはるかに簡単で早いのです。なぜなら、検索するための適切

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 アプリはコンテンツやサービスを提供するための、今日（こんにち）の主流かつ確かな方法です。しかし、飽和状態の市場でユーザーを満足させ、その興味をつなぎとめるために、どうすればモバイルアプリは意義や価値のあるものとなるのでしょうか。 この記事では、素晴らしいモバイルUXを作る鍵となる、UXデザインのための７つのヒントをご紹介します。 １. 一つの画面につき、一つの操作 ユーザーが情報を取得する際の努力を軽減する 皆さんがデザインするアプリの画面では、ユーザーにとって最も価値のある一つの動作を助長するものでなければなりません。各画面を一つの目的だけのためにデザインし、Call to Action（行動喚起）は一つに留めましょう。こうすることで、ユーザーはアプリを理解・