00:04
9月17日土曜日ですね。
地獄朝9時を回りました。
台風の14号が本州に近づいているようですけど、
現時点で910ヘクトパスカルでしたっけ?
めちゃめちゃ強いですね。
本当に皆さん気をつけていただければと思います。
おはようございます。ひめみのきーすことくわはらです。
では本日も朝活を始めていきたいかなと思います。
今日はですね、タイトルにある記事ですけど、
ちょっとUXとかCSSみたいなところの話になりますけども、
4 Design Patterns That Violate Back Button UX Expectations
59% of Sites Get It Wrongって書いてますけども、
デザインパターンですね。
戻るっていうボタンのUXに反する4つのデザインパターンです。
59%のサイトがちょっと間違ってますよっていうのは、
ちょっと強いワード使われてますけどね。
今日はこの記事を見つけたので読んでいこうかなと思ってます。
じゃあいきましょう。
ボトル2は戻るボタンを押すだけが別に良いと言われてます。
ナビゲーション、これは正直いまいちです。
そして今私は女性へと戻されました。
OK、こんなの嫌だと。
っていうような、ある画像が1枚貼られてて、
この方はスマホで触ってるんですけど、
戻るボタン、バックボタンを戻すときに期待しないところに戻ってしまって、
こんなサイト嫌だって言ってます。
ちなみに貼られてたのはAmazonですね。
AmazonのWebでアクセスしてて、
それの戻るボタンで違うところに戻ってしまったそうですね。
この方がそういうふうなところに戻ったっていうところで。
じゃあいきましょう。記事の本文ですね。
私たちはユーザビリティ調査の中で、
初心者から上級者までユーザーがブラウザの戻るボタンに
大きく依存しているということを確認しました。
実際戻るボタンは長い間Webナビゲーションの定番であり、
ユーザーは何十年にもたってこのボタンを使ってきた経験から、
このボタンの動作について非常に具体的なメンタルモデルというのを
実は身につけてきましたよと。
オーバーレイ、アンカーリンク、動的に挿入されるビュー、
隠しコンテンツなどなど、
多くの一般的なWebデザインパターンが
戻るボタンの動作に関するユーザーへの期待を裏切る
デフォルトの技術構造を持っている場合、
これはしばしば深刻なユーザビリティ上の影響を及ぼしますと。
実際私たちのベンチマークでは59%のeコマースサイトが
戻るボタンの使用を技術的にどのようにサポートしてくれるか
という点について、
これら4つのユーザーの期待の少なくとも1つを裏切っていることが
明らかになっていますと。
で、ブラウザの戻るボタンがどのように動作するかという
ユーザーの期待を裏切ることは悲惨な結果もなきかねませんと。
私たちのユーザビリティテストでは
このことがユーザーを離脱させる直接的な原因となり
多くの悪魔や罵声を浴びせてテストサイトを去っていきました。
03:04
穏やかなテストユーザーからもそんな罵声を浴びてしまいました
というところです。
いやー、なかなか厳しいですね。
ボタン1つなんですけど、それによって体験がいきなりぶち壊れて
もうユーザーが離れてしまう、サイトから離脱してしまうというのは
かなり有識事態だなと思いますね。
しかもテストユーザーですね。
リリース直前にユーザビリティテストを行っても
その時のユーザーですらそんなことをおっしゃられるのは
結構きついものがありますよね。
今回は大規模なユーザビリティ調査を行い
以下のような知見を得ました。
ユーザーが期待する戻るボタンの機能というところですけど
イシュー1、オーバレイト、ライトボックスですね。
37%のサイトが未対応です。
イシュー2、フィルタリングと相当ですね。
これも27%のサイトが未対応。
イシュー3、アコーディオンとかチェックアウトですね。
イシュー4、商品ページから商品リストへのナビゲーション
というところですね。
あと、戻るボタンの問題で影響を受ける他の5つのビューだったりとか
あとシンプルな解決策というところですね。
これらがこの筆者が得た知見だそうです。
解決策って結構シンプルですけども
実装段階で意外と軽視されがちです。
以下に示すように最大規模のウェブサイトであっても
特にモバイルサイトでは軽視されがちですよという風に言っています。
最大サイトっておそらくAmazon系の話だと思いますけど
じゃあ入っていきましょうか。
ユーザーは戻るボタンに何を期待しているかというセクションですね。
簡単に説明するとユーザーは戻るボタンによって前のページに戻れると期待しています。
技術的に新しいページであることと
ユーザーが新しいページであると認識していることの間にはしばしば違いがあり
ユーザーが戻るボタンに期待する場所と
実際に戻る場所との間に相違が生じる可能性があるからです。
一般に新しいページが視覚的に十分に異なっていたり
概念的に新しいページと感じられている場合
それが技術的に新しいページであるかどうかにもかかわらず
新しいページとして認識されることが確認されています。
このことは例えばオーバーレイとかフィルタリングとか相当などの
一般的な製品検索や探索の要素を
そのウェブサイトがどのように扱うべきかということに影響をします。
例えばユーザーがリンクをクリックすると
表示の70%が新しいものに変わる場合
技術的には同じページであっても新しい表示が読み込まれただけで
ほとんどの人がこれを新しいページと認識します。
いわゆるSPAと結構似た話ですね。
あとオーバーレイとかモーダルで
画面全体をガッと覆うようなものも
一応新しいページとユーザーを認識する可能性もあるよということかなと思います。
一応1個2分40秒の動画が貼られていまして
06:00
その体験の悪さというところの一応例を出しているんですけど
さすがに動画なので見えないというか
このまま喋るにはきついものがあるので
後ほどまたリンク貼るので見てみてください。
一応この動画に関して補足情報が下に載っているのでそれも読みますね。
ウォールマートではユーザーの戻るボタンへの期待に応えられないと言っています。
ユーザーは商品リストから商品ページまたレビューのサブページという経路ですね。
ページ内の戻るリンクをタップしていましたと。
するとレビューのサブページから商品ページに戻ってしまいました。
レビューページに戻るかと思ったらサブページから商品ページに戻ってしまったということですね。
1個飛んでしまったと。
その後画面の端をスワイプして商品一覧に戻ると
再びレビューのサブページに戻ってしまいました。
なるほどね。
確かにスマホでスワイプをするとそれも戻るような体験をすると思いがちですけど
スワイプをしたところでまさかのサブページに戻ってしまった。
これ多分ヒストリーですね。
ヒストリーAPIの経路を辿ってそこに戻ったということだと思います。
そこでページ内の戻るリンクをもう一度タップして製品ページに戻りました。
今度は商品一覧に戻ろうとしたことを忘れてしまいクロスセールを見てしまったのです。
このようにユーザーの戻るボタンへの期待に応えられないとユーザーは大きな混乱に陥り
未来の目的から外れてしまう可能性があります。
確かに僕もこんな体験をしてしまうとこのサイトは微妙で
僕もこのサイトで商品を買わない可能性がありますね。
一応本当に欲しいものがあったら何とか頑張って買うでしょうけど。
あとはユーザーが戻るボタンをタップするという状況やシチュエーションで戻るのか
ちゃんと想像力を働かせてUXを考えないといけないなとは思います。
もちろん皆さん考えていたと思うんですけど
意外とシステムとかを知っているとかITのリテラシーがある僕らからすると
その辺が弱いユーザーの想像ってかなり難しいんですよね実はね。
というのがあるので。
頑張って想像はするけどなかなかねというのもありますが。
では戻りますね。
ユーザーがウェブサイトのセキュリティについて技術的な理解をほとんどせず直感で判断するのと同じように
詳細はこちらで一応記事のリンクを貼られてますね。
新しいビューが技術的に新しいウェブページであるか既存のページの要素を拡張しただけであるかという
しばしば任意でかつ微細な区別にほとんど理解を示しません。
ブラウザの戻るボタンはユーザーが以前訪れたURLに戻りますが
そのURLは必ずしもユーザーが以前訪れたページと認識したものと同じではありません。
そのためユーザーはある要素が新しいウェブページであるか
同じページにある少し変わった要素であるかを判断する際
09:01
その要素のビジュアルだったり文脈だったりおよび以前のサイトの経験を頼りにすることが多いのです。
ブラウザの戻るボタンでどこに戻るかを決めるのはこの無意識の瞬時の判断なので続いています。
まあ経験則でここに戻るよねみたいなのは確かにあるかもしれないですね。
続いていきましょう。
本題かなここは。
戻るボタンのUXで最も一般的な4つの落とし穴ですね。
デザインパターンも4つだからこの辺がそろそろリンクしてくるのかなと思いますけど
ブラウザの戻るボタンで前のページに戻れないなど
ユーザーの期待を裏切るような実装が最も多く見られるウェブサイトの4つの要素について以下に説明していきます。
4つですけど1つはオーバーレイとライトボックスですね。
2つ目がフィルタリングと相当で3つ目はアコーディオンとチェックアウトですね。
4つ目商品ページが商品リストに戻るってやつですね。
冒頭にあった知見のやつお話だと思いますけど。
一応括弧書きしてあってUXデザインのプロセスとワークフローの紹介では
UXデザイナーがどのようにユーザーの期待を判断しそれに応えていくかというのを説明しています。
そういうUXデザインのプロセスとワークフローという記事も貼られていますよということでした。
直接的に僕らがデザインするわけではないですけどこの辺はやっぱり知っておきたいとあるし
特に僕みたいなフロントエンドエンジニアとしてはUXとかUIの話は割と密接に関わることが多いので
こういうのはやっぱり気になるし
デザインしないとか仕事で直接手をかすなにしても知っておくのはいいと思うので
この辺ちょっと後で読んでみようかなと思いますし
もし読んで面白そうだったら明日読もうかなと思います。
今言った4つのパターンの1つ1つ説明があるので1つずつ読んでいきましょうと思います。
1つ目オーバーレイ&ライトボックスですね。
37%のサイトがこれを実装していませんというところです。
また動画ですね。21秒の動画があって今回はNikeですね。
ちょっと見れないのでここは飛ばします。
どういうところが良くないかという説明があるのでそこから入ります。
Nikeではユーザーはイメージギャラリーオーバーレイで
高品質画像を見ることができます。
しかし戻るボタンをクリックしてもユーザーは商品ページに戻らず
前のページ、この場合は商品リストに移動してしまいます。
これでは戻るボタンがどのように機能するかというユーザーに期待に応えられませんよねと言っていますね。
オーバーレイで表示がされていてそこで戻るというボタンを押すと
普通かどうかわからないですけど僕だったらとりあえずオーバーレイを閉じるんだろうなと思ったんですけど
このNikeのサイトではオーバーレイが閉じるのではなくて
商品ページじゃなく前のページにリストに戻ってしまうらしいですね。
これは体験確かによろしくないですね。
じゃなければ単純にボタンの文言を変えるというか
そもそもオーバーレイで戻るボタンを設置する意味がわからないので
閉じるボタンにしてくれという感じですね。
12:01
はい入りましょう。本文に入ります。
オーバーレイとライトボックスというのは前のページの上に新しいページが表示されるように設計されています。
したがってユーザーがこれらを別のページと認識し
ブラウザの戻るボタンで元のページに戻ることを期待するのはもちろん当然のことでしょう。
しかしテストではユーザーがブラウザの戻るボタンをクリックしても
オーバーレイは閉じずオーバーレイされたページを遥かに超えて戻ってくることがほとんどでした。
このように戻るをクリックするとオーバーレイが終了するというユーザーの期待は
デスクトップとモバイルの両サイトであらゆるタイプのオーバーレイで観察されました。
例えばニュースレターの登録リクエストとかイメージギャラリーのオーバーレイとか
ライブチャットのオファーなどなどですね。
したがってユーザーは戻るをクリックすると
常にオーバーレイから抜け出しオーバーレイの上にあるページ
前のページではないところに戻る必要があります。
オーバーレイを終了するためにユーザーが戻るボタンを使用する可能性は
サイトが提供する閉じる要素
例えばオーバーレイを終了するための×みたいなボタンが
どれだけ目立つかに比例して変化することに注目する必要があります。
×があったほうが分かりやすいしそれがどこまで目立つかというのはありますよね。
非常に目立つ閉じる要素というのは目立たない閉じる要素に比べて
ユーザーがより頻繁に使用すると考えられるため
オーバーレイが非常に目立つ閉じる要素を持つ場合
戻るボタンへの負荷が軽減されます。
もちろん目立つ閉じる要素が提供されていても
戻るをクリックするとユーザーはそのオーバーレイから退出するはずです。
はい。
というので戻るボタンで
確かに戻るボタンとしては機能してますけど
期待する動作ではないというのはよろしくないなということですね。
でも普通のオーバーレイとかモーダルで
配置されている画面下の方にあるボタンで
戻るではなくて普通に閉じるだと思いますけどね。
はい。
では続いていきましょうか。
また別の、今度は画像ですね。
これはどこのサイトかな。
アンダーアーマーですね次は。
アンダーアーマーのウェブサイトかなこれは。
アプリっぽいな。アンドロイド画面なので。
については戻るボタンの次の説明ですね。
どうしたらいいかわかんないよというところです。
戻るボタン、それでパーカーを探すセクション。
商品リストにわざわざ戻ってしまうんです。
このユーザーは今パーカーを
アンドロイドでパーカーの画像を表示してます。
画像を詳しく見たいのでタップしたっぽいですね。
オーバーレイで画像が出てて横スクロールで
商品の詳細画像が見れるようなUIになってますね。
戻るボタンが
使い方がよくわからないし、閉じ方もよくわからない。
確かに閉じるボタンっぽいものはよく見えてこないし。
ガツで戻るボタンを押すとオーバーレイが閉じずに
商品リストに戻ってしまったという感じですね。
15:00
あるユーザーが戻るボタンをタップして
画像ギャラリーのオーバーレイを終了しようとしましたが
それが最初の画像ですね。
代わりに商品リストに戻されました。
サイトが提供する戻るリンクというのは
実際にはアプリをインストールする広告になってました。
なるほどね。
確かに画像のトップにありますけど
これWebでアクセスしてるからアプリではないので
アプリにインストールしてくださいねみたいなのが
画面のちょっとの幅、領域を確保してて
そこに本来戻るとか閉じる的なリンクというのが
置かれているんですけど
隠れてて見えてないよというので
使い方がわかんないという風になったそうですね。
それは確かに体験よろしくないですねこれは。
はいはいはい。
なるほどです。
で、本文に戻りますね。
モバイルテストでは
サイトが提供する閉じる要素を使用して
オーバーレイを閉じることがより困難であることが
観察されましたと。
多くの場合、そのヒットエリアの問題が原因で
Xとか×が画面の端の近くに配置されていたり
インストールアプリ広告が閉じる要素を追ったりしますと。
インストールアプリ広告を目立たなくするか
完全に避けるかの記事というのが
別で貼られていますので
その辺は見てもらいたいんじゃないかなというところでした。
このようにモバイルユーザーはデスクトップユーザーと比較して
オーバーレイを閉じるために
戻るボタンを使用する可能性が高く
戻るをタップした時に
オーバーレイから抜けるという期待値をサポートすることが
より重要になりますよねと言っています。
はい。
あともう一個気になったのは
やっぱりスマホとかモバイルだと
やっぱり
人間の手の構造的に
親指ってやっぱりなかなか
画面の上に行くのって難しいんですよね。
いくらその画面が
手が大きかったりもしくは
スマホのモバイルが小さかったとしても
手の構造的に人間が
スマホを持つ手っていうのは
親指が画面の下に行く方がやっぱり
押しやすいので
そういう挙動的なところとか
ボタンっていうのをなるべく
画面の下に配置することが結構多いですね。
で、肝心の閉じたり
戻りたい時に
オーバーレイの上の方に
配置されたりすると
結局それは画面の下にあるボタンを
押すのもそれは確かに正しいと思うので
そこのボタンの体験とか挙動が違ったら
余計にイライラするよなっていうのは
確かにそうなって思いました。
はい。
で、NikeだったりUnder Armourだったりする
サイトは今そういう風な
挙動になっているっていうのが
よろしくないねってことですね。
かといってブラウザーバックするかっていうと
ブラウザーバックも当たり前ですけど
絶対画面一個前に戻ってしまうので
どうなんだろうって感じはしますね。
かといってヒストリーAPIでうまいこと制御できるかは
ちょっとあれですけども、そういうところを考えて
サイトの実装をしなきゃいけないな
というのは感じはしましたね。
続いていきましょう。
でも時間が結構迫ってきているので
多分今日はこの次のセクションですね。
フィルタリングとソーティングですね。
フィルターとソート機能のところの説明で
終わりになるかなと思います。
ではではいきましょう。
はいきました。
次はですね、画像をまた貼られてますけど
18:00
次の画像はAmazonの画像ですね。
今度はGoodのチェックがついてますね。
Amazonのユーザーが
3つのフィルターを適用した後
戻るをタップしたところですね。
そのまま画像の1枚目ですけど
したところ最後に適用されたフィルターが削除され
2つのフィルターが適用されていることが表示されます。
これは2枚目です。
フィルターを適用した後に戻るをタップすると
適用したフィルターが解除され始めます。
これは良い体験なんじゃないですかね。
確かに。
僕も同じことします。
フィルターをいくつか付けて
原作したのと
それで戻るをすると
フィルター前の原作の結果が出る
というのは確かに期待通りだと思います。
今Amazonはそうなっているので
そこはいいなと思いました。
フィルタリングや相当というのは
一般的に新しい商品リストとなるため
ユーザーはそれぞれのアクションを
別のビューとして認識します。
フィルタリングや相当によって
ページが再読み込みされていない状態でも
商品リストとフィルタリングに関する
大規模なユーザビリティ調査において
ユーザーはフィルタリングの
各反復を新しいビューとして
認識していることが分かりました。
おそらくユーザー主導のアクションであり
各反復が新しい結果セットを
生成するためでしょうと言っています。
これはユーザーが新しいページとそうでないものを
技術的に区別するのではなく
新しいページと認識したものを
頼りにしていることを強調しています。
したがってカテゴリーと
検索結果のフィルタリングと相当というのは
ユーザーが
ブラウザの戻るボタンを使っても
各リストの状態をフリックして戻ることを
サポートし相当の方向も
以前に設定した相当の方向に
変更されるべきです。
見た目上はそんなに変わらなくて
フィルタリングされたり順番が変わったというだけ
かもしれないですけど
裏側的には結構大きな変化があるので
そこはしっかり
画面遷移したと同じようなものとして
新しいビューとして認識しておく
ということが結構大事です。
続いてもう一個の画像です。
次は別の
サイトの例で今度は
BATケースですね。
戻るボタンがあるんですけど
戻るかなと思いながらサイトを
タップしています。JBLか
今回のサイトですね。JBLの
あるユーザーはヘッドホンの
商品リストの価格の安いものから
高いものへと相当していました。
商品ページで商品を探した後
もっと見てみたいと思って
商品一覧に戻ろうとタップしました。
しかし相当方向が変わったのはバックエンドだけで
相当方向は
安いところから高いところ
のまんまだったそうです。
彼女はこう言いました。まだ動作していると
書いてあるのにフィルターもしか
相当方向が取れてしまったと。
相当順になっていない。見ていたものが
見つからないというところで
このような技術的なバグは
テスト中にかなり多く見られ
商品リストの相当に関してユーザーは
不安を抱えました。
しかし
モドルをタップするとフィルターが
外れたり相当方向が変わったりすることが
テスト中に何度もありましたけど
それがフロントエンドでユーザーに
伝わっていないことは重要なポイントです。
21:01
つまりモドルボタンをタップすると
現実にはフィルターが削除されたり
相当方向が変更されたりしますが
ユーザーには削除されたフィルターが
適用されたまま表示されたり
表示された相当方向が
商品リストの実際の相当順と一致しないため
何も変わっていないように見えるんですよ
これは技術的な不才な気がしますね。
技術的なというのは
ツールとかではなく実装という意味です。
これは明らかにユーザーの
混乱を抱きます。ユーザーはモドルボタンの
クリックやタップが成功したかどうか
自分の行動とインターフェースに
表示されているものが一致しない場合
疑問に思うでしょう。
フィルタリングや相当が全く別のインターフェースにある場合
モバイルサイトは結構一般的ですけど
インターフェース内で
モドルをタップすると終了リンクと
同じように動作することが重要です。
つまりオーバーレイを終了するのと同じですよね
ということですね。はいはい。それもそうです。
つまりユーザーはインターフェース内で
モドルボタンをタップした後
フィルタリングまたは相当インターフェースを
開く直前に見ていたビューに戻る必要があります。
と言っています。はい。
もうなんか
戻るっていうやっぱり
文言とかテキストが
もうよろしくない気がしています。
ちゃんと戻るっていう挙動するところだけに
戻るをして
フィルターを解除するとか
相当を解除するとか
モータリングやオーバーレイを
閉じるとかっていうような
ちょっと長いかもしれない
閉じるとか解除みたいな
ワードを使う方がせめてね
直接的でいいんじゃないのって思ったりしますね。
美しさの観点からすると
やっぱり文字数短く同じように
ボタンの幅とかを
同じサイズにしたいっていうのはもちろんあるかもしれないですけど
長くなってもいいので
ちゃんと
UX的にわかりやすい名前にするのが
正解なんじゃないかなと
僕は思い始めましたね。
はい、というところです。
では、このままちょっと読んでいきたいんですが
すいません
30分来てしまったので
今日は
ここで終了にしようかな
と言っても朝
遅れてしまったんですよね。
ちょっと
重度半端ではありますが
一旦ここで区切ってまた明日から
この続きを読んでいきたいと思います。
明日はアコーディオンチェックアウトと
Returning to the product list
from the product page
ですね。
商品ページから商品リストに戻ってしまったよみたいな
体験の話を
入っていこうかなと思いますので
よろしくお願いします。
では、今日の朝方は
一旦以上にしたいかなと思います。
はい、ご参加ありがとうございます。
いつも本当にありがとうございます。
はい、じゃあ今日も土曜日ですね。
のんびり休んでいただければなと思います。
では、終了したいと思います。
お疲れ様でした。
