UX探訪記

UIデザインやUXデザインに関する記事を集めたり書いたりしています。

UX関連記事 (2018/12/24)

今月は advent calendar によるUX関連記事が多く、読むべき記事に困りません。advent calendar は最近増えてきましたが、年間通してやってくれるとありがたいのですが。
さて、先週一週間くらいで私の気になったUX関連の記事を紹介します。

半年間ユーザーインタビューを毎週続けてきたことで分かったのは、とてもシンプルで大切なことだった (PSYENCE:MEDIA)

毎週ユーザーインタビューを実施する中わかったことをまとめた記事です。
「ユーザー」の存在が自分の中で変わってくるなど、続けることで見えてきたことがいくつかわかりやすく書かれています。
最初のほうに書かれている「インタビューを実施することが目的とならないようにする」という点はかなり重要で、とりあえずわからないからやってみる、とか、インタビューをしたからユーザー理解については安心、とか短絡的に考えないようにする必要があると、改めて感じました。

できる!リモートワークでのUXデザイン (Takehisa Gokaichi)

リモートワークでのUX デザインの実践に関する記事です。
ここで紹介されている Figma や Slack だけでなく、最近はオンラインコラボレーションツールが充実してきているので、うまく活用できると良さそうです。
記事で指摘されているように、課題があったとしても本質的にはリモートが問題なのではないケースも多いように思います。
まずリモートかどうかに関わらず、コミュニケーションをどう効率的に有効に取っていくか、という視点から入る必要性を感じました。

バッドデザイン賞を勝手にノミネートしてみた-2018年度版- (酔いどれデザイン日誌)

今年見たイマイチなデザインについてまとめた記事です。
どれも確かにイマイチですが、特に4番目は何がどうなるのかさっぱりわからず、本当にこれで機能すると考えたのか首をかしげたくなります。
こうしたものは街中で良く見かけるのですが、私も見つけると写真に残したりしているので、あとでまとめて記事でも書こうかなと思います。

「規格」と「UI/UX」の話 (がんちゃんの雪山賛歌)

規格が統一されていないためにユーザビリティが低下する例に関する記事です。
ユーザーのために統一すべきところはちゃんと規格を設けて統一し、差別化するところは各社知恵を絞るというかたちになっていくとよいなと思います。
一方で、慣れが必要なだけで明らかに良いもの、というのもあるわけで、その場合には導入の仕方を工夫していけるとよいと思います。

User Experience FAQ (Prototypr)

UXに関するFAQというタイトルですが、どちらかというと、UXについて知っておくべきことリスト、といった記事になっています。
基本的な内容についても書かれていますが、「UXへの投資でコストを下げることができる」など、端的に説明しにくいこともわかりやすく説明されています。
最後のほうにUXデザインのプロセスの図が紹介されています。
これあHCDプロセスとほぼ一緒ですが、中央にユーザーを置いて全てのプロセスでそこを向いているという点がユニークかつ重要だと思いました。

Brand experience ≠ user experience (Landor)

ブランドエクスペリエンスについての記事です。
ユーザーエクスペリエンスは機能性やパフォーマンスだが、それだけでは差異化要素にならず、ユーザーの記憶に残るものとしてブランドエクスぺリンスの大切さが説明されています。
個人的には、UXはユーザーの感情も含むはずで、それらの積み重ねがブランドを作るという点で、ここでいうブランドエクスペリエンスは累積的UXに当たるのでは、と思います。
いずれにしてもここではその事例として、ブルーボトルコーヒーが詳しく紹介されていてわかりやすいです。

UX関連記事 (2018/12/17)

クリスマスツリーを出して飾りつけをしたのですが、何やら願い事の書かれた短冊が下がっております。。
さて、先週一週間くらいで私の気になったUX関連の記事を紹介します。

メルカリが実践する「サロン」による共創型サービスデザイン (Biz/Zine)

