B端場(chǎng)館圖繪制及座位配置設(shè)計(jì)研究

2023-4-6    博博

演出行業(yè)逐步復(fù)蘇,設(shè)計(jì)團(tuán)隊(duì)對(duì)演出項(xiàng)目選擇座位、配置座位體驗(yàn)進(jìn)行研究,助力選座體驗(yàn)的改善及購票效率的提升。


演出項(xiàng)目可分為【有座項(xiàng)目】和【無座項(xiàng)目】兩種類型,有座項(xiàng)目又可分為【選座售賣項(xiàng)目】和【非選座售賣項(xiàng)目】。

大部分話劇、音樂劇、舞蹈芭蕾項(xiàng)目都是選座售賣項(xiàng)目??蛻魜淼截堁劭蛻舳酥羞x擇想看的項(xiàng)目,選定座位并下單,最后檢票入場(chǎng)觀演,完成閉環(huán)。其中選座體驗(yàn)是客戶轉(zhuǎn)化重要的一環(huán),影響客戶決策。

為了提升用戶體驗(yàn),提升數(shù)據(jù)轉(zhuǎn)化,我們對(duì)貓眼目前選座體驗(yàn)進(jìn)行走查,探討問題原因,找到產(chǎn)品痛點(diǎn)和機(jī)會(huì)點(diǎn),為產(chǎn)品優(yōu)化做準(zhǔn)備。

貓眼客戶端選座體驗(yàn)問題:

1.自營項(xiàng)目無法直接選座,無論場(chǎng)館大小必須先選擇區(qū)域再選擇座位

如下圖,無法選擇圖中的座位,點(diǎn)擊座位跳轉(zhuǎn)到對(duì)應(yīng)區(qū)域的座位圖,需要再次點(diǎn)擊選擇。

2.無法根據(jù)場(chǎng)館座位分布全局選座

如下圖,選擇A區(qū)后僅能查看到A區(qū)座位,無法看到其他區(qū)域座位和舞臺(tái)。



3.場(chǎng)館分區(qū)圖風(fēng)格樣式不統(tǒng)一

如下圖,繪制精細(xì)程度不一,風(fēng)格樣式不一。



這些問題產(chǎn)生的原因:

問題1:產(chǎn)品結(jié)構(gòu)規(guī)劃上將場(chǎng)館分為區(qū)域和座位兩個(gè)層級(jí),未根據(jù)場(chǎng)館規(guī)模分級(jí)別展示,例如大型場(chǎng)館先選區(qū)域再選擇座位,小型場(chǎng)館直接選擇座位。 

問題2:B端后臺(tái)性能問題阻礙了客戶端全局查看選座。 

問題3:區(qū)域圖依靠B端后臺(tái)上傳,沒有統(tǒng)一的繪制標(biāo)準(zhǔn)約束,故客戶端的樣式不統(tǒng)一。 

通過以上原因可以看出客戶端選座體驗(yàn)很大程度上取決于B端后臺(tái)的配置,所以要從B端配置入手,從根源上解決體驗(yàn)問題。

本次研究目的



研究對(duì)象



我們通過產(chǎn)品研究和用戶訪談形式,結(jié)合業(yè)務(wù)需求,對(duì)產(chǎn)品功能進(jìn)行審視走查,希望能挖掘出產(chǎn)品痛點(diǎn)和機(jī)會(huì)點(diǎn)。

B端場(chǎng)館圖繪制及座位配置的主要用戶是運(yùn)維人員,所以我們對(duì)運(yùn)維人員進(jìn)行了深度訪談,主要目的:

1.了解用戶使用貓眼B端的操作行為和痛點(diǎn);

2.觀察用戶使用相似產(chǎn)品【城市售票網(wǎng)B端系統(tǒng)】的行為和痛點(diǎn)。



演出項(xiàng)目座位配置業(yè)務(wù)流程

商務(wù)與場(chǎng)館洽談好合作后,會(huì)提交添加/修改場(chǎng)館座位模板的郵件給到運(yùn)維人員,由運(yùn)維人員在B端后臺(tái)中進(jìn)行創(chuàng)建和修改。商務(wù)可在B端后臺(tái)創(chuàng)建項(xiàng)目關(guān)聯(lián)到對(duì)應(yīng)場(chǎng)館配置票價(jià)等。

