FreshVoice iPhone

FreshVoice iPhoneはANETが開発した企業用のビデオ会議ソリューションです。私はiPhoneアプリケーションをそのデスクトップ製品の既存の機能を使用して再設計する、という仕事を任されました。ここでの課題は、iOSガイドラインの推奨事項に準拠したユーザーインターフェイスを、英語と日本語での一貫したユーザーエクスペリエンスの提供はそのままにして、まったく新しく設計するということでした。

問題の理解

iPhone用FreshVoiceは、必要性に迫られてプログラマーが早急に開発したアプリケーションでした。同アプリケーションの実際のブランディングや全体的なUX、UIデザインには考えが至っていませんでした。それで私がiPhone用アプリケーションを最初から再設計する任務を任されたのです。

デザインプロセス

この場合、機能のすべてはすでに決まっていましたので、ポートレート用とランドスケープ用ビューの両方で使用する際の体験が直感的で迅速で簡単なユーザーエクスペリエンスとなるよう再設計する、というケースでした。

新しいブランド・アイデンティティ

私は同社CEOから、新しいブランドアイデンティティを作る仕事を任されました。国際市場への拡大を目指し、ロゴとカラースキームを西洋のスタイルを持ったソフトウェア企業に共鳴するようなものにしたい、とお考えだったのです。

ログインおよび認証

FreshVoiceユーザーはセキュア・コネクションで設定されており、2段階の認証プロセスを経ないとアプリケーションに到達しません。

サーバーログイン

ユーザログイン

リストおよび支店ビュー

FreshVoiceの企業ユーザーは、自社の連絡先ディレクトリをすでにプリロードされていました。これらの連絡先がさらに個人ユーザーと支店ユーザーに分かれます。

個人の連絡先

支店の連絡先

複数人コール発信、グループ

グループや複数人コールは、 FreshVoiceで最も広く利用されている機能です。この機能を使えば、レイテンシは最小限、クオリティはビデオクオリティで、最高16人への発信が可能です。 iPhoneユーザーが個人と支店ビューの両方において連絡先を簡単に表示できる方法を実現する必要がありました。私はタッチとスワイプのジェスチャーを使ってこれを実現しました。

Invisionのプロトタイプ〜個々のコール

https://invis.io/7B718LJ2M

Invisionのプロトタイプ〜グループコール

https://invis.io/7B718LJ2M

コール状態

個人コールでもグループコールにおいても、コール状態には複数の状態があり、それぞれ別々に設計しなければなりませんでした。私は色のグラデーションを利用し、個人コール（グリーン）、グループコール（ブルー）、とはっきり分かるようにしました。

複数人に発信

個人コール着信

ツーウェイコール着信

複数コール着信（スワイプジェスチャー）

複数人にグループコール発信

複数人によるグループコール着信

複数人によるグループコール着信（スワイプジェスチャー）

通話中のビデオグループ、ページング

通話が開始されたら、参加者が何人在席しているかによって違ったビデオグリッドの表示方法を命じるという高度機能も用意されています。

1対1

3ウェイコール

9ウェイコール

16ウェイコール

ビデオグリッド設定

通話中のナビゲーションは、ユーザーが画面を水平にすると変わってきます。スペースを残しておくためとビデオコールそのものに気を集中してもらえるよう、メニュー項目を各隅にある2つのボタンに移行させました。ユーザーがそれを開けると、類似の画面にナビゲートできました。

水平4ウェイコール ~ ナビゲーションは画面の隅に移動

ページナビゲーション付き16人コール

第一メニューナビゲーションが開かれました

コール詳細メニューが開いています

コール詳細さらなるオプションが開いています

インタラクションデザイン＆アニメーション

通話ナビゲーションをアニメートするのに「Mac用プリンシパル」を使用しました。

通話中 - 高度機能

通話中は、ユーザーにはテキストチャットや文書共有、着信設定、接続状態といった様々なインタラクションのオプションが用意されています。文書共有機能は、よく使われるファイル形式のすべてに対応したものですので、画像やプレゼンテーション、ビデオ用に設計するのに特別な注意をはらう必要がありました。さらに、コール「チェアマン」が文書を同じページやビデオキューポイント、画像ズームと同期させることができるという高度機能も用意されています。