天天看點

如何建構一個優秀的移動網站?谷歌專家教你25招

谷歌公司的研究人員總結出了25個要點,内容如下:

​▌1、“行為召喚”内容要靠前或居中 ​

如何建構一個優秀的移動網站?谷歌專家教你25招

對于移動使用者來說,往往很容易忘記菜單選項,是以,你應該把自己最關鍵的“行為召喚”内容放置在一個醒目的位置上,這樣使用者就能輕松看到。是以,你需要讓最重要的“行為召喚”内容占據到網站的主體部分上,使用者就能夠快速完成相關任務,另外,如果要繼續執行下一個任務,你可以利用菜單選項标明,也可以把下個任務緊跟在第一個任務完成之後。在移動端,你的“行為召喚”内容應該和桌面終端不一樣,是以你必須要“對号入座”,因地制宜。

關鍵要素:把你最重要的“行為召喚”内容放置在網站最突出的位置上面。

​▌2、讓菜單看起來既簡潔又親切​

​  

如何建構一個優秀的移動網站?谷歌專家教你25招

一個範圍較廣的菜單可能非常适用于桌面網站,但是移動使用者可能沒有足夠的耐心來回滑動自己的手機,他們不喜歡在檢視一長串菜單選項之後才找到自己想要的東西。那麼,你需要想想看,如何在最少的菜單裡面放上自己最需要的功能選項呢?舉個例子,有一家大型零售商店(在此就不透露它的名字了),他們在自己的移動網站上優化産品類别菜單,和桌面菜單完全不同,讓移動終端的菜單選項為使用者提供了一個更加簡短,更加清晰的産品清單。

關鍵要素:一個簡短的菜單,搭配上清晰的類别選項,可以讓移動通路者更加清晰的進行站點導航。

​▌3、要讓使用者便于回到首頁​

如何建構一個優秀的移動網站?谷歌專家教你25招

當移動使用者在你的網站上面導航浏覽時,他們會希望可以快速回到之前的首頁上面。谷歌公司在研究中發現,使用者往往喜歡點選頁面上的公司Logo,因為他們覺得這種方式可以直接回到首頁上去,是以你的網站必須也要支援這個功能,否則如果使用者點選了Logo,卻毫無反應,他們肯定會覺得非常失望。

關鍵要素:把網站上的公司Logo優化成一個導航按鍵,當使用者點選之後可以導航回到首頁.

​▌4、别讓促銷廣告搶了你網站的風頭​

如何建構一個優秀的移動網站?谷歌專家教你25招

促銷活動和廣告會影響你的網站内容,也會影響使用者在網站上的體驗。谷歌的研究人員讓使用者通路一家公司的移動網站,上面有一個巨大的橫幅廣告,這些使用者無一不被這個廣告吸引,而無心注意廣告下面的導航按鍵,而這個導航按鍵反而能夠為使用者提供更多關于該公司的内容資訊。

關鍵要素:確定促銷廣告不會影響網頁的導航功能,而且要把廣告和“行為召喚”内容徹底區分開

​▌5、保持搜尋功能可見​

如何建構一個優秀的移動網站?谷歌專家教你25招

如果使用者需要尋找一些特殊資訊,那麼他們就會使用網站的搜尋功能,是以,搜尋必須是移動網站上最重要的功能之一,一般而言,使用者希望能夠在網站頁面的頂部使用文本搜尋功能,因為頁面頂部位置最容易讓人發現。

關鍵要素:把網站的搜尋功能放在首頁的頂部,可以用一個文本框顯示搜尋功能。

​▌6、確定網站搜尋結果符合使用者預期​

如何建構一個優秀的移動網站?谷歌專家教你25招

實際上,使用者似乎并不讨厭一頁一頁的翻閱搜尋結果,但是他們更加看重網站傳回的搜尋結果是否符合他們的預期,是以,你至少需要確定自己搜尋結果的第一個顯示頁面能夠精準的滿足使用者搜尋要求。在移動終端上面,因為螢幕非常小,是以你需要提供一些智能搜尋功能,比如幫助使用者自動拼寫,或是修正使用者的錯誤拼寫,等等。 

關鍵要素:確定你的網站搜尋功能可以傳回有效的結果,另外需要完善智能搜尋,提供自動拼寫或錯誤拼寫糾正等功能。

​▌7、使用過濾功能提升網站搜尋易用性​

如何建構一個優秀的移動網站?谷歌專家教你25招

使用者會使用搜尋過濾功能,這樣可以縮小搜尋範圍,傳回的搜尋結果也更精準。不過,你需要確定使用者使用過濾搜尋之後,不會一無所獲。網站應該讓使用者知道一個過濾搜尋功能可能會傳回多少搜尋結果,這樣可以幫助使用者避免一些問題。 

