search
LoginSignup
14
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

Salesforce App Cloud Advent Calendar 2016 Day 21

posted at

UI/UX変更の際に、サービス、ユーザ、実装者という3つの観点で気をつけていること

はじめに

本記事はSalesforce App Cloud Advent Calendar 2016の21日目の記事となっています。

現在社内で進めているプロダクトのカレンダーアプリCu-hacker for SalesforceのUI/UX改善を例に、サービス、ユーザ、実装者という観点で気をつけていることを紹介したいと思います。

※ この記事はCu-hacker for SalesforceのUIの記事であり、Cu-hackerとは違ったものです。
Cu-hacker for Salesforceは、Cu-hackerを開発した株式会社ジェネストリームさんとの共同開発のSalesforceユーザ向けに特化したCu-hackerのことです。

気をつけてること

サービスという観点

  • 対象のサービスはカレンダーと言う日常的に使うであろうビジネスツールであることを認識する

    • 色はPOPすぎない、使いすぎないように
    • 過度なアニメーションは避ける
  • プラットフォーム(今回の場合Salesforce)に合わせる

実装者という観点

  • (問題がある部分を除いて)SQLやJSを極力変えない
  • 見た目(html、CSS、アイコン)だけでの変更を心がける
  • 不要な画面、機能はなくす(余分なメンテナンス、コードを減らす)
  • めんどくさい手作業はビルドツールに組み込む
  • 毎週ミーティングを行ってカンプを見せる。ミーティングは確認ではなく候補案から絞ることに注力する
  • 実装しやすいものと、少し手が込んでいるものと複数案を出す
  • プロトタイプを作る。モバイルは実機で動かしてもらう(現在はXdを使用しているが、今後はInVision、Prottも試す予定)

ユーザという観点

  • UI/UX変更に伴う負荷軽減を意識する
    • ボタンやフォームを配置を既存から極力変えない。混乱させない
    • このサービスの対象ユーザはSalesforceユーザなので違和感を減らすため、操作やアイコンを全体的にSalesforceに合わせる
    • サイトが重くならないようにする
      • アイコンはSVGかWebフォントで表示
  • テキストでの注意書きは極力やめる。できるだけ直感的に
  • アイコンで感覚的に、親しみやすく
  • かといってアイコンの多用はわかりにくいので注意

ユーザになったつもりで見てみる

今回はリリース間近の青枠に部分に絞って書きます。
現在の画面はこんな感じです。

スクリーンショット 2016-12-20 16.14.35.png

ユーザになったつもりでよく見ると問題点がいくつかあります

スクリーンショット 2016-12-20 16.40.35.png

これらの問題点をこう改善してみました

スクリーンショット 2016-12-21 12.21.44.png

リリースまでにはもう少し改善する予定です。自分でも出来上がりが楽しみ。

終わりに

今後も改善を続けていく中で、気をつけることは変わっていくかもしれませんが、現在はこんな感じです。
アプリデザインの知見は少ないので、他社サービスやデザイナさんの考えも聞いてみたくて、書いてみました。

Cu-hacker for Salesforceはこれから少しずつUX/IU改善を行っていきます!

--
@tbpgrさんのQiita の記事の見出しに Font-Awesome を利用して見栄えを良くする #qiitaの記事が大好きなので、絵文字でなく、Font-Awesome使ってみました!カワイイ!!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
14
Help us understand the problem. What are the problem?