玩運彩練小喂

Mobile App UX Principles – chp.1 Adopt 中文化

think with Google

原文出處:
Mobile App UX Principles: Improving User Experience and Optimising Conversion

以下簡譯第一章,p.6-10中文翻譯取用、改寫自百度MUX用研殘檔

1・Adopt

 

Splash Screen, Tips & On-boarding

The focus at this stage is to remove all roadblocks to usage – and adoption – of your mobile app.

Get users into the content / substance as quickly as possible, so that they can use, assess and experience its value to them.

First impressions count, and a splash screen gives you a short but vital window to engage a user in your proposition. But, never make users wait.

Tips / help or an onboarding sequence should only be employed if necessary – so as not to interrupt users – but when used appropriately they can guide the user in their initial experience and adoption.

啟動頁、幫助與引導

本階段聚焦於消除用戶上手和使用APP的所有障礙。

讓用戶盡快地看到APP的主要內容 / 主體,這樣他們才能使用、評估和感受APP對他們的價值。

第一印象至關重要,啟動頁(splash screen)提供了一個簡短而重要的機會來讓用戶了解你的主張。但是請記得,永遠不要讓用戶等待。

不要打擾用戶,只在必要的時候才使用提示幫助或引導(onboarding)。如果使用恰當,引導可以幫助新手初次使用和上手。

 

When asked if they’d prefer to click through to an app or a mobile website from mobile search results, more people prefer the app. Here’s why: Apps are quicker to load than mobile websites (46%).
– App-Nesia in the UK: The Need for Re-Engagement Marketing, 2015

您更喜歡藉由APP還是行動版網站查看手機上的搜尋結果?
更多人選擇APP。因為46%的用戶認為APP比行動版網站載入更快。

 

The app appears to load quickly
Set expectations immediately by ensuring the launch screen loads immediately and makes the app feel fast and responsive. Don’t waste users time at this critical adoption stage, before they’ve even tried to use your app.

讓APP顯得載入飛快
啟動頁快速載入,APP及時回應可以給用戶留下好印象。不要在關鍵的上手階段,甚至開始試用APP之前,浪費用戶的時間。

 

Splash screen is consistent with brand(e.g. communicates the brand essence)
A splash screen should engage users and communicate the essence of the brand, but never keep the user waiting. Always put the user in control and able to execute their task ASAP.

啟動頁要與品牌形象一致(例如:傳達品牌精髓)
啟動頁應吸引用戶並傳達品牌的精髓,但是,永遠不要此讓用戶等待。讓用戶掌握控制權,能夠隨時開始他們想要的操作。

 

If the app supports tips / help, they are displayed in context to what the user is doing
If the user needs to learn anything about the app, but not before their first use of it, provide contextual tips and help instead of an onboarding sequence. Tips and help that are relevant to what the user is trying to do, when they are doing it, will be more beneficial to the user than a generic – and interruptive – onboarding. Engage users through images, animation and interactivity, to help them learn by doing, and only provide tips for priority or difficult tasks (they are not a substitute for good UX design). 

使用情境化的幫助和提示
在首次使用APP之後,如果用戶需要學習任何操作,應根據情境提供提示和幫助,而不是用引導頁,與通用且打擾人的引導相比,在使用情境中提供提示和幫助,對用戶更有益。通過圖片、動畫和互動來吸引用戶,幫助用戶在操作中學習使用。只為高優先任務或困難任務提供提示和幫助。(幫助提示不能代替好的體驗設計)

來源:Mobile App UX Principles
來源:Mobile App UX Principles

 

If app supports onboarding, it is used because it is essential for first use of the app
An onboarding sequence should only be employed if it is essential and contextual tips / help are insufficient. If used, it should only surface the highest priority learnings a user will need for first use. Try to engage users in the same way as ‘tips and help’, avoid using more than 3-or-4 screens and benefits, and minimise copy. Check analytics regularly, and if the flow isn’t working, kill it! and consider another design approach. Rationale for using onboarding would be:

  • App is empty and requires user to input to populate it for first use
  • App requires personal input or selections for first use
  • App has complex functionality such as in a productivity-type app
  • App relies on hidden or bespoke gestures unfamiliar to most users
  • App has been updated with new features

