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

Tweet

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

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

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

▼コード
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ページを公開するときは、必ず複数のブラウザで動作を確認しよう！

Tweet

最後まで読んでいただきありがとうございます。もしこの記事を気に入って頂けたようであればシェアをお願い致します。非常に励みになります。

Related posts:

【JavaScript】divにidをふってゲームボーイ的なサムシングを作る①　〜キーボードの値取得編〜 【JavaScript】localStorageを利用してセーブ機能擬きを作る〜RPG作成〜 【wordpress】文字をフェードインさせる！【javascript】 【javascript】【css】犬のメニューバーをお絵描きしました！ 【JavaScript】localStorageを使う時にかませたい２つの判定 iPhoneでリンクが反応しない？ダブルタップ／ダブルクリックしないと遷移しない？ 【PHP】JavaScriptからPHPを呼び出してデータを取得する 【css】イメージマップをレスポンシブル化する！【js】 【JavaScript】ブラウザ判定でIE11がTrident/7.0を返してくれないことがある！ 【Node】Object.fromEntries is not a functionにコンパイルを阻まれた話 fotoramaを使ってみた。 【javascript】時間別にリンク先を変える。【情報基礎】