Daily UI（音声SNSアプリ）DAY2-3

こんにちは！スーギーです！
最近ありがたいことにデザインのお仕事が忙しく、言い訳になりますが、
少しnoteの更新が空いてしまいました💦
気を取り直して学びや気づきを綴っていきます🔥

今回は先日作った音声SNSアプリのフィード画面をBONO(https://www.bo-no.design/)にてカイクンさん(@takumii_kai)にフィードバックをいただいたので、その内容をまとめていきます。

フィードバックの内容

前回デザインしたフィード画面

フィードバック頂いた内容
1.シャドウの強さ
コンテンツ部分のシャドウが強い。ヘッダー、フッター、コンテンツ等、どういう高さ関係かをちゃんと考えてシャドウのロジックと強さを組むこと！

2.再生インジケーターの場所
再生のインジケーターがここで再生されるとオシャレですが、実際は
・聞きながらいろんなページを見る
・他のアプリに行ったりもする
ので、
・停止したい時
・あれ、今何再生されてるんだろ？
を知りたい時に不便だったりする。

3.機能面で、その人の名前が目立つ形で出てますが、これで「再生しよう」と思うでしょうか？
コンテンツビジネスとして”聞かれること”にアプリ設計の重きを置くと、より適した情報設計があると思います。

4.フッターのアイコンが真ん中に寄ってしまっている。

5.フッターが実装しづらい。
実装面を考えると真ん中だけ投下で凹んでいるのを作るのが結構しんどいと思います。実際はそこまでしないと実現できない体験や意図があるのかを考えるのが大事になってきます。

6.投稿カード内の余白が違う。

フィードバックからの学び

1.シャドウの強さ

クッキリした影はダサい！という考えがあったため、Blurの数値をやや大きめに設定していましたがそれが失敗でした😓
マテリアルデザインに言われる階層構造上、コンテンツよりヘッダーやフッターが高い位置にあるため、コンテンツのシャドウの広がりが強いのは不自然です。このような構造関係をを考えず、シャドウの強さを設定していました…
猛省！！

2.再生インジケーターの場所

Voicyのインジケーターを参考にデザインしていましたが、フィードバックを受けて納得💦
実際にVoicyには再生するとフッター上部にコンテンツを再生しているとわかるUIが設けてあります。自分の考えの浅さを痛感しました！

3.機能面で、その人の名前が目立つ形で出てますが、これで「再生しよう」と思うでしょうか？

確かに！名前だけが目立っていては仲が良い人や知り合いじゃないかぎり投稿自体に興味を持ったり、認知してもらうことは難しい…。
文字の色をやや濃ゆくし、名前だけではなく投稿文も目に入りやすいように修正しました。

4.フッターのアイコンが真ん中に寄ってしまっている。

投稿のアイコンを丸で囲って目立たせた分、まわりのアイコンとの余白が詰まり中央に寄ってしまっていました。指摘されるまで気づかなかった…
きちんと余白を調整して修正。

5.フッターが実装しづらい。

これも特に意味もなく、見た目をキレイにデザインしてやろうという欲がでてしまっていました…猛省その2！！
実務だと意味なく実装に負担をかける所でした💦

6.投稿カード内の余白が違う。

こちらはカード内の下の余白ですが、左右と上の余白は16pxに対して下は14pxにしていました。理由としては16pxだと下の余白が広く見えたからです。
しかし、結局自分の感覚でデザインしてしまっていると気付かされました。
2pxでも分かる人が見ると分かるんですね😅
感覚でデザインせず、きちんと揃えようと思います！猛省その3！！！

フィードバックを参考に修正

投稿のオブジェクトは画面の階層構造をわかりやすく表現するためにカード形式からリスト形式に変更しました。

また、再生中のインジケーターは別画面に遷移しても再生中の投稿の確認・停止ができるようフッター上部にも配置しました。

見た目のインパクトは劣るかと思いますが、Afterの方が見やすさ、使いやすさは一段と改善されたかと思います🤔✨

まとめ

8ポイントグリッドシステムやOOUIなど取り入れてデザインをするようにしていますが、シャドウの使い方や余白など細かい部分を感覚的にデザインしてしまっているのに気付かされました！
細部まで理由を持ってロジカルにデザインできるよう実践や経験を積み重ねていきたいと思います🔥

ここまで閲覧ありがとうございました！
それではまた次回🙋‍♂️