最高のモバイルユーザー体験を提供するために必要なこと from #SMX Munich 2016

[レベル: 初〜中級]

今週は、3月に参加したSMX Munich 2016のセッションをブログで連日レポートしています。
今日は、昨日に続いてモバイルセッションを紹介します。

セッションスピーカーは、MobileMoxieのCindy Krum（シンディ・クラム）氏です。
Krum氏は、モバイルのユーザー体験を高める施策について語りました。

UXとは何か？

製品のデザインとエクスペリエンスのデザインは異なる。マルチプラットフォームとは、デバイス、OS、ブラウザ／アプリが異なることを意味する。それぞれを考えることは、デザイナーの仕事。我々の仕事はデザインを考えることではない。

モバイルユーザーは、すぐに、シームレスに求めているのもが手に入ることを期待している。モバイルのほうがエラーに対して我慢しない傾向にあり、PCよりも直帰率が高い。表示に3秒以上かかると離脱する。

優れたモバイルユーザー体験とは、

速い表示
PageSpeed Insights や WebPageTest でスピードや問題点を検証する
すぐに完了するフォーム
たとえば、郵便番号で都道府県が自動入力されるようにするとCVRが上がる。一般的なフォーム項目を一括で自動入力する autocomplete属性を使うのもいい。
すばやく完了できる購入
Amazonの1-Click注文は、次の点で素晴らしい。
- リピータやログインしているユーザーには便利
- 面倒臭さを減らす（特にモバイルでは指での入力が大変）
- 衝動買いを誘発する
Amazonログイン＆ペイメントやPayPalを使うとより速くなる。これからは、Android PayやApple Payもいいかもしれない。

構造化データを実装すると、検索結果で見やすく表示される。
kathleen edwards songsのクエリで表示される構造化データの検索結果

viewportを設定する。viewportを設定していないと文字が小さくなり読めない。

フォントサイズを設定する。デバイス（スクリーンサイズ）に応じて可変にする。

インタースティシャルを使わない。Googleの調査では、インタースティシャルはUXを直帰を増加させる。

アプリのダウンロードにはインタースティシャルではなく、インストールバナーを使う。インストールバナーのほうがモバイルフレンドリー。インタースティシャルを使うと「スマホ対応」のラベルが表示されなくなる。

インタースティシャルの代替策:

iOSでは、Smart App Banners をインストールバナーとして使える。
Chromeでは、App Install Banners をインストールバナーとして使える。

Bit.ly のリダイレクトを利用し、アプリ・Android・iOS・PCに振り分ける。
[鈴木注: Bit.lyをエンタープライズバージョンにアップグレードすると、アプリのディープリンクへのリダイレクトを設定できるらしい。]

ただし、ユーザーと検索エンジンをだますようなことはしてはいけない。

すべてのプラットフォームで動くようにする。

モバイルのメールを使いやすくする。OSやメールアプリによって、メールのプレビューが異なってくる。CSSで設定できる。

ソーシャルメディアもウェブ版とアプリ版では表示が異なってくることがある。

エラーメッセージはわかりやすくする。専門的な説明ではユーザーは理解できない。
アプリが何かを実行するときは、必ずユーザーの許可を求めるようにする。
メッセージはそのユーザーの言語で表示する。Chromeでは設定できる。
ウェブでもアプリでも、位置情報を共有するときにも許可を求めるようにする。

場所に応じたランディングページを用意する。サイトのUXに影響するし、Googleの検索結果のUXにも影響する。

パーソナライズしたUXを提供する。たとえば、そのユーザーの名前を表示する。

トラストマークを設置する。トラストマークの設置でフォームの完了率が向上した事例がある。

HTTPSを実装する。購入プロセスはすべてHTTPSにする。HTTPSじゃないとCVRが下がる。不適切な証明書を使わないように注意する。

以上です。

昨日のセッションレポートと同じくモバイルがテーマでしたが、今日のほうがより具体的でしたね。
昨日は全体的な考え方、今日は個々の施策といった感じです。

Krum氏が使用したスライドには、良い例・悪い例がスクリーンショットでたくさん登場しました。
このレポート記事は文字だけだったのでイメージがわかないところがあったかもしれません。
それでも、モバイルのユーザー体験を高めるためのヒントになれば幸いです。