3 Things Every Ecommerce Business Should User Test（Usabilla.com）

こちらの記事では、ECサイトのコンバージョン率や売上をアップさせるために、サイトオーナーが特に確認しておくべき3つのポイントが紹介されています。今回はポイントその3、「重要事項説明」についての内容です。

＜以下、翻訳して引用＞

3. 重要事項説明の設置

あなたのサイトの訪問者は、とある情報を求めています。それは買い物客の不安をしずめ、商品について納得した上で購入することを助けてくれます。

こちらは、あなたのサイトで簡単に見つけられるようにしておくべき情報のリストです。

・ショッピング運営ポリシー
・返品交換ポリシー
・よくある質問
・お問い合わせ窓口情報（電話番号を含む）
・プライバシーポリシー

もしあなたのサイトでこれらの情報がナビゲーションから外されてしまっているのなら、見つけやすくなるように、今すぐ対応すべきです。

多くの顧客は、「配送情報」や「返品ポリシー」についての情報が明示されていると、より気持ちよく買い物ができるものです。そのため、最低限こうした情報は見つけやすくしておきましょう。

消費者は、注文を失敗したのかと心配にならないよう、商品が届くまでにどのくらい待てばよいのか知りたいと思っています。また届いた商品が広告と違っていたり、ニーズと合わなかったりしたときでも、簡単に返品ができるかどうか確認しておきたいのです。

もしあなたがこうした2つの情報を明示していない場合、顧客をサイトから遠ざけ、そんな心配をする必要のない実店舗に行くように追いやっているようなものです。

また、「お問い合わせ情報」を見つけやすくしておくことも大事です。顧客が注文方法や商品について困ったことがあったときに、助けてくれる人がいるということがわかります。

e-consultancyの調査によると、「お問い合わせ情報」をはっきり掲載しているサイトを信頼すると回答した人が、【46%】以上に上るとのことです。

（画像参照：eConsultancy）

1つ、先ほどのリストに含めていなかった重要な情報が、信頼性バッジです。

信頼性バッジとは、"認証マーク"や"TRUSTe"のようなもので、コンバージョンを促進します。こうしたバッジは、あなたのサイトが安全に取引できることを伝えてくれます。それにより、顧客はクレジットカード情報や配送先情報を安心して入力できるのです。

"House of Kids"というサイトで行われたABテストの例では、サイトに信頼性バッジを設置すると、コンバージョン率が【32%】もアップしました！

こちらが信頼性バッジを設置した際のイメージです。バッジがはっきりと掲載されていることがわかりますね。

（画像参照：Visual Website Optimizer）

"House of Kids"では、UXの改善とコンバージョン率の向上を狙って、トップバナー内に信頼性バッジを表示しています。

そしてこちらが結果です。

（画像参照：Visual Website Optimizer）

信頼性バッジを設置した結果、サイトのコンバージョンは【32.3%】改善しました！

こうした結果は、珍しいものではありません。もしあなたが商品を見せるためのスペースを消費してしまうことを心配して信頼性バッジを使うかどうか迷っているのなら、ぜひ"House of Kids"のようにABテストをしてみてください。

またユーザーテストを行う際は、以下のような質問をするのもよいでしょう。

・信頼性バッジに気付きましたか？
・信頼性バッジがあることで、気持ちよく購入することができましたか？

配送情報や返品ポリシーなどの重要事項、お問い合わせ情報、信頼性バッジなどを明示すれば、余分な費用をかけることなく、コンバージョン率を改善することが可能です。これは素敵ですね！

＜翻訳引用ここまで＞

補足と感想

今回出てきたポイントは、「配送情報」「返品ポリシー」「お問い合わせ」「信頼性を示すバッジ」の4つです。

確かに自分がネットで買い物をするときも、こうした情報を確認することが多いです。同じ商品が同じような価格で売られている場合は、もちろん早く届く可能性が高いショップで購入しますし、また旅行やチケットの申込みの際は、確かにキャンセルポリシーなどを入念にチェックしていますね。

ただ少し残念なのは、こうした情報をまとめて「買い物ガイド」と表記しているサイトが多いことです。これだと、初めてネットで買い物をする人のためのガイドコンテンツのように見えてしまい、ここに配送情報や返品ポリシーが含まれていることがパッと伝わりません。

またこうした情報は、商品やメニュー、プロモーションバナーなどによって、サイドバー下部などの目立たない位置に追いやられてしまっている様子もよく見かけます。アイトラッキングの結果を見ていると、サイドバーを確認するユーザーの割合というのは意外と低く、ここには重要な情報を置くべきではないと感じています。

-----

今回ご紹介した記事ですが、特にECサイトを運営している方にとっては、サイト改善のポイントが簡潔にまとめられていて参考になったのではと思います。

ユーザーテストを適切に行うことで、コンバージョン率は必ず改善できます。

マミオンでは、今回ご紹介したポイントを踏まえた上で、ユーザーテストのコーディネートやアドバイス等をいたします。まずはリモートテスト等の低コストのものからでもよいので、ぜひトライしてみましょう！

3 Things Every Ecommerce Business Should User Test（Usabilla.com）

こちらの記事では、ECサイトのコンバージョン率や売上をアップさせるために、サイトオーナーが特に確認しておくべき3つのポイントが紹介されています。今回はポイントその2、「商品の説明」についての内容です。

＜以下、翻訳して引用＞

2.商品の説明

ECサイトは、実店舗を持つ小売と比べて不利な立場にあります。顧客は商品を触ったり、試着したりすることができません。

これはつまり、「商品の詳細説明」がとても重要だということです。彼らは画像やテキスト、動画などを通してそれらの情報を集めなければいけません。

こちらはメガネ販売サイトのWarby Parkerの例です。