關鍵要素:為使用者提供過濾搜尋服務,但是要確定不會傳回空結果。

 ​▌8、指導使用者去通路較好的網站搜尋結果​

如何建構一個優秀的移動網站?谷歌專家教你25招

對于一個網站而言,使用者有各種各樣的類型,是以,在使用者進行搜尋的時候,可以先詢問幾個相關問題,這樣可以確定他們的搜尋結果與預期一緻。舉個例子,一家大型鞋子零售商在其移動網站上面提供了搜尋服務,但是搜尋前會詢問使用者的性别,以及腳的尺寸等問題。 

關鍵要素:如果你希望縮小搜尋傳回結果的範圍,那麼可以提前詢問使用者一些相關問題,這樣確定使用者能看到符合自己預期的搜尋結果。

​▌9、不要一上來就讓使用者在網站上注冊​

如何建構一個優秀的移動網站?谷歌專家教你25招

如果你的移動網站一上來就讓使用者注冊,那麼體驗一定非常糟糕。谷歌公司的研究人員發現,最讓使用者難以接受的就是必須注冊之後才能通路網站内容。實際上,使用者希望在送出個人資訊之前就可以先浏覽一下網站内容,至少需要了解一下這個網站能夠為自己提供些什麼東西。

關鍵要素:不要強迫使用者注冊一個賬号,允許任何通路者浏覽你的網站

​▌10、讓使用者能以訪客的身份在你的網站上購物​

如何建構一個優秀的移動網站?谷歌專家教你25招

即便使用者想在你的零售網站上購買商品,但其實,他們仍然不希望注冊一個賬戶。使用者會覺得,如果能夠以訪客的身份購買商品,那麼真的是非常友善,簡單,而且快捷。人們不太喜歡在網站購物時強制注冊一個賬号,而且,許多網站并沒有告知使用者新增賬號對他們來說有什麼好處。

關鍵要素:你可以在移動網站上面提供一個選項,讓使用者能以訪客的身份進行購物。另外,如果你需要使用者在網站上注冊一個賬号,那麼可以明确的告訴他們新增賬號會有什麼好處。

​▌11、使用已有資訊,最大程度為使用者提供便利​

如何建構一個優秀的移動網站?谷歌專家教你25招

對于那些網站注冊使用者而言,你需要記住他們的偏好。而對于新使用者而言,你可以提供一個他們習慣使用的第三方支付服務。谷歌研究人員對一些零售網站進行了調研,他們發現許多網站都提供了第三方支付服務,避免了最後買單時的不便,另外移動網站還可以根據注冊使用者的已有資訊,提供預填物流位址資訊功能。 

關鍵要素:要利用好你手中掌握的資訊,盡可能使用第三方支付服務,盡可能為使用者提供便利

​▌12、對于複雜任務,使用“點選撥打電話”功能​

如何建構一個優秀的移動網站?谷歌專家教你25招

如果使用者需要進入一個較為複雜或是較為敏感的任務時,你需要提供一個“點選撥打電話”的服務功能。舉個例子,有一家提供金融服務的公司,他們的移動網站上就提供了這項功能,如果使用者不想在移動端填寫複雜的表格,可以立刻用自己的移動手機撥打電話,由人工坐席受理業務。 

關鍵要素:當使用者需要提供複雜資訊時,你可以在網站突出位置上提供一個“點選撥打電話”功能,這樣可以避免客戶從“漏鬥”裡掉下,造成客戶流失。

​▌13、當使用者更換不同的移動裝置時,確定能夠便捷的完成交易​

如何建構一個優秀的移動網站?谷歌專家教你25招

使用者可能會在不同的移動裝置上通路你的移動網站,因為你需要提供一個簡單的方法,讓他們在不同裝置上分享資訊。比如一家招聘網站,當使用者完成應聘之後,他們會發生一封電子郵件,這樣使用者在其他裝置上也能通路自己的網站。 

關鍵要素:移動使用者很可能會更換不同的裝置,是以你可以通過社交分享,電子郵件,或是“存入購物車”等方法,讓使用者能夠繼續自己在網站上的體驗。

​▌14、資訊輸入時做到流線作業​

如何建構一個優秀的移動網站?谷歌專家教你25招

如果網站能夠預先判斷出一些資訊,使用者體驗就會非常棒。比如預先判斷出使用者所在的郵政編碼,或是出生日期等等。在輸入一些資訊時,如果能夠做到自動輸入,那麼體驗将會更加流暢。相比而言,如果網站要求使用者在小表格框内反複輸入一些資訊,讓他們在手機鍵盤上頻繁切換數字/字母模式,體驗就會非常糟糕。 

關鍵要素:如果你的網站需要輸入數字時,可以為使用者提供一個專門的數字鍵盤,當使用者點選輸入框時,自動彈出這個數字鍵盤。