メルカリのユーザーを呼んで話し合う場をつくるという、まさにサービスデザインといった記事です。
ユーザー同士の情報交換の場として適していて、ユーザーサイドも参加するメリットが大きいのが利点だと思います。
ここから真の共創にいくには、こうしたユーザーからのフィードバックをどう開発に結びつけるかが大事なポイントだと思います。
ちなみに私もメルカリに出品したのですが、まったく売れずに撤収しました。
おそらく値付けが強気過ぎたのだと思います。

プロトタイピングで陥りがちな6つの落とし穴 (UX MILK)

プロトタイピングについての「べからず集」です。
どれもあるあるな感じがしますが、特に大事だと思うのが、3、4、5番目です。
これらは互いに密接に関係していて、最初に力を入れて作ったものを捨てられず、結局それを改善していく方向でしか議論が広がらないという危険性があります。
やはり最初のうちに入れ込まないように、軽いもので作っていく必要があると思います。

アプリの検索UIを考える (in-Pocket)

コンテンツの検索UIについての記事です。
検索UIについて必要な要素がいくつか記載されていますが、1番目の項目については私は気づいていませんでした。
けっこう便利なので使っていこうかなと思いますが、それなら1タップでフォーカスを入れてくれてもいいような気がします。
ただ、その場合、2番目の項目(検索履歴)との両立が難しくなるわけですが。

ユーザーの声に振り回されないデザインの改善プロセス (dely design)

https://dely.design/n/nfff10800b770

ユーザーの希望は必ずしもニーズを満たすものではないという記事です。
これはよく聞く話で、本文では「願望」と「事実」とに分けられています。
ただ、実際願望しか伝わってこないケースもあり、その際は背後にある事実を見つける必要があります。
「願望」に対するアプローチはあまり書かれていませんが、願望そのままの案と事実に対応したオススメの案の両方を示して比較できるようにするのが一番良さそうです。

The paradox of choice for UX designers (Justinmind)

「選択のパラドックス」に関する記事です。
選択肢が多すぎることがどういう悪影響を及ぼすのか、そのための解決策として「ユーザーを導く」ことの方法などについて詳しく記載されています。
私はこのパラドックス自体は知っていたものの、文中で紹介されている著作(の邦訳版)『なぜ選ぶたびに後悔するのか』は読んだことがなかったので、今度読んでみようと思います。

6 Ways Bad Localization Can Ruin the User Experience (IRIS)

悪いローカライズや翻訳がUXを損ねるという記事です。
AIにより機械翻訳の精度は向上したものの、やはりまだまだなので、ちゃんとした翻訳を行う必要性が語られています。
言われてみれば納得というのが、世界の大半の人が簡単な英単語ならわかるという点で、すべて母国語でなくても問題ないケースも検討していく必要があるかもしれません。
また、世界人口の60%は「マルチリンガル」だと書かれていますが、これに日本人は含まれるのかどうか?
多分大半の人が含まれないのだろうななと思いました。

作り手への共感というUX

f:id:junichiirokawa:20181214004132j:plain
Photo by Przemyslaw Marczynski on Unsplash

iPhone XSに機種変更してしばらく経ちました。 Face IDによるロック解除やポートレートモードでの写真撮影など、素晴らしいUXだなと思えるものがある反面、以前使っていた iPhone 6s と比べてそこまでの違いがないような・・・。
ハード的にこれ以上必要なものはそれほどないのかもしれません。

そんな中、ひとつ気づいた細かい動きについて今回は考えてみます。

ホーム画面に戻るジェスチャー

iPhone X からホームボタンが消え、全てジェスチャーでの操作になりました。 アプリを閉じるときも、下にあるバー(ホームバーというらしいです)を上に持ち上げると画面が徐々に小さくなっていき、最後にはホーム画面のアイコンに戻る、という見た目になっています。

この操作は、別にバーのところを持ち上げなくてもよくて、下端のどこでも上に持ち上げれば、同じようにアプリを閉じる振る舞いになります。
要は下端のエッジスワイプがアプリを閉じるトリガーになっているわけです。

バーのバウンス

