本文來自SocialBeta內容貢獻者wisp,原文譯自Browsing on Mobile Phones,更多移動產品設計方面的資料,請查看SocialBeta移動互聯網欄目。
手機瀏覽在全球的使用程度各有不同。在韓日,手機瀏覽器被廣泛應用於移動服務,在歐洲,Wap服務一直在增長,而在美國,人們更多通過PDA瀏覽器瀏覽網頁而不是手機。
雖然手機瀏覽目前並不是在每個地方都受歡迎,但是在接下來的10年內,它將成為大多數人上網的主要途徑,手機瀏覽器也將成為人們每天都會用到的工具。而這些都要求手機瀏覽的用戶體驗都要得到改善,主要體現在:連接速度、服務數量、可用性增加以及流量成本降低。本文主要簡單地說明手機瀏覽可用性的幾個方面。
手機瀏覽可用性
手機瀏覽可用性包含幾個層次(如圖1),不過用戶是不會發現是哪個層次導致可用性問題的。對於終端用戶,手機瀏覽是一個整體的體驗,所有層次都必須無縫配合以提高可用性。
圖片文字:
設備可用性:·鍵·展示·瀏覽器入口·UI風格
瀏覽器可用性:·交互·頁面渲染·緩存等等
站點可用性:·結構·內容·佈局
圖1:三個獨立層次構成整體的可用性
在手機設備設計過程中,瀏覽器應用的重要性決定了硬件設計以及整體UI風格。如果是觸摸屏且有手寫筆,那麼瀏覽器交互會容易多。另外完整的QWERTY鍵盤也讓用戶可以輸入網址以及填寫表格。如果不將瀏覽作為主要應用,那麼手機設備必須輕巧,從而能夠滿足一隻手使用的需求。在一些非觸摸屏設備上,瀏覽器主頁上必須有幾個關鍵性的鍵,還有網絡連接狀態以及最重要的回退功能。
小屏幕的手機瀏覽器設計比較困難。同時大多數手機設備在不同國家都有使用,所以理解不同手機瀏覽文化的差異以及理解目標用戶的手機瀏覽體驗變得尤為重要。一個好手機瀏覽器必須能夠承載所有類型的內容,不僅是專門為移動設備優化的內容而且還包括為PC屏幕設計的網頁內容。
在為手機設計服務時,設計人員必須知道哪些內容是在移動狀態下會使用的,以及一個友好的網站結構和UI設計原則是什麼[參見註釋1,2]。
內容人員和瀏覽器開發人員都需要理解移動環境屬性和移動狀態下的用戶需求,而且必須測試自己的產品在移動環境下的效果,要分清楚哪些功能可以在實驗室裡測試,而什麼內容是必須在移動環境下測試的。我們一直在做用戶在手機上的注意力分配以及瀏覽器交互行為等等方面的用戶研究。
在移動狀態下瀏覽完整網頁
針對手機用戶優化的服務要求研發人員需要確定移動狀態下的用戶在手持設備上的需求。許多服務往往跟地點有關,比如旅遊信息或者地圖;與時間有關,比如列車時刻表;或者是非常個人化的需求,必須最喜歡的酒吧等等。這就要求服務必須具有靈活性,基於不同因素而變化。
手機用戶使用PC網址登陸網站的原因往往是由於很多用戶只記得PC上的網站網址,不知道手機版網站的地址,很多情況下,用戶在手機上登陸電腦版網站,然後得到手機版網站的鏈接。如果網頁不提供手機版網站的鏈接,那麼肯定會喪失一些用戶。
另外我們相信大多數國家的用戶仍舊需要登陸完整網頁,3G網絡再加上優秀的手機屏幕使得在手機上瀏覽完整網頁仍具有比較好的用戶體驗。所以我們希望針對手機優化的內容能夠增加,而且內容人員還要注意到,手機瀏覽器用戶在增加,不過還要在Web網站上提供手機網站的入口。
1 狹窄佈局
在小屏幕上顯示大的web頁面仍舊需要一些信息視覺處理方法。目前一些瀏覽器採用狹窄佈局作為默認查看模式,Opera將其稱為小屏幕渲染,NetFront將其稱為SmartFit,我們稱之為狹窄佈局,因為整個內容的顯示窄且長,並且所有內容都做了簡化以符合屏幕寬度。
我們對這一佈局做過很多用戶研究[參見註釋5],狹窄佈局的主要好處就是文本容易閱讀,如果文本的寬度超過屏幕的寬度,用戶的閱讀就會很困難,雖然可以採取滾動的方法處理這一問題。
不過根據我們的調查,狹窄佈局仍有很多問題。最糟糕的就是為了符合屏幕寬度,一些大圖片被刪減,結果導致圖像細節丟失。第二個問題就是表格。如果有一行表格不與屏幕吻合,就會自動調至下一行。
還有一點就是內容排序。如上圖,所有內容的顯示變得很長,所以用戶很難找到一些想要的內容,經常需要在屏幕滾動時去尋找關鍵詞,這也就意味著滾動速度不能太快,結果看完所有內容會是一個非常漫長的過程。如果加快滾動速度,用戶又可能丟失一些重要信息。
一個典型的Web頁面中,最左邊往往有很多鏈接,主要內容顯示在頁面中部。在狹窄佈局中,用戶必須滾過這些鏈接,才能看到主體內容。不過在瀏覽一個網站時,這些鏈接多數情況下是不相關,用戶會變得很生氣。還有一個相關的問題就是,一個網站的任何頁面的上端往往很類似,用戶會弄不清楚自己在哪個頁面,所以如果這些鏈接中包含用戶已經點擊過的,那麼用戶很有可能再點擊這些鏈接。我們遇見過很多用戶由於這個問題而放棄閱讀,他們會說瀏覽器壞掉了。
2原始佈局
由於狹窄佈局存在很多可用性方面的問題,所以很多瀏覽器還提供原始佈局頁面模式,這很類似在PC上,讓用戶根據內容來選擇不同的視圖模式,原始佈局中,大圖片細節和表格的效果會更好,同時如果用戶知道PC上的網站的結構,那麼就很容易找到自己所需要的內容。
當然原始佈局並非什麼問題都沒有。最糟糕的就是閱讀寬文本內容,會很費力。用戶每次都得向前向後拉動滾動條。另外由於頁面很大,所以需要滾動的地方也越多。
3理想佈局
很明顯,小屏幕手機上的頁面瀏覽仍需要很多改進和革新。如果想讓自己的網站在小屏幕上具有可讀性,可以遵守以下3個指導建議:
1:避免那些一眼就能看出來的大物體;
2:避免在圖片上使用小文本;
3:頁面要輕化。
註釋:
[1] Kaikkonen, A., Roto, V.: Navigating in a Mobile XHTML Application. In Proceedings of CHI2003 (2003)
[2] Roto, V., Kaikkonen, A.: Acceptable Download Times in the Mobile Internet. In Stephanidis, C. (ed.): Universal Access in HCI. Volume 4 of the Proceedings of HCI International 2003.
[3] Roto, V., Oulasvirta, A., Haikarainen, T.,Kuorelahti, J., Lehmuskallio, H., Nyyssönen, T.: Examining Mobile Phone Use in the Wild with Quasi-Experimentation. HIIT Technical reports
http://www.hiit.fi/publications/pub_files/hiit2004-1.pdf (2004 ).
[4] Roto, V., Oulasvirta, A.: Need for Non-Visual Feedback with Long Response Times in Mobile HCI. To appear in Prodeedings of WWW 2005 Conference (2005).
[5] Roto, V., Kaikkonen, A.: Perception of Narrow Web Pages on a Mobile Phone. Proceedings of Human Factors in Telecommunications (2003).
原文鏈接:http://www2.research.att.com/~rjana/WF12_Paper1 .pdf
本文鏈接:http://www.socialbeta.cn/articles/browsing-on-mobile-phones .html
譯者:wisp
特別注意:本站所有轉載文章言論不代表本站觀點,本站所提供的攝影照片,插畫,設計作品,如需使用,請與原作者聯繫,文章轉自alibuybuy