アトミックデザインとAdobe XDを採用してオンラインスクール体験をデザインした事例 | アドビUX道場 #UXDojo

連載

エクスペリエンスデザインの基礎知識

中学の時の理科の授業を思い出してみてください。多くの人は、周期表を見ながら、この世界のすべてのものがこれらの要素から構成されていると習ったことを覚えていることでしょう。最近、この科学的な原理が、デザイナーの間で起きた新しい動きの発想の種になりました。アトミックデザインです。

その基本的なアイデアは、ホームページやアプリUIのスケッチからデザインを始める代わりに、小さな要素、すなわち色やフォントやボタンからつくり始めるというものです。次に要素を組み合わせてより大きな要素であるヘッダーや検索フォームをつくり、最終的に全体的なレイアウトをつくり上げます。

学習管理システムの構築にアトミックデザインを採用

デザインエージェンシーのFreshFormは、ジョンズ・ホプキンス大学のCenter for Talented Youth (CTY)が運営する学習管理システムの開発にアトミックデザインを採用しました。CTYが抱えていたのは独特な課題でした。毎年、1万4千人以上の才能ある学生に利用されるオンラインの履修過程を、よりモダンで、アクセシブルで、柔軟なバーチャルクラスとしてリニューアルしたいと考えていたのです。

FreshFormはリニューアルの監督を務めました。プロジェクトに関わったのは、CTYのリーダー、教育専門のデザインエージェンシー、ジョンズ・ホプキンス大学の教育学部の教授達です。多くの協力者と協業するために、FreshFormはAdobe XDを使ってアトミックデザインのアプローチを採用することにしました。以下は、具体的な手順の紹介です。

スタイルタイル

FreshFormは、リニューアルするシステムのためのいくつかの基本要素の作成から手を付けました。まず、デザイナーはAdobe XDを使って、3種の異なるスタイルのタイポグラフィ・色・アイコン・ナビゲーション要素を含んだ、3つのスタイルタイルを作成しました。そのうち2つは同じ傾向のデザインでしたが、ひとつは大胆な色使いで複数の書体を使用していました。

ステークホルダーレビュー

デザイナーは、スタイルタイルのWebのプロトタイプを、それぞれのステークホルダーと共有しました。最初に限られた主要な要素だけを見せたことにより、ステークホルダーを必要な判断に集中させることができました。色やフォントについての詳細な議論の後、チームは方向性を定めました。デザイン作業が進んだ後からのレビューでは、手戻りが発生するようなフィードバックを受けることもあります。

エレメントコラージュ

次に、FreshFormのチームは、選択された色と書体を基に、エレメントコラージュを作成しました。エレメントコラージュに含まれていたものは、ボタン・番号付きと番号無しのリスト・ナビゲーション用のコンポーネントでした。再びステークホルダーによるレビューが行われ、デザイン要素への承認が行われました。

ライブデザイン

既存のシステムの構築に使われていたフレームワークにはいくつかの制限がありました。そこで、FreshFormのチームは、開発チームと一緒になって、変更する要素の実装をシステムに直接行うことを決めました。それはとても協調的な作業で、デザイナーと開発者が隣り合って作業することもしばしばでした。デザイナーはAdobe XDで変更を行うと、更新したデザインスペックを担当の開発者に共有しました。

プロトタイプによるテスト

Adobe XDでデザインした要素をシステムに実装した後は、プロトタイプを使ったテストを行い、学生から早期のフィードバックを集めました。チームがテストした案の一部はインクルーシブデザインに関わるものでした。サイト全体に共通する機能として、ユーザーツアー・用語のヒント・没入型の表示などを提供することで、すべての対象となるグループに対してよいより体験をつくり出したいとチームは考えたのです。ユーザーテストの結果は、学生がシステムに一貫した体験、進捗に応じてコースを進めるための視覚的なヒントをを求めているという仮説を立証するものでした。

新入生の体験

FreshFormのチームは、新入生が最初にログインしたときのオリエンテーションとガイドのために最適化されたダッシュボードもつくりました。ユーザーツアーは、学生がシステムとその利用方法、便利な使い方のコツを理解できるよう、各コースの共通点を順番に紹介します。

ナビゲーションの最適化

最後にチームはナビゲーションの最適化に時間を使い、生徒が必要に応じてナビゲーションを広げたり閉じたりできるようにしました。これにより、生徒は探しているコンテンツに集中でき、また邪魔されることなく学習体験を最大限享受することができます。

「まず視覚的なシステムに集中して、アトミックデザインのアプローチを採用したことにより、システムの開発を効率よく拡張性の高い方法で行うことができました」とFreshFormのチーフ・エクスペリエンス・オフィサーを務めるミシェル・ペックは言います。

「色とアイコンが進捗を表し、ユーザーは新しい学習と既に完了した学習を区別して操れます。すべての物が目的をもって配置され、それらが一体となって、快い一貫性のあるシステムをつくり出しています」

以前のCTYのオンライン学習システムは、多くのスクロールを必要とし、色使いが貧弱で、初めての生徒のための明確なガイドを持っていませんでした。新しい学習管理システムのデザインはずっとシンプルで豊かな体験を提供します。より直感的で自然でアクセシブルな、現代的な生徒の求めるシステムになりました。

この記事はTaking an Atomic Design Approach with Adobe XD（著者:Demian Borba）の抄訳です