このページであなたが最初に目にするのは、大きくて美しい、様々な方向から撮影された4枚の写真です。

この写真のすぐ下には、メガネのスペックが書かれています。これは自分の顔によくフィットするメガネを探している人にとって、非常に重要な情報です。彼らは実際にメガネをかけてみることはできませんが、そこにあるサイズ情報が代わりに役立ちます。

スペックの下には、実際の人間がメガネをかけた様子をマウスで様々な角度に動かしながら確認できる画像が用意されています。

さらにWarby Parkerでは、自分の顔写真をアップロードすることで、自分がメガネをかけたときにどう見えるのかバーチャルで確認することができます。

ページの最後には、レンズやフレームの技術的な説明が掲載されています。

多くの顧客はメガネの「スタイル」や「機能」に関心が高いことから、商品詳細ページにこうした情報を記載することは重要です。

もしあなたのオンラインストアが開業して間もないとしても、顧客からの問い合わせ内容からよいヒントが得られるはずです。そうした情報は、ページ内で目立つように表示しなければなりません。

商品詳細ページのレイアウトをテストしてみることは重要です。例えばこのWarby Parkerの商品詳細ページは多くの情報を掲載していますが、うまくレイアウトされているため、圧迫感やごちゃごちゃした印象を受けることがありません。

もしかしたらユーザーテストに加え、「ABテスト」や「多変量テスト」を行ってみるもの、より多くのコンバージョンを獲得するレイアウトを見つけるのに有効かもしれません。

そしてユーザーテストを行う際は、以下のポイントを特に確認すべきです。
・商品について不明な点を残していないか
・商品の写真は購入を決めるのに十分か
・購入ボタンはすぐに見つけることができるか
・他に必要な情報や、削除すべき情報はないか

商品詳細ページのユーザーテストは、その商品をカートに入れる人を増やしてくれるでしょう。前回でしっかりテストをして支払いプロセスが改善されていれば、売上アップは間違いなしですね！

＜翻訳引用ここまで＞

補足と感想

先日、私自身もネットで家電を購入する機会があったのですが、まさしくこの状況が当てはまりました。実物を確認できない分、ECサイトやメーカーサイトの商品ページを穴のあくほど見たのですが、掲載されている情報が足りないと感じました。

結局、型番でGoogle画像検索をして様々な角度からの写真を確認したり、ブログ検索で購入者の生の声を確認するなどして、やっと購入に踏み切れたのです。

ユーザーテストを行うと、とかく「使いにくくないか」「操作ミスをしていないか」という部分にフォーカスしてしまいがちです。

しかし今回の記事で述べられているように、掲載するコンテンツ自体を念入りに検証し、ユーザーの頭の中にある「不安」「不信」「悩み」などを解消していくことも、コンバージョンや売上のアップには非常に有効なアプローチです。

対面で行うユーザーテストは、そのユーザーが「どう感じているのか」「なにを考えているか」をダイレクトに知ることができる点が、大きな強みだと感じています。

次回は、「3. 重要な情報の配置」についてご紹介します。

3 Things Every Ecommerce Business Should User Test（Usabilla.com）

こちらの記事では、ECサイトのコンバージョン率や売上をアップさせるために、サイトオーナーが特に確認しておくべき3つのポイントが紹介されています。今回から3回に分けて、その内容を1つずつ翻訳し、コメントとともにご紹介していきたいと思います。（掲載元承認済み）

＜以下、翻訳して引用＞

1.支払いプロセス

あなたのECサイトにおける一連の支払いプロセスは、最も優先順位の高いところにあるべきです。支払いプロセスが素早く簡単に済ませられれば、あなたの顧客はハッピーになり、売上も上がるでしょう。あなたは「カート放棄率（カゴ落ち率）」が【66%】以上もあるということをご存知ですか？

こちらのグラフは、人々がカートを放棄してしまう14項目の理由です。

画像参照：Shopify

上記14項目のうちの8つは、適切なユーザーテストを行うことで解決することができます。
・予想外の代金がかかることがわかった
・サイトのナビゲーションが複雑すぎる
・サイトがクラッシュした
・支払いプロセスが長すぎる
・過剰なセキュリティチェック
・セキュリティの心配
・時間切れ（セッションタイムアウト）
・外国の通貨で表示されている

訪問者の声を聞き、彼らのニーズにしっかりと目を向ければ、これらの問題の多くは簡単に潰すことができます。ではユーザーテストを通して、彼らにどうやって確認すればよいのでしょうか？

私たちは彼らがクレジットカードでの支払いを拒否されることまでは防ぐことはできませんが、スムースな支払いプロセスを用意することは可能です。

根本的な問題にたどりつくために、次にあげる質問をユーザーテストの際に聞いてみましょう。
・最終的にかかる代金は、あなたが事前に予想していたものでしたか？
・このサイトは、重いと感じませんでしたか？
・支払いプロセスは長いと思いませんでしたか？
・個人情報を入力する際は安全安心だと思いましたか？
・サイトがクラッシュしたり時間切れになったりしませんでしたか？
・支払い通貨は期待していた通りでしたか？

こちらの画像は、よく最適化された支払いプロセスの例です。

クロックスの支払いページは、良い点がたくさんあります。ステップ数が書いてあったり、ライブチャットが用意されていたり。サイトの読み込みも早く、クラッシュもしませんでした。

社内でユーザビリティを確認する場合、自社の社員でテストしてしまうと、客観的な視点を持つことが難しくなります。例えば、サイトの動きが遅かった場合でも、同僚である彼は気を遣って、遅いと感じることは無かったと答えるかもしれません。