在這條業(yè)務(wù)流程中,涉及到B端選座配置的部分:

1.創(chuàng)建/維護(hù)場(chǎng)館分區(qū)模板;

2.創(chuàng)建有座項(xiàng)目、關(guān)聯(lián)對(duì)應(yīng)場(chǎng)館、配置票價(jià)、配置預(yù)留。



一、創(chuàng)建/維護(hù)場(chǎng)館分區(qū)模板

創(chuàng)建場(chǎng)館分區(qū)模板主要分為兩個(gè)步驟:

創(chuàng)建場(chǎng)館分區(qū):包含兩個(gè)主要頁面和一個(gè)彈窗,承載創(chuàng)建分區(qū)圖和設(shè)置分區(qū)信息功能。創(chuàng)建分區(qū)支持上傳底圖、SVG圖,編輯器繪制

創(chuàng)建分區(qū)座位:包含一個(gè)主要彈窗,承載畫座位、座位編號(hào)、移動(dòng)座位、統(tǒng)計(jì)座位等功能。



1. 創(chuàng)建分區(qū)體驗(yàn)痛點(diǎn)

1.1 使用SVG編輯器繪制場(chǎng)館分區(qū)圖操作不便

嵌入式畫圖工具僅能繪制較為簡(jiǎn)單的圖形,門檻高且繪制成果不理想,對(duì)于復(fù)雜場(chǎng)館無法滿足繪制需求,無法與演出業(yè)務(wù)很好的結(jié)合。



1.2 運(yùn)維使用第三方工具,繪制風(fēng)格差異大

由于畫圖工具繪制不理想,運(yùn)維人員自學(xué)AI、Coreldraw等繪制后上傳到后臺(tái)系統(tǒng)。人和工具的不同導(dǎo)致座位圖風(fēng)格差異較大。



1.3 項(xiàng)目變動(dòng)維護(hù)不便

項(xiàng)目調(diào)整需通過第三方繪制工具修改或重新繪制導(dǎo)出后上傳到后臺(tái),修改流程長且重復(fù)操作過多。

2. 創(chuàng)建座位體驗(yàn)痛點(diǎn)

2.1 畫座方式不支持繪制傾斜、曲度、錯(cuò)位的座位

固定的座位方格坐標(biāo)對(duì)坐標(biāo),自由度差,無法自定義座位角度和排布形式。無法精準(zhǔn)還原場(chǎng)館座位分布。

2.2 不支持自定義舞臺(tái)方向和位置

舞臺(tái)位置方向固定,無法滿足多個(gè)舞臺(tái)、座位包圍舞臺(tái)配置。

2.3 繪制座位交互操作單一

僅支持鼠標(biāo)在方格內(nèi)拖動(dòng)繪制,效率低,增刪改操作麻煩。



2.4 交互流程不通順

編號(hào)、移動(dòng)等功能先切換功能再選擇座位的順序不符合用戶行為,符合用戶操作的順序是先選擇座位再點(diǎn)擊對(duì)應(yīng)操作配置。

座位編號(hào)、移動(dòng)、統(tǒng)計(jì)功能不適合tab形式,交互組件使用不當(dāng)。





2.5 交互界面表達(dá)有誤

座位編號(hào)分為排編號(hào)和列編號(hào)兩種方式,選擇一種并填寫配置參數(shù)。系統(tǒng)界面中兩種方式都有*(必填)容易引起誤導(dǎo)。



2.6 刪除編號(hào)語義不明確

選擇座位后點(diǎn)擊刪除編號(hào)按鈕后座位和編號(hào)都被刪除,按鈕語義與實(shí)際意思不符。并且誤刪除座位還會(huì)增加重新繪制工作量。



3. 產(chǎn)品結(jié)構(gòu)體驗(yàn)痛點(diǎn)

3.1 分區(qū)形狀與座位分布關(guān)聯(lián)度低

分區(qū)的大致形狀應(yīng)由分區(qū)座位的排布所決定,而產(chǎn)品中分區(qū)形狀與分區(qū)座位形狀并無直接的關(guān)聯(lián),導(dǎo)致用戶在選座時(shí)產(chǎn)生較大的割裂感。



3.2 不支持直接選座