使用引導應謹慎,只有當其對初次使用的用戶必不可少時才採用
只有在情境化的提示和幫助不夠時才使用引導。若使用引導,則只展示用戶首次使用時優先需要學習的內容。引導也應當像”提示幫助”一樣,使用圖片、動畫和互動來吸引用戶與幫助用戶。引導內容盡量不要超過3~4頁,並減少重複。監測統計數據,如果發現引導無效,請大膽捨棄,並考慮採取其他設計方法。

使用引導的基本原則是:

  • APP無內容,依賴用戶首次使用時輸入來產生內容
  • APP需要用戶首次使用時進行輸入或選擇
  • APP包含複雜的功能,比如工作效率類APP
  • APP需要使用大多數用戶不熟悉的、隱藏的或特有的手勢動作
  • APP發佈了新功能 / 特徵

 

If onboarding is used, the user can choose to skip it (put the user in control)
Users should be able to skip the onboarding sequence if they wish not to be interrupted by it or do not perceive a benefit in swiping through it. Put the user in control of their time and initial experience of the app. Onboarding should only ever appear on first app use, or until user is signed- in. 

如果有引導,也要有略過的選項(讓用戶可以自己掌握)
如果用戶不希望被引導打擾,或感覺引導沒有幫助,應讓用戶可以選擇跳過引導。讓用戶可以自己控制在這個APP上的時間和使用的初始體驗。引導應只在首次使用或用戶登入後出現。

來源:Mobile App UX Principles
來源:Mobile App UX Principles

 

Homescreen & Navigation

An app homescreen should provide the user with journey(s) and functionality to complete their priority tasks, and provide content that meets
their needs and expectations. Navigation should be clear, task-oriented, logical (e.g. screen controls suggest how to use it), and navigation location (e.g. menu bar) consistent throughout. Only primary navigation and content should be visible by default, with secondary content hidden – but available via tap or swipe – off-screen.

主頁與導覽

APP的主頁應為用戶提供完成核心任務的功能和路徑,提供滿足預期和需求的內容。導覽應清晰、任務導向、邏輯合理(有操作提示讓人明確知道如何使用)、導航區塊(如選單列)要保持一致。只預設展示高優先的導覽和內容,隱藏次要內容,但可以藉由點擊展示或滑動消除。

 

When asked if they’d prefer to click through to an app or a mobile website from mobile search results, more people prefer the app. Here’s why: Apps are simpler to navigate than mobile websites (50%)”.
– App-Nesia in the UK: The Need for Re-Engagement Marketing, 2015

您更喜歡藉由APP還是行動版網站查看手機上的搜尋結果?
更多用戶選擇APP,因為50%的用戶認為APP的導覽比行動版網站的更簡單。

 

Brand logos are used subtly and sparingly(app screen space is limited)
Apps are not sites, and they do NOT need a brand logo on every screen that link to the home screen. App screen space is limited. And, users’ have already made the effort to download – so they know your brand – and use your app, so reinforce your brand identity subtly, i.e. instead of your full brand name, use an icon, or a colour; and apply it sparingly, i.e. only on splash screen and home screen.

LOGO的使用要巧妙而謹慎(APP的螢幕空間有限)
APP不是網站,不需要每一個畫面都有連結主頁的LOGO。一方面,因為APP的螢幕空間有限;另一方面,既然用戶已經下載、使用你的APP,他們已經知道你的品牌。品牌強化要巧妙,例如用icon或顏色,而不是完整的品牌名稱。品牌強化也要克制,比如只在啟動頁或主頁展示。

 

App purpose and the priority user journeys are clear (critical for newer brands)
For users who’ve make the effort to download your app, you now need to satisfy their expectation of what your brand and proposition will deliver, i.e. by communicating the priority user journeys and need states that your target customers will want to act on. 

APP的功能和核心路徑要清楚(對新品牌尤其重要)
用戶下載了你的APP後,你需要滿足他們對品牌和產品的期望,例如:告知用戶使用中的最佳路徑,告知有不同需求的目標族群相對應可以進行的操作。

來源:Mobile App UX Principles
來源:Mobile App UX Principles

 

