タグ

UIに関するrryuのブックマーク (103)

  • 「どうやってこの保存を確認するダイアログの代わりをデザインすればいいのか、みんな分かる?」UIのデザインの質問にほとんどの人が同じような答えだったのが興味深い

    いぐぞー ✈️ 旅するプログラマー @igz0 旅とプログラミングをこよなく愛します。 アメリカ大陸🇺🇸を横断しました!!小学生からプログラミング→新卒SIer→Webに目覚め自社開発のWeb系エンジニアテレビ出演経験あり。 個人開発者。読書IT関連を中心にツイートします!!ネタツイート有。アイコンは@ixy先生に利用許諾済み。Amazonアソシエイト参加。 note.com/igz0/ いぐぞー ✈️ 旅するプログラマー @igz0 どちゃくそ偉いデザイナーの人が書いたインターフェースデザインについての定番らしいんだけど、どうやってこの保存を確認するダイアログの代わりをデザインすればいいのか、みんな分かる?? 14章はまだ読んでない。 pic.x.com/ewz9gpcrjl 2024-09-01 18:15:59

    「どうやってこの保存を確認するダイアログの代わりをデザインすればいいのか、みんな分かる?」UIのデザインの質問にほとんどの人が同じような答えだったのが興味深い
    rryu
    rryu 2024/09/03
    「保存したくない」というのは開いた時の状態に戻したいということなので、それを直接できるUIを用意すべきということだろう。
  • なぜ宣言的 UI は壊れにくいのか / Why declarative UI is less fragile

    Zli × サイバーエージェント 合同LT 2024/07/14 https://zli.connpass.com/event/319572/ ReactSwiftUIのような宣言的UIの「原理」を、10分のLTになんとか詰め込んでみました。 Reactフックは名詞起点 = オブジェクト指向…

    なぜ宣言的 UI は壊れにくいのか / Why declarative UI is less fragile
    rryu
    rryu 2024/07/16
    モードというか状態遷移の状態だと思う。内部的な状態変化とそれを外部に反映させるという二つの処理が必要になるが、単純な同期だけなら追加のコードは不要なので無くなってると思っているだけではないだろうか。
  • セルフレジであたふたしてる年配者を見るにあの手の人々は「文字を読まない」ので文字情報は彼らには無力

    おたろう @otarou01 セルフレジであたふたしてる年配者を見るに、あの手の人々の特徴として「文字を読まない」というのがあると思う。 ディスプレイの中にも外にも文字で色々と使い方が記されてるけど、基それらを読まずに直感でボタン押してるだけの様子。 説明書読まない系、結論として文字情報は彼らには無力。 おたろう @otarou01 よくセルフレジで困ってる年配の人を手助けするけど、動きから文字を読んでないのが分かる。 自分は説明書は最初にきちんと読むタイプだが、説明書を読まない人達は文字から何かしらの情報を得て事に当たるという習慣が無いから、困ったらまず目の前の文字を読むという事をしない。 おたろう @otarou01 そういう意味では高齢者が使うインターフェースの開発には日語が読めない外国人をシュミレーションで使うのが適してると思う。 Twitterでも文章が読めない人は沢山居るけ

    セルフレジであたふたしてる年配者を見るにあの手の人々は「文字を読まない」ので文字情報は彼らには無力
    rryu
    rryu 2024/06/24
    セルフレジは普段レジ打ちの人が何をやっているかちゃんと見ているかどうかによると思う。基本の流れの説明は無いので結構初見殺しである。
  • マルスと「熟練が必要なUI」についての議論

    JRの職員がマルスを操作する動画が話題になった。 この動画について、職人性を賞賛する立場と、UIとして問題があるという立場が対立していた。 nobkzさんのこの記事は、「熟練が必要なのはUIとして問題がある」という立場での記述だとおもう。 一連の話題に対して違和感を持ったが、違和感の源泉は明確で、「UIとしてよいかどうか」という立論自体に机上の論理以上のものにならないということもあるが、そもそも「マルスとはどういうシステムなのか」が議論されていないことがおおきい。 わたしもマルスについて名前は知ってはいたものの、具体的にはどういうシステムであるかは知らなかったので、少し調べてみることにした。 マルスについて Twitter(X)で話題になっていたもとの動画はこちらである。 ここだけ取り上げてみて、マルスの良し悪しを論じるのは鉛筆を取り上げて絵の良し悪しを論じるようなものだとおもう。 次の動

    マルスと「熟練が必要なUI」についての議論
    rryu
    rryu 2024/06/08
    機械にそのモードが無いから売れませんとは言えないし、結局教育せずに現場に投入することはできないのだから機械自体は汎用的な機能にするというのはアリだと思う。
  • UIの色を変えただけで大量のクレームを頂戴してしまった話|のなと

    Webプロダクト開発をしていると様々な諸事情によりUI構成を変えたり機能を増やしたり減らしたりすることが多々あると思います。そんな時に避けられない事態として「UI変更に対するお怒りがユーザーからわんさか届いてしまう」ということがあります。今回はUI上の1要素の色を変えただけで虎の尾を盛大に踏んでしまった事件の話をしようと思います。差し当たりどういうUIをどう変えたのかを明示しておきます。変える前がこちら↓↓ beforeUIほんで変わった後がこちら↓↓ afterUIご覧の通り「作業カード」と呼ばれるコンポーネントの色を「緑&黄」から「緑塗り&緑枠線」に変更しました。「え、それだけ?」という声が聞こえてきそうですがそうなんです。それだけなのです。しかしここはレガシードメインのtoB SaaS。toB SaaSではUIの変更がユーザー業務への影響に直結するので軽微な変更を加えるのもハードルが

    UIの色を変えただけで大量のクレームを頂戴してしまった話|のなと
    rryu
    rryu 2024/03/06
    グーグルカレンダーと違うのは白抜きと黒文字がほぼ同数混ざっているから、全体を高速に見なきゃいけない人は目がチカチカする。見ずらいけど直してくれないから我慢してねとか言われるやつだ…
  • 登録手続きのこの画面、生まれた年までひたすら連打できつすぎる→実はここから年選択できるが「悪いUIの例として教科書に載せたい」

    東京都の「018サポート」という給付金の手続きでつまづいてしまう人が続出。特にスマホの手続きの難しさが話題に 放射線科医ふくろう☢投資とポイ活.com @tk2cafe 子供1人ごとに月5,000円もらえる東京018サポートの申請が難し過ぎる。悪戦苦闘してなんとか終了。 中でも生年月日の入力がカレンダーでしかできず年も選択できない。タップ1回で1か月戻る。37年間戻るために450回くらいタップ。 「何としてでも途中で離脱させる」という東京都の強い意志を感じた。

    登録手続きのこの画面、生まれた年までひたすら連打できつすぎる→実はここから年選択できるが「悪いUIの例として教科書に載せたい」
    rryu
    rryu 2023/09/23
    なぜそこをタップしようと思ったレベルのUIで、それに気づいた経緯が知りたい。開発者だとUIのドキュメントを見ているので分かるというのはある。
  • なぜデザインは敗北してしまうのか

    「わかりにくい」デザインのものが、街を見渡すと結構あります。 そして、その中でも特に「カッコいいのに、わかりにくい」デザインについて、『デザインの敗北』というインターネットミームで表現されることがあります。 この言葉は「セブンイレブンのコーヒーマシン」の操作が分かりにくく、マシンに説明のシールがベタベタ貼られていたことから、広く知られるようになりました。(現在は改善されているようです) ちょwわーーかったからw! わかったからちょっとシーーw! pic.twitter.com/KmV18oJGxN — 新佐々木良 / キンモクセイ (@ryo_sasaki) January 28, 2015 これは、カッコいいことと、使いやすいことは全くべつの概念であることを、我々に教えてくれます。 また、さまざまな顧客が訪れ、時間をかけずに購入するコンビニエンスストアで、そのデザインはあっていたのか、と

    なぜデザインは敗北してしまうのか
    rryu
    rryu 2023/07/15
    作っている側は全てを知っているから表示をミニマムにしても全然使えるのだが、大抵の客は初見なので敗北してしまう。松屋のやつは逆に客は熟練者ばかりという例だと思う。
  • ゲーム開発者ら、ロード画面の“進捗バー”を「わざとガクガクさせている」と明かす。進捗バーは、プレイヤーのために嘘をつく - AUTOMATON

    ゲームのロード画面においては、ロードの進行を表す“進捗バー”が用意されていることもある。この進捗バーは、わざと不規則な速さで進むように設計されていることが多いという。開発者たちがSNS上で明かしている。 開発者の口からロード進捗バーについての意外な“真実”が明かされる発端となったのは、コメディアンのAlasdair Beckett-King氏のツイートだ。同氏はゲームのロード画面の進捗バーは均等な速度で動くべきであり、ロードにかかる時間を適切に反映する必要があると問題提起。そうした仕組みを用意してからほかの部分の開発を進めるべきである、との願望を伝えている。ゲームにおいてロード進捗バーが止まったり急に進んだりしがちという、いわば「あるあるネタ」を述べているのだろう。 Game developers need to invent a loading bar that moves at an

    ゲーム開発者ら、ロード画面の“進捗バー”を「わざとガクガクさせている」と明かす。進捗バーは、プレイヤーのために嘘をつく - AUTOMATON
    rryu
    rryu 2023/07/01
    まあ全ての処理を1%刻みで進捗報告できるように作るのは無駄だし、頻繁に進捗表示を更新するとその分遅くなるのである程度の塊で更新せざるを得ない。
  • タッチパネル式食券機を作ってる連中ってバカなの?

    もういろんなところで言われてるけど、最近よく見るタッチパネル式の券発券機ってなんであんなに無駄なステップが多いの? 行きつけのラーメン屋でノーマルラーメンを頼もうと思ったらこんだけの画面を経なきゃならない。 ・ラーメン、サイドメニュー、ドリンクからラーメン選択 ・ラーメン、チャーシューメン、煮卵ラーメンなどからラーメン選択 ・トッピング選択画面でトッピング無しを選択 ・麺普通、大盛から普通を選択 ・お支払方法選択ボタンをタッチ ・電子マネー、現金から電子マネーを選択 ・いくつかの選択肢からたとえば交通系ICを選択 ・カードをタッチ→発券 こんなのこうすりゃ簡単じゃん。 ・注文画面(=初期画面)で注文する品を選択→他メニューやトッピングも追加選択できる状態で「電子マネーをタッチ、あるいは現金を入れてください」の表示 ・カードをタッチあるいは現金を投入して発券(どの電子マネーかは自動判別)

    タッチパネル式食券機を作ってる連中ってバカなの?
    rryu
    rryu 2023/06/27
    おそらく卓上にあるメニュー兼注文端末のUIに引っ張られているのだと思うが、占有できない券売機でメニュー確認する胆力のある人はいないというところが大きなミスマッチだと思う。
  • 俺は歳のせいでセルフレジに対応できないんじゃない

    店によってセルフレジの仕様がぜんぜん違うことに対応できないんだ! なんで西友とヨークフーズとセブンイレブンとファミリーマートで 札の入れ方も小銭を入れる場所も会計スタートボタンも違うんだ? かつて明治末~昭和初期に初めて電話機というものが普及した時期も 対応できない老人はいただろうが、ダイヤルの形状と数字の並びは どこの電話機メーカーが作ったものもほとんど同じで プッシュホンの時代になってもメーカーごとの大差はなかったはずだろ 今のレジ機器メーカー各社はそういうことを何も考えてないのか? あとなぜ現金対応の機器とキャッシュレス専用があるのか? キャッシュレス専用機なんてうちの近所じゃほとんど使う奴がいないぞ! 【2/20追記】 いちばんよく行く西友のはもう慣れてるんだよ そしてなまじ慣れると別の店でぜんぜん違う仕様に出くわしたとき戸惑う(老害) あと電話機の例えは良くなかった パソコンのキ

    俺は歳のせいでセルフレジに対応できないんじゃない
    rryu
    rryu 2023/02/21
    同じ商品を複数買う時におそらく「この商品は2個目ですよ」という意味の警告音が鳴るやつがあるのだが、強い心で無視しなければならないあの音を出す意味はなんなのだろう。
  • 商品一覧ページにおけるページネーションの代替案

    無限ローディングや「さらに表示」ボタンを採用することで、商品の読み込み時にスムーズなインタラクションを提供することができる。 Alternatives to Pagination on Product-Listing Pages by Kate Moran on March 6, 2022語版2022年8月4日公開 最近、従来のページネーションコントロールをやめて、インタラクションコストを少し下げることのできるデザインパターンを選択するECサイトが多くなってきた。これらのパターンを採用したほうがいいのだろうか。それは、提供している商品の数による。 従来からのページネーションでは、商品の一覧を複数のページに分割し、ページごとに一定の数の商品を配置していく。そのため、さらに商品を見るには、画面の上部または下部にある「次へ」ボタンをクリックかタップして、次のページに移動する必要がある。ペー

    商品一覧ページにおけるページネーションの代替案
    rryu
    rryu 2022/08/09
    無限ローディングは名前に反して終わりが来なさそうなほど大規模な商品群に適用してはいけないというのがおもしろい。
  • ユーザーが欲しいと思うものと、本当に欲しいものとのギャップの正体|宇野雄 / note inc. CDO

    こんにちは。note株式会社CDO(Chief Design Officer)の宇野です。 突然ですがみなさんはこんな会話したことありませんか? Aさん「ランチなにべたい?」 Bさん「なんでもいいよ」 Aさん「じゃあラーメンどう?」 Bさん「いや、ラーメンは気分じゃない」 Aさん「😫」 なんでもいいって言ったじゃん!って思うわけですが、Bさんウソをついてたわけではありません。ここで大事なのはBさんの感情変化が起こっているということ。 この時点ではBさんは当に「なんでもいい」と思っています。ただ、その「なんでも」は自分が想像できた範囲でのなんでもを指しています。 そしてBさんはラーメンという選択肢を用意されて初めて「今日はラーメンの気分じゃない」と気がついたのです。 しかし、なぜこんなことが起こるのでしょうか? 極論ですが人間はあまり合理的な思考をしていません。一方で合理的に判断をした

    ユーザーが欲しいと思うものと、本当に欲しいものとのギャップの正体|宇野雄 / note inc. CDO
    rryu
    rryu 2022/05/11
    なんでもいいが虫料理などを含む本当になんでもいい訳ではないのと同様にUIカスタマイズ機能ならなんでもいいという訳ではないだけか気がする。
  • 駅のタッチパネル券売機で、一般の人が躓くところはどこにあるのかという疑問に対して様々な意見 - Togetter

    リンク レイルラボ(RailLab) JR東、みどりの窓口7割廃止 「話せる指定席券売機」導入拡大 | RailLab ニュース [配信:2021/05/11 15:41]JR東日は2021年5月11日(火)、2025年までに管内のみどりの窓口を現在の7割程度まで削減すると発表しました。また... 388

    駅のタッチパネル券売機で、一般の人が躓くところはどこにあるのかという疑問に対して様々な意見 - Togetter
    rryu
    rryu 2022/03/07
    結局、乗る列車がどういうものか分かってないと乗るまでのどこかで躓くので券売機だけ何とかしても仕方がない気はする。特急ときわの座席未指定券とか…
  • これだけは押さえよう!住所フォームの作り方 - ケンオールブログ

    まとめ 住所フォームの作り方 住所フォームを作るときには以下の4つを押さえましょう。 オートコンプリート機能に最適化する 郵便番号フィールドは1フィールドにしてハイフン有無どちらも対応する モバイルUX優先なら郵便番号が入力されたら即座に補完。精度優先なら郵便番号補完ボタンを設置 住所フィールドは「都道府県」「市区町村」「町名以下」の3フィールドが基。「建物」フィールドはオプション 文 地域SNSのユーザー登録、ECサイトの配送先入力、資料請求、自治体サイトでの電子申請など、ウェブサービスを活用する上で住所入力は欠かすことができません。 住所入力をシンプルかつ正確に行えるような入力インタフェース(住所フォーム)は、離脱率を減らし、コンバージョン率を向上させる上で重要です。 郵便番号を入力すると対応する住所を自動入力する機能(郵便番号による住所補完)は、住所フォームの改善方法として最も効

    これだけは押さえよう!住所フォームの作り方 - ケンオールブログ
    rryu
    rryu 2022/03/01
    個人的には住所から郵便番号を補完して欲しいと思うというか、郵便番号から住所を指定させるのは正確な住所を入力させるというシステム要件によるものでユーザーの利便性のためではないと思う。
  • Apple Store でトイレを借りたら使い方が分からず困惑しきり「考古学者か言語学者が要りそうな」追記→正解は?

    はさみたこ @hasamitaco ほんとわからん。 ・お箸が溺れています ・お箸が溺れて苦しみもがいています ・お箸が溺れた場所は水流が強い ・かまぼこタイフーン ・お箸がおにぎりに挟まれそうです ・お箸が細ってるッ! ・かまぼこ、ボンゴレリング、歯磨き粉、歯ブラシが出てくるお得なセット ・かまぼことおにぎりの量の増減 twitter.com/synfunk/status… 2022-02-27 08:37:22

    Apple Store でトイレを借りたら使い方が分からず困惑しきり「考古学者か言語学者が要りそうな」追記→正解は?
    rryu
    rryu 2022/02/27
    謎の個人設定保存2名分という機能からすると説明書を読んで使うのが前提なタイプのUIで、それを店舗に設置するのは初見殺しすぎる気がする。
  • オオバ@UIエンジニア on Twitter: "仕様変更に強い命名は大事だ。ボタンを「OKボタン」や「Noボタン」と名付けていたらヤバいかも。ゲーム開発に仕様変更はつきもの。開発中盤「OKボタンの色を使ってキャンセルボタンを作りたい」というケースもある。結論、用途ではなく機械的… https://t.co/6nwzoBNKWR"

    仕様変更に強い命名は大事だ。ボタンを「OKボタン」や「Noボタン」と名付けていたらヤバいかも。ゲーム開発に仕様変更はつきもの。開発中盤「OKボタンの色を使ってキャンセルボタンを作りたい」というケースもある。結論、用途ではなく機械的… https://t.co/6nwzoBNKWR

    オオバ@UIエンジニア on Twitter: "仕様変更に強い命名は大事だ。ボタンを「OKボタン」や「Noボタン」と名付けていたらヤバいかも。ゲーム開発に仕様変更はつきもの。開発中盤「OKボタンの色を使ってキャンセルボタンを作りたい」というケースもある。結論、用途ではなく機械的… https://t.co/6nwzoBNKWR"
    rryu
    rryu 2022/02/23
    スタイルのバリエーションを連番で作るといくらでも増やせるので便利ではあるが、そもそも適切な名前を付けられていないところが失敗の原因である訳で、設計を放棄する解決策はどうかと思う。
  • Sign-in form best practices  |  Articles  |  web.dev

    Sign-in form best practices Stay organized with collections Save and categorize content based on your preferences. Use cross-platform browser features to build sign-in forms that are secure, accessible and easy to use. If users ever need to log in to your site, then good sign-in form design is critical. This is especially true for people on poor connections, on mobile, in a hurry, or under stress.

    rryu
    rryu 2022/02/09
    IDとパスワードが別画面になっているやつはIDの種別によって次の挙動が異なるからだと思っていたのだが、スマホの画面に収まらないからというのはちょっと信じられない。
  • UIが嘘をつく? UXデザインにおける「楽観的な更新」とSPAでの作り方 - カミナシ エンジニアブログ

    こんにちは、デザインエンジニアのショウです。 突然ですが、UI/UX デザインにおいて、「楽観的な更新」という言葉を聞いたことがありますか?あまり聞いたことがなくても、実は日常にたくさん存在しています。 例えば、 twitter や facebook のいいねボタン。いいねをタップした直後に色がつくのですが、実はサーバーへのリクエスト送信と UI 上のいいねの色付きが同時に発生しています。つまりサーバーからの通信結果待たずに UI を更新しています。 他に、trello でタスクカードを隣の列に移動したり、iMessage や Facebook メッセンジャーでのメッセージの送信、Kindle アプリで途中までしかダウンロード出来てないが読めることなども楽観的な更新です。 図:楽観的な更新を採用しない時と採用した時のメッセージ送信のUI (引用元) 楽観的な更新の意義 早くも 1968

    UIが嘘をつく? UXデザインにおける「楽観的な更新」とSPAでの作り方 - カミナシ エンジニアブログ
    rryu
    rryu 2021/02/02
    そんな名前がついていたとは。「UIが操作を受理したけど処理は終わってない表示を作る・処理が終わるまでUIも反応しない・処理が終わる前にUIが反応する」のどれが一番楽でベターかという消去法だと思っていた。
  • 「UI悪すぎじゃない?」ハンバーガーのオンラインオーダーでオプションを選択していったらパテと玉ねぎ2本だけのバーガーが届いた話

    Tinnamon @casdtem 今日ショック過ぎてツイートも出来なかった…初めてShake shackでオンラインオーダーしたんだけど、バーガーの注文のとこで1枚目写真のようにオプションが並んでんのよ。全部入れて欲しいから全部選択するじゃん?いざべようと蓋開けてみたらバンズの間にパテと玉ねぎ2だけが入ってた😂😂😂 pic.twitter.com/1ORtqPMZDr

    「UI悪すぎじゃない?」ハンバーガーのオンラインオーダーでオプションを選択していったらパテと玉ねぎ2本だけのバーガーが届いた話
    rryu
    rryu 2020/12/09
    オプションとして追加のadditionsとデフォで入っているものを抜きにできるdefaultsの2つがあって、抜きにする操作が「〜を追加」を取り消すという操作なのがややこしい。
  • kohta_fd on Twitter: "このタイプの電灯スイッチ、on/offがわかりにくいし、ボタンの表示は消えるし、レスポンスは超遅いし、全てが最悪なので心の底から絶滅してほしいと思っている。 少なくともこいつのデザインを考えた奴・承認した奴は死んだほうがいい https://t.co/G9fDB1qNWy"

    このタイプの電灯スイッチ、on/offがわかりにくいし、ボタンの表示は消えるし、レスポンスは超遅いし、全てが最悪なので心の底から絶滅してほしいと思っている。 少なくともこいつのデザインを考えた奴・承認した奴は死んだほうがいい https://t.co/G9fDB1qNWy

    kohta_fd on Twitter: "このタイプの電灯スイッチ、on/offがわかりにくいし、ボタンの表示は消えるし、レスポンスは超遅いし、全てが最悪なので心の底から絶滅してほしいと思っている。 少なくともこいつのデザインを考えた奴・承認した奴は死んだほうがいい https://t.co/G9fDB1qNWy"
    rryu
    rryu 2020/09/06
    電気系の赤と緑は通電していることに気をつける立場と通電していないことに気をつける立場とで期待値が変わってしまうという。