スライド概要 2022年に行われたイベント「アクセシビリティの祭典 2022」のセッション「ウェブはすべての人が使えるべきもの ～障がい者の力でアクセシビリティ改善～」で使用したスライドです。 https://accfes.com/2022/

2022/04/22 note tech meetup #2 にて発表したスライドです

JR東日本の指定席予約サイト「えきねっと」。従来から「わかりにくい」「使いにくい」という評価があった。 なぜ、使いにくかったのか。ログイン画面の複雑さや、情報の一覧性などに問題があったとされている。 今回の「えきねっと」リニューアルでは、申込時の支払いが可能になったことや、デザインの統一などが図られた。 このリニューアルで、「えきねっと」への従来からの不満は解消されるのか、ということが気になっていた。 利用者がほんとうに求めていたものとは？　今回のリニューアルでは、クレジットカード以外でもコンビニなどで支払うことができることがメインになっている。これまでは、登録してあったクレジットカードを使って、きっぷを受け取る際に支払いをする仕組みだった。 カードがなくても予約できるように、という要望に応えた形だろう。 すでにJR西日本の予約サイト「e5489」では、コンビニ決済などに対応している。それ

結論から書くと、ちょっと思い当たらない。というおはなし。 そもそも「えきねっと」とはJR東日本の予約サイト。今週末にリニューアルを実施しました。 切符オタクの界隈では「あの切符が発行できない」「売ってはいけないはずの切符が検索結果に出てくる」などなど、いろいろな反応があったようですが、一般の方からすると「鉄道オタクがなんか騒いでいるなぁ」っていう感じかもしれません。私も個々論的なところはあまり興味がないから、そこについては書きません。 じゃあ、ここで何を書くかというと、UIの話をします。鉄道に限らず、いろいろなシステムにも言える話かな、と思ったので。 きっぷを買うまでの道のりが大変先述のプレスリリースには色々と変更点が書かれているんですが、1番目に書かれているのが「列車のお申し込みの操作方法が変わります」という点。 「えきねっと」トップページからダイレクトに、「乗車駅」「降車駅」や「日時」

アイテムが2つ以上のカテゴリーに当てはまる場合、IA構造の中でそのアイテムの親を複数挙げることで、ユーザーを失うことを避けることができる。 Polyhierarchies Improve Findability for Ambiguous IA Categories by Page Laubheimer on May 13, 2018 日本語版2018年12月12日公開 はじめに Webサイトのために完璧な情報アーキテクチャ（IA）を作成するのは、特に正確さと明確さを両立させようとすると容易なことではない。理想的には、コンテンツや製品を正確に伝えられ、新しいトピックやプロダクトの追加時に拡張可能で、（人によって異なることが多い）ユーザーのメンタルモデルに一致するカテゴリーを作成するべきだからだ。 最も一般的なIAの階層は、ツリー状の構造をしていて、（トップページに該当するもの以外は）各ノー

Do we need mega-dropdown hover menus in 2021? Probably not. Let’s explore things to keep in mind when designing and building a mega-dropdown, alternatives to hover menus and fine details for designing a better UX. Complex websites often rely on complex navigation. When a website houses thousands of pages, often combined with micro-websites and hundreds of subsections, eventually the navigation wil

よんてんごP @yontengoP ベーチェット病と痔瘻という難病に侵されたナプキンを付けた社畜です。優しく 接してあげて下さい。尻穴方面/IT方面/社畜方面/下ネタ方面のツイートが多い ですが、病気なので許してあげて下さい(傲慢) よんてんごP @yontengoP コレ僕がIT業界の人間だからなのか分からんのだが、 「エラーに何が画面に出てるかおしえてください」 ってそんなに難しい作業…？ 普通に 「画面上に、エラー：XXXって文言がでてると思うので、その内容を教えて」つったら 「こっちはITの人間じゃないんだから出来ない！！💢」とキレられてな よんてんごP @yontengoP ちなみにお客さんじゃなくて社内の他部署。 「多分画面にERR_ってのが出てると思うので そこに何が出てるかを知りたいです」 ってだけのお願いなんだけども 「こっちはIT部じゃないんだから分かるわけないだろう

TrelloのUI（UX）が素晴らしすぎます。UIと言っても表面上のデザインだけでなくて、基本的な要素の手触りが良すぎます。 とくに上の写真にあるDescriptionがすごい。ここだけで作り込みがすごすぎてビックリする。 これはカード（Todoリストでいうタスク）の説明欄です。入力はtextareaででき、URLなどが入力されると表示される際はリンクになります。ただそれだけの要素ですよ。 ただそういう次元じゃないんですよね。たとえば以下の機能があります。 Descriptionが空のときは「Add a more detailled description...」を表示する Descriptionが空のときはマウスホバーで背景色を濃くしてクリックを促す Description内に描画する内容があるときは、 cursor: pointer にするだけで背景色は変わらない Descriptio

Where to put the label in a web form? In the early days, we talked about left-aligned labels versus top-aligned labels. These days we talk about floating labels. Let’s explore why they aren’t a very good idea, and what to use instead. I’ve been designing forms for over 20 years now, and I’ve tested many of them for large organizations like Boots, Just Eat and Gov.uk. One topic that comes up a lot

