韋立蓉

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

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

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

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

1 實驗對象及實驗設(shè)計

1.1 實驗對象

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

1.2 實驗設(shè)計

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

2 實驗結(jié)果及其研究

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

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

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

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

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

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

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

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

3.2 改進方案效果評估

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

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

4 結(jié)束語

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

參考文獻(xiàn)：

[1] 孫軍華，南桂美，黃怡婳等.手機終端網(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)的手機網(wǎng)上商城設(shè)計與實現(xiàn)[D].北京交通大學(xué)，2012.endprint