設(shè)計(jì)思考:功能具象化復(fù)盤(pán)
為了降低業(yè)務(wù)人員的操作和使用成本,設(shè)計(jì)團(tuán)隊(duì)往往需要做好設(shè)計(jì)優(yōu)化。這篇文章里,作者就結(jié)合具體案例,總結(jié)了自己的設(shè)計(jì)思路,一起來(lái)看看,或許會(huì)對(duì)你有所啟發(fā)。
前言
項(xiàng)目前期,工作中常遇到整個(gè)功能進(jìn)行迭代的情形,工作量會(huì)較大。接下來(lái)以一個(gè)工作中一個(gè)模塊整體為例,分享筆者的設(shè)計(jì)思路,如果有不同想法和意見(jiàn)的,隨時(shí)可以交流。
一、業(yè)務(wù)場(chǎng)景
再說(shuō)測(cè)試中按照形式分為:手動(dòng)和自動(dòng)。自動(dòng)需要機(jī)器測(cè)試用例之后將結(jié)果返回到之中進(jìn)行?,F(xiàn)在大部分業(yè)務(wù)之中,很少有自動(dòng)統(tǒng)一全流程,一般是由自動(dòng)測(cè)試完成之后測(cè)試工程師進(jìn)行修正的過(guò)程。
二、業(yè)務(wù)難點(diǎn)
1. 內(nèi)容層級(jí)多且雜,查看成本高
優(yōu)化前分層簡(jiǎn)單:表格展示與詳情,但是在詳情之中不僅僅是嵌套的測(cè)試逐步的諸多流程結(jié)果,還有里面的詳情信息表格,還要嵌套著詳情頁(yè)。
就像一個(gè)樹(shù)選擇一樣,層級(jí)少,但是內(nèi)容深度過(guò)深。內(nèi)容場(chǎng)景復(fù)雜,信息查看成本高。
2. 操作選項(xiàng)多,用戶操作成本高
優(yōu)化前一鍵下發(fā)堆積操作達(dá)到24個(gè),測(cè)試主管查看成本高。心理預(yù)期壓力大,填入過(guò)長(zhǎng)時(shí)間拉長(zhǎng)。
3. 詳情信息拓展不足,無(wú)法繼續(xù)承載業(yè)務(wù)需求
業(yè)務(wù)需求拓展,需要添加業(yè)務(wù)部門(mén)新增的測(cè)試步驟展示,以及每個(gè)收集的測(cè)試情況的拓展。現(xiàn)有空間已經(jīng)達(dá)到了內(nèi)容查看的閾值,無(wú)法再承載新的業(yè)務(wù)部門(mén)需求。
4. 詳情信息不夠直觀,查看效率低
多個(gè)業(yè)務(wù)團(tuán)隊(duì)反饋現(xiàn)有信息過(guò)多,無(wú)法直觀的查看單個(gè)流程測(cè)試結(jié)果以及多少輪次數(shù)。而現(xiàn)在的功能無(wú)法支撐查看場(chǎng)景。
5. 用例布局不合理,內(nèi)容信息首屏曝光率低
單次詳情優(yōu)化前自上而下的分布,上部詳情部分過(guò)高以及設(shè)備列表橫排展現(xiàn),導(dǎo)致用首屏曝光率過(guò)低,底部的操作區(qū)域即使是大屏也要滑動(dòng)到第二屏,操作成本也高。
6. 頁(yè)面架構(gòu)曖昧,區(qū)分度不高
優(yōu)化前頁(yè)面基礎(chǔ)信息以及設(shè)備列表沒(méi)有明顯的分割,而設(shè)備列表與設(shè)備信息的分割由一個(gè)篩選進(jìn)行分割,無(wú)法在信息上進(jìn)行直觀的對(duì)應(yīng),識(shí)別難度難度較大。
三、優(yōu)化措施
1. 拆解空間,明確用戶所在
優(yōu)化后將空間拆分成:“總(抽屜)-分(首飾盒)-詳(首飾)”,內(nèi)容拆分,測(cè)試工程師通過(guò)內(nèi)容快速定位當(dāng)前的位置,緩解導(dǎo)航迷茫。
2. 信息層級(jí)歸類,樹(shù)形態(tài)清晰展示
業(yè)務(wù)部門(mén)添加團(tuán)隊(duì)架構(gòu)顯示需求,在設(shè)計(jì)采用樹(shù)結(jié)構(gòu)呈現(xiàn),用戶快速定位到自己所在的團(tuán)隊(duì)。
3. 分步拆解操作,快速下發(fā)任務(wù)
一鍵下任務(wù)操作復(fù)雜,需要完成24項(xiàng)內(nèi)容。優(yōu)化后將所有的操作分為:測(cè)試準(zhǔn)備和資源準(zhǔn)備2步進(jìn)行分發(fā)完成。并且細(xì)化操作將專項(xiàng)的的三級(jí)選擇以級(jí)聯(lián)選擇呈現(xiàn),用戶減少操作流程,提高選擇效率。
4. 拆解信息,明確層級(jí)
將測(cè)試流程以及結(jié)果自上而下流程化展現(xiàn),并且以手風(fēng)琴的交互方式提高頁(yè)面內(nèi)容的承載力。
5. 多樣化展示,流程可視化展現(xiàn)階段測(cè)試結(jié)果
相對(duì)于表格數(shù)據(jù)的復(fù)雜,規(guī)則樹(shù)的可視化的呈現(xiàn)方式更直接的呈現(xiàn)每項(xiàng)測(cè)試在每個(gè)環(huán)節(jié)的結(jié)果。在交互上參考VSod開(kāi)發(fā)軟件的縮略圖的交互方式,降低用戶的操作成本,也更加符合程序開(kāi)發(fā)人員的軟件操作習(xí)慣。
6. 明確分類,基礎(chǔ)與詳情區(qū)分
子詳情優(yōu)化后,打破內(nèi)容之間的曖昧,將基礎(chǔ)信息和設(shè)備詳情解耦,設(shè)備列表與測(cè)試詳情強(qiáng)化耦合性進(jìn)行1V1的強(qiáng)綁定。
7. 信息快速匹配,設(shè)備與詳情左右映射
在設(shè)備詳情部分,采用列表與詳情左右分布,采用金店或者是首飾店中首飾與標(biāo)簽的方式實(shí)現(xiàn)設(shè)備與測(cè)試內(nèi)容對(duì)的強(qiáng)信息綁定。
一點(diǎn)點(diǎn)思考
線上反映線下的場(chǎng)景,很多場(chǎng)景或者是產(chǎn)品設(shè)計(jì)可以參考線下的場(chǎng)景或者是產(chǎn)品?;蛟S也是一種新的解決方式,這種設(shè)計(jì)方式或許有一些奇怪,期待與讀者的交流與溝通。
專欄作家
一只雞腿,微信公眾號(hào):B端設(shè)計(jì)一只雞腿,人人都是產(chǎn)品經(jīng)理專欄作家。一個(gè)吃貨的B端設(shè)計(jì)師。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來(lái)自 Unsplash,基于 CC0 協(xié)議
該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
- 目前還沒(méi)評(píng)論,等你發(fā)揮!