Web画面における動的要素がUXにもたらす効果

諸琳 / 九州産業大学 芸術研究科　

ZHU LIN / Kyushu Sangyo University　

Keywords: Web design, dynamic, User Experience　

Abstract

As the internet has swiftly evolved, web design has shifted from a static paradigm to a dynamic one. Dynamic design, now prevalent in web pages, amplifies user allure, interactivity, and participation. This research delves into the multifaceted roles and influences of dynamic design within web contexts. Recognizing its pivotal role in shaping user experiences, our objective is to provide refined design guidelines and enhancement tactics for web designers, end-users, and site administrators, fostering perpetual advancement and ingenuity in user experience.

研究背景

　UXとは User Experience 、ユーザ体験を意味する。ユーザーが製品を使用する際に生じる主観的な感情や満足感などの「体験」全体を指している。人間は視覚で八割の情報を得るため、Web画面における動的要素は UXに大きな 影響をもたらすと思いう。 インターネットや メディアなどの発展に伴い、動的要素もますます普及され、多様化している。

　Webにおける動的要素は常にGIF、CSS、SVG、WebGLやビデオなどの形式で保存されることが多い。Webにおける動的要素はブラウザ誕生の初期段階から組み込まれていた。文字上で状態が変わるカーソル、進捗状況を示すプログレスバー、エラーメッセージを提示するポップアップウインドウなどがその例である。動的要素はシンプルでありながら実用的なユーザ体験を実現している。

　しかし動的要素の使用は、十分な事前分析がなければ逆効果になることもある。例えば、大量のトラフィックリソースを消費する動画や、読み込みに時間のかかるスクリプトなどは、反応を鈍らせる点で、UXによくない影響をもたらす場合もある。

　本研究では、ユーザーの心理に対する動的要素の効果を検討し続けることで、Web画面における動的要素がUXにもたらす効果を体系的に分類・整理するとともに、より良いUXのための活用方法を提案することを目的とする。

　なお、本報告は、発表者が取り組んでいる博士研究の導入（序論）にあたる部分であり、具体的な実験等については、今後の取り組みとなる。

研究の方法

　研究は、UXに関する先行研究の把握や現行のWebサイトの実態把握といった調査研究と、動的要素を含むサンプルサイトを用いた実験研究によって行う。

調査研究

　動的要素とその効果を機能によって分類・整理する。例えば、Webナビゲーションには、反転効果、微振動、回転効果などを通じてボタンやアイコンを強調する様々な動的要素がある。機能から見れば、マイクロインタラクションをサポートする動的要素、プロセスを表す動的要素、解釈・説明の動的要素、装飾的な動的効果などがある。

実験研究

　異なる動的要素はユーザーの心理と製品に対する態度に影響を与える。分類・整理された動的要素に関するユーザーテストを行い、ユーザー体験の向上に寄与する要因を探りたい。

　動的要素の役割は、ユーザーの注意を喚起するとともに、ネガティブな体験を面白いインタラクションに変えることである。実験結果の分析を通して、動的要素の役割を最大限に引き出す方法を見出したい。

調査研究

web動的効果の発展

図1.web動的効果の発展

　動的デザインの発展は、1994年のJavaScriptの誕生まで遡ることができる。JavaScriptによって、ブラウザはウェブページと簡単にインタラクションをすることができるようになった。1995年、PHPをはじめ、バックエンド・ウェブ・テクノロジーによって、ウェブページは動的ウェブページの時代に本格的に突入した。1996年、AdobeはFlash技術を発表し、新たなウェブページの動的デザインの方法をもたらした。Flashによって開発者は多様なアニメーション、インタラクション、メディア要素を作成することができるようになり、ウェブページをよりダイナミックで面白くすることができるようになったしかし、当時の動的ウェブページには、読み込み速度が遅い、モバイルデバイスとの互換性が低いなど、まだいくつかの問題が存在していた。2005年、AJAX（Asynchronous JavaScript and XML）技術の出現により、ページ全体を更新することなく情報を取得する機能が実現され、ウェブページの応答性とユーザー体験が向上した。この時、動的デザインはもはや単純なアニメーション効果にとどまらず、ユーザーとコンテンツとのリアルタイムのインタラクションに重点を置くようになった。 2010年、HTML5標準が正式に発表され、動的デザインは新しい段階に入った。開発者がプラグイン（Flashなど）に依存しなくても、直接にウェブページ上のビデオ、オーディオ、アニメーションなどの要素を実行できる。それによって、プラットフォーム間の互換性が向上された。

