タグ

uxに関するbaba_jdlのブックマーク (52)

  • UXデザインに必要なユーザーインタビューの方法と質問設計 | UXデザイン会社Standardのブログ

    以前の記事にて、なぜ新規事業にユーザーリサーチが必要なのかを主に述べました。しかし、いざ行おうと思ってもどのように行えばいいのか悩まれる方は多いのではないでしょうか。 そこで、今回はUXデザインのリサーチ手法にはどのようなものがあるのかを分類した上で、その中でも利用頻度の高いユーザーインタビューの方法、特に質問設計にフォーカスしてお話したいと思います。 今回の記事では主に下記のポイントについて見ていきます。 どのように代表的なリサーチ手法を使い分ければいいのか? どのようにユーザーインタビューの準備を進めていけばいいのか? どのようにインタビューの質問を設計していけばいいのか? そのため、特に「ユーザーインタビューの設計方法が分からない」「何を尋ねたらいいのかわからない」「質問しようと思ってもつい誘導してしまいがち..」という方に役に立つかと思います。 逆に今回の記事では、下記のポイントに

    UXデザインに必要なユーザーインタビューの方法と質問設計 | UXデザイン会社Standardのブログ
  • メインビジュアル (ヒーローイメージ) や背景の動画による演出 | Accessible & Usable

    公開日 : 2017年2月16日 カテゴリー : ユーザビリティ / アクセシビリティ ウェブサイトのメインビジュアル (ヒーローイメージ) や、メインコンテンツの背景が、動画になっているものを最近よく目にします。高品位な動画を提示することで、サイトが扱う商品やサービスの特長、雰囲気、質感、姿勢、などをユーザーに効果的に印象付けることが期待できます。以下は、記事執筆時点で見つけた数ある中のほんの一例です。 大学 (学部案内) 子ども/ファミリー向け写真館 スイーツのお店 宿泊施設 炭酸入浴剤の販売 キッズバイクのプロモーション などなど... こうした演出は、商品やサービスの「予期的 UX」醸成やブランディング訴求といった側面が重視される中、今後ますます増えててゆきそうですが、ウェブコンテンツである以上はこうした側面を十分に活かしつつも、基的なユーザビリティやアクセシビリティをしっかり

    メインビジュアル (ヒーローイメージ) や背景の動画による演出 | Accessible & Usable
  • UIデザインにユーザーストーリーが必要な理由

    Tom Brinton氏はBYUを2012年に卒業した後、CitrusBits、Wallaroo Media、CustodyXChangeでUI/UX設計者として働いてきました。彼は優雅なインターフェースをデザインすることが好きです。 あるデザインチームが、クライアントの新しいアプリのモックアップについて話し合っているとします。すると、アプリがどのようにあるべきかついて、チームメンバーはそれぞれ 違う考えを持っているということが明らかになります。こうなると、ミーティングはすぐに、「何が正しいか」というよりも、「誰が正しいか」という議論になってしまいます。 誰もが自分のデザインを守ろうとしますが、誰もユーザーを守ろうとはしません。ひょっとしてあなたにも思い当たる節がありませんか? このようなときにこそ、ユーザーストーリーを導入する必要があります。 最近では、UI/UXのプロがアジャイル開発で

    UIデザインにユーザーストーリーが必要な理由
  • ブルームバーグがTOPページを再発明、その脅威の集客力:月間PVが7倍に増加 | DIGIDAY[日本版]

    パブリッシャーは、トップページへのトラフィックの全体的な減少に苦しんでいる。だが、ブルームバーグメディア(Bloomberg Media)は、その対策を見つけたと考えているかもしれない。10月にテクノロジーセクションを再開した際、各記事を下へスクロールしていくと、トップページが現れる仕様したのだ。 パブリッシャーは、トップページへのトラフィックの全体的な減少に苦しんでいる。だが、ブルームバーグメディア(Bloomberg Media)は、その対策を見つけたと考えているかもしれない。10月にテクノロジーセクションを再開した際、各記事を下へスクロールしていくと、トップページが現れる仕様にしたのだ(Technology – Bloombergのトップからどれか記事を選んでスクロールしてもらいたい)。 「メディアでは、全体としてトップページへのダイレクトなトラフィックが徐々に減少する傾向がある。新

    ブルームバーグがTOPページを再発明、その脅威の集客力:月間PVが7倍に増加 | DIGIDAY[日本版]
  • 見やすいサイトを作るときに最低限チェックしたい6項目

    いくらコンテンツが良くても、見やすいサイトでないとユーザーはすぐに離脱してしまうでしょう。「見やすい」というのは、コンテキストやユーザーに依存する部分も多いのですが、そこには最低限守るべきルールがいくつかあります。 この記事では、見やすいサイトを作るときに最低限チェックしておきたい項目をご紹介します。 フォントサイズ フォントサイズや行間などは文章の視認性を大きく左右します。 WCAG 2.0では英語などの場合は18ptまたは14ptの太字、日語の場合はそれと同等の文字サイズが望ましいとされています。1pxは0.75ptと同等とされているので、18ptは24pxとほぼ同等です。さらに、行の高さ(line-height)は150%〜200%、段落の間隔は行送りの1.5倍以上が推奨されています。 *18ptは1.5emと同等、14ptは1.2emと同等 そのほか、Googleも読みやすいフォ

    見やすいサイトを作るときに最低限チェックしたい6項目
  • 有名サイトの事例から学ぶ12のWebデザイン・レイアウト

    ユーザーはデザインを見たいのではなく、コンテンツを求めてサイトにアクセスします。Web UI Patterns 2016 Vol. 1で説明した通り、デザインは直感的で分かりやすくコンテンツを表示するための手段にすぎません。 この記事では、Webにおける12通りのレイアウトのパターンを実際の例や良い実践方法、共通のシナリオを通して見ていきます。 1. カード 2. グリッド 3. マガジン 4. コンテナの不使用 5. スクリーン分割 6. シングルページアプリケーション(SPA) 7. Fパターン 8. Zパターン 9. 水平的なシンメトリー 10. 水平的なほぼシンメトリー 11. 放射線状のシンメトリー 12. アシンメトリー 1. カード

    有名サイトの事例から学ぶ12のWebデザイン・レイアウト
  • 完全無料で美しい!参考にしたいUIキット50個まとめ 2017年保存版

    ユーザーがウェブサイトを訪れたとき、まず目にするものがグラフィックデザインです。高品質なUIデザインを利用することで、ユーザーにサイトをより魅力的に見せることができます。 今回は、新しいデザイントレンドを取り入れた、完全無料ダウンロード可能なUIキットをまとめてご紹介します。 これらのUIキットを利用することで、クリエイティブで美しく、便利なウェブサイトやアプリデザインの作成をスピーディーに行うことができます。必要に応じてボタンやログインフォーム、ソーシャルメディアなどの要素を編集し、自由に利用することができます。 魅力的なウェブデザインを素早く仕上げる、すごい無料UIコンポーネント素材30個まとめ 完全無料でこのクオリティ!美しい新作UIキット50個まとめ 2017年版 Blog UI Kit ファイル形式: Sketch Prometheus | UI Kit ファイル形式 : PSD

    完全無料で美しい!参考にしたいUIキット50個まとめ 2017年保存版
  • デザインの確かな知識が身につく!Webサイトやアプリのデザインの勉強になるスライドのまとめ

    実践的なUXデザインやインタラクションデザイン、レスポンシブサイトに効くデザインTips、Sketchを使ったデザインフロー、Webデザイナーのためのタイポグラフィ講座など、Webサイト・アプリなどのUIデザイン/UXデザイン勉強になるスライドを紹介します。 時間をかけてゆっくり、何度でも見たいスライドばかりです。 写真: ぱくたそ 確実に良くするUI/UX設計 from Takayuki Fukatsu 実践的なUXデザインとインタラクションデザインの考え方 from CyberAgent, Inc. UXとデザインまとめ by 上野学 - presentation from UX まとめ 2015 from Sociomedia アクセシビリティからはじめる、WebサイトのUXデザイン from Yoshinori OHTA いいデザインのために組織の一人ひとりができること f

    デザインの確かな知識が身につく!Webサイトやアプリのデザインの勉強になるスライドのまとめ
  • Tiny Trends #1: Non-Rectangular Headers

    Breaking parallel is a great way to take a standard, rectangular header and adding some visual interest. It’s often accompanied with overlapping cards to give introduce another “z-layer” of depth. Anyway, I won’t bend over backwards with a drawn-out explanation. Here’s what I’m seeing.

    Tiny Trends #1: Non-Rectangular Headers
  • 「ペルソナ手法」の復習に!ペルソナについてのあれこれをQ&A形式でまとめてみる【2017年更新版】

    photo credit: tsevis via photopin cc こんにちは、@h0saです。最近業務でペルソナを作っていて、ペルソナ手法について自分の知識を見直しています。 今回は「ペルソナ」について聞かれた時に説明しやすいように、「ペルソナ手法」についてのあれこれをQ&A形式でまとめてみました。 なお、このまとめはペルソナのマーケティングでの活用ではなくプロダクト開発での活用を前提に書かれています。 更新履歴 2014年8月16日:「ペルソナをつくったあとにやることは?」と「捏造ペルソナ」について追記しました。 2017年7月29日:最新の経験と知識を元に、内容を加筆修正しました。 ペルソナとは何か? ペルソナとは、ユーザーの行動パターンを調べ、そのデータを統合して作り上げたユーザーを代表する仮想の人物のことです。一体のペルソナの背後には、多くの人間が存在します。 1999年に

    「ペルソナ手法」の復習に!ペルソナについてのあれこれをQ&A形式でまとめてみる【2017年更新版】
  • 食材宅配サービスOisixにおけるUXの取り組みとアプリの改善事例

    有機野菜などの品宅配専門のECサービス「Oisix」を展開するオイシックス株式会社。同社ではサービスのUXを向上するため「UX室」というチームを設け、日々サービスの改善を行っています。 今回はオイシックスのUI/UXデザイナーである福山さんにオイシックスのUXデザインの取り組みと、実際の事例のお話をお伺いしました。 Oisixとは 「Oisix」は有機野菜や無添加品などの定期宅配を行うECサービスで、Webとアプリ両方で展開しています。定期宅配と言っても、注文の最低金額設定もなく、注文をしない週があっても良いなど、自由でフレキシブルな買い物体験を提供しています。 オイシックスにおけるUXデザインの取り組み 福山 遊果 氏 EC事業部 UXUIデザインセクション UI/UXデザイナー 千葉県千葉市出身。多摩美術大学情報デザイン学科を卒業し、ソフトウェア会社でのUI/UXデザインを経て

    食材宅配サービスOisixにおけるUXの取り組みとアプリの改善事例
  • 【スタバ・Instagram・DeNA】これからのビジネスの成功要因「UXデザイン」を解説

    【スタバ・Instagram・DeNA】これからのビジネスの成功要因「UXデザイン」を解説
    baba_jdl
    baba_jdl 2016/12/01
    “1週間で1億インプレッション”?
  • ハンバーガーメニューはもう古い!代わりに使えるモバイル用ナビメニュー5つまとめ

    ウェブサイトを制作しているひとなら、モバイル端末におけるハンバーガー型ナビゲーションメニューの見つけにくさと効率の悪さ、またどれだけUXデザインの邪魔になっているのか、いくつもの記事を読んだことがあるでしょう。(この問題の参考にしたい記事はこちらやこちら、こちら、こちらからどうぞ。) 幸いにも多くのサイトやアプリで、より効率的な解決法となる代替アイデアが試されています。今回紹介しているアイデアは、他のものより優れているというわけでなく、コンテンツや内容によってパフォーマンスや実行できるかどうかは変わってきます。 01. タブ型ナビゲーションメニュー もしウェブサイトやアプリの項目が限られている場合、ユーザーはできるだけ素早くそカテゴリを切り替えたいところ。そんなときは、タブ型ナビゲーションが良い解決方法となるでしょう。 タブはもっともシンプルなナビゲーションパターンですが、デザインを制作す

    ハンバーガーメニューはもう古い!代わりに使えるモバイル用ナビメニュー5つまとめ
  • CX and UX viewpoint | blog / bookslope

    少し前に「CX vs UX」という記事が散見されましたが、自分なりにも整理してみようと思います。 前提としては、どちらもエクスペリエンス(体験)と書いてますので、その対象者をユーザー(利用者)と呼ぶかカスタマー(消費者)と呼ぶかという点でも異なります。 概念としては、「視点が違う」ということもできますが、その言葉を使う背景から考えると「責任範囲が明確に違う」と見ていいと思います。 対比してみると、次のような感じだと思います。 CX (Customer Experience) カスタマーエクスペリエンスマーケティングにおける文脈対象はサービスデザイン店舗やサポートなど、ビジネスの対象者を指す UX (User Experience) ユーザーエクスペリエンスプロダクトにおける文脈対象はプロダクトデザインユーザビリティやUIなど、プロダクトの利用者を指す 言葉の使い分けに目を向けてみましょう。

    CX and UX viewpoint | blog / bookslope
  • モバイルアプリのUXを改善する4つのディテール

    アプリが成功するかどうかは、さまざまな要素に依存しています。ですが、ユーザー体験に勝るものはありません。目立つアプリは、どれも優れたUXを提供しています。 モバイルUXを考える上では、ベスト・プラクティスをなぞるのが堅実な方法です。また、全体像をつくる時は、あったら良いものの必要ではないデザイン要素をとりあえず消してしまうのも簡単で良い方法でしょう。 ただし、「良い体験」と「素晴らしい体験」の違いは、多くの場合これらの細部についてどれだけ考え尽くしたかにかかってきます。 この記事では、なぜディテールがデザインにおける目につきやすい要素と同様に重要なのか、そしてアプリの成功をどのように決定づけるかについて紹介します。 スプラッシュスクリーン ユーザーがアプリを起動したとき、一番最後に回したいことはユーザーに待つよう伝えることです。ですが、アプリに時間のかかる初期設定のフェーズがあり、この手順

    モバイルアプリのUXを改善する4つのディテール
  • UXデザイングループ 坂本 貴史 | ネットイヤーグループ株式会社

    baba_jdl
    baba_jdl 2016/11/02
  • UX Recipe - User Experience Journey Mapping Tool.

    UX Recipe は、世界で最もカジュアルなジャーニーマッピングツールです。自分のアイデアを物語にして残しておくことができます。世界で最もカジュアルな ジャーニーマッピングツール あなたはどんなストーリー体験を作りますか? 次の物語を、気軽にいっしょに。 FEATURES 自分のアイデアを物語にして 残しておくことができます。 誰でも簡単に ストーリーが作れる カードを並べるだけで、自分だけのオリジナルストーリーが作れます。また、豊富なカードがはじめから用意されているので誰でもすぐに美しいストーリーが描けます。 チームで共有し コラボレーションできる 作成したストーリーをチームメンバーやクライアントにすぐに共有できます。画像ファイルをエクスポートできるので、すぐに企画書に貼り付けて使うことができます。 さまざまなストーリーを 見つけられる ゼロから作る必要はありません。さまざまなストーリ

  • ECサイトでデザイントレンドを取り入れるときの7つのポイント

    メディア業界でのデザイン、編集、及び印刷出版物とオンライン出版物のライティングに10年以上の経験を持ちます。スポーツが好きで、サッカーとバスケットボールの旅を計画に多大な時間をかけ、また統計学にものめり込んでいます。 ECにおけるデザインと、デザイナーが実際にやりたいデザインは必ずしも一致しません。 ミニマリズムなどに代表されるシンプルですっきりとしたデザインは、最近のトレンドではありますが、販売サイトではあまり実用的ではない場合もあります。 ECにおけるデザインの最終的な目標は、ユーザーとの対話です。もっと直接的に言うのであれば、ユーザーにより多くの商品を買ってもらうように気を引くことです。 その目的を達成するという点では、最近のWebデザインのトレンドは逆効果になる恐れがあります。 デザイン vs 機能 機能性はECをデザインするときに最重要なものです。オンラインショッピングのサイトは

    ECサイトでデザイントレンドを取り入れるときの7つのポイント
  • Webサイトのフッターにサイトマップを設置すべき理由

    何年か前は、フッターの部分にサイトマップへのリンクを置くのが一般的でしたが、近年ではフッター自体が、サイトマップとして新たに使われるようになりました。 サイトマップは、サイト内のすべてのリンクを1ページ内に記載したものです。しかし今では、フッターを正しくデザインすれば、ほとんどのサイトにおいては、必要ないページとなっています(XMLのサイトマップは、SEOにおいては未だに不可欠ですが)。 伝統的なフッター さかのぼってみると、フッター自体がユーサビリティの要素として、重要視されることはまれでした。伝統的なフッターとはサイト管理に関する一連のリンクと、コピーライトの情報が載せられているようなものを指しますが、研究によると、ほとんどのサイトが伝統的なフッターを使っていたそうです。当時、大半のユーザーはページの一番下にあるフッターの部分は使わないという思い込みがありました。 そんな伝統的なフッタ

    Webサイトのフッターにサイトマップを設置すべき理由
  • 「UX設計の第一歩」というスライドを公開しました。 - 笑顔を創りたいWebディレクターの日常

    Twitterではすでにつぶやきましたが、社内勉強会をやりまして、ワテクシは講師として前に立つというそういうあれでして。なんでしょうか。何でもよいのではないでしょうか。 というわけで、スライド貼り付けておきます。 UX設計の第一歩-インテリジェントネット社内勉強会 from インテリジェントネット株式会社 はい、また例によってふざけまくった感じですが、内容はいたって初歩的かと思います。はい。 そんで、こういうのつくるたびに思うわけですが、 まあ、これみたからってUX設計ができるようにはならんよねぇ そんなこと言うなよって言う話ですがw いや、でも割と気で思ってるし、こういうことって作った人こそ言わなきゃいけないよなと思うのですよ。 やっぱりぼくはセミナーとかで手法の話をする、手法の具体的なやり方の説明をするというのにどうにも懐疑的で、その手法を取り入れられるんだったらネットに転がってる

    「UX設計の第一歩」というスライドを公開しました。 - 笑顔を創りたいWebディレクターの日常