建站常識(shí)
用戶是如何瀏覽你的網(wǎng)站的
2010-04-26 15:51:00
事實(shí)上,互聯(lián)網(wǎng)用戶瀏覽網(wǎng)頁(yè)的習(xí)慣和顧客瀏覽商店中物品的習(xí)慣沒有多大差別。用戶打開一個(gè)新的頁(yè)面,掃視一些文字,并點(diǎn)擊第一個(gè)引起他興趣的鏈接。在這過程中,頁(yè)面上有大量的區(qū)域用戶甚至完全沒有看過。大部分用戶在頁(yè)面上尋找他感興趣且可點(diǎn)擊的內(nèi)容,一旦發(fā)現(xiàn)目標(biāo),點(diǎn)擊行為就會(huì)發(fā)生,但如果頁(yè)面不符合期望,后退或關(guān)閉按鈕也將馬上被點(diǎn)擊。
用戶是如何瀏覽你的網(wǎng)站的
1. 大部分時(shí)候用戶并非在閱讀屏幕上的內(nèi)容,而是在掃視。
用戶習(xí)慣掃視和快速尋找頁(yè)面上一些能夠引導(dǎo)他理解內(nèi)容的關(guān)鍵點(diǎn)。
2. 不要考驗(yàn)用戶的耐心
當(dāng)一個(gè)頁(yè)面不能滿足用戶的期望時(shí),離開就在所難免。希望通過添加相關(guān)內(nèi)容來豐富頁(yè)面和留住用戶往往效果不佳甚至適得其反。一屏頁(yè)面上承載的信息越多,認(rèn)知的負(fù)擔(dān)就會(huì)越重,就需要花費(fèi)更多的時(shí)間去處理信息,如果這些信息中還有些不是用戶期望的,那就還要花額外的精力將這些多于信息從注意力中剝離。Jakbo Nielsen 的研究結(jié)論也表明:一個(gè)頁(yè)面上的認(rèn)識(shí)負(fù)擔(dān)越重,導(dǎo)航和瀏覽就會(huì)越困難,用戶離開并尋找其他替代品的可能性就越大。
3. 用戶并不做最佳選擇
用戶并不是在搜尋找到最佳選項(xiàng)的最快途徑,他們也并非用線性的方式來閱讀屏幕上的內(nèi)容(有順序地從一個(gè)模塊到另一個(gè)模塊)。當(dāng)用戶找到第一個(gè)合理的選項(xiàng),或者一旦找到了可能的目標(biāo)內(nèi)容,立即點(diǎn)擊的可能性會(huì)非常大。其實(shí),用戶是在尋找能讓他們覺得夠用或者合適的內(nèi)容,而非尋找最佳的選擇,理由也很直觀,讓用戶自己去做最佳選擇需要花費(fèi)不少時(shí)間和精力,那已經(jīng)在考驗(yàn)用戶的耐心了(選擇即成本)。
來自 eyetools 的圖片,可以看出用戶瀏覽時(shí)的關(guān)注點(diǎn)和非線性的瀏覽軌跡。
Jakbo Nielsen的F形瀏覽熱區(qū)
Jakbo Nielsen曾對(duì)232位用戶瀏覽幾千個(gè)頁(yè)面的過程中的眼動(dòng)情況進(jìn)行追蹤,發(fā)現(xiàn)用戶在不同站點(diǎn)上的瀏覽行為有明顯的一致性,將瀏覽熱點(diǎn)可視化后呈現(xiàn)出類似F形的圖案。這種瀏覽行為有三個(gè)特征:
1. 用戶首先會(huì)在內(nèi)容區(qū)的上部進(jìn)行橫向?yàn)g覽。
2. 用戶視線下移一段距離后在小范圍內(nèi)再次橫向?yàn)g覽。
3. 最后用戶會(huì)在內(nèi)容區(qū)的左側(cè)做快速的縱向?yàn)g覽。
PS.顯然,用戶的瀏覽行為并非精確的包含這個(gè)三個(gè)過程,有時(shí)候,在這三個(gè)過程之后,還會(huì)在底部有橫向?yàn)g覽的熱點(diǎn),使得整個(gè)瀏覽熱區(qū)圖看上去更像E而不是F。也有時(shí)候,用戶瀏覽時(shí)只反應(yīng)了上述的行為1和行為3,使得瀏覽熱區(qū)圖像一個(gè)倒寫的L。但從所有數(shù)據(jù)整體上來看,用戶的屏幕瀏覽熱區(qū)圖還是較一致地反應(yīng)出了F圖像。
如何運(yùn)用F形閱讀行為進(jìn)行設(shè)計(jì):
1. 用戶并不會(huì)瀏覽頁(yè)面上的所有內(nèi)容(F形之外的大片空白區(qū))
2. 將最重要的信息放在頭兩段(F熱區(qū)中的兩個(gè)橫向熱區(qū))
3. 在后續(xù)的內(nèi)容中,將關(guān)鍵詞和信息放在段首,使用戶在左側(cè)縱向?yàn)g覽時(shí)能更容易關(guān)注到。
總結(jié)和啟示
1. 用戶習(xí)慣掃視,而不是閱讀
2. 用戶并不會(huì)關(guān)注到頁(yè)面上的所有內(nèi)容
3. 不要考驗(yàn)用戶的耐心,不要增加用戶的認(rèn)知負(fù)擔(dān)
4. 用戶并不做最佳選擇
5. 用戶在屏幕上的瀏覽熱區(qū)整體上符合“F形”
6. 針對(duì)F形瀏覽行為,將最重要的信息放在上部,將相關(guān)的關(guān)鍵內(nèi)容和信息放在內(nèi)容區(qū)左側(cè)。
參考文獻(xiàn):
1. F-Shaped Pattern For Reading Web Content, by Jakbo Nielsen
2. Common Email Layouts: B2C Electronics Template, by Teresa Hernandez
3. But What Does It All Mean? Understanding Eye-Tracking Results, by Teresa Hernandez
近期更新
- [2023-06-25 23:22:29] 優(yōu)秀網(wǎng)站設(shè)計(jì)的五大特點(diǎn)
- [2023-04-27 14:05:55] Html 5 響應(yīng)式網(wǎng)站設(shè)計(jì)制作
- [2023-04-10 11:07:30] 網(wǎng)站建設(shè)制作流程知多少
- [2022-10-14 10:11:30] 做網(wǎng)站設(shè)計(jì)應(yīng)該更看重框架搭建還是視覺觀感?
- [2022-08-09 15:57:48] 以“產(chǎn)品”思維搭建網(wǎng)站!
- [2022-08-08 09:12:57] 一家公司的網(wǎng)站應(yīng)該有哪些板塊內(nèi)容?
- [2022-08-05 09:28:06] 企業(yè)網(wǎng)站建設(shè)為什么要設(shè)置新聞板塊?
- [2022-07-04 15:58:06] 網(wǎng)站首頁(yè)設(shè)計(jì)的好看,這個(gè)網(wǎng)站就成功了一大半!
- [2022-05-20 09:34:19] 網(wǎng)站后臺(tái)管理系統(tǒng)是什么?有什么作用?
- [2022-05-17 11:29:32] 作為消費(fèi)者,應(yīng)該如何選擇一家水平高的網(wǎng)站建設(shè)公司
- [2022-05-17 11:27:01] 高端網(wǎng)站定制與模板化網(wǎng)站應(yīng)該怎么選擇?
- [2022-04-22 16:00:41] 現(xiàn)在高端的網(wǎng)站設(shè)計(jì)都有哪些新的趨勢(shì)?
延伸閱讀
- [2009-12-10 08:36:00] 賬戶注冊(cè)的8個(gè)小貼士
- [2009-06-23 14:22:00] 如何設(shè)計(jì)廣告的用戶體驗(yàn)?
- [2020-12-09 17:25:44] 網(wǎng)站顏色對(duì)于網(wǎng)站建設(shè)來說有什么樣的影響?
- [2010-11-11 08:27:00] 內(nèi)部系統(tǒng)也需要用戶體驗(yàn)設(shè)計(jì)
- [2009-06-15 14:38:00] 再談交互設(shè)計(jì)、用戶體驗(yàn)設(shè)計(jì)工作
- [2008-01-04 15:11:00] 800分辨率下網(wǎng)站如何搭配才可以提高體驗(yàn)度
- [2009-04-23 08:05:00] 趙小姐的二三事
- [2009-10-15 22:20:00] 小談?dòng)脩羯眢w語(yǔ)言的閱讀經(jīng)驗(yàn)
- [2010-04-26 14:22:00] 把簡(jiǎn)單留給用戶
- [2007-10-30 14:53:00] 三大招聘網(wǎng)站之用戶體驗(yàn)比較
- [2010-05-17 17:15:00] 為線框圖多留點(diǎn)時(shí)間
- [2007-11-23 10:58:00] 用戶體驗(yàn)的基本理論普及
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計(jì)解決方案 機(jī)械行業(yè)網(wǎng)站設(shè)計(jì)解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 科技企業(yè)網(wǎng)站設(shè)計(jì)解決方案 電子家電網(wǎng)站設(shè)計(jì)解決方案 食品行業(yè)網(wǎng)站設(shè)計(jì)解決方案 集團(tuán)公司網(wǎng)站設(shè)計(jì)解決方案 企事業(yè)單位網(wǎng)站設(shè)計(jì)解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 健身運(yùn)動(dòng)網(wǎng)站設(shè)計(jì)解決方案 美容與化妝品網(wǎng)站設(shè)計(jì)解決方案 建筑設(shè)計(jì)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 物流行業(yè)網(wǎng)站設(shè)計(jì)解決方案
TAGS關(guān)鍵字
輪胎網(wǎng)站設(shè)計(jì) 外貿(mào)網(wǎng)站建設(shè) 微網(wǎng)站 青島輪胎網(wǎng)站設(shè)計(jì) 插畫 平面設(shè)計(jì) 青島網(wǎng)站建設(shè)公司哪家好 SEO 集團(tuán)性網(wǎng)站 青島網(wǎng)站設(shè)計(jì)哪家好 網(wǎng)站制作 青島網(wǎng)站SEO 蘋果系統(tǒng) html和css 網(wǎng)站改版 高端輪胎網(wǎng)站設(shè)計(jì) 版面布局 H5 視覺靈感 GOOGLE 網(wǎng)站SEO 網(wǎng)站的速度 企業(yè)網(wǎng)站為什么要備案 企業(yè)建站 青島高端網(wǎng)站建設(shè)公司哪家好 建站常識(shí) 青島flash網(wǎng)站 集團(tuán)公司網(wǎng)站建設(shè) 青島不錯(cuò)的英文網(wǎng)站建設(shè)公司 微信小程序