モバイルの入力UIをデザインするための7つのポイント

Ning T.

Ning T.氏はProto.ioのコンテンツエディターであり、人類学者、ウェブデザイナー、そしてUXオタクでもあります。私は、猫やブルース、スウィング ダンス、そしてWes Anderson氏の映画が大好きです。

この記事はProto.ioからの翻訳転載です。配信元または著者の許可を得て配信しています。

Designing For Mobile User Input

私たちはいまや、何をするにもスマホを使います。家の温度調節から医者の予約まで、労力をかけることなく手のひらの上で行おうとしているのです。スマホと数々のアプリによってそのような未来が来るのはほぼ確実と言っていいでしょう。

しかしながら、実際にはまだまだ問題点も残っています。私たちは割と頻繁に、スマホ入力の煩わしさに悩まされています。

例えば、絶望的に分かりにくいログイン画面や入力フォームなどです。そういうとき、私たちはスマホを使うことを諦めて、パソコンを使います。残念なことにスマホアプリやスマホ用のサイトはスマホユーザーが入力しやすいように最適化されているとはいえません。

Luke Wroblewski氏はこのことを「モバイルデバイスでコンテンツにアクセス可能にするための戦いはまだ半分しか終わっていない」と述べています。

ユーザーは日常生活の中で日に日にスマホに頼るようになっており、そこには可能性があります。デザイナーはアプリの入力をしやすくするためにもっと努力をしなくてはなりません。そのために、まずはアプリの入力にどのような制限があるのか理解し、これを克服するための最良のデザインを考え、導入しなくてはなりません。

1. 最適なキーボードを使用する

スマホ入力はデータの種類に応じて、ユーザーが入力しやすいように複数のキーボードを用意しています。これらを使いこなすだけでアプリの良し悪しが決まるわけではありませんが、スマホの体験をより素晴らしいものへと変えることができます。

例えば、電話番号などのように数字だけを入力する箇所では、数字キーボードを提供することが効率的です。入力が「電話番号」なのか、ただの「数字」なのかもはっきりさせておく必要があります。数字だけを入力する場合には、電話番号に必要なハイフンなどを表示するとユーザーを混乱させてしまうでしょう。

2. ネイティブのUIコントロールを理解する

スマホユーザーの入力画面をデザインするには、iOSとAndroidの両方のプラットフォームに通じていることが要求されます。それぞれのプラットフォーム特有のデザインスタイルやネイティブのUIコントロールについて理解し、考慮にいれることが重要です。

native-ui-controls-mobile-user-input

見たことのないような方法を取り入れて、ユーザーが離れていくようなことがあってはいけません。しかし、iOSとAndroidの境界線が時に曖昧なことがあります。そのようなものの一つにGoogleがデザイン素材として導入したフローティングアクションボタン(FAB)があります。

FABは多くのAndroidアプリで取り入れられており、iOSアプリでもFABやそれに類似したカスタムコントロールが少しずつ取り入れられています。FABがiOS開発者の間で受け入れられるかどうかは今後を待たなければ分かりません。

3. 入力箇所に文字ラベルを表示する

スマホユーザーにとって、自分がなにを入力しているかを可視化してあげることは非常に大切です。入力箇所の左側に文字ラベルを表示することはウェブサイトの入力フォームでよく見られますが、これは入力しているテキストを隠してしまいます。スマホユーザーは自分が入力している文章をすべて見れるとは限らず、しばしばタイプミスを犯します。これは実に大きな問題です。

例えばAlexander Montgomery McMillan-Altmanという名前の人がいて、あるアカウントに登録しようとしているとしましょう。可哀想なAlexander氏は入力箇所に自分の姓を見ることはできません。

alexandermontgomery

モバイルデバイスで文字ラベルが左側に配置されていいのはタブレット端末を横向きにしたときのみです。タブレットなら、画面はより広く、長い入力でも表示することができます。

4. ソーシャルメディアへのログイン方法と統合する

