Archive for August 2007

 
 

HTML特殊字元速查工具

HTML Entity Character Lookup是一支方便的速查程式,使用者直接輸入與HTML特殊字元相似的字母或符號後,程式便立即傳回搜尋結果。例如輸入「c」可以查到「©」,輸入「tm」可以查到「™」,而輸入「E」,可查到「Σ」。

我很愛用在麵包屑(breadcrumb)導引裡的「»」,每次都記不住正確寫法應該是「»」,以前我會去XHTML Character Entity Reference裡面翻找,現在用這個工具就方便很多。(題外話,在麵包屑裡面用大於符號「>」看起來很不對勁,還是「»」順眼)

這麼好用的工具,當然少不了MAC Dashboard widget版本和瀏覽器內建搜尋版本,另外也有一個火狐外掛可以用。作者真是造福人群啊。

10個常見的網站購物車設計問題

SURL(Software Usability Research Lab)重新檢視一份2002年時的電子商務報告,發現其中許多網站購物車的易用性(usability)問題,至今仍然存在,包括:

  1. 用使用者不易瞭解的名詞指稱購物車(Calling a shopping cart anything but a shopping cart or whatever is appropriate for the target users of the site’s location)
  2. 將按鈕標示為「購買」而非「加入購物車」(Requiring users to click “Buy” instead of “Add to shopping cart”)
  3. 當使用者將商品加入購物車時,沒有顯著的視覺提示(Giving little to no visual feedback that an item has been added to the cart)
  4. 使用者每次加入商品後,都被強迫瀏覽一遍購物車的內容(Forcing the user to view the shopping cart every time an item is placed there)
  5. 將物品加入購物車之前,要求使用者購買其他相關產品(Asking the user to buy other related items before adding an item to the cart)
  6. 要求使用者必須先加入會員,才能將商品加入購物車(Requiring a user to register before adding an item to the cart)
  7. 要求使用者將商品數量改為0以移除該商品(Requiring a user to change the quantity to zero to remove an item from the cart)
  8. 使用者必須閱讀指南才知道如何使用購物車的功能(Not making it evident how to update the items in the shopping cart)
  9. 使用者必須捲動頁面才能看到更新購物車的按鈕(Requiring a user to scroll to find an update cart button)
  10. 使用者無法在結帳前得知所購商品(加上運費)的總金額(Requiring a user to check out before showing the final costs including shipping and tax)

以上只是翻譯GUUUI上面的節錄內容,SURL的原文包含了豐富圖表,非常精彩,另外還點出了兩個新的設計問題,包括:1. 安全性 2. 無法在結帳前得知商品是否還有庫存。從事電子商務的朋友們,不可錯過。

XRAY Bookmarklet:檢視網頁元素的Box Model資訊

XRAY Bookmarklet

XRAY是一款可安裝於Safari、Firefox、Camino和Mozilla的bookmarklet(書籤小程式,IE版本尚在開發中),使用者可以用它來檢視網頁中各項(X)HTML元素的Box Model資訊。

只要在原始網頁中,將灰色的「XRAY」連結拖曳到瀏覽器的書籤工具列,便安裝完成了。之後點一下Xray書籤即可進入檢視模式,網頁中會出現一個黑色半透明的視窗,此後只要在網頁的任意元素上面點一下,其box model資訊(元素、id、class名稱、hierarchy關係、position、margin、padding等值)便可在該視窗中一覽無遺。

雖然上次介紹過Web Developer Toolbar裡面也有這個功能,但是XRAY的顯示介面除了較精美外,還很貼心地在黑色半透明視窗的右上角作了一個「關閉」的按鈕,讓使用者不必重新整理頁面即可離開此檢視模式。缺點則是不像WDT會以紅色框線預示選取範圍,遇到較複雜的box model,常要點個幾次才能正確找到自己要看的元素。[via Zeldman.com]

相關套件:
CSSViewer
Aardvark