當產品改版后,我總結了一些設計思考

3 評論 14586 瀏覽 118 收藏 17 分鐘

本次改版過程中的主要設計依據是尼爾森可用性原則以及《簡約至上》中的隱藏、刪除、組織和排列交互設計四策略,頁面上的細節設計根據用戶具體使用場景具體分析,以求達到最優化。

項目概況

項目名稱:安暢云2.0改版設計

項目周期:2016.04.20-2016.06.10

項目背景:近年來,越來越多的企業出于安全考慮,更愿意將數據存放在私有云中,但同時又希望可以獲得公有云的計算資源,在這種情況下,混合云被越來越多的使用。安暢基于自身IDC資源優勢,順應發展趨勢,將“安暢云”平臺升級打造為既有公有云計算資源又有私有云安全保障的混合云管理平臺。

前期調研

通過項目啟動會,設計師聚集相關利益者們著重弄清如下問題:

通過對我們公司客戶經理(有些企業會委托客戶經理在平臺上進行操作)和其他企業的平臺使用者進行用戶訪談,并將訪談記錄整理繪制成用戶體驗地圖

問題洞察

結合《用戶體驗要素》一書中的觀點,我們從5個層面分析了現有平臺所存在的問題:

  1. 戰略層:隨著公司發展和戰略調整,原有平臺不能滿足市場和客戶需求。
  2. 范圍層:現有產品和業務過于局限,平臺功能急需升級,以滿足客戶的業務需求。
  3. 結構層:原平臺架構與信息層級不夠明確,僅僅注重業務需求,對整體架構、信息層級和體驗考慮較少。隨著平臺更多功能和業務的拓展,我們需要重新梳理平臺結構和信息層級,優化用戶體驗流程。
  4. 框架層:部分頁面操作效率低下,認知負荷與記憶負荷較大、文案不統一等,導致平臺可用性較差。
  5. 表現層:原平臺視覺風格老舊簡單,且與官網前臺頁面風格不一致。另外,部分頁面視覺元素混亂,內容層次區分不明顯,視覺流容易被打斷。

設計目標

根據以上分析,從公司戰略以及客戶需求出發,基于尼爾森的十大可用性原則,我們確立了此次改版的目標是:升級平臺功能、平臺架構與信息層級清晰化、提高平臺可用性、提升細節體驗、重塑平臺視覺形態。

改版過程

1.?完善平臺功能

為了使平臺功能更加完善,滿足客戶業務需求,我們對阿里云、青云和Ucloud進行了分析,如下圖;

分析結果:

  1. 增加優惠金/券功能;
  2. 增加標簽管理,方便客戶通過標簽來管理自己平臺中的資源;
  3. 結合公司自身特色,增加對IDC的管理與查看,形成與競品的差異化;
  4. 增加右鍵快捷操作功能,提升用戶管理平臺資源的效率;
  5. 取消積分功能(因為積分對用戶的激勵效果沒有優惠金/券大)。

2.?重構平臺架構與信息層級

原平臺存在問題:

(1)主要以公司云計算產品為主,左側只有“資源”和“管理”兩大模塊,物理架構(IDC)的資源只是在導航欄中提供了“租用托管”快捷入口,物理架構模塊的重要性沒有突出,且點擊后新開標簽頁進入到租用托管模塊中,這樣將云計算產品與物理架構產品分成了兩個平臺,客戶需來回切換選項卡查看,操作效率較低。如圖:

(2)原先整個平臺只有云計算一種資源,所以“區域選擇”功能可以針對平臺全局去篩選和切換,但是新平臺將物理架構資源與云計算資源整合到同一個平臺中,而物理架構資源無所屬區域,不需要區域篩選,所以“區域選擇”功能放在針對平臺全局篩選的位置就不合適,需作調整。

(3)原平臺中與用戶相關的操作與信息入口分布較散,一部分在“管理”模塊中,另一部分放在導航欄的快捷入口中,如備案、工單、賬戶中心等,這樣用戶很難對平臺形成統一的結構認知,增加了用戶的認知負荷。如圖:

(4)有些比較高頻使用的功能層級較深,如“用戶信息”放在了“賬號”的下一層級,若要進入“消息中心”,還需先進入到“我的賬戶”頁面,然后才能找到消息中心的入口,這樣操作路徑太長,大大降低了用戶的操作效率。如圖:

新平臺優化:

(1)根據公司戰略以及客戶需求出發,用更精準的文案命名平臺各模塊(改變文案是提升用戶體驗性價比最高而且效果還不錯的方法),如:根據交互設計策略的分組原則,原先平臺的“資源”模塊根據現有資源的屬性,在新平臺中分組為“云計算”和“物理架構”兩個模塊,這樣用戶就非常清晰的知道平臺中有兩大資源模塊,入口清晰,操作方便。如圖

(2)將“區域選擇”功能放到具體云產品的列表和新建頁面中去,只針對云產品進行地區篩選。如圖:

(3)將相關的操作和入口整合到同一模塊中,統一認知,如工單管理、費用中心(包含賬戶概覽、訂單管理、消費記錄、賬單管理、代金券管理)、消息中心、標簽管理等等全部放在“用戶中心”模塊中。

(4)將“用戶信息”、“賬號管理”的層級簡化,直接顯示在用戶中心模塊中??s短高頻使用功能的操作路徑,提高用戶操作效率。如圖:

根據優化思路以及需要增加的功能點,最終我們確定了新的平臺架構由控制臺首頁、云計算、物理架構、用戶中心和導航欄的一些快捷入口構成。

