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.
WEBLIFE（ウェブライフ）｜Shopify構築・運用支援やCMSを中心としたSaaS事業および映像/Web制作ディレクション
Shopifyを利用したECの構築・アプリ開発や、高セキュリティのホスティングサーバーを内包したCMSを提供。数多くの実績をベースとした運用支援やECのプランニングなど、進化し続けるWebに最適なソリューションを提案します。
サブミット (送信) ボタンをデフォルトで無効化しない | Accessible & Usable
公開日 : 2021年10月14日 (2023年10月11日 更新) カテゴリー : ユーザビリティ / アクセシビリティ ウェブのフォームにおいて、サブミットボタンをデフォルトで無効化しておいて、ユーザーの入力不備がなくなったときにボタンを有効化する UI があります。たとえば、利用規約などの文書を読んで同意する旨のチェックを入れないと、あるいは、入力必須フィールドにすべて正しく情報を入れないと、ボタンがアクティブにならない、というものです。 サブミットボタンがデフォルトで無効化されているフォームの例。 このような UI は、アクセシビリティやユーザビリティの観点で、以下の問題があります。 そこに存在しているはずのサブミットボタンが使用できないことに対して、その理由をユーザーが理解できずに、混乱してしまう恐れがある。(ユーザーの側に誤っているという自覚がなくても、ちょっとした見落としや入
Screen Resolution Stats Worldwide | Statcounter Global Stats
Sorry, JavaScript is required to view Global Stats charts.
画面の解像度・アスペクト比まとめ
PC・スマートフォンなどで用いられている、画面の解像度・アスペクト比のまとめ です。 名称、解像度、アスペクト比、主な用途、その他備考について一覧でまとめています。 名称 解像度 アスペクト比 用途
家族アルバム みてねの企画からリリースまでとデザインの意図｜渡辺 直也（Naoya Watanabe）
2022年12月15日に ViViViT さん主催で行われたマスアダプションをつくるデザインロードマップ【デザナレVol.16】に登壇した際のスライドとスクリプトを公開します。 株式会社MIXIで家族アルバム みてねというサービスを作っております。渡辺です。 家族アルバム みてねの企画からリリースまでとデザインの意図、というタイトルで、みてねがどのように生まれたのか、企画からリリースまでを中心に振り返りをしながらご紹介してみたいと思います。 自己紹介ですが、私自身はWebの制作会社でデザイナーとしてのキャリアをスタートしました。その後、フリーランスの期間を経て、2013年にMIXIに入社しました。入社後は2つほど新規事業の立ち上げに参加し、2014年以降はみてねに携わり続けています。 みてねはスマホで撮った子どもの写真や動画を家族に共有し、コミュニケーションをして楽しんでいただくサービス
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
【商用OK】Google Fontsで使えるオススメ英語フリーフォント40個まとめ
この記事では、Google Fontsで使えるおしゃれな英語フリーフォント40個を厳選してご紹介します。 すべてオープンソースで、商用利用100％無料の英語フォントのみが揃い、複数のウェイトとスタイルを含む書体に限定しています。 「どのフォントを使ったら良いか分からない」というときに、参考にしてみてはいかがでしょう。 Google Fontsで使える日本語フリーフォントと一緒に活用しても良いでしょう。 【商用OK】Google Fontsで使えるオススメ英語フリーフォント ベスト40 Inter 極細ヘアーラインから太字まで９ウェイトを収録。 DM Sans Regularスタイルなど３ウェイトとイタリック体を含む６フォントが無料。 Space Mono RegularとBoldの２ウェイト、イタリック体を含む４フォントが無料。 Space Grotesk ５つのウェイトに対応したサンセリ
かんちがいしていた「傾聴」の話 #techtekt Advent Calendar 2021 - techtekt
こんにちは、UI/UXデザイナーの前川です。 この記事はtechtekt アドベントカレンダー2021 3日目の記事です🎄✨ 2日目の昨日は@_k725さんによる「業務する環境をセキュアにした話 その4」 でした。 3日目の今日は、私が最近学習した「傾聴」についてお話ししたいと思います。 傾聴に必要なものは8割がマインドセットとのこと。 そのため、この記事はどのような気持ちで傾聴すべきかということを中心に書いています。 どんな職業／立場でも知っておいて損がない内容だと思うので、ぜひ見てもらえると嬉しいです! こんな人に見てほしい 「傾聴」に興味がある人 他人と話すと疲れてしまう人 チームや組織をよくしたい人 私のかんちがいポイント 同じようなことを考えている人もいらっしゃるかもしれないので、あえて初めに私の話をします。 傾聴について勉強する前、私はこんなことを思っていました。 「傾聴がで
Form Design Best Practices: Structure, Inputs, & Labels | Adobe XD Ideas
XD Ideas / Principles / Web Design / Best Practices for Form Design: Structure, Inputs, Labels and Actions Someone who uses your app or website has a particular goal. Often, the one thing standing between the user and their goal is a form. Forms remain one of the most important types of interactions for users on the web and in apps. Forms are often considered the final step in the jour
デザインシステム、パターンライブラリ、スタイルガイド、コンポーネントライブラリの違い
デザインシステム、パターンライブラリ、コンポーネントライブラリ、スタイルガイドという言葉は、よく同じ意味で使われているのを見かけます。これら４つの概念は関連していますが、同じものではありません。 また、デザインシステムとコンポーネントライブラリの違いについてもわかりづらいと思う方も多いかもしれません。デザインシステムにはコンポーネントライブラリがありますが、コンポーネントライブラリもまた、独立したエコシステムです。（例：MUIやReact-Bootstrapなど） 上記の違いが現時点でわからないという方も、ご安心ください！この記事では、これらの４つの用語を定義しながら違いをわかりやすく説明していきます。また、デザインシステムとコンポーネントライブラリの各メリットや、デザイナーと開発者がこれらをどのように使い分けるかについても解説してきます。 世界で最も種類が豊富であるコンポーネントライブラ
UXエンジニアが知っておきたいデザインシステムの原則 | Goodpatch Blog
Featured image: Business vector created by Freepik UXエンジニアという言葉を聞いたことがありますでしょうか。 私もここ数年で聞くようになった言葉です。UXエンジニアという仕事はまだ生まれたばかりで、定義が曖昧ですが、私は一言で言えば「UXデザインをする、もしくはその工程に関わるエンジニア」のことだと考えています。最近クックパッドさんでもUXエンジニアを採用しており、「UXエンジニア」って何する人？ クックパッド流・開発力を高めるDesignOpsの進め方は私の印象に残っている記事の一つです。 グッドパッチがチーム全員でデザインをしているように、UXデザインはデザイナーだけの仕事ではありません。例えばUIデザインがよくてもページの読み込みが遅いとユーザーの体験は悪くなってしまいます。その他にもエラーメッセージの言葉や見せ方、フォームのバリデ
【読書感想図】 誰のためのデザイン？ 増補・改訂版｜somethingui
デザイン界隈の人にとっては、教科書的な存在の本「誰のためのデザイン？」 学生時代に初版を読んでいたが、当時は内容をちゃんと理解をする以前に「アフォーダンス」という言葉を都合よく解釈して使っていた感はある。 2015年に増補・改訂版が出ていて、改めて読み直してみた。 冒頭にあるように、改訂版として事例が新しいものに変わっているだけでなく、初版で誤解しやすい内容を理解しやすい概念に再編集していたり、デザイン思考やビジネスにおけるデザインなど、時代の変化に沿った内容も多く追加されている。 本の内容自体が、普遍的な内容はそのままに時代の変化に沿って更新していくというのも、この本の中で語られている内容を体現していると感じる。 「頭の中の知識」に細かく記憶しておくのも難しいので、「外界にある知識」として気になった内容を解釈も含めて１枚にまとめてみた。 30年以上前に語られていた概念が現代に浸透している
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to design transaction reference numbers | Michael Gearon
UI cheat sheet: list vs grids
Tabular vs Card-based presentation, which is better for lots of data?
Radix UI