為了讓客戶更直觀的掌握?qǐng)鲳^座位分布,運(yùn)維人員繪制時(shí)會(huì)盡可能還原,但客戶選擇時(shí)還要進(jìn)入分區(qū)后才能選擇座位,且僅能查看到一個(gè)分區(qū)的座位,不能全局選座。



4. 框架和容器動(dòng)線體驗(yàn)痛點(diǎn)

4.1 分區(qū)配置位置分散,操作效率低

分區(qū)繪制與信息配置分散在兩個(gè)頁面和1個(gè)彈窗中,頁面布局分散,動(dòng)線復(fù)雜多變。

4.2 座位配置比重弱

座位配置權(quán)重高且操作復(fù)雜,不適合使用彈窗承載,位置層級(jí)太深。



5. 產(chǎn)品與業(yè)務(wù)關(guān)聯(lián)體驗(yàn)痛點(diǎn)

5.1 座位配置功能單一,缺少輔助操作

繪制座位圖是一項(xiàng)龐大的工程,系統(tǒng)內(nèi)大型場(chǎng)館的座位達(dá)到4-9萬個(gè),例如鳥巢、梅賽德斯奔馳文化中心。繪制大型場(chǎng)館需要花費(fèi)3-4天時(shí)間,座位分布復(fù)雜的場(chǎng)館需要花費(fèi)更長時(shí)間。目前系統(tǒng)僅有單一拖動(dòng)方格的繪制方式,缺少提升繪制效率的輔助工具,例如撤回、復(fù)制座位、多種對(duì)齊/翻轉(zhuǎn)方式等。



6. 體驗(yàn)優(yōu)點(diǎn)

6.1 繪制場(chǎng)館分區(qū)圖時(shí)支持導(dǎo)入SVG

方便繪制大型復(fù)雜的場(chǎng)館。



6.2 系統(tǒng)穩(wěn)定

復(fù)雜的場(chǎng)館繪制時(shí)間長且操作復(fù)雜,系統(tǒng)未產(chǎn)生過崩潰或其他終止情況。

二、配置票價(jià)和預(yù)留

配置票價(jià)和預(yù)留主要分為三個(gè)步驟:

選定場(chǎng)館分區(qū):確認(rèn)場(chǎng)館并選擇場(chǎng)館內(nèi)分區(qū)

配置票價(jià):選擇座位配置票價(jià)。

配置預(yù)留:選擇座位配置預(yù)留。



1. 框架和容器動(dòng)線體驗(yàn)痛點(diǎn)

1.1 頁面結(jié)構(gòu)相似,內(nèi)容重復(fù)

票價(jià)和預(yù)留頁面重復(fù)度高,都包含分區(qū)預(yù)覽、選座情況、分區(qū)座位圖模塊。



2. 交互細(xì)節(jié)體驗(yàn)痛點(diǎn)

2.1 同樣功能不同頁面交互和視覺不一致

兩個(gè)頁面都包含分區(qū)預(yù)覽模塊,但交互視覺差別較大,交互視覺操作不統(tǒng)一。



2.2 內(nèi)容表達(dá)不清晰

設(shè)置預(yù)留操作中,“對(duì)象”文案語義表述不清晰、“貓眼”和“釋放”不屬于同一層級(jí)且語義表達(dá)不清楚;新增預(yù)留標(biāo)記按鈕位置有誤,應(yīng)該放置在自定義預(yù)留下方,而不是與“對(duì)象“平級(jí)。



2.3 設(shè)置預(yù)留后無法查看座位編號(hào)

設(shè)置預(yù)留后,座位編號(hào)被預(yù)留標(biāo)簽替換,從而看不到座位編號(hào),影響識(shí)別。



3. 產(chǎn)品功能體驗(yàn)痛點(diǎn)

3.1 不支持導(dǎo)出票務(wù)方案圖

在項(xiàng)目洽談后、正式開票前,報(bào)批時(shí)需要提供給主辦和公安票務(wù)方案圖,供主辦審核,目前需要運(yùn)維自行制作不支持導(dǎo)出。





一、維護(hù)場(chǎng)館分區(qū)模板

1. 產(chǎn)品結(jié)構(gòu)

與貓眼B端后臺(tái)相同,城市售票網(wǎng)在繪制場(chǎng)館分區(qū)圖時(shí)也是分為兩個(gè)步驟,先配置區(qū)域再配置座位。

