UX探訪記

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

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

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

久々に柿を食べましたが、私にはこの果物のおいしさがイマイチわかりません。いや、甘いとは思うのですが、イコールおいしいではないんです。不思議。
さて、先週一週間くらいで私の気になったUX関連の記事を紹介します。

デザインの話題:2つのUX (Gadgetwear)

"UX as a Service" という、どこかで聞いたことのあるような言葉も出てきますが、要はプロダクトのUXとサービスのUXの2種類のUXがあり、どちらかだけでなく両方を高める必要があるという内容です。
そもそも2種類あるというよりは、両方あって初めてUXと呼んでよいのでは、とも感じます。
とはいえ、知らず知らずのうちに片方にフォーカスしていることはよくあることなので、気をつけたいところです。

間違えるな!誰に向けたデザインかは誰もが迷わず使えてから考える事 (UX TIMES)

ユーザビリティテストの重要性に関する記事です。
最低限の使用可能性をまずは満たすべき、ということですが、このタイトルだとちょっと誤解しそうなところがあります。
まぁいずれにしてもユーザビリティ評価はやったほうがよいですね。
「誰もが」となると対象がとても広くなってしまいますが、チェックリスト評価などを併用して品質を上げて、そこからターゲットユーザーを中心としたユーザビリティテストを行うのが良いのかなと思います。

ユーザーに面倒な操作をさせない CAPTCHA (reCAPTCHA v3) (Website Usability Info)

CAPTCHA(キャプチャ)の新しい流れに関する記事です。
CAPTCHAとはなんぞや、というのは本文を見ていただければわかりやすいと思いますが、これは本当にユーザビリティの低下を招いているので、改善が図られることは良いことだと思います。
この reCAPTCHA v3というのは、行動を読み解いてロボットか人間かを判断するようですが、仮に自分がロボットだと判定されたとしたら、ちょっと気落ちしてしまいそうです。

「Bad UI」を分類する--思わず陥る6つのパターン (ZDNet Japan)

よろしくないUI、いわゆるbad UIについての記事です。
ここでは6つのパターンに分けて説明されていますが、それぞれフィードバックとか、これらをより専門的に説明するできるとは思いますが、「ユーザーを罠にはめるUI」といった、より一般的にわかりやすく、かつ面白い表現で説明されているのが良いなと思いました。

Meatball Recipe (UX Collective)

UIにどんどん機能を追加していって、結局元に戻るというストーリーボード風の記事です。
まぁ実際にもよく目にすることのある光景ですが、ここで2カ月置いて再提案、というのは結構重要と考えています。
というのも、冷却期間を置くことで、同じ提案内容であっても、状況や思考が変わって受け入れやすくなるからです。
なお、タイトルがまるで料理サイトのような表現ですが、どうやらミートボールには無能な人という意味があるらしいです。

See different (Userfocus)

Appleの宣伝文句に似ていますが、中身はユーザーになったつもりで観察せよという話です。
読み進めていくと、ユーザーになったつもりというより、本格的にユーザーそのものになる、というところまで解説されています。
なかなかそこまでは・・・というのもあるかもしれませんが、それだけ他人の視点で考えることは難しく、かつ重要なことなのだと思います。

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

久々に歯医者に検診に行ってきましたが、虫歯はありませんでした。普段それほど歯磨きなどを頑張っているほうではないのですが、何が良かったのでしょうか。
さて、先週一週間くらいで私の気になったUX関連の記事を紹介します。

デザイン指標から価値を伝えてみよう (could)

デザイナーはビジネス指標だけでなくデザイン指標も押さえておくべき、という記事です。
このデザイン指標はビジネスゴールに対するユーザーゴールという位置付けに近いかと思います。
デザイン指標について具体的に何を指標とするかも書かれていて参考になります。
最近はデザイナーもビジネスの視点を持つべきという議論が多いですが、こうしたビジネスとユーザーとのバランスの考慮も大事な視点だと思います。

「ハイ、メルセデス」で話題の「MBUX」 試して分かった「できること」と「できないこと」 (webCG)

メルセデスベンツを声で操作するという「MBUX」の記事です。
なんでもUXとつける最近の風潮はどうかと思いますが、将来的に自動運転なども含めた体験になっていくのかなと思います。
記事を読む限りまだまだ発展途上のようですが、AIスピーカーの普及からするとこの流れはさらに加速すると思いますし、ナイトライダーの世界はすぐそこまで来ているのかもしれません。 (ジャンプはしないでほしいですが。)

受験勉強をデジタルシフトさせた! ~学習体験を再発明したスタディサプリのケース (BACKYARD)

スタディサプリというサービスを分析した記事です。
学習体験の再発明というのはやや大げさな感じもしますが、顧客体験とビジネス体験でのポイントの双方をわかりやすく図解も交えて説明しています。
最後のほうに、なぜ既存のプレイヤーでは実現できなかったのかも分析があります。
個人的には、この理由の一つに、自分たちのビジネスモデルを崩すことにもなるからというのもあると思います。
ただ、この事例から考えると、逆にそういうリスクのある部分に次の一手が潜んでいると言えそうです。

バックグラウンドに動画を使うことのメリットとデメリット (UX MILK)

Webサイトの背景で動画が再生されるサイトはもはや珍しくもなくなってきていますが、この記事ではその長所や短所が記載されています。 データ容量を小さくする方法や、モバイルの場合の代替案など、具体的な対応策についても記載されているので参考になります。 こうした動画がどこまで機能やサービスの理解の助けになっているのかは怪しいところがありますが、背景の動画を見せるべく表示要素を減らす努力をするのは、良い影響を与えることになるのではと思います。

Please Stop Saying “Design” (Prototypr)

何でも「デザイン」という言葉で説明されることでわかりにくくなっているという記事です。
日本でもデザインが見た目のことを指すだけではないことがだんだん浸透してきていますが、今後はその弊害により、具体的に何のことなのかわかりにくくなり、あいまいなまま進んで後からしわ寄せがくるようなケースも増えてくるかもしれません。
この記事にある通り、デザインが何を指すのかはっきりされるべきタイミングと、そうでなくても大丈夫なタイミングを考慮する必要がありそうです。

What you should know about Mobile User Experience (Bluespace)

モバイル向けのUXに関する入門的な記事です。
PC向けのUXとの比較というかたちで書かれていて、イラストも入っていて理解しやすくなっています。
画面の向きや指の使い方など、どのくらいの使用割合があるかのパーセンテージも示されていて参考になりますが、これらは昨今の画面サイズ拡大の流れで割合も変わってくるのかもしれません。