Webプロダクト開発をしていると様々な諸事情によりUI構成を変えたり機能を増やしたり減らしたりすることが多々あると思います。そんな時に避けられない事態として「UI変更に対するお怒りがユーザーからわんさか届いてしまう」ということがあります。今回はUI上の１要素の色を変えただけで虎の尾を盛大に踏んでしまった事件の話をしようと思います。差し当たりどういうUIをどう変えたのかを明示しておきます。変える前がこちら↓↓ beforeUIほんで変わった後がこちら↓↓ afterUIご覧の通り「作業カード」と呼ばれるコンポーネントの色を「緑＆黄」から「緑塗り＆緑枠線」に変更しました。「え、それだけ？」という声が聞こえてきそうですがそうなんです。それだけなのです。しかしここはレガシードメインのtoB SaaS。toB SaaSではUIの変更がユーザー業務への影響に直結するので軽微な変更を加えるのもハードルが

2017年4月13日の「DevLOVE 関西『デザインリニューアルの難しさ』」にて発表された、Backlog UI リニューアルの舞台裏のスライドです。

この文脈では、「編集内容のキャンセル」という処理を続行しても良いかをユーザーに確認しています。続行に同意したい多くのユーザーは直感的に同じ表記の「キャンセル」を押したくなるでしょう。しかしそれでは編集のキャンセルが実行されません。 このキャンセルボタンが意味するのは、「『編集内容をキャンセルする』のキャンセル」なのです。つまり、ユーザーが望み通りに編集内容を破棄するためには、反対側のOKボタンを選ぶべきなのです。このような「キャンセルのキャンセル」は二重否定で意味がややこしくなるので避けなければなりません。 ここで「キャンセルのキャンセル」にならなければ良いということで、次のようにボタン名を変えてみました。 これでもう迷うことは無くなりましたか……？ 私はこの修正は誤りだと判断します。「はい」「いいえ」は結果を予想しにくい表現なので、ダイアログのアクションボタンに用いることはあまり適切では

赤いボタンは、通常のコールトゥアクション（CTA）に使用すべきではありません。ユーザーはそれを警告と捉えてしまうからです。赤いボタンは破壊的アクションのためだけに使用しましょう。警告をあまり感じさせない寒色系のボタンは、通常のCTAに適しています。 赤いボタンは、ほとんどのユーザーに警告を伝えますが、中には深刻に捉えないユーザーもいます。視覚的な合図を追加することにより、すべてのユーザーに対して、その警告をさらに強いものにすることができます。これは特に、色の違いが見えにくい色覚異常や視覚障害のあるユーザーに有効です。 警告信号をより強力にするために、確認画面に破壊的アクションを表すアイコンを表示しましょう。 たとえば、ユーザーが見慣れている削除のアイコンはごみ箱のアイコンです。このアイコンを目にしたとき、ユーザーは現在行っているアクションを削除と関連付けるのです。 画面上部に赤いストライプ