　近年では、マイクロインタラクションやユーザーガイドが動的デザインのトレンドとなっており、ユーザーがウェブページの機能をよりよく理解して利用できるよう、ナビゲーションや操作ガイドを提供するようになっている。

UXについて

図2.動的効果とUXの関係

　ユーザー体験とは、ユーザーと製品、システム、サービスとの相互作用から生じる知覚、感情、行動の包括的な体験を指している。 　 UXデザインの目標は、ユーザーがタスクを簡単かつ効率的に完成し、喜びと満足感を得られるようにすることである。その中に、ユーザーや製品、サービスなどのあらゆる側面が含まれている。具体的には、インターフェイスデザイン、ナビゲーション構造、インタラクション方法、コンテンツ構成、フィードバックメカニズムなどがある。

　UXデザイナーは、設計した製品やサービスがユーザーの実際のニーズや期待に応えられるよう、ユーザーリサーチ、ニーズ分析、プロトタイピング、ユーザーテストなど一連の作業を行う必要がある。

インタラクションを持つ動的効果

　ユーザーがインターフェースと対話するとき、情報は動的な形で伝達される。情報の伝達は双方向であり、ユーザーが操作コマンドをシステムに送信し、システムがそれを受信したあと、システムから送信された信号は、ユーザーが認識できる動的効果などの視覚的形態でユーザーに伝達される。

　三つの種類がある：トランジション表示の動的効果、情報の提示に関する動的効果、情報の表示に関する動的効果。

今後の課題

アンケート実験

　ユーザーがウェブページの動的効果への体験を調査して、ウェブページに動的効果をよりよく適用できるようにするため、動的ウェブページに対するユーザーのニーズとフィードバックに関する調査を行う。

　1.異なるユーザーグループの動的デザインの認知の違いと心理的反応を探る。ユーザーによって動的デザインに対する認識や嗜好に差があるため、デザインプロセスにおいて異なるユーザーのニーズや嗜好を考慮した上で、個性的なデザインを実現することは必要である。

　2.動的デザインがユーザーの行動やインタラクションに与える影響を分析する。適切なアニメーション効果とトランジション方法を通じて、ユーザーの行動変容と参加を促進し、ユーザーの満足度と忠誠心を向上させることができる。

作品について

　調査結果によって、webデザイナー、ユーザー、webサイト運営者に関連するデザイン原則と最適化戦略を提供し、また、動的ウェブサイトを作成し、ウェブデザインに動的効果を適用することで、ユーザーにより良い体験を提供する。 　

まとめ

　動的要素は、Web上で様々な機能を提供する存在であり、ユーザーの体験を改善し、製品全体への印象を向上させると同時に、情報にアクセスするユーザーの行動をアシストする。視覚体験における「動き」の効果は人類に普遍的なものであり、本研究の成果は、デバイス環境の変化にも対応し得る、有益な知見となることが期待できる。

脚注

UX：User Experience

参考文献・参考サイト

• The Illusion of Life: Disney Animation（1994） OllieJohnston ・FrankThomas Vol.◯◯
• 須永剛司(著)（2019）「デザインの知恵」フィルムアート出版社
• 12principles of Animation https://www.gamedeveloper.com/blogs/12-principles-for-game-animation （2023年7月10日 閲覧）