區(qū)域配置:支持上傳底圖并通過繪制工具畫出區(qū)域形狀,繪制完成后可直接配置區(qū)域信息。

座位配置:通過繪座工具畫出區(qū)域座位,選座工具和配置工具進(jìn)行輔助繪制。

2. 產(chǎn)品布局

2.1 區(qū)域與座位配置結(jié)構(gòu)清晰,頁面布局規(guī)整;

2.2 區(qū)域和座位配置兩步銜接緊密,操作動(dòng)線流暢。



3. 區(qū)域配置功能分析

優(yōu)點(diǎn):

1)支持上傳底圖及調(diào)整比例; 

2)繪制工具易用性較高;

3)繪制風(fēng)格統(tǒng)一;

4)分區(qū)配置動(dòng)線流暢。

痛點(diǎn):

1)不支持上傳SVG圖;

2)繪制POH(區(qū)域)的工具少,僅鋼筆工具;

根據(jù)產(chǎn)品定義,繪制座位分區(qū)使用區(qū)域工具,繪制舞臺(tái)、樓梯、出入口等場(chǎng)館輔助設(shè)施使用形狀工具。根據(jù)業(yè)務(wù)實(shí)際情況,區(qū)域繪制為主,形狀繪制為輔。然而區(qū)域繪制工具僅有一個(gè)鋼筆工具,Shape(形狀)繪制工具有三個(gè),主次顛倒。

3)區(qū)域和形狀繪制工具容易混淆。

左側(cè)工具欄中兩類繪制工具未明確分開,非熟練人員操作時(shí)會(huì)誤用兩種工具。



4. 座位配置功能分析

4.1 創(chuàng)建座位

優(yōu)點(diǎn):

1)工具繪制靈活自由;

2)支持旋轉(zhuǎn)座位。

痛點(diǎn):

1)需要熟悉繪制工具交互操作,有一定的上手門檻;

2)單個(gè)座位工具、路徑繪制工具在繪制結(jié)束需要鼠標(biāo)雙擊,在無指導(dǎo)的情況下用戶很難發(fā)現(xiàn)。交互操作缺少說明文字或圖片解釋。



4.2 選擇座位

優(yōu)點(diǎn):

1)多種輔助工具提升繪制效率;

2)支持區(qū)域內(nèi)復(fù)制黏貼座位。

痛點(diǎn):

1)僅能在區(qū)域內(nèi)復(fù)制黏貼座位,不具備區(qū)域之間座位復(fù)制或復(fù)制區(qū)域的能力。

對(duì)稱布局是場(chǎng)館中常見的一種布局形式,繪制好一個(gè)區(qū)域座位后復(fù)制并翻轉(zhuǎn)就可以快速畫完另一個(gè)區(qū)域。

如下圖所示,當(dāng)前在G區(qū)域編輯座位,雖然可以復(fù)制G區(qū)的座位黏貼,但僅在G區(qū)能看到,無法復(fù)制到C區(qū)圖層內(nèi)。



2)不支持設(shè)置弧度座位。 

如下圖所示場(chǎng)館無法在系統(tǒng)內(nèi)完全還原。



4.3 座位編號(hào)

優(yōu)點(diǎn):

1)編號(hào)方式支持字母、數(shù)字、字母數(shù)字結(jié)合形式,符合多種場(chǎng)景需求。

痛點(diǎn):

1)編號(hào)受限于繪制時(shí)的分組;

繪制座位需要根據(jù)座位編號(hào)邏輯繪制分組,不可以一次性全部繪制完后分開編號(hào)。



若第一次繪制有遺漏座位,第二次補(bǔ)充后,無法整體編號(hào)。



2)無法取消編號(hào)。 

編號(hào)僅能修改,不能刪除

5. 產(chǎn)品視圖分析

5.1 編輯座位視角

缺點(diǎn):

1)僅支持在預(yù)覽功能時(shí)查看創(chuàng)建的全部座位。繪制某一區(qū)域座位時(shí)無法看到其他區(qū)域座位,缺少全局參考。

二、配置票價(jià)和預(yù)留

1. 產(chǎn)品布局

優(yōu)點(diǎn):

1)票檔和預(yù)留配置與場(chǎng)館座位配置結(jié)構(gòu)相似,布局和操作統(tǒng)一,易于理解。

