画像とテキストのジグザグ型レイアウトは、流し読みの効率を下げる
装飾用の画像は、互い違いになったリストのレイアウトで使われていると、ページを流し読みするユーザーがつまずく原因になることが、アイトラッキング調査でわかった。一方、テキストや画像が縦に整列しているページでは、ユーザーは効率的に流し読みをしていた。 Zigzag Image–Text Layouts Make Scanning Less Efficient by Kim Flaherty on November 26, 2017 日本語版2018年6月27日公開 画像は、大きな写真であれサムネイルであれ、現在のWebデザインには欠かせないものだ。特に、トップページや「こういう仕組みです」（How it works）ページのようなストーリーを伝えるページで、企業が複雑なトピックについて書いたり、製品の説明をするときには、関連する画像を付けた説明的なテキストのかたまりがあり、次の列も同じようなテキ
重要情報はスクロールしないと見えないが、スクロールバーがない EC事業者に業務停止命令
4月には、定期契約の解除を妨げるため、条件上は解約できるにもかかわらず、解約できないように見える表示をしていたことも分かっている。 これらを受けて消費者庁は同社に6カ月の営業停止命令を出すとともに、再発防止とコンプライアンス体制の構築を指示。代表取締役の中村智紀氏には6カ月間、同様の業務を新たに開始しないことを命じた。 関連記事 LINEで販売、高額な“痩せるお茶”にご用心 「追加料金なし」は実質うそ 消費者庁が注意喚起 消費者庁は、「追加料金なし」と聞いてダイエット商品を購入したが、実際には高額な別料金を請求されたとする相談が多く寄せられているとして注意喚起した。問題の事業者は実際には17～23万円の追加料金を求めていた。 「LIFEBOOK 21％引き」は嘘……「富士通 WEB MART」で二重価格 消費者庁が措置命令 PC直販サイト「富士通 WEB MART」で、ノートPC「LIFE
文字と行間の大きさは何が良い？読みやすさとKPI両立への挑戦
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、デザイナーの鈴木です。CTO室でユーザインタフェースの研究開発を行っています。 みなさんはスマートフォン向けのアプリケーションやWebページを作成する際、文字と行間の大きさをどうしたらよいか迷ったことはないでしょうか？ 私たちはこの疑問を明らかにするためにクラウドソーシングを用いた大規模な実験を実施し、どんな大きさの組み合わせが適切であるか定量的・定性的な分析を行いました。本記事ではこの実験と分析の結果について述べ、さらにこの知見をヤフーニュースに適用した結果どのような貢献が見られたかお話しします。 予備実験 読みやすさに影響を与えうるフォントプロパティはさまざまなものが考えられます。私たちはその中から文字と行間の大き
医師とデザイン。なぜ医療現場は複雑なUIが好まれるのか？｜Kei Kobayashi｜note
医師は情報が詰めこまれたスライドが好き？こんにちは、株式会社CureAppデザイナーの小林です。精神科の医師ですがデザインが好きすぎてデザイナーとして働いています。 医療の世界から会社員に転身すると、日々さまざまな発見があります。先日社外の人とプレゼンテーションの話題になり 「医師向けのプレゼンでは、シンプルなものより情報が詰め込まれたスライドが好まれるんです」 と言われ驚きました。 たしかに医療系のスライドは医師に限らず文字が詰めこまれた分かりづらいスライドが主流ですが、それはデザインへの関心が低いだけでけっして「好き」なわけではない、そう思っていました。 しかし改めて「もしかして医師は本当に複雑なデザインが好きなんじゃないか？」という疑念がわいてきました。 よく見る医療系スライドの一例 https://www.dinf.ne.jp/doc/japanese/resource/kouse
ダークモードとライトモード：どちらが良いのか
正常な視力の人（または視力を矯正している人）は、ライトモードのほうがよく見える傾向があるが、白内障および関連疾患のある人の中には、ダークモードのほうが見え方が良好になる人もいる。その一方で、ライトモードでの長時間の読書は、近視を引き起こす可能性も指摘されている。 Dark Mode vs. Light Mode: Which Is Better? by Raluca Budiu on February 2, 2020 日本語版2022年10月31日公開 最近、iOS 13へのダークモードの導入をきっかけに、ダークモードのデザイントレンドとしての人気とそのユーザビリティについて、ある記者からコメントを求められた。また、UXカンファレンスの参加者からもダークモードについてのこの質問を何度か受けている。 iOS 13：ライトモード（左）とダークモード（右）。 前もって言っておかなければならないが
iPhoneでスワイプしてアプリを終了させてもそんなに良いことはない→慣れやUIの関係でそうしてしまう
Manabu Ueno @manabuueno 1. スイッチャーに並んでいるアプリがすべてバックグラウンドで動作中のように見え、システムに負荷がかかっているように感じる。実際にはただの使用履歴であり画面イメージはただのスナップショット。 2022-06-15 09:37:35 Manabu Ueno @manabuueno 2. スイッチャーに並んでいるアプリの中で、起動中のアプリとパージ済みのアプリの区別がつかない。バックグラウンド動作中（音楽再生や位置情報のトラッキングなど）のアプリと、サスペンド（一時停止）されてるアプリの区別もつかない。 2022-06-15 09:37:35 Manabu Ueno @manabuueno 3. 強制終了の操作（上にスワイプ）が簡単すぎてそれがユーザーに期待された行為であるように感じる。アプリの切り替えと同じぐらい簡単なのはおかしい。たとえば M
オーバーレイ過多： ポップアップの競合でより厄介になっている
実行中のタスクとは無関係な、サイトやブラウザが起動する大量のポップアップに、現在のユーザーは圧倒されている。 Overlay Overload: Competing Popups Are an Increasing Menace by Kate Moran on August 1, 2021 日本語版2022年3月2日公開 ポップアップ：90年代からの嫌われ者 1990年代から、ユーザーはポップアップを嫌っていたが、ポップアップは今もユーザーに嫌われつづけている。実際、アメリカの成人回答者452人を対象に我々が実施した調査で、ポップアップは最も嫌われる広告手段の1つだった。（2004年の同様の調査でも、まったく同じ結果が出ている。変わらないことはある、と確認できたのはいいことだ。ポップアップによって引き起こされる感情は否定的なものではあるが）。 我々は、長年にわたり、この強引な広告手段に対
リンクとボタンを｢押せる｣だけでデザインしない
リンクとボタンのビジュアルが似たものもしくは同じものになる理由のひとつに「押せる」[1]という共通点があるからだと思っている。 ビジュアルを似たもの・同じものにするかどうかは状況により判断されるので、そこに画一的な優劣は存在しない。しかしリンクとボタンは明確に異なる機能や振る舞いをもっている。その振る舞いやそれに対するユーザーのメンタルモデルから結果ビジュアルが同じになるのならいいのだが、ただ単純に「押せる」ことだけを基準にデザインされてしまうのは具合が悪い。このエントリーでは、リンクとボタンをデザインするにあたって「押せる」だけではなく、他にも判断材料となるものがあることを共有したいと思う。 前提と定義 今回の話はウェブブラウザで動作するUIを前提に考える。途中で言及するが、リンクがURLに関係していることと、URLをユーザーが意図的に変更できることが大きく関係するので、ネイティブアプリ
今どきの入力フォームはこう書く！ HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA
みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？ 入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ
みんなが使えるカルーセルUIを考える | CyberAgent Developers Blog
Ameba事業部の谷（@hiloki）です。Amebaのデザインシステム Spindleのマネージャーをしつつ、UIの設計・開発をしています。 2021年は多くのガイドラインやUIコンポーネント設計・開発に取り組んできました。この記事ではCyberAgent Developers Advent Calendar 2021の3日目の記事として1年を振り返り、特に考えることの多かったカルーセルUI について、その設計視点やアクセシビリティを考えてみました。 カルーセルUI とは あらためてこの記事におけるカルーセルUI（以下「カルーセル」と呼称します）を定義します。 『デザイニング・インターフェイス（第2版）』におけるカルーセルの定義を引用すると下記のように説明されています。 視覚的に興味を引くことができる項目のリストを、横一列またはアーチ状に配置し、画像のサムネイルを左右にスクロールまたはス
HTML属性を使い、ユーザーに優しい2要素認証を実現する方法
製品 コミュニケーション メッセージング マルチチャネルのテキストメッセージとメディアメッセージの送受信を180か国以上で
UI Control Guidelines | Wireframing Academy | Balsamiq
A collection of detailed guidelines about User Interface (UI) controls. Buttons, links, accordions, menus, and more! Covers all Balsamiq controls. By UX expert Tess Gadd. Button Guidelines Buttons are common elements of every interface and are used to execute an action. It must be apparent what that action will be, to avoid any mistakes or confusion.
Mac版Safari 15の「タブ」の悲劇
ジョン・グルーバーのブログより。 長かったiOS 15 Safariの悪夢は先月終わり、賞賛に値しますが、WWDCで発表された2つの悪いSafariデザインのうち、重要でない方が存続し、Mac版Safari 15の新しいタブが実際にリリースされました。iPad版のSafari 15も同様の問題を抱えていますが、ここではMac版に焦点を当てたいと思います。 WWDCで発表されたMac版Safariの変更のうち、最も物議を醸し他ものは、タブとURLのロケーション・フィールドを各ウィンドウの最上部に一列に圧縮し、ウィンドウ全体を現在最前面にあるWebページのアクセントカラーで色付けするというものですが、ありがたいこと、 Safariの環境設定ウィンドウ(もちろん、タブの下)でオフにすることができます。タブとロケーション・フィールドを同じ列に配置し、タブ自体をURLのテキスト編集フィールドとして使
全てのUIデザインに必要な５つの状態（実例と共に） - The five UI states｜TK - UXデザイナー in 🇺🇸
授業ではあまり習わないですが、UIデザインの実務において常に考えなければならないフレームワークの一つにThe five UI statesがあります。雑に説明するとUIは以下の５つの状態になる可能性があることを踏まえて、それぞれに対してデザインを作っておくというコンセプトです。 • 何も登録されていない状態 (Blank state) • ロードしている状態 (Loading state) • 不完全な状態 (Partial state) • エラーが起きている (Error state) • 理想的な状態 (Ideal state) 授業のプロジェクトや提案型プロジェクトではそこまで深く考えないのかもしれませんが、UIデザインの実務では相当な時間を占めていることが多いです😑 特に複雑な構造のB2BプロダクトだとError stateのUIパターンを一週間考え続けるみたいなことも多々あり
ログアウトのUXを軽視してはならない
Roxanne はライブチャットやビジネスプロセス自動化を専門とする英国に本拠を置くソフトウェアハウスであるParker Softwareのオンラインコンテンツマネージャです。 ログアウトの体験は、ログインする回数が増えている中で見落とされやすいものです。素晴らしいUXほど、ユーザーを送り出すことよりも招き入れることに重点が置かれているのは当然かもしれません。しかし、重視されていないということは、ユーザーのログアウト体験が疎かになっていることを意味します。 最近、アカウントを作成したときのことを考えてください。そのブランドがWebサイトやアプリの入り口から、スムーズかつ素早くユーザーを迎え入れようと苦心しているのは間違いありません。アカウントを作成してアクセスするプロセスは、とても簡単で夢中になります。しかし、ログアウトに関しても同様に言えるということは、滅多にないでしょう。 ログアウトは
アコーディオンのアイコン：どのシグニファイアが最適か
キャレットアイコンは、アコーディオンがその場で開くのであって、新しいページへの直接のリンクではない、ということを最も明確にユーザーに示すことができていた。 Accordion Icons: Which Signifiers Work Best? by Page Laubheimer and Raluca Budiu on August 23, 2020 日本語版2021年4月8日公開 アコーディオンが、現在、人気のあるUI要素であるのには理由がある。というのも、モバイルでは、コンテンツを折りたたんでページの長さを管理可能にする不可欠なツールになっている一方、デスクトップでも、視覚的な複雑さを軽減し、ユーザーが目下のタスクに最も関連性の高いコンテンツに集中できるようにしてくれるからだ（複雑なアプリケーションには特に適している）。 モバイルUXとアプリケーションデザインの両方の講座でよく聞かれ
イージングの基本 | Articles | web.dev
自然界において、ある地点から別の地点に直線的に動くものはありません。実際には、物体は動くにつれて加速または減速する傾向があります。私たちの脳はこの種の動きを期待するように作られているため、アニメーション化するときは、これをうまく使う必要があります。自然な動きでユーザーがアプリに馴染み、全体的なエクスペリエンスの向上につながります。 まとめ イージングは、アニメーションをより自然に感じさせます。 UI 要素にイーズアウト アニメーションを選択します。 イーズインまたはイーズインアウトのアニメーションは、短くすることが可能な場合を除き、使用しないでください。エンドユーザーにとって動きが遅く感じられる傾向があります。 従来のアニメーションでは、ゆっくり始めて加速する動きは「スローイン」と呼ばれ、すばやく開始して減速する動きは「スローアウト」です。ウェブで最もよく使われている用語は、それぞれ「イー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Component Gallery
UIデザインにおける適切なツールチップの使い方
コンテンツ無しのUIギャラリー Empty States