逆にあなたのサイトのユーザーや、初めてサイトを使う人たちに尋ねるようにすれば、より妥当で偏見のない意見をもらえるでしょう。これが支払いプロセスを効果的に改善するために必要な、客観的なフィードバックを得るよりよい方法なのです。

支払いプロセスのユーザビリティを改善することで、あなたはカート放棄率を下げ、コンバージョン率を上げることができます。

＜翻訳引用ここまで＞

補足と感想

今回の記事では、ショッピングカートの放棄率が【66%】と報じられていました。あらためて、かなり高い印象を受けますすね…。ちなみに2008年の別の調査でも、【59%】という数値が出ているようです。

コンバージョン率2.8%、カート放棄率59% - この平均データをどう活用するのか？（Web担当者Forum）

・コンバージョン率（総注文数/総訪問数）は2.8％
・カート放棄率は59％
・入口ページの直帰率は28％

出所：Web担当者Forum

この放棄原因のうち、ユーザーテストで簡単につぶせる項目が半分以上あるというのは、とてもわかりやすく効果を説明しているなと感じました。各項目は当たり前といえば当たり前なものなのですが、実際に回答した人がこれだけいるということは、実は多くのサイト制作者側が「対応した気になっている」だけなのかもしれません。

またユーザーテストを行う際は、社内の人間ではどうしても遠慮がちになるので、客観的な意見を聞くためには外部の人でテストすることが欠かせないという点にも、非常に強く共感しました。またサイトを作った人は、そのサイトを知り過ぎてしまっているため、どう頑張っても初心者の気持ちになるというのは難しいんですよね。

もちろん社内の人間であっても、全くやらないよりはマシです。しかし、マミオンにご依頼をいただいて実際のユーザーでテストを行った場合、その予想外の行動や発言に驚かれる方はかなり多く、最後には「やっておいて本当によかった」という声をほぼ確実にいただいています。

あなたのサイトの支払いプロセスは、こうした客観的な意見を基にして、自信を持って対応していると言えるでしょうか…？

次回は、「2. 商品の説明」についてご紹介します。

よく失敗するポイントの一つが、ユーザーが入力規則を把握していないことによるフォームへの入力エラーです。「メールアドレスは半角で」「パスワードは〇文字以内で」「住所はマンション名まで含めて」…などなど。

インターネットの利用に慣れた人の場合、そうした注意書きに気付かずに入力してエラーが出てしまっても、そのエラー説明を確認してすぐに修正することができます。一方でシニア層ユーザーの場合は、こうしたエラーに対してなかなか自分ひとりで対応することが難しく、入力エラーを起こさないための準備の重要性がより高くなってきます。

こうした注意事項の伝達不備は、なぜ起こってしまうのでしょうか？今回は、ユーザーがどこを見ているかを分析できるアイトラッキング（アイカメラ）を使って確認してみます。

入力フォームの「右側」は、こんなにも無視されている

こちらは、某ECサイトの入力フォームページです。

上の画像内で赤や黄色に色付けされた部分がユーザーよく見られたエリアを示しているのですが、ご覧のように中央列の入力フォーム自体はよく見られているものの、その右側に書かれた注意書きの列は全くと言っていいほど見られていません。

一般に、ウェブサイトを閲覧するユーザーの視線は「F字」を描くと言われており、基本的には左から右へと移動していきます。ゆえに、フォームで視線が止められてしまうと、それより先に進みにくくなってしまうのです。

こうした現象は、フォームと注意書きの間にある空白が大きいほど、その発生確率も高くなるようです。

【参考記事】
・軌跡は“F”を描く – U-Site

必要なことは、フォームの直上/直下に書こう！

「フォームの右側はほとんど見られない」ということがわかった今、ユーザーに確認してほしい注意書きはどこに書けばよいのでしょうか？

例として、『山田養蜂場』のフォームページを見てみましょう。

赤枠で囲ったように、入力の際に確認してほしい注意書きは、フォームのすぐ下に書かれています。こうすることで、フォームからフォームへ視線が移動する際に、「あっ、何か書いてあるな」とユーザーに気付いてもらいやすくなります。

書く位置はフォームのすぐ上でも構いませんが、特に最初のフォームの上に書いた場合は見過ごされてしまう可能性があるので気をつけましょう。要は、「視線が必ず通る道に置く」のがベターということです。

こうしてフォームの上下にテキストを入れるとページが縦に長くなってしまいがちですが、エラーが出て後から修正を強要されることに比べたら、ユーザーの負担はケタ違いに小さいですね。

ちなみにシニアの場合、フォームの中に最初から記入例が書かれていると、「ここにはもう何かあるから入力できないな」と判断されてしまう場合があるので注意しましょう。

「視線の通り道」を把握していますか？

ここまで見てきたように、Webページにおいては「視線が通りやすいところ」と「通りにくいところ」があることがわかりました。ユーザーに気付いてほしい情報を、この道の上にキッチリと置けるかどうかがページ設計時のポイントです。

「視線の通り道」を把握するためには、アイキャッチとなる画像や見出しを意識することに加え、アイトラッキング（アイカメラ）分析が非常に有効です。特にアイトラッキングで得られる『ゲイズプロット』と呼ばれるアウトプットは、ユーザーが見たところを線で繋いで表現してくれるので、よりハッキリと視線の通り道が浮かび上がってきます。

マミオンでは、アイトラッキングのアウトプットを1名分30,000円（税別）からと他社に比べて格安でご提供しています。皆さんも一度試してみてはいかがでしょうか？

【関連サービス】
アイトラッキング動画販売 | マミオン有限会社

下の画像は、一般の選挙速報サイトの中から、代表して4つ（Yahoo、読売、朝日、MSN産経）のトップページを集めてみたものです。

