UX/UIデザインカンパニーのオハコがデザインについて発信していくメディア

Powered byOHAKO Inc.

2016.11.11

UI DESIGN

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

はじめまして!
株式会社オハコのアシスタントUIデザイナーの吉川、サーバサイドエンジニアの有馬です。
11月を迎え、本格的に寒い季節になってきましたね。

少し前のことですが、オハコでは自社向けに来客用の受付アプリを開発・導入しました。

今回はこの受付アプリを例に、オハコが考える「UXをしっかり伝達するためのUIデザイン・実装」についてご紹介できればと思います!

(資本提携先のココン株式会社及びグループ会社さんと同じフロアーです。)

受付アプリが入っているiPadpro

受付アプリについて

どんな仕組み?

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

アプリhome画面

導入してみたメリット

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

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

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

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

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

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

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

使いやすいアプリにするにあたり、UXをしっかりと伝達できるUIにするにはどうすればいいでしょうか。
以前ブログに紹介した「UI/UXって何?ノンデザイナーのためのUIUX入門」では、価値が伴っている良いUXがあり、そのUXの伝達のために良いUIを作り、それがユーザーにとって心地良いUXを持つサービスに繋がるとしていました。

今回の受付アプリでは受付に来た際に思わず触りたくなるような、心地良いUIを目指しました!

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

波紋

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

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

  • 選択画面staffボタン押下gif
  • 呼び出しボタンを押した時呼び出しgif

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

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

円のインタラクション

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

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

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

timeoutのgif

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

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

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

  • 状態を伝え、フィードバックを返す
  • 直接操作の感覚を高める
  • ユーザのアクションの結果を視覚化する支援(※iOS Human Interface Guidelinesより)

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

サービスの流れ

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

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

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

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

staff一覧画面

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

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

呼び出しstaff確認画面

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

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

呼び出し中gif

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

まとめ

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

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

最後に

オハコの来客受付アプリの簡単な紹介となりましたが、いかがでしたでしょうか?
今回は「受付」に関わる受け手側(オハコメンバー)と呼び手側(来客)の双方にとって、少し便利になるようなユーザー体験をアプリとして最適なUIになるように表現しました。
ユーザー体験を仕組みとして最適な形にするためには、どんな人にどんなことを提供したいのかを考えながらデザイン・実装をしていくことが何よりも大切ですね。

現在、受付アプリはオハコ専用(未配信)ですが、もし「自社でも使ってみたい!」などの興味がある方はぜひご連絡ください。

EDITOR'S PROFILE

吉川未夏

吉川 未夏

アシスタントUIデザイナー。横浜出身。多摩美術大学美術学部情報デザイン学科16年度卒。大学ではサービスデザインを専攻し、グラフィックやアプリのデザインを学ぶ。最近はユニクロのオフィスファッションにはまっています。

RELATED POSTS