新規チーム作成画面が、新しいデザインになりました

今回のリリース内容

teams-new-renewal.png (3.1 MB)

新しくチームを作成するときの画面が、新しいデザインになりました。
esaを使い始めの一番最初に、チームを作る時の画面です。

デザイン改善ポイント

teams-new-renewal-design.png (2.0 MB)

この画面は、esaの利用を試してくださるユーザーさんが最初に目にする画面のため、より気軽にストレスなく新しいチームを作り、esaを使いはじめていただけるようなデザインを目指して、特に下記の点に配慮しデザインを変更しました。

  1. 入力項目をへらす; 「説明文」の入力欄を削除しました
    • チームについての説明文をそもそも必要としないケースも多そう
    • 任意の登録で十分なものは、できるだけ初期画面には載せない
    • （アイコン画像も任意登録だが、こちらは登録の有無が使い勝手を左右するので初期画面に含める）
  2. 文言をできる限り短く、具体的に、柔らかく
    • 例えば…
      • 「チーム情報は後からでも変更できます」→ 「アイコン」ラベル付近に「後からでも登録できます」という文言を配置
        • 後者の方が具体的な操作をイメージしやすく、文言も短くて済むので、ユーザーの負荷が低い
      • 「新規チーム作成」→「新しいチームを作成」
        • よりユーザー側の目線に沿った、柔らかい表現に
  3. センター揃えにして、メリハリのある見た目に
    • 目線の移動がなるべく少ない画面に
    • 重要なものは大きく、そうでないものは小さくメリハリをつけて見やすく

(\( ⁰⊖⁰)/) ﾋﾄｺﾄ

新規チーム作成の画面は、普段あまり自分たちでも目にする機会が少なく、つい改善を忘れがちになってしまいました。また性質上、ユーザーさんからの直接のフィードバックもいただきづらい場所というのが、さらに改善を後回しにしてしまう要因になっており、サービス初期の古いデザインを残してしまっておりました :cold_sweat:
しかし、新しいユーザーからの第一印象を左右する画面なので、本来はきれいにわかりやすくしておきたい場所です。
既に普段 esa を使ってくださってる方は、あまり目にしない画面かもしれませんが、新しくチームを作る時などによかったら見てみてください。

(追伸) pplog.net について

こちらも、ﾔｯﾃｲｷﾏｽ ₍₍ ε=з ⁾⁾₍₍ ε=з ⁾⁾₍₍ ε=з ⁾⁾

[ProTip] Webhookでdocs.esa.ioの更新通知を受け取ることができます

Enjoy "(\( ⁰⊖⁰)/)"
https://esa.io

END

  • Close