選挙は掲載すべき情報がとても多いので、どこのサイトもかなりゴチャゴチャした印象を受けるのではないでしょうか？

しかし一方で、見やすさ、使いやすさの面で抜きんでており、完成度が非常に高いなと感じたのが、こちらのNHKの選挙速報サイトです。

今回は、このNHKの特設サイトから学べる「ユーザー視点」が感じられるポイントについて、まとめてみたいと思います。

ディスクロージャーでスッキリと

サイトのトップには、開票結果を反映させた勢力図が掲載されています。各党首の顔写真付きなので、前述の一般サイトに比べてイメージを膨らめやすいですね。

そして勢力図の下部にある「OPEN」をクリックすると、今まで見たことがないようなデザインのインフォグラフィックスが現れました。

各選挙区の結果を先ほどの勢力図に結びつけるという、非常に面白い見せ方です。おそらくサイトを制作した方々は、かなり力を入れてデザインしたのではと思います。

しかし、もしこれが最初からトップに大きく表示されていたら、何が何だかわかりません。

苦労して用意したコンテンツでも、ユーザー視点に立って、ディスクロージャー（開閉式デザイン）を使って隠しておくという判断を下せているのは素敵だなと感じました。

ちなみに同じようなギミックは、開票結果のページでも使われていました。

「さらに詳しく」を押すと、下のように選挙区と比例区の詳細が現れます。

こうしたディスクロージャーによる見せ方はうまく使えば非常に効果が高く、多くのユーザビリティ指南書でも、UIを使いやすくする工夫の例としてよく挙げられています。テレビやエアコンのリモコンでも、複雑なボタンをカバーで隠してシンプルに見せるアプローチがよく使われていますね。

かゆいところに手が届く！お気に入り機能

各選挙区の詳細を確認すると、右上の方に「お気に入り登録」ボタンがついています。

これを押すと、下の画像のように、気になる選挙区へのショートカットが常時表示されるようになります。

選挙の開票結果は刻一刻と変わり、その度に自分の選挙区と比例区、または出身地の選挙区や注目されている選挙区などを順番にチェックして回る人も多いのではないでしょうか。そうしたとき、この「お気に入り」機能が非常に重宝します。

過去の結果とすぐに比較できる

各選挙区の詳細画面では、右上のボタンから過去の参院選の結果をすぐ確認することができます。

選挙結果を眺めていると、ここの選挙区は以前どんな人が当選したのか気になることがあります。他のサイトでは、こうして選挙区ごとに過去の結果を確認する機能はほとんど提供されていませんでした。

先ほどの「お気に入り」機能と合わせて、ユーザーがサイトを使うシーンや心理状況をよく考えて設計してあるなと感じます。

スマホ対応も抜かりなし

最近では、テレビで選挙特番を見ながら、スマホでも気になる選挙区の情報をチェックすることも多いのではないでしょうか。

NHKのサイトでも、PCサイトのパーツをうまく利用して、抜かりなくスマホ対応をしていました。

他のサイトでは、読売や朝日はスマホ対応をしていませんでした。一方でYahooは、さすが「モバイルファースト」を掲げるだけあって、PCよりもわかりやすいのではないかと思うほどスッキリとした専用ページを用意していました。

ユーザーの利用シーンを高解像度で想像する

今回ご紹介したNHKの特設サイトは、ディスクロージャーを使ってスッキリ綺麗に見せているという表面的なテクニックの部分はもちろんのこと、それ以上に、「ユーザーの利用シーンや心理状況」をよく考えて設計している（と思われる）のが素晴らしいと感じました。

他のWebサービスの設計においても、こうした視点から必要な機能を考えていくことは非常に効果的です。

自分ひとりで考えるのもよいのですが、「ユーザー行動観察調査（ユーザーテスト）」なども合わせて検討するのもおすすめです。ぜひ参考にしてみてください。

パソコン教室にいると、「わからないから押すのが怖い」という声をよく聞く。若い人は、違ったら戻せばいいと簡単に言うけれども。間違えても元に戻すことができるということが画面から伝えられないと、使いやすさを著しく損なわせるんだろうな。

— satojunさん (@stj064) 2013年5月24日

こちらのTweetは、先日私が教室でのつぶやきを耳にして書いたものです。

この生徒さん、テキストを見ながらWordで文書を作る練習をしていたのですが、しきりに「押すのが怖い」「壊しちゃうかもしれない」と口にして、なかなか先に進んでいないようでした。それこそWordの「リボンメニュー」部分をクリックするだけでも、そうとう躊躇しています。

後ろからパソコンの得意な若いスタッフ（女の子）が来て、「大丈夫です、怖くないです。それで壊れることはありませんから。」と何度かお伝えしたのですが、本人はその後も不安感を消せなかった様子…。

「トライ&エラー」が気兼ねなくできるかどうかが分かれ道

以前、別ブログでこんな記事を書いたこともありました。

アイコンは「怖くて押せない」

つい先日、某社社長のインタビューで「すべてをアイコン化しているので直感的なんです」などという発言がありましたが、実際アイコンを初めて見た人は、それが何を意味しているのかわかりません。特に今回のようなIT初心者、シニア層にとっては、わからないものは「怖くて押せない」んです。

先ほどのリンク先には「慣れれば大丈夫」と続けて書いてありますが、怖くて押せないものに対して、いつ慣れることができるのでしょうか？

このあたりのボタンやリンクの表現については、「適切なラベリング」に勝るものはないと思っています。変にカッコつけず、テキストで表現すればいいんです。

初めてiPadを持つシニア層におすすめのアプリまとめ（後日談） - stj064 Life Lab