私がJavascriptの学習コースを受講していたとき、何度も何度も同じことをタイプしなければならなかったのを覚えています。メールアドレスとパスワードを入力してサインアップしたりログインしたりすることも、まさにそのようなものです。

文字入力はスマホユーザーのユーザー体験の中でも最も面倒くさいものでしょう。スマホユーザーはタイピングが嫌いであり、なんとかしてそれを避けたいと考えています。ですから、開発者やデザイナーはユーザーをうんざりさせたり不満に思わせないために創造的な方法でこれを解決しなければなりません。

ソーシャルログインは、この面倒なサインアップやログインのプロセスを省くための素晴らしい方法です。これはユーザーの基本データを集めるのにも役立ちます。スパム対策や広告メール用として複数のメールアカウントを持っていることはよくあることですが、よく利用するFacebookやTwitterのアカウントを複数持っているということは希だからです。

social-login-designing-for-mobile-input

5. 初期値や自動補完を利用する

ユーザーのほとんどが米国に住んでいるなら、居住国の入力欄に米国を初期値として表示すると良いでしょう。伝統的に使われている、恐ろしく長い居住国表示のドロップダウンメニューは、携帯においては頭痛の種です。

Googleの検索エンジンばかりでなく、多くのウェブサイトや携帯アプリでは自動補完機能をうまく利用しています。検索フォームを埋めなければならないような旅行会社のアプリなどの場合は、スマホユーザーに入力をうながし、ユーザーを逃がさないためにどうすれば良いか、よく理解している必要があります。

skyscanner-flight-search-form-mobile-user-input

6. 可能ならショートカットを作成する

スマホユーザーの利便性を高めるための最良の方法の一つの例は、Slackの「Magic Link」です。パスワードとして、例えばn3R|)z4ev3r.y3ahといった文字列を入力することは実に面倒なものだということをSlackはよく理解していました。スマホアプリでこのようなパスワードを毎回正確に入力できる人などいるのでしょうか?

SlackはiPhoneやAndroidデバイスでSlackアプリにログインできる「魔法のリンク」を送ることで、この面倒を避けられるようにしました。

スマホユーザーのストレスを和らげ、より快適な入力をしてもらうための方法として、ジェスチャーや音声入力を利用する方法もあります。もちろん、ユーザーにその方法を学習してもらい、ユーザーのオンボーディングにおける行動プロセスを徹底的に定義しておく必要があります。

多くのメールアプリでは、スワイプジェスチャーで更なるアクションを表示したり、引っ張ることで更新できるようにするなどして、この方法を取り入れています。音声入力もスマホユーザーを惹きつける大きな可能性を秘めています。いつもタイピングができるように手が空いているわけではありません。

たとえ手が空いていたとしても、音声で携帯デバイスに話しかけるだけで操作ができるなら、非常に便利です。WhatsAppの音声メッセージ機能やiOS9で改善されたSiriの機能は音声入力機能をうまく利用しています。

7. ユーザーにアプリの試用期間を提供する

ダウンロード後、直ちに会員登録を要求することはメールマーケティングのためには有効かもしれませんが、スマホユーザーの入力を楽にするという点や顧客を維持するという点では、あまり良いものではありません。

ユーザーは単に友人にそのアプリをチェックするように勧められただけかもしれません。見つけたアプリをたまたまダウンロードしただけかもしれません。どんな場合でも、いきなり詳しい情報を尋ねられると良い気分はしません。

Webサイトを訪れた場合を考えてみてください。サイトに入るなり、サインアップするように妨害されることはありません。通常、製品に関する情報が表示され、機能の優れている点についての説明があり、そうしたものを見ていく中で、14日間の試用のためにメールアドレスを入力するよう何度か促されることでしょう。

同様に、アプリを試用する機会を与え、優れている点について理解してもらった後に、「気に入りましたか? もっと利用するためにサインアップしましょう!」と画面に表示すれば良いのです。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて