【協作檢校】Google Chrome Web App開發指南第二章：互動設計

First Master the Fundamentals To borrow a quote from a basketball legend, before you do anything else, you must ‘first master the fundamentals’1. All great web apps must have a tight-focus aimed at its users. 首先掌握基礎 借用籃球界一個傳奇人物的話，在你做任何事之前，你必須“夯實基礎”。（說出這句話的是波士頓凱爾特籃球名宿Larry Bird，他同時也是一個Web App愛好者。）優秀的Web Apps必須有一個明確聚焦的細分切入點。 Create a clear statement of purpose Great web apps make it easy for users to focus their attention. People typically can only focus on a limited number of tasks at a time. Instead of providing lots of options and features, users appreciate web applications that allow them to complete the task at hand, without distractions or experiences that were shoehorned into a design that wasn’t meant for it. To ensure your application has a tight-focus aimed at its users, create a short description of your application’s purpose and who you expect to use it. Think of it like your elevator pitch. 1.Focus on the main scenario most people will use your application for, and limit the resources spent on other scenarios. 2.Separate orthogonal or unrelated tasks into their separate applications, which may mean your website provides multiple applications, with each app helping the user focus on a single task. 建立清晰的需求描述 優秀的Web Apps幫助使用者集中注意力。人們在某段時間內只能集中於少數幾件事，因此，與其提供給使用者很多選項和功能，那些沒有干擾能讓使用者立即完成任務的應用更受人青睞。 為了確保你的應用需求明確，為應用寫一個關於主要功能和目標使用者的簡短描述。要保證你能在三分鐘內向陌生人人描述清楚，就像做個電梯遊說。 1．聚焦應用主要使用場景，目標使用者在什麼樣的場景下會用到該應用。 2．將正交或無關的任務分割成各自獨立的應用程式，這可能意味著你的網站要提供多種應用，但每一種應用都是幫助使用者集中於完成一個單一的任務。 Let’s look at a couple hypothetical purpose statements for some great web applications: GOJEE - Hand picked recipes personalized for the user. ASTRID - A social to-do list that helps individuals and groups stay organized, get more done, and have fun in the process. WANDERFLY - Help users discover new experiences based on their interests and budget. KINDLE CLOUD READER - Read your Kindle books, instantly. GOJEE – 手邊的個性化食譜。 ASTRID – 幫助個人和團隊有效組織和完成日常事務的待辦事項清單，並讓人們享受其中。 WANDERFLY – 幫助使用者根據他們的興趣和預算發現新應用。 KINDLE CLOUD READER – 隨時隨地閱讀你的Kindle圖書。 Be self-contained While web applications may pull in data from other sites or applications, but they are almost always self-contained, allowing users to complete their tasks without having to navigate to other sites or apps. By this definition, a search engine would not qualify as an application because it sends users off to other sites to complete their task. 自成體系 雖然Web Apps可能會匯入其他網站或應用程式的資料，但它們幾乎都是自成體系的，它們都能讓使用者無需導航到其他網站或應用就能夠完成他們的任務。根據這個定義，搜尋引擎就不是一個應用，因為它會將使用者導航到到其他網站以完成他們的任務。 Keep the user’s experience focused on the application When users open a web application, they expect to have an experience that feels like a single application, and not a collection of web pages. A great web application differentiates itself from a website by existing as a stand-alone entity, not buried within a web site’s normal web-like navigation and experience. 讓使用者集中於應用 當使用者開啟一個Web App的時候，他們期待這個應用就像是一個單個應用，而不是一系列網頁的集合。一個偉大的Web App會將自己作為一個獨立實體，和網站區分開來，而不是掩埋在網站的導航體驗之下。 Functional by Design Great web app designs eliminate the non-essential components and allow the user to focus on the core components needed to be productive and accomplish their task. When designing your application, it’s important to keep the following guidelines in mind:

