ネットワーク接続状況とUIデザイン
1.挨拶
みなさんこんにちは、クラウドワークスのデザイナー林です。
台湾出身、前職はシステム開発をしているIT企業で、アプリUI/UXデザイナーでした。
私の日本語はずっと独学だったので日本人の日本語をもっと近づいて、ただ勇気を持ってここに来ました。今年からクラウドワークスに入社していただき、3月末までに午前中日本語を勉強しながら午後会社に勤めています！
今はクラウドワークスのUDGチームで、みんなと一緒により良いユーザー体験作りを頑張っています。(カロリーシェアも頑張ろう)*1
2.概要
UIデザインの時、まずニーズの理解、要件の定義から、UIフロー、プロトタイプ、ワイヤー、画面の遷移、インタラクション、ビジュアライズなど、ただ画面を設計するだけではありません。
色々な環境の状態を含めて、考えなければなりません。
例えば、電車で移動しながらスマホを使う時、みなさんが一番よく遭う状況は何でしょうか？
私が常に遭うのは、ネットワークが弱くなってしまう状況です。
日本に来てから６ヵ月ぐらい経ちましたが、一番印象が強いのはやっぱり毎朝の満員電車です。体はもう手しか動かせない〜これが日本文化か！！
しかもネットワークが弱くなるので、アプリのコンテンツが何も見えない！！！！！！
その時は、いつもいらいらして、アプリを見るのを辞めてしまいます。
最近UDGの読書会で読んだ「融けるデザイン」でも、そういう内容が書かれていました。
融けるデザイン
3-9 気持ち良さと悪さ＝自己帰属率の配分
(前略)ネットワークの障害によってウェブページの読み込みが遅いことを「重い」と表現するのは、自己帰属率がシステム側にもっていかれているからと説明できる。自己帰属しないのに「動いて」いて、自己帰属させようにもさせられないものは自己帰属率がマイナスとなり、「動きかたによっては他者と感じる」ことになるだろう。p.120
心理的な側面から見ると、プロダクト（ウェブ・アプリとか）のユーザー体験が下がる恐れがあります。
ユーザーは、「こう触ったらこう動くはずだろう」という期待を持っています。
ボタンを押したのに画面が動かなくて、画面の中に何も現れない！
「今一体どうな状況だろう？」、「アプリがクラッシュしますか？ネットの問題ですか？」という不快な気持ちがだんだん増えてくるはずです。
3. ネットワークの状況分類
SWITCH connection : Wifi ↔ 移動データモバイル通信状況
NO connection : ネットワークが全く繋がらない
WEAK connection :ネットワークが弱い
Wifi FAKE connection : システムが自動的にwifi環境を繋がっているように見えて実際には繋がっていない
Data connection (loading) :コンテンツを読み込む時
ですから、状況によって画面を通じてユーザーに状況を伝えることは大切です。
以下はGoolge Chrome クラシックな事例(2014)です：
Google Chrome Disconnection (2014)
この事例のメリットは：
現在の状況を知らせてくれる
問題解決の方法とリセットの流れを知らせてくれる
面白いゲームが遊べる as long as you want
4. 実際の事例と、よく使われるデザイン（ex:アプリ）SWITCH connection :
シーン：ユーザーがアプリを使っている時、wifi環境をデータ通信に切り替える
ユーザーの通信データ残量を確保するため、ユーザーの操作を中止し、「データ通信をスイッチしましませんか？Yes or No」の選択肢が現れると、ユーザーの意思で操作することができます。
その状況がよくあるアプリ：ビデオ/ゲーム/コミック（イメージのローディングが多い）
私の毎月のデータ量は3GBです。先月にはwifiのswith onを忘れたまま、あるビデオをダウンロードしてしまいました・・・結局当月のデータ量をオーバーして、追加データのチャージをしなければなりませんでした。 （みんな是非気をつけて😇💸！！）
NO connection：
シーンA:：ユーザーがアプリ/ウェブを使用する前にネットが繋がらない
シーンB：ユーザーが使用する途中でネットが切れる場合
WEAK/FAKE connection & DATA(loading)：
シーンA：ネットの接続状況は良いが、イメージ/コンテンツが読み込み中
シーンB：ユーザーが使用する途中でネットが弱くなる
ユーザーに邪魔にならないように状況を伝える
ネット接続が切れるとき、直前に表示されるページの邪魔にならないように、適切なデザインでユーザーに状況を伝えましょう。
(でも小さすぎる toast は見つけ難くなるかもしれませんので、 status bar の高さも一緒に考えた方がいいと思います！)
5.最後に
このテーマはそんなに大きくないけれど、どんな小さなところでもユーザー体験の一環だと思います。
最近は新しいチームのおかげで、本気でユーザーの事を考えるきっかけを得ることができました。
以上、宇宙みたいなユーザー体験を探索しよう！
ご一読いただきありがとうございます！🙇
*1:UDGのお菓子大臣なのでいつも皆んなにお菓子を差し上げている