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

think with Google

Mobile App UX Principles: Improving User Experience and Optimising Conversion




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對他們的價值。

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



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



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.



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). 


來源: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



  • 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. 


來源: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.




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



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.



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. 


來源: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.

購買 / 預訂的原因要清楚(以鼓勵使用、提高轉換率)


“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.


來源: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的任何層級,用戶都應該能夠看到抽屜導覽(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.



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.). 


來源: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.



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



  • 提供免登入方案
  • 唯有產品的核心價值需要先註冊後享有,才要求使用者加入會員,然後…
    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需要先註冊才能享有完整的核心價值,例如個人化的內容、應需服務(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.

在高度垂直控管 (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.


來源: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. 


來源: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



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)



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.

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

來源: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”


來源:Mobile App UX Principles





你的電子郵件位址並不會被公開。 必要欄位標記為 *