Kana Oishi - Music Center

作成した背景

ヘッドホンと連動するアプリをインストールしたが、直感的に操作できずわかりにくかったため、このアプリを使わなくなってしまいました。
色々な機能があるのにアプリを使わないのはもったいないと思い、よりわかりやすいUIを作ることにしました。

既存デザイン

ユーザビリティテスト

自分以外の人も同様に使いづらいと感じるのか、またどのような点が使いづらいのか検証するために、ユーザビリティテストを行いました。

タスク 1

タスク 2

タスク 3

タスク 4

アプリから外の音を取り込むように設定

自分が止まっている時のみ、外の音をシャットアウトするように設定

ヘッドホンの接続が良くなるように設定

ヘッドフォンを外して一定時間経つと、ヘッドフォンの電源が自動的にオフになるように設定

要因抽出　-なぜ使いづらいのか

プロトペルソナ

情報整理（UI設計）

1. オブジェクトの抽出

2. タスクから「名詞」を抽出

3. 「名詞」の関係性をつなげ、オブジェクトを整理

4. オブジェクトの中で「メインオブジェクト」になるものを特定する

5. メインオブジェクトに付随するオブジェクトを決め、さらにアクションを見つける

ワイヤーフレーム

・極力わかりやすい言葉で表示　・全てのアクションに説明文を表示

・トグル機能（アコーディオン）をなくし、背景色を使って視覚的に整理

・アイコンを使って、わかりづらい項目も認識しやすく

UIデザイン

想定したプロトペルソナが好みそうなデザインを心がけました。クールでプロフェッショナルな印象、未来的・テクノロジー感、高級感・信頼性を表現するために、青をアクセントカラーとしたダークモードで作成しました。

ユーザビリティテスト 2回目

使いづらさが改善されたか確認するために、1回目とは異なる人で、再度ユーザビリティテストを行いました。