【UXRen譯#132】移動優先：做好手機APP的6個最佳實踐原則

作者：Joe Toscano（譯者：Sisy 審校：Ariel）

無論我多想相信，我們已經進入移動優先設計時代，但還是有一些體驗拖了後腿。這個現象需要改變。UXMagazine的一項近期趨勢報告顯示，尤其是考慮到世界上有超過25%的用戶不僅僅是移動優先，而是只有移動設備。

圖片來源於Christ Dorwart, 若想查閱更多精彩照片，請搜索Christ的Instagram。

我最近度過沒有電腦的一個月，嘗試體驗沒有令人著迷的電子設備在身邊是什麼滋味。你可以在我的文章里了解更多故事—— The Computer-less month.

通過強迫自己以移動設備作為唯一使用工具，我學到許多關於移動優先的最佳實踐，以下的洞察希望能助力你創造更好的移動端體驗。

1. 使導航更容易

根據一家在用戶體驗探索、訓練、諮詢領域的領袖公司Nielson/Norman Group，它所發表的一篇調查研究顯示，隱藏導航（如漢堡導航）會減少21%的內容可發現性，並平均增加使用導航2秒。

可用性減少的有以下2個原因:

1. 漢堡菜單的過度使用以至於我們開始忽略它。設想一下你的前門，你還記得它的顏色嗎？你可能隱約知道前門的顏色。但如果你告訴某人整個房子的情況後，被問之前門的顏色，你還記得嗎？正如前門的道理，我們過於熟悉漢堡導航以至於不再看它們。
2. 當人們不知道導航所隱藏的東西時，他們會滾動頁面去看能否第一時間發現他們所尋找的。打開導航是耗費身心的。但如果當我打開導航還找不到所想要的信息呢？研究表示，用戶比起在漢堡導航花時間，會更樂意去滾動頁面碰碰運氣。

用戶比起漢堡菜單，會更樂意去滾動頁面

所以，能迅速展現所有鏈接的可視化導航是你所需要創造的最贊的導航模式，它很簡單但並不完全適用於屏幕上的有限空間。最贊的移動端導航樣式是組合式導航。

組合式導航會展示用戶最需選項，然後將其他的選項收藏在漢堡導航或其他類似導航，以便訪問。在這方面，蘋果的網站做得十分出色。

蘋果網站的內容被布局的非常棒，所以我並不需要使用導航按鈕，我可以通過滾動頁面，十分便捷地獲取信息。但一個「現在購買」的按鈕通常是有必要且一目了然的，以符合用戶的購買需求。

如果瀏覽頁面後仍獲取不到所需信息，我可以在導航中深度檢索得到想要的信息。

總而言之，蘋果網站的組合導航模式和精心設計的內容是「如何為你的用戶構建最好的移動體驗」最成功的例子。

2. 拇指化設計

雖然現在有許多拇指化區域的研究，但仍有許多網站與應用將導航放至屏幕頂部。

為什麼？因為每個人都採取這樣的做法，所以它一定是最好的，是嗎？然而，並不是。

為用戶的產品而堅定打破行業標準的決心

如果你看著拇指區域，你會看到手機的設備越大，屏幕外部邊緣區域的內容被用戶越難接觸。當你在設計產品時要將此牢記在心。

更多詳情請查閱Scott Hurff 的 Designing Products People Love

如果你看到Safari Browser，谷歌的Google Now app，或者Pitchfork這樣精心設計的移動網頁，你會發現主導航是在屏幕的底部。

觀望移動體驗，即使在網頁上，將導航放在底部——一個用戶方便觸碰的地方。隨著移動設備使用年變動量持續增長，這樣的設計是未來所向。

3. 讓點擊有意義

在用戶體驗領域傳著一個謬論，較少的點擊量意味著更好的體驗，如果用戶不點擊，那麼這個設計師一定是UX大神。但事實上，只要內容有意義，用戶不介意多點擊幾次。

只要內容有意義，用戶不介意多次點擊。

要填一個很長的表格？將它們拆分至獨立表格，讓用戶只關注他們所需要做的。儘可能的為用戶幫用戶填寫內容，例如根據用戶之前填過的表格數據。改變默認鍵盤使匹配填寫的內容，以便更快的填寫——頻繁切換鍵盤真的令人討厭。為用戶設置進度欄來顯示他們填寫的進程。要讓用戶知道最終目標在哪裡，這是很有幫助的。

在用戶完成每一項任務後讓他們感受到完成感，尤其當他們看到所有已完成的任務情況。這樣，用戶會比任何時候做事更有效率，因為你設計的體驗增加了他們的成就感，當然，作為回報，他們會更積極的完成任務。

這聽起來有悖直覺，但你可以通過多幾次有意義的點擊來減少操作複雜性。每次操作接收信息會比將所有信息都擺在用戶面前更能減小用戶的認識負荷。讓你的體驗融入場景，易被消化，那麼便沒人會在意多點擊幾次——畢竟它十分有必要。

4. 讓信息易被接收

想像你去到一家餐廳，打開菜單後。你是因為菜單上有10個菜品並且配著菜式的圖片，還是有4頁紙的菜式文字描述，讓你更易做出決定？

卡片式設計更易在有限時間內讓用戶與信息相互聯繫。

這也就是谷歌選擇卡片式設計作為他們設計標準，而其他互聯網公司也逐漸認同採取這個做法。每張卡片都代表著一則通俗易懂的信息——通常由它的標題、圖片、圖表或是一段簡介文字組成。這種設計僅為用戶提供足夠的信息來決定他們是否想要在短時間內繼續更深層次去了解。

想了解更多關於 Nick Velichkin 的更多信息，請查看他的 Dribbble。

