【スマホEFO】ソフトウェアキーボードのユーザビリティ向上テクニック

main

スマートフォンの文字入力は、項目をフォーカスしたときに画面下部に現れるソフトウェアキーボード上で行われます。
PCのキーボードに比べはるかに物理的サイズが小さく、入力内容によっては入力モードやパネルの切替えも必要となります。思い通りに操作できないユーザーにとってはストレスを感じる機会はたいへん多いことでしょう。

しかしながら、ソフトウェアキーボードには、属性値の指定などにより、入力の利便性をかなり向上させるための手法が複数存在しています。
この手法をうまく使えているかどうかが、スマートフォンでの入力ユーザリティを大きく左右するといっても過言ではありません。

本日はそんなソフトウェアキーボードの利便性向上に必須のポイントをご紹介していきます。

それではまずは、ポイントのご紹介です。

ソフトウェアキーボードに関連するテクニックや注意点について、大きく下記の6点にまとめました。

それぞれ順番に解説していきます。

最適なキーボードを表示する

特定の属性をフォームタグに指定することで、スマートフォンでは入力内容に最適化されたソフトウェアキーボードを表示することができます
このブログでも何度かお伝えしておりますし、スマホEFOの基本中の基本の施策とも言えるでしょう。(すでにご存知の方も多いのではと思います。)

ですが、意外とまだまだ対応しきれていないフォームは多いです。
(すべて対応できていないというよりは、電話番号のみの対応など一部適応のフォームが多い印象です。)

今回の記事ではあらためて基本の属性パターンをまとめておきますので、ぜひご担当のフォームは問題なく対応されているかチェックしてみてくださいね。

※今回のキャプチャはすべてiOS7(iphone5)のSafari,Android4(Xperia GX)の標準ブラウザによるものです。デバイスやOS、ブラウザによって表示に若干の差異が生じる場合がございます。

テキスト

通常の入力モードです。ともに日本語入力を表示しています。

input type="text" を指定

input type=”text” を指定

メールアドレス

メールアドレス型の場合、iOSでは英字のほか「@」「.」がピックアップして表示されています。(USキーボード)
Androidは専用のパネルはなく、通常の英数字パネルが表示されているようです。

input type="email" を指定

input type=”email” を指定

電話番号

ともにテンキーが表示されています。入力モードの変更はできないようです。

input type="tel" を指定

input type=”tel” を指定

数字

iOSで数字モードの場合、数字と主な記号が表示されます。(USキーボード)
Androidは英数字パネルが表示されます。

input type="number" を指定

input type=”number” を指定

パスワード

パスワードの場合iosではアルファベットと数字を切り替えるシンプルなキーボードに。
Androidは英数字パネルの表示。ともに入力欄へのマスキングが実施されていました。

input type="password" を指定

input type=”password” を指定

検索

検索フォーム用の属性を指定すると、決定ボタンの文言およびアイコンが検索バージョンに変化します。

input type="search" を指定

input type=”search” を指定

URL

URLのキーボードでは、「/=スラッシュ」と「.」がピックアップされているのが特徴的です。(iOS)

input type="url" を指定

input type=”url” を指定

その他

その他日付(date)や色(color)、範囲(range)などさまざまな属性が存在しますが、各OSやデバイスの対応にばらつきがあるため、紹介は割愛させていただきます。

通常のテキスト入力のほかに、基本的には今回ご紹介した6種類のキーボードを使って入力欄を最適化すると良いのではないでしょうか。

数字入力に注意する

紹介したキーボードの唯一、一筋縄でいかないのが数字入力(Number)のキーボードです。

iOS6以下では以降のバージョンと少し挙動が異なり、使い方によってはユーザビリティに大きな問題を引き起こすため注意が必要です。

例えば

  • iOS5以下では、4桁の数字を入力すると自動的にカンマが入った数値になる
  • iOS6以下では、先頭に0を入力すると自動的に削られる

などの動作となるようです。
この動作があるとすると、Number属性は郵便番号やカード番号、セキュリティナンバー、数字の羅列を伴うIDなどの入力には著しくユーザビリティを低下させるため、利用に適さなくなってしまいます。

ただし、2015/01/19時点でAppleが公開しているiOSデバイスのバージョン別シェアによると、iOS6以前のバージョンシェアは全体の4%以下のようです。

たったの4%ということで、対応を割りきってしまうというのもひとつの方法です。
ご担当のウェブサイトのログデータから判断されるのが良いと思います。

なお、iOS6以前の郵便番号やカード番号の入力欄に対応するには、「pattern=”\d*”」という属性をフオームタグに追加するという方法で回避できるようです。
この属性を追記すると、0から9の数字以外の入力ができなくなります。

input type="text"にpa

input type=”text”にpattern=”\d*”を指定した時のキーボード

ただし数字以外のハイフン等も同時に入力できなくなってしまいますので、この手法を用いる場合はハイフンの入力が必要ない場合に限ります。

オートコレクト、大文字自動変換機能をオフにする(iOSのみ)

