はじめに
本記事は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)に合わせる
- Salesforceのガイドラインに従う(iOSならばiOS Human Interface Guidelinesなど)
- ガイドラインで言及されていない部分も、LEXやSLDSの雰囲気からあまり逸脱しない
実装者という観点
- (問題がある部分を除いて)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使ってみました！カワイイ！！