3.?提升平臺可用性與細節體驗

新平臺基于尼爾森可用性原則以及簡約至上中的交互設計策略做了以下優化:

(1)增加狀態可見性

清晰的狀態認知可以快速的讓用戶了解自己處于何種狀態、對過去發生、當前目標、以及未來去向有所了解。

1)左側tab欄選中記錄更加明顯,用戶很清晰的知道當前所處位置

2)對于層級較深的頁面,增加面包屑記錄用戶到達當前頁面的路徑,既可以讓用戶清晰知道當前位置,也可讓用戶輕松返回到歷史路徑的任何位置,增加用戶對平臺的控制感,提升用戶體驗。

3)給用戶的操作積極反饋,讓用戶知道當前發生了什么,以及后面會發生什么,減少用戶的焦慮。例如:當用戶點擊新建云服務器后,我們的頁面會提示用戶云服務器正在創建中,并且告知用戶整個過程大概所需的時間。

(3)支持撤銷重做

為了避免用戶的誤操作,平臺提供撤銷和重做功能。例如:當用戶在平臺中刪除了某個資源時,我們不會將資源真正的徹底刪除,而是放入回收站保留2小時,方便用戶“恢復資源。

(3)增加平臺的一致性(操作的一致性、文案的一致性)

1)操作一致性

平臺中所有列表頁面,將高頻使用的功能按鈕放在外面,低頻使用功能按鈕以及不鼓勵用戶操作的功能按鈕都收納” 更多操作”里面去。

2)文案一致性

平臺中相同場景和操作下,頁面中對應的文案應該保持一致。例如:與支付有關的統一都用“支付”文案,不要使用“付款”文案。不要出現未支付、已付款這樣的情況。

(4)防止用戶出錯

通過頁面的設計、重組或特別安排,防止用戶出錯。比出現錯誤信息提示更好的是更用心的設計防止這類問題發生。例如:將資源的刪除操作收納到“更多操作”中去,而且右擊資源后快捷操作中不放“刪除”,避免用戶錯刪資源。

(5)盡可能讓用戶識別而不是回憶

當用戶通過在各個資源上點擊?“右鍵”?來進行更多操作時,在彈窗中再次告訴用戶是針對哪個資源進行此次操作的,避免用戶右鍵時誤操作點擊到其他的資源上去,給用戶造成損失。

(6)提高平臺操作的靈活性與效率

讓指用戶在使用產品時能夠方便快捷的完成相關任務或動作,即讓用戶以最快最便捷的方式完成任務。

(7)突出重點,弱化和剔除無關信息(易掃原則)

我們的用戶瀏覽網頁的動作不是讀,不是看,而是掃。這說明了用戶要更高效的獲取到關鍵信息,其他信息可以暫時忽略,在需要的時候再展示出來。

(8)容錯原則

錯誤信息應該用語言表達(不要用代碼),較準確地反應問題所在,并且提出一個建設性的解決方案。

(9)提供人性化幫助

為用戶提供必要的幫助文檔,文檔中包含用戶所要的各種情況和信息,幫助文檔要全、簡單、用詞要本地化。如下圖,

4.?重塑平臺視覺形態

唐納德·諾曼說:好看的界面讓人覺得用戶體驗更佳,更好用。所以,平臺的視覺形態非常重要,我們的視覺設計師根據公司整體VI形象,確定了平臺主色調為安暢紅(#e2003b)與磨砂黑(#2f323a),輔助色為淺灰(#eef0f6)與各種狀態色。接下來從3個方面來具體說說如何重塑平臺視覺形象的。

(1)圖標輕量化、統一化

老平臺中的圖標樣式不統一,質感太重,識別度不高。改版過程中,我們對平臺中的圖標進行了梳理和再設計,確保使用的圖標簡潔易識別。為了打造平臺的統一感,所有圖標都沿用了相同的視覺元素,統一的圓角使圖標有一定活潑感,不生硬,增加了平臺的趣味性。

(2)化繁為簡,減少頁面元素種類

結合現有設計趨勢,去除所有裝飾元素,減少不必要元素(如投影),適當增加留白、行間距以及字間距,保持頁面干凈、清晰。作為云計算產品,為了達到清晰易懂的目的,適當增加提示,提高用戶的理解效率。

(3)統一視覺規范,提升工作效率

在完成平臺主要頁面設計的同時,制定統一的視覺規范,這樣不僅能提高后續頁面的設計效率,還能讓前端開發的小伙伴形成統一的認知,進而提高整個團隊的效率,同時,也為公司其他業務線的產品提供規范,保持整個公司不同產品風格一致。

寫在最后

本次改版過程中的主要設計依據是尼爾森可用性原則以及《簡約至上》中的隱藏、刪除、組織和排列交互設計四策略,頁面上的細節設計根據用戶具體使用場景具體分析,以求達到最優化。

另外,針對本項目我們制定了一套設計規范——《常用中后臺交互設計控件使用場景與規范總結》,旨在統一公司項目的前端 UI 設計,規避不必要的設計差異和實現成本,實現設計和前端資源的效率最大化。

 

作者:潘達,個人公眾號:潘達設計小站,歡迎勾搭

本文由 @潘達 原創發布于人人都是產品經理。未經許可,禁止轉載

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 不錯

    來自廣東 回復
  2. 自己現在學些產品經理的規范,想加個好友交流學習下,主要是學習感覺你們的很規范,我們的不怎么規范

    來自四川 回復
    1. 微信:D1173740249

      來自上海 回復