Reasons to buy / book are clear(to encourage usage and conversion)
This applies to all brands, whether they are unknown or renowned. Unknown brands need to give users reasons to adopt them and their new proposition, whereas well known brands need to create position themselves and differentiate from the competition. Reasons to believe could be related to things such as: price, discounts, features, fulfillment, customer service, luxury, heritage, etc.

購買 / 預訂的原因要清楚(以鼓勵使用、提高轉換率)
這一點適用於所有品牌,無論知名度。非知名APP要向用戶傳達他們的新想法來吸引用戶使用;而知名品牌需要定位自己,在市場競爭中展示自己的差異化優勢。值得相信的理由包括:價格、折扣、特點、需求滿足、客服、奢華、傳承等等。

 

“Simple design, intense content.”
– Edward Tufte

簡單的設計,豐富的內容

 

Only primary content and functionality is on-screen by default (all secondary things are off-screen and available from a menu)
Users should not be presented with an app that replicates the brands mobile site, nor contains too much content and functionality on-screen by default. Apps should be clear and journeys / tasks obvious, and so the brand should have prioritised the primary functionality and content, and put all else off-screen, e.g. accessible with a swipe from a menu, above, aside or below the screen.

只預設展示高優先的內容和導覽(所有次要內容應該隱藏,但是可以從選單中找到)
APP不應複製行動版網站,每個畫面不要預設顯示過多內容和功能。APP結構要清楚,路徑或任務要明顯。只預設展示高優先的功能和內容,其餘可以藉由滑動螢幕上、下、側邊選單找到。

來源:Mobile App UX Principles
來源:Mobile App UX Principles

 

Menu drawer is accessible from all app levels(possible exception: eCommerce checkout)
User should be able to click on a visible menu drawer icon, or swipe across to reveal the menu list, at every level of the app (except possibly in an eCommerce checkout that is quarantined), to ensure they can navigate quickly. Navigating from a menu drawer at every level of an app is critical for apps that have deep or complicated structures, such as retail marketplaces or content aggregators.

在APP的任何層級,都可以使用抽屜導覽(除了電商類的結帳頁)
在APP的任何層級,用戶都應該能夠看到抽屜導覽(menu drawer)的圖示,能夠點擊或滑動導覽,以便快速前往目的頁面(除了電商類的結帳頁之外)。這一點,對結構較深或結構複雜的APP非常重要,比如零售類APP或內容聚合類APP。

 

If app uses a menu drawer, it displays it on first use (either with a hint or opening fully)
On first use of the app, the menu drawer – if it uses such a menu system – could be revealed by default in order to display the breadth of content and organisation before they start to navigate. An alternative to this is to hint that there is a menu drawer available but off-screen, e.g. by quickly showing and then hiding it, or by a subtle bounce open of the menu drawer.

若使用抽屜導覽,在用戶首次使用時暗示或展示
若使用抽屜導覽,應在用戶首次使用時展示,以便用戶了解APP的內容深度和組織結構。另一種方法是暗示用戶抽屜導覽的存在,但不完整展示,例如快速展示後收合,或巧妙地彈開。

 

In Android apps, the app bar and tab bar should be located at the top of the screen (not bottom)
The Android convention is for the app bar (menu) and tab bar to be shown at the top of the screen. If they are displayed at the bottom of the screen – where Android displays system navigation controls – they could cause confusion and harm navigation.

Android的選單列(app bar)和頁籤列(tab bar)應該擺在頁面上緣,不是底部
Android APP的傳統做法是把選單列或頁籤列放在螢幕上緣。如果放在底部,用戶可能混淆APP的導覽和Android的系統導覽而影響使用。

 

Long app screens don’t have dead-ends(e.g. so the user continues to discover and explore)
If your app has long screens of content, make sure that when users reach the footer of the screen they can continue to discover and explore, and don’t encounter dead-ends that cause them to abandon the app. For example, at the footer of a long screen your app could provide a:

  • Back to TOP button
  • Search field if one was displayed at the top of the screen
  • Few navigation options to encourage users to continue exploring
  • Or, you could provide an infinitely scrolling screen, which is used by engagement-type apps (e.g. social, messaging, content), but is also used by some eCommerce apps to display items as part of a stream of content