前提 自分が嫌だと思う項目を作らない。 曖昧を許容できるようにする。 なぜその項目が必要なのかを説明する、もしくは予想できるようにする。 倫理的に、そして法的に問題ないものか確認する。 HTMLの仕様とブラウザの挙動を活用する。 システムの都合が優先される場合があるが、なるべくそれに引っ張られないように工夫したい。 分割しない 姓名、郵便番号、電話番号、年月日、時分など、入力フィールドが分かれていることがあるが、なるべくこれを避ける。フォーカスの移動が、面倒だからだ。なるべくユーザーの手間を減らしたい。 フォーム送信後のデータベースの都合や、事務処理、または運用にて必要不可欠である場合を除いて、分割しないようにしよう。 年月日や時分などは <input type="date"> <input type="time"> <input type="datetime-local"> のように標準

そのデザインを確かめよう！ユーザーのフィードバックを得るための6つのAdobe XDプラグイン デジタルデザインは試行錯誤の繰り返しです。デザインの過程で、フィードバックを取り込みみながら数十の異なるバリエーションをつくるUI/UXデザイナーは珍しくありません。ビジョンを明確にしたいデザイナーは、Adobe XDのようなツールを使えば、本物のように感じられるインタラクティブなプロトタイプを作成できます。それを共有すればチーム全体の認識を揃えられるでしょう。しかし、これはまだほんの始まりです。 プロトタイプを最大限に活かすには、実際のユーザーにそれを試してもらう機会を持つことです。プロトタイプを使ってユーザーテストを行うと、開発に実際に着手する前に、デザインについての洞察を得られます。ユーザーがどのようにデザインを使おうとするのか確認して、後になってから修正するとコストがかかる潜在的な問題点

If you could save yourself effort from typing in your login credentials on each site visit, would you do it? Most people would. That’s why the “Remember me” option on logins exists. Ticking that checkbox means users don’t have to re-type their login info on the next visit. The “Remember me” checkbox seems convenient, but it presents a major usability problem. Users often forget to tick the checkbo

Mistakes are unavoidable in our lives. When users are working on a product, they may likely be stuck somewhere in response to their actions. Such kind of situations can be frustrating for users if not handled appropriately within the product. It depends on the experience the product is providing to its users. “A product should be usable enough to handle the user’s erroneous actions gracefully.” Go

ローソンのPB商品のパッケージデザインの評判がよろしくない。どのような商品か分からないのだ。文字や写真などをグラフィックという観点からしか考えないグラフィックデザイナーには反省をしてもらいたい。また、反省をうながすべき立場や関係にいる人が、そういう点に着目して注意していない可能性もある。 黒須教授 2020年12月1日 ローソンのPB商品のデザイン 2020年の春にローソンが出したPB商品のデザインの評判がよろしくない。PB商品は、セブンイレブンでも、ファミリーマートでも出しており、自社ブランド商品としてそれなりの特徴づけをしている。特に、その特徴づけはパッケージのデザインに表れており、統一感のあるデザインがなされている。 ただ、ローソンのPB商品の場合、一般の商品とPB商品の差別化を極端に推進しようとしたためか、写真1のように、商品棚のなかで、PB商品群は他の商品とはちがうのだということ

オンラインショッピングをしている顧客は、商品ページを利用して買うものを決める。彼らの疑問に答え、比較を可能にし、レビューを提供して、購入プロセスを促進することで、顧客を支援しよう。 UX Guidelines for Ecommerce Product Pages by Katie Sherwin on November 24, 2019 日本語版2020年8月17日公開 eコマースでは、商品ページは、サイトの成功に非常に重要だ。顧客は十分な情報に基づいた購買決定をおこなうために、十分な情報を得る必要があるからだ。商品ページ（商品詳細ページ）は、ユーザーが、買うかどうか、そして、何を買うのか、を決める場所である。このページには、商品に関する必要な情報をすべて入れて、ユーザーがわかりやすく商品について学んだり、情報を得られるようにしなければならない。 オンラインの顧客は、商品に触れたり、販売

こんにちは、クックパッド デザイナーの平塚（@tsukasio615）です。クリエイション開発部では、レシピやつくれぽなどクックパッドの投稿体験に関する開発を行っています。 今回は、レシピ投稿の中でも重要な「レシピを書く画面」のUI改善についてご紹介します。 課題の洗い出しと優先度決めある日、プロダクトオーナーからレシピ投稿のユーザビリティ改善をしたいというオーダーがありました。レシピ投稿と言っても、ユーザーがレシピを書こう！と思ってから、実際に書き、レシピを公開するまで、範囲は多岐に渡ります。この一連の流れの中で、ユーザーが迷うことなくレシピ公開まで進められるように改善するのが目的です。今回は具体を進める前に、レシピ公開率（レシピを公開した数 / レシピ投稿画面を開いた数）をこの施策の指標として定めました。 具体的にどこを改善するか決める段階で、まずはレシピ投稿のユーザビリティテストを行

重要な情報にアクセスしやすくすることは重要だが、3クリックルールはデータの裏づけのない恣意的な目安である。 The 3-Click Rule for Navigation Is False by Page Laubheimer on August 11, 2019 日本語版2020年4月9日公開 3クリックルール どんなページもアクセスするのに3回以上のクリック（またはタッチスクリーンでのタップ）を必要としてはならない、という3クリックルールは、根強く残る、正式には認められていないヒューリスティックである。このバリエーションに、最も重要な情報には3クリック以下で到達しなければならない、というのもある。デザイナーはこのルールをWebサイトのナビゲーションや情報探索タスクによく適用するが、中には、（フォームやウィザードの入力など）他の種類のタスクにもこのルールを用いるデザイナーもいる。 タスク