学習しやすいWebサイトの構築は、言うほど簡単ではありません。目標は、訪問者が素早く理解できるようなわかりやすいユーザー体験です。
モバイルアプリデザイナーは、オンボーディングによってこの課題を解決することができます。しかしWebサイトでは、長いチュートリアルをいつでも提供できるわけではありません。
この記事では、学習可能性について見ていきたいと思います。そしてそのテクニックを、どのようにWebサイトに適応できるか考えてみましょう。Webのブラウズ方法はほとんどのユーザーが知っています。そのため、実際のインターフェイスではなく、ユーザーがサイトを快適に使用するために守るべき慣習について紹介します。
なぜ学習可能性が重要なのか
使用方法がわかれば、ユーザーはインターフェイスに夢中になります。反対に、ものすごく複雑に見えるインターフェイスからは離脱してしまうでしょう。
ユーザーを定着させるために学習可能なデザインをしたいでしょう。目標は、ユーザーがインターフェイスをすばやく学習する手助けをして、インターフェイスを使い続けてもらうことです。こうすることでさらにリピーターを獲得して、サイトの直帰率を減少させることができます。
インタラクションデザインは学習可能なものであるべきです。少なくとも、インターフェイスの使用方法をデザイナーが教える必要のあるものであってはいけません。Photoshopのような複雑なソフトウェアには通用しませんが、Webサイトは複雑なソフトウェアではありません。
たとえば、AmazonのWebサイトはだれもが知っています。何千ものカテゴリとと何百万もの製品があります。そんなにコンテンツが多いと、乱雑なサイトだと思うでしょう。
しかし、Amazonでの閲覧と検索はまったく難しくありません。なぜでしょうか。
それは、インターフェイスを理解する上でユーザーの手助けとなるのに関連するコンポーネントに焦点を置いているからです。
より複雑なページ要素では、必ずしも共通認識に頼る必要はありません。たとえばTwitterでは、UI内のある要素の上をホバーさせると、小さいツールチップヒントが表示されます。
Twitterの目標は、ユーザーのインタラクションを促してTwitterの継続的な使用を手助けすることです。ユーザー基盤の合計を増加させて、高い定着率を促進するための保証された方法です。
これを念頭に置いて、学習可能なWebサイトのためのテクニックについてより詳しく見ていきましょう。
一貫性が親近感を育む
良いデザインには一貫性のあるインターフェイスがいかに必要かを以前言及したことがあります。これは、ユーザーにとって親近感のある共通のページ要素を使用して、長期的な要素の類似性を保持したいと思うでしょう。
ある特定の要素は、すべてのページ上で同じ場所に配置しなくてはなりません。ナビゲーションやロゴ、メインコンテンツの領域などは、見つけやすいようにすべきでしょう。
しかしより複雑なアプリでは、単なる情報コンテンツ以上のものである必要性が生じます。Dropboxのバックエンドを例に挙げると、ローンチ以来、基本的に見た目は同じものです。
いったんユーザーがDropboxのインターフェイスを学習すると、それを学び直す必要は一切ありません。これが一貫性の目標です。
２度目にDropboxに戻ってきたときには、すでに使い慣れているでしょう。一度Dropboxをしばらく使い続けたユーザーは、UIに慣れるため特定の方法で機能することを期待するでしょう。
これと同じテクニックをブログやコンテンツサイトでも見ることができますが、あまりはっきりしていません。たとえばWebDesigner Depotはリデザインを始めて、すべてのホバリングイベントを動くアニメーション効果を使用するように変更しました。
特集ストーリーの画像や見出し、ナビゲーションリンクなどのどれをとっても、項目が右側に動く小さなアニメーションに気付くでしょう。
これがサイトにおける一貫性を維持しており、期待すべきことを訪問者に知らせます。
あなたのデザインでも一貫性を追求して、これらの要素をできるだけ一貫したものにするようにしましょう。
UIのレスポンスとフィードバック
モバイルの世界では、マイクロインタラクションとそれによる行動への影響がよく話題になります。マイクロインタラクションは通常、アニメーションやユーザーの行動に反応するUIです。そして、学習可能なインターフェイスには不可欠のものです。
ユーザーには、自分が行ったこと（クリックやフォーム送信、コンテンツへの訪問など）が実際にページに反映されたという証明が必要です。
シンプルなアニメーション効果で証明することができます。また、ユーザーに反応するページ要素を作成することでも可能でしょう。
MailChimpの登録ページにおけるサインアップフォームが良い事例です。
アカウント用のパスワードを入力し始めると、MailChimpのUIがパスワードを決める際の特定の要求を、自動的に消去していきます。たとえば、パスワードには最低８文字必要です。
８文字タイプすると、小さな項目が削除されます。これは、ユーザーのタイピングがページに反映されているので、ユーザーはパスワードフィールドの機能方法を学習することができます。
もう１つの良い事例が、PhotojojoのECサイトの製品ページのレイアウトです。
「カートに追加する」をクリックすると、ショッピングカートの概要がわかるツールチップページが表示されたトップのほうにスクロールされます。
このインターフェイスからの反応により、たった今カートに追加されたものが知らされます。これは、マウスのクリックがしたことの明確なインジケータです。
標準的な慣例に従う
私は以前、Webレイアウトの一貫性に関する価値を取り上げ、Webデザインのスタンダードについて話しました。
平均的な日常使用を意図したWebサイトをデザインしている人は、慣例にならう必要があります。創造力を働かせたり、一般的な期待に楯突くようなことをしている場合ではありません。
訪問者はナビゲーションメニューが右上にあることを期待します。リンクはホバーとクリックで作動する必要があり、ドロップダウンがある場合はすぐに表示されなければなりません。
学習可能性のためのデザインを行う場合、最初から作り直そうとしてはなりません。代わりに誰もが行うことに注目して（少なくとも良いものを）、それに従いましょう。
たとえば会計のページには、小さなプラス/マイナスのアイコンが含まれます。これは会計前に数量を変更するためのものです。
これはECショップでよく見られる機能で、ユーザーはその使い方を元から知っています。
インターフェイスの機能がより共通的であれば、ユーザーが直感的に理解できる可能性が高くなります。
ブログのレイアウトでも同様のことが言えます。ブログのカテゴリーを示した強力なナビゲーションをトップに配置し、見やすい見出し、ページの１番上の特徴的な画像、そして記事の内容となるように目指しましょう。
機能するものを継続し、ほかのサイトをみてインスピレーションを得るようにしましょう。
どの要素をシェアするべきか知るために、よりシンプルなほかのブログやオンラインマガジンを見てみましょう。何十ものWebサイトを見たら、それらを自分自身のブログでも再現してみます。
そして一段落したら、自分自身のデザインに基づく標準的な慣例を検討する必要もあるかもしれません。
たとえばGoogleの検索結果のページは、長いこと基本的な見た目が変わっていません。実際には少し変わっているのですが、ほとんどの部分がまったく変わっていません。
自分自身の慣例でも一貫性を保ちましょう。元に戻す方法がない状態で、サイトを根本的にリデザインしてはいけません。Digg v4の失敗とそのバカげたUI変更から学びましょう。
あなたのデザインが長い間オンライン上に存在しているのであれば、多くの人々があなたの慣例に慣れ親しんでいると考えられます。あまり多くを変えないようにしましょう。
これらのヒントは、学習可能性の単なるスタートにすぎません。そのためこれらのアイデアを実行して、どのように機能するか見てみることが大切です。
