Mac業界の最新動向はもちろん、読者の皆様にいち早くお伝えしたい重要な情報、
日々の取材活動や編集作業を通して感じた雑感などを読みやすいスタイルで提供します。

Mac Fan メールマガジン

掲載日:

アプリデザインから考える

THEME 17 アプリに隠されているユーザ体験を高める工夫

著者: 宇野雄

THEME 17 アプリに隠されているユーザ体験を高める工夫

少しの工夫で使いやすく

ちょっとした工夫をするだけで、使い勝手をより高めてくれる例が、世の中には溢れています。

私の3歳の娘が最近、家のカギを開けられるようになったんです(といっても、もちろん1人ではできませんが)。器用に開けるもんだと感心していたのですが、よくよく観察していると、そのカギの先端が丸く加工されてあったため、若干鍵穴から反れてもうまく鍵穴へ誘導してくれていることがわかりました。普段あまり意識したことがなかったのですが、こうした少しの工夫が、私たちの生活の中のストレスを軽減させてくれるのですね。

もちろんそうした工夫は、私のようなUIデザイナーが関わる領域でも、とても大事なことです。今回は、iPhoneやMacを使っている中で、ユーザ体験を高めてくれる仕組みを見ていきましょう。

行動を先読み

最近フェイスブックアプリにある機能が追加されました。iPhoneのクリップボードにURLがコピーされていた場合、そのままフェイスブックアプリを開くと、コピーされているURLリンクを投稿するか提案されるという機能です?。単にURLをコピーしたとしても、そのURLを共有したいかどうかはわかりませんが、URLをコピー→フェイスブックアプリを起動というフローを通った場合、そのユーザはコピーしたURLを共有する可能性が高そうですよね? 「もしかしたら次にこの動作をしたいんじゃない?」と予測をして、もしそれが当てはまったとしたら、それは非常に良いユーザ体験を生み出してくれます。

同様の効果を狙ったものがほかにもあります。試しに、Macでヤフーやグーグルなどの検索エンジンを開いてみてください。最初から入力フォームにカーソルが合っているので、わざわざカーソルを合わせる必要なく文字入力が始められますよね?(技術的な仕様上スマートフォンでは不可)。検索サイトなので、文字入力をする可能性が高いという予測のもとに工夫されているのです。

? WEBサイトのリンクをコピーしたあと、フェイスブックアプリ開くと、コピーしたリンクの共有を提案されます(一部WEBサイトでは提案されないようです)。

? ヤフージャパンを開くと、最初から入力フォームに文字カーソルが置かれているため、そのまま文字入力を行うことができます。

数字をカメラで入力

さて、スマートフォンでの文字入力は、昨今画面が大きくなっているとはいえ、まだまだコンピュータに比べると打ちにくく感じる方が多いのではないでしょうか。特に文字数が多いクレジットカード番号やシリアルコードなどの入力は大変です。そこで、最近はスマートフォンの文字入力の手間を極力減らすべく、さまざまな仕組みが用意されています。

たとえば、iTunesカードのコードは16桁もあるため、いざ入力しようとすると、かなり骨が折れます…。そんなときは、iPhoneのカメラでiTunesカードの番号を認識してしまえば、手間がだいぶ軽減されます(Macでも行えます)?。しかも、その認識精度は非常に高いものです。

同様の機能として、サファリでのクレジットカード情報の入力補助機能があります?。ネットショッピングの支払いをクレジットカードで行う場合、カード情報を入力しますが、その際先ほどのiTunesカードのように、カメラでクレジットカードの番号を認識し、入力をすることが可能なのです。

またiOSのサファリでは、WEBサイトのIDとパスワードを保存できますが、それと同様の位置づけで、クレジットカード番号の保存機能もあります。事前にクレジットカードの番号を保存をしておけば、カメラで読み込まずとも、保存している情報をそのまま利用することもできます。もはや、いちいちクレジットカードを出す必要もなくなるというわけです。

? iTunesカードは16桁もあるため、手打ちするのは大変です。そんなときはカメラで読み取ってしまいましょう。

