タグ

UXに関するy-sakakuraのブックマーク (33)

  • ユーザーがより「頑張らなくていい」体験を考える

    だれもがユーザー体験を楽に感じるものにすることを目指していますが、そう考えることをやめれば、もっと他にできることがあるのではないでしょうか? ここ数年でユーザー体験のデザインは飛躍的に進歩しました。デジタルの世界におけるビジネスの成功の鍵は、すぐれたカスタマー体験を提供することであることは次第に受け入れられてきています。時間に余裕のないユーザーは使いづらいインタラクションに我慢することは好まず、提供された体験が快適なものでなければサイトを離脱してしまうことを企業は理解しています。 ユーザビリティテストとユーザー調査も盛り上がりを見せています。 Steve Krug氏の著書『Don't Make Me Think』といった書籍は、ユーザーの代弁として綴られた1冊であることから、ユーザー体験の責任を負っている多くのチームへの真言となりました。 もちろんデザイナーの戦いはまだ続いています。クライ

    ユーザーがより「頑張らなくていい」体験を考える
  • ボタンのラベルには分かりやすい文言が重要、ユーザーが使いやすい文言の選び方

    ボタンのラベルに「送信(Submit)」や「キャンセル」や「はい/いいえ」しか使わない、という人は注意が必要です。ボタンのラベルはユーザーがボタンをクリックするための重要な要素です。間違った文言を使用していると、ユーザーは混乱し、作業量が増え、タスクにかかる時間が多くなります。 ユーザーがボタンを使いやすいよう、ボタンのラベルに使用する適切な文言の選び方を紹介します。 5 Rules for Choosing the Right Words on Button Labels by UX Movement ボタンのラベルに間違った文言を使用しない 1. アクションの動詞を使う 2. 正確な言い回しを使う 3. タスク固有の言葉を使う 4. 簡潔な言葉を使う 5. 大文字を適切に使う アクションをはっきりと伝える ボタンのラベルに間違った文言を使用しない ボタンの文言は、ボタンがどのように見え

    ボタンのラベルには分かりやすい文言が重要、ユーザーが使いやすい文言の選び方
  • フィッツの法則をUIデザインに活用する

    よく知られているように、人間の行動は予測がつかないものです。重力、電気、摩擦とは違い、毎回いつも同じように振舞うわけではないようです。 そしてこのことが、フィッツの法則を興味深いものにしています。フィッツの法則とは、人間の振る舞いについての非常によくできた予測モデルです。 デザイン時にフィッツの法則を活用することで、標準的な人間の振る舞いを用いて、使いやすいインターフェイスを作れるようになります。あなたのWebサイトにも、ソフトウェアのプログラムにも、ゲームにも、これを用いることができます。料品店のセルフレジから金融系のWebサイトまで、人間の行動は変わらずに同じままなのです。 どんなインターフェイスも、フィッツの法則から得られる教訓を用いることで、ユーザーが起こすエラーを減らして、彼らがタスクをより素早く達成するようにできます。 フィッツの法則とは何か フィッツの法則は、人間の行動をモ

    フィッツの法則をUIデザインに活用する
  • 失敗をきちんとデザインするということ

    「失敗の話をしよう」 この言葉は過去に例を見ないほど、賞賛されるようになったと思います。Googleで「失敗」を検索すると、「なぜ全ての成功は失敗から始まるのか」「なぜ失敗は成功にとって良いのか」といった刺激的な記事のタイトルが多く出てくるでしょう。また失敗は「早く失敗せよ、多く失敗せよ」のように、リーンUXのアプローチの中でもよく登場する概念のひとつです。 そんな状況の中で、私は革新的な意見を述べたいと思います。 失敗は悪いことです。 そう、それはこんなにもシンプルなことです。失敗を望まないのは人間の直感的な反応でしょう? 失敗を望まないのには理由があります。失敗は良い目標にはなり得ないのです。 失敗を美徳として褒め称えたり、「早く失敗せよ、多く失敗せよ」といった言葉の背景にある考え方を掘り下げている記事を実際に読んでみると、そこでは失敗は素晴らしいものだとは、まったく語られていないと気

    失敗をきちんとデザインするということ
  • ユーザーがアイコンを誤タップするのを防ぐためには

    AnthonyはUX Movementの創立者、ライター。ユーザーに優しいUXデザインのスキルを読者の方が上達できるよう、UX Movementのブログを始める。 これまでにモバイルアプリをデザインしたことがある人なら、アイコンボタンがどれだけ便利で普及しているかはお分かりかと思います。しかし、それらが近すぎる位置に配置されたとき、どれだけユーザーの誤タップを招いているかご存知でしょうか。 これはアイコンボタンが一列に並んでいる場合によく発生する問題です。ユーザーは、ボタンの間に十分なスペースがない場合、隣接するボタンを簡単に押すことができてしまいます。このミスはユーザーを苛立たせ、行いたいタスクを遂行しづらくする可能性があります。 アイコンとアイコンの間に余分なパディングを追加する ユーザーの誤タップを防ぐにはパディングを追加します。アイコンの上に指を置いて、十分なパディングがあるかどう

    ユーザーがアイコンを誤タップするのを防ぐためには
  • 複数事例から見るコンバージョンにつながるランディングページとは

    PaulaはフリーのWebデザイナーです。彼女は小規模なオンラインビジネスのリブランディングなどを手掛けています。 ランディングページの指標改善に、銀の弾丸はありません。すべての状況に対して有効なアプローチはどこにもないのです。 しかしながら、適切なUX戦略があれば、優れたランディングページを簡単に構築することができます。この記事では、情報の取捨選択やメッセージの明確化を主とした4つのUXコンセプトを見ていきます。 明瞭なファーストビューが良い印象を生み出す 第一印象は非常に大切で、良い印象を与えるためには整理されたヘッダーが重要です。 私はデザインが修正されたSlackのトップページがあまり好きではありません。それというのも、たくさんの要素が一度に表示されているためです。画面上のナビゲーションや2つのCTAボタン、コピーライトなどが表示されていて見た目は美しいのですが、読みにくくなってい

    複数事例から見るコンバージョンにつながるランディングページとは
  • ユーザーに直感的で分かりやすいボタンとは、UXの観点からくわしく解説

    ボタンのクリックレートが低い、ボタンを配置したページにユーザーが長い時間を費やしている、これはボタンが直感的でなく、分かりにくいボタンが原因かもしれません。 コンテンツにおけるボタンの配置、ボタンの形状、導線に基づいた配色など、ユーザーに直感的で分かりやすいボタンをUXの観点から詳しく解説します。 5 Techniques to Make Mobile Call to Action Buttons Intuitive by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ユーザーが分かりやすいボタンとは 1. スキャンパターンに従ってボタンを配置する 2. 形を使って、ボタンをテキストから区別する 3. プログレッシブアクションにカラーを追加する 4. ラベルにあるテキストの太さを変える 5. 優先度の高

    ユーザーに直感的で分かりやすいボタンとは、UXの観点からくわしく解説
  • UIでアイコンを使用するためのチェックリスト

    アイコンは、GUIで最も頻繁に使用される要素の1つです。 どの様な要素があれば、よいアイコンなのでしょうか? この記事ではあなたが使うアイコンがユーザーにとって機能するものとなるための簡単なチェックリストを紹介していきます。 1.認識しやすい 明瞭さは、優れたインターフェイスにおいて最も必要な要素です。しかし残念なことにそうでない場合が多々あります。 アイコンは何よりもまず意味が伝えられないといけません。アイコンが何を表しているのかが不明瞭な場合は、その意味がすぐに失われ、視覚的なノイズにしかなり得ません。 アイコンの優れているところは、ラベルを読まなくても意味が理解できるということです。 簡単なルールに従えば、意味が伝わらないアイコンの使用を避けることができるでしょう。 ユーザーになじみのあるアイコンを使用する ユーザーのアイコンへの理解は過去の経験に基づいています。 特殊なものではなく

    UIでアイコンを使用するためのチェックリスト
  • ユーザーを飽きさせないためのローディングアニメーションの10選

    システムのステータスを視覚化することは、UIデザインの指針の中でも最も重要なものの1つです。 良いインタラクションデザインはフィードバックを与える アプリやWebサイトから即座に反応があれば1番良いですが、読み込みが遅いときもあります。反応が遅いのは、インターネットの接続が悪いせいかもしれませんし、オペレーションそのものに時間がかかっている可能性もあります。そのような場合、デザイナーは、アプリが実際に作動しておりリクエストに取り組んでいるということが分かるよう、ユーザーを安心させなくてはなりません。 アニメーションによる待機表示は、何か起こっている、もしくは読み込んでいる際に、ユーザーにシステムの状態を知らせる最も一般的な形です。しかしこれらの表示のほとんどは、クリエイターがただデフォルトで提供されているものを採用しているだけなので、見ていて面白くありません。

    ユーザーを飽きさせないためのローディングアニメーションの10選
  • UXデザイナーになるには?仕事内容と年収を徹底解説!

    近年、注目を集める職種の1つがUXデザイナーです。Webサイトやスマホアプリ、SaaSサービスなど、UXデザイナーの活躍する場が増えています。一方で「UXデザイナー なくなる」という検索母数は多く、他のDX人材に比べ必要性が認知されていないことも現状でしょう。しかし、顧客体験を最大化するためには、UXデザイナーの存在が不可欠です。 そこで今回は、未経験からUXデザイナーへの転身をめざす方に求められる「マーケティング思考」「デザイン思考」について解説します。Webデザイナーからの転身を検討している方にも必須の内容です。 そもそもUX(ユーザーエクスペリエンス)とは? UXとは「User Experience:ユーザーエクスペリエンス」の略称で、製品やサービスを使用することで得られる体験を指します。 ただ単に使いやすい・わかりやすいだけではありません。ユーザーの行動を導き、ユーザーがやりたいこ

    UXデザイナーになるには?仕事内容と年収を徹底解説!
  • パーツ別のUI UXのデザインが参考になるサイトCollect UI | SONICMOOV LAB

    以前にUI/UXデザイン制作の参考に!見てるだけでも楽しいアプリデザインのギャラリーサイト9選という記事でアプリに関連するUI UXの参考サイトを紹介しましたが、今回も個別に紹介したいと思います。 目次 Collect UI UI UXデザインサンプル Collect UI Collect UIは、Ahmet Sülek氏によるサイトで、Web及びアプリの様々なデザインやイラスト、およびUI / UXをパーツ別にコレクトしたギャラリーサイトです。 ざっとですが、こんなパーツデザインがまとめられています。 サインアップ チェックアウト ランディングページ 計算機 アプリアイコン ユーザープロフィール 設定 404ページ ミュージックプレイヤー SNS共有 カウントうダウンタイマー オン・オフスイッチ 検索パーツ http://collectui.com/ UI UXデザインサンプル いくつか

    パーツ別のUI UXのデザインが参考になるサイトCollect UI | SONICMOOV LAB
  • 優れたボタンデザインのための7つのガイドライン

    Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 ボタンはインタラクションデザインに欠かせない要素です。ユーザーとシステムの意思伝達において大切な役割を担っています。この記事では、効果的なボタンを作成する際に知っておくべき7つの基原則について説明します。 1. ボタンをボタンらしく見せる UIを操作するとき、ユーザーは「クリックできる」ものとそうでないものを即座に知る必要があります。ユーザーは、デザインされたすべてのアイテムを解読しなければなりません。そのため一般的に、ユーザーがUIを解読するのに必要な時間が長くなればなるほど、ユーザーにとって使いにくくなります。 しかし、ユーザーはどのようにして要素がインタラクティブかどうかを判断するのでしょうか? UIのオブジェクトを理解するために、ユーザーはこれまでの経

    優れたボタンデザインのための7つのガイドライン
  • UIデザインにおけるKPI設定の重要性 - Gunosy Tech Blog

    こんにちは、今年3月に入社したLUCRA事業部のはよんです。 こちらは Gunosy Advent Calendar 2018、13日目の記事です。 なお、昨日の記事は @大曽根さんの 社内技術ブログのはじめかたでした。 LUCRAという女性向けアプリのデザインを担当しています。 社会人1年目の時から、UI/UXデザイナーとして、ずっとアプリとウェブのデザインをしています。 今回はUIデザインにおけるKPI設定の重要性というタイトルにしていますが、Gunosyの分析に強い特徴がデザインにはどういうふうに影響されているのか、デザインだけでなくUI設計の全体的な流れについて書いていきたいと思います。入社してから自分のデザインに対する価値観も大きく変化しているので、少し個人的な話も混ぜていきますね。 入社前 1~2年目の頃はデザインの価値を信じており、こだわっていました。0.5pxのズレも見逃せ

    UIデザインにおけるKPI設定の重要性 - Gunosy Tech Blog
  • UIとは?UXとは?違いを理解しよう!

    成果が出るホームページを構築するうえで欠かせない概念の1つに「UI(ユーザーインターフェース)/ UX(ユーザーエクスペリエンス)」があります。一緒に語られることの多いUIUXのそれぞれの単語の意味の違いについて、しっかり理解していますか? デザイナーの方は理解されている方が多いと思いますが、デザイナー以外の方も、UI/UXについてしっかり理解しておかないと、デザイナーとのコミュニケーションに齟齬が生じてしまう可能性があります。 今回は、意味を混同してしまいがちなUIUXの違いや改善事例を紹介します。 UI(ユーザーインターフェース)とは?=ユーザーとサービスとの接触面 UIは「ユーザーインターフェース(User Interface)」の略です。Interfaceとは「接点、接触面」という意味で、UIはユーザーと製品・サービスの接触面を指すので、「ユーザーの目に触れる部分使用する部分」

    UIとは?UXとは?違いを理解しよう!
  • 文字や背景にピュアブラックを使ってはいけない理由

    UX Movementの創立者、ライター。ユーザーに優しいUXデザインのスキルを読者の方が上達できるよう、UX Movementのブログを始める。 デザインにピュアブラックを使うと可読性が低くなると知っていましたか? 統計によると、「アメリカの成人の58%」がコンピュータ作業で眼精疲労を経験したことがあるそうです。デザイナーは使用する黒の色に注意を払うことで、目が疲れる可能性をある程度減らすことができます。 ピュアブラックの文字や背景 ピュアブラックの文字や背景と白の組み合わせは、ユーザーが文章を長時間読むとき目に不快感を与えることがあり、眼精疲労を招いてしまいます。 白は100%の明度であり、黒は0%の明度です。このように明度のコントラストが強いと光量に不均衡が生じ、ユーザーが明るさに順応しようとするために目が酷使されることになるのです。 この現象を実証するために、暗い部屋で明るい電灯を

    文字や背景にピュアブラックを使ってはいけない理由
  • Webサイトのプロジェクトを上手にキックオフする方法

    RobertはGatherContentのコンテンツストラテジストです。 また、GatherContentブログの編集長でもあり、さまざまなWebマガジンで記事を書いています。彼のTwitterはこちら。 Webサイトプロジェクトのスタート時には、ローンチを成功させるために、プロジェクトのゴールを理解し、ユーザーと顧客について学ぶ発見フェーズが必要です。さらに、発見フェーズを進めるためのキックオフミーティングも同じように重要です。 受託制作と自社サービスのどちらの場合でも、キックオフミーティングと発見フェーズにおいてチームが協力し合うことで、組織の目的を共有することができます。これらの段階は、プロジェクトを上手く協力しながら進めるために、チームを立ち上げる段階でもあります。 いつキックオフミーティングをすべきか 理想的にはキックオフミーティングは、プロジェクトへの期待を共有するために、プロ

    Webサイトのプロジェクトを上手にキックオフする方法
  • ユーザーが許可したくなるPush通知を考える|sadakoa|note

    初めましての方もこんにちは、さだこえ (@sadako_a_ ) と申します。 DeNAに新卒で入社後、現在は株式会社FOLIOのデジタルプロダクトデザイナーとして、オンライン証券のUIデザインに従事しながら、スタートアップのデザイン支援を副業で行っています。 今記事では、主にアプリの機能として欠かせないPush通知に焦点を当て、記事を執筆します。 Push通知とはご存知の通りPush通知とは、アプリやwebサービスで何か変更や更新があった場合にお知らせをする機能です。一般的にこの業界で言われるPush通知は、Apple Push Notificationを指していることが多いと思われます。 その理由の1つとして、AndroidはPush通知に関してユーザーの許可を取る必要が無いからです。(ダウンロードする際にオプトインされるため、許可率は100%になる。) iOSやWeb Browser

    ユーザーが許可したくなるPush通知を考える|sadakoa|note
  • デザイナーも知っておきたい、パーソナライズを活用したUX改善事例

    最近では、UXデザインの文脈においても「パーソナライズ」という言葉をよく聞くようになり、ユーザーデータの活用により注目がされるようになってきています。 そこで今回は、データによるパーソナライズとそれがもたらすUXについて、レコメンドエンジン搭載プライベートDMP「Rtoaster(アールトースター)」を提供する株式会社ブレインパッドの方にお話を聞いてきました。 登場人物 株式会社ブレインパッド 上川 晃二朗 氏 株式会社ブレインパッド 大野 冬渚 氏 DMPってデザイナーに関係あるの? ― 今回のテーマであるパーソナライズはUXデザインとも関係が深いですが、DMPはどういった点でパーソナライズと関係してくるのですか? 上川:まず簡単に説明すると、DMP(データ・マネジメント・プラットフォーム)はユーザーに関するあらゆるデータを蓄積して、分析することができるツールです。 もう少し詳しく言うと

    デザイナーも知っておきたい、パーソナライズを活用したUX改善事例
  • 人はなぜ「分かりやすいデザイン」でも失敗するのか|Tsutomu Sogitani

    これは私が最近よく訪問する日橋駅直結の商業ビル、東京日橋ビル内のエレベーターのボタンです。 唐突に質問ですが、このボタンで操作ミスを起こすポイントがあるとすれば、それがどこだか分かりますか? 説明が必要と思いますが、このビルは7Fがオフィスロビーになっています。駅直結のB1と1Fからは7Fまで直通するシャトルエレベーターがあり、全員7Fで一度降り、セキュリティチェックをし、23Fより上にあるオフィスフロアに入ります。そのオフィスロビーとオフィスフロアを行き来するためのエレベーターのボタンがこれです。 ボタンが23Fから30Fまでしかなくて、下に大きく7Fのボタンがあるのは、そういったビルの構造からです。 私と同行したディレクター(26歳)は、打ち合わせが終わってオフィスフロアからオフィスロビーに帰る際に、操作ミスをしました。それも1度だけでありません。次の打ち合わせの帰りにもまったく同

    人はなぜ「分かりやすいデザイン」でも失敗するのか|Tsutomu Sogitani
  • 「チームPerfumeによるライブ」 これってもしかして、UXデザインになりませんか?|ビビビ

    UXデザインの定義やあるある、持論等は、Twitterのタイムラインに日々上がってくるのですが、「結局、UXデザインによってどんなアウトプットが出たの?事例は?」となることが多いので、日々の生活で感じた「これってもしかして、UXデザインになりませんか?」を、拙い文章と想像力で書いていきます。 「チームPerfumeによるライブ」=UXデザインのお手? 今回取り上げたいのは、「チームPerfumeによるライブ」です。 私は、Perfumeこそ、UXデザイナーの鑑(模範)なのではないかと考えています。 かれこれ50以上のアーティストのライブに足を運び、Perfumeのライブが突出して満足度が高く、何故かを考え、上記の結論に辿り着きました。 Perfumeの3人とスタッフを含む「チームPerfume」は、ライブ中のパフォーマンスだけではなく、ライブ前後を含めた「Perfumeのライブに行く」と

    「チームPerfumeによるライブ」 これってもしかして、UXデザインになりませんか?|ビビビ