用戶體驗(yàn)視域下的手機(jī)購物網(wǎng)站界面優(yōu)化設(shè)計分析

韋立蓉

摘要：依托用戶體驗(yàn)對手機(jī)網(wǎng)絡(luò)網(wǎng)站界面展開設(shè)計，率先把傳統(tǒng)設(shè)備布局優(yōu)化的SLP方法運(yùn)用至網(wǎng)站界面優(yōu)化設(shè)計中，大大擴(kuò)展網(wǎng)站界面設(shè)計思路與方法。該文則從用戶體驗(yàn)視域分析手機(jī)購物網(wǎng)站界面優(yōu)化設(shè)計。

關(guān)鍵詞：用戶體驗(yàn)；手機(jī)購物網(wǎng)站；界面優(yōu)化設(shè)計

中圖分類號：TP393 文獻(xiàn)標(biāo)識碼：A 文章編號：1009-3044（2017）27-0279-02

隨著4G網(wǎng)絡(luò)、智能手機(jī)的發(fā)展和普及應(yīng)用。移動電子商務(wù)得到迅猛發(fā)展。手機(jī)購物網(wǎng)站因具有便利性、互動型等優(yōu)勢，逐漸成為網(wǎng)絡(luò)購物常用的方式，且手機(jī)購物者主要集中在18-34歲范圍之內(nèi)。但不管是手機(jī)購物網(wǎng)站或APP應(yīng)用程序，購物體驗(yàn)均是影響購物網(wǎng)站發(fā)展及用戶購買行為的關(guān)鍵因素，而與用戶交互的網(wǎng)站界面設(shè)計情況對購物體驗(yàn)發(fā)揮著重要的作用。網(wǎng)站人機(jī)交互界面設(shè)計旨在提升用戶體驗(yàn)，用戶體驗(yàn)主要表現(xiàn)在視覺、觸覺、交互性等多個方面[1]。有學(xué)者以在校大學(xué)生為研究對象，把網(wǎng)頁服務(wù)質(zhì)量劃分為各種維度，對網(wǎng)站購物用戶滿意度展開實(shí)證研究[2]]。有學(xué)者根據(jù)用戶評分法，把用戶體驗(yàn)運(yùn)用至手機(jī)交互設(shè)計中，獲得滿意的設(shè)計效果[3]。上述研究雖對用戶體驗(yàn)展開定量分析，但對手機(jī)界面設(shè)計主要表現(xiàn)在定性描述方面并未將用戶體驗(yàn)用于界面優(yōu)化設(shè)計中。SLP（systematic layout planning）分析法屬于系統(tǒng)設(shè)施布置方法，在實(shí)現(xiàn)系統(tǒng)功能的條件下，通過對各作業(yè)單位物流量展開分析，依托作業(yè)單元物流與非物理之間的關(guān)系展開規(guī)劃設(shè)計，并借助一套表達(dá)力較強(qiáng)的符號及簡明表格，往常清晰地布置設(shè)計[4]- [6]。本文以用戶體驗(yàn)為中心展開手機(jī)界面設(shè)計，嘗試?yán)檬謾C(jī)購物實(shí)驗(yàn)，結(jié)合手指動線路徑展開統(tǒng)計分析，并運(yùn)用SLP方法對手機(jī)購物網(wǎng)站界面實(shí)施優(yōu)化設(shè)計，并進(jìn)一步驗(yàn)證這種設(shè)計的有效性。

1 實(shí)驗(yàn)對象及實(shí)驗(yàn)設(shè)計

1.1 實(shí)驗(yàn)對象

本次實(shí)驗(yàn)采用電子購物網(wǎng)站的中間客戶微微研究依據(jù)，挑選20名青年人為研究對象，這些人均有超過1年的手機(jī)購物經(jīng)驗(yàn)，入選者的年齡在21-26歲范圍之內(nèi)，包含11例男性，9例女性。本次實(shí)驗(yàn)所用購物手機(jī)為的屏幕為3.5英寸，設(shè)置Andriod操作系統(tǒng)，并運(yùn)用時常運(yùn)用觸屏版淘寶網(wǎng)為實(shí)驗(yàn)網(wǎng)站，以每個實(shí)驗(yàn)者需求存在較小差異的產(chǎn)品8g優(yōu)盤為研究對象，并借助另一部像素功能較好的手機(jī)記錄每位測試者的操作流程。

1.2 實(shí)驗(yàn)設(shè)計

開始整個實(shí)驗(yàn)之前，每位測試者均填寫年齡、使用手機(jī)的購物經(jīng)驗(yàn)等內(nèi)容，并提醒每位接受測試者本次實(shí)驗(yàn)?zāi)康臑橘徺I自己滿意的8g優(yōu)盤，利用事先準(zhǔn)備好的智能手機(jī)將淘寶網(wǎng)頁面點(diǎn)開，整個流程至點(diǎn)擊支付結(jié)束為止。進(jìn)行實(shí)驗(yàn)前，要求被測試者開展一次預(yù)操作。待整個實(shí)驗(yàn)結(jié)束后，針對每一種行為、被試者情緒、表情等做好記錄，事后詢問出現(xiàn)這種情況的原因，并由被測者填寫對這個網(wǎng)站不滿意之處，并提出相應(yīng)的改進(jìn)建議。

2 實(shí)驗(yàn)結(jié)果及其研究

