背景：
ここVtigerでは、私達は頻繁に私達の顧客のためによりよいプロダクトを造る方法を互いに探求します。 私たちの議論は、CRM機能の強化に関するアイデアからシステムパフォーマンスの向上、ユーザーエクスペリエンスの向上まで、多岐にわたります。 9月のある特別なディスカッションで、私たちのエンジニアリングチームの何人かのメンバーが、UIの不一致についての彼らの懸念を議論するために集まりました。 空白がない、テキストとアイコンの位置がずれている、アクションバーにテキストとアイコンが混在している、その他デザインの矛盾が多くあるため、Vtigerのユーザーインターフェイスを改善することが望まれていました。
数週間以内に、この渇望はプロジェクトAlpanaに変わりました（Alpana、最も古いインドの民芸品のXNUMXつは、手とペイントで行われたカラフルなモチーフを指します）製品管理チームとユーザーエクスペリエンスデザインチームが協力するよう求められました。 プロジェクトAlpanaの目的は、エレガントで読みやすさを最適化した直感的なUIを構築することであり、Vtigerの現在のユーザーが新しいことを学ぶ必要はありません。
UI改善の指針となる原則は、SteveKrugの最初の使いやすさの法則に触発されました。考えさせないでください。 Steve Krugは、著書「Do n't Make Me Think：A Common Sense Approach to Web Usability」の中で、Webページは常に自明であるべきだと述べています。 このことを念頭に置いて、私たちのチームは、ユーザーがそれが何であるか、またはそれをどのように使用するかを考えることなく理解できる直感的なUIを構築するという使命に着手しました。
プロセス：
プロジェクトアルポナは3ヶ月前に開始されました。 その後のこの期間中、チームはVtiger CRMのすべてのページを分析して、UIの不整合を詳細に調べました。 ボタンのサイズ、テキストの配置、色の適用、およびその他の多くの詳細は、一貫性と読みやすさのために注意深く精査されました。 そして、いくつかのブレーンストーミングセッションと長い審議の後、UIの改善を管理するガイドラインが組み立てられました。 設計会社InvisionのMarcoSuarezは、このモーニングコールで、これらのガイドラインを「設計システム」と呼んでいます。 ソフトウェア設計は危機に瀕しています。 –彼は先週投稿しました。
私たちのUXDチームは286の新しいアイコンを作成し、500モックアップを介してエンジニアリングチームにページの見直しのために提供しました。 私たちのエンジニアリングチームは100 UIの機能強化以上を実装しました。 すべての新しい実装は、バグについて徹底的にテストされました。 1か月前、新しいUIは社内でリリースされ、ここにいるすべての人が新しい外観を気に入っています。
変化したこと：
- アイコン： さて、あなたがVtiger CRMにログインすると、あなたは古い塗りつぶされたアイコンを置き換える流行の線アイコンを見るでしょう。 線のアイコンはシンプルで洗練されていて、見やすくなっています。 線のアイコンは薄いので、ページの本体から目をそらすことはめったにありません。
- メニュー： テキストの代わりにメニューアイコンを導入しています。 アイコンの上にマウスを移動すると、すべてのモジュールが論理的にグループ化され、縦に並んで表示されます。 垂直リストは、水平走査と垂直走査の混在を取り除き、読み取り体験を向上させます。
- リスト名の表示 Vtiger CRMでは、CRMレコードをフィルタリングし、それらのレコードをリストとして保存できます。 目的のリストをクリックすると、フィルタ処理されたすべてのレコードが表示されます。 昨日までは、これらのリスト名は画面に固定されており、表示したい実際のCRMデータの画面スペースを盗んでいました。 また、このスペースクランチはより多くの記録情報を見るために水平スクロールを強いました。 UIの更新により、リスト名はホバーに表示され、選択後に消えます。 これにより、フィルタリングされたデータが多く表示され、スクロール回数が少なくなります。
- ポップアップ： ページデザインを強化し、全体的なユーザビリティを向上させるために、トレンディなモーダルポップアップを導入しています。 CRMアプリケーション全体を通して、これらの新しいモーダルポップアップは常に画面の右側に表示されます。 ポップアップの背後にある元のページはぼやけているため、ポップアップコンテンツに確実に集中できます。 ポップアップ情報を見終わったら、ポップアップを閉じて元の画面に戻って、中断したところから作業を続けることができます。
- アイコンのラベル： レコードビューで、関連するすべてのタブのアイコンラベルを確認できるようになりました。 ラベルは明確にするためにクリックする前に考える必要はありません。
これらはあなたが気付くことになるいくつかのUIの改善です。 明白ではないがより良いユーザーエクスペリエンスを提供するであろう他の多くの微妙な改善があります。 もっと知りたいですか？ 私たちのドキュメントを読んでください。 そして、あなたがUIの改善についてどう感じているかを私たちに知らせるためにコメントをドロップしてください。
