人因工程

博客來的購物車實在很難用…

books.com.tw shopping cart

猜猜看,這張圖的「下一步」在哪裡呢?有在博客來買過書的話,應該就會知道,是在「中間」。

上面有一句話是「商品數量若有更動,請點選網頁任一處即可完成變更」,於是呢,我在輸入了我要的數量了之後,按下Enter。出現了處理中的轉圈圈……然後並不會幫我變更數量。現在是怎樣,可以focus off但是不可以按enter是吧?

是什麼樣的設計師會把繼續的按鈕放在一堆廣告的下方跟另一堆廣告的上方啊?而且色調還跟其他部分長得一模一樣,根本沒有辦法在快速捲動的過程中抓住人類的眼球吧?

再來那個「快速結帳」旁邊有兩個radio button,是給人選擇國內或國外的,預設值是兩個都沒有選擇。然後直接按「快速結帳」的話,會跑出alert視窗。是什麼樣的人做出這種沒有預設值的設計的啊?!下一頁的付款方式跟發票資訊也都一樣,都是沒有預設的radio button,我好像每次買東西都會出現那個要我選擇發票形式的alert視窗…

最後,這個快速結帳,還是要四個步驟,其中會遇到兩次alert視窗陷阱,這樣子到底哪裡快速了…

寬螢幕的網頁人因工程

對不起,我偷偷的買了Dell 2408WFP而沒有跟各位報告。

真的是開始使用高解析度的寬螢幕之後,才發現到有很多網頁的設計,真的很不適合寬螢幕的環境。原本在4:3或5:4的螢幕上看起來好好的網頁,在高解析度的環境下看起來,真的讓人有一種哭笑不得的感覺。在部落格系統上,固定寬度置中的會有版面太寬或太窄的問題,而浮動寬度的也會有太偏左、太偏右、太向左右分散之類的問題。

我原本以為是1920×1200的解析度太過先進,所以問題這麼嚴重。但是在我用了Firefox的Web Developer套件,將視窗縮小到22″常見的1680×1050或是19″常見的1440×900之後,才發現這個問題其實比想像中的大。

廢話不多說,我們先來看圖說故事吧。

20080410_google_analytics_resolution

這是這裡過去一個禮拜的訪客記錄,其中螢幕寬度超過1280的,一共佔了17.1%。也就說,每六個訪客中就有一個可能會碰到以下的窘境。以下網站都是從無名的熱門榜找到的,這些人我應該都不認識才對。為了凸顯問題點,我採用1920的環境來抓圖,這樣子看得比較清楚。

第一部份 固定組

第三名 解析度不要高的話就好了
20080410_解析度不要高的話就好了

這個設計的長寬固定,但是版面被固定在左上角了。如果不是我的螢幕解析度太高的話,這個設計其實還算合情合理。不過在寬螢幕的環境,視線要往左上角飄過去,某程度而言也還蠻擾亂閱讀感的。

第二名 到處都有捲軸
20080410_到處都有捲軸

這個設計是置中長寬固定,但是不知道為什麼擺了一大堆捲軸,而且字還很小。這麼多捲軸,對於沒有滾輪或是不習慣用滾輪的人而言,一定會造成很嚴重的困難。即使是有滾輪的使用者,也會碰到視線被嚴重切割,不知道要從何看起的問題。

第一名 我的眼睛啊啊啊啊啊
20080410_我的眼睛啊啊啊啊啊

超越上面兩組,這個背景活像解放了什麼紅寶石隱藏的能量。我突然很能夠體會天空之城的結局了…

穆斯卡:「我的眼睛啊啊啊啊啊~~」

第二部分 浮動組

第三名 寬螢幕下顯得很有設計感
20080410_寬螢幕下顯得很有設計感

這個設計是向右對齊的,但是呈現在寬螢幕上面的結果卻非常有設計感,活像什麼宣傳小冊子上的感覺。但是這個網站在1280以下的解析度時,看起來就沒有那麼讚了。

第二名 左邊好擠啊
20080410_左邊好擠啊

這個設計是向左對齊,再低一點的解析度的話看起來還沒問題。一般人使用電腦時,視線大多集中在中央或中央靠左,以方便迅速的找到文章的起始點。但是在這樣的設計,眼睛就要多飄20公分,才找得到文章,會不知不覺的累積眼睛疲勞。

第一名 猜猜看文章在哪裡
20080410_猜猜看文章在哪裡

跟上一個版面的設計類似,只是他的文章向左對齊,而側邊欄向右對齊,而且都有設定一定的寬度。這麼一來,打開網頁的一瞬間,視線的中央只有一片白,活像被太陽拳攻擊了一樣…

克林:「我的眼睛啊啊啊啊啊~」

第三部分 特別加映組

特別獎 我是哪裡這是誰
20080410_我是誰這裡是哪裡

失敗的人因工程實例

DSC00031

人因工程中,有一個很重要的原則,是當你要用否定的語氣的時候,要把「請勿」、「不要」之類的語詞,放在要禁止的動作前方。另一個原則是要經常考慮文字的可讀性,例如像上圖,就是難以分辨要先念左邊這一行還是右邊的這一行的例子。

試試看這兩個句子:「將水倒進硫酸,會發生爆炸」跟「請不要把水倒進硫酸」,哪一個容易發生意外?