2)票價(jià)和防漲配置在一個(gè)頁面內(nèi)完成,簡(jiǎn)單清晰。



2. 票價(jià)及預(yù)留配置功能分析

痛點(diǎn):

1)設(shè)置預(yù)留后無法查看到座位編號(hào)

如下圖中A標(biāo)記的座位是預(yù)留座位,無法查看座位編號(hào)



2)預(yù)留模式下,選中已設(shè)置票檔、未設(shè)置預(yù)留的座位時(shí),無法區(qū)分票檔

如下圖選中狀態(tài)下1-6號(hào)座位無法區(qū)分票檔A/B



3. 總結(jié)

城市售票網(wǎng)B端系統(tǒng)的在繪制場(chǎng)館圖上靈活度自由度高,界面布局規(guī)整,動(dòng)線清晰,產(chǎn)品功能適用于多元復(fù)雜場(chǎng)景,不過需要用戶具有一定的繪圖基礎(chǔ)或熟悉成本。



通過以上分析,我們總結(jié)出貓眼B端系統(tǒng)后續(xù)的優(yōu)化方向,框架和容器動(dòng)線上需要提高用戶瀏覽和操作效率,頁面進(jìn)行歸類整合,布局樣式統(tǒng)一;繪制環(huán)境上需要為用戶提供靈活自由的區(qū)域座位繪制工具,配備高效的選座和輔助工具。

一、整體布局

1)打破現(xiàn)有的分區(qū)與座位不平衡布局模式,梳理動(dòng)線

二、功能

1. 場(chǎng)館分區(qū)設(shè)置

1)提供與業(yè)務(wù)關(guān)聯(lián)度高的、易用的分區(qū)繪制工具;

2)支持多種類型分區(qū),例如舞臺(tái)區(qū)、座位區(qū)、舞池區(qū)等; 

3)提高分區(qū)與座位繪制還原度; 

4)確立場(chǎng)館規(guī)模分級(jí),客戶端根據(jù)級(jí)別展示座位層級(jí)或直接進(jìn)入分區(qū)層級(jí)。

2. 場(chǎng)館座位設(shè)置

1)提供易用度高的座位繪制工具或座位添加方式; 

2)支持靈活選座,靈活編號(hào); 

3)支持調(diào)整座位角度、弧度、間距參數(shù); 

4)提供提升繪制效率的輔助工具; 

5)支持跨區(qū)復(fù)制座位或復(fù)制區(qū)域功能; 

6)提升座位配置頁面權(quán)重,完善座位配置界面。

3. 配置票價(jià)和預(yù)留

1)整合票價(jià)和預(yù)留頁面; 

2)修正界面交互視覺問題; 

3)支持設(shè)置預(yù)留后查看座位號(hào); 

4)增加導(dǎo)出票務(wù)方案圖功能。



這次研究我們從業(yè)務(wù)、產(chǎn)品功能、用戶三方面對(duì)選座配座模塊進(jìn)行走查,抓住產(chǎn)品痛點(diǎn),為后續(xù)改造指明了方向;對(duì)同類型產(chǎn)品的選座配座解決方案進(jìn)行分析,幫助我們獲得新思路。 

隨著沉浸式劇場(chǎng)、互動(dòng)型劇場(chǎng)等新型演出的發(fā)展,場(chǎng)館座位布局不再是單一的座位正對(duì)舞臺(tái),多個(gè)舞臺(tái)、座位多角度圍繞舞臺(tái)的布局形式不斷出現(xiàn),今后還會(huì)有更多新型座位布局出現(xiàn)。設(shè)計(jì)適用于多種業(yè)務(wù)場(chǎng)景、頁面動(dòng)線清晰、繪制功能好用的后臺(tái)工具不僅能提升運(yùn)維人員的操作效率,也能提升客戶端用戶選座體驗(yàn)和購票轉(zhuǎn)化,從而提升產(chǎn)品的市場(chǎng)競(jìng)爭(zhēng)力。隨著演出行業(yè)的逐步復(fù)蘇,大量選座項(xiàng)目上線,改造選座模塊是我們工作重中之重。


作者:貓眼演出設(shè)計(jì)Team    來源:站酷網(wǎng)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)加微信ban_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。 

分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。 

藍(lán)藍(lán)設(shè)計(jì)m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。

分享本文至:

日歷

鏈接

個(gè)人資料

存檔