どんな分野でも、新しいスキルの習得には、「トライ&エラー」の工程は欠かせません。いくらテキストを読んでも、人の話を聞いても、実際に自分で手を動かして様々な失敗をしてみるまでは、本当に使えるスキルは身につきません。

パソコンやスマートフォンの扱い方によく見られるように、ITに親しみがある若い人などは、自分でいろいろと試行錯誤してみる「クセ」が自然とついている場合が多いです。「ここまでやっても大丈夫」「まずかったら戻せばいい」という暗黙の了解に基づいて、気兼ねなくトライ&エラーを繰り返して新しい技術をマスターしてしまいます。

一方でITに不慣れなシニア層の方々の中には、「パソコンが壊れる」「データが消える」というように失敗結果を過大評価し、こうした行動を起こすことを「怖い」と思ってしまうことが多くあるようです。そのため、スキルの習得に必要なトライ&エラーの回数が絶対的に足りなくなってしまいます。

よいインタフェースは、「予見可能」で「可逆的」である

こうした「怖がり」ユーザーを受け入れるために大切なのは、インタフェースデザインにおいて、行動の結果が「予測しやすい」ことと、「可逆的」であることです。

そのデザインやUIを見ただけで、「これを押したら多分こういう結果になるだろう」と思わすことができるかどうかが勝負です。実は意外とアイコンだけでは伝わりません。適切なラベリングで補足することは非常に重要です。

可逆性に関して言えば、例えばネット上での商品購入において、どこまではキャンセルができて、どこから先は取り返しがつかないのか、明確に伝わるような書き方ができると望ましいです。

またこのブログでも度々紹介している「モードレス・ユーザーインターフェース」でも、システムの「可逆性」は使いやすさに大きく影響する重要な概念の一つとして紹介されています。

【参考記事】
・ソシオメディア | モードレス・ユーザーインターフェース

あなたが今デザインしているインタフェースは、「予見可能」で「可逆的」でしょうか？

「押すのが怖い」と言われないように、メニューやアクションボタンのラベリング、申込みプロセスの進行説明の仕方など、機会があればぜひ見直してみてください。

先日のメールマガジンでもお伝えした、
英語を習うために「Macbook Air」を購入したシニア女性。

メールや検索から始め、その後も順調にパソコンと仲良くなってきているようです。

そんなとき、「そろそろパソコンで英語を打つ練習がしたい」と相談を受けました。

うーん、Macにもいろいろエディタソフトはあるけれど、どうしようかな…。
とりあえず、Macの標準ソフトである「メモ帳」でいいか。

そんな風に適当におすすめした「メモ帳」ですが、実はこのソフトには、パソコン初心者でも使いやすいソフトウェアを設計するためのヒントがいくつも隠されていたのです。

今回はそれらについて、一部Windowsと比較しながらまとめておきたいと思います。

1. 保存がないから失敗しない

「いま入力したものは、『保存』しなければ消えてしまう。」
「『保存』するときは、『ファイル名』をいちいち考えなければならない。」

シニア層ユーザーを初め、IT初心者がパソコンを覚えるときの最初の難関の一つが、この「ファイルの保存」なんです。教室でも、必ずと言っていいほど「先週作ったアレがない！だからパソコンは嫌なんだ！」という挫折を多くの方が経験します。

一方でMacのメモ帳には、ご覧のように「保存」ボタンがどこにもありません。テキストを書いた時点で自動的に保存が行われます。

保存のいらないシステムについては、このブログでもよく紹介している「モーダル&モードレス」の考え方が参考になります。編集モード、保存モードという切り分けがないMacのメモ帳は、まさしくモードレスなソフトウェアであると言えます。

普段、業務アプリケーションなどのUIをデザインしていると特に思いますが、コンピューターの世界のデザインはものすごくモーダルです。しかし我々はもっとモードレスなデザインにチャレンジしなくてはいけないと考えています。

ソシオメディア | World IA Day 2012 Tokyo で講演しました

2. ファイル名を付ける必要がない

1と関連して、Macのメモ帳の場合、文書を作成した際には特別にファイル名をつける必要はありません。書いた内容の1行目が自動的にタイトルとして使われるからです。

実はファイル名や題名をつける作業というのは、初心者にとっては一苦労で、ミスが多いところでもあります。また最悪の場合、拡張子までいじってファイルが壊れてしまったりということも…。

メモ帳に書くような文書であれば、この簡便な仕組みで十分ではないかと思います。

3. 文書を探さなくてよい

Macのメモ帳では、これまでに作った文書は左カラムに並べられています。

文書の中身を確認したいときには、ここをクリックするだけ。また自動で最終更新日の新しい順に並び替えられるので、よく使う文書はすぐ見つけることができます。

「書くところ」と「書いたものが置いてあるところ」の距離が近く、わざわざ探したりする必要がないので、初心者でも困ることがありません。

先の女性は、メモ1枚ごとに1つの教科の内容をまとめているようで、それらをうまく切り替えながら使っていました。

ちなみにWindowsの「メモ帳」で同じことをしようとすると、以下のような手順を踏む必要があります。

1. 『ファイル』⇒『開く』を押し、ダイアログを出す
2. 文書の入っている場所を思い出す
3. いくつかのフォルダを介しながら、対象のファイルを選択する
4. 『開く』を押すか、ダブルクリックする

「ファイルを保存したけど場所を忘れてしまった」というトラブルは、教室にいると毎日のように遭遇するので、これがなくなるインパクトはとても大きいと感じます。

4. リアルのメモ帳に似せたデザイン

Macのメモ帳の見た目は、まるでRHODIAのようなデザインで、誰が見ても「何か書くところなんだ」とわかります。また上端のメモの破り跡のところなど、非常に細かいところまでリアルに再現しています。

一方でWindowsのメモ帳の方は、罫線も色味もなく、パッと見はただの白いウィンドウでしかありません。