​ ▌15、為每一個任務選擇最簡單的輸入方法​

如何建構一個優秀的移動網站?谷歌專家教你25招

如果使用者需要在有限的選擇項内做選擇時,最簡單的方式就是點選選擇,而不是使用文本輸入,或是在下拉框内選擇。如果要在許多選項中選擇一個項目,傳統的下拉框是最直接的。無論什麼任務,你需要選擇最簡單的輸入方法。 

關鍵要素:如果需要在移動網站的表格上進行輸入操作,那麼可以選擇下拉框和切換功能,在任何時候都要確定操作便于點選。

​16、在需要選擇日期的時候,提供一個可視化月曆​

如何建構一個優秀的移動網站?谷歌專家教你25招

當使用者在移動網站上預定航班時,很難确定“下周的某一天”是幾月幾号,是以你需要提供一個可視化月曆供使用者勾選日期。這樣使用者就不需要離開你的網站,然後在打開手機上的月曆App應用了。在選擇開始和結束日期時,可以提供一個清晰的标簽,以免使用者把日期搞混淆。 

關鍵要素:當需要選擇輸入日期時,你需要提供一個可視化月曆,而且要有一個清晰的日期結構,這樣可以保證使用者不會中斷使用體驗。

​▌17、通過标簽和實時确認,第一時間解決輸入錯誤​

如何建構一個優秀的移動網站?谷歌專家教你25招

在你的表格框内,要有提示标簽功能,而且在使用者實際輸入時,可以看見必要且準确的提示資訊。這裡就有一個例子,使用者曾經在一個電子郵件位址欄裡面輸入了自己的家庭住址,因為當時這一欄内的提示資訊并不明确,隻有一個“位址”标簽。把提示資訊放在輸入框内也會存在問題,因為當使用者點選準備輸入時,提示資訊就會消失掉,是以需要利用标簽做提示。另外,如果使用者在輸入過程中,需要做到實時确認,否則一旦出錯,就會反複送出,引起使用者反感。

關鍵要素:使用清晰可見的标簽,讓使用者知道自己的需要,實時驗證輸入錯誤,在最後正式送出資訊之前幫助使用者糾正。

​▌18、設計高效的表格​

如何建構一個優秀的移動網站?谷歌專家教你25招

你要確定自己設計的表格不會出現重複操作,隻提供必輸資訊即可,另外你還需要利用自動填寫功能。當使用者在填寫表格的時候,最好在螢幕頂部顯示一個進度條,這樣人們就可以知道自己的進展。如果表格過于複雜則會讓人反感,相對而言,一個簡單直接的表格會讓人覺得很舒服。如果能搭配上自動填寫功能,比如預輸入使用者的姓名和郵政編碼,效果則會更好。 

關鍵要素:盡量減少表格中的數字輸入,盡可能提供自動填寫功能,使用一個清晰的進度條。

 ​▌19、針對移動終端,整體優化你的網站​

如何建構一個優秀的移動網站?谷歌專家教你25招

如果你有一個專門針對移動終端的網站,那麼當使用者使用移動裝置通路時,肯定比純桌面網站要簡單的多,這點毋庸置疑。但是最難受的,就是把移動和桌面兩個網站版本都混合在一起,使用者通路起來比全桌面網站還要困難。

關鍵要素:如果你網站頁面都是針對移動終端進行設計,那麼使用起來會很便捷。

​▌20、不要讓使用者用手捏放螢幕,去放大或縮小圖檔​

如何建構一個優秀的移動網站?谷歌專家教你25招

如果使用者需要用手捏放螢幕,去放大或縮小圖檔時,有時會看不到一些重要資訊或相關的“行為召喚”内容,這會讓使用者感到很失望。在設計網站的時候,你就應該注意到這一點,不要讓使用者去改變網站尺寸。有些網站會把捏放螢幕功能取消掉,如果你的網站設計的非常合理,使用者根本不會注意到沒有這個功能。 

關鍵要素:如果使用者放大某個網站圖檔時,有時可能會看不到一些“行為召喚”内容。在設計網站的時候,就要注意這一點。

21、你的産品圖像需要支援大圖顯示

顧客想要看看自己買的産品。在零售網站上,使用者希望可以看到分辨率更高的産品圖檔,這樣可以看到更多細節,如果網站不支援産品大圖顯示,肯定會讓使用者覺得非常失望。

關鍵要素:對于産品照片這些關鍵圖檔而言,需要提供高品質的特寫圖檔。

▌22、告知使用者在哪種螢幕方向上通路網站最舒服

