移動用戶體驗要素(上篇)
譯者注:對于移動用戶體驗的從業人員,本文可以說是一部寶典。文章不僅提綱挈領地概要了移動用戶體驗的12大要素及其規范,更提供了詳實而豐富的參考文獻。我和Nina將分別從上篇和下篇帶來此篇譯文,希望我們提供的譯文能為從業者帶來系統思考和思維啟發。
英文原文:?The?Elements?Of?The?Mobile?User?Experience
--------------------------------------------------
移動用戶數和手機使用量都在逐年增加。隨著越來越多的用戶使用手機完成任務(參見The?Future?of?Mobile),如何改進移動用戶體驗的各個影響要素,便成為值得關注的焦點。
移動用戶體驗是指用戶使用低端功能機到高清平板電腦間的任意設備中,與移動產品(瀏覽器或App)互動之前、之時及之后的認知和感受。
為了創建令移動用戶愉悅的體驗,我們必須重新思考那些長期以來被認為理所當然的桌面端設計。移動用戶體驗的復雜性源于移動設備的特性,主要包括:小屏幕,設備特性的巨大差異,電量和網絡的限制,難以定位又永遠變化的移動使用場景。
通過解析移動用戶體驗的重要組成部分,我們可以得到一個概念框架來構建和評估好的移動體驗。這些部分在文章《以用戶為中心的移動設計方法》中有所提及 (參見user-centered approach to designing for mobile)。下圖組成要素決定了移動用戶體驗,包括:功能、情境、用戶輸入、內容和營銷等等。
以上這些要素的重要性會根據設備類型不同(如非智能手機、智能手機、平板電腦)和界面顯示不同(如App和Web)發生變化。本文將簡要介紹這些要素,并詳細說明相關的重要準則。
{功能}
功能是指幫助用戶完成任務、實現目標的工具和特性。
規范
1. 優先考慮和展示其他平臺上與移動環境高度相關的核心功能。如對于航空公司,應具有航班狀態查詢和自助登機功能。對于化妝品連鎖店Sephora,用戶可以在移動設備上方便地訪問產品評論,然后到店內購物。
2. 提供移動設備特有的功能(如條形碼掃描和圖像識別),必要時利用設備的硬件能力增強功能特性,從而提高用戶的參與感及樂趣。在”Old?Navy”的老版本中,用戶在商店中拍下商標的照片后,可以獲得有驚喜的游戲或折扣。
3. 確保為移動設備優化基本功能和內容。例如,查找商店時顯示最近的商店,并確保點擊號碼便能與商店通話。
4. 提供與業務相關的功能。對于零售網站和App來說,主要包括產品搜索,訂單狀態和購物車。
5. 提供所有平臺都會有的關鍵功能。無論在何種設備或平臺上,注冊用戶應該看到他們的個性化設置。如果移動端沒有某些功能,那么要將用戶引到合適的平臺上,如TripIt,引導用戶去web端設置個人網絡。
拓展閱讀
“Sharing?App?Bump?3.0?Slashes?Most?Features,?Proves?Less?Really?Can?Be?More,”?Fast?Company
{信息架構}
它是指將功能和內容組織成一種邏輯化的結構,以幫助用戶查找信息,完成任務,包括:導航,搜索和標簽欄。
規范
1. 起始頁應該優先考慮用戶需求,展示產品主要特性和功能鏈接?!兑苿釉O計模式庫》(參見MOBILE?DESIGN?PATTERN?GALLERY)中提供了移動設備中的主要導航模式和輔助導航模式的樣例,其中不少為垂直導航,而非桌面端網站的的水平導航。
2. 讓用戶導航至最重要的內容和功能時,所需點擊次數盡可能少。小屏幕上的導航通常情況下應該數量多、層級淺,一定不能有太深的層級。我們知道,每一個內容模塊的訪問不能超過三次點擊(參見THREE?CLICKS?(OR?TAPS)?IS?NOT?THE?MAGIC?NUMBER),同時用戶還需要知道每一次點擊都在幫助他們完成任務。因為每一個附加的層級意味著:更多的點擊、更多的頁面加載和帶寬消耗。
3. 要同時考慮觸摸屏和非觸摸屏用戶的導航需求。當為觸摸屏設計時,需確保導航項的點擊區域至少有30個像素的寬度或高度。而對于非觸摸屏手機(非智能手機),需提供按鍵快捷鍵,這樣用戶可以通過輸入0-9中的一個數字來快速訪問。
CNN所做的快捷鍵(左圖),很迎合非智能手機用戶。而DELTA做的并不好,用戶需要先連按9次下方向鍵才能開始使用其APP(中圖和右圖)。
4. 提供導航提示讓用戶知道他們在哪里,如何返回,以及如何跳回到開始的地方?!耙苿用姘肌背1挥糜谌〈胺祷亍卑粹o,它用標簽的形式展示了用戶是從哪部分 或類別而來。對于移動網站,尤其是當每個屏幕上的導航都不重復的時候,可使用標準規范,如“HOME”圖標鏈接到首頁。
5. 使用簡潔、明確、一致和描述性的標簽作為導航和鏈接。這通常是一個很好的做法,尤其是在小型移動設備上更為重要。
拓展閱讀
“CHAPTER?1:?NAVIGATION,”?MOBILE?DESIGN?PATTERN?GALLERY,?THERESA?NEIL
{內容}
內容并不是LOU?ROSENFELD和PETER?MORVILLE在《萬維網信息架構》中提及的“網站中展示的那堆東西”,而是能為用戶提供信息的、以不同樣式存在的多種類型的內容,比如文本、圖片和視頻。
規范
1. 提供適當而大眾的內容給用戶(如產品信息,社交內容,指導和支持的內容,營銷內容)。
2. 若多媒體在移動環境下對用戶的操作有幫助,能增加內容價值或支持該網站的目標,那就用它吧。大多數時候,當用戶需要消遣或娛樂(如新聞或有趣的片段),或指導(例如,如何使用APP或新功能)時,提供多媒體內容是最好的選擇。
3. 讓用戶控制多媒體:不要自動播放視頻或音頻、允許用戶跳過或停止多媒體內容、讓用戶知曉多媒體內容占用的帶寬。
4. 確保內容適用于移動環境。正如從印刷轉化為互聯網文章使用的分塊規則,應該縮短移動設備上的文章,以使用戶能在較短的注意力集中時間讀完。為移動設備優化圖像和媒體;也就是在小設備上等比縮小圖像和媒體內容,并確保圖像在新IPAD上足夠清晰(參見SHARP?ENOUGH?FOR?THE?NEW?IPAD)。
5. 確保主要內容是目標設備支持的格式。即使是現在,大眾官網仍然讓IOS用戶下載FLASH。
拓展閱讀
“MOBILE?CONTENT:?IF?IN?DOUBT,?LEAVE?IT?OUT,”?JAKOB?NIELSEN,?ALERTBOX
“MOBILE?CONTENT?STRATEGY?LINK-O-RAMA?2011,”?KAREN?MCGRANE
{設計}
這是指視覺呈現和互動體驗,包括平面設計、品牌包裝和排版。
規范
1. 記住名言“移動化,而非小型化”(BARBARA?BALLARD)和“不縮小,重新思考”(諾基亞)。它們都提到:移動設計并不僅僅是完全移植臺式電腦的設計。
2. 為了預覽和快速掃描而設計。?預覽設計指的是視覺設計如何能快速、輕松地傳達信息。
3. 通過色彩、排版和個性化設計,在視覺上保持設計元素和體驗(手機,應用程序,網絡,印刷和現實世界)統一。如下堆積的圖片中,即使看不到品牌名稱,辨識亞馬遜仍然很容易。
4. 引導用戶從最開始最突出的元素著手,幫助他們完成任務,這就是所謂的視覺流。一個好的設計既包含視覺元素,還包含信息結構,內容和功能,以傳達品牌形象、引導用戶。
5. 設計過程中需考慮縱向和橫向的設計。越來越多的設備能支持多個方向,并自動調節以適配到用戶的物理方向。當用戶改變設備方向時,確保用戶的位置位于畫面中。如果方向變化后有附加或不同功能,需要明確指示,如下圖應用ING所示。
拓展閱讀
“DESIGNING?GLANCEABLE?PERIPHERAL?DISPLAYS“?(6?MB,?PDF),?MATTHEWS,?FORLIZZI?AND?ROHRBACH,?UC?BERKELEY
UNIVERSAL?PRINCIPLES?OF?DESIGN,?REVISED?AND?UPDATED:?125種方法來增強易用性,影響認知,增加吸引力,做出更好的設計決策,設計教學,WILLIAM?LIDWELL,?KRITINA?HOLDEN,?JILL?BUTLER
{用戶輸入}
這是指用戶輸入數據的難度。應盡量降低移動設備上輸入數據的難度,同時避免雙手操作。
規范
1. 限制必填部分的輸入。正如LUKE?WROBLEWSKI在著作《移動為先》(?MOBILE?FIRST)中提到的那樣,“涉及到移動設備上的表格,需 要殘忍而有效地減少,減少,再減少?!毕拗频怯洷恚蛊渲话钌俚谋靥畈糠?,可能情況下,替換為更短內容。比如,使用ZIP號碼,而不是城市和國家。針 對這個規范,我最喜歡舉的反例是大眾的試駕預約表格,移動版必填的字段居然比桌面版還多(高亮部分顯示為多余字段):
2. 盡可能顯示默認值。它可能是用戶最近所選項(如機場或火車站),或是常選項(如檢查飛行狀態時選擇當天日期):
3. 可能的情況下,根據設備特性提供備用輸入機制。APP可以利用設備內置的很多輸入機制,包括手勢,攝像頭,陀螺儀和聲音,但移動網站才剛剛開始使用這些特性,尤其是地理位置。
4. 使用適當的輸入機制,并顯示合適的觸摸式鍵盤,以減少用戶的切換。請記住,在只有數字鍵盤上的非智能手機上,數據輸入更加繁瑣乏味。對于無需過度保密的 APP,允許用戶保持移動設備上的登錄狀態,并保存電子郵件地址和用戶名等信息,因為手機往往是個人設備,不像平板電腦,往往由多人共同使用。
5. 考慮提供自動匹配,拼寫檢查和預測技術,讓數據輸入更加容易并減少錯誤?–?必要時數據可恢復。應禁用一些不恰當的功能,如驗證碼的輸入。
原文來自:互聯網分析沙龍
- 目前還沒評論,等你發揮!