5. ダブルクリックがいらない

これはどちらかというとMacの仕様に入りますが、メモ帳を使っている間は『ダブルクリック』をする必要がありません。

ソフトを起動するにもDockからワンクリック、文書を開くのもそれをワンクリック。

パソコン教室ではよく、「これはクリック？ダブルクリック？」と質問を受けることがあります。Macの場合は、そうした方々でも迷うことがないのです。

モードレスなシステムがもっと一般的になる

今回挙げた5つの項目は、もともと「iOSアプリ」の開発で培われてきたものが多く、それをPCの方に逆輸入しているような経緯があります。

また余談ですが、先日Windows8マシンを教室にお持ち込みになったシニア男性から、「『デスクトップ』画面って何のためにあるんですか？」と質問され、衝撃を受けました…。確かに、用途によっては全く不要かもしれませんね。

デスクトップ、フォルダ、ファイル等々。
こうした既存のシステムは今も初心者ユーザーを拒み続けています。

その点、今回取り上げたようなモードレスなシステムは初心者から上級者まで幅広い支持が期待でき、今後のデザインや開発現場で必須の知見になってくるのではと今回改めて感じました。

マミオンの運営するパソコン教室では、生徒さんの予定の一部をこちらのサービスを使って管理していました。しかし今回のリニューアルでUIが大幅に変更され、今までできたことができなくなったり、ところどころでイライラさせられる挙動に出会ったりと、利用満足度が大幅に低下してしまいました。

ベータ版だから仕方ないとは思いつつ、変化の兆しが見えないことに業を煮やした私は、いちユーザビリティエンジニアとして意見を送ってやろう！と思いたったのでした。

問い合わせフォームが見つからない

「さて、『問い合わせフォーム』はどこだろう？」と思って、Yahooカレンダーのヘルプをクリックした直後のページがこちらです。

パッと見、問い合わせフォームは見当たりません。

「ああ、ないんだ…。最近そういうサイト多いし。」

そう思って仕方なく、Twitterで「Yahoo Japan」と検索したところ、出てきた@Yahoo_CSというアカウントに@返信で以下の内容を伝えたのでした。

@yahoojp_cs Yahooのどこにも問い合わせがないのでツイートで失礼します。Yahooカレンダーが使いづらくて困っています。以下、数回にわたって説明します。

— satojunさん (@stj064) 2013年2月15日

@yahoojp_cs 1.リニューアルで月表示の1日の表示件数が少なくなってしまい、全件確認に余計な1クリックが必要になり、ストレスを感じています。スケジューラとして致命的です。しかも1クリックして日を拡大しても、夕方の予定は隠れたままでスクロールが必要で大きな手間です。

— satojunさん (@stj064) 2013年2月15日

@yahoojp_cs 2.月表示から週表示に変更したときに、今日を含む週にならないってどういうことですか？毎回月初に戻らされてイライラします。少しの手間で直るはずです。

— satojunさん (@stj064) 2013年2月15日

@yahoojp_cs 3.月表示、週表示ともに、予定の冒頭数文字しか見えないのが不便です。以前は予定の概要までタイトルに入れていたので、月表示でも確認できました。

— satojunさん (@stj064) 2013年2月15日

@yahoojp_cs おそらくGoogleカレンダーをかなり意識した作りになったのですが、逆にYahooカレンダーの良さがなくなってしまいました。伸び縮みが可能で柔軟なところがよかったのに、それが消えてしまって残念です。以上ご検討いただけたら嬉しいです。

— satojunさん (@stj064) 2013年2月15日

問い合わせフォーム、実はここにありました…

数分後、Yahoo_CSさんから返ってきた返事がこちらです。

@stj064 Yahoo!CS福田です。この度は貴重なご意見をお送りいただきまして、誠にありがとうございます。いただきました3点のご意見につきましては、担当部署に伝え今後の開発・運営の参考と させていただき、より良いサービスをご提供できるよう努めてまいります。  （続く）

— Yahoo! JAPAN CSさん (@Yahoojp_CS) 2013年2月15日

@stj064 （続き）なお、お問い合わせフォームはヘルプページに設置しております。お探しいただいたようでお手数をおかけいたしました。ご案内するページ下部にある「いいえ」ボタンをクリックしていただくとフォームに遷移いたします。ヘルプページ→yahoo.jp/O5JPAD

— Yahoo! JAPAN CSさん (@Yahoojp_CS) 2013年2月15日

えっ？問い合わせフォームがあるって！？

リンクを確認したところ、下のような状態でした。

個別のQ&Aに入った後、最下部の「はい」「いいえ」の「いいえ」を選択してやっと問い合わせフォームのあるページに行くことができるのです。

うーん、初めて見ましたがどうなんでしょう、このギミック…。

確かに個別のヘルプを見てもわからないことに関しては、これでもフォームまでたどりつくかもしれません。しかし、意見や提案を送ろうとしたり、自分で情報を探すことが不慣れな人にとっては気付きにくいデザインだと感じました。

そのころ、使いやすいと言われるサイトでは

参考として、他のサイトの例も見ておきましょう。

『Amazon』は、トップページ最下部に、「カスタマーサービスに連絡」というわかりやすいリンクを設置してくれています。

『クックパッド』は、トップページ最下部に、大きな「ご意見フォーム」を用意してくれています。リンクではなく、フォームを直に置いているところが素敵ですね。

どちらも、ユーザビリティに定評のあるサイトですが、こうしてユーザーの意見にしっかり対応しようという態度が見えるのが素晴らしいと思います。

窓口を隠していたら、状況はいつまでも変わらない

