"我其實沒有想跳走…"之首頁燈箱的處理方法

最近在做自己的一頁網站放作品,網站有用到燈箱。拿給朋友玩玩做好的網站,朋友用Android手機,進入網站後他打開啟燈箱想關閉,就直接按手機下方的 “上一頁”按鈕,以為這樣會關閉燈箱,但其實不會而是直接跳出網站了!

這樣其實超可惜,因為朋友跳出燈箱本來是想看更多網站內容,但如此直接跳出網站,他就懶得再連進去看了。

後來我發現,其實在桌機、筆電和其他手持裝置的瀏覽器開啟燈箱後按 “上一頁”按鈕也是會有相同狀況。

這種情況有多普遍?

老實說我是自己有用到這種功能才去注意別的網站怎麼做的,不過我很驚訝的發現大多數的網站沒有去處理。來看看這家很酷的新創公司Flitto網站為例,他們在做群眾外包翻譯的社區:

按Flitto首頁的 “Sign up free”或 “Join Flitto translate”按鈕會開啟登入燈箱,但按上一頁後,如果這是入口頁面就會直接跟網站說掰掰了。

再來看看foundi房地產資訊站的做法,foundi是一個以資訊視覺化方式提供房地產資訊的超屌網站。

foundi有比Flitto想得多,他在首頁按登入以後會開啟燈箱,注意在開啟燈箱後網址後面則會從 http://www.foundi.info 變成http://www.foundi.info/# ,這時按 “上一頁”按鈕網址則會從http://www.foundi.info/# 變回 http://www.foundi.info,但不會關閉燈箱也不會跳出網站。很可惜,此時再按一次“上一頁”按鈕還是會跟網站說掰掰了。

整理一下兩個網站的行為,假設皆以首頁為進入點:

Flitto:
1. 開啟燈箱
2.按上一頁按鈕則跳出網站

foundi:
1.開啟燈箱,網址改變
2.按上一頁按鈕網址還原、燈箱仍在
3. 再按一次上一頁按鈕則跳出網站

那甚麼是理想的行為呢?

我想理想的行為會因網站和用戶而異,就我自己網站期望的行為,我希望燈箱對於 “上一頁”按鈕的表現行為是這樣的。

  1. 開啟燈箱,網址改變
  2. 按 “上一頁” 按鈕或 “關閉燈箱” 按紐後,關閉燈箱並將網址還原

以下就是程式了

做法主要是靠這個javascript語法去改變網址:

location.hash

如果你的網站網址是www.website.com,如果寫
location.hash = “1”;
網址就會變 www.website.com/#1

對於這個語法的說明可以參照這個網站,裡面有詳盡的解說。

第一步: 開啟燈箱,網址改變

我們來看看第一步 “開啟燈箱,網址改變” 的寫法。

<script type=”text/javascript”>
var hashname = “123”;
function doclick() {
location.hash = hashname;
}
</script>

很簡單,就寫一個doclick()讓location.hash改變,然後在開啟燈箱的那個元素中,用onclick = “doclick();”去呼叫它。

第二步之1: 按 “上一頁” 按鈕關閉燈箱,移除hash網址

好,現在開啟燈箱了,網網站網址也變成了www.website.com/#123,接下來我們來處理按上一頁按鈕關閉燈箱並移除hash網址。

<script type=”text/javascript”>
window.onhashchange = function() {
if (location.hash.length <= hashname){
關閉你燈箱的method();
}
}
</script>

其實按上一頁時網址本來就會回復,hash本來就會移除,所以這一部分不用處理,要處理的就是關閉燈箱的部分。我們可以用

window.onhashchange

去偵測hash有沒有改變。因為打開燈箱時hash也會改變,但我們只要在按上一頁時關閉燈箱就好,於是我們可以加

location.hash.length <= hashname

來判斷這是在按上一頁。於是整段的程式意思則是說,當hash改變時,如果hash的長度小於等於hashname,則關閉燈箱。

第二步之2: 按 “關閉燈箱” 按鈕關閉燈箱,移除hash網址

按 “關閉燈箱”按鈕本來就會關閉燈箱,所以這一部分我們只要處理網址變回原網址就好。我們來看看javascript。

<script type=”text/javascript”>
function removeHash() {
var scrollV, scrollH, loc = window.location;
if (“pushState” in history) history.pushState(“”, document.title, loc.pathname + loc.search);
else {
// Prevent scrolling by storing the page’s current scroll offset
scrollV = document.body.scrollTop; scrollH = document.body.scrollLeft;
loc.hash = “”;
// Restore the scroll offset, should be flicker free document.body.scrollTop = scrollV; document.body.scrollLeft = scrollH; } }
</script>

要讓hash移除相對比較複雜,還會有不同瀏覽器的跑版和畫面閃爍問題,不過以上我從 stackoverflow 找到這個removeHash的method,寫得很完整,有興趣的人可以點進去看看自己鑽研。

有了這個method之後,現在只要在 “關閉燈箱”按鈕被點擊時呼叫它,例如onclick= “removeHash();”,就會移除hash即關閉燈箱了! 萬歲!

反思

其實這個回上一頁的燈箱問題在功能面而言不是很嚴重,程式人員即使有發現多半也就放在那裏。但如果在使用面來看,我覺得這點小地方就會影響到新接觸網站的用戶使用意願。

然而這個小地方在企劃、UI、UX規劃時其實不容易想到,等到QA驗出來後被程式人員推掉或延後處理的機會很大,我想這也是為什麼現在許多上線網站會有這個問題的原因吧。

我之前有看到一篇文章,裡面有許多設計師分享今年的設計趨勢,很多設計師都說設計和程式的距離會越來越近,產品體驗才會越變越好。他們鼓勵設計師多去嘗試寫基本的程式,也鼓勵寫程式的人跨足簡單的設計,我覺得很有道理。

A single golf clap? Or a long standing ovation?

By clapping more or less, you can signal to us which stories really stand out.