所謂的多用户體驗,其實就是讓多用户” 習慣”, Don’t make user think. 這個是終極目標啦,隨着產品的不斷的改善,多用户體驗也在隨之變化。但是,如果您在做一款產品,所謂的標準,終極檢驗方法,還是多用户,以及多用户對於產品的反饋。 對於互聯網產品的設計,有一些標準的多用户習慣,可以作為所謂量化的標準。
多用户介面設計的三大原則是:
置介面於多用户的控制之下;
減少多用户的記憶負擔;
保持介面的一致性。
多用户介面設計在工作流程上分為結構設計、互動設計、視覺設計三個部分。結構設計也稱概念設計 (Conceptual Design),是介面設計的骨架。通過對多用户研究和任務分析,制定出產品的整體架構。互動設計的目的是使產品讓多用户能簡單使用。 任何產品功能的實現都是通過人和機器的互動來完成的。因此,人的因素應作為設計的核心被體現出來。視覺設計包括色彩、字型、頁面設計等。視覺設計要達到多用户愉悦使用的目的。
通過 “指標” 就是我們用來衡量多用户體驗的標準,將標準分為三個等級,分別佔 0 分、 1 分、 2 分,每個標準都有它的評分標準,當多用户反饋的問題完全符合這個標準時,就佔 0; 如問題不符合標準,就佔 2 分; 如問題不嚴重,只是還不夠完善,就佔 1 分; 後拿問題去套這裏的標準,得出來的總分就是我們要評定改版的指標了。
總分越高,説明該條的多用户體驗越差,後我們將得出的總分來判斷問題的多用户體驗值:總分在 0 – 5 分且單個標準在 2 分以下的 (標示多用户體驗為良好); 總分在 5 – 10 分且單個標準在 2 分以下的 (標示多用户體驗為較差); 總分在十分以上或有 2 個 2 分以上的標準的 (標示多用户體驗為很差) 。
結構設計
有足夠的空間讓多用户看到主要的內容,要適合多數瀏覽器瀏覽 (以 15 、 17 寸、 19 寸顯示器為主)
0:足夠看到主要內容
1:只看到 2/3 看到
2:小於 1/3 的內容
儘量避免使用結構複雜的表格,表格巢狀不要超過 3 層;
0:小於等於 2 層
1:三到四層
2:五層或五層以上
頁面長度原則上不超過 3 屏,寬度不超過 1 螢幕。 (以 1024X768 為準)
0: 長小於 3 屏,寬小於 1 屏
1: 長超出 3 屏或寬超出 1 屏
2: 長超出 3 屏,寬超 1 屏
頁面避免使用 iframe,如果必須使用,採用對應的優化方式。 (優化是指:對瀏覽器是否支持框架進行判斷以及 iframe 寬高度自適應頁面)
0: 無 iframe
1: 有 1-2 個 iframe,且無優化
2: 多於 2 個 iframe, 且無優化
頁面佈局要重點突出,圖文並茂; 做資料統計,將目標客户感興趣的放置在重要顯着的位置 (一般為頁面的頭部和左上角)
0: 重點突出,圖文並茂,且在重要的位置放的是多用户感興趣的
1: 重點不突出或沒有圖文並茂
2: 重點不突出且沒有圖文並茂
互動設計
表單的填寫流程要清晰、簡潔,必填的項要放在頁面的顯着位置 (主體頁面的頭部,),非必填項不能影響多用户填寫的效率。
0:必填項位置顯着,非必填項沒有影響多用户填寫的效率
1: 必填項位置不顯着或非必填項影響了多用户填寫的效率
2: 必填項和非必填項混在一起,影響了多用户填寫的效率
表單的填寫儘量多采用既有選擇也有輸入的方式,需填寫部分需註明內容的例項,並對欄位作出限制。
0: 既有選擇也有輸入的方式,並有註明例項
1: 沒有選擇性輸入或沒有註明填寫的例項
2: 沒有選擇性輸入且沒有註明填寫的例項
對於互動性的按鈕必須清晰突出,以確保多用户可以清楚地點選。
0: 調查 10 人 (8 人或以上的人很快就能點選到按鈕)
1: 調查 10 人 (只一半的人很快就能點選到按鈕)
2: 調查 10 人 (6 人或以上的人在短時間找不到要點選的按鈕)
點選:瀏覽過的資訊需要顯示為不同的狀態,以區分於未閲讀內容,避免重複閲讀。
0: 有不同的狀態顯示
1: 只有部分有不同的狀態顯示
2: 沒有狀態顯示
儘量減少新開的視窗,以避免開過多的無效視窗:開啓的 IE 新視窗不超過 2 層; 開啓的 IE / DIV / alert 新視窗總不超過三個,避免在 DIV 視窗再開啓 DIV 視窗。
0: IE 視窗<=2 IE+DIV+ALERT 新視窗 <=3,DIV視窗沒有再開啓DIV視窗 1:IE視窗>=2或 IE+DIV+ALERT 新視窗 >=3 或 DIV 視窗沒有再開啓 DIV 視窗
2: IE視窗>=2 IE+DIV+ALERT 新視窗 >=3,DIV 視窗有再開啓 DIV 視窗
涉及到多用户操作的東西,要有及時、清楚的錯誤、成功或資訊提示; 並要能儲存上一步操作。
0:有及時清楚地提示,能儲存上一步操作
1: 無提示或不能儲存上一步操作
2: 無提示也不能儲存上一步操作
對於每一個點選進行友好提示,以增加瀏覽者的親和度,對圖片、圖示、連結有 TIP 提示或在相應位置加 “説明” 、 “注意” 的文字資訊。
0: 每一個點選進行友好提示
1: 有提示,但提示不友好 無友好的提示
對多用户輸入性的操作,提供快速反饋; 將遊標定位到個要輸入的表單物件上,給多用户心理上的暗示,避免多用户焦急。
0: 有快速的反饋,且有遊標定位
1: 反饋不快速或無遊標定位
2: 無快速反饋、無遊標定位
欄目的命名要與欄目內容準確相關,簡潔清晰,不宜過於深奧。
0: 調查 10 人 (8 人或以上的人認為欄目命名很好)
1: 調查 10 人 (只一半的人認為欄目命名好)
2: 調查 10 人 (6 人或以上的人認為欄目命名深奧)
導航要清晰,欄目的層級多不超過三層; 且隨時轉移功能,很容易從一個功能跳到另外一個功能。
0: 導航欄的層級不超過 3 層
1: 導航欄的層級為 4 層
2: 導航欄的層級多於 4 層
在頁面的醒目位置 (主體頁面的頭部),提供資訊搜索框和排序功能,便於查詢到所需內容
0:有醒目的搜索框和排序功能
1: 有搜索框和排序但不醒目
2: 無搜索框和排序
正常情況下, 儘量確保頁面在 5 秒內開啓。如果是大 型入口網站,必須考慮南北互通問題,進行必要的壓力測試
0: 1 – 2 秒內開啓
1: 3 -5 秒內開啓
2: 5 秒以上開啓
讓多用户控制介面 (介面的大小、位置、大化、小化、關閉、滾動條控制等)
0: 多用户能很好的控制
1: 控制不完善
2: 多用户不能控制
無論多用户瀏覽到哪一個層級,哪一個頁面,都可以清楚知道自己當前的位置,使其做出下一步行動的決定。
0: 每個層級每個頁面都有當前的位置
1: 沒有當前的位置或不知道下步的操作
2: 多用户不知道自己在哪,也不知道下一步幹嘛。
對資訊量大的操作要有批量處理的功能 (如稽核、刪除、新增等)
0: 有批量處理的功能
1: 只有部分有批量處理
2: 無批量處理的功能
視覺設計
介面風格要協調一致,讓多用户有一個整體的感覺。 (知名能提供換膚的功能)
0: 典型多用户調查 10 人 (符合 8-7 人的習慣)
1: 典型多用户調查 10 人 (符合 5 – 6 人的習慣)
2: 典型多用户調查 10 人 (符合 1-4 的習慣)
採用易於閲讀的字型,避免文字過小或過密造成的閲讀障礙。 (主體字 中文采用標準的 12PX 宋體; 英文采用 12PX Arial 字型)
0: 文字便於閲讀且有字型大中小設定
1: 文字過小或文字過密
2: 文字過小且過密,沒有字型大中小的設定
動畫效果要與主畫面相協調,檔案大小在 10K 以上的要有載入畫面。
0: 動畫與頁面協調,有載入畫面
1: 動畫與頁面不太協調或 10K 以上動畫無載入頁面
2: 動畫與頁面不太協調且 10K 以上動畫無載入頁面
圖片展示要比例協調、不變形,圖片清晰。
0: 圖片清晰且不變形
1: 圖片不清晰或變形
2: 圖片不清晰且變形
圖示使用要簡潔、明瞭、易懂、準確,與頁面整體風格統一; 儘量使用真實世界的比喻。如:電話、印表機的圖示設計,尊重多用户以往的使用經驗。同樣的功能用同樣的圖形。
0: 調查 10 人 (8 人或以上的人認為圖示使用合理)
1: 調查 10 人 (只一半的人認為圖示合理)
2: 調查 10 人 (6 人或以上的人認為圖示使用不合理)
對於長篇文章 進行分頁瀏覽,超過 1.5 屏時 進行翻頁 (15 寸顯示器為準)
0: 超過 1.5 屏能分頁瀏覽
1: 2 屏以上才分頁瀏覽
2: 無分頁瀏覽功能
色彩與內容。整體不超過 5 個色系,儘量少用紅色、綠色。近似的顏色表示近似的意思。以恰當的色彩明度和亮度,確保瀏覽者的瀏覽舒適度。
0: 小於 5,主色沒有用到紅色和綠色
1: 整體色調是紅或綠或整體色系超出 5 個
2: 整體色調就是紅或綠,色系超出 5 個
提供介面的快捷方式,一個功能有多個入口; 快捷方式體現出其關聯性,放在顯着的位置 (頁面的頭部或左上角)
0: 在顯着有關聯性的快捷方式
1: 有快捷方式但位置不顯着
2: 無快捷方式
減少短期記憶的負擔。讓計算機幫助記憶,例:登入的多用户名稱、密碼、 IE 進入介面地址可以讓機器記住。
0: 有計算機幫助記憶
1: 有部分記憶功能
2: 無計算機幫助記憶。
對於手機客户端的多用户體驗標準,可以從這三個方向進行評估:結構設計請檢驗:1 、 2 、 5 互動設計可以全部,但是第 5 項改為儘可能減少開啓連結。視覺設計也是可以全部,但是對於第二項字型,iphone 以及安卓,有自己標準的字型,按照其標準設計,就是多用户體驗的理想狀態。另蘋果對 UI 是由標準的,下載一份標準。按照標準來,體驗知名。