ブラインドライターズのスタッフは9割が視覚障害者。 先日、みんなで「どうやって服を買うか」の話になりました。 マネキンの服は見えないので、コーディネートが分からない 下着を買いたいけど、店員さんの性別が分からないので声をかけづらい ロービジョンなので黒なのか紺なのかわかりにくく、店で買いづらい などと、たくさんの悩みごとがありました。 確かに、異性の店員さんに下着の相談はしにくいですよね。 タグが読めなければ、サイズも分からない。リアルでの買い物は一人ではけっこう難しそうです。 そんなときに便利なのがECサイトです。 色もデジタル表記になっていればPCが読み上げてくれるので選びやすい 下着も人に頼まなくていいので買いやすい マネキンのコーディネートは見えないので、サイトで確認したい また「リピ買いするならサイト」という意見もありました。確かに見えていないと広い店内のどこにあるのかサッパリ分

AmazonがEvilに染まっていく… 購入手続きのときに、急にこんな画面が挿入されてきたんだけど、 https://tadaup.jp/55aeed90d.gif こんな絵に書いたようなダークパターンある？？ 「お急ぎ便を無料で利用できます」と書いてあるけど、 小さく「会員は\600円/月で特典使い放題」と書いてある。 つまり、「600円払えば無料だよ」と言っている。つまり、無料ではない。 読解力を測るテストで間違えるような人は、もうこれ読み取れないだろ。 しかも、その下のボタンである。 一見すると、ボタンが2つ並んでいる。 YesとNoのボタンなのかと思いきや、なんと、これはYesとYesである。 「Yes か はい で答えてください」というジョークを素でやっているのが、今のAmazonなのである。 では、Noのボタンはどこにあるのかと、画面中をよく探したら、左側に、普通のテキストの見

I’ve Rejected 100+ UX Designers For This One Mistake — They Couldn’t Tell A Story Here are 4 highly-effective visual storytelling techniques to master to become more valuable to brands.

Chrome91で#tab-hover-cardsと#enable-tab-searchと#sharing-qr-code-generatorが削除されたChromeGoogleバグtab-hover-cards tab-hover-cards タブホバーカードが何かっていうとこれです。 マウスカーソルをタブ上に持っていくと、詳細がポップアップで表示されます。 このゴミを出したくない場合はchrome://flags/からtab-hover-cardsをDisabledにすることで非表示にすることが可能です。 当然100人中99人がオフにしていると思いますが、なんとChrome91で強制オンにされたうえで設定フラグが削除されました。 つまり、オフにすることができません。 当然ながら大不評で、バグチケットも乱立しています。 https://bugs.chromium.org/p/chromi

GitHub Dark Mode is Too DarkIf you hate it too this is why. Using color theory to show why GitHub dark mode is disappointing Shared on Hacker News and Twitter This past week, GitHub released a long-awaited feature — dark mode. Like many devs around the world, I was hype. In 2020, a dark mode toggle for anything remotely related to tech seems like a requirement. So I flipped the switch. My immediat

Research indicates that carbon dioxide removal plans will not be enough to meet Paris treaty goals

Every web developer inevitably runs into situations where they need to make visual design decisions, whether they like it or not. Maybe the company you work for doesn’t have a full-time designer and you need to implement the UI for a new feature on your own. Or maybe you’re hacking on a side-project and you want it to look better than yet-another-Bootstrap-site. It’s easy to throw your hands up an

『バンドリ！ ガールズバンドパーティ！』（以下『ガルパ』）はかわいいキャラクターとオリジナルやカバー曲が多数登場する今人気の「音ゲー」アプリです。アプリのセールスランキング上位にも食い込むほど熱量の高いファンと向き合うために、同社のデザインチームでは普段どういったことを考え、デザインをしているのでしょうか？ 今回は『ガルパ』の開発を手がけるCraft Eggさんのデザイナー３人に、ゲームアプリのデザイン現場について話を聞きました。 ユーザーに負けないコンテンツ愛が必要なデザイン現場 ―『ガルパ』はUX MILKで取り上げる中でも異色の「キャラゲー」です。かわいい女の子がたくさん出てきますが、皆さんはそれぞれ推しの女の子がいますか？ 井口：ひいきになってしまうので、全員推しということでお願いします（笑）。私たちのチームは皆コンテンツ愛がすごいと思います。 ―コンテンツ愛を重視しているようです

Three years ago I came across an interesting paper written up by a Microsoft employee, Kent Sullivan, on the process and findings of designing the new user interface for Windows 95. The web page has since been taken down – one reason why I’m a bit of a digital hoarder. It specified some of the common issues experienced from Windows 3.1’s Program Manager shell and looked at the potential of develop

I love my iPhone. The details and user experience are mostly delightful. However… about 2–4 times a day, a moment of intense frustration pops in. Turning the otherwise smooth experience into total chaos. Let me illustrate. Say I‘m inside the Notes app. I decide to go back and edit one of my previous notes. So… I move my finger to the “< Notes” button in the upper left corner. A split second before

