交互自查表|可用性優化實錄
相信不少同學都嘗試過建立自查表,但最后是否有真正利用起來呢?這一次就和大家分享一下,我們團隊所用的自查表的迭代優化過程和結果。
一. 自查表1.0的問題
首先,我們還是要了解一下優化前自查表的表現(如下圖):
建立自查表1.0時的部分思路:
- 交互設計的一些基本法則,如架構要合理、層級要精簡等,是設計師需要掌握的基礎理論,而我們的自查表建立更側重解決設計師對特殊場景、交互細節容易遺漏的問題,所以在內容上以場景列舉和說明為主。
- 自查表均分為兩個部分:場景完成性和流程完整性,這是設計師通常容易遺漏的方面。
- 郵箱大師有四個平臺需要同時規劃,而每個平臺的特性有所差異,因此為四個平臺各自建立了單獨的自查表,內容有通用的,也有差異的,方便各平臺設計師分別查看。
存在的問題
(1)文檔使用路徑長
因為使用了Excel電子文檔,雖然對內容進行擴展很方便,但是每次要找到和打開這個文檔都是一個漫長的過程,【在電腦桌面/某個文件夾找到這個文檔 – 雙擊打開 – 等待程序啟動文檔打開】每一步都在增加使用成本;
(2)閱讀體驗不佳
首先整個文檔結構沒有處理好,第一眼看不懂,導致設計師對內容缺少一個整體的認知,查找起來也比較累;其次,內容閱讀同時包含橫向和縱向的結構,有時還會需要操作滾動條,這樣讀起來也比較累;
(3)內容更新不及時
這個不用說了,都沒有人用,自然也不會有人來關心它的更新了,導致很多新的設計問題沒有反應在上面。而且一共有四分文檔,每改一個地方,都要同時改四份,想想這個工作就不輕松。
二. 自查表2.0的建立
鎖定問題后,就看如果解決了,這里我從兩個方面來對自查表進行優化:文檔格式和內容結構。
1. 文檔格式:從線上到線下
我希望這份自查表可以讓設計師隨用隨取,而不需要一個復雜的查找等待的過程,那么,我想到的一個比較好的辦法就是可以打印出來,從線上作業轉為線下作業,直接放在手邊,時不時就可以拿出來瞄上一眼,還可以根據需要進行標注。
而在此基礎上,也對內容設計提出了一些要求,比如所有內容必須承載在一張A4紙的大小上,甚至最好不要超過1頁,否則還要分頁或雙面查看,也不方便。
2. 內容結構:馬里奧的交互自查表
內容結構的設計,很重要的一步就是對自查項的整理和分類。但同時,我也考慮到另外一個問題:郵箱大師涉及的自查項關鍵詞有幾十項,如何讓設計師更好的對文檔結構留下印象,甚至記住它們呢?這里,我引用了一款經典游戲《馬里奧》的界面來配合內容結構的搭建和介紹。
如上圖所示,是一張經典的馬里奧游戲畫面,而在這里,我們可以把這個畫面拆解為3大部分:背景環境(藍天白云部分)、游戲路徑(城堡障礙部分)、操作角色(馬里奧本體)
而借此,對應自查表的3大模板:
- 環境:硬件環境、軟件環境、郵箱環境(郵箱大師支持各種類型的郵箱,而不同郵箱下,支持的功能存在或多或少的差異)
- 流程路徑:入口、頁面和控件、前進表現、后退表現、提示信息
- 用戶操作:手勢、鼠標、鍵盤、其他(Touchbar、觸控板、語音等)
然后,在大框架的基礎上,再進行進一步細化,如流程路徑部分:
- 以游戲起點和終點,對應用戶操作的入口和結果
- 以關卡頁面,對應用戶的頁面和控件設計
- 以角色的前進后退,對應用戶的下一步和返回操作
- 以界面提示信息,對應各類界面提示引導
以上,是希望借一張圖就讓大家能夠回憶起自查表的整體結構,方便記憶和定位內容。
結構確認好后,便依照分類將需要設計師注意的信息填入框架內。這些信息大多以關鍵詞的形式存在,畢竟設計師還是對自己的產品有一定了解的,自查表中的關鍵詞只要達到提示的目的即可(這樣也是為了節省空間啦,畢竟要壓縮到一頁紙上)。每一個細節點在這里就不一一介紹了,因為不同的產品設計的關鍵詞必然不同,關于內容,還是需要大家根據自己的產品以及設計時常遇到的問題,自己去完善。最后成品如下:
PS:設計分析和最后思考兩個部分是在后期進一步優化的時候加上的,主要希望設計師進一步確認需求分析是否完整,以及考慮自己的設計是否還有優化的空間。
三. 使用場景與總結
至此,自查表的結構設計就完成了,但是整體的可用性優化工作可還差一步,那就是在團隊內推廣新的自查表,和團隊成員再一次溝通新表格的設計思路和使用方法,以確保大家對新的自查表有所了解并愿意使用它。這里,提前幫助大家打印好表格,并準備一個輔助的PPT也是必要的工作。
最后,為大家總結一下這份自查表的一些適用場景:
1. 設計評審后
往往在設計評審后,都會暴露出設計上大大小小的一些問題,這個時候,不妨拿出自查表,看看這些問題是否都有記錄,如果沒有,就加一項,如果已經有了,就加重標記一下。既是加強自己的記憶,又同時在為文檔做補充,一段時間后,可以把標記的新內容,再更新到電子文檔上(如一個版本結束后,更新一次)。
以下是我自己在幾代自查表上做的批注(請忽略我吃零食時弄臟的油漬)
2. 設計完成后
這個不用說,自查表建立的目的就是為了設計師自己檢查交互場景和細節的。為什么放在后面,就是想要提醒大家對之前已經批注過的錯誤要格外注意一下。
3. 新人培訓時
這個算是衍生出來的一種使用場景,團隊新人一般對產品結構和功能還都不是很了解,自查表上一些關鍵詞是很好的學習輔助工具。導師可以通過名詞解釋的方式,向新同學介紹相關的知識點,幫助其快速了解,如:
- 大師帳號是什么?有什么作用?
- 什么是IMAP協議,什么是POP3協議?什么情況下要注意這些協議的差別?
- 產品文案有哪些規范…
OK,那關于自查表的優化過程就介紹到這里,表格內容依然會不斷改進,也歡迎大家提供看法和建議。
工具的建立最終還是為人服務,“能用起來”是很基礎也很重要的一個要求,先用起來,之后在實際使用過程中,不斷的進行優化改進,以匹配個人或項目團隊當下的需求,讓其能真正為大家解決問題。
希望今天的分享可以給大家帶來一點思路,建立切實可用的自查表,早日達到“手上無表,心中有表”的境界。
作者:徐愷,網易郵件事業部資深交互設計師,目前主要負責網易郵箱大師移動端、桌面端的相關設計。希望可以和大家交流更多的設計經驗。
本文來源于人人都是產品經理合作媒體@網易UEDC,作者@徐愷
題圖來自 Pexels,基于 CC0 協議
人熱熱熱
不可思議,原來交互自查涉及的面很多啊
強