導(dǎo)航和搜索之間的相互協(xié)調(diào)
把網(wǎng)站的搜索欄置于導(dǎo)航欄上,這種不怎么好的實(shí)現(xiàn)方式會(huì)讓用戶(hù)在查詢(xún)上投入更多的精力。
我們有經(jīng)常會(huì)譴責(zé)現(xiàn)在一種用像漢堡一樣的菜單鍵來(lái)取代全局的導(dǎo)航欄,我們可以發(fā)現(xiàn)這反映了一種缺乏對(duì)chrome的簡(jiǎn)單化理念的理解,但人們會(huì)很合理地問(wèn)這樣一個(gè)問(wèn)題,當(dāng)我們有東西要搜索時(shí)為什么還要關(guān)注導(dǎo)航欄?現(xiàn)在搜索已經(jīng)足夠強(qiáng)大了,可為什么還不滿(mǎn)足呢?畢竟,那些成功的網(wǎng)站如谷歌和亞馬遜也是像這樣將搜索展示給用戶(hù),而且在移動(dòng)端一些文字冗長(zhǎng)和容易出現(xiàn)錯(cuò)誤的地方,他們更喜歡用搜索框代替,通過(guò)這樣,使用戶(hù)不會(huì)害怕搜索。
這里有五個(gè)案例來(lái)講解為什么不讓用戶(hù)只依賴(lài)搜索。
1、 只有知道搜索什么才能搜索
想要設(shè)計(jì)一個(gè)好的搜索查詢(xún),用戶(hù)需要清楚地知道他們要搜索什么,他們需要理解并放入正確的關(guān)鍵字。有時(shí)這是很簡(jiǎn)單的,例如當(dāng)搜索最近的超市,大部分的用戶(hù)可以想出一個(gè)好的搜索關(guān)鍵詞,但是當(dāng)一個(gè)不擅長(zhǎng)這個(gè)方面的人正在試圖買(mǎi)一個(gè)新的烤爐或一個(gè)新的剪草機(jī)時(shí),在搜索上他可能需要一些向?qū)В罕热缡鞘裁搭?lèi)型的?屬性特征是和烤爐有關(guān)系的?而剪草機(jī)呢?
類(lèi)別性登錄頁(yè)面經(jīng)常通過(guò)導(dǎo)航欄來(lái)幫用戶(hù)快速得到一個(gè)搜索用的心理模型:什么子分類(lèi)是可用的和什么屬性特征和那個(gè)特別的范疇是有關(guān)系的。用一個(gè)割草機(jī)做例子,去到Sears.com’s Lawn Mowers的首頁(yè)我們可以發(fā)現(xiàn)那里有自動(dòng)推進(jìn)式割草機(jī),手動(dòng)式割草機(jī),無(wú)線(xiàn)和有線(xiàn)的,還有卷割草機(jī),我們還可以清晰的看到這些有關(guān)的要素,還有其他的細(xì)節(jié),例如排放的類(lèi)型和速度。即使這是你第一次來(lái),這些美觀而又全方位的圖片能夠幫助你在搜索割草機(jī)的時(shí)候知道應(yīng)該搜索什么。
2、搜索需要記憶
即使用戶(hù)對(duì)自己需要搜索的東西很熟悉時(shí),搜索時(shí)也需要他們回憶出有關(guān)的信息,想出一個(gè)有意義的查詢(xún),用戶(hù)需要考慮有關(guān)于這個(gè)目標(biāo)的一些特征并在查詢(xún)的時(shí)候合并起來(lái)使用。
導(dǎo)航欄可以通過(guò)識(shí)別來(lái)取代回憶(此處出自10 usability heuristics for ui design ):而不是強(qiáng)迫用戶(hù)想出復(fù)雜的查詢(xún),他們可能只能回憶起很少信息,然而用識(shí)別功能可以增加他們對(duì)有關(guān)聯(lián)的條目的查詢(xún)。用除草機(jī)為例,如果只是搜索可用的工具,你可能要去想出你自己的約束條件然后
把他們轉(zhuǎn)到在這個(gè)網(wǎng)站上可能有關(guān)的項(xiàng)目上。因此你可能要以 “我可能要在這個(gè)過(guò)程中要折騰一番”來(lái)開(kāi)始,然后試圖從回憶起中查詢(xún)匹配的目標(biāo)主題。把用戶(hù)的目標(biāo)轉(zhuǎn)移到一種被認(rèn)為是不太容易的搜索查詢(xún)上會(huì)比簡(jiǎn)單的在頁(yè)面上選擇連接來(lái)說(shuō),會(huì)加重記憶上的負(fù)擔(dān)而且通常都不是太成功。
用Netflix比較Sear的界面。假設(shè)你是一個(gè)14歲男孩,想要看動(dòng)作搞笑而語(yǔ)言上并不是很搞笑的電影。
Nettflix.com:喜劇部分
在喜劇部分中,很難理解哪個(gè)電影是所需類(lèi)型的。你有兩個(gè)選擇:要么仔細(xì)瀏覽列表中的每一部電影直到找到一個(gè)看起來(lái)適合的,或者去搜索框哪個(gè)詞語(yǔ)能夠描述你想要看的電影類(lèi)型?;蛟S“physical comedy PG-13”?或是“Jim carry PG-13”?祝你好運(yùn)!
正如你所看到,這個(gè)過(guò)程比在sear找到好的的除草機(jī)難得多。附加的在NETflix網(wǎng)站上的過(guò)濾器會(huì)使得比列出幾個(gè)次主題目錄下更容易找到一部滿(mǎn)足復(fù)雜標(biāo)準(zhǔn)的電影(在主題下的過(guò)濾器包括青年電影,但是在那里,用戶(hù)仍然不得不去搞清楚正確搜索主題,或者去按照順序?yàn)g覽頁(yè)面上展示的可供選擇的東西)
3、搜索比瀏覽有更多的交互過(guò)程
搜索會(huì)強(qiáng)制用戶(hù)去做更多,因?yàn)樗麄儾坏氤鲈鯓硬樵?xún),還必須自己打字。打字也是有很高的交互的;這樣容易產(chǎn)生錯(cuò)誤、用鍵盤(pán)也會(huì)消耗時(shí)間(在觸摸屏上更多)
搜索的交互所需要的代價(jià)比直接瀏覽高得多。確實(shí)是這樣,一些交互所需的代價(jià)會(huì)因?yàn)樾睦戆凳径鴾p小(如radical ROI improvement on Intranets所展示的那樣),但心理暗示可以使查詢(xún)更通用和簡(jiǎn)單。再加上,很多網(wǎng)站沒(méi)很好地實(shí)現(xiàn)這個(gè)特點(diǎn)。
4、 網(wǎng)站搜索起來(lái)通常效率很低
即使用戶(hù)能夠想到一個(gè)很合理的查詢(xún)關(guān)鍵詞,不巧的是結(jié)果經(jīng)常會(huì)返回一些不相關(guān)的信息。大型搜索引擎在他們背后有復(fù)雜的算法和巨大的數(shù)據(jù)庫(kù)進(jìn)行支持,即使查詢(xún)不能很好地被表示出來(lái),一些有關(guān)的結(jié)果也會(huì)被找到。那在一些專(zhuān)門(mén)的網(wǎng)站通常都會(huì)有。在Netflix搜索physical comedy PG-13和jim carrey PG-13會(huì)返回?zé)o關(guān)的結(jié)果,正如你從下面截屏所看到的。
Netflix.com的搜索結(jié)果不僅復(fù)雜還都是無(wú)關(guān)的。這確實(shí)是真的,我們嘗試了一遍又一遍。
5、人們不知道要如何更好地在網(wǎng)上搜索。
人們對(duì)于搜索得認(rèn)知被大型搜索引擎他們希望每個(gè)進(jìn)行搜索都是一樣的而進(jìn)行了破壞。我們可以看到在e-commerce網(wǎng)站上搜索“dressy comfort shoes size 7.5 black low heel”人完全被獲取的結(jié)果感到迷惑。一些網(wǎng)站試圖對(duì)搜索字符進(jìn)行解析并試圖把它們匹配到數(shù)據(jù)庫(kù)中,但是很多次的匹配是很失敗的,正如你在下面以Zappos為例子看到的。
Zappos.com:“dressy comfort women’s shoes size 7.5 black low heel”的搜索結(jié)果頁(yè)面返回了很多結(jié)果但很多都是無(wú)用的結(jié)果,特別是鞋墊,這點(diǎn)可以在第一頁(yè)看到。
為了比這個(gè)結(jié)果更好一些,會(huì)去搜索一些接近的關(guān)鍵詞(雖然在意思上并不完全一樣)。像下面這些從Autozone找到的例子看出:搜索wipers camry沒(méi)有返回結(jié)果。
Autozone.com:沒(méi)有wipers camry的查詢(xún)結(jié)果。
總結(jié):
網(wǎng)站上的查詢(xún)是至關(guān)重要的,并且可以在搜索中加入一些有趣的特性。
然而,如果你要把搜索放進(jìn)你的網(wǎng)站的導(dǎo)航欄上,請(qǐng)先考慮一下導(dǎo)航欄的重要的用途:它可以向用戶(hù)展示什么是他們可以在這個(gè)網(wǎng)站上找到的,并引導(dǎo)他們理解可以搜索的事物。用導(dǎo)航的分類(lèi)經(jīng)常比只有一個(gè)好的搜索查詢(xún)更快更容易。再加上,很多網(wǎng)站的搜索還做的并不是很好。
原文來(lái)自:Raluca Budiu
http://www.nngroup.com/articles/search-not-enough/
本文地址:http://m.pkvc.cn/tutorial/di2523.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁(yè)設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁(yè)背景效果制作教程
- 龐門(mén)正道:好好玩耍的點(diǎn)線(xiàn)面(上)
- 網(wǎng)頁(yè)設(shè)計(jì)中的常見(jiàn)頁(yè)面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁(yè)設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫(kù):40款為網(wǎng)頁(yè)設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺(jué)設(shè)計(jì)分享—專(zhuān)題頁(yè)面設(shè)計(jì)篇
- 專(zhuān)訪(fǎng):石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類(lèi)
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