UIUXデザイン学習記録②音声SNSのデザインでビジュアル力をつけよう！Part1
こんにちは。UIUXデザインの学習をしているYuiといいます。
2月〜3月はビジュアル力をつけるべく、デザインコミュニティBONOにて「音声SNSのUIをデザインする」というお題に取り組んでいました。
最終形はこちら。
プロトタイプはこちらをご覧ください。
取り組みからだいぶ日が開いてしまいましたが、今回はその学習記録Part1「新規登録画面とフィード画面」についての内容となります。
カイクンさんからフィードバックをいただき改善する中での成長と学びを見ていただけると幸いです。
それでは、行きましょう〜!!
新規登録画面を作成
1回目のフィードバック
それはそれは多くのコメントをいただいたのですが、強いて厳選するなら以下のようなポイントでした。(ここだけでも読む価値があるのではないでしょうか?!）
・アクションボタンは、画面内でやってほしいアクションの訴求になるので、基本的にかなり大事なUIパーツ。フォームサイズよりボタンのサイズの方がタップ領域（高さ）が小さいのが気になる
・メールアドレスが合っていればパスワードは後から変更できるので「パスワードの確認」は今はあまり主流ではない
・キーボードで隠れないようにするとユーザーはサクサク入力できる
・通常「メールアドレス」か「電話番号」のどちらかでアカウント作成ができるので、それ以上の登録を必須にするケースは少ないし離脱の原因になる
・確定する操作が、他の画面では「次へ」だが、認証画面では「送信する」になっている。操作が違うので混乱の原因になる。画面を分ける、表示を切り替えるなど、工夫をした方が使いやすくなりそう
・優先度が一番高い「ベタ塗り」を違う意味で2つ使うと、直感的に同じ意味に見えてしまうので混乱や複雑さを生む原因になる
・ユーザーは設定や登録するよりアプリを使いたいので「各種設定」のようなオプションを登録時に出すのは避けたい
うわあ〜〜〜〜。他人が作ったものが「使いづらい」ことにはすぐ気づくのに、自分が作ったものにこんなに「使いづらい」ポイントがあったとは驚きでした。自分が作ったものの客観視が足りていない証拠ですね…。でも多くの学びがありました。
2回目の作成(1回目の修正)
「認証画面」と「興味のあるカテゴリーを選択する画面」はstand.fmさんを参考にさせていただきました。各種設定画面はナシにしました。
ステップの数が減り「ステップUI」を設定するまでもなくなったので、ステップUIもナシにしました。
また、これは全体についてですが、アクセシビリティを守ってテーマカラーを設定したらあまりにも全体のトーンが重くなり「表現したいトーンと大幅に異なる」と考えたため、修正時からは変更しました。
2回目のフィードバック
・(興味のあるカテゴリー画面の説明テキストについて) タイトルはセンター揃えなので、センター揃えで合わせた方が綺麗だし、読み方も等しくなる
・「今は選択しない」でも良いが「スキップする」系の表現の方が馴染みがあるかも
ふむふむ。修正します。
3回目の作成(2回目の修正)＆3回目のフィードバック
3回目の作成では「スキップする」が違和感のある配置となっていたため、修正して最終形としました。
フィード画面を作成
1回目のフィードバック
これまたたくさんのコメントをいただいたのですが、主に以下のポイントでした。
・アクションボタン(ここでは再生ボタン)は殆どが右側についている。既存サービスを研究するべき
・コンテンツ同士を分ける余白より、アカウント名と投稿内容を分ける余白の方が大きくなってしまっている
・アカウント名がきて、次にプレイヤーが来ると「なんの情報？」となる。情報の順番を変えてみる、他サービスを真似てみるのが良い
・「整列」がきちんとできていない
・アイコンは基本は正方形で収まるようにする
・(投稿ボタンについて)+など付属のものを置く場合にはバランスをとる法則がある。まずは既存のサービスを真似てみるべき
・ボトムナビを「フォロー中」としているが、基本的には名詞(=オブジェクト)がくる
なるほど。余白の基本を頭で分かっていたつもりでしたが、いざアウトプットしてみると全然実践できていないということに気づきました。「分かる」と「できる」の間に大きな隔たりがあることを感じます。
2回目の作成(1回目の修正)
Twitterなどを参考に、ボトムナビの「フォロー中」は「ホーム」に変更。再生ボタンの位置やプレイヤーとテキストの順番を変更しました。
投稿ボタンは既存サービスを見ながら試行錯誤してみたものの上手くバランスが取れず、「基礎が身に付いたら習得しよう」ということで＋のみに変更しました。（＋で十分伝わると考えた、というのもあります）
2回目のフィードバック
・「おすすめ」は他で作成した画面の内容に含まれるのでは？
・テキストとプレイヤーの間が狭いので要調整（文字が持つ余白の大きさを考慮すべし）
3回目の作成(2回目の修正)
「おすすめ」は指摘の通り他の画面と重複していたので、廃止しました。余白についても修正し、最終形としました。
終わりに
長くなってしまったので、今回は以上となります。
「守・破・離」とか「学ぶの語源はまねる」とかよく言われますが、「既存サービスの型をよく見てまねる」ことが意外と難しくそしてとても大事だということがわかりました。
ここまで読んでくださった方、お付き合いいただき本当にありがとうございます。次は「投稿」画面について投稿したいと思います。
ではまた！
この記事が気に入ったらサポートをしてみませんか？