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コースもあり、その中には、50代・60代といった人たちも学んでいます。老眼の人たちがこの画面を見ると、とても操作しにくいのは簡単に想像できることです。今回のプロジェクトは、どんな人でも見やすく操作しやすい仕様にすることでした。

Design Approach

Redesigned Index View

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

まず初めに心がけたことは、無機質でなく、ある程度センスのある洒落たUIにすることでした。また、センスが良いものにするだけでなく、情報が整理された上で、アクセスしたいところに簡単にアクセスできるようにする見た目にすることでした。

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

意思決定を支える視覚補助

Weekly Schedule View

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

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

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

効率的な情報アクセス

Course Details View

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

最後に、受講している講義の情報を知りたい場合は、表にする形で見やすくします。誰が講義の担当なのか、スケジュール、受講場所はどこなのかを表にすることで、簡単に情報を入手することができます。

「たとえ、私はそのダッシュボードを使うことに慣れていたとしても、ポートフォリオとしてそれを当たり前と思うことは間違いだ。なぜかというと、私は慣れたとしても、他の人が慣れているとは限らないから。」

Reflection

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

しかし、UXまたUIは、年齢や性別、国籍など関係なく、どんな人が使っても難しく感じることなく、使えるような仕様にすることが大切だと感じました。デザインを描くときには、自分の視点だけでなく、クライアント様やお客様、エンドユーザー様など誰もが無理なく使うことができるようにすることが重要だと気づきました。