その 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
ハンバーガーメニューはもう古い！代わりに使えるモバイル用ナビメニュー5つまとめ
ウェブサイトを制作しているひとなら、モバイル端末におけるハンバーガー型ナビゲーションメニューの見つけにくさと効率の悪さ、またどれだけUXデザインの邪魔になっているのか、いくつもの記事を読んだことがあるでしょう。（この問題の参考にしたい記事はこちらやこちら、こちら、こちらからどうぞ。） 幸いにも多くのサイトやアプリで、より効率的な解決法となる代替アイデアが試されています。今回紹介しているアイデアは、他のものより優れているというわけでなく、コンテンツや内容によってパフォーマンスや実行できるかどうかは変わってきます。 01. タブ型ナビゲーションメニュー もしウェブサイトやアプリの項目が限られている場合、ユーザーはできるだけ素早くそカテゴリを切り替えたいところ。そんなときは、タブ型ナビゲーションが良い解決方法となるでしょう。 タブはもっともシンプルなナビゲーションパターンですが、デザインを制作す
女子の心をつかむUIデザインポイント - MERY編 -
2015.10.07 (水) @DeNA 渋谷ヒカリエ UI Crunch - Girls’ Night / 女子の心をつかむUIデザインのコツ http://ui-crunch.connpass.com/event/20562/ にて登壇した内容。 1年間iOSとAndroidのアプリの設計デザイン・運用・改善フェーズに関わったMERYアプリを元に「女子の心をつかむUIデザインポイント」をお話ししました。 MERYは、トレンドに敏感な女の子のためのサービスです。ファッション、メイク、ヘアスタイルなど女の子のためになる記事が毎日読めて、記事で紹介されたファッションアイテムなど買うことができます。 iOS https://itunes.apple.com/jp/app/mery-meri-nuno-zinotameno/id884484921?l=en&mt=8 Android https:
『「AWA」のデザインはどのようにして作られたのか。』
こんにちは。 AWAでアートディレクション／デザイン／ブランディングを担当しているムロハシと申します。 今回はAWAのUIデザイン、インタラクションがどのようにしてつくられたのか、 先日行った「 メディアプロデューサー養成講座」の講義内容をベースに、 簡単ではありますが書いていきたいと思います。 「AWA」とは？ AWAとは、ひとことで言うと 「登録なしですぐに音楽が聴ける定額制の音楽配信アプリ」です。 サービスの特徴として第一にあげられるのは、 ・好きなアーティストを聴くだけでなく「プレイリスト」を軸に、自分の好みにあった音楽が「リコメンド」されること リコメンドを通じて「昔好きだったあの曲」や「まだ知らなかったけど好きな曲」を一人ひとりにパーソナライズしてお届けしています。 そのほかの詳しい説明は プレスリリースをご覧いただければと思います。 インタラクションモックの重要性 AWAの初
なぜメニュー表示用ボタンの「ハンバーガーアイコン」はダメなのか？
スマートフォンなどのモバイル端末用UIでよく用いられる「三」のマークのアイコンは、ハンバーガーのように見えることからアメリカでは「ハンバーガー」アイコンと呼ばれています。徐々に浸透してきたハンバーガーですが、UIデザインの優劣という観点から見た場合、「劣った醜い撲滅すべきものである」という意見が出されています。なぜハンバーガーがダメなのかについて、ジェームズ・アーチャー氏がデータ分析結果を基に理論的に解説しています。 The Hamburger Menu Doesn't Work - Deep Design http://deep.design/the-hamburger-menu/ 下の画像の赤丸で囲われたのが「ハンバーガー」。モバイル端末UIだけでなくデスクトップUIでも広く普及したアイコンで、クリックすることで主にメニューなど他の追加情報を表示させられます。 ◆不親切 一般的に普及し
Private Presentation
Private content!This content has been marked as private by the uploader.
情報がないことを伝えるUIデザイン | UXデザイン会社Standardのブログ
「Empty Data（またはEmpty Status）」というUIパターンがあります。タイムラインやドロワーなどデザイナーであれば知っているUIパターンの名称に比べると、あまり日本では聞き慣れないのかもしれません。Empty Dataは簡単に言うとデータがない時のUIになります（Webでの404に近いですが、少し違います）。では、Empty Dataを知るためにもう少し詳しく紹介していきたいと思います。 参考：モバイルデザインパターン 第2版 ―ユーザーインタフェースのためのパターン集 Empty DataはUIである Empty Dataはただユーザにデータがないことを示すだけではありません。ユーザにデータが存在しないという情報をフィードバックし、どうしたらここに情報が入るかのアクションに繋げる立派なUIです。もしEmpty DataのUIが存在しなかったらユーザはどのように感じるでし
ソシオメディア | iPhone の当たり判定を検証した
スマートフォンやタブレットなどのモバイルデバイス向けにUIをデザインする際には、タッチ操作に適したコントロール表現を追求しなければいけません。 タッチ操作に適したコントロール表現とは、前回書いたジェスチャもありますが、それ以前に、ボタンやリンクなどのUI要素を指で押しやすい大きさにすることが大切です。 パソコン画面のマウスポインターと違って、タッチスクリーンにおいて指でボタンをタップする場合、指がそのボタンを覆い隠してしまうので、意図した場所に正しく触れているのか分かりにくく、またボタン自体の視覚的なフィードバックも確認しづらいという課題があります。 またマウスポインターではピクセルレベルで画面上の座標を指し示すことができますが、指先ではそのような細かい操作はできません。 ですからタッチデバイスでは、ボタンやリンクが細かく密集しているようなデザインは大きなストレスになります。 最低限の大き
モバイルアプリの最小タップサイズを考える | dotproof
モバイルアプリのUIデザインで難しいのはターゲットとなるデバイスの画面サイズに様々なサイズのものがあるということです。画面の大きさにはいろいろあっても人間の手や指のサイズはほぼ誰でも同じですから、どんな画面サイズであっても確実に押せるようなUIのサイズというのを把握してデザインしないと大変使いにくいものになってしまいます。 例えばiOSの「ヒューマンユーザーインターフェースガイドライン」では「タッチ可能な領域のサイズを約44ｘ44ポイントにしなさい」とし、サンプルとして電卓アプリの画面が紹介されています。 “Give tappable elements in your app a target area of about 44 x 44 points. The iPhone Calculator app is a good example of fingertip-size control
Themes - iOS - Human Interface Guidelines - Apple Developer
iOS Design Themes As an app designer, you have the opportunity to deliver an extraordinary product that rises to the top of the App Store charts. To do so, you'll need to meet high expectations for quality and functionality. Three primary themes differentiate iOS from other platforms: Clarity. Throughout the system, text is legible at every size, icons are precise and lucid, adornments are subtle
capptivate.co is coming soon
is a totally awesome idea still being worked on. Check back later.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Amazon.co.jp: SEのためのUIデザインの教科書: 篠原稔和, 上野学: 本
開発者も聞いておきたい！ 「UIデザイナー不要説について語る」イベントで飛び出したデザイナーの本音
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
UI Design Dos and Don’ts - Apple Developer
