Posted at

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

More than 1 year has passed since last update.


はじめに

本記事は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フォントで表示





  • テキストでの注意書きは極力やめる。できるだけ直感的に

  • アイコンで感覚的に、親しみやすく

  • かといってアイコンの多用はわかりにくいので注意


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

今回はリリース間近の青枠に部分に絞って書きます。

現在の画面はこんな感じです。

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

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

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


終わりに

今後も改善を続けていく中で、気をつけることは変わっていくかもしれませんが、現在はこんな感じです。

アプリデザインの知見は少ないので、他社サービスやデザイナさんの考えも聞いてみたくて、書いてみました。

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

--

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