あまり馴染みがないかもしれませんが、iOSには独自の機能として、アルファベットの文字列を自動で修正するオートコレクト機能や、先頭の文字を自動的に大文字に変換する機能があります。(英語モードのときのみ有効)
メールなどの文章を入力する場合にはこれらの機能が役立つかもしれませんが、フォーム入力の場面ではユーザーの邪魔をしてしまうことがしばしばあります。

例えば、下記はメールアドレスの入力欄(マークアップはtext)ですが、入力内容が正しいにもかからわずオートコレクトが誤ったサジェストを行い、なおかつ先頭は小文字で良いのにもかかわらず大文字に変換されてしまっています。非常にユーザーにとってはストレスです。

オートコレクトと大文字自動変換の例

オートコレクトと大文字自動変換の例

これら機能はそれぞれ、「autocorrect=”off”」「autocapitalize=”off”」という属性値をフォームタグに指定することでオフにすることが可能です。

「次へ」の挙動に注意する

ソフトウェアキーボードには「次へ」などの文言のボタンがあり、PC用キーボードでいうところのTABボタンのような働きをします。

「次へ」進むボタン

「次へ」進むボタン

このボタンは非常に便利なのですが、ユーザーの入力内容によって入力項目が増えるフォームの場合は注意が必要です。

例えば下記のように、「国」を選ぶことで以降の住所欄が追加されるフォームの場合、「国」の選択後「次へ」を押下すると、追加された項目をを飛ばし、「郵便番号」にフォーカスがあたってしまいます。

国を選ぶことで住所の入力エリアが追加されるフォーム

国を選ぶことで住所の入力エリアが追加されるフォーム

やむを得ない場合もあるとは思いますが、スマートフォンフォームではjavascriptなどによる入力項目の追加はできるだけ行わないほうが、ユーザーにとって優しいフォームといえるでしょう。

「開く」ボタンに注意

お次は「開く(実行、GO)」ボタンに関する注意点です。

「開く」「実行」ボタン

「開く」「実行」ボタン

PC用キーボードでいう「Enter」にあたるこのボタン。
気をつけたいのは、下記のようなケースです。

  • まだ入力途中なのにEnterボタンを押下して送信してしまった
  • 入力の序盤でEnterを誤って押してしまいエラーが大量に表示された

スマートフォンではPCに比べてもこの「Enter=開くボタン」を誤って押下してしまう可能性は高いように思います。

離脱に直結するイライラの元となりうるこのボタンですが、Enterで送信できないようにフォームを設計することで解決できます。

googleのフォームではいくら「開く」を押下しても送信されることはありませんでした

googleのフォームではいくら「開く」を押下しても送信されることはありませんでした

日本語キーボードの切替に注意

最後に、ここまで紹介してきたキーボードの対応ですが、「Email」「Number」などiOSの一部はUSキーボードの配置例であり、
直前に入力していた内容が日本語入力モードの場合は日本語キーボードが表示されてしまいます

「Number」の日本語キーボードの表示例。

「Number」の日本語キーボードの表示例。

この場合は最適化されたキーボートを表示するためには都度USキーボードに切り替える必要があります。

このことから、項目の入力順によってフォームの使いやすさが変化するとも言えると思います。
実際にフォームを入力してみて、一連の流れで使いやすいかどうかをテストすることが非常に重要だと思います。

最後に

いかがだったでしょうか。
本日は、ユーザビリティに直結するソフトウェアキーボードについて、改善のポイントをご紹介しました。

スマートフォンのフォームは、フォーム入力の一連の流れのなかでユーザビリティが左右されることがお分かりいただけたのではないでしょうか。
ただ、キーボードを対応させるだけで終わりではなく、実際にフォームを入力して使い勝手を確かめてみることが非常に重要だと思います。

参考URL

A Guide To Designing Touch Keyboards (With Cheat Sheet) – Smashing Magazine
HTML5 – スマートフォンで数字キーボードに変更する(2015/01版) – Qiita
Apple says iOS 8 now on 68% of iPhones and iPads | 9to5Mac

main

この記事が気に入ったら
いいね!しよう

UI改善ブログの最新情報をお届けします

エフトラEFO機能アイコン

UI改善ブログを運営する株式会社エフ・コードでは
UI改善の基本施策を簡単に実施できる「エフトラEFO」「エフトラCTA」を開発しています。

エフトラEFOサイトへ エフトラCTAサイトへ

UI改善ブログ by f-tra の購読

当ブログの更新情報は以下の各種アカウントから購読できます。

メールマガジンを購読する

ブログの更新情報やセミナーのお知らせなど、
UI改善に関する情報を1~2週間に1回お届けします。

メールアドレスを入力

 購読解除はいつでも可能です
  1. @oneworld

    【スマホEFO】ソフトウェアキーボードのユーザビリティ向上テクニック | EFO・フォーム改善ブログ http://t.co/iu1hYKo9vb 「autocorrect=”off”」「autocapitalize=”off”」は使ったことなかったなぁ。

  2. @n_85

    スマホサイトからの問い合わせフォーム作成にかなり役に立ちます。EFOはCVRアップに重要ですね。 RT 【スマホEFO】ソフトウェアキーボードのユーザビリティ向上テクニック https://t.co/RpBkfl1U7Z