海外サイト 99designs Blog で公開された 6 top tips and ideas for interactive web design より許可をもらい、翻訳転載しています。
この記事では、ユーザーを飽きさせないインタラクティブなウェブサイト制作で意識したい6つのポイントをまとめてご紹介します。
ここでは、インタラクティブなウェブサイトとは、ユーザーと対話するような参加型サイト体験を指しており、その方法やエフェクトもさまざまです。
ここでは、いくつかの実例サンプル例を参考に、それらがうまく機能している理由を詳しく見ていきましょう。
1. ローディング画面の待ち時間を利用しよう
ウェブサイトの読み込み時間は、ユーザーのサイト閲覧でもっとも障害となる問題のひとつです。どれだけ費用や労力をかけて素晴らしいウェブサイトを構築しても、ページの読み込みに2秒以上かかると、ユーザーはなにも見ずにページから離脱してしまう可能性が、飛躍的に高くなるというデータもあるくらいです。
このように、ユーザーは読み込みに時間がかかることをネガテイブに感じていると考えられます。
しかし、ローディング画面はチャンスかもしれません。せっかくユーザーの注目を集めているので、それを最大限に活用してみましょう。
ローディング画面は、アニメーションを使ってユーザーを感動させる、サプライズ的な特別な機会。ブランドの個性をアピールし、ユーザーを惹きつけ、興奮させる新しいチャンスと言えるでしょう。
By Oleg Frolov via Dribbble
By Halal Lab via Dribbble
多くのケースで、ページにアクセスできるまでの残り時間をローディングバーで表示し、ユーザーに進行状況をうまく伝えるテクニックが活用されています。
このようにローディング画面では、待っている間にゲームができるなど、楽しくインタラクティブな体験を提供できるのが理想的です。
by Aaron Iker via Dribbble
重要なのは、ローディングは必ずしもユーザーにとってネガティブな体験ではない、ということです。ときには、ウェブサイトのもっともエキサイティングな部分になることもあるでしょう。
2. アニメーションスクロールで情報を整理しよう
スクロールは、ユーザーにとってもっともシンプルで直感的なインタラクションのひとつです。
ウェブサイト内でのダイナミックな動きをユーザーに感じてもらう、スクロールアニメーションを活用する代表的なテクニックをいくつか見てみましょう。
By Janos Nyujto
By Bonhomme via Dribbble
スクロールトリガーによるアニメーション
ユーザーがウェブサイトをスクロールすると、特定のアニメーションが発動するテクニック。ビジュアルに命を吹き込む魔法のようなもので、ユーザーの動きに応じてリアルタイムでウェブサイトが動いているような錯覚を与えます。
パララックス・スクロール(別名: 非対称スクロール)
同じようなテクニックとして、パララックス・スクロールも人気の手法です。ユーザーがページをスクロールする際に、画面上の2つのオブジェクトが異なる速度で動きます。
通常、前景オブジェクトは背景オブジェクトよりも速く動くため、結果として3Dのような奥行き感のある動きを再現できます。
By tubik via Dribbble
By Seth Taylor via Dribbble
スクロール・ページ・トランジション
このテクニックは、従来のスムーズなスクロールの代わりに、次の画面やコンテンツにジャンプし、ページ全体の変更を行うものです。こうすることで、新しいページ要素を取り入れるだけでなく、場合によってはまったく別のカラーパレットを導入し、スクロールするたびに新鮮な驚きを提供できます。
By Yatish via Dribbble
By Armand Chakhalyan via Dribbble
スクロールアニメーションを活用することで、はっきりしたコンテンツの階層と構成を、ユーザーにわかりやすく、そして印象的に表現できるようになります。
3. スライダーや画像カルーセルで縦の動きを崩そう
ウェブサイトのコンテンツを回転させながら表示するカルーセルは、モバイルアプリのスワイプ操作の増加に伴い、ウェブサイトでもより一般的になってきています。
水平方向のスクロールを取り入れることで、縦スクロールの終わりのない単調さから、ユーザーを開放するのに必要な手段となっています。
By Glenn Catteeuw via Dribbble
By Super Top Secret via Dribbble
カルーセル機能を活用することで、必要な情報を一度にページに詰め込むのではなく、サイトの要素を一口サイズにまとめ、ユーザーが少しずつ見て回れるようにします。
このテクニックは、コンテンツの形式が似ている場合に特に有効で、製品画像やプロフィール、ユーザーの口コミなどをまとめて表示することが可能です。また、色違いの製品など、バリエーションを紹介するのにも役立つでしょう。
By Giulio Cuscito via Dribbble
By Synchronized via Dribbble
カルーセルのアニメーションは、左から右へのシンプルな動きから、カードシャッフル型、レトロな回転ホイール式など、参考サンプル例のようにさまざまなスタイルを検討してみると良いでしょう。
By eleken via Dribbble
By Ollie via Dribbble
4. ナビゲーションメニューを壊してみよう
スワイプ操作と並んで、ハンバーガーメニューもモバイルアプリの一般的なトレンドのひとつで、通常のウェブサイトにも浸透しています。ユーザーはナビメニューが常に表示されていなくても、必要に応じて操作できることをよく知っています。
By Francesco Zagami via Dribbble
ナビメニューを非表示にすることで、ウェブページのスペースに余裕をもたせることができるのと同時に、メニュー表示時にインタラクティブな機会を増やすことができます。
By green chameleon via Dribbble
ユーザーはメニューが表示されているのを好むため、多くのデザイナーは画面全体を使ったナビゲーションを活用しています。これによって、巨大なタイポグラフィやサムネイル画像、おしゃれなホバーアニメーションなどを実装できます。
通常は非表示で隠し、必要なときに大きく表示するなど、ナビゲーションメニューを強調できるデザインを検討してみましょう。
By green chameleon via Dribbble
5. 問い合わせフォームをアンケート形式に置き換えよう
ウェブサイトを利用するときに、もっとも負担となるのがユーザー情報の入力です。一般的に、ユーザーはウェブサイト上で自分の情報を提供することに抵抗があります。これを軽減するためには、堅苦しく味気のないフォームに記入するのではなく、Q&A形式のアンケートのようにしてみましょう。
By green chameleon via Dribbble
By Merixstudio via Dribbble
サインアップやログインでのフォーム入力に、インタラクティブな質問形式を取り入れるウェブサイトも増えています。質問はわかりやすく、親しみやすい表現とし、必要に応じて回答を選択式とすることで、ユーザーの負担を減らすことができます。質問は一度にひとつずつ行うことで、ユーザーはまるで会話に参加しているような感覚を演出できます。
By Saga Design Team via Dribbble
By Florian Pollet via Dribbble
By Christoph Gromer via Dribbble
6. マイクロインタラクションにも気をつけよう
インタラクティブなウェブデザインにおけるアニメーションでは、控えめで小さな動きこそがポイントです。アニメーションの目的は、ユーザーへのフィードバックであることが多いので、無意識のうちにもっとも効果的に活用できるのも納得です。
By Fireart Studio via Dribbble
注目が集まりすぎるアニメーションは、ユーザーの気を引いてしまい、フィードバックをうまく行うことができません。そこで、マイクロインタラクションの出番です。
マイクロインタラクションは、ユーザーがページを操作する際のちょっとした動きを表現でき、幅広いカテゴリ、スタイルがあります。たとえば、何かにカーソルを合わせる、ウィンドウを閉じる、引っ張ってページを更新、星をつかったレーティング評価、ブックマーク、通知、カートに入れる、アイコンをクリックなどさまざまです。
マイクロインタラクションのアニメーションとしては、ボタンを緑色に変更したり、アイコンをチェックマークに変えたり、かわいい衝撃波のようなホバークリックなどが人気です。
By Kashish Mehta via Dribbble
By Milan Gladiš via Dribbble
By Aashish via Dribbble
By Aaron Iker via Dribbble
マイクロインタラクションの目的は、ユーザーにページへの変更が成功したことを知らせることなので、シンプルで効果的なアニメーションを工夫してみましょう。
さいごに、。
いかがでしたでしょう。ユーザーがウェブサイトを訪れる目的はさまざまですが、最終的には必要な情報を見つけるためだけでなく、体験するために訪問しています。
ユーザー参加型のインタラクションを利用し、ここで紹介したヒントを参考に魅力的なウェブサイト制作してみてはいかがでしょう。
参照元リンク : 6 Tips and Ideas for Interactive Web Design – 99designs Blog