WebとiOSとAndroidのエンジニアが最低限知るべきマルチプラットフォーム対応サービスの仕様とデザインの共通と独立の話
Table of Contents
背景
自分はUI/UXデザイナーでもグラフィックデザイナーでもないBtoC向けサービス作るのが好きなエンジニアです。 今回会社でクライアントエンジニア向けにプラットフォーム横断するサービスのおいてプラットフォーム横断すべき情報とすべきではない情報について考える機会があったので記事にしました。
質問
みなさんはiOSなのにAndroidみたいなアラート、 AndroidなのにiOSみたいなダイアログボックスをデザイナーから依頼されてアラートやダイアログをフルカスタマイズして実装した経験はないだろうか？
私も経験あります。 あれ意味分からないですよね。 メリットよりデメリットの方が大きいです。
例えばアラートと言われたら最初に浮かぶイメージは何ですか？
- Webフロントエンドエンジニア「ブラウザ上部に表示されるしょっぱいボックス」
- iOSエンジニア「画面中央にポップアップで出てくるいわゆるダイアログボックス」
- Androidエンジニア「iOSと同じくダイアログボックス」
もう一つ、エラー通知と言われたら何が浮かびますか？
- Webフロントエンドエンジニア「エラー文言を帯やフォーム毎の下に表示。またはCSSゴリゴリの自作ダイアログボックス」
- iOSエンジニア「アラート、もしくはサードパーティの自作ビュー」
- Androidエンジニア「アラート、もしくはトースト」
表現方法はプラットフォーム間で比べると大きく異なるが、プラットフォーム内で比べると統一されてる
このように同じアラートやエラー通知と言ってもプラットフォームによって表現方法は一致しません。 だけどその表現方法はプラットフォーム毎のユーザーからしたら標準で見慣れた物です。
つまり プラットフォーム間と比べるとバラバラだけど、アプリ内の表現方法は一致してますし、他アプリでも見たことある表現方法です。
この前提の上で次の仕様があったら
「ユーザーに入力不備エラーを通知する」と仕様があったら、各プラットフォームの表現方法は違います。
- Webフロントエンドエンジニア「入力フォームの下に赤文字で文言を表示する」
- iOSエンジニア「アラート(UIAlert)、自作ビューで文言を表示する。文字色は通常色だがエラーアイコンがついてたりする」
- Androidエンジニア「アラート(AlertDialog)、トーストでiOSと似たように表示する」
つまり仕様は3プラットフォーム同じだけど、仕様の表現は3プラットフォーム異なります。
補足：各プラットフォームの表現方法は一例です
例に上げたプラットフォーム毎の表現方法はトレンドやデザインコンセプトによって変わります。 しかし各アプリ内においては統一されています。
もう一度質問、Web, iOS, Android も全く同じダイアログボックスをデザインして使うメリットはあるか？
ない
たとえあったとしても、そのプラットフォームの標準やトレンドからズレた表現をユーザーに見せることで ユーザーはその表現への学習コストがかかる
例えば
アラートのYes/Noボタンの配置はプラットフォームによって異なるバージョンが存在します。 iOSユーザーにAndroid向けのYes/No配置を見せると、iOSユーザーは操作を間違える。 なぜなら他iOSアプリとYes/No配置が逆だから。 これはUX最悪です。
例2
Macアプリであるアプリだけウィンドウ左上の 「閉じる/最大化/最小化」ボタンが右上にあったらどう思うかと同じです。
では仕様満たせばデザインは完全独立していいのか？
サービスデザインにおいてテーマカラーに違反して、サービス全体としての一体感が薄れます。
例えばピンクをベースカラーとしたサービスがあったとする
- そこにLPのデザインの全体色が水色だったら？
- 外部のクレカ決済サービス使うためそこへ遷移したら青色だったら？
もっと簡単に言うと
cookpadのWebアプリ版とiOSアプリ版を見れば分かります。
そもそもデザインは誰向けなのか考える
- AndroidとiOSのデザインをあわせた所で、Androidアプリを使うユーザーからしたらiOSのデザインが合わさってる恩恵は受けません。
- WebとiOSのデザインをあわせた所で、iOSユーザーは見慣れない操作を体験しなければいけません。
- PC版WebとiOSデザインをあわせた所で、ポインティングデバイスが違いすぎてUXは最悪です。
各プラットフォームのユーザーに快適で見慣れて受け入れやすいデザインにしていくべきです。
だけど仕様はプラットフォーム跨いで合わせないと不便になる
WebのSEO強化でユーザー集客し、アプリ版へ導線ひく方法は一般的だと思います。
「Webで使ってみて便利だからアプリも使ってみよう」と思ったユーザーがアプリを使ったところ 「Webで使ってた機能がアプリではない」「Webで覚えた用語がアプリじゃ全然違う用語で使いにくい」 といった残念なUXになります。
まとめ
上記を整理すると
- 全体のデザインガイドラインは全プラットフォーム準拠すべき
- 仕様やUXの表現はプラットフォーム毎に適切でかつ統一した方法にすべき
- 仕様やUXはプラットフォーム横断で合わせるべき（ただし独占仕様などは例外）