この操作で気づいたことがあります。
バーを少し持ち上げて戻したとき、つまりアプリを閉じる操作をしようとして「やっぱりやめた」なったとき、バーがバウンスするのです。
ビヨヨヨーンとバネのように動くということですね。
これがバーではない位置で下から持ち上げて戻したときには、バウンスしないのです。

動画を撮ったので載せておきます。 バーがバウンスしたタイミングがバーの位置で下からスワイプしようとした場合、バウンスしなかったタイミングがバー以外で下からスワイプしようとした場合です。

おわかりいただけただろうか?
・・・いや、細かすぎてわかりにくいですね。。

マイクロインタラクション

こうした細かい挙動はマイクロインタラクションと呼ばれ、最近特に増えてきているように思います。
マイクロインタラクションには UI の品位を上げるという役割もありますが、どう動くのか、どういう機能なのか、理解を助ける役割もあります。

今回のこのケースは、アプリを閉じるまでにはいかなかったため戻った、ということがわかる動きになっています。
ただ、それならバー以外のところで同じ操作をしても、バーがバウンスしてくれてもよいのではと思います。
私はこのあたりにAppleのこだわりを感じます。

これらはユーザビリティの向上にどれだけ役に立っているかというと、実際のところ、ほとんど役立っていないのではと思います。
ただ、こういったところに職人芸を見て嬉しくなったり、作り込みに感動を覚えたりすることで、ひいてはそのブランドのファンが増えるのではないかと思います。

作り手への共感

最近よく耳にするデザイン思考では、ユーザーへの共感がまず第一にあります。
ただ、「提供者側に対してユーザーが共感する」という方向も十分に考えられます。

バーのバウンスは些細なものですが、こうした「作り手のこだわり」に共感するUXというのも無視できません。
一方通行ではない、「双方向の共感」についても考えてみる必要がありそうです。

UX関連記事 (2018/12/10)

引っ越ししたのですが、荷物がまったく乗らず・・・。半分近くの荷物を自分で運ぶことになりました。ということで、かなりお疲れモードです。
さて、先週一週間くらいで私の気になったUX関連の記事を紹介します。

UXデザインに欠かせない”スキャナビリティ”とは? 可読性の高いページを作るための10のヒント (Workship MAGAZINE)

スキャナビリティという、日本語で言うと読みやすさとか可読性といった要素に関する記事です。
10のヒントとありますが、この6番目の項目はWeb記事などで特に大事になってきていると思います。
といいつつ、この記事自体があてはまりますが。
他にも内容面について、わかりやすい平易な文章で書かれているか、専門用語など使っていないかという観点も大事だと思います。

特別な日のプレゼントを UXデザインする ー 日常の課題解決にも使える HCDプロセス (96/KuRo)

プレゼントを贈るという、この時期にぴったりのテーマです。
考えてみればプレゼントを贈るという行動は、相手のことをよく考えてどうすれば喜ぶかを検討し、実行に移すという、UXデザインそのものだといってもよいかもしれません。
なので、練習の場として最適なように思います。
この記事でも細かいところまで書かれていてわかりやすいですが、アドバイスする人の言いなりになってしまってはあまりよろしくないのてはと思います。

【サービスデザイン】会議の内容がひと目でわかる!グラフィックレコーディングとは? (Battery)

グラフィックレコーディング、略してグラレコの紹介記事です。
グラレコのメリットや実践方法について入門的に説明されています。
ポイントのところで「構造化する」という話が出ていますが、実際に話を聞きながら描くとこれがなかなか難しいです。
私もそれほど慣れていないので、描いたものを他の人が見ても意味不明なものにしかならないのですが、それだとただテキストで書き起こすのよりも伝わりにくくなるので注意したいです。

有料ウェブサービスで「コンバージョン向上のためわずかな変更を繰り返すのは意味がない」という主張 (GIGAZINE)

わずかな変更が悪いといっているわけではなく、ちゃんと今回の変更で利益が得られたかを評価するのが必要という記事です。
その意味では、事前にKPIを設定して、リリース後にそれが達成されたかを見るのが大事だと思いました。
なお、最初のほうに「スプリットテスト」というのが出てきますが、これはA/Bテストのことです。