修長畫面不應該出現死路,以鼓勵用戶繼續探索
若APP使用修長畫面 / 瀑布流的內容,請確保當用戶到達頁面底部時,能夠繼續發現探索,而不是遇到死路造成棄用。比如在修長畫面的結尾可以提供:

  • 回到頂部的按鈕
  • 搜尋欄位
  • 鼓勵用戶繼續使用的導覽選項
  • 採用無限下拉方式,沈浸類APP(例如社交、聊天、內容)和電商類APP常用這招

 

Menu list is either short(e.g. up to 7) or is longer and has clear sections
There are many ways to design a menu list, but they must be obvious to the apps’ target user. A short and clear list is the default menu. An alternative is a menu containing more items that is separated into clear sections, possibly labelled to be quickly understood by the target user, e.g. a retail apps could contain the following menu sections (and links): Shop (gender, department, sale, etc.), Account (basket, details, sign-out, etc.). 

選單列最好簡短(不超過七個)。如果較長,需明確的劃分群組
設計選單的方式有許多種,無論如何設計,要確保目標群容易理解。預設選單設計是簡短而清楚的列表,另一種方法是把包含更多內容的選單分成幾個群組。確保用戶能迅速理解每個部分的名稱,比如零售類APP可以這麼做:購物(分性別、類型、促銷等)、帳戶(購物車、詳細資料、退出等)。

來源:Mobile App UX Principles
來源:Mobile App UX Principles

 

Menu list terminology is obvious to the target user (menus should not contain terms that your target user base won’t understand)
Users need to identify with menu labels / terminology, so that they can navigate to the app section they need as quickly as possible. And order the menu list based on popularity or other system that will be understood and of value to users. Menu’s with terms that require business knowledge, or try to mix – e.g. literal and metaphoric – terms may confuse users, and increase abandonment.

選單列表的用語要易懂(不要使用目標群不理解的術語)
用戶需要理解選單的標籤或用語才能迅速使用導覽。選單列表可以根據使用頻率排序,或其他對用戶有價值的排序方式。如果用戶不理解選單用語,便容易忽略它;所以應該避免使用像是商業術語、照本宣科或比喻類的詞彙。

 

Carousels are obvious to navigate(beware, most are not!)
Carousels are problematic on apps just as they are on web sites, where 98% drop-off between the first and second screen in the carousel is not uncommon (source: Erik Runyon). Carousels can be blind spots where promotions are rarely seen. That being said, if a carousel is the appropriate interaction method in your app, design it carefully and leverage the mobile design patterns that users’ are familiar with from their native operating systems, i.e. in Android and iOS a series of dots indicate a series of horizontal swipeable images.

輪播圖要易於導覽(注意!大部分APP都沒做到)
APP和網站上的輪播圖一樣有各種問題。第二個輪播畫面的點擊率比第一個少98%是很常見的現象,輪播圖上的促銷經常被忽略。儘管如此,倘若輪播圖是合適的互動介面,仍然可以使用。使用時需要精心設計,參考用戶熟悉的原生操作系統的設計規範,比如在Android和ios系統中,一組圓點代表一組可以橫向滑動的圖片。

 

User can swipe horizontally to quickly navigate laterally
Good mobile app design enables users to quickly swipe to navigate laterally to the next screen, instead of being forced to hierarchically navigate – pogo – up and down.

 提供橫向滑動導覽
好的設計應保證用戶能橫向滑動到下一個畫面,而不是只能上下滑動。

 

Sign-up, Sign-in & Permissions

One of the main points of difference between mobile apps and mobile sites, is that apps enable a user to be persistently logged-in (eliminating manual login effort and mistakes), to benefit from the level of convenience and personalisation only achievable from a persistently logged-in state, derived from apps that store and act on your details, behaviours and transaction history. To provide a user experience with the least barriers to conversion, mobile apps should:

  • Provide non-signed-in journey
  • Request sign-up “only” when it is dependent on providing value, and then …
    1. Request minimal data
    2. Display clear benefit statements

註冊、登入與請求授權

