キャンセルのキャンセル問題から考えるダイアログデザイン｜Goodpatch Blog グッドパッチブログ
この文脈では、「編集内容のキャンセル」という処理を続行しても良いかをユーザーに確認しています。続行に同意したい多くのユーザーは直感的に同じ表記の「キャンセル」を押したくなるでしょう。しかしそれでは編集のキャンセルが実行されません。 このキャンセルボタンが意味するのは、「『編集内容をキャンセルする』のキャンセル」なのです。つまり、ユーザーが望み通りに編集内容を破棄するためには、反対側のOKボタンを選ぶべきなのです。このような「キャンセルのキャンセル」は二重否定で意味がややこしくなるので避けなければなりません。 ここで「キャンセルのキャンセル」にならなければ良いということで、次のようにボタン名を変えてみました。 これでもう迷うことは無くなりましたか……？ 私はこの修正は誤りだと判断します。「はい」「いいえ」は結果を予想しにくい表現なので、ダイアログのアクションボタンに用いることはあまり適切では
UXにおけるマイクロインタラクション
マイクロインタラクションは、システムの状態を伝達して、エラー防止を支援し、ブランドを伝達する。これは、トリガーによって引き起こされ、目的は1つだけで、エクスペリエンスを魅力的にする。 Microinteractions in User Experience by Alita Joyce on October 21, 2018 日本語版2019年5月28日公開 マイクロインタラクションとは何か コンピュータシステムと我々の日常のインタラクションの多くは、マイクロインタラクションという大きな傘の影響下にある。マイクロインタラクションは、多くの場合、システムの状態を伝えたり、ユーザーのエラー防止を支援することによって、ユーザーにフィードバックを提供する。また、マイクロインタラクションはブランド戦略の手段としても利用することが可能だ。 定義：マイクロインタラクションは、トリガーとフィードバックの組
UI/UXが無意識に検索行動に与える影響について
10. メルカリのSearch Engineering Team Search Algorithm Engineer : - Akira Ishino 石野 明 from Google - Kenji Sugiki 杉木 健二 from 楽天 - Ypeng Lyn from monotaro and 楽天 - Riku Togashi 富樫 陸 from Yahoo - Kei Yagi from 八木 圭Yahoo - Hiroaki Shiino 椎野 弘章 from Yahoo - Yusuke Wada 和田 悠介from Yahoo Search Platform Engineer： - Minoru Osuka 大須賀 稔 from Yahoo - Junpei Nishimoto 西本 純平 from Recruit Technologies - Marne Prasad
優れたボタンデザインのための７つのガイドライン
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 ボタンはインタラクションデザインに欠かせない要素です。ユーザーとシステムの意思伝達において大切な役割を担っています。この記事では、効果的なボタンを作成する際に知っておくべき７つの基本原則について説明します。 １. ボタンをボタンらしく見せる UIを操作するとき、ユーザーは「クリックできる」ものとそうでないものを即座に知る必要があります。ユーザーは、デザインされたすべてのアイテムを解読しなければなりません。そのため一般的に、ユーザーがUIを解読するのに必要な時間が長くなればなるほど、ユーザーにとって使いにくくなります。 しかし、ユーザーはどのようにして要素がインタラクティブかどうかを判断するのでしょうか？ UIのオブジェクトを理解するために、ユーザーはこれまでの経
クリエイティブなタブバー型ナビゲーションを考える | UX MILK
モバイルナビゲーションの基本パターンを選ぶときに、プロダクトデザイナーは２つの選択肢から選びます。ハンバーガーメニューとしても知られるドロワー型か、タブバー型です。どちらのナビゲーションにも長所と短所があります。 この記事はそのうち、タブバー型に関するものなので、ドロワー型を上回るタブバー型の利点から話しましょう。 ユーザーの現在地がひと目でわかる。アプリの中で自分がどの位置にいるのかをメニューを開いて確認する必要がありません。ひと目で知ることが可能です。 見つけやすさ。ユーザーはトップレベルのナビゲーションオプションを最初から見ることができます。 指の届く範囲にある。タブバーは届きやすい場所（画面の１番下）に位置しています。ユーザーは指を伸ばして選択する必要がありません。 しかし、タブバー型にはいくつかの欠点があります。 ナビゲーションに載せる選択肢の数が限られる。タッチ箇所が小さくなり
ユーザーの期待に応えるクックパッドのUI/UXーWDF Vol.17 with HTML5 Experts.jp「アクセシビリティとUX」
ユーザーの期待に応えるクックパッドのUI/UXーWDF Vol.17 with HTML5 Experts.jp「アクセシビリティとUX」 仲 裕介（HTML5 Experts.jp副編集長） 3月14日に特定非営利活動法人Web Directors Forum（以下、WDF）とHTML5 Experts.jpの共催企画として、WDF Vol.17 with HTML5 Experts.jp「アクセシビリティとUX」が金沢にて開催されました。この記事では、その勉強会のセッションの模様をレポートします。 ユーザーの期待に応えるクックパッドのUI/UXー元山 和之 イベント最後のセッションは、クックパッドでデザイナーをされている元山和之さんです。今回のセッションでは、クックパッドが実践するユーザーファーストなサービス開発の様子を紹介していただきました。 余談ですが、クックパッドさんのプレゼンテ
無限スクロール vs ページネーション：それぞれの特徴と使い分け
無限スクロールのメリット １．ユーザーを没頭させ、コンテンツを発見させる データ探索の主要な手段としてスクローリングを使う場合、無限スクロールはユーザーをwebページにより長く滞在させ、よりエンゲージメントを高めることができます。ソーシャルメディアの人気に伴い大量のデータが消費されている中、無限スクロールは、ページが前もって読み込まれるのを待つことなく、膨大な情報を閲覧するための効率的な方法です。 無限スクロールは、「発見」のためのインターフェースであれば、ほぼ必須の機能です。ユーザーが特定のものを探していない場合、気に入った一つのものを探すために大量のアイテムを見る必要があります。
AndroidアプリのUXデザインで注意すべき４つのポイント
Ning T.は、コンテンツエディター、人類学者、デザイナー、技術とUXオタクです。ブルースとWes Andersonの映画が好きです。 モバイルアプリのデザイナーがiOS用のデザインを好む傾向があることは広く知られています。しかしながらAndroid用デバイスがスマホ市場を席巻したのは、特にハイエンドのiPhoneと比べた時に価格帯が低かったからです。Androidデバイスが世界中で広まったことで、アプリデザイナーはAndroidを無視できなくなったのです。 たしかに、Androidは必ずしも素晴らしいデザインの典型ではありませんでした。 Google Playのアプリ審査は寛大すぎて、UXデザインのかけらもないようなアプリに溢れかえっていたのです。とはいえ、AndroidのIce Cream Sandwich（バージョン名）の時代は終わったことを忘れないでください。Material D
スマフォアプリで見る UI の気付き
この記事は「#UI Design Advent Calendar 2015」第18日目の記事です。 スマフォアプリの普及により、UI デザインの需要は年々増しています。最近になってアプリの UI デザイナーとしてお仕事を始められた方も多いかと思います。UI デザインは、原則や関連知識の理解を深めることも重要ですが、ケーススタディとしてみることでスキルの習得も早くなります。 今回は、これまでユーザビリティの観点で監修したアプリ UI の中から、ユーザビリティテストのスコアリングが低くなる傾向のデザインパターンをご紹介します。それらは少し見直すだけでスコアが改善されるというのもまた特徴です。やってしまいがちな失敗 UI ケースの入門として、ご参考になればと思います。 スコアリングの指標 アプリ UI のユーザビリティ測定には、アクセシビリティや他の定義を考慮することもありますが、今回のスコアリ
ドロワーというナビゲーションの再考 | UXデザイン会社Standardのブログ
以前Facebookのアプリケーションで採用されたことを皮切りに、ここ数年で多くのアプリケーションで使われることになったドロワーというナビゲーションについての考察です。 最近ネット上でも話題になっており、安易なナビゲーションへの採用が見直されているされているインターフェイスでもあります。しかしドロワーの必要性について疑うことは良いのですが、表面的にただドロワーを使ってはいけないという情報に左右されていては、安易なドロワーはなくなったとしても、次に安易なタブなどが量産されるということが予測できます。 UIに関わるデザイナーとしては、なぜドロワーが適していないのかということと同時に、どのような状況下であればドロワーが適しているのかは考え続ける必要があるでしょう。 ドロワーの歴史 まず名前の由来としては、たしか2013年にAndroidでナビゲーションドロワーのためのフレームワークが公開されたこ
君たちはそんなにハンバーガーメニューが好きなのかね？
はじめに 本稿は UI Design Advent Calendar 2015 – 8日目のモバイル UI に関する記事です。 まず私はハンバーガーメニューという UI が嫌いです。その理由についてこの記事で説明していきたいと思います。 あの三本線を人はハンバーガーと呼ぶ 最近よく見かけるあの“三本線”のことを海の向こうでは ハンバーガーアイコン とか ハンバーガーメニュー とか言うらしいです。上のがパンで、真ん中のがハンバーグで、下のがパンに見えるからだそうです。にしてもこのただの三本線をハンバーガーと表現するのは少し無理があるような気がします。まあ違和感あれどそこに抗っても仕方がないので、とりあえずこれはハンバーガーと呼称することにします。 ハンバーガーメニューを避けたい理由 真面目にハンバーガーメニューを考察してみます。 1. 何をするのかがわからないアイコン https://dri
ユーザーインターフェイス解剖学・改訂版（公開版）
社内イベントで登壇した際のスライドです。｢ユーザーインターフェイス解剖学｣の改訂版。主に、UIデザインにおいて検討した方がよい／すべき考え方というものを簡単にご紹介しました。
直感的なUIとは予想した通りの結果が得られるもののこと - ネコメシCEOブログ
UIデザインの参考に！斬新で美しいUIをもったiPhoneアプリまとめ という記事では、紹介しているアプリのことごとくに、「ボタンが無くてシンプル」「直感的で使いやすい」などと書いてあるが、ClearのUIみたいなのを「誰でも直感的に操作できる」などと評価する理由がさっぱり理解できない。 こういうUIは基本的にどれも玄人向けで、操作がジェスチャの塊になってしまっているものは、それが使いこなせる俺カッケー感が高くて自己顕示欲を満たしやすい。"そのように操作できるUIデザイン"が気持ちいいのではなく、"そのように操作している自分"が気持ちいいの間違いなんじゃないだろうか。 ボタンが一切なくてシンプルだと気持ちがいいUIになるだって？ そんなわけがあるはずない。現実世界はボタンが一切なくてシンプルなUIで溢れているし、そのおかげで毎日いろんな場面でいらいらさせられている。たかが1個のレバーを上げ
定番パターンだけじゃない！サービスに最適化されたUser Onboarding
アプリにおけるUser Onboardingでは、ウォークスルーとチュートリアルを用意することが、最早定番になりました。 まずはウォークスルーでユーザーに「価値訴求」を行い、次にチュートリアルで「使い方」を体験してもらうことで、アプリへの導入をよりスムーズにすることが可能です。 User Onboardingの定番パターンウォークスルーの定番といえば、3〜5枚の画像を使ってサービスの価値をスライド形式で紹介するパターンです。 サービス価値の重要ポイントを分かりやすく伝えられる、とても良いUIだと思います。 （左）Dropbox Paper、（右）Inbox一方、チュートリアルの定番といえば「コーチマーク」です。 実際の画面にオーバーレイさせて、ユーザーに一番使って欲しいUIの解説ができるので、こちらも先ほどのウォークスルー同様、とても良いUIだと思います。 （左）トクバイ、（右）Pinko
アプリ企画者必見！ユーザ離脱を防ぐチュートリアル制作に役立つアプリ20選 | Patto - スマホアプリ制作・開発・CMSならiPhoneもAndroidも対応のPatto
スマホアプリをインストールすると初回起動時にアプリの簡単な概要や機能説明、使い方説明などが表示されることがあります。 よく「チュートリアル」と呼んだりしますが、正確には左右に画面をスライドして表示する手法のことを「ウォークスルー」と言います。 1回しか出ないのでなかなか強く記憶には残らないかもしれないですが、アプリのファーストインプレッションに大きく影響するので、伝える内容はもちろんですが、それが与える視覚的、感覚的印象も同じくらい重要となります。 「ユーザにアプリの使い方を学習させるためのUI」にはいくつか種類があって、他にも「コーチマーク」など通常画面上にオーバレイしてボタンや操作を順にポップアップなどを使って説明していく手法などもあるのですが、今回はウォークスルーを採用しているアプリの方が最近は多いと感じるのでそちらのタイプをメインに紹介していきます。 ※ウォークスルーがあまり一般的
アプリの導入画面「ウォークスルー」のデザインで気をつけたい５つのこと
UX Movementの著者であり、編集長です。明確で効率的なデザインに美しさを見出し、ユーザーのために闘うことが好きです。 新作アプリにとって、ウォークスルーはいわば「取扱説明書」のようなものです。 ウォークスルーは、新しいユーザーがアプリを起動したときにまず表示される、アプリの機能についての簡単なガイダンスのようなものです。新しいユーザーが戸惑うことなくアプリを使うために活用されます。 アプリからウォークスルーを無くしてしまうと、ユーザーを混乱させてしまう可能性があります。逆にあったとしても、読みにくくわかりづらいものであれば結果は同じです。ユーザーはウォークスルーを面倒に感じ、読み飛ばしてしまうでしょう。 ウォークスルーは、ユーザーにアプリの使用方法を理解してもらうため、読んでもらえるようなものであるべきです。そのためには、明確なナビゲーションにし、読みやすいテキストにしましょう。ま
UIデザイナー必見！ アプリの導入画面で使われる主な４つの手法
ユーザーがそのアプリの中で一番最初にふれる画面は、アイコンと同じくアプリの「第一印象」になると考えても間違いないくらい、大切な部分です。 だからこそ導入画面は、ユーザーの気持ちになって、ユーザーのことを考え、しっかりと設計しなければなりません。 今回はそんなアプリの導入画面によく使われる、４つの手法をご紹介します。 スプラッシュ まずはおそらく最も多くのアプリが採用しているスプラッシュという手法です。 ホームからアプリのアイコンをタップしたときに出る画面で、データローディングの時間稼ぎ、またはそのアプリをブランドとしてユーザーに認知させる目的で使われます。 たとえばツイッター公式クライアント。 アプリを起動したときの、この画面ですね。 みなさんご存知かと思いますが、ツイッターは少し特殊なスプラッシュで、 こんな風にどんどん鳥がせまってきて背景にコンテンツがあるという、面白いスプラッシュを導
スマホヘッダーデザインのトレンドと気をつけるべき5つのポイント | in-Pocket インポケット
こんにちは。デザイナーの武本です。 スマホサイトのヘッダーをデザインする時に気をつけているポイントをまとめてみました。 1. ヘッダーの縦幅 - だいたい44〜50pxが標準 ヘッダーには多くの場合、リンクが配置されます。その為、タップ可能な最小領域とされる「縦幅36px」は必ず取りましょう。有名サイトを幾つか見てみると、だいたい44〜50pxくらいが標準となるようです。 私は、48px or 大きめなら60pxにする事が多いです。60pxを超えるとちょっと邪魔に感じるかもしれません。ですが、ヘッダーの色をページ背景色と同じにする・あるいは透明にするなどすれば、70~80pxのヘッダーでも邪魔に感じなくなる事もあります。 2. 情報を入れすぎない - 2、3要素に絞る モバイル端末では、ヘッダー領域はかなり限られてしまいます。多くの要素をヘッダーに詰め込む事は、見た目によくないだけでなく、
正しく使えてる？ チェックボックスとスイッチの使い分け
下の図のフォークを見て、それがサラダ用なのか、メイン用なのか見分けるのは簡単ではありません。形状も用途も同じものだからです。両方とも食べ物を突き刺すための、尖った部分をもつ道具ですが、それぞれコースの異なる料理用にデザインされています。 用途は同じでも異なる目的に設計されている Webデザインの世界でも、スイッチとチェックボックスを扱う際に、フォークと同様の混乱が起こります。どちらを使用するべきか、あまり大きく考えていないデザイナーの方が多いですが、適当に使用すると、ユーザーを混乱させてしまいます。フォークの例のように、異なるコンテキスト（文脈）に対して、UIを使い分ける必要があります。 スイッチとチェックボックスは、ともに設定を適用する際に使われますが、ユーザーが期待する適用のタイミングがそれぞれ違います。 正しい条件下においてUIを使い分けることにより、直感的にどうするべきか見分けられ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
カウカモのリードデザイナーが語る、住まい探しの新しい体験 ー UX MILK Fest 2019 イベントレポート | remark