儘管你有很多信息想告訴用戶，並不意味著他們就想要花時間去瀏覽所有信息，再做出決定。沒有人會想讀完所有內容。更何況段落中的專業術語是用來表達內在目的，所以聘請一個寫手幫你把內容放在用戶實際接受的事物上很有必要。並且不要害怕提出重點，以便用戶去閱讀和深度了解。

首先給你的用戶一個高度集中的概述，然後再隨著他們想深度了解的方向逐漸給出更多信息——只要使他們感興趣並願意繼續了解就足夠，千萬不要讓用戶深陷信息泥潭。

說回內容，正如經營著一家菜肴精美的餐館，客人沒點菜前你便知道他所需要的食物。利用你的數據分析去弄清楚用戶在做什麼，用更好的內容豐富用戶的體驗，從而把那些變成便於用戶易於消化理解的東西，便於用戶擇決。

5. 優化屏幕使用空間

不變的導航設置、滿屏幕的廣告宣傳、過度的市場術語使用，這些都不能讓用戶充分享受體驗。

當用戶正滾動頁面或正嘗試瀏覽時，讓導航「隱身」，讓用戶有更大的空間去探索信息——將內容策略性排版，從而避免在非主動前提下不發生點擊的情況。

切記不要強行給用戶插入屏幕廣告，尤其是當用戶在閱讀瀏覽或與頁面內容互動時。在也沒有比廣告佔滿屏幕，等待15秒方能返回剛才的頁面而更讓用戶想退出的事了。

如果你想推送用戶廣告，可以循序漸進地根據用戶瀏覽的內容選擇性推送。

如果用戶正在觀看機器學習的故事，而文中的廣告是更多有關機器學習的信息或相關內容性質的廣告，還說得過去。但當你的平台推送的廣告與用戶正在閱覽的內容無關，例如推銷一款用戶在亞馬遜上之前搜索過的產品，這時候你的體驗開始趨向廣告推銷了。

重視用戶，方能回饋重視。

沒有比為了獲取利潤而打破用戶體驗（或者讓他們跳轉頁面）更糟糕的事了。逐漸你的用戶會停止訪問，你擁有眾多用戶的現象已消失，利潤也會隨著用戶減少而減少。

6. 讓動畫使用有價值

許多APP嘗試用動畫作為自身無趣體驗的創可貼。記住，在網頁中出現的動畫是輔助用戶形象地了解當前事物，而不是娛樂大眾。你並不是在做一部迪士尼動畫片。

如果正進行一項進程，展示我剩餘進度；如果我打開某個東西，讓我看到它在我眼前打開；如果我關閉某個東西，讓我看到它最小化或是在屏幕上消失的過程。絕對不要讓你的用戶陷入「剛剛哪裡登陸」或是「剛才發生了什麼」之類無指示性的情境。為了應備用戶容易遺忘，請確保網頁上有返回鍵。

動畫可用於難以形容的情景，如同Mailchimp將其運用為寄信成功後的擊掌，Twitter在轉發或喜歡上用小動畫或像Facebook製成形象生動的表情包。動畫賦予用戶體驗更強的表現力與人性化。但如果你想在頁面上製作動畫，請確保它是雅緻得體的——不要讓用戶觸碰屏幕時，動畫的火花閃爍不停。

請查閱 Budi Harto Tanrim 的 Designing an In-App Survey 了解更過交互表現形式

如果運用恰當，動畫將會是用戶體驗很棒的補充。用動畫效果去輔助用戶在體驗中了解事情或者增強他們的理解，拒絕為娛樂而使用動畫。

為提升生活水平而設計，不為績效指標。

我學會設計的最大心得是，我寧願創造一個被用戶不斷使用的工具，也不願做出為了賺錢只讓用戶不經意間浪費時間盯著屏幕，起碼工具是為了使生活更美好。

雖然我們都想創造出「黏性」體驗，但我們應關注和創造能提升生活品質的實用、可用且有吸引力的體驗。用關注用戶實際需求代替公司關鍵績效指標，我們會看到比預期數據更大的收益。

我相信將人性化融入設計和不再一味追求收益利潤，你會發現你的收益會增加更多。儘管這種說法和你們重視數據分析的老闆們的想法背道而馳，但卻是正確的。

讓我們重視並創造提升生活質量，實用、可用且具有吸引力的體驗。

所以，當下次你的老闆告訴你需要「黏性」體驗去保證績效指標，我希望你能提出質疑。為用戶而抗爭，還設計以本原。

當你的老闆對你的質疑感到煩心時，保持耐心，幫助她/他理解。展示出對反對觀點的無所畏懼，因為你沒有錯。保持冷靜，然後用他們不可否置的方式闡釋你的觀點。提示：根據研究調研闡釋你的觀點。

在體驗設計的宏偉藍圖下，唯一的改變之路就在每天一小步通向未來的實踐中。

作者簡介：

Joe Toscano Experience designer for R/GA』s Google team in San Francisco, CA. Joe plans to change the world with a smile, design and some code.

作者：Joe Toscano（譯者：Sisy 審校：Ariel ）

原文鏈接：http://blog.invisionapp.com/mobile-first-mobile-only/

原文發布日期： July 19, 2016

頭圖素材來源：http://www.citrus.com.au

版權聲明：

• 本文版權歸：UXRen翻譯組 所有；
• 轉載帶有「UXRen譯」抬頭的翻譯文章，文章標題必須保留「UXRen譯」字樣；
• 轉載文中必須保留：「UXRen翻譯組」、「作者」、「譯者」及「審校者」信息；
• 轉載文末必須保留本譯文網頁鏈接地址；
• 如未遵照上述規則轉載，視為侵權，UXRen社區保留隨時追責的權利。

推薦閱讀：