「発見性」の強化のために、noteにランキングやホットエントリーに類するものをつけたいと思っている。しかしランキングやホットエントリーは、世間で思われている以上にデリケートなUIであるため、その設計は慎重に行われなければならない。下手な設計は、サービスのカルチャーそのものを破壊しかねないためである。 以下は、ランキング設計のための忘備録。 PVランキングは収奪的な設計であるPVランキングを設計する場合、まず最初に意識すべきことがある。それは本質的に、PVランキングは収奪的な構造であることだ。 「収奪的」とは、勝者が全てを独占してしまうことを意味する。 基本的にランキングに上位のコンテンツは、ユーザーの注目を獲得する。つまり、PVのあるコンテンツはランキング上位となる。そして上位コンテンツはその露出によって、さらにPVを集めてしまう。 結果、PVランキングは少数のコンテンツにPV、フォロワー

qiita.com という記事を書いた。 要約としては、「今こそGUIでWebのUIを生成できるような開発環境を目指すべき」みたいな話。 概念 Web の GUIの概念を分解すると JS はViewとしての実装を持つプレゼンテーションレイヤー、ロジック注入のコンテナーレイヤーに分割して考える HTML/CSS は、レイアウト定義のレイヤー、そのレイアウト領域を占めるエレメントのレイヤーに分割して考える この考え方に基づくと、GUI開発環境で作るべきものは、 テンプレートへのJSロジックのつなぎ込み レイアウトエディタ 個別のエレメントの装飾 となる。 JSロジックのつなぎこみはヘヴィにJSだからまだコードで書く方がいい。作るならノードベースのエディタになりそう。 エレメントの装飾は自力で頑張るより Sketch から生成できないか試したい。後回し。 レイアウトエディタは今でも作れそう。作っ

新入社員のこばかなさんが、「こばかなスケッチ」という自分企画を頑張っている。THE GUILDでの日々の仕事と、読書で学んだことを、一枚のスケッチにまとめるチャレンジだ。 彼女のスケッチが溜まってきたので、復習とサポートを兼ねて、解説を書いていきたい。第二回はこの絵。 行動 = 動機 × 実行能力 × きっかけ今回のこばかなさんのイラストは、「フォッグの消費者行動モデル」という概念モデルだ。ざっくり言うと、ユーザーが行動を起こすために必要な3条件を示している。 このモデルでは、「ユーザーが何かアクションを起こす」条件を、 B = MATという、とてもシンプルな式で表現する。 その意味は、「行動(Behavior)」には、「動機(Motivation)」と「実行能力(Ability)」があるタイミングで、「きっかけ(Trigger)」が訪れなければならない…というものだ。 ・動機(Motiv

はてなブックマークでは現在、システム全体の抜本的なリニューアルに向けた開発を進めております。 本日、その一環として、ユーザーページ内のブックマーク一覧ページを新システムに移行いたしました。 今回リニューアルしたのは以下のページです。 ユーザーのブックマーク一覧ページ ユーザーのマイブックマーク検索ページ 「あとで読む」のブックマーク一覧ページ また、以下の機能については、仕様を変更しました。 ブックマーク一覧ページのタグ一覧に、非公開ブックマークにつけたタグを表示させないようにしました ブックマーク一覧ページで1ページごとに表示される記事件数を20件に固定しました 他のユーザーのブックマーク一覧のコメントの下部に、そのユーザーのお気に入りユーザーが表示されていましたが、自分のお気に入りユーザーが表示されるようにしました グローバルヘッダーをページ上部に固定しました なお、ご利用状況等を鑑み

概要 昨年までAWSを使ってましたが、今年から会社都合でAzureを使うことになり、だいたい1年が経ちました。 最初は「どっちも同じクラウドでしょ」くらいの認識でしたが、使っているうちに色々と感想というか不満が溜まってきたのでここに吐き出します。 両社のサービスを比較してうんぬん・・・みたいな話ではなく、だいたいAzureの管理画面への不満（ただの感想）とかなのでご了承ください。 ポータルがもっさりしている Azureのポータルは全体的に動作がもっさりしている印象です。 AWSと異なり最初に弄るサービスを選択する形ではないので、その分一つの画面で操作できることが多く、画面遷移していくと迷子になってとりあえずTOP画面に戻ることも多いです。 一覧でリソースの状態が反映されるのも遅いので「あれ？全然VM起動しないな？」と思って更新すると起動してたりします。（これはAWSでもあったかも） なおポ

noteのコア体験は、「読む楽しさ」と「書く楽しさ」だと考えています。 本来ならコア体験は、調査でしっかりと導くべきものです。しかしアカデミックなUXとは異なり、実際のスタートアップ環境では時間とリソースに限界があります。このため調べながらも、走り出さなければなりません。 まず序盤はヒューリスティック（経験）ベースのデザインを行いつつ、調査やテストが可能なところから、裏づけやチューニングを行う流れになりそうです。 以下、「読書体験」における「可読性」のパートのメモ。noteチームにとりあえず提案する予定の諸々です（現時点では個人の見解です）。基本的には「当たり前のことを、当たり前に」やる予定。「これもやっとけ」的なことがあれば、タイポグラファーの諸先輩の方々には、ぜひご意見をお伺いできればと。 書体をサンセリフ系に変えるべきか？デジタルでは、一般的にサンセリフ体の可読性は、ローマン体よりも