タグ

uxに関するlen_progのブックマーク (12)

  • アプリのアップデート300本ノックから学ぶUI改善のヒント|宮﨑 晃

    こんにちは、HR業界でアプリマーケティングをしている宮﨑です。 ・アプリのアップデート前後のUI変化 ・Push通知など気になったGrowth施策 こうしたものを「#アプリノック」としてTwitterで投稿すること3ヶ月。300以上のネタが溜まってきました。 今回のnoteでは「フォッグの消費者行動モデル」というフレームワークを使ってまとめていきます。 行動 = 動機 × 実行能力 × きっかけ ザックリいうとユーザーに何か行動を促す際に「動機/実行能力/きっかけ」の3要素をどう揃えるか?というモノ。 詳しくは深津さんの記事がとってもわかりやすいのでおススメです。 アプリノックがUI改善の勘所だけでなく、Growthの知識も一緒に学べるコンテンツになっていくと嬉しいです。 それではいってみましょう! 【動機】がないと、やる気にならない①慣れない体験にはイメージ作りを よくわからない体験は

    アプリのアップデート300本ノックから学ぶUI改善のヒント|宮﨑 晃
  • ボタンの「ロード中」状態を見せるべきタイミング

    UX Movementの創立者、ライター。ユーザーに優しいUXデザインのスキルを読者の方が上達できるよう、UX Movementのブログを始める。 ボタンには、押せる状態と押せない状態以外にも、ロード中という状態があります。このロード中という状態は通常数秒以内で処理されるため、ユーザーには見えません。しかし通常よりも処理に長い時間がかかる場合、ロード中の状態を見せないことはアクションエラーを誘発します。 アクションエラー もしアクションを実行するのに自分が想定したよりも長い時間がかかったら、ユーザーはシステムが自分のリクエストを実行しているのかどうかを知る必要があります。何も起こっていないように見えたとしたら、彼らは正しくボタンを押せなかったと思うでしょう。この誤解が、彼らに再度ボタンを押させてしまいます。 ユーザーが2回以上ボタンを押すと、システムの処理が増えるだけでなく、操作が二重にな

    ボタンの「ロード中」状態を見せるべきタイミング
    len_prog
    len_prog 2020/01/14
  • 建築現場の課題をどう解決するか? 建築現場のSaaSとデザインチームの哲学

    デザイナーやクリエイターの中には、自分たちが接することの少ない業界やユーザーに向けたサービス開発やデザインを行う人も多いかと思います。では特定の業界に特化したサービスのデザイン現場ではどのようにデザインを進めているのでしょうか? 建設業界に特化したクラウド型の建設・建築現場プロジェクト管理サービス「&ANDPAD(アンドパッド)」を提供する株式会社オクトの建築業界に特化したサービスとデザインチームついてお話を伺いにいきました。 登場人物 株式会社オクト 開発部 リードデザイナー 後藤啓之氏 7番目の従業員としてサービスのシード時期からジョイン。プロダクト全般のUI/UXデザイン、デザインチームの立ち上げとマネジメントを担当。現在はブランディングに従事。 課題解決のヒントは「現場」にある ── 今日はよろしくお願いします。まずは株式会社オクトについて教えてください。 後藤:株式会社オクトは「

    建築現場の課題をどう解決するか? 建築現場のSaaSとデザインチームの哲学
  • プログレスインジケータの役割とは?デザイナーのためのインジケータ設計アイデア|Goodpatch Blog グッドパッチブログ

    突然ですが、あなたは今、居酒屋にいるとします。 「15分前に注文した生ビールがまだ運ばれてこない状況」を想像してみてください。 あなたはどのような気持ちになりますか? もう一度店員に声をかけようとするでしょうか。 それとも、諦めてお勘定を済ませようとするでしょうか。 いずれにしても、楽しくビールを呑むはずの時間を、不快感や残念な気持ちを抱きながら過ごすことになるでしょう。 お店側から「もう少々お待ちください」という一声があれば良いのに… そうは思いませんか? 同じようなことが、アプリを利用している最中にも起こりうるのです。 1つのボタンを押しても反応がない時や、ページが推移した後に何も表示されない時、ユーザーはアプリから離脱しようと考えるでしょう。 この離脱を避けるためには、アプリがユーザーに対して「プロセスを実行している」ことを視覚的に伝えられなくてはなりません。 この記事では、その役割

    プログレスインジケータの役割とは?デザイナーのためのインジケータ設計アイデア|Goodpatch Blog グッドパッチブログ
    len_prog
    len_prog 2020/01/10
  • ロード時のスピナーとプログレスバー、どう使い分ける?

    お店で誰かに商品の場所を尋ねたとして、その相手がただそこに立ったままだったとしたらどう思うでしょうか。きっとイライラして、その場を立ち去りますよね。同じように、ユーザーは長い間スクリーン上のスピナー(通信やローディング時にくるくる回るアニメーション表示の)を見ていると、このような心理状況に陥ります。 スピナーは時間のかかる処理には適さない スピナーは、その処理が終わるまでどのくらいの時間を要するのかをユーザーに伝えません。長時間の処理にスピナーを使うと、最終的にユーザーはアプリに何か問題が起こったのではないかと疑問に思うでしょう。フィードバック無しでは不確実性が生じ、ユーザーは最悪の場合を想定することになります。 ユーザーは読み込みに時間がかかるだろうと考え、待つ気をなくすのです。そしてしびれを切らして、戻るボタンを押したり、またはアプリを終了したりするでしょう。 4秒ルール ユーザーをア

    ロード時のスピナーとプログレスバー、どう使い分ける?
    len_prog
    len_prog 2020/01/10
  • ユーザーが見落とすことがない入力フィールドを作るには

    UX Movementの著者および創設者。ユーザー体験においてのデザインのベストプラクティス、スタンダードおよびテクニックを教え、それを広めることでより良いデジタルの世界を作り上げることを目標としています。 入力フィールドは、ユーザーに情報を要求するもっとも一般的なインターフェイスの要素です。入力フィールドにはさまざまなサイズや形状、スタイルがあります。そのような選択肢がある中で、最適なユーザビリティを提供するには、どのように表示すればいいでしょうか? 強い視覚的な手がかり 最適な表示方法は、入力フィールドの機能と、ユーザーがどのように操作するのかによって決まります。つまり、入力フィールドには、ユーザーが何をすべきか示す強い視覚的な手がかりが必要です。 入力フィールドは、インターフェイスにテキストを入力するために存在します。したがって、ユーザーが視認したらすぐに行動を起こせるように、入力フ

    ユーザーが見落とすことがない入力フィールドを作るには
  • ユーザーにない知識を補わないと、UXを損なう

    調査型のタスクに適した情報の提供ができていないWebサイトは多い。そうしたサイトでは、ユーザーはさまざまな情報ソースを手作業でつなぎ合わせるという不必要な手間をかけなくてはならないのだ。 Unbridged Knowledge Gaps Hurt UX by Kim Flaherty and Kate Moran on March 3, 2019 日語版2019年10月17日公開 デジタル製品のデザインチームは、ユーザーの技術レベルや情報探索スキルを過大評価していることが多い。2016年にOECDは、中程度の複雑度のタスクを正常に完了できる成人は全体の3分の1しかいないことを明らかにした。このレベルのタスクを完了するには、ユーザーはページやアプリケーション間の移動をする必要がある。また、ステップを複数こなさなければならない上に、ツールやソフトウェアの機能(たとえば、ソート機能など)も利用

    ユーザーにない知識を補わないと、UXを損なう
    len_prog
    len_prog 2019/10/17
  • UX の基本  |  Articles  |  web.dev

    この記事では、チーム、プロダクト、スタートアップ、企業が、より優れたユーザー エクスペリエンスを開発するための堅牢で有意義なプロセスを作成するために役立つワークフローを紹介します。プロセスのさまざまな部分を個別に使用することもできますが、一連のステップとして最適に機能させるのが理想的です。 このガイドは、自動運転車や Project Loon などの課題をトラブルシューティングして解決するために Google の複数のチームが使用しているデザイン スプリント手法を大いに活用しています。 ダブルダイヤモンド このフロー作業は、UX サークルで「ダブルダイヤモンド」と呼ばれるものをベースにしています。このフローは、ブリティッシュ デザイン カウンシルで広く利用されています。 ブリティッシュ デザイン カウンシルが開発した「ダブルダイヤモンド」デザイン プロセス モデルは、プロジェクトの各フェー

    len_prog
    len_prog 2019/09/16
  • 処理の遅さを感じさせないUIデザインのひと工夫──楽観的UIの基本 |ブログ|root|芯を問い、成長に貢献する

    この記事はUX PlanetのライターでブロガーのIgor M氏の記事を公式に許可をいただき翻訳したものです。 今回は、楽観的UIについて話しましょう。 楽観的UIって?楽観的UIとは、処理が完了するのを待たずに最終状態にアップデートするUIのことです。すぐに最終状態に切り替え、実際の処理が進行しているあいだは偽データを表示します。 文章で説明してもよく分からないかもしれませんね。では、まず例を見てみましょう。以下のアプリは架空のメッセンジャー「Cotton Candy」です。 メッセージの送信をどのように表現するか、二つのアプローチを示しています。 非楽観的(左) vs 楽観的(右)なメッセンジャーのUI つまり、楽観的なUIではアプリが実際の処理を終わらせる(もしくは始める前)に最終状態を表示します。 手品みたいだけど、そもそもどうして必要なの?おしゃれな名前の背景にあるコンセプトは非

    処理の遅さを感じさせないUIデザインのひと工夫──楽観的UIの基本 |ブログ|root|芯を問い、成長に貢献する
    len_prog
    len_prog 2019/07/28
  • Google公式UI/UXアンチパターン解説 | 山田航空ネットワーク2nd

    (※)正式には「UXアンチパターン」ですが、内容からして「UIアンチパターン」の間違いではないかと思います Googleが公式チャンネルで公開している、Androidアプリに関するUIアンチパターンの解説動画の内容をざっとまとめました。 Android Design in Action: Common UX Issues (Japanese) - YouTube https://www.youtube.com/watch?v=x_gxZd9kLv4 まとめ自体は、自分に向けての内容でもあるので、少々過剰な表現が加わっています。 クソアプリがやらかすUIアンチパターン 1. ダイアログ - 「読み込み中」とかをダイアログ表示してる - しかもキャンセルできなかったりして最悪 - 即消えようが、画面がちらつくのでユーザーはいらつく - PullToRefreshとかコンテンツ部分で読み込み中ア

    Google公式UI/UXアンチパターン解説 | 山田航空ネットワーク2nd
    len_prog
    len_prog 2019/05/10
  • キャンセルのキャンセル問題から考えるダイアログデザイン|Goodpatch Blog グッドパッチブログ

    この文脈では、「編集内容のキャンセル」という処理を続行しても良いかをユーザーに確認しています。続行に同意したい多くのユーザーは直感的に同じ表記の「キャンセル」を押したくなるでしょう。しかしそれでは編集のキャンセルが実行されません。 このキャンセルボタンが意味するのは、「『編集内容をキャンセルする』のキャンセル」なのです。つまり、ユーザーが望み通りに編集内容を破棄するためには、反対側のOKボタンを選ぶべきなのです。このような「キャンセルのキャンセル」は二重否定で意味がややこしくなるので避けなければなりません。 ここで「キャンセルのキャンセル」にならなければ良いということで、次のようにボタン名を変えてみました。 これでもう迷うことは無くなりましたか……? 私はこの修正は誤りだと判断します。「はい」「いいえ」は結果を予想しにくい表現なので、ダイアログのアクションボタンに用いることはあまり適切では

    キャンセルのキャンセル問題から考えるダイアログデザイン|Goodpatch Blog グッドパッチブログ
  • 意味不明なことばかり言ってるUXデザイナー達の代わりに「UXデザインとは何か」を端的に説明しよう

    釣りタイトルですみません。 でもね、世に言う「UXマン」っているじゃないですか。 いかにも自分は上流工程だと言わんばかりに様々なフレームワークや聞こえはいい理論を振りかざしているにも関わらず、自分では手を動かしてモノをつくらないし、いざつくってもらったらアチャーなアウトプットだす人たち。 そもそも「UXデザイン」には色んな解釈があったところに、“つくってなんぼ”のWeb業界にそういう人たちが少なからずいる(し、えてしてなぜかデカイ顔をしている)もんだから、もはやUXデザイナーという職そのものが胡散臭いと思われていることが多いんですよね。 前職の話になりますが、当初「UX推進部」という部署に属していたので、勤務外にもUX系の勉強会にはたくさん参加してみたけれど、ほとんどくっそ当たり前のことしか言ってない講演とか、Sketchはいいぞ〜って永遠に言ってるだけの集まりとか、当に参加する価値がな

    意味不明なことばかり言ってるUXデザイナー達の代わりに「UXデザインとは何か」を端的に説明しよう
    len_prog
    len_prog 2017/06/30
  • 1