「5人でユーザテストすればユーザビリティ上の問題のうち85%が見つかる」の元ネタ論文を解説する｜Mikio Kiura / ANKR DESIGN
Webサービスやアプリなど開発や運用に関わっている方であれば、こんなことを耳にしたことがあるのでは無いでしょうか？ 5人でテストを行えば、ユーザビリティ上の問題のうち85%を発見できるこれらは業界的にはある意味で常識ですが、色々話を聞いてみると、この常識の「出処」あるいは「根拠」ってあんまり知られていないようなのです。 もちろん、ちょっと知識のある人であれば、ユーザビリティ業界の第一人者であるヤコブ・ニールセン博士が提唱したというところまでは知識として知っているでしょう。しかしながら、その元ネタとなった論文を実際に読んだ人、あるいは85%という数字の根拠やその条件について理解されている方はどの程度居るのでしょうか。 ということで本記事では「ユーザテストは5人で85%」の元ネタである下記の論文について、解説、と言うとちょっと大げさかもですが、概要を紹介してみたいと思います。願わくば、この記事
遅延読み込み用のぼやけた画像
Mediumでとある記事を高速にスクロールして読んでいたら、さりげなく画像を遅延読み込みしていることを知った。読み込み発火のタイミングがうまいのかあまり遅延読み込みの存在を感じさせないのもすごいと思ったが、プレースホルダー画像の実装方法が良さそうだった。単純に元の画像を幅30px程度まで小さくしてそれをブラウザーにリサイズさせることでぼやけた画像をプレースホルダーとして表示しているだけだが、十分に機能していそうで目から鱗だった。 画像の遅延読み込みはなかなか曲者で、読み込むタイミングやプレースホルダーとしている画像が悪いと大きくユーザーにストレスを与える。プレースホルダーでよく使われるローディング画像は読み込み中のインジケーターではあるが、同時に何か遅いことをやっていますというネガティブな印象も与えてしまう。ユーザーはローディング画像を見るとスクロールを止めなくてはならないのかと感じること
UI/UXデザイナーなら一度は目を通しておきたい「デザイン原則」まとめ【随時更新】
世に出ている「デザイン原則」と呼ばれるものたちをまとめてみました。 ユーザビリティ関連からモバイルUX、サービスデザインにいたるまで、広い範囲のデザイン原則を網羅したつもりです。ただし、チェックリスト的にまとめたため、内容の詳細は記述していません。 出典や内容を紹介している外部リンクを張っておきましたので、詳細を確認したい方はそちらをご参照いただければと思います。 なお、この記事は有用なデザイン原則を見つけ次第、随時更新していきます。 更新履歴 2018/10/01： 「アクセシビリティの4原則」「Material Designの原則」「Android TV デザイン原則」「インクルーシブデザインの原則」を追加 2016/12/28： 「Microsoft デザイン原則」を「Windows UX デザイン原則」にアップデート 「Apple Watch デザイン原則」を追加 2015/10/
グノシー木村氏が提唱するスマホ時代にコンバージョンを上げる方法が参考になった | らふらく^^ ~ブログで飯を食う~
グノシー共同代表の木村さんが「スマホ時代には、コールセンターよりもチャットセンターを用意した方がいい」「電話というアクションのハードルの高さを意識した方がいい」とツイートしていました。 あまりにも納得してしまったので、一連のツイートを紹介します。 電話はチャットに移行している電話って、どんどんチャットに移動しているでしょ。電車の中でもできるじゃないですか。LINEとかfacebook messengerって電話を圧倒的にディスラプトしていると思います。ついでに無料通話なんかまでやっちゃって。 — Shinji Kimura (@shinzizm) 2014, 11月 12 電話の大変さ、チャットの手軽さお店の予約なんて、誰も電話の方がいいなんて思ってないですよ。チャットの方がいい。仕事しながらでも予約できるじゃないですか。 — Shinji Kimura (@shinzizm) 2014,
AppleとGoogleのマップアプリに見るUXデザイン思想の違いを徹底比較
スマートフォンアプリの開発ではユーザーエクスペリエンス(UX)を高めることが重要で、優れたアプリには必ずと言ってよいほどUXを高めるデザイン上の工夫があるものです。人気の地図アプリである「Google Maps」と「Apple Maps」のUXデザインを比較すると、両アプリが異なる思想の下で緻密にデザインされていることがよく分かります。 Maps on iOS: Design Explosions #1 http://uxlaunchpad.com/designexplosions/1-mapping-on-ios.html 左がGoogleの地図アプリ「Google Maps」で右がAppleの地図アプリ「Apple Maps」。一見、よく似たデザインですが、UXデザインの思想は大きく異なっています。 ◆地図表示とツールの配置 これはGoogle Mapsのレイアウト。右の図は、ユーザー
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
UIの話は会議室でするな
9. ● 常に文書による指示を要求せよ。 ● 準備を十分行い完全に準備ができているまで実行に移すな。 ● 些細なことにも高い完成度を要求せよ。わずかな間違いも繰り返し修正させ小さな 間違いも見つけ出せ。 ● 重要な決定を行う際には会議を開け。 ● もっともらしくペーパーワークを増大させよ。 ● すべての規則を隅々まで厳格に適用せよ。 ● 何事をするにも「通常のルート」を通して行うように主張せよ。決断を早めるため のショートカットを認めるな。 ● 可能な限りの事象を委員会に持ち込み「さらなる調査と熟考」を求めよ。委員会の メンバーはできるだけ多く（少なくとも5人以上）すること。 ● 議事録や連絡用文書、決議書などにおいて細かい言葉遣いについて議論せよ。 ● 以前の会議で決まったことを再び持ち出し、その妥当性について改めて問い直せ。 10. ● 常に文書による指示を要求せよ。 ● 準備を十分行
コンテンツから先に考えなければデザインすらできない理由 : could
ワイヤーフレームの間違った使い方 たまにリニューアル案件をいただくときがありますが、見た目より先にコンテンツを整理しましょう、一緒に作っていきましょうと説得するようにしています。このサイトでも様々な角度からコンテンツの重要性を語ってきましたが、最もシンプルな方法は「UX を考えていきましょう」「モバイルファーストで戦略を練っていきましょう」といった専門性の高い言葉を使うのではなく、今までのやり方ではうまくいかないということを分かりやすく説明することです。 従来の Web サイト制作でよくあったのが、まずワイヤーフレームをつくって情報の大まかな構成を設計するというやり方。ワイヤーフレームを作ることは間違っていませんが、コンテンツを作る前に始めてしまうと、あとで大きなギャップを埋める作業が発生することがあります。コンテンツなしで構成を作り始めると、例えば以下のような状況に陥ります。 文字が多過
Experience Design Out of Screen：これからのエクスペリエンスデザイナーの生きる道＠UX TOKYO Jam
19. Stage 認知 来店 閲覧 休憩 商品取得（小型） 商品取得（大型） 会計 運搬 組み立て Stage毎の ゴール IKEAの製品のデザイ ン、機能、価格の魅力 を伝える IKEAの世界観を印象 づける 製品の魅力や実際の利 用シーンでのイメージ を伝える ショッピングの疲労を 軽減する／休憩時もブ ランドの世界観を維持 商品棚からショッピン グカートやバッグに商 品を取得 ショッピングカート／ トロリーに商品を取得 スムーズに会計を済ま せる 自分の車で運搬／配送 の手配を行う 顧客に組み立てさせる ことでコスト削減と同 時に愛着を持たせる Touchpoint Action Thinking どんな製品を扱ってい るんだろう 価格はどれくらいだろ う どうすれば買えるんだ ろう どんな雰囲気の店なん だろう どんな製品があるんだ ろう どんな使い心地なんだ ろう 部屋に置いた
Material Designの目指すところとAndroid側の変更点 - クックパッド開発者ブログ
モバイルファースト室の @rejasupotaro です。 今年のGoogle I/OではAndroid One、Android L、Material Design、Android Ware、Android Auto、Android TV、Google Cloud Platform、Google Fitなどの発表がありました。弊社からは私と @sys1yagi と @__gfx__ が参加したので、何回かに分けてGoogle I/Oの発表の内容を紹介します。 今回のテーマはMaterial Designです。内容は公式ドキュメントやセッション動画の要約や参考リンクからの引用を含みますが、筆者の考察や主観も含まれます。 Material Designとは Material Designとは、Googleが発表したビジュアル、モーション、インタラクションのプラットフォームやデバイス間の包括的な
ＵＸデザインとコンセプト評価�～俺様企画はだめなのよ
1. Copyright © Masaya Ando 千葉工業大学 デザイン科学科 Chiba Institute of Technology Department of Design 安藤 昌也 masaya.ando@it-chiba.ac.jp ＵＸデザインとコンセプト評価 ～俺様企画はだめなのよ HDIfes 第３回 面白いことに育てるために『考える』 2014年6月21日 2. Copyright © Masaya Ando 1 安藤 昌也 ANDO Masaya, Ph.D. 千葉工業大学 工学部 デザイン科学科 准教授 早稲田大学政治経済学部経済学科卒業。NTTデータ通信（現、NTTデータ）を経て、 1998年 アライド・ブレインズ株式会社の取締役シニアコンサルタント。早稲田大学、国 立情報学研究所、産業技術大学院大学など経て、2011年より現職。博士（学術）。 専門は、人間
3万円でユーザビリティーテストルームをつくる - Blog.おにぎりたまごうぃんなー
ユーザビリティーテストの設計から実施までの仕事を受ける機会があり、テストルームの準備も行いました。 テストルームを借りるという選択肢もあったのだけれど、今回はデメリットのほうが大きかったので、自前で一番安くあげるテストルームを設計してみました。 都内でユーザビリティーテストができるスタジオを借りるとなると1日10万円前後くらいになると思うので、3万円で1回社内にテスト環境作っておいとくと、選択肢が増えて楽だと思う。 ( ※この記事はクライアントさんの了承を得て書いています ) ユーザビリティーテストを実施するにあたって必要な要素 接続概要図 部屋(テストルームと観察ルーム) それぞれ個室である必要はないが、テストルームは被験者の集中力を見出さないためになるだけ個室であったほうがよいと思う。 観察ルームである程度大声で話してもテストルームに声が届かない距離、仕切りは絶対にあったほうがいい。テ
ユーザー体験設計を軸にすすめるサービスデザイン
事業戦略と組織のビジョンデザイン〜デザイン的アプローチで事業・組織づくりにどう取り組んでいるかのリアル〜
普通に使っていると失敗してそれから分かるおもてなしは良くない - hitode909の日記
普通に暮らしてると、ひどい目にあったり、すごいダサい感じになったりして、それで、行動を改めるのだけど、普通に暮らすというのが、サービスに登録したばかりの状態で、失敗して行動を改めた状態が、サービス提供者から見て、ユーザーに行ってほしい行動をすること、というのはさみしい。ユーザーを罰することでサービスの方向に沿わせようというのは、ユーザーから見て、使っていて幸せになれないと思う。普通に使ったら自然と良い状態に導かれて、ユーザーから見ても自然だし、サービス提供者から見てもうまくいっている、という状態以外は邪悪だと思う。人に対してそんな風に接するのは失礼だと思う。そういうことでは信頼関係が生まれないと思う。
ユーザーエクスペリエンスの分解
4. ちまたで言われるキーワード (超抜粋) から見る UX おもてなし 直感的 気持ちいい 使いやすい わかりやすい 体験 ジャーニーマップ シナリオ コンセプトマップ サービスブループリント ワイヤーフレーム ペルソナ A/Bテスト ヒューリスティック評価 グロースハック アクティングアウト コンテクスチュアル インクワイアリー ユーザーテスト 5. 有名なダイアグラムから見るUX その1 The Elements of UX | Jasse James Garrett (2000) 元々はウェブサイトのUXとして定義されたものです。 UXを役割や作業で分解した図 6. 有名なダイアグラムから見るUX その2 UX Honeycomb | Peter Mobil (2004) Useful. As practitioners, we can't be content to paint
【UI/UX考察付】デザイナーが解説！女子向けアプリのデザインのポイント
ここ最近、女子向けアプリが多数リリースされているのはご存知でしょうか。 SNS、ユーティリティ、ライフスタイル、ナビゲーションなどアプリのカテゴリも様々です。 そこで今回は、最近話題になっている女子向けiOSアプリ5サービスについて、それぞれのアプリの特徴・UI/UXのポイントと、女子ウケする共通エッセンスをデザイナー・企画視点で考えていきます。 恋するマップ-女子ちず- /ナビゲーション 特徴 女子向けの地図アプリ。 もうご存知の方も多いかもしれませんが、地図業界を震撼させた女子向けの地図アプリです。 通常の地図アプリ機能に加え、女子には必須なトイレからカフェ、サロンなどの情報も写真付きで確認することができます。 ポイント 一番の特徴であり、女子ウケポイントでもあるのが画面右上にある“チャーム”。 スマホの傾きをキャッチして揺れるだけですが、こうしたさりげないところにかわいい！と思えるポ
「マイクロインタラクション」から考えるマクロなデザイン - くらげだらけ
photo by Neal. Lean Startupが出版された頃からでしょうか。起業ブームみたいなものと相まっていろいろとUXだとかLeanだとかの類の本が多く出版されていますね。私もそんな本を案外欠かさず買ってみては読んでみてもいるのですが、あまりピンとこないような内容であったり、手法の紹介についてばかり熱心に書いてあったりとどうしても眠い感じになってしまうようなものばかりだったように思うことが多くありました。 今回読んだ マイクロインタラクション ―UI/UXデザインの神が宿る細部 も「ドナルド・ノーマン推薦！」との煽り文句が帯に大きく書かれていて、これもそんな感じかなと思ったりもしていましたが、今までのものとはちょっと違った目線の内容だったので紹介してみようと思ったわけです。 デザイナー向けにも思われがちかもしれませんが、職人的なデザイン技術について解説しているわけではなく、プロ
開発者は必見? GoogleがAndroidアプリのUXアンチパターン動画を公開 - すまほん!!
数多のアプリが氾濫する Android アプリですが、過去に開発の経験がある方・現在進行形で開発中の方……数多くいらっしゃるかと思います。 そんな方に是非、ご覧頂きたいのが Google が Youtube にて公開している ANDROID DESING in ACTION UX アンチパターンです。ご存じの通りアンチパターンとは「べからず集」のことで「これは駄目だからこうして欲しい」といったことがわかりやすく紹介されています。 動画の内容としては、ダイアログの表示方法、ボタンの位置、タッチフィードバック……etc 開発者の方はそのまま知識を吸収することができますし、開発者ではない方も「へー」と思えること間違いなしです。
ソシオメディア | あるとよい機能はない方がよい
UXデザインのコンサルティングではよく品質優先度マッピングというものを行います。これは開発プロジェクトの上流工程において、実装を検討している機能をリストアップし、そのひとつひとつについて想定する利用者の割合や利用頻度の観点からグルーピングし、実装の優先度を決める作業です。 これを行う目的は、UIをできるだけシンプルに保つことにあります。ユーザーが求める機能をすべて盛り込むと、当然UIは複雑になり、誰にとっても使いにくいものになります。また蓋然性のバランスが取れていない要件はプログラムを複雑にし、バグが増える原因になります。 UIデザインにおけるパレートの法則（結果の大部分は全体の一部によって生み出される）は、「ユーザーの80%は全機能の20%しか使わない」というものです。その20%に注力し他の優先度を下げることで、製品の利便性は向上するはずです。 Core, Important, Nice
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
