Langara Dashboard Hero
UX/UI Case Study

Langara College
Dashboard Redesign

アクセシビリティと情緒的価値の両立を目指したリデザイン

Project Overview

今回は、Langara Collegeで使う学生専用のマイページについて紹介します。IDとパスワードを入力すると、マイページにアクセスして、授業の履修登録など様々なことができます。学生にとって、マイページがあることは、講義の開講情報などを知ることができるなど、様々な便利な機能があり、日々の生活を支える上で必要不可欠になっています。

Langara College Dashboard Default View

Current UI: 多くのテキストが並ぶ既存のダッシュボード

Langara Collegeの学生用のDashboardは、左サイドバーに小さな文字が並ぶ仕様になっていて、とても無機質で退屈です。また、文字が小さいため、違う項目のクリック、また見間違いが起きることもあり得ます。

Langara Collegeには、Continuing Study(生涯学習)コースもあり、その中には、60代・70代といった人たちも学んでいます。老眼など小さな文字を見るのに苦戦する人たちがこの画面を見ると、操作しにくいのは簡単に想像できることです。今回のプロジェクトは、年齢など関係なくどんな人でも見やすく操作しやすい仕様にすることでした。

この作品のFigmaページはこちら

Design Approach

Redesigned Index View

Proposal: ボタン形式とアイコンを採用したメインメニュー

まず初めに心がけたことは、情報が整理された上で、アクセスしたいところに簡単にアクセスできるようにする見た目にすることでした。

左サイドバーのナビゲーションバーの項目を「小さな文字をクリックするUI」から、ボタン形式で見やすく分かりやすく、クリックしやすくする仕様に変えました。そうすることで、誰もが簡単に、クリックしたいところをクリックできるようになります。

Intuitive Course Registration

Weekly Schedule View

Proposal: 視覚的に整理されたウィークリースケジュール

次に履修登録に進みます。授業登録はもちろんのこと、どのようなタイムテーブルになっているか、また、授業料の支払いなど、知りたい情報は様々あります。情報の数が多くなればなるほど、選択肢は多くなります。

そこで、文字だけでなくアイコンをセットにすることで、一目で、次は何をクリックするべきなのかを考える時間を短くすることができます。

Visualizing Course Data

Course Details View

Proposal: 詳細情報のテーブル表示とアクションボタン

最後に、受講している講義の情報を知りたい場合は、表にして見やすくします。その講義は誰が担当しているのか、スケジュール、受講場所はどこなのかを表にすることで、簡単に情報を手にいれることができます。また、メールのアイコンを講師の隣に追加しました。そうすることで、講師に質問するとき、クリックするだけですぐにメールフォームにアクセスできます。とても小さなことですが、学生にとって、メールを送るための手間が減ります。これがあるか否かは大きな違いです。

Reflection

私は、日頃何気なくこのダッシュボードを使っていました。文字が小さいことや無機質で退屈なものという印象こそありましたが、使い続けていると、それすら慣れてしまい、それが当たり前と感じる自分さえいました。

しかし、UXまたUIは、そのシステムを使うであろう相手のことを徹底的に考え抜いた上で、誰もが使いやすくするようにすることが大切だと気づきました。今回の例で説明すると、私を含め留学生の多くは20・30代の学生が多く、最も年齢が高くても40代のため、その環境に慣れてしまうと、20・30代しか利用者がいないと考えがちになります。

しかし、生涯学習コースに目を向けると、60・70代のカナダ人が勉強していることもあります。20・30代と60・70代とでは、モノの見え方や体の調子なども違ってきます。20・30代の当たり前が60・70代にとっては、当たり前ではないこともあります。今回の経験から、デザインを描くときには、自分の視点だけでなく、クライアント様やお客様、エンドユーザー様など誰もが無理なく使うことができるようにすることが重要だと気づきました。

この作品のFigmaページはこちら