網站企劃,課程,Axure RP-悠識



2009/10/16

搜尋框 (Search Box) 的設計

搜尋是網路上最常見的行為之一,沒有人會否認站內搜尋功能的必要性。透過良好的站內搜尋功能,網站使用者可以節省點選導覽選單的時間,更快速的找到需要的內容。

好的搜尋功能並不容易開發,有太多搜尋功能上的創意跟想法,必須透過程式技術來完成,也就是說介面的構成很容易,但是程式開發很辛苦!比如 AutoComplete (又稱為Live Search或Smart Search) ,又比如 Search Result Ranking (Google的搜尋結果排名就是了不起的學問)。

搜尋功能的眾多設計要素中,唯一一點跟技術沒有直接關係,跟介面設計有關的部份,就是搜尋框(Search Box)的設計

搜尋框的設計觀念,至少包含三種元素:
1. 一個標籤文字(Label),用來說明這裡是搜尋框
2. 一個Text Field(文字輸入框),讓使用者輸入關鍵字
3. 最後放上搜尋按鈕(Search Button),讓使用者執行搜尋的動作

因此我們會經常看到這樣子的搜尋框構成:
關鍵字:_________ [搜尋]
查詢:___________ [查詢]
Search:_________ [GO]

然而搜尋已經是非常普遍的網路使用行為,以致於在搜尋框前面那個標籤文字似乎沒有太多作用了。因此許多網站為了節省版面空間,幾乎都不標示搜尋框的前置標籤文字了。

你注意到了嗎?下面這些知名網站,分別是Google, Facebook, Yahoo, CNet的搜尋框都沒有放置標籤文字。
Google, Facebook, Yahoo, CNet的搜尋框都沒有放置標籤文字

取而代之的是,直接將提示搜尋的文字,放在Text Field裡頭,當滑鼠游標點擊Text Field則自動清除提示文字,這樣的設計可以達到提示效果,又可以節省版面空間,一舉數得。

大家發揮一下想像力,搜尋框的設計三元素可以被精簡到什麼程度呢?

[細節放大鏡:一次只看一個細節,從中找到問題/啟發/學習。
文章出處:悠識 UserXper.com
同步發表於 Facebook網站企劃 網誌http://faceboo.com/web.plan]




張貼留言

* 為必填,您的email並不會被顯示






留言
Safari hates me