指示性 UI 指導方針Instructional UI guidelines

在某些情況下,教導使用者有關應用程式中不明顯的功能 (例如特定觸控互動) 可能十分有用。In some circumstances it can be helpful to teach the user about functions in your app that might not be obvious to them, such as specific touch interactions. 在這些情況下,您需要透過使用者介面 (UI) 向使用者呈現指示,讓他們可以使用可能沒有注意到的功能。In these cases, you need to present instructions to the user through the user interface (UI), so that they can use those features they might have missed.

何時使用指示性 UIWhen to use instructional UI

指示性 UI 必須謹慎使用。Instructional UI has to be used carefully. 過度使用時,即可輕鬆地予以略過,也可能會惹惱使用者,使其無效。When overused, it can be easily ignored or annoy the user, causing it to be ineffective.

指示性 UI 應該用來協助使用者探索重要且不明顯的應用程式功能,例如使用者可能感興趣的觸控手勢或設定。Instructional UI should be used to help the user discover important and non-obvious features of your app, such as touch gestures or settings they may be interested in. 它也可以用來通知使用者有關應用程式中他們可能已忽略的新功能或變更。It can also be used to inform users about new features or changes in your app that they might have otherwise overlooked.

除非您的應用程式依賴觸控手勢,否則不應該使用指示性 UI 向使用者教導您應用程式的基本功能。Unless your app is dependent on touch gestures, instructional UI should not be used to teach users the fundamental features of your app.

撰寫指示性 UI 的原則Principles of writing instructional UI

良好的指示性 UI 是與使用者有關並且對使用者具有教育性,而且可以提升使用者體驗。Good instructional UI is relevant and educational to the user, and enhances the user experience. 它應該是:It should be:

  • 簡單: 使用者不想因複雜資訊而中斷他們的體驗Simple: Users don't want their experience to be interrupted with complicated information
  • 可記憶: 使用者不想要每次嘗試工作時都看到相同的指示,因此指示必須是他們記得的事項。Memorable: Users don't want to see the same instructions every time they attempt a task, so instructions need to be something they'll remember.
  • 立即相關︰ 如果指示性 UI 未教導使用者有關他們立即要執行的作業,則他們沒有任何原因需要注意它。Immediately relevant: If the instructional UI doesn't teach a user about something that they immediately want to do, they won't have a reason to pay attention to it.

請避免過度使用指示性 UI,並務必選擇正確的主題。Avoid overusing instructional UI, and be sure to choose the right topics. 請不要教導:Do not teach:

  • 基礎功能︰ 如果使用者需要您應用程式的使用指示,請考慮讓應用程式的設計更具直覺式。Fundamental features: If a user needs instructions to use your app, consider making the app design more intuitive.
  • 明顯功能: 如果使用者可以在沒有指示的情況下自行找出功能,則指示性 UI 只是會礙事。Obvious features: If a user can figure out a feature on their own without instruction, then the instructional UI will just get in the way.
  • 複雜功能︰ 指示性 UI 必須簡潔,而且對複雜功能感興趣的使用者通常都願意找出指示,並不需要提供給他們。Complex features: Instructional UI needs to be concise, and users interested in complex features are usually willing to seek out instructions and don't need to be given them.

請避免讓指示性 UI 造成使用者的不方便。Avoid inconveniencing the user with your instructional UI. 請勿:Do not:

  • 隱藏重要資訊: 指示性 UI 應該永遠不會干擾您應用程式的其他功能。Obscure important information: Instructional UI should never get in the way of other features of your app.
  • 強制使用者參與︰ 使用者應該可以忽略指示性 UI,並且仍然繼續執行應用程式。Force users to participate: Users should be able to ignore instructional UI and still progress through the app.
  • 顯示重複資訊︰ 不要使用指示性 UI 不斷騷擾使用者,即使是第一次忽略它時也一樣。Displaying repeat information: Don't harass the user with instructional UI, even if they ignore it the first time. 新增再次顯示指示性 UI 的設定是比較好的做法。Adding an setting to display instructional UI again is a better solution.

指示性 UI 範例Examples of instructional UI

以下是指示性 UI 可協助使用者學習的一些實例:Here are a few instances in which instructional UI can help your users learn:

  • 協助使用者探索觸控互動。Helping users discover touch interactions. 下列螢幕擷取畫面顯示指示性 UI 如何教導玩家在 Cut the Rope 遊戲中使用觸控手勢。The following screen shot shows instructional UI teaching a player how to use touch gestures in the game, Cut the Rope.

    遊戲的螢幕擷取畫面顯示指示性 UI 訊息 "slide acress to cut the rope"

  • 塑造良好的第一印象。Making a great first impression. 當「影片時刻」第一次啟動時,指示性 UI 會提示使用者開始建立影片,但不會妨礙其體驗。When Movie Moments launches for the first time, instructional UI prompts the user to begin creating movies without obstructing their experience.

    影片時刻應用程式的啟動畫面

  • 引導使用者執行複雜工作中的下一步。Guiding users to take the next step in a complicated task. 在 Windows 郵件應用程式中,收件匣底部的提示會引導使用者進入 [設定] 以存取較舊的郵件。In the Windows Mail app, a hint at the bottom of the Inbox directs users to Settings to access older messages.

    顯示指示性 UI 訊息的 Windows 郵件應用程式的裁剪螢幕擷取畫面

    使用者按一下訊息時,應用程式的 [設定] 飛出視窗會顯示在畫面的右側,讓使用者完成工作。When the user clicks the message, the app's Settings flyout appears on the right side of the screen, allowing the user to complete the task. 這些螢幕擷取畫面會顯示使用者按一下指示性 UI 訊息之前與之後,郵件應用程式的情況。These screen shots show the Mail app before and after a user clicks the instructional UI message.

    之前Before After
    Windows 郵件應用程式的螢幕擷取畫面 具有延伸式設定飛出視窗的 Windows 郵件應用程式螢幕擷取畫面