使用者往往會在一個固定的螢幕方向上通路網站,除非有提示告訴他們切換螢幕方向(比如在觀看視訊的時候)。你可以設計網站的時候就考慮到垂直和水準兩種螢幕方向的浏覽方式,并鼓勵使用者切換到最佳螢幕方向上。但是無論如何切換螢幕方向,你必須要確定一些重要的“行為召喚”内容能夠清晰的顯示在網站上面。

關鍵要素:你可以和使用者交流一下最佳螢幕方向,但是要確定重要的“行為召喚”内容保持在醒目位置上。

▌23、讓使用者保持在單獨一個浏覽器視窗裡通路你的網站

在智能手機上頻繁切換視窗是一件非常麻煩的事兒,而且使用者還有可能找不到如何回到你的網站上去。是以,要讓使用者在單獨一個視窗裡浏覽你的網站。特别要提到的是,不要在新視窗打開“行為召喚”内容。

關鍵要素:要確定“行為召喚”内容在單獨一個浏覽器視窗裡顯示。

▌24、避免“全網站”标簽

使用者一旦看到“全王權”這個選項,就會覺得是不是“移動網站”是被壓縮的精簡版網站,最終紛紛選擇點選進入“全網站”。即便是桌面網站和移動網站的内容一緻,也會給使用者造成誤解,是以,你完全可以用“桌面網站”标簽,代替“全網站”。

關鍵要素:要給使用者一個簡單的網站切換體驗,用“桌面網站”标簽,代替“全網站”标簽。

▌25、你必須要清楚自己為什麼需要使用者的位址資訊

使用者一般都希望了解,為什麼你會向他們要地理位置資訊。比如某使用者在一家旅遊網站上面訂其他城市的酒店,但是他就感到很奇怪,因為這個網站會要求該使用者提供目前所在的地理位置資訊。是以,你需要把網站上地理位置這一欄預設為空,然後讓使用者自己選擇,或是為使用者提供一個清晰的“行為召喚”操作,比如“在我附近查找”,等等。

關鍵要素:你必須要清楚自己為什麼需要使用者的位址資訊,然後要了解這些資訊是如何影響使用者體驗的

針對上述這25個要點,谷歌公司使用者體驗研究員Jenny Gove總結了最重要的四點建議,分别如下:

▌1、 添加一個醒目的搜尋條

如果你的移動網站還沒有一個搜尋條,那麼真的需要趕緊添加一個了。“在移動終端上,人們希望能夠快速找到自己需要的東西,是以我們發現,人們對搜尋條的需求很大,而且最好能夠放在首頁上面。”Gove解釋說道。

當然啦,作為由谷歌發起的研究項目,推薦在網站醒目位置安裝搜尋條似乎并不讓人感到意外。但實際上,谷歌公司發現,使用者其實并不介意使用搜尋條,因為這樣可以讓他們快速找到自己需要的資訊。

▌2、 把大表格拆分成小塊

谷歌發現,許多網站都會要求使用者提供各種各樣的資訊,比如位址資訊(寄送商品時需要),信用卡号(支付買單時需要),等等。而在填寫這些資訊的時候,網站往往都會提供一個長長的表格頁面,上面有各種輸入框,非常複雜。是以,如果能把這些表格拆分成更小,更容易了解的小塊,效果可能會更好。

另外,Gove建議,最好能夠顯示表格填寫的步驟。而且最好在填寫時可以實時驗證輸入内容的正确性,比如使用者在輸入自己的郵政編碼時,可以實時校驗。

▌3、 允許使用者匿名浏覽

有些購物網站會要求使用者必須注冊或登入才能進行購買操作。而有些網站更誇張,必須注冊或登入後才能進行浏覽。這兩種方式都是大錯特錯。

Gove表示,“如果你準備建立一個零售網站,如果使用者沒有注冊帳号,那麼完全可以為他們提供一個訪客的身份。沒錯,商家都希望使用者可以注冊登入,但是他們完全可以在買單之後才進行操作。”

▌4、 要支援裝置之間的便捷切換

因為人們都是随時随地使用移動終端,是以很有可能在使用過程中被某件事情打斷,然後轉移到筆記本電腦上面工作去了。

Gove認為,最悲催的體驗就是,當使用者切換裝置之後,無法繼續自己之前的使用體驗,如果讓使用者複制粘貼自己通路的URL,簡直是太麻煩了。

最好的解決方案就是,移動網站可以提供一個快捷按鍵,然後自動把目前的連結,或通路内容發送到使用者自己的郵箱裡面,然後不管之後使用者在什麼裝置上面登入,都可以繼續自己的使用體驗。

最後,Gove覺得谷歌通過使用者研究,清晰的定位了建構移動網站存在的問題,她覺得,雖然問題不少,但好在這些問題都能夠被識别出來,而如果這些問題可以被人們寫下來,就意味着,人們也有能力解決這些問題。