Ultimate ChatGPT cheatsheet for UX UI Designers
AI won’t replace designers, but designers who use AI will replace those who don’t. Similar to how calculators were once thought to replace mathematicians, many fear that AI will replace designers. However, this is a misconception. Just as calculators didn’t replace mathematicians, AI won’t replace designers either. Instead, AI will offer you — designers, new tools and capabilities to increase thei
サブミット (送信) ボタンをデフォルトで無効化しない | Accessible & Usable
公開日 : 2021年10月14日 (2023年10月11日 更新) カテゴリー : アクセシビリティ / ユーザビリティ ウェブのフォームにおいて、サブミットボタンをデフォルトで無効化しておいて、ユーザーの入力不備がなくなったときにボタンを有効化する UI があります。たとえば、利用規約などの文書を読んで同意する旨のチェックを入れないと、あるいは、入力必須フィールドにすべて正しく情報を入れないと、ボタンがアクティブにならない、というものです。 サブミットボタンがデフォルトで無効化されているフォームの例。 このような UI は、アクセシビリティやユーザビリティの観点で、以下の問題があります。 そこに存在しているはずのサブミットボタンが使用できないことに対して、その理由をユーザーが理解できずに、混乱してしまう恐れがある。(ユーザーの側に誤っているという自覚がなくても、ちょっとした見落としや入
スマホにおけるボタンの配置、上と下、左と右、どのように配置するのが最適なのか詳しく解説
スマホでボタンをどこに配置するとユーザーは操作がしやすいのか？ 上部と下部、水平に並べたボタン、垂直に並べたボタン、3つ以上のボタンなど、ボタン配置について包括的な分析を行い、ボタンをどのように配置するのが最適なのか解説した記事を紹介します。 The Optimal Placement for Mobile Call to Action Buttons by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに グーテンベルクの原則 上部と下部のボタン 水平に並んだボタン 垂直に並んだボタン 水平と垂直のハイブリッド スティッキーボタン まとめ はじめに ボタンをどこに配置するかによって、ユーザーがタスクを完了する時間に影響を与えることを知っていますか？ タスクを素早く完了することで、より満足のいくエ
Webデザインをセンスに頼らず、感覚で判断せず、ロジカルに取り組むためのデザイン書 -ウェブデザインの思考法
ウェブデザインの善し悪しや品質は、感覚的に語られ決定されてしまうことがあります。例えば、デザイナーのセンスだったり、クライアントのフィーリングだったり、そういう経験はありませんか？ ウェブデザインの要素や見せ方における機能性・情緒性をロジカルに解説したお勧めのデザイン書を紹介します。ノンデザイナーズ・デザインブックの内容をさらに掘り下げ、ウェブデザイン用にアレンジされています。 本書は本日、5/31発売！ ウェブデザインに携わるすべての人、ウェブデザインを構築するデザイナー、そしてそれを評価するディレクターやクライアントが同じベースで円滑にプロジェクトを進められるようになる一冊です。 そのデザインになった理由、良いウェブデザインの条件、ウェブデザインにおける「品質」や「理想」。依然としてその答えは属人的であり、感覚的に語られ決定されていることも少なくありません。本書がそんな状況を改善し、ウ
住所入力フォームにテキストエリアを使うべき理由
Webフォームで住所を記入する際に戸惑ってしまうことはありませんか？ ある調査によると、30％のユーザーが「住所欄２」に入ったときに困惑して立ち止まることが分かりました。 そればかりでなく、この「住所欄２」は「住所欄１」の入力を不正確に分割する原因になるのです。このことはユーザーに混乱と苛立ちを招きます。 「住所欄２」に「アパート名、部屋名、その他」という表記をすることでは問題は解決されませんでした。ユーザーはまだ困惑して立ち止まり、その入力欄が彼らにとって関連性のあるものなのかと悩みました。 慣れている形式を使う ２つの住所入力欄を設けることは、システムがユーザーの現実世界の延長で予想できることに近くあるべきだという原則に反しています。この原則に則っていれば、ユーザーはすでに慣れ親しんだ慣習に基づいてインターフェースを理解できます。 「住所欄２」はシステムが好む形式であり、ユーザーが住所
ブランドをもっとも印象づけるロゴの配置はどこか？ | UX MILK
ユーザーがWebサイトを見るとき、彼らの視線は左を向いています。そのため右側に配置されたロゴにはユーザーはあまり視線を向けず、ブランドリコールが弱くなります。左側に配置されたロゴには多くの視線が集まり、ブランドリコールに繋がります。 中央配置のロゴはサイトトップへのナビゲージョンを邪魔する Nielsen Norman Groupは中央配置のロゴについても研究を行いました。調査によると、ロゴが左と中央のどちらに配置されるかでブランドリコールに違いはありませんでした。位置よりもロゴのコントラストや読みやすさのようなデザイン的な違いがブランドリコールに影響していました。 それだけではなく、中央配置のロゴはユーザーがサイトトップへ遷移するのを邪魔していました。左配置のロゴを比べると、中央配置のほうがユーザーが１回のクリックでサイトトップへ戻ることを失敗する割合が「6倍近く高い」ことがわかりました
追従ヘッダー実装時に使える動作・デザインパターン例 - NxWorld
常にユーザーの視線に入るようにしておきたいとかサイトの回遊率をあげたいなどの理由で実装を頼まれることが多いと追従ヘッダー。 単純に基本となる見栄えを維持してそのまま追従させることも多いですが、少し変化を加えてほしいという要望をもらうことも少なくないので、そういった場面で提案しやすいようによくある動作・デザインのパターン例をまとめました。 紹介しているサイトの動きや見栄えは、いずれもPCでの表示確認時のものになります。 変更を加えずにそのまま追従 スクロール時にデザイン・位置とも特に変更を加えず、単純にファーストビューでの見栄えをそのまま維持して追従させるパターンです。 少しCSSを書くだけで容易に実装できる�点がメリットですが、ヘッダーの領域が広いデザインの場合は�その分コンテンツが見える領域が狭くなるというデメリットがあるので、仕様やデザイン上でどうしてもヘッダー領域が広くなってしまう場
エラーメッセージはフォームのどこに表示するべきか
UX Movementの著者および設立者です。ユーザー体験のデザインスキルの開発を手助けしてよりユーザーフレンドリーな世界のために、このブログを創設しました。 フォームのどこにエラーメッセージを配置していますか？ ユーザーの期待する場所にエラーメッセージが置かれていないと、ユーザーはフォーム入力を完了できなくなってしまうかもしれません。 フォーム入力を間違えたら、ユーザーはそれを修正して送信し直すために、なにが間違っていたのかを理解する必要があります。フォームを完了しようと思っていたとしても、それがあまりにも大変であればユーザーは心変わりしてしまうでしょう。 フォームの上か、フィールドのインラインか エラーメッセージの配置場所でもっとも一般的なのは、「フォームの上」と、「エラーのあるフィールドのインライン」という２箇所です。どちらの配置場所が、ユーザーにとってより直感的でしょうか？ 調査に
Neede Design Resources
Neede is a curated collection of some of the best online design resources.
ユーザーが許可したくなるPush通知を考える｜sadakoa｜note
初めましての方もこんにちは、さだこえ (@sadako_a_ ) と申します。 DeNAに新卒で入社後、現在は株式会社FOLIOのデジタルプロダクトデザイナーとして、オンライン証券のUIデザインに従事しながら、スタートアップのデザイン支援を副業で行っています。 今記事では、主にアプリの機能として欠かせないPush通知に焦点を当て、記事を執筆します。 Push通知とはご存知の通りPush通知とは、アプリやwebサービスで何か変更や更新があった場合にお知らせをする機能です。一般的にこの業界で言われるPush通知は、Apple Push Notificationを指していることが多いと思われます。 その理由の1つとして、AndroidはPush通知に関してユーザーの許可を取る必要が無いからです。（ダウンロードする際にオプトインされるため、許可率は100%になる。） iOSやWeb Browser
スプラトゥーン、みまもりSwitchなど任天堂のUI/UXデザイナーさんによる「“娯楽”を追求するUIデザイナーの仕事とは」 #uicrunch
リンク connpass UI Crunch #13 娯楽のUI - by Nintendo - (2018/04/27 19:00〜) ## “娯楽”を追求する、UIデザイナーの仕事とは 私たちは日々、実用品と娯楽品に囲まれて生活しています。どちらも生活に大切なもの。 今回は"もっと便利に"を追求するのではなく、"もっと楽しく"を追求する、UIデザイナー3名を任天堂からお迎えし、「Splatoon」 や「Nintendo みまもり Switch」 などの事例を交えながらお話いただきます。 子どもから大人まで楽しめる娯楽の裏側には、どのような想いや工夫があるのか。 みなさんと一緒に学べる機会になればと思います。 また、後 59 users 1621 UI Crunch @ui_crunch 「娯楽のUI」、開場しました！19:30より、任天堂さんのUI/UXデザイナーさんにご登壇いただきま
デザイナーをマネジメントするデザインリードの役割とは？｜Goodpatch Blog グッドパッチブログ
マティアス・フルークは、2016年3月にUIデザイナーとしてグッドパッチでのキャリアをスタートしました。それから数ヶ月後にデザインリードとなり、今ではベルリンオフィスのデザイナー全員をマネジメントしています。 3月頭に私がグッドパッチのベルリンオフィスへ訪れた際に、彼にインタビューをする機会がありました。デザインリードとして普段行なっている業務、デザイナーとしてどのようなことを達成したいかについて聞いてきました。 3つの役割を横断するデザインリードとは ──グッドパッチにUIデザイナーとしてジョインしてから、ちょうど2年が経ったかと思います。今日では組織のデザインリードとして働くだけでなく、様々な役割を担っていますよね。少しだけご自身の役割について説明してもらえますか？ 私は2016年にUIデザイナーとしてグッドパッチに入りました。その時は、60%UIデザイナー、40%UXデザイナーという
プログラマのためのUXチートシート — ありえるえりあ
はじめに http://msdn.microsoft.com/ja-jp/library/aa511258.aspx の 「Windows ユーザー エクスペリエンス ガイドライン」 「ガイドライン」 主に「コントロール」 の抜粋です。 以下の基準で抜粋しました Web UIに応用可能 実用的かつ具体的 自明ではない プライマリUIを目立たせる プライマリ UI 要素を強調するには、以下に従います。 - プライマリ UI 要素は、視線の通り道に配置します。 - タスクを開始する UI 要素は、左上隅または中央上に配置します。 - コミット ボタンは、右下隅に配置します。 - 残りのプライマリ UI は、中央に配置します。 - コマンド ボタン、コマンド リンク、アイコンなど、注意を引き付けるコントロールを使用します。 - 大きなテキストや太字のテキストなどの目立つテキストを使用します。 ユ
FoursquareのUX・UI改善を書いたところ、創業者に届いて、人事からもメールが来た話 - 灰色ハイジのテキスト
通っていたサンフランシスコのデザイナー養成所Tradecraftの一番最初の課題で、アプリをピックアップして、見知らぬ人に声をかけてユーザビリティテストをして改善のプロトタイプを作って検証するーというものがあったのですが、そのプロセスをこの度記事にまとめてMediumに投稿しました。 するとGoogleのデザイナーが、なんとFoursquareの創業者のDennisにメンションしているではないですか。 Awesome, just shared with the team!— Dennis Crowley (@dens) 2018年3月9日 チームの人にシェアしてくれたみたいで、Foursquareのエンジニアの人からメッセージが届いたり、その日のうちに人事の人から「今ちょうどシニアプロダクトデザイナーのポジションを募集しているんだけど、興味があったら連絡待ってるよ」みたいなメールが届きまし
UI / UX 学びまとめ
夏、満喫してますか？ 夜は何してる？ フェス、ナイトプール、おうちでまったり、友達とビアガーデン……。ViViモデルが夏の夜にやりたいこと×メイクをまとめました。
レスポンシブデザインとアダプティブデザイン、それぞれの長所と短所
レスポンシブデザインとアダプティブデザインの違いに目を向けると、それはデザイナーにとって実に重要な選択肢があることに気付きます。インサイトを踏まえてこれらの選択をすることで、より目的に沿ったデザインを考えることができるでしょう。 モバイルデバイスの普及と多様化に伴い、デザイナーはさまざまな画面サイズに対応する必要が生まれました。これは現在、すべてのWebとアプリのデザイナーが直面している課題です。企業向けの巨大なモニターからスマートウォッチまで、ユーザーがオンラインで情報にアクセスする方法は数え切れないほどあります。 そのようなデバイス間の差を埋めようとするデザイナーには、２つのデザインの選択肢があります。アダプティブなサイトか、レスポンシブなサイトです。 レスポンシブデザインとアダプティブデザインの違いについて混同している人が、一定数見受けられます。どちらのデザインも経験していない人にと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザインのしたじき
UIの使いづらさにイラッとする！これがフォームで使いにくい最悪なユーザインターフェイスだ -User Inyerface
The Blog | Welcome to Adobe Blog
Handlebars in UI Design