【怒りのUI】iOSとAndroidの標準UIを比較してみた

こんにちは、デザイナーのスライです。
日サロ行ってるの?とよく聞かれます。
夏ですね。。。

さて、怒りのUIでは過去にiOSとAndroidに使用されている
デザインガイドラインについて記事を書きました。

今回はそれらを踏まえて、標準UIはそれぞれどう違うか、設定画面を主にまとめてみました。
怒りのUI第5回目「iOSとAndroidの標準UIを比較してみた」です。
(※検証環境:iOS 9.3.2、Android 5.1.1)

トグルスイッチ

トグルスイッチの比較
トグルスイッチは、機能のオン・オフを設定する際に利用されます。
iOS、Androidのどちらも殆ど同じデザインです。

実生活で利用する照明などのスイッチと同じで、
右側がオン、左側がオフになっています。

どちらも違和感なく操作できますが、ON・OFFと書かれたAndroidは、
より確実性の高いデザインと言えそうです。

ラジオボタン

ラジオボタンの比較
ラジオボタンは、複数ある選択肢の中から、一つのみ選択させる際に使用されます。
フォームでよく見かけますが、実はiOSの標準UIには存在しません

iOSでは、ラジオボタンに該当するものとして、
チェックマークのアイコンが用意されています。

選択肢をタップすると、右側にアイコンが表示されます。

チェックボックス

チェックボックスの比較
チェックボックスは、複数ある選択肢の中から、複数の選択ができる場合に使用されます。
こちらもラジオボタン同様、iOSの標準UIには存在しません

iOSでは、ラジオボタンの例で挙げたUIと同様のUIが、
チェックボックスに該当するUIとして使用されています。

スライダー

スライダーの比較
スライダーは、通知音のボリュームや、画面の明るさを設定する際に利用されます。
iOS、Androidのどちらも殆ど同じデザインです。

バーの左側に行くと効果が小さくなり、右側に行くと効果が大きくなります。
テレビのボリュームなどと同じUIで、ユーザーは違和感なく使えます。

特徴的なのは、iOSはアイコン、Androidは文字で意味を表しています。
文字で説明しているAndroidは、意味をより確実にユーザーへ伝えられることでしょう。
iOSは「明るさ」を太陽のアイコンで表していますが、文字よりも確実性が弱いと言えます。

キーボード(数字)

キーボード(数字)の比較
キーボード(数字)は、フォームで郵便番号や電話番号など、
数字を入力する際に使用されます。

比較すると一目瞭然ですが、iOSとAndroidは、全く異なるUIと言えます。
以下で、それぞれのUIを考察していきます。
(※フォームで数字を記入させる、というユーザー状況を基に考察)

iOSのUIを考察する

恐らく使用することは滅多にないであろう記号を左下に集約することで、ボタンの数を減らし、
その分一つ一つのボタンが大きく、快適なタップ感を実現しています。

また、「完了」と日本語で表記することで、日本人には直感的に意味が伝わるようになっています。

右手の親指に最も近いボタンは、文字を削除するボタンです。
iOSでは、文字の入力と削除を最優先としていることがわかります。

入力項目の移動と入力完了のボタンは、右手の親指から最も遠い場所にあり、
最も低い優先度
だということがわかります。

なぜなら、入力項目の移動と入力完了は、入力したい項目をタップすることで、
操作することができる(キーボード以外で操作方法がある)からです。

以上のことから、iOSのUIは、ユーザーの最大の目的である「文字の入力と削除」に向けて、
その目的達成の最短ルートを導くものとなっていると言えそうです。

AndroidのUIを考察する

Android最大の特徴は、キーボードのサイズを変更することができるということでしょう。
ボタンは、記号を集約することなく、全てのボタンを表示させています。

文字の表記は、「Next」「Pause」「Wait」と英語になっています
簡単な英単語ですが、日本語よりも直感的に伝わりにくそうです。

Androidでは、右手の親指に最も近いボタンは「Next」となっています。
文字の入力と、次の入力項目への移動を最優先としていることがわかります。

画面サイズが多岐に渡るAndroidでは、片手での操作だけではなく、
両手での操作も想定している
のかもしれません。

以上のことから、AndroidのUIは、文字の入力や入力項目の移動など、
想定される全てのユーザー動作を、まんべんなくフォロー
したものと言えそうです。

iOSとAndroidのまとめ

iOSとAndroid、それぞれのUIを比較し、考察すると、
それぞれが置かれた状況と目的がハッキリと見えてきました。

iOSは、ユーザーの最大の目的を達成する最短ルートを導くためのUI
対してAndroidは、ユーザーのあらゆる目的を救済するためのUI

その背景には、OSの搭載端末の種類も影響していると思われます。

iOSの搭載端末はiPhoneのみで、画面サイズの絞り込みが可能です。
対してAndroidは、搭載端末が膨大で、画面サイズの絞り込みが不可能な状況です。

当然と言えば当然ですが、こうした状況も両OSのUIを大きく左右しています。

まとめ

iOS、AndroidのUIを比較すると、どちらも異なる視点と目的があり、
その目的達成へ向け最善を尽くしたUI
、ということを感じました。

スマートフォンOSとWEBサイトは、直接的には関係がないように感じます。
しかし、そのUIは何を目的としているのか、その目的に至った経緯は何なのか、
などを考えることで、WEBサイトのUIを改善する際の大きなヒント
になってきます。

「WEBデザイン」という先入観を捨てて、周りのあらゆるUIを考察することは、
WEBサイトにおけるUI改善の近道なのかもしれません。