UX関連記事 (2017/11/27)
この週末はお休みを取って熊本に旅行してきました。まだところどころでブルーシートで覆われていたりと、震災の爪痕は残るものの、くまモン一色で元気な一面も見ることができました。
さて、先週一週間くらいで私の気になったUX関連の記事を紹介します。
短期間でUI改善の糸口を発見する！ヒューリスティック評価の手法とポイント (Goodpatch Blog)
ヒューリスティック評価や認知的ウォークスルーについて記載した記事で、比較的珍しいと思います。
やや後者の説明が物足りない気もしますが、前者については詳細な説明や知見が含まれていて、参考になります。
評価結果のまとめ方のところで「重要度」と「改善難易度」で評価を行っていますが、「ユーザー遭遇頻度」も併せて判断すると良さそうです。
UXデザインの現場でよく使われるフレームワーク・手法21選 (Workship MAGAZINE)
UXデザインの手法についてまとめた記事です。
たくさんの手法が紹介されていて、4番目の「カルチャー・プローブ」などあまり聞き慣れないものも見ることができます。
どういうときにどれを使うかなど、具体的な利用についてはそれぞれの手法について詳細を調べていく必要がありそうです。
「サービスデザイン」の最前線を、マドリッドのグローバルカンファレンスで体感してきた (AdverTimes)
先日マドリッドで行われたサービスデザイングローバルカンファレンスの報告記事です。
私は昨年参加したのですが、今年の雰囲気が伝わってきました。
アメリカ系がビジネスに結び付けられているケースが多い印象というのは、昨年はあまり感じられなかったので興味深かったです。
パブリックセクターでのサービスデザインについては、やはり日本ではそれほど話を聞かないということですが、個人的には日本でも実践されている例はそれなりにあり、それを積極的に発信していないだけなのでは、と思っています。
五感の相互作用を活かすクロスモーダルデザイン (marketing cloud laboratory)
uhuru.co.jp
クロスモーダルデザインというと、なんだか難しい概念に聞こえますが、視覚や聴覚など、複数の感覚で表現するというものだそうです。
その世界での経験が豊富なほうがVRでも現実として意識しやすいとのことですが、以前私もかなりリアルなドライブシミュレーターに乗ったときに、無免許運転よりダメな運転になってしまったことがあります。
これはシートがまったく動かなかったために、体に慣性を感じず、感覚がずれたことが原因だったように思っていたので、なんだか納得感がありました。
単にリアルな運転も下手なだけだとも言えますが。。
Skeuomorphic Design — A controversial UX approach that is making a comeback (Muzli)
スキューモーフィックデザインについての記事です。
これは立体的な、現実社会にある物体を再現したデザインのことで、少し前まで流行っていましたが、最近はそれとは対極にあるフラットデザインが主流です。ただ、ここにきて IoTやVRのおかげで復活してきているとのことです。
確かにこれらは現実社会の拡張がキーになるので、その傾向はあるのだろうと思います。昔取った杵柄というわけではありませんが、そうした設計も考慮する必要がありそうです。
一方で、記事中にある「ユーザーの進化」（これはこれで面白い表現です）も考えると、これらの分野でもそのうちスキューモーフィックデザイン→フラットデザインの流れが起こるのかもしれません。
Hamburger Emoji (🍔) War: Why Is Apple Right (Prototypr)
ハンバーガーの絵文字についての記事です。
味覚ではなく、視覚で考えたときの正当性がわかり、興味深いです。
確かに小さく表示したときにはつぶれてしまって見づらくなるケースは多く、アイコンやタイポグラフィをデザインするときには気をつけるべき点です。
それにしても、これほどEmojiが海外でも通用する日本語になるとは思いませんでした。
UX関連記事 (2017/11/20)
先日封切された映画のゴジラを観てきました。上映が始まってから初めてこの映画が特撮ではなくアニメだということを知ったのは、おそらく私くらいでしょう。
さて、先週一週間くらいで私の気になったUX関連の記事を紹介します。
クルマから「ハンドル」がなくなる日──自律走行車のインテリアデザインのゆくえ (WIRED.jp)
自動車業界ではEVと自動運転でかなりの変革が起きていますね。
先日私が参加したET/IoT総合技術展でも、AIによる自動運転のカンファレンスはかなりの聴講者を集めていました。
この記事はアウディのUIデザイナーへのインタビューですが、早くも自動運転のその先を目指す取り組みについて思考を広げています。
クルマからハンドルがなくなるということですが、VRの進化などでひょっとしたら人類から移動がなくなる可能性もあり、それをどうとらえるかも自動車の未来を語るうえで欠かせない課題だと思います。
GoogleのHEARTフレームワークを使って、UXを効果的に分析！【その使い方とは】 (SeleQt)
https://www.seleqt.net/design/how-to-effectively-measure-ux-with-google-heart-framework/www.seleqt.net
先週の記事紹介で取り上げようと思いつつ、ほかの記事を優先してしまいましたが、早速翻訳記事が出たのでこちらを紹介します。
UXを定量的に評価するためのフレームワークで、HEARTというのは各要素の頭文字を表していますが、よくできていると思います。
それぞれ要素でKPIを設定すれば、目指すべき目標が明らかになりそうです。
一部訳文に怪しいところがあり、例えば「信号」と訳されているのは「サイン」程度が理解しやすいかもしれません。
倫理なきVR・ARデザインはディストピアを招く (VR Inside)
VRやARにも倫理的な規範が必要だという記事です。
確かに文中で紹介されているムービーを見ると、すぐにでもARグラスを外したくなってしまうだろうと思います。
バーチャルな痴漢行為が痴漢行為と呼べるのかわかりませんが、少なくとも不愉快にはなりそうです。
そう考えると、今は目新しさとか、体験の可能性についてフォーカスされがちですが、そういった部分のマナーをどうやって守ってもらうか、あるいは法的な整備をどう考えるのか、議論を進めていく必要がありそうです。
見落とし厳禁！ウェブユーザビリティ基礎問題集 vol.1 (パンタグラフ)
ユーザビリティのクイズです。それほど難問はないので、気軽にトライしてみるのはいかがでしょうか。
vol.2、vol.3もあるのでお忘れなく。
なお、問い7については、[次へ] がアクティブになったままエラー表示のほうがよいかもしれません。
ユーザーが [次へ] を押せない理由に気づかず、先に進めなくなってしまう可能性もあるので、エラーでどこの入力が不十分か案内するのが良いと思います。
The 2 hour Design Sprint (Prototypr.io)
通常5日間かかるデザインスプリントを2時間で実行するという記事です。
少しデザインスプリントに関する知識が必要となりますが、ときどき調べながら読み進めるとよいでしょう。
この場合だと、プロセスをかなり端折ってスピーディーに実行することになりますが、前任忙しいメンバーを集める場合や、別に主務を抱えている集団で実施する場合には、「それくらいなら」と参加しやすくなるという点で、大きな効果を発揮しそうです。
当然ユーザーリサーチやステークホルダーインタビューの時間はほとんどないので、そういったものがすでにある、あるいは実施者がよくわかっている（というのが実は一番危険だったりするのですが）場合に使うのが良いように思います。
F-Shaped Pattern of Reading on the Web: Misunderstood, But Still Relevant (Even on Mobile) (Nielsen Norman Group)
Webサイトの文章を読むときの視線の動きは、左から右、それから少し下に行って左から右、というようにF字を描くように読むのをF字パターンと呼びますが、このF字パターンに関する記事です。
やや古い検証結果ですが、このパターンはいまだに有効で、モバイルにおいてもこの傾向が見られたり、コンテンツがスキップされるためビジネスにとって悪い影響があったりするということが書かれています。
F字パターンのネガティブ要素についての解消方法は、記事の下のほうに書かれていますので、参考にするとよいと思います。
その解消方法にもつながりますが、いかにコンテンツをスキップさせないか、を考えるより、そうした行動を念頭に置いて、レイアウト設計やコンテンツ作成を行うのがよいのでは、と思いました。
スターバックスアプリのアップデートで気付いたUX
私は普段からスターバックスアプリを使っているのですが、少し前にStarという所謂ポイント制度を導入し、アプリがリニューアルされましたね。
このアプリについてもUX上の良い点、良くない点は職業柄いろいろと気になってしまい、まとめて社内の勉強会で共有したりしていました。
今回アップデートされたことにより、文字が大きくて見やすくなったり、機能が整理されて良い印象だったのですが、先日アプリを使って支払いをしたときに、気になることがありました。
支払い時にスマホを見せてスキャンしてもらうのですが、店員さんの手の角度が何か変。横向きにしてる。
そう、アップデートでバーコードの向きが変わったのでした。
アップデート前後のスクリーンショットを比べてみましょう。
左がアップデート前、右がアップデート後です。
どちらも画面の向きはポートレート、つまり縦向きですが、以前はバーコード表示もそれと同じ方向でした。
ところが、アップデート後は90度回転していて、テキストの向きと合っていません。
バーコード表示が大きくなったから、スキャンしやすいかもしれません。ただ、顧客はスマホを差し出すとき、相手からも見やすいよう、テキストの向きで判断し、縦向きのまま差し出すはずです。
でも、店員はテキストではなくバーコードを読み取る必要があるため、手を90度回転させて読み取らざるをえなくなります。
なんだかやりづらそう。。
向きが変わっただけなので、それほど大きな問題ではないのかもしれませんが、従業員体験、エンプロイーエクスペリエンスをやや低下させるものなのではないでしょうか。
そして、良かれと思って差し出したのに、店員がやりづらそうにしているのを見て少し申し訳なく思ったとしたら、それはUXにも影響を与えていると言えそうです。
考えすぎ？
いずれにしても、ここから私が学んだのは、UXというのは自分自身がアプリやサービスを通して感じる気持ちだけでなく、そこに組み込まれる他者を見て感じる気持ちもあるのだなということ。
サービスデザインの文脈では、従業員体験はビジネス視点で語られることが多いですが、ユーザー視点でも考えてみると気づきが生まれるかも、と思いました。
UX関連記事 (2017/11/13)
最近ドラゴンボールを読んでいます。遥か昔に読んで以来ですが、やはり面白いです。神龍に願いを伝えるとしたら何にしようかな。
さて、先週一週間くらいで私の気になったUX関連の記事を紹介します。
「お金を払った感」はどのようにデザインすればよいのか (Goodpatch Blog)
フィードバック全般、特に電子決済時のフィードバックに関する記事です。
アプリやWebサイトに限らず、ユーザーが何かしたときにそれが受理されたか、その結果どうだったかのフィードバックは重要ですが、金銭の動きとなるとフィードバックはさらにシビアにならざるを得ません。
記事にある通り、電子決済であれば、安心感のためにもわかりやすいフィードバックが求められると思います。
その意味では、Edyの決済完了時の「シャリーン」という音は、支払い完了がわかりやすく、ちゃんと物理的なお金も想起しうる、よくできたサウンドデザインなのだと思います。
【OKボタンはダイアログボックスの右側？左側？】適切なボタンの配置について考える (SeleQt)
http://www.seleqt.net/design/why-ok-buttons-in-dialog-boxes-work-best-on-the-right/www.seleqt.net
OKボタンの位置に関する記事です。
視線の移動を少なくする点、「次へ」といった方向性を意識する点は参考になります。
プラットフォームに従うだけでは不十分とのことで、確かに実利用シーンは想定しつつ設計する必要があると思いますが、プラットフォームのルールに従うのも、ユーザーの認知負荷やスリップ（間違えて選択してしまう）を減らすために大事なことだと思います。
ちなみに現状のOKボタンの位置は、Windowsは左側、AndroidやiOSのモバイルは右側、Webはユーザーの利用動向により左側主流から右側主流に移ってきている、という感じでしょうか。
時代遅れのデザインでもAmazonから学びたい、UX設計4つの手法 (WPJ)
Amazonの優れたUXデザインについての記事です。
3番目の「ユーザーアクションの障害をなくす」というのが一番重要で、ここに書かれている以外にも、次ページ表示時、一瞬で表示される設計になっているなど、ユーザーの導線にかなり気が配られていると思います。
で、Amazonのデザインが時代遅れかというと、個人的にはそうは思わないのですが、それは私がUX至上主義に毒されているのか、単にセンスがないだけなのか、いまいちわかりかねます。
人を思いやり、リアルタイムに形を変える横断歩道「Starling Crossing」 (IDEAS FOR GOOD)
未来の横断歩道の実証実験に関する記事です。
交通量に配慮しつつ、人の認知をサポートして事故を抑えるということで、とても優れたUXデザインだと思いました。
日本の場合、横断歩道ではあまり車が止まってくれないので、さほど効果的ではないのかなとも思ってしまいますが、いずれにしても交通事故は身近な危険であり、社会問題でもあります。
車にできること、歩行者にできること、道路などのインフラでできること、それぞれがそれぞれの立場で真剣に考えていく必要がありそうです。
The relationship between design deliverables and presentation skills (uxdesign.cc)
UXデザインの成果物とプレゼンテーションスキルの関係についての記事です。
結論から言うと、この両者は密接に関連しているそうです。すなわち、UXデザインの成果物は重くなる傾向があるため、それ自体の説明と、細部にとらわれないストーリーテリングとのバランスが大事、とのことです。
ただ、UXデザインの成果物を伝えるのが難しいのであれば、それ自体のUXがイケてないような気もします。
私も注意せねばと思いますが、成果物作成の際は常に「どう伝えるか？」を考えながら取り掛かるのが良さそうです。
The iPhone X Is A User Experience Nightmare (Co.Design)
タイトルからしてひどい言われようですが、確かにその要素はあるのかもしれません。
実は私もiPhone Xを買いたいと思っていたクチなのですが、業務の一環で記事中の引用画像に似た資料を作成したところ、ジェスチャーが多すぎて資料が完成する頃には買う気がかなり失われてしまいました。
記事の最後にシンプリシティの話が出てきますが、ボタンがなくなることで複雑さが増すのであれば、それはシンプリシティと呼べないのではと思います。
ただ、重要な点としては、スマートスピーカーが急速に普及する中、音声やジェスチャーといったNUI（ナチュラルユーザーインターフェース）が今後も増えることが予想されます。
きっかけが示しにくく、覚えるという手間も発生することになるNUIに対して、ユーザーの負荷をどう軽減していくか、iPhone Xを機に考えていきたいです。
UX関連記事 (2017/11/6)
週初めだというのに会社の社員証を味噌汁に浸してしまい、ちょっとブルーなスタートを切ることになりました。とりあえず綺麗にはなったので、気持ちを切り替えていきたいものです。
さて、先週一週間くらいで私の気になったUX関連の記事を紹介します。
自分の目で見て感じるインプット、始めませんか？ (CrowdWorks Designer Blog)
展覧会など、実際に自分で足を運んで体感することで、仕事に活かせるインスピレーションを得るという記事です。
この週末はちょうどグッドデザイン賞の展示をやっていましたが、そういった場でいろいろなものに触れることの重要性が書かれています。
記事でもいくつかのスポットが紹介されていますが、デザイナーでなくとも、モバイルEXPOなどのイベントや、博物館や美術館といったインプットに適したものは多く存在するので、そういった場を探してみるのも面白そうです。
ケチャップボトルの事例で考えるユーザー体験の評価方法 (UX MILK)
有名なケチャップボトルの話についてです。
ここで言及されている通り、ケチャップが蓋にこびりついてしまう課題は早く解決してほしいところです。
最後のほうでユーザー体験の評価という話が出てきますが、どちらかというとこれらで評価できるのはユーザビリティのような気がします。
UXの評価ということであれば、主観的満足度なども評価対象に含めるとよいように思います。
EVは期待はずれ。東京モーターショーで中島聡が感じた本音 (まぐまぐニュース！)
東京モーターショーに関する記事です。
新旧モデルが混在して伝えたいことがぼやけているのではという指摘など、ユーザー目線からのインプレッションとして、とても優れた内容だと感じました。
EV化の流れは止まらないと思いますが、SKYACTIV-Xのように、既存のエンジンでもできることはまだまだありそうですし、車そのものの進化だけでなく、人が移動するという行為自体の進化も、もっと様々な可能性を見てみたい気がします。
ストーリーボードを使ったUXデザインのためのアイデア発想法とは？ (えそらLLC UX ブログ)
esaura.jp
ストーリーボードの意義や作成方法についての記事です。
かなりのボリュームがあり、参考になります。
ストーリーボードはやはりUIにフォーカスし過ぎず、体験そのものの価値だったり、前後の出来事も可視化できるという点で優れていると思います。
ここに書かれているポイントを踏まえて、とりあえずやってみる、という姿勢がまずは良いかもしれません。
Debunking Common UX Myths With The UX Mythbusters (Creative Cloud blog by Adobe)
巷で聞く「UXの神話」を暴くという記事です。
「UXの神話」は有名なリストで、要はこれらはすべて間違いだということになります。
記事では一番の問題は#34であり、それにより大切な機能が隠されて複雑になっていると述べていますが、確かにそれは大きいように思います。
改めてリンク先の#1～34を眺めてみると思うところがありますが、特に最下段で#0として書かれていること、これも肝に銘じておく必要があると思いました。
31 common UX design problems for monsters (Be Good To Your Users)
ハロウィンということで、いくつかの怪物を例にとり、UXデザインの問題点をまとめています。
ややジョーク記事ということもあり、得るべきこともそれほど多くないのですが、様々な属性のユーザーを考慮する、という意味では有効かもしれません。
最後に「その他の怪物」の一覧が出てきます。日本ではおなじみの貞子が出てきますが、それ以外はちょっとわかりませんでした。。。
UX関連記事 (2017/10/30)
週末ごとに大雨が降りますが、ちょうど地元でハロウィンのイベントがありました。年甲斐もなくかぼちゃのフェイスペイントをして、豪雨の中お菓子をもらいに回るなど、頑張りました。 さて、先週一週間くらいで私の気になったUX関連の記事を紹介します。
なぜNetflixのトップページデザインは不親切なのか？ (UX MILK)
Netflixのトップページが他のサービスと異なり、コンテンツの一覧を出していないことに関する記事です。
理由として「ブランド感」が挙げられていますが、伝えたいことを絞っているとも言えそうです。
たくさんのコンテンツがそろっているというのはもはや当然のことで、それ以外の差異化ポイントとしては、このトップページで繰り返し出てくる「いつでもキャンセルできる」という点なのだと思います。
他のサービスもそれぞれ伝えたいことをトップページで体現しているのだと思いますが、それぞれどんな人に対して何を伝えたいのか、考えてみるのも面白そうです。
反面教師としてのダークパターン--課題解決のための UI/UX (ZDNet Japan)
目先の利益を優先することで、ユーザーの意図しない方向にもっていこうとすることをダークパターンと呼びますが、それに関する記事です。
実際のところ世の中にはこの類のUIが非常に多く、私も先日PCソフトのインストール時に一緒にウィルス駆除ソフトをインストールしてしまったようで、いつの間にか動いていて時々顔を出すので、お前がウィルスじゃないか、と言いたくなりました。
問題は、知ってか知らずかその仕組みを世に出してしまうと、後から変えにくいということです。
変えたら収益が落ちる可能性があるし、長期的に見れば必ず利益につながる、という言葉にも確証がないため、社内の説得が大変です。
こういったところをきちんと説明できるような証拠なり事例なりが潤沢にあるとよいなと思います。
音声アシスタントが普及すれば、「人間の脳の能力不足」が問題になってくる (WIRED.jp)
人の脳はマルチタスクに向いていないので、音声アシスタントによる割り込み処理があると何かが抜けてしまうという記事です。
音声アシスタントを使いこなしているという声をあまり聞かないのは、まだできることが発展途上だからという理由が大きいと思いますが、人が使いこなす能力を持っていないとも言えるのかもしれません。
中ほどにリンクのある「見えないゴリラの実験」は、タイトルを書いてしまっているのでネタバレ感がありますが、是非見てみてください。
ユーモアとクソアイデアの境目 (Goodpatch Blog)
自由な社風が伝わってきて微笑ましい記事です。
クソアイデアと言っていますが、決してそんなことはなく、枠にとらわれがちな場合に発想を広げてより良いアイデアを導くことにつながるなど、大事な役割だと言えます。
アニメーションの話が出てきますが、ここで挙げられている以上に無駄なアニメーションが世の中にはびこっているように思います。
The Magic of Flow and Why Dialogs Frustrate People (UX Planet)
「フロー」というのはとても集中している状態を表す心理学の用語です。ダイアログの表示がそれを妨げるものとして、その原因や対策について記載されています。
確認ダイアログなどで、現在行っているタスクが妨げられると、結果タスク完了時間が増大し、かつダイアログ自体に慣れることで、重要度が減っていってしまうということで、なるべく使わないほうがよさそうです。
代替策としてMaterial Designのスナックバーが挙げられていますが、個人的にはスナックバーによる通知も慣れが出てきて見逃してしまう可能性があるように思います。
こういった通知をどこかに溜めておいて、後からUndoできるようになっているとよいと思います。
13 Blank State Examples You Can Use to Improve User Experience During Onboarding (Inter Trends Blog)
サービス開始時に、コンテンツがない表現をどう見せるか、についてまとめた記事です。
たくさんの例が掲載されているので参考になります。
さまざま工夫されていますが、まずはコンテンツが0件であるということを明示し、どうすれば増やせるのか、次に何をすればよいか示すのが良いように思いました。
なお、この記事ではBlank Stateという表現を使っていますが、Empty Stateという表現もときどき見かけます。
UX関連記事 (2017/10/23)
先日は中学校の同窓会に出席してきました。みんな久しぶりのわりに全く変わっていなかったのですが、傍から見ればやはり変わっているのでしょうね。
さて、先週一週間くらいで私の気になったUX関連の記事を紹介します。
サービスリニューアルする際、チームでユーザー体験を向上させるためのサービスブループリント (Goodpatch Blog)
サービスブループリントに関する記事は珍しいのですが、ツールなど含めて詳しく解説されていて、参考になります。
感情曲線を入れるなど、カスタマージャーニーマップ的な使われ方もしていますが、サービス提供側の課題が明確になり、それに対するアクションを皆で考えていけるところが、サービスブループリントを作る意義だと思います。
この記事で紹介されているプロジェクトでは、はじめにステークホルダーインタビューを丁寧にやっているようですが、これも見落とせないポイントだと思います。
失敗からの教訓：人間中心設計やＵＸデザインを社内に普及させるには (産業技術大学院大学)
UXデザインを社内で普及していくためにはどうすればいいか、についての記事です。
3つほどポイントが紹介されていますが、最後の「絶対に諦めない」というのは重要だなと思います。
組織とか状況によってはかなりのパワーを使うことになりますが、初めからそういうものだと思ってかかるのが良さそうです。
また、記事に書かれているようにキーマンの存在も重要で、そういう人を見つけることも大切だと思います。
身近な例で学ぶMVP（Minimum Viable Product）の重要性 (UX MILK)
MVPとは意訳するとコア価値だけ実現した製品やアプリ、サービスということになると思います。
具体的な例が書いてあり、公園に模したイメージ付きでになっているので、わかりやすいです。
これを見ると、やはり実際のユーザーからのフィードバックを早く得ることが大切だということになると思います。
新鮮だけど懐かしい。Windows 10の新デザイン「Fluent Design System」イメージ動画が公開 (ギズモード・ジャパン)
Microsoftの新しいデザイン言語（彼らの言葉ではデザインシステム）の紹介です。
Windows Vistaに似ているという話が出ていますが、確かにAeroスタイルの雰囲気を感じます。
ただ、それ以上に、Material Designに似ているような気もしますが。
動画を見るとサクサク動いていますが、実際もこれくらいで動いてくれると嬉しいです。
Making The Case For 'Boring' UX Design (Usability Geek)
「退屈」なUXデザインに関する記事です。
パララックススクロールやロード中のアニメーションなどはユーザーを引き付ける要因になりえるものの、UXを犠牲にする可能性があるので、従来通りの「退屈」なデザインももっと考慮すべき、という内容ですが、ここでいう「退屈」というのは「普通であること」に近いと思います。
過度に装飾せず、ガイドラインに則ったデザインは普通なのかもしれませんが、人々の課題を解決するのに適したものであるならば、それは美しいデザインだと言えるではないかと思います。
UX-writer: A New term, a Big Need (Prototypr.io)
UXライターに関する記事です。
なんでもUXに結びつける昨今ですが、この記事の趣旨としては、UXにおいてライティングは大きなウェイトを占めるので、しっかりと検討する必要があり、またそのためのスキルを身に着ける必要があるといったところです。
UXライターに関する記事は以前からありましたが、10月に入ってから、特に海外において増えてきたように思いますので、継続してチェックしていきたいと思います。