行動版網站與APP最主要的差異點在於,APP能維持會員的登入狀態(省去手動登入的麻煩與出錯機率),讓他們體驗到什麼是便利與個人化的境界。能做到這點,是因為APP內的用戶資料、操作行為與交易紀錄被加以分析運用。為了降低使用者的轉換障礙,手機上的APP應該:

  • 提供免登入方案
  • 唯有產品的核心價值需要先註冊後享有,才要求使用者加入會員,然後…
    1. 僅索取最精簡必要的個資
    2. 清楚說明加入會員的好處

 

“The system should treat all user input as sacred.”
– Jef Raskin

任何一個系統,應該把使用者輸入的資料當寶

 

User sign-up for the app is quick and the benefit statements are compelling
Registration is a road-block to adoption. If you have an eCommerce app and you want users to sign-up, try to capture the bulk of user data during their first checkout (plus any additional fields like username, password, or social sign-in). But, if your app is dependent on sign-up to provide value, e.g. with personalised content, on-demand services, rich social features, etc. you’ll need to provide compelling benefit statements to drive adoption and sign-up.

APP的註冊程序要快且聲明要有說服力,並告訴使用者做這件事情能得到什麼好處
註冊會降低採用意願。如果有個電子商務的APP希望使用者註冊,在他們頭一次結帳時儘可能要到最完整的個資(外加其他資料,例如帳密、社群帳號登入)。但是,假使APP需要先註冊才能享有完整的核心價值,例如個人化的內容、應需服務(on-demand services)、豐富的社群功能等等,那麼強而有力的賣點可以促進採用的意願,並提高註冊率。

來源:Mobile App UX Principles
來源:Mobile App UX Principles

 

User sign-up for apps with sensitive / valuable data is quick and benefit statements are clear (e.g. apps by financial services or health record providers)
Registration is a familiar mandatory request for apps in highly regulated verticals (e.g. financial services) or those that store highly sensitive data (e.g. personal health records). These apps should still make sign-up quick, encourage it with clear benefit statements, and provide the level of reassurance that users expect from those that require a risk / benefit decision.

只要牽涉到敏感、貴重資料的APP,註冊流程就是要快,而且要清楚聲明有什麼好處(例如金融或個人健康紀錄服務)
在高度垂直控管 (regulated verticals) (例如金融服務)或儲存高度敏感資料(例如個人健康紀錄)的APP,加入會員是很常見的必要之惡。這些APP應該盡可能加快註冊流程,用清楚的優點鼓勵使用者加入會員,並再次擔保這個有風險的行動不會發生任何問題,以符合使用者的期待。

 

If app requests sign-up, the user can choose to continue as a guest (the user is in control)
Users should be able to choose to ignore registration and continue as a guest, where they can sample and assess its value to them, before committing to register. This is even more important for apps from unknown brands, or apps that provide engaging content and which are dependent on users experiencing them before they can make a registration decision. Always put the user in control of their time and initial experience of the app.

要求使用者註冊時,也要提供”訪客”的選項(由使用者主導)
在決定註冊之前,使用者有權略過這個程序,以訪客身份進入APP,來試用和評估該軟體對他們有什麼用處。對於不知名品牌開發的APP,或內容有吸引力的APP,以及要先試用過才能決定是否註冊的APP,這點尤其重要。永遠讓使用者主導使用的時間量,以及初次使用的經驗。

來源:Mobile App UX Principles
來源:Mobile App UX Principles

 

If app sign-up is mandatory, the user can choose to demo it first (the user is in control)
Users should be able to choose to ignore registration and continue as a guest, where they can sample and assess its value to them, before committing to register. This is even more important for apps from unknown brands, or apps that provide engaging content and which are dependent on users experiencing them before they can make a registration decision. Always put the user in control of their time and initial experience of the app. 

如果非得註冊,使用者可以選擇先看展示(由使用者主導)
在決定註冊之前,使用者有權略過這個程序,以訪客身份進入APP,來試用和評估該軟體對他們有什麼用處。對於不知名品牌開發的APP,或內容有吸引力的APP,以及要先試用過才能決定是否註冊的APP,這點尤其重要。永遠讓使用者主導使用的時間量,以及初次使用的經驗。

chp01-p12-02
來源:Mobile App UX Principles

 

