ケーススタディ

来客受付アプリから見る、UXをしっかり伝達するためのUIデザインの考え方

オハコで以前開発した来客用受付アプリの仕組みと運用、デザインをした事例についてご紹介します。
読了目安:6分
avator
Misaki Akimoto
2018-11-12

来客対応をよりスムーズに。 今回は、オハコでの実践をご紹介していきます。

オハコでは以前、自社向けに来客用の受付アプリを開発・導入しておりました。 2018年現在はオフィスの移動などの事情もあって実際に利用はしていませんが この受付アプリを例に、オハコが考える「UXをしっかり伝達するためのUIデザイン・実装」についてご紹介できればと思います。

受付アプリについて

どんな仕組み?

この受付アプリは、訪問者が案内に沿ってアプリを操作することで、社内のチャットシステムへ来客の通知が送られるようになっています。(なかなかの好評を頂いております!)

導入してみたメリット

電話対応のコストを下げられた

今までオハコでは受付の電話が多く、誰宛てなのかすぐに分からず対応が煩雑になりがちでした。 また、近くの人が電話を取れないと時間がかかってしまう問題がありました。

そこで受付アプリを導入することで、受付からの電話を減らしつつ、メンバーを個別に呼び出せる仕組みを作ることで電話対応のコストを下げることが出来ました!! (Slackを使って応対しています)

執務スペースに居なくても当事者が取れるようになった

リフレッシュスペースにいる時や打ち合わせ中の場合、そもそも電話が存在していないため応対することができませんでした。 特にお昼時の来客ですと、電話の近くに誰も人が居ないときがあり、受付にいらっしゃった方を無駄にお待たせしてしまうこともありました。

このアプリを導入したことによって応対場所の制約が無くなったため、受付の課題点が劇的に減りました。

意味のあるUIをデザイン・実装するためのポイント

使いやすいアプリにするにあたり、UXをしっかりと伝達できるUIにするにはどうすればいいでしょうか。 価値が伴っている良いUXがあり、そのUXの伝達のために良いUIを作る。それがユーザーにとって心地良いUXを持つサービスに繋がると私たちは考えています。 今回の受付アプリでは受付に来た際に思わず触りたくなるような、心地良いUIを目指しました!

1.視覚的に楽しませるエフェクト

波紋

今回の受付アプリでは波紋のようなエフェクトを多く使用しています。これは波紋の広がる様子で、受付アプリが通信していることを表現しています。 (これはZFRippleButtonと呼ばれるライブラリを用いて実現しています。)

このような動きのあるエフェクトは、視覚的に楽しませる効果があると同時に、ユーザーに今何が起こっているのか動作で説明することができます。オハコに来た際にはぜひ触ってみてくださいね。 波紋のエフェクトは以下のように、次に画面が遷移する場面で使われています。

選択画面

2.次の行動が分かる仕組み

もしも呼び出し中の画面がずっと続いていたらどうでしょうか。 連絡はきちんとできているのか、どのくらい待てばいいのか。不安が残りますよね。 現在の状態をUIで表すことで、ユーザーにどんなアクションを次にすべきか伝えることができます。

円のインタラクション

呼び出し操作をすると、対応までの待ち時間を表す円形のプログレスバーが表示されます。 (Pulsatorと呼ばれるライブラリを用いて実現しています。)

これはユーザーに待ち時間の目安を伝えることができ、エフェクトを工夫することで退屈な気持ちにさせないことが目的です。

このように適切なUIはユーザーによりよいユーザビリティを与えるのに役に立ちます。

つながらなかった時も一定の時間が経つとタイムアウトが表示されるようになっています。 これもユーザーに現時点の状態を伝えるためです。

エフェクトを入れる際のポイント

アニメーション(エフェクト)を使うことで文字に頼らず動作で説明が出来ます。 アニメーションの主な効果は以下の3つがあります。

  • 状態を伝え、フィードバックを返す
  • 直接操作の感覚を高める
  • ユーザのアクションの結果を視覚化する支援(※iOS Human Interface Guidelinesより) 効果的に使うことでユーザビリティを上げることが出来ますが、過剰であると混乱の元になるかもしれません。

闇雲にエフェクトを使うのでなく、ユーザーがどんな場面でエフェクトを使った効果があれば心地良いと感じるのか考えることが重要ですね。(ここはデザイナーの私も日々勉強しなくてはと思います)

サービスの流れ

受付をするまでのフローは以下の3ステップになっています。

  • 一覧画面からスタッフを選択
  • 確認画面で確定する
  • スタッフからの連絡を待つ

今回は「スタッフとお約束のお客様」の場合の実際の操作をご紹介いたします!

【ステップ1】一覧画面からスタッフを選択

メイン画面から一覧画面へ移動すると、スタッフの顔と名前が表示されます。 皆さんいい笑顔ですね!

【ステップ2】確認画面で確定する

スタッフをタップすると、呼び出し画面が表示されます。もし操作を間違えてしまっても戻れる仕様になっています。 次にスタッフに間違いがなければ呼び出します。(ちなみに写っているのは代表の菊地です) ※面接の方と業者の方の場合すぐに連絡されます。

【ステップ3】スタッフからの連絡を待つ

このあとしばらくお待ちいただき、スタッフの対応準備が完了すると画面が切り替わります。 スタッフからの反応があればそのまま担当者を待ちましょう。 これで受付操作は完了です!

さいごに

このような流れで必要最低限の手順でスタッフを呼び出す仕組みを作っていました。 対人でのコミュニケーションが取れない分、いかにユーザーにミスなく目的の人を呼び出してもらえるかが重要になってきますね。 今回は、各遷移ごとに操作の適切なフィードバックとなるエフェクトを使うことで、ユーザーに現時点で何が起こっているのかといったステータスを視覚的に理解できるようにデザインしました。

誰が何のために使うのか、どのような場面で心理的な不安を取り除いて心地よさを感じてもらえるのかを考えることで、ユーザーにとっての使い心地を向上させることができるのではないでしょうか。

※2018年11月現在、移転先フロアの関係で使用されていません。

UIデザイン
UXデザイン
デザインパートナーをお探しではありませんか?
オハコはデザインと実装の力で、サービスをゼロから形にするデザインコンサルティング会社です。 サービスの成長から逆算し、最適なプロジェクトをデザインします。
デザインについてのご相談は下記よりお問い合わせください。
avator
Misaki Akimoto
プロダクトマネージャー/ Product Huntをチェックするのが日課です^^