您好

  非常感謝您來訪 夢龍筆記 網站

  夢龍筆記網站歷經之前虛擬主機重大問題,以及我這兩年的工作繁忙而疏於更新,沒有維護、處理系統問題,網站已經沈靜將近1年

  現在已經將主機系統搬移到其他系統服務商,網站已經恢復運作,歡迎您的瀏覽。

  夢龍筆記正在進行網站系統、佈景主題改版、更新的工作,目前預計將於八月全面重新改版上線,並恢復內容更新,屆時歡迎您再度來訪,並希望夢龍筆記網站內的資訊、資源能夠對您有幫助

2020/02 台南 Joy.Kingman in 好想工作室

手機畫面設計

Google AdSense在十周年的慶祝活動中,準備了連續三周的線上課程,課程內容有:AdSense最佳贏收 / SEO / 行動建站 / AdMob行動應用廣告 / Google Analytics分析 / DFP流量管理。

其中,第二個禮拜的主題之一:GO Mobile!行動商機與網頁優化,其中講到了行動網站優化的10大祕訣,在這邊整理成文字(也加一些自己的看法),分享給大家,也讓之前沒參與到課程的了解一下,看看Google對行動網站的優化有甚麼樣的建議。

先分享幾個數據給大家:

  • 全台灣有將近1/2的人使用智慧型手機
  • 64%的使用者在最近7天內每天使用智慧型手機
  • 2012年台灣使用者的手機上網搜尋量增加2.4
  • 台灣超過90%的網站沒有行動版
  • 當行動網站的體驗不佳時,40%的行動用戶會轉向其他競爭者的網站,61%的行動用戶不會再回到此體驗不佳的網站
  • 來自於行動設備的流量價值比電腦的流量價值更高

加上Morgan Stanley 2010年的研究:2014年,行動上網用戶將超越電腦上網者。

 

如果你想知道自己網站上的流量有多少是來自行動裝置,可以參考這篇文章《行動裝置是未來趨勢也是現在進行式

看完以上幾個數據後,是不是要認真思考一下建置一個使用者體驗良好的「行動網站」了呢!!!

以下就是Google給我們的10個優化的方向,一起來瞧瞧吧!

1、簡單快捷

試想:手機和平板的螢幕相對較小,那些資訊是行動用戶是最需要的?

  • 優先提供用戶最需要的內容與功能
  • 減法、減法、減法...
  • 精簡文字
  • 壓縮圖片以提升網站加載速度

在有限的行動裝置螢幕上,以最簡單最實用也最快捷的形式展示給我們的用戶最需要的內容與功能,讓他們方便使用。把可以去掉的內容、功能、或是版位等都去掉,只留下最根本的內容、功能、版位等。

2、簡化導覽

試想:行動裝置的螢幕就這麼大,而且又不能用滑鼠,是不是要讓我們的使用者可以明確地找到他們要找的地方?

  • 明確的目錄結構,避免用戶滾動頁面
  • 提供醒目的[退後]和[首頁]按鈕

Google這邊提供了四種常見的導覽模式:

  1. 橫條式:建議不要超過七個;
  2. 大按鈕式
  3. 列表式:比較複雜的網站
  4. 選單式

(不管使用甚麼模式,就是要精簡、簡單、好找!)

3、拇指操作

試想:我們拇指應該不像滑鼠的箭頭這麼細,所以在介面上的設計要針對手指可以好操作的方向去設計!

  • 較大的按鈕,降低操作難度
  • 適當的空間,避免意外點擊
  • 間距加寬,擴大點擊範圍
  • 使用顏色和尺寸凸顯按鈕
中肯!我常常因為版面太小、字也小而誤點啊,然後就得再做一次工,等他重新載入...

4、一目了然

這點其實就是考慮我們的使用者的「觀感」。

  • 確保內容與螢幕大小一致
  • 背景和文字顏色的鮮明反差
  • 使用留白空間
  • 整齊的排版
  • 舒服的字型大小

5、廣泛適應

試想:現在部分用戶會使用不同的行動裝置造訪我們的網站,所以網站的設計應該要能在不同行動裝置上都能運作。

  • 網站能在不同的行動裝置上運行
  • 移除Flash,使用HTML5來實現互動內容和動畫
  • 設計能依螢幕方向調整顯示的網站

移除Flash這件事,因為ios系統的行動裝置無法顯示,其他系統也許可以撥放,但只要有使用者無法看到網站內容,尤其是首頁的部分就是全Flash,那勢必是離開網站了。

 

6、輕鬆轉化

試想:好不容易讓使用者看到我們的網站以及來到我們的網站,費盡千辛萬苦吸引使用者的目光和慾望讓使用者要下單了,可別在這步搞砸了!

  • 簡化註冊登陸流程
  • 減少使用者輸入:使用表單、菜單、選擇框
  • 著重提供有助於轉化/註冊的資訊

在這環節上,就是讓使用者能夠輕鬆下單,複雜的步驟請簡化,也請確認每個環節都要能環環相扣。在「時間就是金錢」的真理下,節省使用者的時間,就是增加我們的金錢阿!

如果非得登入會員才能下單,那登入會員這步驟也要小心的處理。之前也有發生過類似的經驗,雖然不是購物,只是線上看電子書,他們要求登入會員的步驟(這我能理解),雖然提供連結facebook加入會員,但畫面跳到facebook之後,登不進去就算了也回不去流程,所以我就放棄了(菸~

7、立足本地

  • 與用戶位置相結合的個人化資訊
  • 地圖、路線、電話、本地資訊

8、流暢體驗

有時候在家看到一半,就得出門上班,在通勤的時候也想要繼續看原本看的內容,所以在裝置的切換上如果可以銜接上肯定不錯,且要保持資訊的一致性!。但我想,這塊有會員機制的應該都有做吧~

  • 允許網友保存搜索、書籤、購買等信息
  • 盡可能在所有平台提供相同的功能和資訊

9、重新定向

  • 自動判斷行動設備,重新定向適合的網站
  • 讓用戶可以切換桌面板與行動版本網站
  • 讓用戶選擇下次登錄的版本

可以切換桌面板與行動版本網站,這點我覺得還蠻重要的,因為現在人與人的聯係裝置較為多種,有時候,我在用筆店看網頁,覺得不錯share給我的朋友H看,而朋友H因為人在外面,所以使用手機觀看,所以如果能自動切換轉成適合的版本,會是不錯的體驗。反過來說,也有可能是在手機上分享了資訊,但用筆電、桌機看的時候,如果沒有可以切換為桌面版的選項,那文章看起來就不是這麼舒適了!

選擇下次登錄的版本,這我就不太了解他是要說甚麼了...

10、持續改進

  • 使用分析工具,了解用戶如何使用網站
  • 收集用戶意見並反覆測試,追蹤表現

這些優化的方法都不是一次就能做到位,所以需要持續的改進。可以透過安裝網站分析工具來了解訪客怎麼使用網站。

以上簡報圖片部分來自Google AdSense十周年線上課程點我看影片欣賞。以上就是行動網站10大優化方向。

 轉錄自:Google Analytics網站分析

網路經營

SEO 搜尋引擎優化

IA 資訊架構

Users Centered 使用者中心

   

Go to top