Tweet
Share
はじめに
こんにちは！新卒デザイナーの浜田です。
今回は、入社して初めての担当サービス「UPTOON」の作品管理画面のデザイン時に起こった問題を、ケース別に紹介・解決策の提案をしていきたいと思います。
本記事は、以下の構成となります。
- 開発前のデザインの状態
- 起こった問題とその解決策〜開発編〜
- 起こった問題とその解決策〜デバッグ編〜
- まとめ
同じく新人のデザイナーさん、デザイナーを目指している方には特に本記事を読んで注意してもらいたいです！
開発前のデザインの状態
エンジニアさんにデザインを渡す前に以下の項目はクリアしており、自分では大丈夫だろうなと思っていました。
- ボタンやテキストのHoverやActive状態のデザイン用意した
- セルのテキストが1行の時、2行の時など複数パターン用意した
- 入力前、入力後など状態別に用意した
- エラーページ、エラーメッセージ用意した
- 必要な素材は書き出した
今回はそれでも抜け落ちていたデザインについて、開発編とデバッグ編に発覚した時を分けて紹介していきます。
起こった問題とその解決策〜開発編〜
ケース1 「SVGで書き出したファイルが上手く表示されない」
私はSketchでアイコンを使用する時に、よくIconFontというプラグインを使っています。
こんな感じでアイコンを一覧から選ぶことができるので非常に便利で気に入っています。そんなプラグインを使用して制作したデザインをエンジニアさんに渡すと..
アイコンフォントはフォントなので、そのフォントファイルを持っていない人は確認することができません。デザインを制作しているPCには、フォントがインストールされているので気づきにくく、実装が開始されてから判明してしまいました。
ケース1の解決策
SVGで書き出した場合、フォントはその情報を持った状態で書き出されます。これはアイコンフォントだけでなく、もちろん普通の文字フォントにも当てはまることなので、SVGで書き出したい場合は注意が必要です。
以下は「アウトライン化」というテキストを、上：そのままSVGで書き出し 下：アウトライン化して書き出し、そしてそれぞれをSketchに配置した場合、SVGファイルをエディタで開いた場合の例を挙げています。
こちらは失敗例です。四角で囲まれたところを確認すると、フォントの情報が残っていることがわかります。この状態だと、フォントファイルを持っている人でないと正しく表示されません。
こちらはアウトライン化して書き出したので、エディタで開いてもパスのデータになっています。
※もちろんアイコンフォントをフォントとして使う場合は、SVGで書き出す必要もないので大丈夫です。今回はSVGで対応したのでアウトライン化をしています。（エンジニアさんがフォントファイルを持っていない可能性があるのでアウトライン化しても良いと思いますが..）
ケース2 「ここってどんなデザイン？」
初めに挙げたように、状態別のデザインは思いつく限り用意していましたがそれでも抜けている箇所がありました。
ファイルをドラッグ＆ドロップでアップロードできる場合、画像のアップロード前・ドラッグ中・アップロード中・アップロード後の4パターンが必要になります。デザイン時の私には思いつきませんでした…
しかし、細かくユーザーが使用するシーンを想定しておけば考えられた点だと思います。
ケース2の解決策
ユーザーの行動フローを洗い出し、それをデザインに正確に反映させることで解決すべきだと思います。また、ユーザーに複数の状態が存在する場合は、状態別の仕様を始めに固めておき状態別のデザインを用意すると良いと思います。
当たり前のようなことを言っていますが、意外と抜け漏れがある（しかもデザイン時に気づかず実装開始後に発覚する）ことも考えられるので、意識しておきたい点です。
これらのデザインをどうエンジニアさんに伝えるかは、[動画解説付き]デザイナーがUI実装時に伝えるべき5つのSketchTips！ 〜エンジニアの困っている声に応えました〜の記事を参考にしてみてください！
スタイルガイドを整えておくのも大事ですね。（ちなみに今回私は簡単なものしか作らなかったので反省してます。）
その他にも忘れがちなデザイン、伝わりづらいデザイン
- ボタンやテキストの状態別デザイン（Hover,Activeなど）
- セルのテキストが1行〜複数行の時のデザイン
- エラーが発生した時のデザイン
- 幅が可変の時のデザイン
- 要素が空の時のデザイン
- 読み込み中,読み込み失敗時のデザイン
- ユーザーの状態別デザイン（ログイン中,ログアウト中など）
などなど。
以下、参考になる記事をあげておきます。
起こった問題とその解決策〜デバッグ編〜
ケース3 「アクション後のフィードバックが欲しい」
デザイン通りに実装を行ってもらって、エンジニアさんとデバッグをしながらデザインの確認をしました。
画像をアップロードする時や、変更を保存する時、フィードバックがないために「本当に処理が進んでいるのか？処理が完了したのか？」という不安を抱く可能性がありました。
ケース3の解決策
今回は画面下部からトーストを出すようにしました。例えば完了のポップアップを出すという案も考えられますが、なるべくユーザーの負担を減らすために（閉じる手間があるため）数秒で消えるトーストを採用しました。
またファイルサイズの大きいデータをアップロードして、処理が完了するまで時間がかかる場合があるため、ボタンにはローディングアニメーションを追加しました。
（ちなみに、アップロードやダウンロードはプログレスバーがベストかなと思います。今回は見送ったのですが今後ぜひ対応したい点です。）
一つ一つのフィードバックを丁寧に行い、かつユーザーの行動を邪魔しないものであることが大事だと思います。
ケース4 「文言がわかりづらい」
今回は「新規追加」という文言を例に出しました。AとBは、異なる内容のページなのですが機能がとても似ているので、ユーザーが迷ったり間違えたりする可能性があると発覚しました。
ケース4の解決策
機能としてはどちらも「新規追加」なので、今回は文言を「Aを新規追加」「Bを新規追加」とすることで解決しました。
文言を適切に選択することができれば、ユーザビリティは確実に向上します。
ただ、開発チームなどプロダクトに慣れた人のデバッグでは気づきにくい点もありますので、できるだけリリース前にチーム以外の方にもデバッグをお願いしましょう！
まとめ
本記事で挙げた問題から、デザイン制作において意識しておきたいことをまとめます。
- ユーザーの行動フローを明確に詳細に洗い出す
- ユーザーの状態別の仕様をはじめに固める
- 開発チーム以外にデバッグをしてもらう
結局デザインの抜け漏れは、はじめの洗い出しが足りないことに起因しているのでそこをしっかり詰めていくとこが大切です。
そしてユーザビリティをもっと向上させるために、アクションに対してフィードバックを返したり、文言を最適化していくことが大事かなと思います。
今回はリリース前についての話でしたが、もちろんリリースして終わりではないので、リリース後に実際のユーザーの反応を見てアップデートを繰り返していきましょう！
さいごに
Nagisaでは、共にユーザーにより良い体験を提供するデザイナーを募集しています！
ぜひ一度オフィスに遊びに来てください！