タグ

ブックマーク / uxmilk.jp (18)

  • UXリサーチのための定量的なデータ分析

    あなたの製品は一般的にどう思われていますか? 日常生活ではどのように使われていますか? お客様を理解できないと、お客様のニーズに対応できません。そこでUXリサーチが登場します。ターゲットオーディエンスの行動の背後にある明確な答えを提供し、企業が十分な情報に基づいて決定を下すのを支援します。 定量的UXリサーチとは、人間の行動を説明する数値データを理解することであり、ユーザー体験を成功させるための重要な要素の1つです。 定性的(なぜ) vs 定量的(なに)リサーチ 答え探しをはじめる前に、定性的リサーチの役割にも注目することが重要です。これにより、質問の背後にある 「なぜ」 を理解し、ユーザーの意思決定プロセスを把握できます。 定性的調査は少人数の参加者を対象に行われることが多く、今後の道筋について明確な見通しを示すものではありません。しかし、定性的リサーチは定量的リサーチの枠組みを作ること

    UXリサーチのための定量的なデータ分析
  • 優れたダッシュボードをデザインするための10のガイドライン | UX MILK

    Neilは、イギリスのAstraZenecaで働くUXデザイナーです。現在さまざまなUXデザインプロジェクトを率いています。 もしあなたがプロの自転車競技に詳しければ、「アシスト(Domestique)」という用語を聞いたことがあるでしょう。馴染みがない人に向けて説明すると、アシストとは自転車競技のチームにおける選手の役割を指します。「Domestique」はフランス語で「下僕」という意味です。 アシストの選手は、水のボトルをチームの車から集めてほかのチームメイトに渡すという役割を担っています。また、チームの車が近くにいないときに先頭選手の自転車が故障したら、自分の自転車や予備のタイヤを渡します。さらに、遅れているメンバーがいれば、先頭集団に追いつくまで彼らを牽引し、追いついたら自分はペースを落とします。このようにアシストの選手は無欲にひたすら奉仕し続けます。決してアシスト自身がレースに

    優れたダッシュボードをデザインするための10のガイドライン | UX MILK
  • エラーメッセージはフォームのどこに表示するべきか

    UX Movementの著者および設立者です。ユーザー体験のデザインスキルの開発を手助けしてよりユーザーフレンドリーな世界のために、このブログを創設しました。 フォームのどこにエラーメッセージを配置していますか? ユーザーの期待する場所にエラーメッセージが置かれていないと、ユーザーはフォーム入力を完了できなくなってしまうかもしれません。 フォーム入力を間違えたら、ユーザーはそれを修正して送信し直すために、なにが間違っていたのかを理解する必要があります。フォームを完了しようと思っていたとしても、それがあまりにも大変であればユーザーは心変わりしてしまうでしょう。 フォームの上か、フィールドのインラインか エラーメッセージの配置場所でもっとも一般的なのは、「フォームの上」と、「エラーのあるフィールドのインライン」という2箇所です。どちらの配置場所が、ユーザーにとってより直感的でしょうか? 調査に

    エラーメッセージはフォームのどこに表示するべきか
  • 文字や背景にピュアブラックを使ってはいけない理由

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

    文字や背景にピュアブラックを使ってはいけない理由
  • ダッシュボードで上手に情報を可視化するためのガイドライン

    JustinはUsabilityGeekの創始者であり、使いやすい記憶に残るオンライン体験の創出において15年以上もの実績があります。 システムが完全なものになるにつれ、定性的なデータや定量的なデータもまたさまざまな頻度・複雑さでを取得できるようになります。このような状況では、情報の可視化がさらに重要になります。 端的に言うと、情報の可視化(information visualisation)とは、抽象的なデータをユーザーが理解できるように可視化し、さらにデータ間の関係性を理解できるようにすることです。 デザイナーの役割と情報の可視化 デザイナーの役割は、ユーザーにとってわかりやすい方法でデータを表現することです。これには、課題や制約、データを表現するために利用できるスクリーンサイズという制限が伴います。 もしデザイナーがユーザーが理解しやすいデータを作成できないと、ユーザーがデータを利用

    ダッシュボードで上手に情報を可視化するためのガイドライン
  • 現代のWebナビゲーションにおける4つのルール

    Webサイトはあらゆる種類の情報にアクセスできます。ある企業についてもっと知りたい、商品を購入したい、寄付をしたい、リソースにアクセスしたいなど、探している情報を見つけるために私たちはサイトナビゲーションを頼っているのです。 多くのWebサイトが「十分」に機能するナビゲーションを備えており、ユーザーを必要な情報にアクセスさせることができます。しかし、それは試行錯誤を重ねたからなのです。この記事では、デザイナーがより効果的でわかりやすいナビゲーション体験を作り出せるようになるためのベストプラクティスをいくつか紹介します。 『ナビゲーションは検索よりも大切である』という記事で、著者のGerry McGovern氏は彼のチームが行った調査について紹介しており、「ユーザーの70%はリンクのクリックから始め、30%は検索を使用した」と述べています。また、「検索を使うよりもリンクをクリックするほうが簡

    現代のWebナビゲーションにおける4つのルール
  • プロトタイプを使って要件をまとめるときに気をつけるべきこと

    JoeはUX/CXコンサルタントとして長年のキャリアがあり、現在はUXに関する書籍、講演などを多数手がけるUXの伝道師です。 「要件を決めた時に想像していた仕様と違う」 開発チームのほとんどが、プロジェクトの中でも最悪のタイミングで、このような発言を聞くはめになります。大抵、このようなことが起きると、開発者は自分を正当化しようと怒り出します。正確に要件を定義していなかったとステークホルダーを叱責するのです。 これはもっともな怒りではあります。しかし、同時にこの状況の責任は私たち開発側にもあることも事実です。 私たちは認識のズレを埋めるため、要件に必要なことをステークホルダーに伝えてきれていません。この記事では、開発の現場で起きがちなことについて話していきます。 要件をまとめることの背景にある厳しい事実 要件が決められるのは、大抵ステークホルダーとのミーティングのときです。ステークホルダーは

    プロトタイプを使って要件をまとめるときに気をつけるべきこと
  • デザインの名著に学ぶUIデザインに関する10のルール

    Ben Shneiderman氏の『Designing the User Interface』とJakob Nielsen氏の『Ten Usability Heuristics』の著書に基づく、インタラクションデザインに関する10個の原則というものがあります。 この原則は、「ヒューリスティック」と呼ばれるもので、経験則による広範なルールであり、特定のユーザビリティに関するガイドラインではありません。 1.一貫性を重視する 同じことを意味する複数の名称や状態があることは、ユーザーにとって好ましくありません。ユーザーの混乱を招かないように、用語と動作を一致させるようにしましょう。相手の驚きを最小限にする「驚き最小の原則(The Principle of Least Surprise)」に留意することが大事です。 アプリ内のすべての要素に一貫性を持たせるようにしましょう。たとえば、同じスタイルの

    デザインの名著に学ぶUIデザインに関する10のルール
  • ケーススタディ:NetflixはどのようにA/Bテストを実施しているのか? | UX MILK

    Netflixはどうやって素晴らしいストリーミング体験を提供しているのでしょうか? 彼らがどのようにサイトを作り、さらにA/Bテストを通してどのようにUIの改善をしているのでしょうか? この記事では私がYelpで参加したDesigners+Geeks eventで学んだことから共有します。2人のスピーカー、Anna Blaylocky氏とNavin Iyengar氏はNetflixのプロダクト・デザイナーであり、何年も何百万人という会員に行ってきたA/Bテストから収集した実態について語ってくれました。また、参加者がデザインを考える上で手助けとなるようないくつかの関連する例を示してくれました。 科学的な手順 仮説 科学において仮説は、研究や実験を通して検証されるアイデアや事象の原因を指します。デザインでは理論やや予想を「仮説」と呼ぶことができます。 仮説の基的な概念には、あらかじめ決まった

    ケーススタディ:NetflixはどのようにA/Bテストを実施しているのか? | UX MILK
  • 独学プログラマーの私がプログラミング初心者に贈るたったひとつの教訓 | UX MILK

    昔の私は、スーツを着てオフィスで働く傍ら、漠然としたスタートアップのアイデアを温めているような男でした。ですがある日、コーディングについて学ぶことにしたのです。 プログラミングとの出会い ある人が終業後に自慢げに話しているのを立ち聞きしたところによると、その人はRubyと呼ばれるプログラム言語を使って、自分の一連の業務を簡単に自動化したというのです。私は「ふぅん、Rubyね」と思って帰宅し、Googleで検索して15秒も経たないうちに、適当なRubyの初心者チュートリアルに取り組んでいました。 その一週間後、私はプログラマーの集まりに初めて顔を出しました。皆がScala、Clojure、Goといった言語について話し込んでおり、吸収すべき知識にあふれていました。私はオライリーのを三冊借り、それぞれ約50ページずつくらいまで進めました。 そんなある日、友人からEmacsを習得するよう勧められ

    独学プログラマーの私がプログラミング初心者に贈るたったひとつの教訓 | UX MILK
  • エンジニア必見!本当に参考になるおすすめの企業ブログ20選

    今回はエンジニアの方に当におすすめの企業ブログを紹介します。プログラミング、チーム開発、業務効率化などの実践的なTipsが豊富なブログを厳選してみました。エンジニアがワクワクするようなコンテンツがたくさん掲載されています! クックパッド開発者ブログ URL:http://techlife.cookpad.com/ RSS:http://techlife.cookpad.com/feed/ クックパッド株式会社が運営するブログです。Webエンジニア、アプリエンジニアインフラエンジニアなどすべてのエンジニアに見て欲しいブログです。 はてなデベロッパーブログ URL:http://developer.hatenastaff.com/ RSS:http://d.hatena.ne.jp/hatenatech/rss 株式会社はてなが運営するブログです。エンジニアとしての働き方やはてなの最先端の

    エンジニア必見!本当に参考になるおすすめの企業ブログ20選
  • 読み間違えると恥ずかしい!デザイン・プログラミング用語15選 | UX MILK

    ITの制作現場では、どんな職種でもコードや開発言語などの話題は避けて通れません。ただでさえカタカナ用語の多い業界ですが、プログラミングやコーディングの用語などはカタカナですらなく英語表記ですし、中には読み方が不明確なものもあります。 チームメンバーもさることながら、他社の人と話すときに間違った読み方を使っていたら恥ずかしいですよね。今回は間違いの多いと言われる用語や、議論を読んでいる言葉をピックアップしてみました。 ※更新:米国英語の発音記号を追加しました Webデザイン系 width【wídθ, wítθ】 正:ウィズス、ウィドゥスなど 誤:ワイズなど HTML/CSSの幅指定で使う「幅」という単語です。よく使うものの、発音の仕方に自信が持てない人も多そうです。 height【hάɪt】 正:ハイト 誤:ヘイト 上記とセットで間違えられやすい単語。「高さ」という意味で、ウェブでなくとも「

    読み間違えると恥ずかしい!デザイン・プログラミング用語15選 | UX MILK
  • ノンデザイナーも必見!デザインの基礎が学べるスライドまとめ

    どんな商品やサービスにおいても、デザインは必ず関わってくる分野です。優れた商品やサービスをつくるためには、チーム全員がデザインに関する基礎知識を身につけておいた方が良いでしょう。 そこで今回は、ノンデザイナーでもデザインを簡単に・楽しく学べるスライドをご紹介します。もちろんデザイナーの方々にとっても役立つものばかりなので、ぜひ参考にしてください! ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう そもそもデザインって何?という根的なところから、良いデザインの選び方を具体例を交えて紹介しています。タイトルの通りノンデザイナー向けなので、これからデザインを勉強する人、デザイナーと関わる仕事をしている人は必読です。Q&A方式でスライドが進んでいくのでさらっと読めます。

    ノンデザイナーも必見!デザインの基礎が学べるスライドまとめ
  • 古典絵画から学ぶデザイン

    デザインという言葉は今日では一般的ですが、デザインという言葉がなかったような過去の古典美術の世界でもデザインの概念はありました。絵画というと、デザインというよりファインアートの印象が強いですが、過去の画家たちから学ぶことも多くあります。そこで、今回は古典絵画から学ぶデザインについて説明します。 絵の情報量 モチーフの置き方で変化するもの こちらに2枚の絵があります。 Aは木の隣にがいます。Bは木の後ろにが配置されています。どちらも同じ要素で描かれていますが、違いは何かわかるでしょうか。 答えは「情報量」です。 Aの場合、木とが並んではいるものの、3次元で考えたときに「どちらが前にあるのか」や「どちらが後ろにあるのか」がわかりません。わからない、ということは観るほうにとって情報が与えられてない、ということです。 一方、Bは確実に「木が前でが後ろにいる」という情報を観る人に与えます。つ

    古典絵画から学ぶデザイン
  • 5つのキュレーションサービスから学ぶ記事配信アルゴリズム

    アプリエンジニア。株式会社マイナースタジオ所属。主に扱っているプログラミング言語はSwiftRubyPHPPython。イカが好き。 みなさんは情報収集をする際にはどのようなものを利用していますか? 最近では様々なキュレーションサービスがリリースされており、そのWebサイトやアプリを使用している方も多いのではないかと思います。 今回はキュレーションサービスの中でも記事配信アルゴリズムが興味深いものをまとめてみました。各々のキュレーションサービスの特徴的なアルゴリズムとともに紹介していきます。 キュレーションのアルゴリズム サービスの紹介の前にキュレーションサービスにある主な機能について紹介します。 - 記事収集機能 ユーザーに配信するための記事を収集する機能です。RSSSNSなどから抽出したURLが情報源として利用されることが多いです。 - 記事評価機能 記事が正しいものであるか、

    5つのキュレーションサービスから学ぶ記事配信アルゴリズム
  • 意外と知られていないエクセルの便利関数まとめ

    ExcelGoogle Spreadsheetなどの表計算ソフトを仕事や学校で使う人は多いかと思います。 来の用途である表計算はもちろんですが、計算までしなくてもなにかのリストを作る際に使ったり、システムの仕様書を描いたり(エンジニアの方に嫌がられる事が多いので気をつけましょう)、活躍の場は多いです。 そんな当たり前のように使っているようなExcelですが、業の方でもない限り、意外と関数を知る機会というのはないものです。ここではSUM関数くらいしか使ったことない人にお送りする、ちょっと便利な関数をご紹介します。 SUBTOTAL関数 上記図のように各セクションごとに小計があり、全体合計を出したいとき、個別に選んで足し算などしていませんか? 小計でSUBTOTAL関数を使い合計を出し、且つ全体の合計にもSUBTOTALを使うと、SUBTOTAL同士は無視されるので、小計を含まない全体の

    意外と知られていないエクセルの便利関数まとめ
  • 環境構築は必要なし!すぐにプログラミングが始められるWebサービス10選

    コードを試したい場合だったり、プログラミングの学習をしたりするときに、開発環境を整えるのが面倒なことはありませんか?今回は面倒なアカウント登録も不要で、ブラウザだけですぐにプログラミングができるWebサービスをご紹介します。 Runstant http://phi-jp.github.io/runstant/release/alpha/ 対応言語:HTML, CSS, JavaScript Web系のコードを試すときに便利なサービスです。エディタがSublime Text風のハイライトで見やすく動作もサクサクなので非常に使いやすいです。saveボタンを押すことでコードの情報が入ったURLが自動的に生成され、簡単に他の人にシェアすることができます。また、上のshareボタンを押した後にembed codeの内容を記事内に埋め込むとコードと開発環境自体も埋め込むことができます。Webデザイナー

    環境構築は必要なし!すぐにプログラミングが始められるWebサービス10選
  • 実はあのアニメやマンガで使われていたフォントまとめ

    デザインをするとき、「あの作品みたいなフォント」のようにイメージしたり、説明したりすることはないですか? 今回は有名なアニメ作品の中でもフォントが特徴的なものを集めてみました。 マティス-EB アニメのフォントとして必ず引き合いに出される定番フォントがマティス-EBです。こちらは「新世紀エヴァンゲリオン」の題字で使用されていることで有名ですが、元のフォントを見ればわかるように、使用の際にはかなり横幅を圧縮しており、独特の緊張感を醸し出しています。 ラグランパンチUB こちらは見覚えのある方も多いのではないでしょうか。作中にもタイポグラフィを大胆に使ったことで話題になった「キルラキル」のフォントです。そのインパクトあるボールドさと、大胆な赤と文字づかいでラグランパンチはキルラキルフォントとして一躍有名フォントとなりました。 ゴシックMB101 モリサワフォントに収録されている、使い勝手のいい

    実はあのアニメやマンガで使われていたフォントまとめ
  • 1