音声SNS:通知画面の振り返り

はじめに

新卒でUI/UXデザイナーを目指す、都内私立大学２年の「すえ」です。
今回は以前から作成している音声SNSの通知画面をデザインしたので、振り返りについてまとめていきます。

1.設計

今回も紙とタブレットを使って通知画面の設計から始めました。今回デザインした通知画面は、アプリ上の通知画面とスマホの通知デザインの２つを作成しました。

↑ラフ書き

ラフ書きの段階では、始めにTwitterやインスタグラムなどのSNSを参考に、通知画面のレイアウト案を３つほど書き出し、どのデザインが今回の音声SNSに合っているのか考えました。最終的には２つ目のデザインをベースに複数アカウントの通知表示が元のデザインでは考えられていなかったので、他のデザイン案を参考に複数アカウントの場合の通知設定デザインを考えました。

ホーム画面に表示される通知デザインは、IOSの通知表示を参考に、ロゴとサービス名(今回の場合はBONO)・通知内容と通知時間の全部で4つのみを表示するデザインにしました。
この部分で意識したことは、「必要な情報だけを表示してシンプルで見やすいデザインにすること」です。その理由はホーム画面に表示される通知はアプリ内の通知と比べて、通知を見る時間が少ないためです。対照にアプリ内の通知画面はユーザーが通知を見ることを目的に、通知ボタンをタップするためより詳細な情報や過去の通知まで見ることができるようなデザインにしました。

↑タブレットでのデザイン

次に、タブレットを使ってデザインの詳細を詰めていきました。今回も前回と同様必要な画面が少ないため、大きな変更をすることはなかったのですが、複数アカウントの通知のデザインを紙でのデザインと比べてより細かい部分まで構成を考えました。

2.Figmaでデザイン

Figmaで作ったデザイン

先ほど作ったデザインの設計図をもとにFigmaを使ってデザインを完成させました。今回は、各要素の重要度を色で区別することを意識してデザインしていきました。具体的には、通知内容を黒にして、通知時間を薄いグレーにすることでユーザーが通知内容を確認するために通知画面に訪れているため最も重要となるコンテンツが目立つようデザインしました。

3.反省点

【良かった点🙆‍♂️】
・ユーザーが何を求めて通知画面に来ているのかを想像して画面構成を考え
　ることができた
・色を使って重要度を区別できた
【反省点🙅‍♂️】
・見た目がシンプルすぎた
・複数アイコンのサイズ感がやや小さい

　

4.反省点を踏まえて

反省点を踏まえて、今回は複数アイコンのサイズ感を調整していこうと思います。

上：変更前　下：変更後

アイコンのサイズ感を36pxから42pxに大きくして、複数アイコンでも誰と誰なのかを分かりやすくすることができた。また、画面全体で見たときも以前は複数アカウントの通知はサイズ感が小さく全体として統一感があまり感じられなかったが、アカウントのサイズを大きくすることで見た目に統一感を出すことができた。

5.感想

今回はシンプルな通知画面のデザインだったのですが、それぞれの要素を作り込むのはもちろんのこと、要素同士をまとめて一つの画面全体でデザインを見てみると、思っていたより小さかったり、まとまりがないなど全体のバランスを取ることがUIデザインをする際には必要不可欠だと今回のデザインを通して学びました。

おわりに

今回は通知画面のデザインについてまとめていきました。通知画面は構造や機能がシンプルだったのですが、それぞれの要素を作っている時には気づかなかった全体のバランスの大切さを学ぶことができました。全体のバランスは実際にスマホで触ってみたり遠くから見てみるなどは使いやすいデザインを作成するためには必要だと思いました。
次回でいよいよ音声SNSの作成も最後になるので、今まで学んできたことを活用して良いデザインを作っていきたいです。

次回は、「音声SNSの設定画面」の振り返りをしていきます！

最後まで読んでいただきありがとうございました！🙇‍♂️