マルティスープ
Staff Blog

2022.09.30

地図のブックマーク(位置保存)機能にみるUI作成の流れ

みなさんこんにちは。マルティスープ株式会社 UI/UXチームです。

2022年2月、iField Web v4.6.1で地図表示のブックマーク(位置保存)機能を追加しました。

こちらはよく表示する地図の中心座標・ズームレベルを名称付きで保存でき、いつでも簡単に呼び出すことができる機能です。

本機能を例に、デザインが確定するまでの流れや、普段どういうことを考えて検討を進めているのかをご紹介いたします。

本機能の必要性や背景について

当初、iFieldは地図のホームポジションを1つ決めることができました。

しかし、iFieldを導入していただく企業様が増えていくにつれ、点在する現場を持っていたり、注視したいエリアが複数ある企業様も増えてきました。

その場合、見たい場所へ毎回地図を移動させ、各現場やエリアを確認するのは使いにくく、「よく表示する地図の位置や見たいサイズを保存し、その場所へすぐ移動ができる」地図のブックマークのような機能が必要となりました。

UIとUXで検討が必要なポイント

新たな機能を追加する際に確認・検討したポイントは主に下記です。

※検討開始時点では詳細まで詰まっておらず、新たに確認するポイントがでてきたりと、進めていきながら詰めて行きました。

• 利用者像(ペルソナ)
• 利用シーンや使用フロー
• 機能の配置場所
• 機能のカタチ(入口)
• 機能の操作性
• 機能のボリューム
• 他機能のデザインや操作の整合性
• 今後のiField
• etc…

案出し

今回一番悩んだのは機能のカタチ(入口)と操作性かもしれません。

利用者がそのボタンを押すとどんなことができるのかイメージでき、迷わずに操作が行えることと、操作は保存の新規追加が簡単に行え、保存したものはすぐ使える必要がありました。

最初から両方を表に出すのがベストですがスペース的な制限もありかなり悩みました。

何よりその機能があること事態を知ってもらうことも重要と考えました。

追加する機能について、UIやUXを検討する際、世の中に出ているいろいろなサービスを参考にさせていただいたりもするのですが、今回の機能は他の地図サービスであまり見られないタイプのものになると思います。何かを保存するという行為は、お気に入りやブックマークの登録等、様々なサービスで経験されていると思うのですが、地図に対して多くの方はその経験がないことに配慮しデザイン案を検討していきました。

【ボツ案の例】これは一番最初の案です。わかりやすいが、場所をとり今後の機能拡充に支障が出てしまう。また保存したものがすぐに使いにくいということでボツ。

社内共有&ご相談

作成したいくつかの案をUI/UXチーム内・開発チーム・CSチームと適宜打ち合わせを行い、多くの方々からご意見をいただき、修正や仕様を固めていきました。

ご協力いただいた方々、また短い期間で機能を実装していただいた開発のみなさんにこの場を借りてお礼を申し上げます。

地図のブックマーク(位置保存)機能のご紹介

最後に、最終的にリリースされた本機能を簡単ではありますがご紹介いたします。

地図の位置を保存をするイメージを持っていただけるよう、ブックマークアイコンを地図のホームボタン横に配置しました。このボタンをクリックします。(初期は以下のようにOFF)

クリックするとブックマークバーが展開します。まだ何も登録されていない初期状態の場合は操作方法の説明を表示します。

地図を、表示したい位置や大きさに合わせたら、バーの一番左のボタンをクリックし、タイトルを記入して保存します。

保存した位置がボタンとして追加されます。これで地図で別の場所を表示させていても、このボタンをクリックすれば、すぐに保存した位置に地図を移動させることが可能です。

同じ要領で、他にもよく見る地図の位置を保存するとボタン1つで表示をすぐ切り替えることができます。

位置の保存はいくつもでき、バーに並んでいきます。順番の入れ替えもドラッグ&ドロップで可能です。

是非この機能を使っていただき、もし何かご不便等ございましたら適宜ご要望いただけますと幸いです。

引き続きiFieldを宜しくお願いいたします。