Ver.3.0.0で行なった主なプロダクトのUI改善

この記事は公開日より2年以上経過しているため、現在の内容と異なる可能性があります。


こんにちは。デザイナーの森田です。

この記事では、Ver.3.0.0にて行った主なプロダクトのUI改善の取り組みをご紹介します。
大きな変更ではありませんが、一部見た目や文言に若干の変更を加えています。

Ver.3.0.0 で改善した主なこと

  • 各一覧ページで空のステータスを用意
  • モジュールIDのURLコンテキストに複数選択のアイコンを追加
  • 承認機能の文言を見直し

ほかにも微修正した部分がありますが、この記事では以上の改善点について詳しくお知らせします。

各一覧ページで空のステータスを用意



データの件数が空だった時も以前までは検索フィルターと表の一部が表示されている状態でしたが、場合によってはローディング画面のようにみえてしまうことを懸念し、現在が空の状態がわかるように改善しました。

一部の機能では、空の状態を伝えるとともに次のアクションを示唆しています。たとえばエントリー管理のデータが0だったとき、新規作成ボタンのみ表示されます。

同じ変更が加わった機能

  • エントリー管理
  • 承認通知
  • 承認履歴一覧
  • カテゴリー管理
  • コメント管理
  • ゴミ箱
  • フォーム管理
  • 投稿データ
  • モジュールID管理
  • ロール一覧
  • ルール管理
  • スケジュール管理
  • ショートカット管理
  • タグ管理
  • ユーザー管理
  • ユーザーグループ一覧
  • Webhook管理


モジュールIDのURLコンテキストに複数選択のアイコンを追加



視覚情報で複数選択できることが伝わるよう、複数選択が可能な項目ではアイコンを表示しています。
モジュールIDの引数では、モジュールの種類によってはIDが複数選択できる箇所とできない箇所がありますが、以前までは見た目では区別ができない状態だったため改善を行いました。

承認機能の文言を見直し



承認機能使用中のコミュニケーションを円滑にするために、文言に変更を加えました。

  • メッセージが改行可能に
  • 「承認依頼」から「承認する」または「承認依頼する」へ変更
  • 「却下」から「差し戻す」へ変更

メッセージが改行可能に

どのような変更を加えたのか記述する際に長文を書いても相手に読みやすく配慮したメッセージが送れるよう改善しました。

「承認依頼」から「承認依頼する」または「承認する」へ変更

以前まではエントリーを書いたユーザーも、そのエントリーを承認するユーザーも「承認依頼」というラベルのボタンでしたが、ユーザーの文脈を考慮して改善を行いました。
エントリーを作成したユーザーが承認依頼をするときは「承認依頼する」、承認を行うユーザーの場合は「承認する」ラベルが適用されます。

「却下」から「差し戻す」へ変更

以前までは「却下」という文言を使用していた部分について「差し戻す」という文言へ変更しました。「提案をしりぞける」以外にも「一部分の修正をお願いしたい」という意味合いで従来の却下機能を使うこともあり、実際のアクションの意味合いよりも強い意味合いを印象付けることへ配慮しました。

たとえば、エントリーを書いたユーザーに送っているメール通知の文言は以下のように変更しています。

変更前
申請が却下されました。 [323:テスト / draft:バージョン2]

変更後
承認依頼が差し戻されました [323:テスト / draft:バージョン2]

メール本文のレイアウト変更

メール本文は見出しと内容を視認しやすくなるよう、レイアウトを再検討しました。


改善後はタイトルが詳細情報と区別され、主要なコンテンツであるコメントとそのほかの項目でグルーピングされている

改善前と改善後のレイアウトの比較


最後に

ほかにも微調整を行なった箇所はありますが、今回はそのなかでも大きなものやユーザーの皆様のお役に立ちそうな点をご紹介しました。
Ver.3.0.0の機能面のリリース内容に関しては別途リリースノートをご覧ください。

引き続きみなさまのWeb制作のお役に立てるよう、システム・サービスの向上に取り組んでまいります。 今後とも、a-blog cms のことをよろしくお願いいたします。

同じタグ付けがされている記事