ビジュアルファシリテーターの阿呆な研究

Read Article

ECサイトはスマホ化すべきか?(2)スマホ化優先すべき画面を、UXから考える


Browser / Johan Larsson

ECサイトをスマホ化すべきか、という疑問に対し、ユーザーの使いやすさから考えると当然「ECサイトはスマホ化すべき」といえる。
しかし、現実、スマホ化には金と工数(構築工数&運用工数)が追加で必要になるわけで。「金と工数」と「ユーザーが使いやすくなること」の間のバランスをとっていくのが今は大事なんじゃないかと思っている。では、「金と工数」と「ユーザーが使いやすくなること」のバランスはどうやってとればいいのか?

「ユーザーが使いやすくなること」の優先順位

ここ1年で、私はECサイトのスマホ担当webディレクターとして、サービス開発〜PDCAに基づいたサイトのチューニングや、販促運用まで一連の流れをまわしてみるという機会を得ることができた。その中で最も大事かつ大変だと感じたのが、「金と工数」と「ユーザーが使いやすくなること」のバランスを決めることだった。
このバランスをとるために、要件定義の段階で以下フローをふんで整理してみた
※PCサイトをスマホ化する前提だけど、モバイルサイトをスマホ化するときも同じ手順でできると思う。

1:PCサイトをスマホで見たとき、突破率ボトルネックになっている画面を見つける
2:1であらいだしたもので、ベストな改善案をいくつか考えてみる。
3:画面の各要素×改善案をだした時点で、以下UXのハニカム構造要素のうち、何を解決できるかを考える。

1:PCサイトをスマホで見たとき、突破率ボトルネックになっている画面を見つける

PCサイトのトラフィックを見て、突破率が悪いページを探す。そのページでPCでは見やすいがスマホで見たときに「つかいづれーーー」と思った要素をあらいだす。たぶんあなたが「使いづらい」と要素が、スマホでの突破率を下げてる要因である。

■実例
例:ライトボックスの写真
PCサイトでは便利なライトボックス。ライトボックスで写真をだしたり、次画面への遷移の補助として使っている箇所もあると思う。でもスマホでみるとものすんごいみづらい。スマホでライトボックスをだすと、画面の一部がブラックアウト。スマホだと意味不明な位置にライトボックスでてくることが多々ある・・・

例:フォーム
PCサイトをみていると、一回拡大してフォーム内容を読み、小さい小さいラジオボタンやフォームに入力をしていく。これがめんどい。次の項目を読むためにまたいったん拡大して、次の項目にあったおおきさに拡大してまた入力・・・をくりかえすから。ただでさえおしづらいのに、labelをいれてないラジオボタンやチェックボックスは、押せる場所が小さすぎて泣きたくなる。まちがって違う物をおしてしまったときには心がおれる。

2:1であらいだしたもので、ベストな改善案をいくつか考えてみる。

ボトルネックになってる要素の改善策を考える。1このボトルネック要素について複数個考えることを推奨。

例:ライトボックスの写真:ライトボックスになっている要素の写真、同一画面内でのフリックするスライドとしてみる。もしくはそもそも削除するとか。
例:フォーム:拡大/縮小をしなくてもいいサイズのフォームにつくりなおす

3:画面の各要素×改善案をだした時点で、以下UXのハニカム構造要素のうち、何を解決できるかを考える。


User Experience diagram / Paul Veugen

「UX(ユーザーエクスペリエンス)」とは、以下の定義らしい。

「製品やサービスを利用する過程(の品質)を重視し、ユーザーが真にやりたいことを「楽しく」「面白く」「心地よく」行える点を、機能や結果、あるいは使いやすさとは別の“提供価値”として考えるコンセプト。
つまらぬいらいらや面倒なしに、顧客のニーズを正確に満たすことであり、次に所有する喜び、使用する喜びとなる製品を生産するといった簡単、簡潔なことである。」
「UXとは何ぞや? UXを高める武器を手に入れよう!」より引用

そのUXをわかりやすく分解したのが「UXのハニカム構造」。UXを以下具体的な要素に分類できる、としたフレームワークだ。このフレームワークをもとに、要素を整理する。
・Fidable 探しやすさ
・Desireble 好ましさ
・Accessible アクセスしやすさ
・Valueble 価値がある
・Credible 信頼できる
・Usable 使いやすさ

例:ライトボックスの写真
・Fidable 探しやすい→ライトボックスにより謎の位置に表示されていたが、謎の位置に表示することがなくなるので、探しやすくなる。
・Credible 信頼できる→不具合なく動作するようになる。
・Usable 使いやすい→フリックするスライドはスマホで一般的なUIのため、探しやすくなる。

例:フォーム
・Fidable 探しやすい→各入力要素が探しやすくなる。
・Accessible アクセスしやすさ→拡大縮小をせずとも、フォーム要素にたどりつける
・Usable 使いやすい→フォーム要素が指で押しやすい大きさとなるため、押しやすくなる

など。あとは、これらを全部あらいだし、より「スマホで突破率が悪い画面」の「UXのハニカム構造」の各要素をより多く解決しそうな施策を選び出す。よりUXが改善しそうな施策には工数を投入すべきだし、UXの改善面があまり多くなさそうなものはあとまわし・・・でいいと思う。金も工数も限られてますから。

個人的には、フォーム画面はどのECサイトにも共通して、スマホ化対応の優先順位は高いのではないかと思う。フォーム画面においては販売してる商品の価値とかそんなもんはいっさい関係なく、ユーザーは必ず名前やらメアドやら性別やら住所やら電話番号やら決済情報やら、とにかくたくさん入力する画面ゆえ、UXの改善がそのまま突破率アップ=購入につながるから。

実際自社某サイトでフォームを最適化させてみたら、突破率は157%〜165%くらい上がった。そのうえ、スマホもPCと同程度の突破率を維持できるようになった。これには、実は実装した私自身けっこうびびった。過去どんなにガラケーのフォームを見やすくしても、PCとガラケーサイトで同じ内容を入力させた場合の突破率が3:2程度だった=スマホも同程度だろうなーと思ってたからだ。嬉しい誤算。労力かけるのにおしくないはず!

———-
UXとUIの考え方は、要件定義と画面設計の整理にすこぶる便利なので、勉強もっとしようと思う今日このごろでした。

URL :
TRACKBACK URL :

Leave a Reply

*
*
* (公開されません)

Facebookでコメント

Return Top