下文選定整個實(shí)驗(yàn)中具有復(fù)雜性、代表性的淘寶網(wǎng)購物界面為依據(jù)，其界面截屏如圖1所示。因網(wǎng)絡(luò)界面元素包含圖標(biāo)、導(dǎo)航工具、文本等內(nèi)容，為明確區(qū)分界面元素，圖中使用標(biāo)號對各界面元素進(jìn)行標(biāo)記。虛線框內(nèi)表示可以進(jìn)行操作的內(nèi)容，標(biāo)號自1至9，區(qū)域6代表手指滑動區(qū)域。實(shí)線框代表信息展示界面元素，標(biāo)號自1-4。

2.1 被測試人員的生理、心理

依據(jù)實(shí)驗(yàn)調(diào)查結(jié)果，購物車界面的被測試人員生理、心理及建議結(jié)果見表1，頻率指數(shù)代表這種狀態(tài)或提出這種建議的人數(shù)，研究結(jié)果證實(shí)，該網(wǎng)站界面功能和美學(xué)體驗(yàn)度有待進(jìn)一步提升。

2.2 被測者操作動線路徑距離統(tǒng)計結(jié)果

實(shí)驗(yàn)結(jié)果表明，3、6、9三個元素之間手指移動比較頻繁，次數(shù)均為24次，而實(shí)驗(yàn)者自6點(diǎn)擊3，通常是為點(diǎn)擊9這個刪除元素。因此，由于3的存在，導(dǎo)致操作變得比較復(fù)雜，手指在其間進(jìn)行移動比較多余。其中，1-6、3-6、4-8、6-7、7-8等元素之間手指移動次數(shù)較多，導(dǎo)致用戶使用購物網(wǎng)站購物時，手指移動距離較長，操作效率比較低，網(wǎng)頁元素布局有待逐步進(jìn)行優(yōu)化處理。

3 基于用戶體驗(yàn)的購物網(wǎng)站界面優(yōu)化設(shè)計

3.1 優(yōu)化設(shè)計步驟

針對以上實(shí)驗(yàn)手機(jī)購物網(wǎng)站頁面設(shè)計存在的問題，筆者運(yùn)用SLP法對網(wǎng)站界面實(shí)施改進(jìn)出，并通過多項(xiàng)指標(biāo)評估優(yōu)化方案。SLP方法作為工藝規(guī)劃布局常用方法之一，利用各作業(yè)單元間的物流強(qiáng)度，幫助進(jìn)一步明確作業(yè)單位布局位置[8]-[10]。本次利用SLP方法對購物網(wǎng)站界面優(yōu)化設(shè)計時，先把網(wǎng)頁內(nèi)個操作元素看成作業(yè)單元。首先，以試驗(yàn)中個操作按鈕之間的移動此時為物流量，并遵循物流量強(qiáng)度等級和比例劃分不同作業(yè)單位之間的關(guān)系強(qiáng)度等級[11]- [12]。其次，依據(jù)這些作業(yè)單元之間的關(guān)系強(qiáng)度。運(yùn)用Tompkins塊狀圖技術(shù)，制作最少兩種無面積作業(yè)單位拼塊圖[13]- [15]。最后，依據(jù)拼塊圖，結(jié)合不同界面元素、手機(jī)屏幕大小，遵循變化與統(tǒng)一、比例與適度等布局元素，獲得相應(yīng)的網(wǎng)頁改進(jìn)方案，如圖2所示。其中，圖中的五角星表示轉(zhuǎn)收藏按鈕，右上角的小房子是返回主頁按鈕。

3.2 改進(jìn)方案效果評估

優(yōu)化設(shè)計后，各元素之間網(wǎng)頁操作距離如表3，以優(yōu)化網(wǎng)頁設(shè)計前的操作路徑距離為標(biāo)準(zhǔn)，優(yōu)化設(shè)計后比改善前的操作路徑減少257.73cm，手指移動距離減少51.7%。

由此可知，這種設(shè)計能有效降低用戶手指酸麻可能性，大大提升使用者的體驗(yàn)度。這些數(shù)據(jù)充分表名，改善方案不僅由于取消部分路徑促使操作路徑長度變短，也能改善網(wǎng)頁布局，進(jìn)而縮減用戶操作所用時間。

4 結(jié)束語

本文利用SLP方法對淘寶網(wǎng)購物網(wǎng)頁進(jìn)行優(yōu)化設(shè)計，優(yōu)化設(shè)計后用戶操作距離明顯縮短，操作時間隨之較少，更適應(yīng)用戶的體驗(yàn)需求，進(jìn)而驗(yàn)證這種優(yōu)化設(shè)計的有效性和實(shí)用性。

參考文獻(xiàn)：

[1] 孫軍華，南桂美，黃怡婳等.手機(jī)終端網(wǎng)絡(luò)購物的動作標(biāo)準(zhǔn)和動作時間研究——以京東APP為例[J].上海理工大學(xué)學(xué)報，2016，38（4）：387-393.

[2] 張楊陽.以移動終端電子閱讀用戶為用戶群體的設(shè)計——社交移動應(yīng)用程序書格子[D].北京大學(xué)，2013.

[3] 趙國棟. 基于Android系統(tǒng)的手機(jī)網(wǎng)上商城設(shè)計與實(shí)現(xiàn)[D].北京交通大學(xué)，2012.endprint