How to fix a bad user interface
Hey! This is an excerpt from my book Designing Products People Love, which was published by O'Reilly in January 2016. Learn more about the book and the 20+ product designers from Facebook, Twitter, Slack, etc. who were interviewed about how they work. Have you ever experienced a user interface that feels lifeless? Have you created a UI that just seems to be missing...something? If that's the case,
People + AI Guidebook
The People + AI Guidebook is a set of methods, best practices and examples for designing with AI. Our recommendations are based on data and insights from over a hundred Googlers, industry experts, and academic research. Start hereTo help you get started with our materials, we’ve created a set of AI design patterns.
サブミット (送信) ボタンをデフォルトで無効化しない | Accessible & Usable
公開日 : 2021年10月14日 (2023年10月11日 更新) カテゴリー : ユーザビリティ / アクセシビリティ ウェブのフォームにおいて、サブミットボタンをデフォルトで無効化しておいて、ユーザーの入力不備がなくなったときにボタンを有効化する UI があります。たとえば、利用規約などの文書を読んで同意する旨のチェックを入れないと、あるいは、入力必須フィールドにすべて正しく情報を入れないと、ボタンがアクティブにならない、というものです。 サブミットボタンがデフォルトで無効化されているフォームの例。 このような UI は、アクセシビリティやユーザビリティの観点で、以下の問題があります。 そこに存在しているはずのサブミットボタンが使用できないことに対して、その理由をユーザーが理解できずに、混乱してしまう恐れがある。(ユーザーの側に誤っているという自覚がなくても、ちょっとした見落としや入
Core skills of the Design for Front-end
FRONTEND CONFERENCE 2019, 2nd Nov 2019 デザイン・設計の体幹とスキル
オブジェクト指向UI（OOUI）デザインと、タスク指向UIをかけ合わせたデザインの最適解｜セブンデックス
UIデザインをする際、見やすさや美しさなど表面的な部分にばかり目がいきがちではありませんか？ 実は、UIデザインではUIの構造設計が使いやすさを大きく左右します。 今回はオブジェクト指向UI（OOUI：Object-Oriented User Interfaces）とタスク指向UIについて説明し、構造設計の視点から使いやすいアプリケーションについて考えていきます。 オブジェクト指向UIの前にUIデザインについて知りたい方へは以下の記事がおすすめです。ぜひ併せてお読みください。 オブジェクト指向UIってどんなもの？ ではそもそもオブジェクトとは何でしょうか？ ここで言うオブジェクトは、ユーザーが使おうとしている目当てのものです。 例えば不動産アプリであれば、探したいと思っている物件がオブジェクトになります。 このオブジェクトと対になる言葉がタスクです。タスクは、ユーザーが行いたい事を表します
Design Guidelines for Input Steppers
Summary: Reduce input effort for fields with values that deviate little from the default by allowing users to increase or decrease the number in a single button press. Avoid this GUI control for values with large variability. Designing for data input can be tricky. Limited screen space on a mobile device or high interaction cost can make it difficult for users to type information. There are many i
プロのUIデザイナーに学ぶ！UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.11
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第11弾は角丸やアイコンなどのUI要素、ダークテーマにおける読みやすさに関するデザインのテクニックです。 UI & UX Micro-Tips: Volume Eleven. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ダークテーマのテキストはコントラストを下げる 2. アイコンをわかりやすくするためにラベルを付ける 3. 角丸を補完的に使用する 4. ダークテーマで要素の奥行きを正しく伝える 5. Atkinson書体でコンテンツをよりアクセシブルに 6. メッセージは短く、要点を絞る はじめに 次
UX/UI Design: Growing List of Top Resources (last update 02/2023)
A list of my favourite design resources. Everything that makes your life easier, from UX research to the perfect mockup. Instead of hiding it in the usual Google Doc, from now on it will live here on Medium and will be updated every time I find another little gem. So make sure to subscribe! By the way, this is not about quantity but quality. This list is from my personal point of view and everyday
たった1日で3億円超の現金化が話題に！『CASH』に秘められたデザインの仕掛け。デザイナー 河原香奈子 | CAREER HACK
一夜で3.6億円超が利用された『CASH』デザイン秘話 「買取してほしいアイテムをスマホで撮影＆登録すると、瞬時にお金に変わる」 まるで魔法のような体験を提供してくれるのが、買取アプリ『CASH』だ。2017年6月、サービス公開初日に3.6億円超が現金化され、その反響の大きさに、公開後わずか16時間で一時休止へ。 その後、2ヶ月間の休止を経て、サービスを再開。再開後もわずか2時間で1000万円が現金化され、現在、サービスの安定稼働を推し進めている。 『CASH』の一時停止と再開について、インフォグラフィックや動画を載せたランディングページも話題となった。反響の大きさを物語ると同時に、一つひとつの商品を実際に受け取っている様子が見て取れる。 そんな『CASH』を運営するバンクのデザイナー 河原 香奈子さんが語ったのは、「ポジティブなお金の表現」について。 お金を気軽に手に入れることに対し、不
デザインシステム、パターンライブラリ、スタイルガイドそれぞれの定義と違い
ZackはUXPinのUXデザインライターです。彼の仕事はUX Magやawwwards、 Speckyboyで出版されています。 デザインシステム、パターンライブラリ、スタイルガイドという言葉が、同じような意味で使われていることがあります。 これら３つのコンセプトには繋がりはあれども、決して同じものではありません。 この記事では、定義を明確にして、それらがどのように繋がっているかを視覚化します。そしてデザインシステムを構築するための、主なガイドラインについて紹介します。 デザインシステムの定義 まず直接の定義を理解しましょう。そうすることで、これらの概念がどのように繋がっているかを学び、より良い製品作りに活用する方法を考えることができます。 デザインシステム―デザインの基準やドキュメント、原則、および基準を達成するためのUIパターンやコードコンポーネントなどのツールキットを、すべて含んだ
UIにも必要な錯視への考慮、デザイナーが行う視覚調整｜Goodpatch Blog グッドパッチブログ
視覚調整は、人間の脳に対して視覚的なアプローチをとることが多いデザイナーにとって大切なスキルです。 今回は、UIデザイナーが行う視覚調整の主な例を紹介していきます。 視覚調整とは 視覚調整とは、人間の錯視（目の錯覚）を考慮したデザインの調整のことを指します。 身近な企業ロゴに施されていることも多く、Googleのロゴでも取り入れられています。（以下の画像は、Googleのロゴを考察したツイート↓） Is this a joke, Google? pic.twitter.com/qrL8U2Vrhw — Give Me Internet (@GiveMeInternet) 2017年9月25日 この考察内容を見ても、調整前と調整後の違いはかなり微量であるように思えます。本当にここまで細かい調整が行われているのかと疑ってしまいたくなりますが、実際にこのような微妙なデザインの調整はUIデザインに
UI デザイン初心者がヤコブ・ニールセンのユーザビリティ 10 原則について学んでみた | cloud.config Tech Blog
WEB アプリを作る過程で、ヤコブ・ニールセンのユーザビリティ１０原則について学びました。学んだことを自分なりに噛み砕いて解釈することができたので共有したいと思います。 ユーザビリティ１０原則とは ユーザビリティ研究の第一人者であるヤコブ・ニールセンが提唱した UI デザインのために注意すべき点をまとめたものです。 1994 年に提唱され、今でも UI デザインの問題抽出の際に用いられています。 まずは 10 原則を列挙した後、それぞれの解説をしていきます。 #1: システムの状態を可視化する (Visibility of system status) #2: 実世界とシステムをマッチングさせる (Match between system and the real world) #3: ユーザに制御の主導権と自由を与える (User control and freedom) #4: 一貫性
UI設計のユーザビリティヒューリスティック
人が持つ普遍的な経験則に基づいたUI設計のための10個の原則。 ユーザビリティ評価のひとつであるヒューリティック評価で、90年代初頭に、Jakob Nilsenヤコブ・ニールセンとRolf Molichロルフ・モリッヒによって開発され、1995年にヤコブ・ニールセンが10の原則をNielsen Norman Groupにて公開した。 人の一般的な経験則に基づいて作成された原則のため、ほとんどの製品やウェブサイト、アプリなどに実施するヒューリスティック評価や、UI設計、ユーザビリティー評価に使うことができる。 10個の原則は以下の通りである。 システムステータスの可視性 現実世界とシステムの一致 ユーザーに操作の主導権があり自由がある 一貫性を維持しつつ、標準にならっている エラーの防止 覚えていなくても見て分かるようにする 柔軟性と効率性をもたせる シンプルで美しいデザインにする ユーザー
UI/UXデザインの勉強におすすめの本・教材 16選
このページでは、UI/UXを学ぶための教材を紹介していきます。ノンデザイナーの方にとっても役立つ教材も多数取り上げているので、是非目を通してみてください。 この本について どんな本？ 20年以上前に書かれたにも関わらず、いまだに読み続けられている名著です。今どきのアプリのようなUIについては触れられていませんが、UI/UXの本質を学ぶのには最高の1冊です。 学べることは？ 「ユーザがエラーを起こすのはデザインのせいである」というようなデザイナーとしての姿勢から、具体的にどうやってそのエラーを防ぐかというところまで徹底的に解説されいます。この1冊でUI/UXの考え方の基本を押さえることができます。 難易度は？ 誰にとっても身近なものが具体例として取り上げられており、興味を持ってサクサクと読み進めることができます。最近になって改訂版が出版され、もう少し読みやすくなったようです。 おすすめ度 （
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UI cheat sheet: list vs grids
Tabular vs Card-based presentation, which is better for lots of data?
Radix UI
Refactoring UI
Design System Checklist
高齢者でも使えるプロダクトUIの挑戦 / Designing User Interfaces for the Elderly