How AI Can Drive User Experience (Becoming Human)

AI についての良いUX、ここでは主にパーソナライゼーションについての記事です。
パーソナライゼーションの強化と、プライバシーの確保のバランスは大切で、AIがどこまで踏み込むかも我々にかかっているというように記載されています。
個人的には、人が人であるためには「自分の意思」が大事であり、パーソナライゼーションの強化はやってほしくないなと思っています。

Content Management is Design (Webdesigner Depot)

コンテンツマネジメントはデザインだ、という記事です。
確かにUI上はコンテンツで成り立っているといえなくもなく、各項目の見せ方や鮮度などといった要素は重要だと思います。
興味深かったのがbeautiful defaults という言葉で、ユーザーが変えよう、別のものにしようと思わなくさせるくらい考慮されたデフォルトを提供するという話です。
デフォルト設定や項目などを考える際には、そうした高みを目指す必要があるかなと思いました。

UX関連記事 (2018/12/3)

直近で引っ越しが控えているため、荷物の梱包などでかなりバタバタしています。人間長く生活していると、その分だけ荷物も増えてくるのだと実感しています。(というか、困っています。)
さて、先週一週間くらいで私の気になったUX関連の記事を紹介します。

人間中心設計から日本人中心設計へ (42/54)

この週末に行われたHCD-Netフォーラムに私も参加してきましたが、そこでの基調講演のひとつはこちらのアジェンダ風の記事を元に語られました。
話の内容は日本人の特性や文化を活かしたサービスの在り方などが説明され、時に脱線した話も織り交ぜながらで、非常に興味深かったです。
より詳細な内容を記事化していくということなので、今後が楽しみです。
ひとつUX観点で興味深かったのが「使い易い駐車場のデザインではなく、駐車場が不要な社会のデザインを」という内容です。
ひとつ上のレイヤーで考える、という視点もそうですが、自動運転の社会になると、オーナーが用事を済ませている間、駐車場に停車することなくずっと動いているなんてことも起こり得るなと思いました。

ディズニーランドから学ぶ究極のUXデザインとは (berax)

ディズニーランドのUXデザインに関する記事です。
ディズニーランドが優れた体験を提供しているというのは、UXという言葉が出る前から言われていたことですが、そのあたりが詳しく説明されています。
最後の方で「ミッキーによる10の戒律」というものが紹介されていますが、これはそのままUXデザイン原則として適用できるものなのではと思います。

【UXデザイン事例集】2018年ヒット商品の裏側に見る、UXデザイン事例3選 (えそらLLC UX ブログ)

ヒット商品について、UXデザインプロセスや手法を取り入れてできあがった例が3つ紹介されています。
どれも興味深い内容で、関連リンクから更に詳しい情報を得ることができます。
ここで紹介されているのはどれもユーザーの観察や分析をしっかり取り組んだもので、やはりこのフェーズを大事にする必要があるなと感じました。

ページ読み込みは「2秒以内」に - 3秒待てないモバイルユーザー、画像圧縮で表示速度改善を (Beyond)

Webサイトのページ読み込みで3秒以上かかると離脱率が大幅に上がるという記事です。
Web上でユーザーが待つ時間はどんどん短くなっているという話は有名ですが、このようにはっきり値が示されるとわかりやすいです。
開発時にはこの2秒以内という値を非機能要求として盛り込んでおくのがよいように思いました。

