トグルスイッチの誤用をやめよう
AnthonyはUX Movementの設立者で執筆者です。素敵なWeb体験をこよなく愛し、ユーザのために日々奮闘しています。 トグルスイッチを使うべき場合と使うべきでない場合があります。デザイナーが誤った使い方をするとユーザーの混乱とイライラにつながります。使うべきタイミングを知るには、さまざまなタイプのトグルの状態や選択肢について理解する必要があります。 文脈上の状態 vs システムの状態 トグルスイッチとトグルボタンをデザイナーは混同しがちです。両方とも状態を管理しますが、トグルスイッチとトグルボタンには根本的な違いがあります。トグルスイッチはシステムの状態を管理し、トグルボタンは文脈上の状態を管理します。文脈上の状態のトグルはユーザーが見ようとしている現在の画面にのみ影響を及ぼしますが、システムの状態のトグルはアプリ全体に影響を及ぼします。 トグルスイッチを文脈上の状態のために使う
【2019年版】UIとUXデザイントレンド - baby-degu - Medium
Scenery Illustration by J.HUAこちらの記事は、2018年12月に公開された『 2019 UI and UX Design Trends 』の和訳になります。 はじめに私たちは去年、モバイルUIデザインのトレンドについての予測をまとめました。今年はモバイルだけを対象とせずに、さらに深く掘り下げていきます。 モダンなデザインの一番のトレンドは前後関係のあるつながりの中にあります。そのため、一般化することができません。 この記事を読むことであらゆるツール、技術の進歩、またユーザー向けのプロダクトが実際にどのように機能なのか開発者が理解し、全てが上手くいくように感じるでしょう。 近いうちに、販売だけでなく、生産するものすべてを網羅するユニバーサルデザインの考え方を発展させて行くでしょう。自分で何か物事を行うためには、より良いデザインの選択が必要です。 国家としての印象さ
フォームのボタン配置はどこが最適か、左揃え・横並び・上下など、フォームのタイプごとに詳しく解説
フォームのボタン配置は、多くの場合無視されるか、見映えに基づいて優先順位がつけられます。しかし、ボタン配置は非常に重要で、フォームを使いづらくする要因の一つであるため、正しく配置することが不可欠です。 フォームのボタン配置は、対象のボタンとフォームのタイプに依存されます。 さまざまなタイプのフォームを総合的に調査・分析し、それぞれのタイプでどこにボタンを配置するかについて解説します。 Where to put buttons on forms by Adam Silver 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 プライマリボタンは入力欄の左端に揃える 「戻る」ボタンはフォームの上に配置 分岐するアクションはフォームの上に配置 機能に応じて追加のボタンを配置 一部の単一フィールドのフォームでは、入力欄の横にボタンを配置 マ
スマホを意識した記事タイトルとは？ーー読者の期待をコントロールする - Media × Tech
印刷されたコンテンツとデジタルコンテンツ。記事が読まれるときの大きな違いの一つが「タイトルとサムネイル」の重要性です。デジタルでは、ウェブメディアにしてもニュースアプリにしても、最初に読者の目に入るのは、タイトルとサムネイルだけ。それゆえに、記事に興味を持ってもらうためのタイトルの決め方には、多くの編集者・ライターが工夫を重ねていることでしょう。 しかし、本文を参考に記事を選ぶことができないというスマートフォンでの閲読体験のもとでは、タイトルの決め方は、記事の「選ばれ方」だけでなく、記事の「読まれ方」にまで影響を及ぼします。 今回は、毎日1万本以上にのぼる、SmartNewsで表示された記事の閲読データを分析しました。そこで見えてきた、本文まで読まれやすい記事タイトルの特徴をお伝えします。 タイトルと導入部の印象が異なるだけで読者は離脱する SmartNewsでは、記事の一覧を表示する画面
複雑な乗換体験を直感的に！ 乗換案内アプリのデザイン
これらを鑑みると、 アプリの画面上では乗り入れ箇所で路線色が変わり、誤って降車するリスクがある 行き先が異なる複数の乗客に対して、駅員さんは「直通運転」であることはアナウンスできても「乗換不要」という案内はできない アプリの画面を見ているのは本人のみ、かつ目的地まで目視できるので「乗換不要」と伝える方が有益 このような経緯から、あえて「乗換不要」としています。 手法は大事、ユーザー視点はもっと大事 文言はサービス内で表現のズレが起きないよう、用語辞典を作成しています。「ルート/経路」「電車/列車/鉄道」など。ただし意味が伝わりづらい箇所では、表現のズレを許容しています。注意しなければならないのは、このようなフレームワークや手法などを優先して、ユーザー視点を見失わないようにすることです。 ワイヤとビジュアルを並行して行うことでUX品質を高める 路線情報チームのデザイナーは、ワイヤフレームとビ
間違えるな！誰に向けたデザインかは誰もが迷わず使えてから考える事 | UX TIMES
「ターゲットのニーズに合わせたデザインを」という話を聞くことがあります。 ターゲットやペルソナに合わせたデザインは必要ではありますが、その前に考えるべきことがあります。 ユーザーが迷わず、当たり前に使えることです。 当たり前に使えるとは？ 「当たり前品質」という言葉をご存知でしょうか。 狩野モデルという手法の中にある「それが充足されれば当たり前と受け止められるが、不充足であれば顧客の不満を引き起こす要素」のことで、車であれば「ブレーキがついている」「座席が備わっている」といったような、あって当たり前のもののことです。 モノとして「あって当たり前」以外には「できて当たり前」という考え方にも繋がります。 Webサイトであれば「リンクを押すと想像している通りのリンク先へ遷移する」「迷うことなく目的を達成できる」というものです。 ユーザビリティテストの重要性 ここまで読んだ方で、「そんな簡単なこと
オブジェクトベースなUIデザインに取り組むための心構え｜usagimaru ⌘ Satori Maru｜note
オブジェクトベースなUIデザインの考え方が近頃注目されてきています。デザイナーとしてこれと向き合うに当たって、私なりに解釈した事柄を記しておこうと思います。 オブジェクトベースのUIとはUIデザインにオブジェクト指向の設計論を導入したものをオブジェクトベースのUI、Object-Oriented User Interfaces= OOUI などと呼ぶようです。オブジェクト指向UI、オブジェクト指向ユーザーインターフェイスと呼ぶこともあるかもしれません。そのほかにも OOUX という表記も見られますが、ここでは一貫した呼び名を定めておきたいため、便宜上 OOUI と呼ぶことにします。 私たちが普段目にするGUIは元来OOUIの思想に基づいていると考えられるのですが、中にはとても機能指向的（タスクベース）な設計で構築されたGUIが多くみられるため、特にオブジェクト指向的であるものを強調・区別す
文字や背景にピュアブラックを使ってはいけない理由
UX Movementの創立者、ライター。ユーザーに優しいUXデザインのスキルを読者の方が上達できるよう、UX Movementのブログを始める。 デザインにピュアブラックを使うと可読性が低くなると知っていましたか？ 統計によると、「アメリカの成人の58％」がコンピュータ作業で眼精疲労を経験したことがあるそうです。デザイナーは使用する黒の色に注意を払うことで、目が疲れる可能性をある程度減らすことができます。 ピュアブラックの文字や背景 ピュアブラックの文字や背景と白の組み合わせは、ユーザーが文章を長時間読むとき目に不快感を与えることがあり、眼精疲労を招いてしまいます。 白は100％の明度であり、黒は0％の明度です。このように明度のコントラストが強いと光量に不均衡が生じ、ユーザーが明るさに順応しようとするために目が酷使されることになるのです。 この現象を実証するために、暗い部屋で明るい電灯を
邪悪なUIチェックポイント - その先へ
ハロー、@seto_hiです。 北海道で避暑をしています。 アプリ開発をしていると様々なコンバージョン率がKPIになることは多いですが、誠実さを欠いたUIを作ると数字がよく伸びることが稀によくあります。 そういったものは一時的な利益には繋がりますが、長期的な利益には繋がらないと考えています。 自分が今後そういったUIを作らないための予防線としてこの記事を書きます。 不利益の排除 ・不利益な動線を奥深くに隠す ・ユーザーが設定を変更する手間を増やす ・「メールマガジンの解除にはメッセージを送ってください」 ・「メールマガジンの解除にはログインが必要です」 ・過度に警告を表示する ・「この設定をOFFにするとアプリが正常に動作しなくなる可能性があります」 ・「本当にOFFにしてよろしいですか」 ・不利益な動線を目立たなくする ・不利益な動線のシグニファイアを消す ・スマートフォンならスクロール
最近のUXデザインにおける、スマホアプリのインターフェイスに使用されているアイデアのまとめ
ここ数年の間に、スマホは単なる電話以上に多くの機能を持つようになりました。スマホはさまざまな目的のために使用され、わたし達の日常のアシスタントをこなしています。 そんな便利なスマホアプリのユーザーインターフェイスに注目し、最近のUXデザインにおけるクリエイティブなすごいコンセプトを紹介します。 15 Creative UX Design Concepts for Everyday Needs by Tubik Studio 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 植物の水やりを管理するアプリ 安眠アプリ ハンバーガーショップのアプリ TODOアプリ 料理のレシピアプリ ベジタリアン用のレシピアプリ アラームアプリ 家電操作アプリ 家計簿アプリ 名刺管理アプリ バランスアプリ ファイナンスアプリ フィットネスアプリ カレン
ユーザーが許可したくなるPush通知を考える｜sadakoa｜note
初めましての方もこんにちは、さだこえ (@sadako_a_ ) と申します。 DeNAに新卒で入社後、現在は株式会社FOLIOのデジタルプロダクトデザイナーとして、オンライン証券のUIデザインに従事しながら、スタートアップのデザイン支援を副業で行っています。 今記事では、主にアプリの機能として欠かせないPush通知に焦点を当て、記事を執筆します。 Push通知とはご存知の通りPush通知とは、アプリやwebサービスで何か変更や更新があった場合にお知らせをする機能です。一般的にこの業界で言われるPush通知は、Apple Push Notificationを指していることが多いと思われます。 その理由の1つとして、AndroidはPush通知に関してユーザーの許可を取る必要が無いからです。（ダウンロードする際にオプトインされるため、許可率は100%になる。） iOSやWeb Browser
【質問】文字サイズ変更ボタンを提供しなければいけないの？｜基礎知識｜エー イレブン ワイ［WebA11y.jp］
【回答】アクセシビリティ確保のためには、必ずしも必須ではありません。 Webページの文字サイズが小さいとき、ユーザーが好みの大きさに変更できるのが、Webのよいところです。近年、ブラウザはズーム機能を提供しており、Webページの表示を拡大できます。わざわざWebページ側で似たような機能を提供する必要はないでしょう。また、スマートフォンやタブレット端末で表示する際は、ユーザーが必要に応じて画面を拡大できるようにします（user-scalable=noを使用しない）。 「文字サイズ変更ボタン」というのは、Webページのヘッダー部分で良く提供されている［小］［中］［大］のようなボタンで、ユーザーがWebページのテキストの文字サイズを変更できます。日本のWebサイトでは、何かのランキングでこの文字サイズ変更ボタンの有無が評価項目の一つになっていたこともあり、一時期急速に普及したといわれています。
Webのアクセシビリティを向上させる、始めに取り組んでおきたいガイドラインの10項目のまとめ
Webの創始者であり、W3Cのディレクターを勤めるTim Berners-Lee氏の言葉に、「Webが持つ力とは、その普遍性にあります」というのがあります。Webサイトに誰もがアクセスできるようにするのは、わたし達の責任です。 Webのアクセシビリティは机上では難しいと思われがちですが、実際に取り組んでみるとそんなに難しいものではありません。障害者、スクリーンリーダのユーザー、低速接続のユーザーのアクセシビリティで、比較的簡単に取り組める項目を紹介します。 10 guidelines to improve your web accessibility 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Webアクセシビリティとは何ですか？ 01.カラーに依存しない 02.ズームを無効にしない 03.alt属性のあなたが知らないかもし
ユーザー体験に関連するUXデザイントレンドまとめ デザイン会社 ビートラックス: ブログ
ユーザー体験が商品やサービスの成功を左右すると言われはじめてから数年がたった。世界中の大部分の人たちがスマホを使い、ミレニアル世代を中心にモノを所有することへの興味が下がり、体験をデザインすることが一つのデザイナーの仕事として成立している。 こんな時代にあって、UXデザインはどのような変化を見せてきているのであろうか。2017年を振り返り、UXデザインを取り巻くトレンドをまとめてみた。 1.「使いやすさ」は基本中の基本にユーザー体験を設計する上でもっとも基本となるのが「使いやすさ」。心地よい体験を提供するには、まずは基本的な使いやすさの品質がカバーされている必要がある。専門的に言う所のユーザビリティ。UXの品質評価をする際に使われるUXピラミッド理論においても、下記の通り根底から3つの部分は使いやすさをカバーする要素になる。 Task – 目的達成可能 (レベル1-3)Task – 目的達
UI/UXデザイナーを目指す若手に知っておいて欲しいこと｜坪田 朋
最近増えているスタートアップで働きたいデザイナー向けの記事です。自分の経験から勧めたい・知っておいて欲しい事をまとめました。 作業環境はケチらないで投資する学生でも本気で勉強すれば1年以内にその投資を回収できるので、PCはケチらずにハイスペックなMacBook Proを買った方が良い。 稀に安いからと言う理由で、MacBook Airや旧スペックのPCで作業している人を見かけるけど、若い時ほど本質的な勉強に時間を裂いて欲しいし重い環境で作業し続けるのは効率が悪くインターンの @reo も古いPCで効率悪かったので、新品のMacBook Proを付与して、まともなソフトウェアセッティングとショートカットを教え込んだ。 ちなみに、僕がデザイナーにiMacではなく、Macbook Pro＋外部ディスプレイを勧める理由は、キーボードとトラックパッドが近いと手を動かす量が減って作業効率が良いのと、仕
バッドデザイン賞を勝手にノミネートしてみた-2017年度版- - 酔いどれデザイン日誌 - Drunken Design Diary -
忙しい年の瀬ですが、皆さま如何お過ごしでしょうか。 さて、皆さんは「グッドデザイン賞はあるのにバッドデザイン賞が無いのはおかしい」という風に思ったことはありませんか？私は職業柄、日常生活で見かけた良いデザイン事例と悪いデザイン事例を写真に撮ってストックしているのですが、その中には「本当にこれギャグじゃないの？」というレベルのバッドデザインがあったりするんですよね。 良いものを良いと評価することも大切ですが、良くないものを無視するのは人類の進歩に大きな影を落としているような気さえします。ということで、勝手にアワード化してしまいました。2017と付いてますが、私が見つけたのが2017年だったというだけで製造年度などとの相関性はなく、特に意味はないです。あくまでジョークコンテンツとしてお楽しみください。 【追記】Twitterの方で一部画像が自分で撮影したものではないのでは？とご指摘頂きました。
当初の懸念どおりブラウザのプッシュ通知は邪悪に使われはじめている。実装側はクリックまで購読確認を待つべき。 - mizchi's blog
追記: 2019/11/12 2年経ったけど体験が悪化し続けた結果、 Firefox がこの記事の通りになりましたね… www.fxsitecompat.dev プッシュ通知、ネイティブアプリの機能郡をWebに持ち込むPWA技術の売りの一つだが、当初から懸念されていたとおり、非常にノイジーなものとなってしまっている。自分も気づけばあらゆるサイトの購読確認を、無意識で拒否を押すようになってしまった。 hagex.hatenadiary.jp 少し前の記事。最近はどこかで wordpress のプラグインになったのか、目にする機会が非常に多くなり、非常にストレスフル。最初は技術的な目新しさからか、ある程度容認していたが、さすがにこの状況が悪化する一方で、本気でやばいんじゃないかと思っている。とくに初見のブログの記事を読む前に、購読確認が出るのが最悪の体験となっている。 そもそもプッシュ配信とは
弊社における不適切な通知に関する御詫び — mikan
各位 平素は弊社アプリ「英単語アプリ mikan」をご愛用賜り、誠にありがとうございます。 11月27日に弊社アプリ「英単語アプリ mikan」に通知されました内容につきまして、 多くの皆さまにご不快な思いとご迷惑をおかけしましたことを御詫び申し上げます。 通知開封率をあげようとするあまり、不適切な内容の通知を配信してしまいました。 配信直後にユーザーの皆様からご指摘を受け、事態を重く受け止めて配信体制を見直し、 新たに通知の配信ポリシーを策定いたしました。 ・ユーザーを大切にしよう。 ・誰かが不快な思いをしてしまう内容はやめよう。 ・プッシュ通知を受けてよかったと思える通知を送ろう。 今後は上記ポリシーに沿い、よリユーザーの方々に満足いただける通知を配信いたします。 改めまして、今回の件につきまして皆さまをお騒がせしておりますこと、心より御詫び申し上げます。 2017 年 11 月 28
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
横スクロールできるよ、というヒントを表示する「ScrollHint」:phpspot開発日誌
The Blog | Welcome to Adobe Blog