1.Minimize superfluous web page content that isn’t necessary for the application to function. For example, the logo that typically is on the top left of a page that takes a user back to the homepage, or a footer that contains links to the terms of service, privacy policy, program policy and your home page. 2.Minimize the number of pages and keep the experience focused in a single, consistent experience that does not require significant navigation from page to page, but instead changes from one view to another. 3.Design the navigation around the core scenario of your application and eliminate typical web page navigation. Your web application likely doesn’t need a home button, or multiple navigational categories that take users to different parts within your website. 4.Keep primary components accessible at all times to allow people to easily focus their attention in the right place. 5.Provide a consistent design and experience no matter where in the application the user is. For example, no matter if the user is composing a mail, searching their mail, reviewing new messages, the log off button, the ability to return to the inbox, or create a new message are all located in the same place across different views. 功能設計 偉大的Web App設計消除了不必要的元件，讓使用者可以集中於完成任務所需的核心元件。在設計你自己的應用的時候，牢記以下準則是非常重要的： 1.儘可能減少與功能無關的Web頁面。例如，位於頁面左上方通常用於將使用者帶回主頁的logo，或者是頁面底端的連結，這些連結將使用者帶向服務條款、隱私策略、專案政策以及你的主頁。 2.儘可能減少頁面數量，讓應用盡量集中，不必從一個頁面切換到另一個頁面，而是從一個檢視切換到另一個檢視。 3.根據應用的核心場景設計導航，去除典型的Web頁面導航。你的頁面很可能並不需要一個home按鈕，或者導航分類選單，將使用者帶向站點的不同部分。 4.讓基本元件一直可見，這樣人們就能很容易將注意力集中在正確的地方。 5. 使用者在每一步的應用體驗應該是一致的。例如，不管使用者是在寫郵件、搜尋郵件還是檢視資訊，退出按鈕、返回收件箱按鈕、寫新郵件按鈕，都應處於不同檢視的同一位置。 Encourage users to interact, engage and accomplish A web application should encourage people to interact, engage, and accomplish something, rather than passively view content, like buying movie tickets, writing documents or sharing photos and videos with friends. Unlike websites, web applications provide users with a feeling of ownership and the ability to interact with content or people. 鼓勵使用者進行互動、參與、完成任務 一個Web App鼓勵使用者互動、參與並完成任務，而不是消極瀏覽，比如購買電影票、寫文件或者與朋友分享照片、視訊。與網站不同，Web Apps讓使用者擁有更多主動性，而不只是被動瀏覽，他們可以和內容或其他人進行互動。 Make it easy to complete the task Many people don’t have the time or attention span to figure out how to use an application. Your web applications should be easy for users to consume information and choose what they want to do next. Streamline your interface so that users can immediately grasp how to use it. Great web applications are instantly usable, and require little training or help to be productive on their first use. To help people be successful when using your application you should: 1.Reduce the number of controls and options that are provided to the user to streamline their experience and help them complete the task at hand. 2.Be consistent in the look and feel of the information and controls that you show the user and eliminate the need for them to look for or figure out what something does. 3.Provide clear, easy to understand labels on all controls so it’s easy to know what they do. 讓完成任務變得容易 很多人並沒有時間和精力去搞清楚該如何使用一個應用。你的Web Apps應該非常簡單，讓使用者很容易獲取資訊，選擇他們下一步該做什麼。精簡你的介面，使使用者可以即時掌握如何使用它。 偉大的Web Apps是即刻可用的，或者在初次使用時只需要很少的訓練或者幫助。為了讓人們成功使用你的應用，你應該做到： 1.減少提供給使用者的選項數量，讓應用盡可能精簡，使用者輕鬆就能完成手邊任務。 2.對於控制鍵或者資訊提示保持外觀和感覺上的一致，避免讓使用者要費一番精力才能找到或者搞懂某些功能。 3.為所有的控制鍵提供清晰的、易於理解的標籤，讓使用者容易知道控制鍵的功能。 Take advantage of the capabilities of the device Modern browsers are giving developers access to more and more capabilities of the device. For example, web applications can be location-aware, provide details about the motion or orientation of the device, and even store data on the hard disk. And more capabilities are coming soon, like access to the camera, microphone and many other components. Here are a few ways that you can take advantage of the capabilities of the device: 1.When appropriate, provide information that’s geographically relevant to the user, such as restaurants or venues nearby. 2.Use the device motion or device orientation as new input types for games; instead of using the mouse or cursor, users should be able to move their game characters by moving the device. 3.When dealing with large amounts of data, store it locally on the user’s computer so that it doesn’t need to be transferred back and forth every time the web app starts. 利用裝置的能力 Web Apps可以感知地理位置，提供關於裝置動作的詳細資訊，甚至可以在硬碟上儲存資料。 現代瀏覽器讓開發者能越來越多地利用裝置的功能了。例如，Web Apps可以感知地理位置，提供裝置運動方向的運動形式的詳細資訊，甚至在硬碟上儲存資料。將來還會有更多功能，比如對攝像機、麥克風和許多其他元件的訪問。 下面是幾種你可以利用裝置本身功能的方式： 1.在適當的時候，提供給使用者地理位置相關的資訊，比如附近的飯店或其他場地等。 2.將裝置的動作作為遊戲的新的輸入，而不是使用滑鼠或者游標。使用者可以通過晃動裝置來移動遊戲中的角色。 3.在處理大量資料時，將其儲存於使用者的計算機上，這樣就不必在每次應用啟動時傳輸大量資料了。 Use multimedia to enrich the experience Rich multimedia experiences were once limited to client applications, but are now available to web applications and can go a long way to creating a richer, more engaging experience for the user. Multimedia might be part of the overall experience, for example in games or video chat applications, or it might provide only an incremental experience to remind them of meetings or new messages. Some strategies for using multimedia to enrich your experience include: 1.Provide semantic meaning to events, like notification of new email, or reminders for upcoming events. 2.Always enable the user to disable any sounds or other multimedia experiences that may be distracting. 3.Use the page visibility API to prevent multimedia from playing if the user isn’t looking at your app. 使用多媒體加強使用者體驗和沉浸體驗（IMMERSIVENESS） 豐富的多媒體體驗曾經只能在客戶端應用中出現，但現在Web Apps也可以實現給使用者提供豐富的多媒體體驗了。多媒體是整體體驗的一部分，例如遊戲或者視訊聊天應用中的多媒體，或是以一種新奇的方式提醒使用者會議時間或者新訊息。 使用多媒體豐富應用的一些策略包括： 1.為事件提供語義，比如新郵件通知，事件提醒。 2.永遠讓使用者能夠去遮蔽聲音或者其他多媒體應用，因為對使用者來說這些多媒體應用可能是一種干擾。 3.使用頁面可見性API（page visibility API）來阻止多媒體在使用者沒有看著你的應用的時候播放。