その Dialog は本当に必要ですか？ - Qiita
ダイアログは、ユーザとの対話の中でも特に「確認」や「注意」を促すために用いられる UI コンポーネントの一つです。二択あるいは三択の項目を配置して、YES/NO や OK/Cancel などのインタラクションを用意することで、ユーザとの対話をすることが出来ます。あるいは、単に現在の状態を表示（読込中など）し、その他の各種操作をブロックすることで、待つ必要が有ることを明示することも出来ます。 一方で、ダイアログはその表示が画面の前面に大きく表示され、時にダイアログ以外へのインタラクションを禁じる場合もあることから、使いどころを間違うと非常に鬱陶しく見えるものでもあります。また、ダイアログのキャンセル操作が出来ない場合において、いつまでもダイアログが出続けてしまうとユーザの負担は大きくなります。 この記事では、ダイアログを使用している場面において、その他の表現方法や実装の工夫を使うことができる
OKボタンの配置は、左右どっち？UI設計のための情報アーキテクチャ - 酔いどれデザイン日誌 - Drunken Design Diary -
仕事でBootstrapを使って管理画面の設計およびデザインをする機会がありました。そこふと気になってみて調べてみたのですが、皆さんはOKボタンを左右どちらに置いていますか？ これについての興味深い研究結果がありました。2006年の調査と少々古いものではありますが、その本質は非常に情報アーキテクチャとしての的を得ています。概略を説明すると、Windowsは左にOK、右にキャンセルが標準のUI。Macintoshはその逆で左にキャンセル、右にOKであり、この調査ではそれぞれのOSのユーザーに対して、左右どちらのOKボタンの方が認識されやすかったか？というのを統計で明らかにしています。 私はどうも、Windows標準の「左側にOKボタンがある配置」が気持ち悪く感じます。別にマカーでも無いですし、むしろ生まれてこのかたずっとWindowsを使っているのにも関わらずです。 そこで調査結果を見てみた
「OK」「キャンセル」、どちらが先か？
OKボタンはキャンセルボタンの前と後、どちらに置くべきか？ ダイアログボックスをデザインするたびにその都度判断するよりも、各プラットフォームでの慣習に従う方が大切だ。 OK–Cancel or Cancel–OK? by Jakob Nielsen 2008年5月27日 ユーザエクスペリエンス全体には大して影響しないようなUIデザインの細々とした問題について、われわれの元には数え切れないほどの質問が寄せられる。昔からよくあるのが、ダイアログボックス内でのボタンの並び順はどちらにすべきかという質問だ： OK / キャンセル キャンセル / OK 両方ともそれなりに筋が通っている並べ方であり、どちらを好むかは人それぞれで、一方に決めるのは無理だろう： OKを先にする並べ方は、英語を始めとする左から右へ読むタイプの言語では、自然な読み取り順序に沿っていることになる。これ以外のボタンの組み合わせも
ボタンデザインで押さえておきたい4つのポイント【プロ直伝】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、株式会社LIGでアートディレクターをしている竹原と申します。 「デザインとは情報設計」、といわれています。例えばボタンでも、アクションやレイアウトに応じてさまざまな設計をおこなっているんです。 今回は、僕が普段ボタンデザインをする際に考えてることをまとめてみました。デザイナーの方にはWebやUIのデザインをする際の考え方の参考に、デザイナー以外の方には、デザイナーって普段こんなことを考えながらデザインしているんだな、と感じていただければ幸いです。 独学でつまずいていませんか？ Webデザインをもっと効率的に学びたい、プロの現役デザイナーに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい！」という方は、ぜひこちらより資料を
ボタンのラベルや配置順序のベストプラクティスとは | UX MILK
サイトやアプリにおける典型的なフォーム（もしくはダイアログボックス）には、通常いくつかのボタンがあります。ほとんどのケースで、ユーザーは２つの選択肢を目にします。１つはユーザーの主となるタスクを表し、一方は付随する副次的なタスク（フォームに入力した内容の取り消しやキャンセルなど）を表します。 この記事ではアクションボタンに関する基本的なUXについて概観し、デザイナーの間でよくある質問である「OKかキャンセル、どちらのボタンが最初にくるべきか」に答えます。 エラー防止 Jakob Nielsen氏のユーザビリティ・ヒューリスティックによると、「丁寧なデザインによって、最初の段階で問題が起こることを防止する」とあります。ユーザーが突発的に間違ったものを選択してしまうかもしれない状況を排除できるように努力する必要があります。 濃淡で視覚的な区別をつける ２つのボタンの違いを明確にするために、ボタ
常にキャッチアップしよう！iOSヒューマンインターフェイスガイドライン
この投稿は、 UI Design Advent Calendar 2016の14日目の記事です。 OSのアップデートに伴い新機能が追加されているため、改めて見返すとiOSのヒューマンインターフェイスガイドライン（以下HIG）も一部変更が加えられています。 過去に読んだことはあっても常にキャッチアップしなければ、デバイスに適した設計からずれてしまい、ユーザーの期待する体験を提供できなくなってしまうのではないでしょうか。 今回は、アプリデザインをする際に改めて意識すべきHIGをおさらいしつつ、以前と変わった部分などをピックアップしながらご紹介したいと思います。 iOSのUIデザイン基本3原則おさらいの第一歩として、原則を改めて見てみましょう。 他のプラットフォームとの区別にもなり、品質と機能性を高めるためにも必要なUIデザインの基本3大原則があります。 実はこの原則、iOS9まではDefere
2017年に来るかもしれないWebデザインのトレンド予想。「年齢レスポンシブ」「触覚フィードバック」など……
2016年も早くも折り返し地点である6月に到達しました。今年もさまざまな新しいWebデザインのトレンドが発生していますが、スピードが速いので追いかけるだけでも大変ですね。 どうせWebデザインの勉強をするなら、今後使える技術を学ぶのが効率的です。そこでちょっと気が早いですが、2017年に来るかもしれないトレンドを確認しておきましょう。 2017年に来るかもしれないWebデザイン4つのトレンド ■マイクロ・ミニ・インタラクション 2015年あたりから「マイクロ・インタラクション」が話題となり始めています。マイクロ・インタラクションとは「ユーザーのアクションに対して小さなアクションを返すこと」です。 例えば、ボタンをクリックしたときにアニメーションなどを用いて「あなたは今クリックしましたよ」とユーザーにリアクションとして通知することなどがそれに当たります。「神は細部に宿る」とはよく言われますが
『「AWA」のデザインはどのようにして作られたのか。』
こんにちは。 AWAでアートディレクション／デザイン／ブランディングを担当しているムロハシと申します。 今回はAWAのUIデザイン、インタラクションがどのようにしてつくられたのか、 先日行った「 メディアプロデューサー養成講座」の講義内容をベースに、 簡単ではありますが書いていきたいと思います。 「AWA」とは？ AWAとは、ひとことで言うと 「登録なしですぐに音楽が聴ける定額制の音楽配信アプリ」です。 サービスの特徴として第一にあげられるのは、 ・好きなアーティストを聴くだけでなく「プレイリスト」を軸に、自分の好みにあった音楽が「リコメンド」されること リコメンドを通じて「昔好きだったあの曲」や「まだ知らなかったけど好きな曲」を一人ひとりにパーソナライズしてお届けしています。 そのほかの詳しい説明は プレスリリースをご覧いただければと思います。 インタラクションモックの重要性 AWAの初
「深津貴之氏に学ぶ、スマホUI/UX講座 〜iOS7についての考察とfladdictデザイン論〜」に参加してきました。 | DevelopersIO
「デザイン = かっこ良くすること」だとは限らない。 デザインとは? 設計 複雑な問題を整理して解決すること わりとエンジニアリングに近い 文章を書く練習をすれば読みやすい文章を掛けるようになるのと同様に、勉強すれば人を困惑させないデザインは作れる。 ヒューマンインターフェースの原則 インターフェース = 接点、境界面、接触面、接合面、仲立ち、橋渡し ヒューマンインターフェース = 人とモノをつなぐもの ヒューマンインターフェースの原則 = アプリがユーザーとコミュニケーションをする時の原則 1.必然性のあるビジュアル 機能と外見が調和しているか？ TPOにあわせた格好をさせる ユーザーとコミュニケーションを取る ドレスコードみたいなもの(例:ゲーム:楽しく、ツール:信頼性ありそうな) 機能に最適な外見を与えることで... 使い方がつたわる。 とっつきやすくなる 2.一貫性 アプリ全体でル
Why Users Fill Out Less If You Mark Required Fields
Are most of your users skipping the optional fields on your form? You might not need that extra information, but having it could help you learn more about your users. If you want more users to fill out the optional fields on your form, avoid marking required fields and mark optional ones only. Research shows that most users approach forms with “voluntary over-disclosure” behavior. This means that
ソシオメディア | あるとよい機能はない方がよい
UXデザインのコンサルティングではよく品質優先度マッピングというものを行います。これは開発プロジェクトの上流工程において、実装を検討している機能をリストアップし、そのひとつひとつについて想定する利用者の割合や利用頻度の観点からグルーピングし、実装の優先度を決める作業です。 これを行う目的は、UIをできるだけシンプルに保つことにあります。ユーザーが求める機能をすべて盛り込むと、当然UIは複雑になり、誰にとっても使いにくいものになります。また蓋然性のバランスが取れていない要件はプログラムを複雑にし、バグが増える原因になります。 UIデザインにおけるパレートの法則（結果の大部分は全体の一部によって生み出される）は、「ユーザーの80%は全機能の20%しか使わない」というものです。その20%に注力し他の優先度を下げることで、製品の利便性は向上するはずです。 Core, Important, Nice
CSS Nite LP33 UI/UX "Bridge Builder"
2014年3月29日 (土) に開催したセミナーイベント CSS Nite LP33 UI /UX セッションで講演した「Bridge Builder: IAシンキングで進める体験とコンテンツの構造化」のスライドです。 CSS Nite LP, Disk 33「UI/UX」（2014年3月29日開催） http://cssnite.jp/lp/lp33/ 講演ログを Storify でまとめてみましたので、こちらもご覧ください。 CSS Nite LP33 UI/UX session #1 Bridge Builder - Storify https://storify.com/bookslope/css-nite-lp33-ui-ux-session-1Read less
おかんでもわかるUXデザイン Version 0.1 - ネコメシCEOブログ
3/24、TAM Coworkingをお借りして、「おかんでもわかるUXデザイン」というセミナーを自分で主催して実施しました。これ、ゆくゆくはマジでおかんでもわかるようにしたいんだけども（ようは、専門家じゃない人向けということですが）、まずはそのたたき台という感じで（だからVersion 0.1）、単にUXデザインって何よっていうのを単純化しただけの内容になっていて、完全におかんを突き放しているという、タイトルに偽りアリのものとなっております。 Version 0.1とはいえ、まー、UXデザインやってみたいけどやったこと無い人とか、何したらいいのかわからん人とかにとっては、ひとつの道しるべになるかもしれないので、スライドを公開する次第なのですが、本気で本職でUXデザインしてる人とか、アーキテクト的な人とか、そゆ人たちが見たら憤慨しそうなくらいに単純化しております。ツッコミどころ満載かと思い
Button | Modeless and Modal
GUI には、標準というか、一般化したコントロール表現がいくつもあります。ウィンドウやスクロールバー、テキストボックスやラジオボタンなどのフォームコントロール、メニューバーやツールバーなどです。その中でも、「プッシュボタン」は最も代表的な GUI 要素として語られることが多いと思います。 しかしそれはちょっと違うのではないかと思っています。 確かにボタンは、現実世界のメタファーを使っているとか、操作対象として目に見えるようになっているといった、GUI の特徴をよく備えています。 しかしボタンによって入力できるのは0か1かの「1」という論理値のみであり、無限段階のアナログな操作から最も遠い、極端にデジタルなインタラクションを強要するものなのです。 ボタンが便利なのは、ボタンを押し下げるというノイズの無い単純な操作で複雑な処理を実行できるところにあります。これは現実世界の機械でも同様です。シス
「根拠のないリニューアルは悪」- 株式会社ネコメシ 山本郁也氏が語る、UXを考える上で大切なこと｜U-NOTE【ユーノート】-イベントまとめプラットフォーム
2006年4月19日 ... マーケティングの世界で古くから使われている格言に「ドリルを買いに来た人が欲しいの はドリルではなく穴である」というものがある。ソリューションを売る難しさの本質を表現し ている言葉だが、これが未だに理解されていない。 2. Break the bias 「確証バイアス」 ⇒自分に都合の良いものを信じてしまいやすくなるというもの。 起業家というのは中立的な立場になりにくい。 「生存者バイアス」 ⇒成功者の意見を聞いてみたいということはよくあること。 ただ、成功している人の言っていることが全て正しい訳ではない。 成功している理由を分かっている人はあまり多くない。 「リニューアルすれば、良くなる症候群」 ⇒ビジュアルのリニューアルは、根本的な設計が間違っているという論理の上で、少し気に入らないから直すくらいのレベル。 自分が気に入らないという理由だけで行うと、たいて
ユーザーレビューとどう向き合う？ クックパッドiPhoneアプリに酷評殺到の背景 (1/3) - ITmedia ニュース
2月初め、「クックパッド」のiPhoneアプリが新しくなった。従来は、検索機能中心のシンプルなアプリだったが、新アプリはレシピ提案機能などを充実させた多機能でモダンデザイン。Web業界では好評で、絶賛するニュースメディアやブログも多かった。 だが、ユーザーがApp Storeに投稿したレビューは辛らつだった。「前の方が良かった」「使いづらい」など酷評が集中。「☆」1つの評価が大量に投稿され、“炎上”状態になっていた。 その後のバージョンアップなどで徐々に評価は戻っており、最新バージョンでは「☆4」や「☆5」の評価も増えてきた。だが、最初のバージョンアップ時に多くのユーザーが低評価を投稿したため、全評価の合計を見ると、3月末現在でも、「☆1」が大多数のままだ。 思わぬ反応に、クックパッドの橋本健太CTOは「メジャーバージョンアップで完成ではない。これからがスタート。改善を繰り返していきたい」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
確かめながらつくるユーザー体験
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
Should "Yes, delete it" be red, or green?
UX侍 × Google マップ UXデザイナー「ユーザーにフォーカスをあてれば結果は後からついてくる」 | UXサムライ
