一道測(cè)試題:改版某個(gè)APP界面,你要如何下手
編輯導(dǎo)語(yǔ):在產(chǎn)品設(shè)計(jì)中,設(shè)計(jì)師需要依據(jù)業(yè)務(wù)場(chǎng)景與業(yè)務(wù)價(jià)值,進(jìn)一步對(duì)APP應(yīng)用界面進(jìn)行改版設(shè)計(jì),這有助于提升用戶體驗(yàn),推動(dòng)后續(xù)用戶留存。本篇文章里,作者針對(duì)一道設(shè)計(jì)類面試題,總結(jié)了APP界面改版時(shí)需要思考的維度和注意事項(xiàng),一起來(lái)看一下。
最近幫同學(xué)們看了一些面試題,發(fā)現(xiàn)有一類題目出場(chǎng)率很高,就是對(duì)某個(gè)產(chǎn)品頁(yè)面進(jìn)行改版。
這類題目其實(shí)挺招人恨的,因?yàn)檫@樣的改版說(shuō)實(shí)話就是讓設(shè)計(jì)師yy著去改,但換個(gè)角度想,也許是企業(yè)就是想看誰(shuí)yy得更嚴(yán)謹(jǐn),思考得更全面、更有創(chuàng)新,也是一種開(kāi)放式測(cè)試。那么我們先來(lái)看一下這個(gè)題目(我做了一些調(diào)整)。
根據(jù)已有界面,通過(guò)場(chǎng)景分析和以業(yè)務(wù)價(jià)值為導(dǎo)向?qū)@個(gè)設(shè)計(jì)電商詳情界面進(jìn)行改版,提出一些可落地的設(shè)計(jì)策略。
我們來(lái)解讀一下這個(gè)測(cè)試題,這道題目要考驗(yàn)候選者的產(chǎn)品思維能力,并且考驗(yàn)候選者是否能夠通過(guò)設(shè)計(jì)為業(yè)務(wù)賦能的能力。出題者希望能夠考察到設(shè)計(jì)師一個(gè)比較綜合的能力,不管從產(chǎn)品、需求、場(chǎng)景、用戶等多角度去產(chǎn)品的價(jià)值和方案的可落地性。
那么接下來(lái),我們來(lái)開(kāi)始。
一、第一步:分析
分析什么?
分析我們可以做什么,先不要急著去做方案,一定一定要有點(diǎn)大局觀。
比如給你多少時(shí)間,時(shí)間充裕的條件下,我們可以對(duì)市場(chǎng)、用戶去做一些研究,以豐富我們的方案背書和客觀度。但如果就給1、2天時(shí)間,那么大家一定要有選擇地去輸出方案。
如果時(shí)間短,我建議是設(shè)計(jì)出高保真效果圖,針對(duì)幾個(gè)比較有價(jià)值的點(diǎn)去做詳細(xì)解釋,其他的小點(diǎn)用于展示即可。
如果時(shí)間比較充裕,那么就來(lái)思考一下,如果我們要對(duì)一個(gè)產(chǎn)品去做改版,一定是需要有相關(guān)數(shù)據(jù)去做參考的。
那么問(wèn)題來(lái)了,測(cè)試題僅僅給我們這些信息,數(shù)據(jù)從何而來(lái)?如果需要數(shù)據(jù)我們又需要什么數(shù)據(jù)?這些數(shù)據(jù)對(duì)我們改版是否真的有幫助?我們?cè)撛趺慈ナ占@些數(shù)據(jù)?當(dāng)你搞清楚這些問(wèn)題之后,我們就可以開(kāi)始動(dòng)手了。
二、第二步:收集
收集和該產(chǎn)品有關(guān)的所有有參考價(jià)值的信息,例如產(chǎn)品的定位、產(chǎn)品目前的市場(chǎng)、行業(yè)發(fā)展近況、競(jìng)品、用戶群體(能細(xì)化出類型更好)。
由于還是需要對(duì)產(chǎn)品進(jìn)行保密所以這里就沒(méi)有辦法細(xì)講了,給大家一些可以搜集這些信息的網(wǎng)站,大部分都可以找到。有小伙伴想問(wèn)如果想看一些活躍度、用戶分布、比例等這些數(shù)據(jù)數(shù)據(jù)怎么看,抱歉!這已經(jīng)是商業(yè)機(jī)密了,一般是看不到的。
誒?那一般看不到,還有二般就能看到嗎?
是的!但是如果你想看這些數(shù)據(jù)首先你要準(zhǔn)備好一年幾十萬(wàn)的資金,因?yàn)檫@些一般都是公司規(guī)模去買這些產(chǎn)品服務(wù)比較好,個(gè)人就算了。
如果你想看一些比較基礎(chǔ)的行業(yè)報(bào)告,那么可以去questmobile看看,這上面有很多行業(yè)的報(bào)告,涉及的范圍也比較廣,還有類似的像艾瑞報(bào)告、199ti報(bào)告、慧博、wind等第三方網(wǎng)站都有很多相關(guān)的行業(yè)報(bào)告和熱點(diǎn)。
那么除了這些網(wǎng)站,我們還可以通過(guò)一些媒體、期刊或者搜索引擎去找到想要的數(shù)據(jù)。像知乎、百度、人人都是pm、微信搜索等等,但這些信息也比較零碎,大家最后要自己整理一下。
以上的一些渠道可以幫我們找到行業(yè)情況和市場(chǎng)情況,用戶方面是比較難找的,有幾種方法可以給大家一些參考:
- 如果產(chǎn)品中有私信功能,那么可以通過(guò)私信去找到一些;
- 還可以直接向面試官了解一些用戶的基本情況;
- 可以直接通過(guò)各大搜索引擎去搜xxx產(chǎn)品用戶研究,可能會(huì)有意想不到的收獲。
如果有真實(shí)用戶的訪談結(jié)果,那么會(huì)對(duì)你這次測(cè)試題加分不少,因?yàn)橄嘈藕芏嗳嗽谧鲞@樣的面試題的時(shí)候都是靠自己腦補(bǔ)的,而這些桌面研究的過(guò)程大部分同學(xué)會(huì)忽略。
三、第三步:策略
這里我沒(méi)有把先放出來(lái),因?yàn)獒槍?duì)不同的需求需要有不同的策略。
再回觀測(cè)試題,我們發(fā)現(xiàn)題目要求的是從場(chǎng)景和價(jià)值兩方面出發(fā),那么單純地分析界面已有的問(wèn)題并不足夠,所以我們針對(duì)價(jià)值這一塊也要同時(shí)去做分析。那么這里的策略就是雙管齊下。
四、第四步:繼續(xù)分析
前面收集的數(shù)據(jù)可能有參考價(jià)值,也可能沒(méi)有。如果有,那么在這個(gè)環(huán)節(jié)我們可以輔助分析,例如目前題目給到的界面是這樣的,這個(gè)界面我們來(lái)分析一下它存在什么問(wèn)題,分析之前用一個(gè)很簡(jiǎn)單的用戶體驗(yàn)五要素做框架去分析就可以了。
1. 戰(zhàn)略層——產(chǎn)品定位
這款產(chǎn)品是一款會(huì)員/社交電商,用戶通過(guò)分享、推薦商品賺取“傭金”,產(chǎn)品可以提供給用戶分享自由生活(zhuanqian)的核心價(jià)值。
所以在這個(gè)產(chǎn)品中,我們需要讓用戶更便捷地分享、同時(shí)幫助用戶達(dá)成自由生活(zhuanqian)的這么一個(gè)目標(biāo),讓其分享的用戶更愿意去下單。
2. 范圍層——功能
功能來(lái)源于用戶和業(yè)務(wù)需求,用戶需求那么我們就來(lái)判斷其使用場(chǎng)景,當(dāng)然這里的場(chǎng)景如果沒(méi)有用戶做背書的話,也只能通過(guò)以上數(shù)據(jù)的收集來(lái)歪歪了。
來(lái)看到這個(gè)界面,我們會(huì)發(fā)現(xiàn)整個(gè)產(chǎn)品在功能層面上比較單一,只具備普通電商產(chǎn)品的基礎(chǔ)功能,甚至還有缺失。在電商詳情頁(yè)的場(chǎng)景中有很多場(chǎng)景在這里也沒(méi)有補(bǔ)全,例如想要收藏怎么辦、想要返回首頁(yè)怎么辦、想查看消息怎么、商品是否包郵、地址怎么選、分享給別人和我自己買有什么區(qū)別等等,這些是從用戶場(chǎng)景角度出發(fā)的一些問(wèn)題。
3. 結(jié)構(gòu)層——分類、流程
功能的分類、流程,單從這個(gè)頁(yè)面無(wú)法判斷出更多信息,所以大家一定要記得,讓你改首頁(yè)千萬(wàn)別就傻乎乎地只盯著這個(gè)首頁(yè)去看,一定要結(jié)合產(chǎn)品的上下文,我從哪里來(lái)、要到哪里去。
如果脫離上下文去改版也是不夠準(zhǔn)確的,所以這里也是要準(zhǔn)備好去深入體驗(yàn)一下這個(gè)產(chǎn)品。
例如這里的購(gòu)物車,從框架層講,它出現(xiàn)的位置,要用懸浮還是在底部還是不需要,都是由于產(chǎn)品定位所決定的。
例如像pdd為什么沒(méi)有購(gòu)物車,是因?yàn)樗獪p少用戶決策時(shí)間,由于用戶本身的定位決定了購(gòu)物流程越復(fù)雜、用戶下單的概率越低,并且概率會(huì)比一般電商低不少。并且它主要是以團(tuán)購(gòu)形式,用戶也不需要購(gòu)物車。
還有一點(diǎn)就是,購(gòu)物車本身是針對(duì)自購(gòu)并且想要參加滿減活動(dòng)的用戶設(shè)計(jì)的,而本身其商品的價(jià)格就非常低,也就不需要再進(jìn)行滿減了。
結(jié)構(gòu)流程上講,這里使用的是懸浮按鈕,當(dāng)我們點(diǎn)擊體驗(yàn)之后發(fā)現(xiàn)直接跳到了首頁(yè)的底部標(biāo)簽激活狀態(tài)的場(chǎng)景了,想要再返回只能點(diǎn)擊購(gòu)物車中的商品列表才可以,這個(gè)和用戶使用普通電商產(chǎn)品的流程差別就比較大。
一般結(jié)構(gòu)層和框架層會(huì)放在一起分析,這里為了清晰地給大家列出來(lái)就分開(kāi)說(shuō)。
4. 框架層——布局
分享按鈕的位置其實(shí)并不是特別好,社交產(chǎn)品對(duì)于分享這個(gè)行為是比較重視的,所以當(dāng)我們?nèi)ハ螺d這個(gè)產(chǎn)品進(jìn)行體驗(yàn)之后,發(fā)現(xiàn)其分享按鈕點(diǎn)擊后的流程是和普通電商產(chǎn)品不同的,所以這里的分享按鈕又比較弱,后期需要換一個(gè)形式。
返回首頁(yè)是否要放在工具欄,底部工具欄盡量放置對(duì)本頁(yè)面有效用的功能,像一般電商會(huì)點(diǎn)擊返回店鋪或者進(jìn)入改產(chǎn)品品牌,從而提高客單價(jià),但這里的返回首頁(yè)有點(diǎn)南轅北轍了,可以選擇弱化。
5. 表現(xiàn)層
這個(gè)緯度就是分析視覺(jué),如果最后你想要完成視覺(jué)部分的話,就可以分別從以下幾個(gè)視覺(jué)維度去進(jìn)行分析(同樣要聯(lián)系上下文):
- 規(guī)范的一致性;
- 內(nèi)容和信息是否有清晰的層級(jí);
- 核心內(nèi)容和信息是否突出;
- 品牌語(yǔ)言是否融入或者傳達(dá);
- 樣式使用是否有規(guī)律;
- 是否采用柵格布局;
- 圖標(biāo)、圖片、配色的選用是否符合產(chǎn)品調(diào)性;
- 是否有設(shè)計(jì)創(chuàng)意和細(xì)節(jié)表現(xiàn)。
從該界面上來(lái)看這8個(gè)問(wèn)題或多或少都有,大家可以自己列舉一下。
當(dāng)我們以這樣半主觀半客觀的形式分析后,得出該產(chǎn)品一些比較明顯的問(wèn)題,分析完這些問(wèn)題之后,我們看看是否可以幫助業(yè)務(wù)再有進(jìn)一步提升。
所以在分析這個(gè)環(huán)節(jié)中我們繼續(xù)從業(yè)務(wù)價(jià)值的角度去分析,業(yè)務(wù)價(jià)值我們可以拆一下:比如直接盈利和間接盈利,直接盈利暫時(shí)不用去考慮,因?yàn)槿绻旧頉](méi)有盈利模式,你要是能直接歪歪出一個(gè)盈利模式他們也就不用干了。
什么是直接盈利,就比如說(shuō)一個(gè)小說(shuō)類產(chǎn)品的盈利點(diǎn)在于付費(fèi)閱讀和廣告,一個(gè)視頻類的產(chǎn)品盈利點(diǎn)在于付費(fèi)觀看不同清晰度和熱門的影視作品。還有像社交形式的電商產(chǎn)品,它的盈利點(diǎn)在于供應(yīng)商的商品低價(jià)而產(chǎn)品則是賺取中間差價(jià)的方式,像還有一些會(huì)員電商除了賺差價(jià)的形式還有購(gòu)買會(huì)員部分的盈利。
而間接盈利指的是從側(cè)面對(duì)盈利這個(gè)目標(biāo)造成一定的影響,比如間接盈利可以繼續(xù)拆為:提升品牌價(jià)值、提升功能轉(zhuǎn)化、提升用戶活躍度……
五、第五步——策略與假設(shè)
做到這里可能小伙伴想問(wèn),那咱們目前所推導(dǎo)出來(lái)的結(jié)果沒(méi)有業(yè)務(wù)背景是不是都不靠譜呢?
其實(shí)這個(gè)測(cè)試題就是要考驗(yàn)大家在什么條件和資源都沒(méi)有的環(huán)境下能做到什么程度,所以即便沒(méi)有業(yè)務(wù)背景的條件下,你是否可以有一個(gè)嚴(yán)謹(jǐn)?shù)倪壿嫼蛣?chuàng)新的設(shè)計(jì),說(shuō)不定企業(yè)正被哪些業(yè)務(wù)限制住了,反而想看看外面的設(shè)計(jì)師是否能有更好的解決方案。
所以盡可能地收集你能收集的數(shù)據(jù)和資料,通過(guò)對(duì)這些資料、行業(yè)、產(chǎn)品的分析,結(jié)合自己的設(shè)計(jì)能力去做,就可以了,不用去想那么多有的沒(méi)的。
以下是對(duì)這個(gè)詳情頁(yè)的進(jìn)一步優(yōu)化和說(shuō)明,這些方案是從第四步中的目標(biāo)拆解出來(lái)的,例如提升用戶活躍度、提升用戶分享的意愿、讓用戶對(duì)分享感知更明顯等。
1. 設(shè)置活動(dòng)與任務(wù)來(lái)促進(jìn)用戶的分享與下單轉(zhuǎn)化
例如限時(shí)特賣,針對(duì)自購(gòu)型用戶,在頭部通過(guò)明顯的形式顯示出利益點(diǎn)。
電商平臺(tái)還是需要有一定的活動(dòng)和氛圍,所以需要營(yíng)造一個(gè)搶購(gòu)的氛圍、而不是冷冰冰地呈現(xiàn)一個(gè)商品,有沒(méi)有資源去運(yùn)作這個(gè)活動(dòng)就另說(shuō)了。電商活動(dòng)可以有很多,還是要看資源。
2. 采用階梯式銷售獎(jiǎng)勵(lì)
為了提高分享用戶的積極度,可以采用階梯式銷售獎(jiǎng)勵(lì)的設(shè)計(jì)方案。
為了鼓勵(lì)用戶分享的行為,也可以投入一部分資金來(lái)做完成任務(wù)返現(xiàn)的活動(dòng)。營(yíng)銷方式有很多,成本覆蓋后能觸達(dá)更多用戶,其實(shí)也算是零成本獲客了。
3. 新增收藏功能、地址選擇
這個(gè)就是常規(guī)電商平臺(tái)要有的功能,可以直接展示。
4. 新增素材采集功能
對(duì)于新用戶不知道如何對(duì)商品給他人種草的場(chǎng)景,我們可以提供用戶一些其他用戶的圖文,幫助他更好地進(jìn)行轉(zhuǎn)發(fā)和種草。所以這個(gè)功能可以幫助用戶更快地建立對(duì)分享的認(rèn)知,如果自己沒(méi)有買過(guò)商品或者懶得拍攝實(shí)物,那么素材圈可以幫用戶大大節(jié)省時(shí)間。
5. 優(yōu)化規(guī)格選擇、分享流程
目前分享流程有一個(gè)問(wèn)題,就是在轉(zhuǎn)發(fā)流程中,用戶比較難確定自己是否將會(huì)轉(zhuǎn)發(fā)包括文字和圖片在內(nèi)的所有信息,并且快捷分享和分享圖文素材,在樣式上比較相像,一時(shí)間難以區(qū)分。
而這里我們認(rèn)為最好將圖文素材分享和商品海報(bào)、鏈接分享做一個(gè)區(qū)分。
有的人可能會(huì)認(rèn)為這樣整合在一起不是更快捷嗎?
很多同學(xué)可能忽略了一個(gè)問(wèn)題,就是素材是怎么來(lái)的?素材是真實(shí)的嗎?
如果每個(gè)人的素材是一成不變的,并且是官方已經(jīng)做好的,這樣的種草其實(shí)效果并不好,所以我們需要根據(jù)第四點(diǎn)來(lái)看,將兩個(gè)場(chǎng)景分開(kāi),如果用戶要轉(zhuǎn)發(fā)素材,那么就去素材圈,里面素材的文案、圖片有非常多樣,如果要轉(zhuǎn)發(fā)海報(bào)或者商品鏈接就在商品詳情直接轉(zhuǎn)發(fā)。
這里又涉及到一個(gè)問(wèn)題,還是我們之前說(shuō)過(guò)的業(yè)務(wù)規(guī)劃。如果本身沒(méi)有這樣的資源去做支撐,那么現(xiàn)在這個(gè)形式也是可以的,只是在設(shè)計(jì)上需要調(diào)整一下比如需要用戶手動(dòng)點(diǎn)擊復(fù)制文案,如果用戶未點(diǎn)擊,在轉(zhuǎn)發(fā)后是否會(huì)直接默認(rèn)復(fù)制?這里只要將復(fù)制文案的按鈕改成和下方一樣的單選box就可以了。
6. 功能布局上進(jìn)一步優(yōu)化
收納次要場(chǎng)景功能,突出核心場(chǎng)景功能。
導(dǎo)航欄隱藏,商品大圖通欄作為背景顯示,突出分享按鈕以及區(qū)別分享和自購(gòu)的利益點(diǎn)。
這里再?gòu)?qiáng)調(diào)一下,如果我們要新增一些功能,那么我們盡量把這個(gè)方案去細(xì)化,可能要產(chǎn)出的界面不僅僅只有出題的這一張,因?yàn)榉乓粋€(gè)圖標(biāo)或者文字很簡(jiǎn)單,難的是后面這個(gè)流程設(shè)計(jì)。這里就不展開(kāi)了。
最后原型的效果和之前界面的對(duì)比:
六、總結(jié)一下
今天分享的是一個(gè)比較常規(guī)又簡(jiǎn)單的案例,但是會(huì)有一些行業(yè)的特殊性,單純拿著競(jìng)品去參考是不夠的,所以做類似這樣的測(cè)試題的時(shí)候,如果時(shí)間充裕,還是盡可能對(duì)產(chǎn)品了解的足夠多之后,多角度思考會(huì)更加好。
另外,其實(shí)方法有很多種,流程框架也并不一定都是我們這次分析的這樣,比如有真實(shí)用戶的時(shí)候可以簡(jiǎn)單做個(gè)用戶體驗(yàn)地圖和小訪談,即便代表性不夠也可以了解到用戶的真實(shí)想法和實(shí)際場(chǎng)景。
測(cè)試題的難度取決于你多想進(jìn)入這家公司,如果就是想碰個(gè)巧,那么直接靠經(jīng)驗(yàn)和想象去做就可以了,或者很多人也會(huì)選擇反套,先自己出方案然后再套一些方法,但是如果遇到一個(gè)比較嚴(yán)謹(jǐn)?shù)拿嬖嚬?,這樣在后面的面試中其實(shí)還是比較危險(xiǎn)的。
所以設(shè)計(jì)流程和方法需要多維度去靈活運(yùn)用,而不是拿著一個(gè)套路走遍天下,今天你學(xué)廢了嗎?
#專欄作家#
應(yīng)駿,人人都是產(chǎn)品經(jīng)理專欄作家,公眾號(hào):應(yīng)謀鬼計(jì)(shejishiyj)
本文由 @應(yīng)駿 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來(lái)自Unsplash,基于CC0協(xié)議
沒(méi)太看懂原來(lái)的懸浮至底部的購(gòu)物車改成了固定于底部,有什么區(qū)別?
分析的內(nèi)容很多,但看到實(shí)際改版后的效果后就覺(jué)得作者太想當(dāng)然
終目的不是下單嗎????就算你是一款可以分享賺傭金的app,那你希望你分享的人繼續(xù)分享還是下單????這個(gè)分享放最右下角我完全看不懂,簡(jiǎn)直自作聰明
一款電商產(chǎn)品的產(chǎn)品目標(biāo)一定是訂單量,而不是你的分享量(不管是需要曝光量的初期還是已經(jīng)進(jìn)入穩(wěn)步階段的后期),你把分享按鈕放在最右下角真的合適嗎????
減少頁(yè)面按鈕,用戶更加專注購(gòu)買行為。
看到了兩個(gè)購(gòu)物車
他這個(gè)應(yīng)該是一個(gè)【加入購(gòu)物車】一個(gè)【查看購(gòu)物車】,有些相似,但功能不一樣,感覺(jué)【查看購(gòu)物車】可以省去不展示,因?yàn)榈撞繕?biāo)簽欄可以直接跳轉(zhuǎn)至【購(gòu)物車列表】。光展示【加入購(gòu)物車】就夠了。