公開日 : 2022年2月17日 カテゴリー : アクセシビリティ マウスなどのポインティングデバイスの代わりにキーボードを用いてウェブを利用する人や、ロービジョンのユーザーにとって、ウェブコンテンツ上で (キーボード操作による) フォーカス位置が視覚的に明示されることは、とても重要であり、大きな助けになります。 W3C が勧告している WCAG (Web Content Accessibility Guidelines) には「Focus Visible (フォーカスの可視化)」という達成基準があります (参考 : WCAG 2.1 解説書 達成基準 2.4.7 Focus Visible / 日本語訳)。また、WCAG の次期バージョン (2.2) では「Focus Appearance (フォーカスの外観)」という達成基準が新たに追加される見込みです (参考 : WCAG 2.2 解

The HIG contains guidance and best practices that can help you design a great experience for any Apple platform.

レスポンシブデザインとアダプティブデザインの違いに目を向けると、それはデザイナーにとって実に重要な選択肢があることに気付きます。インサイトを踏まえてこれらの選択をすることで、より目的に沿ったデザインを考えることができるでしょう。 モバイルデバイスの普及と多様化に伴い、デザイナーはさまざまな画面サイズに対応する必要が生まれました。これは現在、すべてのWebとアプリのデザイナーが直面している課題です。企業向けの巨大なモニターからスマートウォッチまで、ユーザーがオンラインで情報にアクセスする方法は数え切れないほどあります。 そのようなデバイス間の差を埋めようとするデザイナーには、２つのデザインの選択肢があります。アダプティブなサイトか、レスポンシブなサイトです。 レスポンシブデザインとアダプティブデザインの違いについて混同している人が、一定数見受けられます。どちらのデザインも経験していない人にと

Switch VS Checkbox in User Interface DesignForms provide several controls that make it easier to collect input from users. Using the right control at right place is a challenge while designing forms. A checkbox control has three states: unselected, selected, and indeterminate. The last state represents a situation where a list of sub-options is grouped under a parent option and sub-options are in

1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 mama&crowdのデザイナー、長谷川彰之介です。 今回は、WEBサイトの「余白」や「ブロックサイズ」「WEBサイトの横幅」に対して 「最適な値は存在するのか？」 について考えてみたいと思います。 少々長いですが、お付き合いのほどよろしくお願いします。 ボックスサイズとは、「ヘッダー」「コンテンツ」「ナビゲーション」などの ひとつひとつの固まりの大きさ（サイズ）を指します。 【第１部】8の倍数 WEBサイトのUIをデザインしていて悩まされるのが「余白」です。 「ここは3px…いや4pxか。もっと空けたら見やすくなるかもしれない。6p

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。Yahoo! JAPAN研究所で快適に操作できるUIを作るといったインタラクション分野の研究をしている山中です。 この記事では、リンクやボタンの大きさに基づいてタップの成功率を推定するモデルについて解説します（国際会議ISS 2020で発表した研究成果です [1]）。 このモデルを活用すると、アプリやウェブページのデザインをするさいに、デザイナーが経験的にボタンやリンクの大きさを設定するのではなく、「リンクがこの大きさであれば95％の確率でタップできるから十分だ」などと操作性に基づいてユーザインタフェース（UI）を設計できるようになります。 タップの成功率を推定できると何が嬉しい？ スマートフォンやタブレットPC向けの

過去記事「可読性の高い文章をデザインするポイント」でも紹介しましたように、webサイトに限らず文章の読みやすさを左右する要素に「フォントサイズ（文字サイズ）」「行間」があります。 フォントサイズが小さく、行間が詰まった文章は視認性や可読性が低く、ユーザにストレスを与えてしまいます。 では、webコンテンツで読みやすい文章にするためには、具体的にどれくらいのフォントサイズ・行間を設定すればよいのでしょうか？ そこで今回は、主に文章を読んでもらうことを目的とした国内のメジャーなニュースサイト・メディアサイトを調査し、スマートフォン・PCのデバイス毎に最適なフォントサイズと行間を導き出したいと思います。 調査方法 筆者が選んだ国内ニュースサイト・メディアサイト20サイトを調査 記事ページ内の本文テキスト・h1（ページタイトル）テキストが対象 CSSで指定されているフォントサイズ（font-siz

In business, things change quickly. Trends come and go; tools wax and wane. Companies have to stay abreast of trends and constantly innovate in order to survive. InVision was once an industry darling, enjoying rapid user growth, strong market momentum, and an almost $2 billion valuation. Three short years later…

UXリサーチを専業とする株式会社ポップインサイト代表取締役および株式会社メンバーズ執行役員。2008年に株式会社ビービットに入社しユーザーテストを数百人実施、2012年に日本初のリモートユーザーテストサービスを立ち上げ5,000調査以上を実施。 UX MILK特派員のポップインサイト池田です。UXの第一線で活躍されている方々へインタビュー＆対談し、最新のノウハウをお届けする「UXリサーチ最前線」第二弾として、前回に引き続きBtoBのWebサイト制作で有名なベイジの枌谷さんにお話を伺ってきました。今回は「業務システムのUXへの取組み」についてです。 前回の対談内容（Webサイトの専門家でもユーザーテストが必要な理由とは？）はこちらをご覧ください。 ベイジが業務システムやSaaSのUXに注目する理由 池田：Web制作で有名なベイジさんですが、2019年の戦略＆戦術の中で、注力領域として「業務シ

株式会社OVERKAST代表。エクリ発行人／編集長。情報設計とエクスペリエンスデザインを専門にしたクリエイティブディレクターとして活動。サービス・事業のブランディングからインターフェースの設計まで行う。東洋美術学校クリエイティブデザイン科エクスペリエンスデザイン講師。

冊子版 ストーリーはそのままに、まんがを全編描き直してフルカラーにアップデートした「新版」を販売しています。

サイトやアプリにおける典型的なフォーム（もしくはダイアログボックス）には、通常いくつかのボタンがあります。ほとんどのケースで、ユーザーは２つの選択肢を目にします。１つはユーザーの主となるタスクを表し、一方は付随する副次的なタスク（フォームに入力した内容の取り消しやキャンセルなど）を表します。 この記事ではアクションボタンに関する基本的なUXについて概観し、デザイナーの間でよくある質問である「OKかキャンセル、どちらのボタンが最初にくるべきか」に答えます。 エラー防止 Jakob Nielsen氏のユーザビリティ・ヒューリスティックによると、「丁寧なデザインによって、最初の段階で問題が起こることを防止する」とあります。ユーザーが突発的に間違ったものを選択してしまうかもしれない状況を排除できるように努力する必要があります。 濃淡で視覚的な区別をつける ２つのボタンの違いを明確にするために、ボタ

BADUIにまつわる失敗からユーザインタフェースを学ぶというコンセプトの，どちらかというと初心者向けのユーザインタフェース本が発売されました． 本サイトで紹介しているBADUI事例を大幅に増量し，分類および整理したものになっています．本サイトの内容に興味を持っていただける方には楽しい内容になっていると思いますので，下記リンクからどうぞ．

顧客の理解は、マーケティングにおいてもデザインにおいても、その成否を左右する最重要テーマとなっています。それはウェブサイトにおいても例外ではありません。 名義上、ウェブサイトはそれを運営する企業のものです。その「私たちのもの」という意識から、「私たちが言いたいこと」「私たちが伝えたいこと」「私たちが大切にしていること」を中心に、ウェブサイトのコンテンツを考えがちです。 ところが、顧客を含むウェブのユーザーは、そんな企業の想いに付き合ってはくれません。ユーザーが操作しているブラウザは、いつでもすぐに他のウェブサイトに遷移できるようになっています。再検索も、別タブにある他社サイトへの移動も、ワンクリック/ワンタップで実行できます。 ウェブのユーザーは10秒以内にそのページを見るか去るかを決めるという話もあります。この例を持ち出すまでもなく、ウェブサイトの閲覧権限はユーザーにあります。たとえ企業