「フリーフォームからの問い合わせは、なるべくさせたくないんだよね」というサイト運営者の言い分もよくわかります。場合によっては、対応工数が莫大になりますし、厳しい意見が寄せられることも多いでしょう。

しかしそこで本当に行うべきなのは、「問い合わせ窓口を奥深くに隠すこと」ではなくて、「そもそも問い合わせが出ないようなサイトを作ること」ではありませんか？根本的な解決にはならない手段を取り続けるサイトには、ユーザーはいつか愛想をつかすのではと思います。

問い合わせ窓口からの様々な意見は、サービス改善のための貴重なヒントです。

問い合わせ数を減らしたいのであれば、そこであえて問い合わせフォームを前面に出すことも、長期的な視点から有効だと私は考えています。先の例のように、ユーザーと真摯に向き合う姿勢を示してくれるサービスが、今後も増えることを願っています。

追記

その後のYahooカレンダー、いくつか書いたクレームの「2番」について、早速修正されているのを確認しました。素早いご対応、ありがとうございました。

今年も、デパートや小売店にとってのハイシーズンがやってきました。

お歳暮、クリスマス、お年賀と、まさに書き入れ時なのがこの11月と12月。

最近では、こうした贈り物をネットで注文する方も多くなってきましたが、そのときに困ってしまう問題のひとつが、「宛先入力の手間」ではないでしょうか。特にお歳暮などでは、まとめて何件も送ることになるので、1から全て手入力するのは大変ですし、間違いも増えてしまいます。

そこで、ECサイトの入力フォームについていると嬉しいのが、「住所自動入力」機能です。特に文字入力が不得手なシニア層の方々にとっては、この良し悪しがサイトの印象にも影響を与えかねません。

今回は、大手ECサイトの入力フォームの中でも、特に「住所自動入力」機能について、使いやすさをランキング形式でご紹介してみたいと思います。

5位：別ウィンドウが立ち上がるパターン

ベルメゾン（Link）

ベルメゾンは郵便番号を入力後、「郵便番号から住所を自動入力する」ボタンを押すと、ポップアップが出現します。

ポップアップ内に並んだリストから、該当の区域のボタンをクリックすると、元ウィンドウに反映されているという流れです。

シニア層にとっては、ポップアップはあまりよいUIとは言えません。一般的に、シニア層は複数ウィンドウにまたがる操作を苦手としていますし、急に出てきたものに驚いてすぐ閉じてしまうこともあります。

ニッセン（Link）

ニッセンもベルメゾンと同様、郵便番号を入力後、「住所自動入力」ボタンを押すと、ポップアップが出現します。

このポップアップ画面内にはプルダウンがあります。［プルダウンをクリック］⇒［該当の住所を選択］⇒［自動入力ボタンをクリック］と3回のクリックが必要になっており、ベルメゾンよりさらに手数が多くなってしまっています。

またプルダウンのUIは、クリックターゲットが小さい点、クリックしないと中身がわからない点などから、特にシニア層には操作しにくいものなので、必要のない状況ではできるだけ使用を避けるのがよいでしょう。

4位：プルダウンが出るも気付かれないパターン

ライフネット生命（Link）

ECサイトではありませんが、ライフネット生命の例です。

資料請求画面で郵便番号を入力し、「住所を自動検索」ボタンを押します。すると、再読み込みがかかり、一度ページの最上段に移動させられてしまいます。

そして再び住所入力欄まで戻ってみると…どこが変わったのでしょうか？

実は、住所入力欄がプルダウンになっており、該当の住所項目が隠れていたのです。これはちょっと気付きにくいですね。

ライフネット生命のフォームページ全体としては、リアルタイムチェックのシステムがよく機能しています。ただし上記のように、住所入力の部分についてはあまりスマートではない印象を受けました。

3位：ページの再読み込みがかかるパターン

ヤフーショッピング（Link）

ヤフーショッピングの共通システムでは、郵便番号を入力後、「郵便番号から住所検索」というゴツめのボタンを押すと、該当の住所が自動で下にあるフォームに入力されます。

ただしこの際、ページの再読み込みがかかり、ボタンがブラウザの一番上の位置に揃えられてしまいます。これにより、次に入力しようとしていたフォームの位置を見失ってしまい、地味にイライラさせられる作りです。

2位：ボタンを押せばすぐ反映されるパターン

楽天（Link）

楽天の共通システムでは、郵便番号を入力後「住所検索」ボタンをクリックすると、該当の住所がすぐにフォームに入力されます。再読み込みやスクロールの移動などがないので、比較的スムースに使うことができます。

楽天以外でも、一番よく見かけるパターンなのではないかと思います。

1位：番号入力、即反映されるパターン

Amazon（Link）

Amazonでは、郵便番号を入力していると、7ケタ目を打ち終えるのと同時に下の住所フォームに該当の情報が自動で入力されます。少しのもたつき、タイムラグもなく、非常に気持ちのよい挙動です。

これまで出てきた楽天の例などと比べて、キーボードから手を離してマウスに持ち替えての1クリックが減っただけではあるのですが、実際に使っている方としては、入力の流れを途中で分断されずに済み、とてもよい印象を受けます。

ユニクロ（Link）

挙動としては上記のAmazonと同じで、非常に気持ちのよい入力ができます。
ただしこちらは郵便番号の入力フォームがAmazonのように2か所に分かれていないので、途中でフォームを移る際のタブキーもしくはマウスでの1クリックさえも必要ありません。使いやすさはさらに上と言ってよいでしょう。

無料で使えるAjaxも

今回ランキング形式で「住所自動入力」機能について見てきましたが、1位にあげた「入力、即反映」パターンは、他を圧倒する気持ちよさで、感動すら覚えます。これを体験してから2-5位の機能をもう1度使うと、なんと面倒でわかりづらい方法なのかと思ってしまうほどです。

