必ず押さえておきたい!iPhone、Androidのフォーム標準UIまとめ

スマートフォン端末の普及で、PCだけでなくスマートフォン向けにもフォームを最適化する必要性が高まっています。

そこで今回は、iPhoneとAndroidでフォームを表示した際の標準的なUIについてお話しします。
PCとの違いはもちろん、iPhoneとAndroidの間でもUIには差がありますので、
基本のフォームパーツごとにその特徴・違いを紹介していきます。

スマートフォン向けのEFOを考えるうえで大前提となるポイントですので、
この機会にしっかりとおさえておいてはいかがでしょうか。

※検証について
今回検証に使用した端末は、iphone5、Sony Xperia GX(それぞれ標準ブラウザ)です。
それぞれ装飾をできるだけ施していない状態のUIを用意しました。厳密には使用ブラウザやデバイスのバージョン、メーカー等によりUIに変化が生じるとは思いますが、今回は割愛とします。

▼それぞれ初期状態。左がiphone、右がAndroidです。
iphone初期状態Screenshot_2014-02-07-14-54-52

※2015年2月追記
スマートフォンのソフトウェアキーボードについては、下記の記事で詳しくまとめていますのであわせてどうぞ!

【スマホEFO】ソフトウェアキーボードのユーザビリティ向上テクニック
https://f-tra.jp/blog/smartphone/5523

共通する特徴

表示面積

フォーム入力時にはソフトウェアキーボードが現れるため、画面下半分はこのキーボードで隠れてしまい、表示面積がかなり狭まります

狭い画面領域でも使いやすいように、できるだけフォームの構成はシンプルにしたいですね。

積極的に活用したい入力属性の指定

IMG_2281
スマートフォンでは日付や数字、電話番号など入力するデータの属性に合わせて最適な形のソフトウェアキーボードを表示させることができます。
今回の記事では詳しくふれませんが、この機能は積極的に活用していきたいですね。

テキストボックス

それでは、フォーム要素のなかではもっともスタンダードであるテキストボックス(文字情報の入力領域)から見て行きましょう。

iPhoneの場合

iphoneテキストフォーカス時

iphoneではテキストボックスにフォーカス(タップ)すると、その部分がズームインして表示されるようになっています。
この仕様はテキストボックスだけでなくすべてのフォーム要素において共通となります。

拡大されるために入力中の文字が大きくなり見やすくなりますが
逆にユーザビリティが落ちる場合もあるので注意が必要です。

このズームイン動作を許可しないよう設定することもできますので、必要に応じて実施しておきましょう。

Androidの場合

Androidテキストフォーカス時

Androidでは項目タップ時のズームイン動作はありません
自分が入力中の項目を(このデバイスでは)水色の枠線で囲んでくれている点は、UIとしては親切ですね。

ただしあらかじめ入力欄を大きく作っておかないと、文字が小さいままで見にくくなってしまうかもしれません。

プルダウンメニュー

「セレクトボックス」「ドロップダウンメニュー」とも言いますね。
複数の選択肢のなかから1つを選ばせるフォームパーツで、こちらもテキストボックスフォームではよく使われる要素です。

iPhoneの場合

IMG_2282

プルダウンメニューにフォーカスするとドラムロール式のUIが表示されます。iphoneユーザーの方にはおなじみですね。

一度に表示できる選択肢の数は4~5個、というところで、あまり一覧性が高いとは言えないでしょう。
とくに選択肢が多い場合、ユーザーはかなりのスクロールを強いられ、希望の選択肢が見つけられないなどのストレスを生む要因にもなりえるため、注意が必要です。

選択肢が長い場合

ところで、選択肢の文言が長い場合は収まりきらないのでは?ということでテストをしてみましたが、ご覧のとおり2行にわたって折り返し表示されるようです。
全角40字を超えた分はカットされています。

Androidの場合

014

Androidでは画面がグレーアウトし、その上にリストが表示されます(モーダルウィンドウ)。
選択肢が画面いっぱいに表示されるため、iphoneに比べかなり一覧性は高くなっています。

こちらもiphone同様、選択肢が多い場合はスクロールできるようになっていますが、選択肢の内容によってはスクロールできることにユーザーが気づかない可能性が出てきそうですので、注意しましょう。

選択肢が長い場合2

ちなみに、Androidでも文言が長い場合は複数行に表示されていました。全角37文字目(3行目)からは文字の下半分が切れています。

ラジオボタン、チェックボックス

ラジオボタン(オプションボタンとも呼ぶようです)もよく見かけるパーツです。
複数の選択肢から1つを選ばせる、という用途はプルダウンメニューと同じですが、こちらは要素の数が少ないときや一覧性を持たせたい場合によく使われます。(性別の選択やアンケートの選択肢など)

対してチェックボックスは選択肢のなかから複数選ばせたいときに使用するパーツですね。

iPhoneの場合

rajiocheck1

いずれも、ボタンやチェックのマークが大きく表示されるようになっています。
ただし見た目としては美しくないので改善の余地はありそうです。

Androidの場合

rajio2check

こちらも、自動的にボタンを大きくしてくれています。
iphoneに比べてデザイン上もうまく収まっている印象です。

テキストエリア

テキストボックスよりも大量のテキストを入力させたい場合に仕様するテキストエリア。
フォームの備考入力欄などでよく見かけるのではないでしょうか。

iPhoneの場合

写真
入力欄が小さいばかりか、テキストエリア内でのスクロール動作もわかりにくくかなり使い勝手が悪い印象です。
せめて、入力欄は横幅いっぱいに広げておきたいですね。

Androidの場合

Screenshot_2014-02-10-18-24-27
こちらではスクロールバーが表示されることが確認できましたが、いずれにせよ、項目を大きく広げることはユーザビリティ上必須です。

まとめ

いかがだったでしょうか。
本日は、スマートフォンサイトの標準のUIについて簡単な注意点とともにお伝えしました。

次回からこのシリースでは、陥りやすいスマホUIの失敗例や改善のポイントなど、より具体的なスマートフォン向けTipsをお届けしていきたいと思いますので、お楽しみに。

こちらもおすすめです

(※2015年2月追記)

スマートフォンフォーム最大の特徴のひとつである、ソフトウェアキーボード。
キーボードの種類による最適化など、使いやすいフォームづくりに欠かせないポイントについて下記の記事で詳しくまとめています。

【スマホEFO】ソフトウェアキーボードのユーザビリティ向上テクニック
https://f-tra.jp/blog/smartphone/5523

また、下記の記事ではスマートフォンのフォーム最適化の方法を15カ条にまとめてご紹介していますので、あわせてどうぞ。

【保存版】スマートフォンEFO(フォーム改善)のための15カ条
https://f-tra.jp/blog/smartphone/4832

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

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

エフトラEFO機能アイコン

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

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

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

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

メールアドレスを入力

 購読解除はいつでも可能です