Product Page UX: Include Descriptive Text or Graphics for Some Product Images (52% Don't) (Baymard Institute)

https://baymard.com/blog/product-images-descriptive-text

製品ページのUXということで、ECサイトでどういった製品ページがよいのかまとめた記事です。
これによると、単に製品画像を表示するのではなく、説明的な画像だったり、説明文を入れておくのが良いとのことです。
こういったケースは最近増えてきたように思いますが、個人的にもこれは有効だと感じています。
実際に手にとって見られない製品の場合、製品イメージに寸法入りで書かれていたり、実際に利用しているシーンが表現されていたりすると参考になるし、購入後のミスマッチも起きにくいのでは、と思います。

Design Debt (DesignMap)

「Design Debt」という小難しい用語が使われていますが、この場合は「デザインの瑕疵」と訳すのがよさそうに思いました。
内容も小難しいのですが、ざっとまとめると、アプリ開発を行っているとどうしても瑕疵が発生してしまう。デザインというかユーザビリティの問題も出てくるが、これらも開発の瑕疵対応と同じように、デザインの対応も行っていく必要があるという感じです。
パレートの法則の話も出てきますが、実際のところ開発全体で20%もユーザビリティ改善に当てられたら御の字ですね。

UX関連記事 (2018/11/26)

今週末のHCD-Netフォーラムに参加予定です。参加される方、現地で会いましょう。交流会は残念ながら別件ありで行けませんが。。
さて、先週一週間くらいで私の気になったUX関連の記事を紹介します。

日常の中にあふれたハプティックを探る (Goodpatch Blog)

ハプティック(日本ではハプティクスと呼ぶことが多いように思いますが)という触覚フィードバック、平たく言うと操作した時に振動で成否を伝える効果についての記事です。
ハプティックは一貫性を持っていないとその意味をなさないという点など、なるほどと思えることが多く解説されています。
私も常日頃 iPhoneのハプティックを体感していますが、ピッカー(日付選択などのドラムロールのようなコントロール)を動かすときのフィードバックは心地よいと感じています。
今のところは振動だけですが、そのうち滑らかさとか粘り強さとか硬さとか、様々な表現を感じられるハプティックが出てくるかもしれません。

家電の謎機能と謎スイッチ、なぜ増える? 考察したら怖いことに… (ブルーバックス)

誰得の機能が増えていくことに関する記事です。
確かにどんな操作をしたかわからないうちに変なランプやアイコンが点灯して消し方がわからない、というのは私にも経験がありますし、他にも経験したことのある人は多いことでしょう。
本文は途中から生物の進化と合わせて考察されていて、妙に難しくなってきます。
正しく理解できているかわからないので何ともコメントしづらいのですが、家電の機能が生物の進化と異なる点としては、種の分化も環境による淘汰も、人の意思によるものであるところなのかなと思います。

UX思考を学ぶ。UIデザインパターン全28選 (OHAKO Blog)

先週に引き続いての紹介ですが、今回はUIデザインパターンについてまとめられています。
Web系のパターンが多いですが、それぞれに対してどういう場合に使うべきか、どういった効果があるのかが説明されていてわかりやすいです。
UIデザインパターンは例えばマテリアルデザインガイドラインiOSのHuman Interface Guidelinesにも書かれているので、それらも併せて頭に入れておくことが良いUIにつながっていくのだと思います。

金魚すくいの体験を考えてみた (nagahor / Fenrir Inc.)

https://designers.fenrir-inc.com/n/n522a713a673d

金魚すくいのUXに関する記事です。
利用前、利用中、利用後に分けて、そこでの体験と課題について書かれています。
金魚すくいはすくった後の飼育にあまり自信がないので初めからやらないという人も多そうなので、この記事で書かれているような「飼育セットを一緒に売る」というのは良さそうなソリューションだと思います。
金魚すくい以外にも、あんず飴でじゃんけんして買ったらもうひとつ、とかいうのでも同様にUXという観点で考えてみることもできそうで、思考の練習になるかもしれません。

Why User Testing Feels Like Exercise (UserLook Blog)

https://blog.userlook.co/usertesting-is-like-exercise

ユーザーテスト(ユーザビリティテスト)がエクササイズに似ているという話です。
3つの要素が挙げられていて、短いながらも要点がまとまっていて読みやすいです。
普段あまりユーザーテストができておらず、かつ運動もできていない人にとっては、1つ目の項目にグザっとくるはずです。
(まぁかくいう私もその一人ですが・・・)

20 wonderful gift ideas for the UX designer in your life (Justinmind)

もうすぐクリスマスだからでしょうか、UXデザイナー向けのギフトについての記事です。
様々な種類のギフトが紹介されていますが、ビジュアルデザインに関するギフトが多い感じがします。
個人的にも一通りほしくなるようなものがそろっていて、特に最初の Color Muse はかなりほしいです。
サンタさん来ないかなぁ・・・。 皆さんの周りにもUXデザイナーがいれば是非どうぞ(?)

UX関連記事 (2018/11/19)

かなり寒くなってきたので、家での普段着を長ズボンに切り替えました。上着は少し前からフリースを来ていたので、上はフリース下は半パンという変な恰好から卒業しました。
さて、先週一週間くらいで私の気になったUX関連の記事を紹介します。

「体験」を売るマツキヨのトイレットペーパー (日経ビジネスオンライン)

マツキヨのトイレットペーパーのパッケージデザインに関する記事です。
ユーザーの行動を観察して、「持って帰る」というステージに着目し、「楽しく持ち歩く」という体験をデザインするという、まさにUXデザインと呼べるストーリーなのではないかと思います。
単にパッケージデザインだけにフォーカスすると、おそらくこうしたアイデアは出にくいと思うので、正しく問いを立てるのは大事だなと思いました。

実装前にチームで確認、UIデザインで考慮したいチェックリスト (OHAKO Blog)

ユーザビリティを担保するチェックリストについての記事です。
ここでいうヤコブ・ニールセンのデザイン原則というのは10ヒューリスティックスとも呼ばれる古典的な原則ですが、それぞれの要素をカテゴリーごとにわかりやすくチェックリストにしています。
これはこれでかなり参考になりますが、業種やプラットホームが違えば過不足が出てくると思うので、そのあたりをそれぞれで補っていけると良さそうです。

現代のモノづくりにおいて加速する“可愛げ”の重要性 (XD)

スマートスピーカーやチャットボットでは「可愛げ」も大事だという記事です。
本文でも言及されていますが、可愛いかどうかというよりも、そのキャラの人格が見えるとか、トーンに一貫性がある、すなわち「キャラができている」というのが大事なのかなと思います。
あと、いくらキャラが可愛くても、やりたいことがなかなかできない、時間がかかる、とかだと憎らしく見えてくるので注意が必要そうです。

色盲色弱の人にWebページがどのように見えているかシミュレートできるChromeの機能拡張 -Colorblindly (コリス)

色覚異常の人がどう見えているか、webサイトのシミュレーションができるプラグインの紹介です。
実際の画面イメージを元に確認することができてわかりやすく、Chrome拡張機能なので導入も簡単だと思います。
アクセシビリティの観点では、他にもお年寄りなど弱視の方向けに文字のサイズやコントラストを上げる対応が必要ですが、そういった部分のチェックも併せて行えると良いなと思いました。

What Tokyo’s metro taught me about progressive disclosure (UX Collective)

日本の地下鉄が人で溢れているにも関わらず利用しやすいのは、情報が段階的に提供されているからだという記事です。
この「プログレッシブディスクロージャー (段階的開示)」はWebの入力フォームで次の画面が隠されているなど、日常よく目にします。
地下鉄の表示がそうだといわれると、確かにそうですが、普段から慣れてしまっていて気づきにくくなってしまっています。
やはり外からの声には耳を傾けないとだなと思います。

Drop-Down Usability: When You Should (and Shouldn't) Use Them (Baymard Institute)

https://baymard.com/blog/drop-down-usability

ECサイトにおけるドロップダウンメニューの利用についての考察記事です。
かなり詳細に説明されていてわかりやすいです。
ドロップダウンメニューの代替手段としてオートコンプリートが紹介されているのが時代の流れを感じます。
州の入力の例は、日本であれば都道府県の入力に置き換えて考えてみることができそうですが、こういった場面では確かにオートコンプリートがかなり役立ちそうです。
ただ、モバイルの場合でも同じで良いかはもう少し考える必要がありそうです。