2017.01.23

【UI/UX】ブラウザ依存に気をつけろ！〜クロスブラウザ観点の大切さ〜

mokabuu

不具合の概要
▼こんな画面つくりました

アクセス時間帯ごとにメッセージが変わるページです。しかし特定のアクセス時間にページを開かないとメッセージが見れないのでは困りますよね。そこで、画面の下部にスライダーをつけて、ユーザーが任意の時間のメッセージを見たい場合は、手動でメッセージを変える事できるようにしたんです。

しかし！これが思わぬ不具合を生みます！

▼コード
HTML5のslider要素に乗っています。

<input id="usr_time" type="range" min="0" max="23" onchange="getMes();" /><span id="hoge"></span>

書いたコードはこれだけ。
sliderの値が変わるとgetMes()が呼ばれてDOMの内容が書き変わると言うものです。凄く単純ですね。

▼不具合の指摘
報告された不具合はこんな感じでした。

そうなんです。開発者は「白いボタン」がスライダーと知っているから良いものの、普段からwebを触らない人ってこのUIわからないんです。典型的なデザインミスの例ですよね。そしてこのスライダーがスライダーと伝わらなかった原因は以下の通りです。

▼不具合原因
[safari]

[chrome]

そうなんです！safariで開いた時に、後ろのバーが見えないのですが、普段からchromeで開発していた僕は、ホームページ公開前にこのUIの仕様不具合に気付かずに公開してしまったのです…。１回でも複数のブラウザで開いていれば気付くことが出来ました。特にWindowsの標準ブラウザであるEdgeとIE11、そしてMacの標準ブラウザであるsafariで動作確認をするのはマストでした…。トホホ…。

今日の教訓
webページを公開するときは、必ず複数のブラウザで動作を確認しよう！

[adsense]

Xからの読者コメントをお待ちしています。
ブログ更新の励みになります！