フィッツの法則と、UXにおけるその応用
ターゲットまでの移動時間は、ターゲットの大きさとターゲットまでの距離に依存する。 Fitts's Law and Its Applications in UX by Raluca Budiu on July 31, 2022 日本語版2023年1月10日公開 歴史 ポール・フィッツは、ヒューマンエラーが単なる人間による誤りではなく、不適切なデザインに起因することを理解した最初の心理学者の1人である。彼は第二次世界大戦中に飛行機のコックピットのデザインを研究し、ヒューマンエラーが原因であるとされていた多数の戦死が、実際にはデザインの不適切さによるものであると主張した。 1950年代になると、彼はシャノンの有名な情報理論の影響を受ける。そして、ジョージ・ミラーがチャネル容量の概念を人間の記憶に適用し、その過程で人間の短期記憶の情報処理能力として有名なマジカルナンバー7を導き出したように、フィッ
アクセシブルなフロントエンドコンポーネントの完全ガイド - 前編 | POSTD
クイックサマリー ‐ 私たちは一連の短い記事で開発者とデザイナーにとって有用なツールやテクニックを紹介しており、直近の記事ではCSS監査ツールとCSSジェネレータを取り上げました。この記事ではタブやテーブルからトグルやツールチップまで、信頼性の高いアクセシブルなコンポーネントを見ていきます。 目次 以下にすべてのアクセシブルなコンポーネントをアルファベット順に記載しました。目次をスキップするか、スクロールして1つずつお読みください。 :focus styles autocomplete buttons carousels "close" buttons content sliders checkboxes color systems color palettes comics component libraries cookie consent prompts dark mode data
全部、完全に商用利用無料！スマホのUIデザインに適した2,186種類のSVGアイコン素材 -Fluent Icons
MicrosoftからAndroidやiOSのスマホのUI向けにデザインされたSVGアイコンを紹介します。もちろん、デスクトップで使用しても問題ありません。 アイコンは角が丸く、形状が単純化されており、スマホでの視認性や操作性が考慮されています。スタイルはソリッドとベタ塗りの2種類、2,186種類すべてがSVGアイコンです。 Fluent Icons ※オープンソースなので、有志によるサイトも作成されています。 MITライセンスで、商用プロジェクトでも無料で利用できます。 アイコンは全部で、2,186種類！ アイコンのスタイルは、Regularのソリッド、Filledの塗りつぶしの2種類。 スマホのUI用に、24pxでデザインされたアイコン。 ダークモードにも対応。 アイコンはSVGで、コードのコピーあるいはファイルのダウンロードで利用できます。 すべてSVGアイコンなので、サイズやカラー
キーボード操作を意識したHTML/CSSコーディング
この記事は 「Webアクセシビリティ Advent Calendar 2020」 5日目の記事です。 アクセシビリティ Advent Calenderの記事を寄稿するにあたり、少しの工夫であらゆるユーザーに対して優しいWebサイトを作れるようなHTML/CSSコーディングの方法についてまとめました。より多くの人にとって優しい・使いやすいWebサイトを作ることは訪れてくださるユーザーの方々だけでなく、クライアントにとってもユーザーの機会損失を防ぐことができるので多大なるメリットがあります。（よくコードが適当でもデザインが見えていれば良いって意見を聞くけれどそんなことはない） ただ、アクセシビリティを意識したHTML/CSSコーディングについてのまとめだと内容量が非常に多くなりZennなら記事より本で出したほうがベターになってしまうので、今回は数あるアクセシビリティの視点から「キーボード操作で
複雑GUIの会を主催した - No Regrets in Bathing
「GUIの雑談を無限にしたいなぁ」と思い、会を開催しました。 twipla.jp 上記のイベントページを立てて、Twitter上で募集をかけたところ、 この内容だけでピンと来てしまったガチ勢が9人も集まりました。 ドローツールやマインドマップ、作曲ツール等を自作するフルスクラッチマンたちです。 予約したルノアールの会議室は過密状態になってしまいました。 （もう少し広い部屋にしておけば…と後悔しました） （ルノアールです） #複雑GUI会 pic.twitter.com/XDGWs3EwZd— みやおか (@miyaoka) May 2, 2019 職人タイプの方が多かったので終始和やかな雰囲気でしたが、 やはり実装に深入りしていくことが多く、あまりの情報密度に 私も話についていくのが大変だったと自白しておきます。 あと、なぜか開催前に「バウンディングボックス大会」が行われる雰囲気が醸成され
Is this my interface or yours?
The evolution of My ComputerRemember back in the day when Windows had a My Computer icon? It was a glorious little icon that represented all the stuff you had on your computer—all your programs, all your work, all the digital pieces of you. In later versions of Windows, Microsoft changed the label of this icon to Computer, then changed it again to This PC. Did they change it because “my” was misle
16種類（45カテゴリ）の業界150サイトの調査から分かるスマートフォンサイトUIの現状10選（スライド付）
2015年5月、スマートフォンによるGoogleの検索数がPCでの検索数を抜いたというニュースがGoogleの公式ブログで発表されました。昨今の私たちは多くの情報をスマートフォンで検索しています。その流れに伴って、現在は多くの企業がスマートフォン用に最適化されたWebサイトを持つようになりました。 我々Web制作者はこの流れの初頭、PCサイト制作で培ったノウハウを元に、手探り状態で制作していたのを記憶していますが、この数年の間で一定の制作ノウハウが蓄積されてきたように思います。 しかしデバイスが多様な進化を遂げる中で、スマートフォンサイトのUI作法も日々刻々と変化し続けています。私たちWeb制作者は一定のノウハウを使い回すことに固執せず、常に新しい動向を自分の目でキャッチして知識を刷新し、日々の業務にフィードバックさせる活動が大切です。 というわけで少々前置きが長くなりましたが、今回は昨今
モバイルWebのUIを速くする基本テクニックがわかる──Google I/O 2016 High Performance Web UI
モバイルWebのUIを速くする基本テクニックがわかる──Google I/O 2016 High Performance Web UI 川田寛（ピクシブ株式会社） こんにちは、ふろしきです！ 私はHTML5 Experts.jpで、過去2年ほどGoogle I/Oの情報を発信し、Web技術の変化についてお伝えしてきました。振り返るとGoogleは、2014年にモバイルWebの提唱と技術要素の拡大を図り、2015年からは「RAIL（モバイルWebが目指すべきパフォーマンス指標）」や「Progressive Web Apps（アプリのように振る舞うWeb）」といった、モバイルとの親和性が高いWebを作り出すための”考え方”を推し進めました。今年2016年は、さらにそれを踏み込んでいったという感じがします。 今回のI/Oで取り上げるのもそのひとつ。毎度お馴染みGoogle Developer A
キャンセルのキャンセル - くらげだらけ
photo by wootam! キャンセルのキャンセルについて社内ブログに書いたので、こっちにも書いておこうと思います。 confirm, dialogのdesignは案外と難しいものです。 どのタイミングで表示すべきか？ どのようなメッセージを書くべきか？ どのようなアクションをユーザーに提示すべきか？ そもそも本当に必要なのか？ いろいろと考えることは多いですが、「そもそも本当に必要なのか？」という問からスタートして、ではなぜ必要なのか？と考えていけば最適な解決方法にたどり着けるように思います。基本的にDialogは邪魔なものだと思うので、表示しないのが一番です。 confirm, dialogのdesignはどうあるべきなのかというのは、基本的にはiOSやAndroidのDesign Guidelineにも書かれているのでまずはそれを読んでおけば多くの場合、最適な解を見つける指針に
管理画面を開発する際に気をつけたこと - クックパッド開発者ブログ
クックパッド編集室の加々美です。 現在、食や暮らしのトレンドを発信するメディアであるクックパッドニュースの開発に携わっています。 「総合職で入社した新卒がクックパッドでエンジニアになるまで」 というエントリを投稿した2015新卒の土谷と同様に、2014年に新卒として入社後、総合職から研修を経てエンジニアへと転向しました。 今回は、クックパッドニュースの管理機能の改善を行う際に注意した点についてお話します。 自分がその管理ツールを使う人になる 事業体制の変化もあり、現状のクックパッドニュースの管理画面に関して、いくつかの運用上の問題点が指摘されており、その改善を行いました。 管理画面改善の進め方としては 「現状の業務フローの把握」「問題点の把握」「理想の管理画面の設計」 という基本的な手順で取り組みました。 現状把握と問題点洗い出しの方法としてまず思いつくのはヒアリング中心で進めていく方法で
確実に良くするUI/UX設計
日経電子版のリニューアルで、コンセプトモデル設計とプロダクト監修をさせていただいた。 超大型アプリを完全リニューアルするとき、KPIを落とす事なく、どのように整合性やユーザー利便性を担保していくか。 「日経電子版×Sansanアプリ開発プロジェクト成功への道〜アプリ開発者勉強会Vol.2」より http://connpass.com/event/16187/
Private Presentation
Private content!This content has been marked as private by the uploader.
月間1000万PVを支える「UIの言葉選び」のためのチェックリスト - クックパッド開発者ブログ
クックパッド ダイエット事業室の田中です。昨年５月からスタートした「クックパッド ダイエット」にリリース当初から携わり、デザインやダイエットニュースの編集を担当しています。 現在クックパッドダイエットのサイトは月間1000万ページビューを超え、「ダイエットといえば『クックパッド ダイエット』」と言われるような世界を目指して、日々、運用・改善に取り組んでいます。 今回紹介するのは、クックパッドダイエットのUIをデザインする時の「UIの言葉選び」の具体的なチェックリストです。 最高のレイアウトでも言葉がイマイチだと台無しに みなさんは、UIの中の「文言（言葉）」をどのようなプロセスで決定していますか？ UIのレイアウトや遷移の方法について熟考する姿勢を持っている方は多いと思うのですが、文言の検証方法については確固たる視点を持っていない方もいらっしゃるのではないかと思います。 UIで王道のレイア
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「脳汁ビシャビシャに出た」「無限ループって怖くね？」ポーラの特設サイトがスクロール芸極めてると話題に
JavaScriptで背景色から文字色を導出する
UIデザイナーを取り巻く様々な設計 / Intrinsic meaning of UI Design
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
GUIアーキテクチャパターンの基礎からMVVMパターンへ