情報密度が高いのに見やすいUIってどんなの？
引用元：https://news.ycombinator.com/item?id=43925732
McMaster-Carrのサイト誰も挙げてないけどさ［1］、”一番情報密度が高い”ってわけじゃないかもだけど、クリーンで機能的だし、情報いっぱい見やすく表示してるよね。［1］ https：//www.mcmaster.com/
Quoraにあった絶対すごいMcMaster-Carrのサイト誕生秘話についての回答があってさ、記憶だと：
・最初のECサイトはひどくて（ほぼカタログのページ再現？）あんま使われなかった
・ユーザビリティ重視、特に認知負荷減らしたリデザインですぐに注文増えて、しばらくして事業の大部分占めるくらいになった
・あと定期注文にも最適化されてたよ
誰かあれか、もっと良い記事見つけたら教えてほしい（Medium.comの記事じゃないんだ）。iacollaborative.com/work/mcmaster-carr/は基盤作った会社の言及だけで、全体の設計者じゃない。このリンクは良いかな：https：//www.bedelstein.com/post/mcmaster-carr
もちろんここでも前に議論あったけどね：https：//news.ycombinator.com/item？id=34000502
サイトがめっちゃ速く読み込まれる理由の動画：https：//www.youtube.com/watch？v=-Ln-8QM8KhQ
（これはMedium.comの記事から）
みんなと逆意見だけど、俺はMcMasterよりDigiKeyとMouserのサイトの方が好きだなー。絞り込むときのフィルターとか適用するパターンが、McMasterの自動更新ウィンドウ待つより全然速い。大体、何か探すときって決まった一個じゃなくて、どんな選択肢があるか知りたいんだよね。McMasterで範囲選ぶのはいつもちょっと面倒くさく感じるけど、Digikeyはいつも上手くやってる。
あとMcMasterがちょっとウザいけど面白いのが、在庫品のブランドを消すのに必死なとこ。なんでそうしてるかは超わかるけど、たまに意味不明なときもあるんだよね。Texas Instruments TI-83 Plusじゃない、126ドルの普通の”graphing calculator”が欲しい？ほらよ！［1］。誰も騙されてないってば。［1］ https：//www.mcmaster.com/8392T11/
このサイトがこの標準でやってるだけで、どれだけ追加のトラフィック、リンク、SEO効果、一般的なブランド認知を生み出してるんだろうね。
メリットのフライホイールだ。
てかさ、McMasterのリンク、検索エンジンで見たこと一度もない気がするんだよね。直の品番とか、”91251A449”でGoogle検索しても、McMasterは結果に出てこないもん。なのにその製品のURLはただのhttps：//www.mcmaster.com/91251A449/なんだよな。
そしてその内部と外部デザインには何か実用的なものがあるよね。派手さも飾り気もなく。。99％情報で低遅延。
ちょっと調べてみたんだけど、君が覚えてる答えは存在しないんじゃないかな。Google、Quora、HNでキーワードと日付絞ってたくさん検索した結果、見つかるのはIbrahim Bashir（https：//www.quora.com/Who-designed-UI-UX-and-developed-the-w…）って人で、彼が2003-2005年に働いてた（https：//www.quora.com/How-many-people-work-for-McMaster-Carr…）。で、彼が書いてるんだ：
”McMaster-Carrにはサイト含め社内ソフト開発やるシステム部門があるんだ。実際、在籍中にフロントエンド機能とか色々やったんだけど、UXリーダーは実質1人だった（今ではチームとか機能は拡大してると思う）。
サイトのデザイン哲学はEdward Tufteに強く影響されてて、俺とかエンジニアチームの数人は重要な概念を学ぶために彼の講座に登録したんだ。
McMaster-Carrの面接で、初代サイトを自分で作って、いつか”本格的なもの”になるなんて思ってなかったって話してくれたディレクターをはっきり覚えてる。彼の名前がどうしても思い出せないんだけど、頭の良い人で、今頃は素晴らしいことやってるんだろうな。ある月曜の朝出勤したら、彼の机は空っぽで、ホワイトボードに”poof”って書いてあったんだ。”
時期と彼の説明考えると、McMaster-Carrの内部の人がそれについて書いてる可能性は低いし、君が覚えてるのがこれに違いないよ、もし何か覚えてるならね。
（で、https：//iacollaborative.com/work/mcmaster-carr/はここでは役に立たなさそう）
低遅延なとこ、特にすごいよね。Wes Bosがこれを実現するために使われてる技術の複雑さについて掘り下げてる動画これだよ：https：//www.youtube.com/watch？v=-Ln-8QM8KhQ
これって、フロントエンドやデザイン担当にTufteの研修受けさせるの、悪くない投資になるんじゃないかって示唆してるよね。
なんかさ、彼らが全部ジェネリック化（汎用化）してるの、俺けっこう好きかも。意思決定の認知負荷減るし、全部の選択肢をスペックに基づいて、マーケティングのくだらない話じゃなくて、一番均一な形で表示してくれるからさ。
”Black oxide screw”みたいなのは出てくるけど、あの番号は何にでもついてて、全然関係ない物にもあり得るよね。検索クエリとしては全然良くないよ。
そうかもだけど、DigiKeyの”WM7610CT-ND”とか”0533980671”みたいな他のサイトの品番はすぐ見つかるのに、McMasterの番号はGoogleで検索してもサイトが出てこないんだよね。まあ、McMasterはカタログを保護してるみたいだけど。でも、McMasterの品番は大体10文字の数字に”A”がついてるから、それで見当つけてサイトを見に行くことはできるかな。
大体は大丈夫だけど、McMasterはメーカーじゃなくてサプライヤーだから、メーカー直販を防ぐために情報を曖昧にしてるのかもね。
例えば、WB Jones製のバネをMcMasterから買ったんだけど、品番4011で検索してもMcMasterでは見つからない。McMasterの番号を知らないと再注文が大変なんだ。
ただ、ネジみたいに互換品を扱う場合、全メーカーを載せるのは難しいだろうね。拠点ごとに仕入れメーカーが違うだろうし。
SEO気にしないなら、コンポーネント設計が良いSPAも同じように見えることあるよね？
クリックするだけで主要コンポーネントのパラメーター取ってくるだけなら速いんだけど、大体実装がイマイチだったり余計なものが多かったりして遅く感じちゃうんだ。
本当にそうだよね。あれは最高のセッションだよ。もし行けなくても、本はすごくおすすめ。
https://www.goodreads.com/author/list/10775.Edward_R_Tufte
ここに面白い動きがあるよね。もしMcMasterの品番がGoogleで検索できたら、みんなMcMasterのサイトじゃなくてGoogleで検索するようになる。
そうすると競合がそのロングテールキーワードで入札したり最適化したりするチャンスになる。
一方で、McMasterの品番を使いたいならMcMasterサイトを使うしかないって慣れさせれば…一度顧客になれば、サイトや在庫で不満を感じさせない限り、一生顧客になる。
インバウンドを犠牲にして定着率を上げてるんだ。これは彼らのユニークな顧客層向けに設計されてるに違いないよ。
McMasterの全てがまず紙のカタログだった時代に遡ると思うんだ。今でも同じビジネスモデルでやってるけど、今はインターネットがある。
供給される商品は変わるかもしれないけど、毎年発行されるカタログの仕様は満たしてる。
もしTI-83 Plusが確実に手に入ることが保証できたらカタログに載せたんだろうけど、できなかったから載せない。
そして今でも一部の顧客向けにその紙カタログでやってるから、ウェブサイトもそれに合わせなきゃいけないんだと思う。個人的な見解だけど。
電卓は極端な例だけど、昔から彼らが全てを隠してるのは、メーカー品番で他の場所で買われないようにするためかなって思ってたんだ。
McMasterは多くの場合で間違いなく高いけど、彼らが提供するサービスは、何百万もの部品を一つのカタログにまとめてCAD図面やスペックを付けてくれること。
ブランド情報を隠すことで、購入せずにそのメリットだけを得るのを防いでるんだね。
クラスってまだ提供されてる？
数年前に受けようとしたんだけど、どう申し込むか分からなかったんだ。
今はビデオ講義だけみたいだね。
それでも受ける価値はありそうだけど、ただ気になったんだ。
そうそう、カタログ本はそれ自体すごいんだ。ウェブサイト見ただけじゃ想像できないくらいの商品数で、何千ページもあって商品の写真や表がきれいに並んでる。フィルタなしのウェブサイトそのものって感じ。たまに見たり、本棚に並べたりすると“できるエンジニア”って気になれるけど、断然ウェブサイトの方が使いやすいね。
あなたが探してるのは rockauto.com みたいなやつだよ、あなたの業界向けのね。個人的にはMcMasterより優れてると思うな。
前から思ってたんだけど、高速でレスポンシブなサイト作りって技術的な問題じゃなくて、社会とか政治的な問題なんじゃない？必要なリソースを取ってきてDOMを更新するだけのサイトなんて簡単に作れるのに、マネージャーが分析用にクリックとか全部追跡するトラッカーを20個も付けろって言い張るんだよ。それともフレームワークってマジでそんなに遅いの？
意図的なのかわかんないけど、理由はこれだよ、noindex ディレクティブ。
＜meta name=”robots” content=”noindex, noarchive, noimageindex” /＞
要するに、ASP.net、イメージスプライト、yui、jquery、プリロード、キャッシュってことね。
これは…素晴らしいね。GoogleやFacebookは広告で利益を吸い上げる仕組みを作ったんだ。企業は競合と入札し合って、結局利益のほとんどを広告に消すことになる。GoogleやFacebookが莫大な利益を上げてるのはそのため。McMasterが彼らの土俵に乗らず、自社サイトの圧倒的な価値で勝負してるなら、それは本当に大胆で尊敬に値する戦略だね。
もしプロダクトページがいっぱい（何百万とか）あるなら、検索エンジンに全部インデックスさせないのもアリだよ。収益が高いページとか、特定の SKU ページよりも多くのキーワードに引っかかりそうなページを優先的にインデックスするのがいいと思う。
tracing/profiling/binary analysis のUIを探してみて。
3D modeling / CAD ソフトなら Blender とか Rhino とか。
オーディオ系だと ’DAWs’ で検索できるよ。
今日のソフトと対比するのに役立つかもしれない例もいくつかあるよ。
DAWに賛成。基本的なコンセプトは分かってても、新しいの（Logic, Reaper, Ableton）試すたび最初は圧倒されるんだよね。何があるべきかは大体分かるんだけど、ツマミとかボタンの数が半端なくて…。でも慣れてくると、必要な情報だけあって、それ以上でもそれ以下でもないって分かって、自然と使えるようになる。
（特筆すべき例外： GarbageBand。これは逆効果で、すぐ使い始められるけど、使うほどイライラしてくるんだ。）
Ardour はデフォルト設定がすごく良いよ。 Windows の Wavosaur や Win2k/9x 時代の Waveshop もシンプルで良い例。 Reaper はカスタマイズ性高いけど、それが逆に overwhelming に感じる人もいる。 Ardour は最初から分かりやすかった。 有料オープンソースの良さかもね。 Audacity は古いバージョン（1.26まで）がモジュール性高くて良かったけど、それ以降は肥大化しちゃったかな。
Logic Pro X のアクセスしやすい UI にはマジで感動したね。 機能はたくさんあるんだけど、邪魔にならないし、重要なのは結構見つけやすいんだ。 Reaper は、その点ではそんなでもないかな。 ルーティングは…柔軟だけど、残念ながらどうでもいいところでまで柔軟だったり、逆に邪魔になったりする。
もっとコメントを表示（1）
DAWとオーディオプラグインは良い例だよ。複雑なUIは難しいけど、Fabfilter, Oeksound, Denise Audio, Newfangled Audio なんかは上手くやってる。 Fabfilter はサブメニュー使うけど、機能が多いから必要かも。 Denise Audio は全部見えるシンプルUI、 Newfangled Audio は複数ページで分けてる。 どのコントロールを見せるか、どう整理するかが重要だよね。
https://ui.perfetto.dev/ もこの流れで良い感じだよ。
U.S. Graphics Company のリンクに TUI の例がいっぱいあるの、良いね。 htop が頭に浮かんだよ。 TUI アプリのギャラリーもあるよ。
Renoise は tracker UI の DAW で、情報密度がめちゃくちゃ高いんだけど、上手くいってると思う。 古い tracker を使ってみた中では、新規ユーザーにもちょっと親しみやすい感じかな。
RhinoのCLI中心UIは好きなんだけど、LinuxでWineで動かすのがほぼ無理なのが残念なんだよね。
素晴らしいアイデアだね。JavaだとJava VisualVMとか”JDK Mission Control”があるよ。
DAWについては全く同感だね。初めてFL Studioを開いた時、飛行機の操縦席を見てるみたいだったよ。
ごく簡単なタスクのために最近Blenderを使ってみた者だけど…BlenderのUIは本当にひどいね。直感的でないUIの設計方法の例として以外、何かの例として使うべきじゃないと思うよ。
プロ用ツールってプロユーザーの効率のために作られてることが多くて、最初見ただけじゃ分かりづらいんだよね。親コメントの他の例、例えばDAWもこの問題があるし、Blenderも例外じゃないよ。全体的には昔よりずっとマシになったらしいけどね。
直感性と密度は別物だと思うよ（両方欲しいけど）。Blenderは3D経験がないと難しいのか、それともBlender自体が難しいのかずっと疑問だったんだ。私はデジタルアート経験ないけど、チュートリアルで少し使えるようになったから。InkscapeとIllustratorだと、オープンソースは好きだけど比較にならないね。Illustratorの方がかなり使いやすかったよ。
それはすごく分かるよ。3Dモデリングを始めた時、Blenderのスタートはすごく大変だったな。慣れてチュートリアルをいくつかやったら操作しやすくなったよ。あれはたぶん10年前だから、それ以来もっと複雑になったに違いないね。
キーボード操作向けに作られてるけど、同意だね、UIの構造はあまり良くないな – ”mystery meat”が多すぎるよ！
BlenderのHOWTO動画を見ることがあるんだけど、『テンキーの+を押して』とか言われると、『やべえ、次はMETAキーを使えとか言われんのかな？』って思っちゃうよ。
productchart.comっていうプロジェクト作ってるんだ。商品のリストを僕が”product chart”って呼んでるものに置き換えるんだよ。値段とか発売日とか一つのパラメータじゃなくて、二つのパラメータでソートしてXYチャートを作る感じ。商品の情報は動的に表示されて、デフォルトでは画像だけ。ホバーするとツールチップにもっと詳しい情報が出て、”details”をクリックすると全部のデータが見れる。こうすると300個の商品も簡単に画面に収まるんだ。チャートのインターフェースを見るにはモニターで見てね。モバイルだと普通のリスト表示にしてるよ。
いいアイデアだね。僕は昔、”computer blue book”みたいなやつで、このスペックのノートPCはいくらくらいかっていうのに対応する仕事を少ししてたんだ。ノートPCみたいなやつだと、CPUのベンチマークスコアを見れるオプションがあるといいかもね。CPUモデルのリストってあんまり役に立たないし、Intel i5だって世代によって全然意味が違うしね。僕にはスクリーンのスペックがすごく過剰に強調されてる（7項目）ように見えるな。
映画を探すプロジェクトとか、他にもなんか作ってたっけ？今名前思い出せないや。
edit: 見つけた。gnovies.comとmovie-map.comだね。音楽とかアートとか、他のを探すプロジェクトもあるよ。僕は映画のやつは何度か使ったことあるな。
ユーザーが”must have”フィルター（左側にあるような）と、もっと緩い”prefer”フィルターの間を移動できるようにできないかな？ペイントアプリのSelectみたいに、チャートのエリアを選ぶ感じとか。チェックマーク/スライダーのオプションを3つの値（null、must、prefer）に変えるくらいシンプルでもいいかも。例えば、いくつかのCPUを必須スペックとしてチェックして、他のいくつかをおすすめとしてチェックするとか。Like/dislikeって言った方が分かりやすいかもね。それで、その優先度をチャートの色やサイズで示すとか。
良いアイデアなのに、うわー、ポップアップの仕組みがひどいね。見ているものを隠さない固定された位置にサイドに表示するか、マウスで”Hide”ボタンを追いかけさせないようにしないとダメだよ。
うーん…僕の使い方は、アイテムにマウスを乗せた時にそれを見ているって感じなんだ。だから他のいくつかが隠れても問題ないよ。そして全てのアイテムをまた見たい時は、空いてるエリア（たいてい見たアイテムのすぐ隣）にマウスを移動させるとポップアップが消えるんだ。あと、僕は大抵まずフィルターを使うんだ。例えばノートPCの場合、画面サイズを＞=12inch、重さを＜=3poundsに設定する。そうすると画面に残るアイテムはそんなに多くないんだよ。君は違う使い方をしてるの？
ユーザーがあなたのUXとどうインタラクションするかについての想定は、いつもろくなことにならないんだよ。僕は”big grid”を見て興味をそそられたから、アイコンの上にホバーして、何をするものなのか雰囲気を掴もうとラインに沿って動かしてたんだ。そうやってるうちに、うっかりマウスカーソルが軸からずれてポップアップに入っちゃって、そこに”stuck”（ハマった）状態になって、またポップアップの外にドラッグするまで抜け出せなくて、どこまで見たかすぐに分からなくなっちゃったんだ。
それは納得できるね。一つの提案としては、”Click to hold”ボタンを追加することかな。そうすればダイアログポップアップを隅に固定して、たぶん condensed viewにして、もっとアイテムを選択できるようになる。そうすれば、複数のアイテムを同時に選択して比較できるよ。”Click to hold”は機能の名前としては良くないけど、アイデアは伝わると思う。
アイテムにホバーした時のポップアップに”compare”ボタンがあるの見た？あれで複数のアイテムをハイライトして後で比較できるよ。
全部試したけど、ビュー内のアイテムがハイライトされるだけみたい？全部のダイアログボックスを一度にどこかで見れたらいいなって思ってたんだよね。ちなみにラップトップ使ってるから、画面広さは十分あるよ。
アイテムがハイライトされて、ハイライトされたアイテムが他のアイテムにホバーしたときの比較対象として提供されるんだよ。
すごいウェブサイトだね、でもモニターのセクションがmacOSユーザーのユースケースに全然合ってないよ。俺たちはRetinaグレードのディスプレイ（27インチで5K、32インチで6K）を求めてるんだ。Appleのモニターすら載ってないんじゃないの？
うん、製品のセレクションはまだ完璧じゃないんだ。最初は各カテゴリで最も関連性の高い300製品を表示しようと思ってたんだよね。たぶん、各カテゴリにもっとたくさんの製品を載せた方がいいんだろうね。それ取り組むよ。どれくらい大変か簡単かはまだわからないけどね。だって、最初は300個以上のアイテムを画面に載せると小さくなりすぎるかもしれないし、フィルターを使うたびに追加されるともっとややこしくなるかもしれないし。
あとさ、あのドライブ（https://www.productchart.com/ssd_drives/22778）なんだけど、50ドルの1TBドライブなのに、1GBあたり20ドルって表示されてるよ。他にもたくさんドライブで同じ問題があるみたい。
それは1ドルあたり20GBだよ。
あなたのプロジェクト気に入ったよ。もし提案させてもらうなら、サイドパネルにDPIのオプションがあったらすごく価値があると思うな。DPIが220未満の画面（例えばラップトップ、タブレット、モニターなど）の製品は全然検討しないんだ。
画面がある全カテゴリ（ラップトップ、タブレット、電話、モニター）には”pixels per inch”に軸を切り替えるオプションがあるよ。マウスで軸の矢印の一つにホバーして選択してみて。これって助けになる？
もっとコメントを表示（2）
気に入ったよ。
大きい画像が、スクロールで離れたら数秒かかるんじゃなくて、すぐ消えてくれたらいいな。でもたくさんのデータを表示するのにすごく良い方法だね。
これいいね。このUIって、普通のユーザーより稼いでる人向けっぽいね。聞きにくいんだけど、マネタイズってどう考えてるの？
Affiliate commissionsと、このインターフェースを使いたい会社からのLicense feesだよ。
多分affiliate commissionじゃないかな。
オレはこれをTrader UIとVC UIって呼んでる。Trader UIは情報詰め込み型で、VC系は見た目重視。オレはjupyter notebooksで動くデータフレーム用UIのBuckarooを作ってるんだけど、これはTrader UIって感じで、ヒストグラムとか書式設定とかが組み込まれてて便利だよ。詳細はGitHub見てね→https://github.com/paddymul/buckaroo
UIは邪魔にならないか、自己主張が強いかに分けられるね。多くのSaaSは後者で、ユーザーをツールに留めようとする。でもビジネスツールはサッと価値を得てすぐ出たいのが本音。昔のSlackは良かったけど、多機能化で時間食うようになった。Facebook Workplaceもダメだったな。邪魔にならないUIは価値あるけど地味。
そうそう。車のエアコンの吹き出し口に気づくのって、デザインがひどくて見ないと調整できない時だけだよね。うまくデザインされた吹き出し口なんて、誰も気づかないんだよ。
何か買う時、それが目新しいものだと、売り手は”話し合いたい”って言うんだ。だって市場価格がないから、ふっかけてやろうとしてるわけ。でも、コモディティなら、売り手はできるだけ時間の無駄をなくしたい。同じ価格で同じものを売ってる他の大量の業者に客を取られちゃうかもしれないからね。
中国の一般ユーザー向けUIって、現地のユーザーの好みに合わせてどれも高密度になりがちだね。WeChatとかAliPayとか、大体の中国のローカルアプリのミニアプリを見てみなよ。ほぼ全部、トップページから1、2タップでリンクされてるから。
これ、めっちゃいいパッケージだね。ずっとこういうのが欲しかったんだ。jupyter notebookでデータを見るのが、めちゃくちゃ使いにくいのが信じられないんだよね。だってデータ探索のためにあるツールなのにさ。
ありがとう。low code UIと連携するauto cleaningの最後の仕上げをしてるとこ。今日中には出せるはずだよ。
Buckarooってjupyter notebook以外でも使えるの？
Marimo、Colab、VSCodeで動くよ。community AG-Gridをラップしてるjsライブラリも別のパッケージになってるんだけど、まだそんなに需要ないからNPMには上げてないんだ。
プロのクリエイターが使うソフトのことだね。毎日8時間も一つのソフトをメインツールとして使う人もいるくらい。良いUXと情報密度が高いのが特徴だよ。Blenderはその良い例。UIについてのマニュアルの章があるよ：https://docs.blender.org/manual/en/latest/interface/window_s…
いつかPhotoshopレベルのオープンソース画像編集アプリができるといいな。（DarktableもAperture / Lightroomみたいに。）Blenderがうまかったのは、特にキーバインドで業界標準に合わせたことだね。他のオープンソースソフトはわざわざPhotoshopから離してる。NIH症候群の匂いがするよ。
Darktableには期待しない方がいいよ。開発者はユーザー敵対的。進歩にはフォークか置き換えが必要。誰かがフォークしたけど状況は分からないな。https://github.com/aurelienpierreeng/ansel
そうなの？Blenderたまに使うけど、1.7から長いこと使ってるよ。メインのキーバインドは全然変わってない。それが業界標準なの？（驚きピカチュウ顔）Blenderが優れてたのは、素早く自然なワークフロー。Mayaよりぎこちなかったし。僕の持論は”業界標準ツール”がBlenderに追いついたってこと。でもBlenderには悪評があったから、”大改革”はイメージ戦略かも。
PhotoshopとかIllustrator（Adobe suite全部）に何があったの？アイコン全部モノクロで、文字やツールチップなくしちゃったじゃん。たまに使うユーザーは、前は使えてたのに今じゃ実質的に使えないくらいだよ。
GIMPもこれやったんだよね。IrfanviewとInkscapeにはまだカラーアイコンがあって感謝だわ…