First-time user has multiple sign-up options (e.g. username / password and social sign-up)
Users should be presented with multiple sign-up options, such as username / email and password, and social sign-up. Because, while some users may prefer the faster approach of social sign-up (e.g. via G+, Facebook or Twitter), others may prefer to keep their different social profiles separate, and others again may not even be consumers of social networks. 

提供首次造訪者多樣化的註冊方式(例如帳號 / 密碼與社群網站註冊)
應該提供多重註冊方式,例如自訂帳號 / 信箱帳號與密碼,還有社群帳號的登入方式。理由是有的人可能偏好用社群帳號快速註冊(例如透過google+、facebook或twitter),有的人會區分不同社群帳號的用途(註:不見得任一個社群帳號都會拿來註冊),也有人根本沒在用社群網站。

 

User can select to reveal or hide password as they type, during sign-up or sign-in (e.g. by toggling a ‘reveal’ or ‘hide’ control)
Give users the option to quickly select a toggle control that reveals – or hides – their password as they type. This will reduce password input mistakes, during sign-up and sign-in.

使用者在註冊或登入頁輸入密碼時,可以切換顯示或隱藏密碼(例如點擊”顯示”或”隱藏”的開關)
當使用者在註冊與登入過程中輸入密碼時,附上可以快速切換顯示 / 隱藏密碼的開關,以降低輸入錯誤的機率。

來源:Mobile App UX Principles

 

When asked if they’d prefer to click through to an app or a mobile website from mobile search results, more people prefer the app. Here’s why: Apps I have installed will have my login details pre-entered and save me time (51%).
– App-Nesia in the UK: The Need for Re-Engagement Marketing, 2015

當被問到在行動裝置上,是否會偏好點擊搜尋結果中的app還是網站,多數使用者的選擇是APP。因為手機上已安裝的APP會幫使用者預填登入的個資,可以節省51%左右的操作時間

 

Return-user is persistently signed-in to their app
Users shouldn’t have to keep signing-in to their apps once they are created, because one of the main differences between a site and an app is an app provides a persistent experience, to provide ongoing convenience and personalisation. A persistently signed-in user base enables cross-device conversion tracking. One caveat to persistent sign-in is apps in regulated verticals (e.g. financial services) or those that store highly sensitive data (e.g. personal health records)

幫APP的回流客保留登入狀態
一旦帳戶建立,不該每次開啟都要求使用者必須重新登入,因為網站與APP的最大差異,正是APP能提供持續性的的使用經驗:不會被(要求登入)打擾的便利性與富含個人化的服務。還有,持續登入的用戶群才得以追蹤其使用不同裝置的轉換率。唯獨要小心把持續登入的機制應用在垂直控管(例如金融服務)或儲存高度敏感資料的APP(例如個人健康紀錄)。

 

Touch ID is presented to iPhone (5S and up) users as a convenient way to sign-in
Companies can employ Touch ID (fingerprint recognition) to enable iOS (version 5S and up) users to more conveniently log-in to apps, such as users of Evernote Premium who get access to a passcode lock with Touch ID compatibility.

為iphone5S與更新ios機種的使用者增加更便利的指紋辨識登入功能
開發團隊可以針對ios(包括iphone 5S以後的版本)的用戶增加指紋辨識的功能,更方便他們登入APP,例如evernote Premium版的用戶,可以在設定密碼鎖後,選擇以指紋辨識解鎖。

chp01-p14-01
來源:Mobile App UX Principles

 

User is asked to grant app permissions and is given reasons why (and perceive the benefit)
Only ask for permissions that enable your app to provide the user with value, ask at the appropriate time (in context to what user is doing), and with a clear benefit statement. For example, request permission for a users current location when they initiate a search or service:“ACME would like to use your current location so we can help you remember events”

徵求使用者授權時,要明確告知理由(以及對他們有什麼好處)
在APP提供的服務有這個價值的前提下才請求授權,時機點要恰當(依據使用脈絡來判斷),而且好處要交代清楚。例如,在使用者正準備搜尋時,請求授權即時定位,或是以下服務案例:“ACME想知道你目前的所在地,好幫你記住事情”

chp01-p14-02
來源:Mobile App UX Principles

 

 

 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *