ニッセンショッピングアプリのホスピタリティあふれるUI&チュートリアル

Pocket

ニッセンはカタログショッピングのイメージが強い企業だが、ECへの取り組は早く、2000年から行っていてECサイトのデザインもユーザービリティも相当洗練されている。

ニッセンのショッピングアプリもWEB同様、全体的にとてもよく設計されれており、使いづらさは感じさせない。

そして特に感じたのが、ユーザーの疑問に先回りするような人間味のあるUIと、チュートリアルが充実しているということに気が付いた。

今回はニッセンのショッピングアプリを、上記の点に特にフォーカスしてみていきたいと思う。

プッシュ通知の許可

昨今、アプリをインストールして起動すると、まずプッシュ通知の許可を求めるインフォメーションが表示されることが多い。

下図を見ていただきたい。

スマホのヘビーユーザーならある程度見慣れた画面で特になにも思わないかもしれないが、ビギナーにはどうだろうか・・・

img1

同じく、カタログ通販でおなじみのベルメゾンと比較してみた。

ベルメゾンはアプリを起動するとまず利用規約が表示され、そこにプッシュ通知許可のインフォメーションが表示される。

プッシュ通知についてすでに知っている人であれば、即いるいらないが判断ができると思うが、ビギナーだったらこの簡素な文章を読むだけで判断できるだろうか?

ユーザーにとって有用なことが伝わるだろうか? テキスト・アイコン・バッジ・設定、知らない言葉の羅列ですこし怖さすら感じるのではないだろうか?

それに対してニッセンである。ニッセンも同じくプッシュ通知の許可を求めるのだが、その前にちゃんとデザインされた画像と文字で分かりやすく「お得な情報を配信するよ」と案内していて、そのうえで許可を求める画面に移るように設計されている。

この画面一枚有ると無いとでは許可してくれる人の割合はだいぶ違うのでないだろうか。

チュートリアル

それではいわゆるチュートリアルを見ていこう、ニッセンのアプリでは、大きく3つのチュートリアルがある。

  • アプリ全体のチュートリアル (大枠)
  • ホーム画面のチュートリアル (中枠)
  • 機能のチュートリアル (小枠)

 

アプリ全体のチュートリアル

img2

アプリ全体のチュートリアルは4枚構成で、プッシュ通知のONと、主要機能マイ検索(検索条件保存&ホームに表示機能)があるということを端的に案内している。

このマイ検索は前述した箇条書き3つめ「機能のチュートリアル」で、個別にチュートリアルがあるので、この全体のチュートリアルの中では簡単な紹介のみにしている。

ホーム画面のチュートリアル

img3

ホーム画面のチュートリアルは、他のアプリでもよく見る画面上の主要なボタンを吹き出しで説明する形状で、3か所のボタンについてを説明している。表示順は左から。

横スワイプ機能の説明

スマホのUIでは横スライドメニューは主流だが、パッと見た目で操作に迷いそうなところなので、きちんと説明を入れている。

ログインの説明

お気に入りした商品が、デバイスをまたいで確認できると機能を説明。すでに別のデバイスでアカウントを持っているユーザーにとってはとても有用な機能で、いろいろ操作するまえにまず行ってほしい機能だ。

商品検索

初めてのユーザーが最初に行うとおもわれる商品検索の方法を説明している。

以上の3点だ。

当然画面上にはほかにもたくさんボタンはあるが、おおむねこの点を抑えれば操作に困らないだろうというとところを、過不足なくちょうどよいレベルで説明していると感じる。

 機能のチュートリアル

機能のチュートリアルは前述したとおりマイ検索という機能についての案内で、概要面操作方法面二つの視点から案内している。

概要面

img4

横スライドメニューにある、マイ検索はこのアプリの主要機能、検索条件保存しホームに表示できる機能で、上図は検索条件が保存されていないデフォルトの状態だ。

御覧のように実際にユーザーが使った場面と想定し、その場面をイラストを交え説明しており、とても分かりやすい。

そして、しっかりページの下部に商品検索へのボタンを配置しており、よどみなく次の操作に誘導できている。

 操作方法面

img5

実際に商品検索を行い、商品の一覧画面までドリルダウンしてきたときに上記の画面が表示される。

上図左は、レディースファッション>コート>ダウン とドリルダウンした状態だ。この時点で検索条件の保存が可能になるので、保存ボタンとその説明が表示される。

このように、使い方の概要面と操作方法面の2つの面からしっかり説明してくれいるので迷うことなくこの機能を使うことができる。

まとめ

一般的にチュートリアルというと最初にインストールしたときに全体的な説明がささっと行われるもので、このニッセンのアプリはやや過剰な案内のように思われるかもしれない。

しかし、使っていて思うことは、”説明”というものはその機能を使うときに説明された方がより頭に入りやすいということだ。

極端にいうと、最初に一部の機能の細かい操作方法を説明されても、頭に入るわけがない。

ニッセンのショッピングアプリは、説明するべきタイミングで、最低限の要素を、端的に、ユーザーにとってのメリットがわかりやすく案内できている。

インターネットのコミュニケーションは人が介在できないので、わかりづらいかな~と感じつつも、どうしても”他社でもやってるよくある形”に収まりがちだ。

しかし、ニッセンのショッピングアプリの案内はわかりづらさは全く感じず、なるほど対面の接客だったら普通こういうコミュニケーションになるよな~と何度も感じた。

皆様も、もう一歩突っ込んでユーザビリティを考えるのにぜひ参考にしてみていただきたい。

 

Pocket

無料ebook:ミナクル式スマホサイト改善
スマホECの売上を2割アップする!
スマホサイト改善ちょっとしたコツ
76連発レポート!

業界によっては6割以上がスマホからのアクセスになりましたが、「実際にどうサイトを改善したらいいかわからない」という声をたくさん頂きます。

本PDFは、弊社のお客様に改善提案する中で生まれたノウハウを体系化した全100ページ以上にわたる資料です。

  • 自社のサイトは大丈夫だろうか
  • スマホサイト改善と言っても実際どうしたらいいか分からない
  • スマホでの売上をアップしたい

などとお考えの方はぜひご覧ください。

ebook無料でダウンロードする

【弊社実績一例】



ヤマハ発動機株式会社様/積水化学工業株式会社様/株式会社パルコ様/株式会社エポスカード様/アディダス ジャパン株式会社様/株式会社フジゼロックス様/シュウウエムラ様/ダノンジャパン株式会社様/株式会社マイナビ様/第一三共ヘルスケア株式会社様/株式会社サイバーエージェント様/株式会社船井総合研究所様

コメントをどうぞ

*