ユーザーインタビュー： 実施の理由・方法・タイミング
ユーザーインタビューは、すばやく容易に実施可能なことから、ユーザーからのフィードバックを得る手法としてよく利用されている。この手法は、ユーザビリティに関してではなく、自分たちのデザインについてのユーザーの認知を知るために利用しよう。 User Interviews: How, When, and Why to Conduct Them by Kara Pernice on October 7, 2018 日本語版2019年5月23日公開 ユーザーインタビューというのは、UX調査手法の1つで、その間、リサーチャーが関心のあるテーマ（たとえば、システムの利用やユーザーの行動、習慣など）について知ることを目的に、1人のユーザーにそのテーマについての質問をするというものだ。一度に複数のユーザーに参加してもらうフォーカスグループとは異なり、ユーザーインタビューは1対1のセッションでおこなう（とはいえ
スクロール連動型テキストアニメーションは、ユーザーを遅らせる
より魅力的に見せることを目的とするアニメーションも、使い方を誤れば、コンテンツ消費のスピードを遅らせ、ユーザーの障害になってしまう。 Scroll-Triggered Text Animations Delay Users by Aurora Harley on April 16, 2017 日本語版2017年12月4日公開 昔から知られているユーザビリティの課題の1つに、読み込みの遅さにユーザーが苛立ち、そのサイトや組織に関するイメージに悪影響を及ぼす、というのがある。時間が貴重なときには、一刻も早く欲しい情報の入手がほんの少し遅れただけでも不満を感じるものだからだ。 応答時間が遅くなるのは、大きな画像や凝った作りのウィジェット（たとえば、バナーカルーセルなど)の読み込みや、複雑なデータ処理によるサーバーの遅延によることが多い。しかしながら、最近実施したユーザビリティ調査では、まったく違
プロダクトリリース前に確認したい23のUXチェックリスト
Fabio Muniz氏はTestLodge社のプロダクトデザイナーであり、製品開発の立ち上げ段階における設計で活躍しています。Fabio Muniz氏の仕事はfabio.designでご覧ください。 ソフトウェアの設計プロセスではプロダクトの欠陥が見つからず、ユーザーが使う段階になって欠陥が明らかになりユーザー体験を損ねてしまうことがあります。 この記事では、そういった事態に陥らないようにチェックしておくべき事項をリストアップしました。ここで挙げるチェックポイントは一般的なものであり多くのプロダクトに適用可能ですが、例外もあることをご理解ください。 インタラクションデザイン 01 - 頻繁に発生する操作が簡単にできるか チェックをする理由：同じ情報を繰り返し入力することは面倒であり、ユーザーの生産性向上に寄与しません。面倒な操作が多ければ、ユーザーはより生産性の高い競合プロダクトへの乗り
フロントエンドエンジニアが意識しておきたいユーザビリティ14選 - tatsuyankmura
デザイナー向けに書かれたユーザビリティの書籍や記事はたくさんありますが、実装者向けはあまりありません。そこで、これまでに私が実装をして、デザイナーに受けた指摘、配慮すべきと感じた点を中心にまとめてみました。 リンク・機能など 1. リンクや押せる箇所は気づいてもらえるようにする 便利な機能を実装しても、気づかれなくては意味がありません。リンクや押せる箇所などは、色が変わる、動くなどの変化を加えてユーザに気づいてもらえるよう配慮しましょう。 プロバスケットボールリーグ、Bリーグのサイト。タブですが、マウスオーバーしてもポインターが変わらず、反応もないので押せることに気づかないユーザもいるのではないでしょうか。 2. 画面最上部へ戻るボタンの設置 特に読み物系のサイトなど、画面が長くなる場合はページトップへ戻るリンクがあると便利です。スクロールで戻るのは意外と大変で手間がかかります。PCはブラ
その文字、薄すぎない？ デザインにおける灰色の明度は何%が最適か
UX Movementにおいて記者、編集長を務めます。明快で効果的なデザインに美点を見出し、利用者のために払う労力を惜しみません。 一言で灰色と言っても、明るいものもあれば暗いものもあり、実に様々なバリエーションがあります。Webサイトなどでは、いたるところでお目にかかることのできる色でもあります。濃い灰色は主に見出しや本文に、薄い灰色はメタデータ、分類名、説明文に多く使われます。これらの色合いのうち、最も乱用されるのは薄い灰色です。 薄い灰色の文字の問題点 文字色として薄すぎる灰色は可読性に問題を起こしかねません。灰色の文字を薄くしすぎてしまえば、読者が読むにあたって支障をきたすことになります。文字の明度によっては、薄い色の背景に混ざってしまうのです。この現象は、単語や文字をぼやけさせ、判読を困難にします。無理に判読を試みれば、目を傷めてしまうでしょう。 また、薄い灰色の文字は読者の誘導
若年層はその親世代よりフラットデザインを好む
18～25歳のユーザーはフラットなUIの魅力を中高年よりもやや高く評価している。しかし、フラットデザインで見た目を魅力的にすることには、その結果、損なわれるユーザビリティに見合うほどの価値はないかもしれない。 Young Adults Appreciate Flat Design More than Their Parents Do by Kate Meyer on February 28, 2016 日本語版2016年6月9日公開 自分たちのインタフェースが流行の先端をいっている、あるいは今風であると思われたい場合にデザイナーはフラットデザインをよく採用する。その根底にあるのは、フラットなUIのターゲットはミレニアル世代であるという前提である。つまり、ミレニアル世代はその両親や祖父母世代よりもこのデザインスタイルを好むと思われている。したがって、中高年ユーザーがフラットなUIの使い方をな
「さらに詳しく」というリンク：もっと良いものにできる
「さらに詳しく」というフレーズをその場しのぎのリンクラベルとして利用することが増えている。しかし、このテキストは情報の匂いが弱く、アクセシビリティも悪い。このフィラー的な文言に少し工夫をして、次に出るページの内容をユーザーが自信を持って予測できる説明的ラベルにしよう。 “Learn More” Links: You Can Do Better by Katie Sherwin on December 13, 2015 日本語版2016年3月2日公開 トレンドには他のトレンドに比べて目立たないものもある。低コントラストのテキストもそうだが、独立型リンクラベルとして「さらに詳しく」を利用することが静かなトレンドになっている。Webには今、この汎用的なリンクがあふれており、その大部分が、重要度が二次的、三次的な情報をリンク先としている。（Googleで検索すると、この用語の使用例は14億個も出て
アプリケーションの設定はごめんだ！ : アプリケーションのユーザビリティを考える | POSTD
(訳注：2016/3/2、頂いたフィードバックをもとに記事を修正いたしました。) 注 このブログ投稿は不満をぶちまけています。かなりのものです。自説は曲げません。長いです。そして、頭に血が上っています。かなり暴言です。 目次 アプリケーションの中身は？ アプリケーションについての考え方が間違っている アプリケーションは 体験 のようなもの この問題の解決策 1. 設定より規約 2. アプリケーションを使いながらユーザを丁寧に導く 3. 失敗は起こる。その直し方を知りたい 4. ドキュメンテーションについて考えるのは、やめよう まとめ 参考文献 最近、ソフトウェア開発において復活しつつあるとても 興味深い 傾向があるようです。おそらくNode.jsの哲学に影響を受けているのでしょう。何かを使うためには、まず大量の「依存パッケージ」をインストールする必要があり、さらにそのコンフィギュレーション
フラットデザイン： 起源、問題、フラット2.0のほうが望ましい理由
フラットデザインとは2012年ごろに広まったWebデザインのスタイルである。それは広く今も利用されているが、過度な利用は深刻なユーザビリティ上の問題を引き起こしかねない。フラットデザインによって発生するユーザビリティ上の最大の課題の1つに、クリック可能な要素のシグニファイア不足がある。フラットデザイン2.0は、それに対する優れた解決策を提供してくれる可能性がある。 Flat Design: Its Origins, Its Problems, and Why Flat 2.0 Is Better for Users by Kate Meyer on September 27, 2015 日本語版2015年11月2日公開 フラットデザインは人気のあるデザインスタイルで、Webページのグラフィック要素に、光沢感や立体感という視覚効果を利用しないもののことである。それは多くのデザイナーからWeb
Webならではの表現を見つけるために捨てるべきこと
面白いから実装で良いのか コンテンツや利用者体験を重要視する動きは Web でもネイティブアプリでも見られるものの、Web サイトデザインにおいては空回りしているように見えることがあります。ときには Web サイトよりネイティブアプリのほうが良いと思われてしまうような表現や手法が使われていることも少なくありません。 上から下へスクロールするという多くの利用者が期待するユーザビリティでさえ、パララックスデザインという表現によって破壊されていることがあります。パフォーマンスが重要視されているのかと思いきや、10 以上の JavaScript ライブラリを組み合わせた重たいサイトも未だにあります。それも「面白い表現」「ネイティブアプリのような見た目」を実現するためだけに実装されていることもあり、利用者には負荷がかかることがあります。日本人を対象にしていたとしても、誰もが高速回線でデータ量無制限と
CVRが驚くほど上がるボタンデザイン7つの法則
Webサイトやアプリを訪れたユーザーに対して、ゴールまでの最適な道筋をつけるのがCTA（Call to Action：行動喚起）。このCTAを意識してボタンをデザインすることで、クリック率やコンバージョン率を大幅に改善できます。ボタンを実装するときにチェックしておきたい7つの法則を紹介します。 1.ユーザーの言葉を使う ネットで買い物しているところを想像してみましょう。以下の2つのボタンがあったら、どちらを押したくなるでしょうか。 ほとんどの方は、右の「注文する」を選んだはずです。デザインがまったく同じボタンがあったとしたら、自分が日ごろから使っている言葉のほうがピンときて押しやすい。企業側の言い回しと、ユーザー側の言い回しがずれているほど、ユーザーはアクションを起こしづらくなります。ボタンのラベルにはユーザーが普段使っている言葉を使いましょう。 Webサイトの制作ではつい企業目線の言葉を
動画キャプション (字幕) の品質基準 : FCC のルールより | Accessible & Usable
公開日 : 2015年3月20日 (2018年1月18日 更新) カテゴリー : アクセシビリティ Media Access Australia のウェブサイトに掲載された記事「New caption quality rules take effect in the US」を読んだのがきっかけですが、米国の連邦通信委員会 (Federal Communications Commission : FCC) がテレビ放送におけるクローズドキャプションの品質ルールを新たに発表した (2015年3月16日より発効)、ということを知りました。FCC の公式サイトでもニュースリリースが出ています。 註 : Media Access Australia とは、ウェブなどのメディアに対する、障害者のアクセシビリティ向上を支援しているオーストラリアの NPO です。アクセシビリティに関するニュースを頻繁に発
ファーストビューに関するマニフェスト： ページの折り目が今も大事な理由
ページ上部に何を表示し、何を非表示にするかは、画面サイズにかかわらず、常にユーザーエクスペリエンスに影響するものだ。ファーストビュー内に表示されているかどうかで、ユーザーの情報の取り扱い方には平均84％もの差が出る。 The Fold Manifesto: Why the Page Fold Still Matters by Amy Schade on February 1, 2015 日本語版2015年2月16日公開 画面のサイズというのは絶えず変化していくものだが、一定のサイズに合わせるのではなく、デザインによってこうした複数のサイズに対応することは可能である。では、クライアントやデザイナー、開発者、マーケターが「ファーストビュー（：above the fold＝折り目の上）」（紙媒体の新聞から借用した用語で、Webページ上でスクロールをしなくても見える内容を指すのに使われる）にあるコ
Webデザインを変えるとしても、以前のものをすぐには捨てないで
サイトの既存のデザインをいくつかのライバルサイトと一緒にテストすることで、新しいデザインに向けての有意義な洞察が得られる。競合調査によってユーザブルでない新機能の開発を避けられるのだ。 Redesigning Your Website? Don’t Ditch Your Old Design So Soon by Hoa Loranger on December 7, 2014 日本語版2015年1月19日公開 サイトのデザイン変更の準備はできている では、どこから始めればいいだろうか。プロジェクトが最初からうまくいくように手助けしてくれるUXの活動にはいろいろなものがある。その1つがユーザビリティの競合テストだ。すなわち、現在のデザインをいくつかのライバルサイトと一緒に、ユーザビリティについて調査するというものである。コンピュータに飛びついて、すぐにでもデザインを始めたいという気持ちは抑
動画のユーザビリティ
動画コンテンツは、それをユーザーがコントロールでき、どのような内容かわかり、他のアクセス方法もあるときにのみ、有益である。 Video Usability by Amy Schade on November 16, 2014 日本語版2014年12月15日公開 あらゆるところに動画がある。ノートPCやデスクトップPC、タブレット、スマートフォンで我々はそれを見ている。動画は我々を楽しませ、情報を与え、どのように布が流れ、どのように製品が機能し、どうやってネクタイを結び、どこなら休暇に行けそうかを示したり、ユーザビリティ調査での思考発話のやり方まで説明してくれたりする。しかし、このフォーマットが機能するのは、ユーザーがその動画がそこにあることを知っていて、それを見る気にさせられ、うまく見ることができ、コントロールできるときのみである。 オンライン動画には2つのタイプがある： エンターテイメン
Webデザインの慣習を破ることは、ユーザーエクスペリエンスを破壊すること
Bucknell Universityのサイトの、型破りなレスポンシブデザインへの変更は話題を呼んだが、それによってユーザビリティがかなり犠牲になっていることが、学生と保護者によるテストで明らかになった。 Breaking Web Design Conventions = Breaking the User Experience by Katie Sherwin on July 20, 2014 日本語版2014年10月6日公開 大学のWebサイトのトップページを頭に思い浮かべてほしいと言われたら、どのようなイメージが浮かぶだろうか。浮かぶのはSUNY Cortlandのトップページのようなもの、つまり、芝生の上に学生がいる画像があって、ページの上部にはナビゲーションがあり、そこにAcademics（：学部・大学院）、Admissions（：入学案内）、Prospective Studen
リンクテキストの書き方： 重要な言葉で始め、目立ち、説明的なものにしよう
必要なものをユーザーが素早く見つけやすくするために、アンカーテキストは本文よりも目につきやすく、リンク先のページを正確に説明するものであるべきだ。 Writing Hyperlinks: Salient, Descriptive, Start with Keyword by Marieke McCloskey on March 9, 2014 日本語版2014年4月28日公開 目はリンクにいく ユーザーはWebページを流し読みして、そこが何についてのページで、次にどこに行くべきかのヒントを探す。情報への近道として彼らが利用する道しるべには見出しや太字になっているキーワードがある。また、ハイパーリンクもユーザーの注意を引くので、視覚的にも文脈的にも目立つことが必要だ。いまだに、線付きの青い文字というのは、リンクを示す視覚的に最も明確なサインである。理解しやすいリンクはページを流し読みしやすく
ウェブサイトやブログによくあるリストデザインが流行のグリッドデザインよりも有効なわけ
「ウェブの未来を担う次のUIデザインは『カード』にあり」と言われるなど、ウェブサイトを格子状にレイアウトしたグリッドデザインは人気で、多くのアプリやウェブサイトで採用されていますが、実際にグリッドデザインと以前からあるリストデザインの2種類をテストしてみたところ、「リストデザインの方が明らかに見やすく、ユーザーの反応がいい」という結論が出ました。 List Beats Grid: Linear Feeds Perform Two to Three Times Better Than Grids http://blog.getprismatic.com/list-beats-grid-linear-feeds-perform-two-to-three-times-better-than-grids-2/ グリッドデザインとリストデザインのどちらが本当に効果的なのか？ということを調査したのはソ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TechCrunch | Startup and Technology News
Inside AdSense : モバイル サイト設計 25 の指針