ちなみにこちらの機能ですが、Ajaxの技術を用いて、様々なサイトに導入することができるようです。

【参考サイト】
・AjaxZip 2.0 - Ajax郵便番号→住所自動入力フォーム（CGI不要版）

ECサイトやその他Webサービスを運営されている方は、お客様へのおもてなしの一環として、こうした仕組みの導入を考えてみてはいかがでしょうか？

皆さんご存知のTwitter。1投稿140文字という手軽さが受け、あっという間に全世界でポピュラーなサービスとなりました。

今回は、いわゆる「botアカウント」「企業アカウント」を中心に、ユーザビリティについて日本語で毎日のように情報を提供してくれる便利なアカウントたちをご紹介したいと思います。

以下のアカウントをフォローして、あなたもコツコツとユーザビリティについて勉強してみませんか？

ヤコブ・ニールセン博士bot

気取った見出しより内容のわかる見出しを付けよう。本文を読まなければ内容がわからないようでは、見出しの意味がない。

— Jakob Nielsenさん (@jakob_usability) 8月 28, 2012

ユーザビリティ界の重鎮、ヤコブ・ニールセン博士の名言をツイートしてくれるbotです。

ビービットにお勤めの今木さんが管理されています。名言に加え、たまに中の人から返信がくることがあります。

ドナルド・ノーマン博士bot

電池を反対の向きに差し込んだことがないだろか。なぜこんなことが起こるのだろうか。なぜ電池は反対の方向からは差し込めないように、ひとつの方向からしか入らないようにデザインしないのだろうか。

— D.A.ノーマン botさん (@DA_Norman) 8月 27, 2012

「誰のためのデザイン？」の著者、ノーマン博士の名言を集めたbotです。前述のニールセン博士と一緒に、1998年よりニールセン・ノーマン・グループとして活動されています。

bot自体は完全自動運用のようです。

マミオン有限会社

戻るボタンはどのページでも使えますか？フラッシュのページでもシニアは戻るボタンを使おうとします。リダイレクト設定で戻るボタンが使えなくなっているサイトも。戻れないとページは閉じられてしまいます 【マミオンのユーザーテスト mamion.net】

— マミオン有限会社さん (@mamion) 8月 27, 2012

手前味噌ですが、弊社運用のbotです。

シニア層を中心としたユーザーテストの経験から、特にシニア層向けのWebサイトを作る際の注意点を自動でつぶやいています。もちろんシニア以外にも有効なヒントがたくさん含まれています。

現在のところ、完全自動運用です。

ユーザビリティFeeder

ウェブサイトのユーザビリティに関する最高の秘訣20か条 | SEO Japan: 昨日、ウェブサイトのリーダビリティに関する記事を配信しましたが、意外と好評でした。ということで、2匹目のドジョウを狙って今回はユーザビリティに... bit.ly/Pg0YVp

— ユーザビリティFeederさん (@UsabilityFeeder) 8月 14, 2012

こちらも弊社が管理しているアカウントです。

はてなブックマークのタグをウォッチすることで、ユーザビリティや使いやすさに関する新着情報を自動投稿しています。

株式会社ビービット

ユーザビリティ実践メモを公開しました！「「プロトタイプ＋アンケート」で、効果的に仮説検証する新手法！」　//bit.ly/eTrhx5　単純なアンケートにプラスアルファすることで、より精緻な仮説検証ができるかもしれません。

— 株式会社ビービットさん (@beBit_Japan) 2月 21, 2011

現在はほとんど更新が停止されていますが、以前はユーザビリティに関するクイズ形式のつぶやきなどが毎週投稿されており、人気のアカウントでした。

U-Site 編集部

新着ニールセンコラム: SEOとユーザビリティ - ウェブサイトの質を上げればSERPのランクも上がる。しかし、検索エンジン最適化についてのトリックを使いすぎると、ユーザーエクスペリエンスを台無しにしてしまう可能性もある。 tinyurl.com/cb2j9os

— U-Site 編集部さん (@UsabilityJp) 8月 24, 2012

前述のニールセン博士が執筆しているブログ『Alertbox』の翻訳や、日本のユーザビリティ界の重鎮である黒須先生が執筆しているコラムが読める『U-Site』のアカウントです。

ほとんどブログの更新情報のみです。

株式会社ヒューマンインタフェース

bit.ly/Mbz893 【HIブログ】『ログインパスワード』アカウントが増えると覚えられないですよね…。 fb.me/1Yv0V8AY0

— 株式会社ヒューマンインタフェースさん (@humaninterface) 6月 22, 2012

ユーザビリティ評価専門のサービス会社です。

こちらも主にブログの更新情報がつぶやかれていますが、残念なことに今月を持ってブログの更新が終了してしまうようです。

使いやすさ日記

使いやすさ日記：690 後から来ても参考になります〜ある試食コーナーの工夫〜usability.ueyesdesign.co.jp/diary/690.html

— 使いやすさ日記さん (@tsukaiyasusa) 8月 30, 2012

株式会社U'eyes Designが運営する使いやすさ研究所のアカウントです。

ブログの更新情報に加え、生活の中のちょっとしたユーザビリティネタなどを古田さんが更新されています。

おわりに

今回上記のようにまとめてみて、ユーザビリティに特化した、日本語の非個人アカウントというのは意外と少ないなと感じました。また更新が止まってしまったものもいくつかあり、少し寂しいところです。

もちろんこれ以外にも、アクセシビリティ、UX等に関するアカウントはたくさん見つかりますし、英語圏まで含めればさらに多くの情報が手に入ると思います。

マミオンの運営する2つのアカウントを、今後ともよろしくお願いします。