? クレジットカード情報を入力するのは面倒ですが、iTunesカード同様に、カメラで読み取ることができます。その認識精度も高いです。

紛らわしい文字を見やすく

入力しにくい文字列といえば、筆者はまずパスワードが思い浮かびます。仕事で使う共有のアカウントで、パスワードを人に伝えなければならない場合などに、セキュリティを考慮して規則性のないものを発行したとすると、人によっては読み取りに戸惑うこともあるでしょう。そこで、若干矛盾を感じるかもしれませんが「読みやすいパスワード」というものも求められているはずです。その一例として、Macユーザの中では定番といわれる「1Password」のパスワード生成ルールをみてみましょう。

規則性のないパスワードを作成しようとすると、推測がされにくいように英字の大文字小文字数字記号など多くの文字種が混ざるため、表示されるフォントによっては紛らわしいものも多くあります。たとえば数字の「0(ゼロ)」と英字の「O(オー)」、英字の「S(エス)」と英字の「$(ドル)」、数字の「2(二)」と英字の「Z(ゼット)」などが挙げられます。

そのため1Passwordでは、そういった紛らわしい文字は一切使わないというルール設定を作ったり、一定文字数ごとに記号で区切りを作るなどして、視認性の良いパスワードを生成することができます?。これならば、文字入力の際の間違いをある程度防ぐことができるでしょう。

? 1passwordでは、パスワード生成のルールを決めることができます。[紛らわしい文字を回避]にチェックを入れれば、「0(ゼロ)」と「O(オー)」といった見分けづらい文字を避けることができます。

電話番号を見やすく表示

最後に、iPhoneで電話をかけるときの、ちょっとした工夫をお教えしましょう。たとえば電話アプリを開き、キーパッドで電話番号を入力したとします。どこかに書かれた電話番号を入力したとしたら、その番号が合っているかiPhoneの画面と見比べながら確認しますよね? 電話番号は最大で11桁。11桁の数字を見比べるのは少々ストレスがかかる作業です。

そこでiPhoneでは、市外局番+市内局番+残り4桁(通常の電話番号の場合)という形でそれぞれの間にスペースを自動的に空けてくれます?。これなら、最大4桁ずつを比較していけばいいので、非常に可読率が高くなります。しかも、その区切り方は桁数で一律に決まっているわけではなく「0120」だと4桁で、「045」だと3桁、「03」だと2桁というように、きちんとその市外局番のルールにしたがって区切ってくれるというわけです。

今回挙げたのはほんの一例。日々のストレスを減らしてくれる仕組みは、気づかないところでたくさん張り巡らされているのです。

? 電話アプリでキーパッドで番号を入力すると、写真のように、市外局番、市内局番などの間にスペースが空くため、可読性が高まります。

【COLUMN】Facebookの地球儀

フェイスブックアプリ下部のメニュータブの「お知らせ」アイコンには地球儀が使われていますが、ユーザの登録地域ごとに表示分けがされているそうです。たとえば日本のユーザの場合、その地球儀に日本が映るようになっているとのこと。少し前までこの地球儀にはアメリカ大陸のみが描かれていましたが変わったそうです。試してはいませんが、もしかしたらアクセスする場所によっても変わるかもしれません。これはほんの遊び心の一環ではありますが、自国を中心とした地図を見慣れているのはどの国の人でも一緒ですよね。より地球儀という認識をしやすい、良い改良だと思います。

【スポットライト】

iOS 9で、ホーム画面を下にスワイプさせてスポットライトを表示させてみましょう。すると、上記のヤフーやグーグルといった検索サイトのように、最初から入力フォームにカーソルが合っていることがわかります。

【設定】

クレジットカード情報を保存したいときは、[設定]→[サファリ]→[自動入力]→[保存されたクレジットカード]→[クレジットカードを追加]→[クレジットカードを読み取る]で追加しましょう。

文●宇野雄

ヤフー株式会社にてUI/UX設計、デザイン、コーディングなどを担当。まったく新しいモノづくりよりも、すでにあるモノを新しい視点で捉えるデザインが好き。