關於網路那些事...

網路行銷,SEO,網路趨勢,教學文章,網頁設計,生活時事

讓網站設計更符合 Mobile Friendly 的12項原則


(圖片來源 Business Catalyst Blog)

雖然智慧手機及平板出現的時間還不到10年,卻只用了很短的時間就趕上了桌機瀏覽量。並且,根據Google 發佈的訊息,已經有超過10個國家在移動裝置的搜尋量超過電腦(包含美國、日本)。

從去年至今,可以觀察到Google越來越頻繁的發佈調整搜尋演算法及搜尋排名(Rank)計算方式的相關訊息,讓搜尋引擎偏好於有針對Mobile Friendly進行設計的網站,也因為這樣大幅度的調整,讓很多名列前茅的網站名次瞬間滑落,而這種Google懲處仍頑固不化的作法,通常都被稱為"Mobilegaddon"。

因此,如果你是Designer或RD,都應該將這些因素納入考量,也就是說,網站除了要做得好看之外,同時也要考慮為客戶未來的發展及便利性,讓Mobile Friendly成為設計或開發的基本作法。


(圖片來源 Google)

在這裡提出12項原則,來幫助你檢視網站是否符合Mobile Friendly:

1. 網站在不同設備中,是否都能具備良好體驗

移動設備包含的尺寸範圍相當廣,從智慧手機、平板到桌機,這些不同螢幕的檢視方式,可以直接使用瀏覽器的開發者工具模擬螢幕及裝置,或者也可以考慮透過這幾個工具進行測試: DesignModoZooExtensionStudioPress

2. 用戶是否能輕鬆的完成常見任務

移動裝置和桌上型電腦最直接的差異點就在於: 移動裝置的螢幕較小。

因此,在設計網站內容時,如果模擬鍵盤、按鈕或文字框太小,就會讓操作者感覺很難用。

所以,為了提升使用者體驗,你必須考慮在移動裝置上的互動性,在字體、尺寸、位置的安排都要能達到清晰可辨識,讓使用者能用最少的點擊,就能完成工作任務。

3. 行動裝置是否突顯出 Call to Action

通常,經營網站最主要的目的就是提高使用者及增加收入,因此就必須要清楚的呈現出網站上的 Call to Action (CTAs)。設計CTAs功能時,假設一般電腦都會放在右上角,在移動裝置就可能要考慮重新排放在更好的位置。

原則同樣是,仔細再仔細的檢查CTA在移動裝置上的位置,佈局及外觀。

4.導航選單,是否存在複雜交錯的層級

一直到最近,仍可以發現許多網站的導航選單有三到四層級,當然,在電腦上或許是正常不過的事,但是在移動裝置上若延用這種會突然引發熱膨脹效果,一次突然爆出大量項目的作法,將會是一場災難。

簡單來說,千萬不要去考驗用戶的耐心。

把你的導航選單整理乾淨,不但會獲得用戶喜好,更可以增加簡潔及優雅感官,讓平台更加親切。

5.能否輕鬆的回到首頁

當使用者經由水平深入到不同頁面層次,並且達到最底層的文章或產品頁面後,就要去思考怎麼才能讓他很直覺得回到首頁。

舉例來說,在Google研究使用者體驗報告中,參予者如果點擊網站的標誌卻無任何反應時,就會讓他們體驗度下降,進而降低網站評價及喜好程度。

當然,身為設計者你可以對返回首頁的流程提出看法,認為同樣的功能分別放在兩個地方是多餘的。必須簡化,只要用戶點開網站目錄選單就能找到回首頁按鈕。

但是,在這裡仍然建議,多一個按鈕,如果能減少更多操作及困擾,那何樂而不為呢?

6.網站是否擁有良好的搜尋功能

移動使用者很常透過智慧搜尋功能尋找他們要的東西,因此在規劃網站時,搜尋功能自動校正及自動完成的功能、過濾功能、快速分類選單,都是能幫助使用者更容易找到相關產品,這些功能對於電子商務網站而言,就必須更加關注。

7.表單是否有搭配適合的虛擬輸入功能

你可以適當的在表單上設計一些自動完成或者適合的輸入功能,讓你的表單能以最簡單的方式完成,並且能保留重要的資料內容。

例如,在日期欄位可以彈出日曆選單、而不是讓他們點選框格輸入 DD/ MM / YYYY格式。

8. 除了產品圖片、讓其他圖片無縮放功能

在之前某一段時間,很流行圖片縮放功能。但是對今天的移動用戶而言,一般圖片縮放功能反而會是一種困擾,例如在瀏覽一篇文章或一則訊息時,使用者應該不會特別去縮放網站的內容。

但是在產品單元,就必須要考慮使用者可能會想看產品的放大圖,因此就要考慮在這些地方放置縮放圖片功能,並且要記得使用足夠畫素的圖片。

9. 是否能讓Google蜘蛛輕鬆抓取資料

Google已經證實了,他們在移動裝置上有三種不同的配置:
- 響應式設計適應不同螢幕寬度
- 使用動態內容,跟據UerAgentString來辨識設備,跟據類型來發送不同內容
- 對不同的裝置類型配置不同的URL
你可以藉由這些方法來提升跨裝置體驗,但是,如果Googlebot無法抓取你的網站,再多的策略都會失效。因此,千萬一定要確保Google蜘蛛能順利的進入到你的網站,讓它能正確收入你的內容,包含CSS、javascript及圖片。

10. 所有內容是否都能在移動裝置呈現

某些內容可能再移動裝置上無法出現,由其是視頻,可能在移動裝置上會無法撥放。 例如,現在仍有採用flash技術的影片播放器或者遊戲,甚至是整個網站。要避免這種情況出現,必須確實在移動裝置上測試你的內容,並且堅持使用HTML5技術。

11.跨裝置檢查連結及重新導向

假設你的移動裝置與桌機擁有各自的URL,如果使用者透過一個電腦版的連結訪問網站時,網站重新導向必須要能引導到手機板對應的頁面,而不是讓他回到首頁。並且要確保這些連結不會失誤。

假設如果有偶發可能會引導到不存在的頁面或修復中的情況,則要準備完整的404或整修中頁面,避免使用者無法適應突然的意外狀況。

12 如何處理敏感的隱私內容及流程

很多手機用戶並不熟悉完整的正確流程,因此,如果再移動裝置上要使用到隱私或敏感的資料,例如信用卡或個資,為了減少使用者疑慮,你可以考慮提供"點擊通話"服務,讓用戶能容易完成交易。或者可以交互到不同設備上。例如,用互瀏覽求職網站過程中,可以用email寄送推薦的職務列表,讓使用者可以在有彈性的時間或裝置上進行選擇。

參考: Richa Jain How Mobile Friendly Is Your Design? 12 Tips to Follow


如果你喜歡我們的文章內容,請在這裡按個讚



最新文章推薦