移動(dòng)端用戶(hù)體驗(yàn)結(jié)構(gòu)的橫縱向互通
文章從橫向和縱向兩個(gè)維度出發(fā),以若干APP為案例,來(lái)剖析一下移動(dòng)端用戶(hù)體驗(yàn)的結(jié)構(gòu)層設(shè)計(jì)。
相信看過(guò)《用戶(hù)體驗(yàn)要素》的朋友,對(duì)用戶(hù)體驗(yàn)五要素應(yīng)該不會(huì)陌生。在五個(gè)用戶(hù)體驗(yàn)要素中,結(jié)構(gòu)層重點(diǎn)闡述了產(chǎn)品的交互設(shè)計(jì)和信息架構(gòu),而在產(chǎn)品的整個(gè)規(guī)劃中,結(jié)構(gòu)層的設(shè)計(jì)也起到了承上啟下的作用,意義非凡。
在功能與內(nèi)容日益豐富的今天,如何做好交互設(shè)計(jì)和信息架構(gòu)規(guī)劃,對(duì)產(chǎn)品經(jīng)理是一個(gè)不小的挑戰(zhàn)。今天我們就以橫向和縱向兩個(gè)維度出發(fā),以若干APP為案例,來(lái)剖析一下移動(dòng)端用戶(hù)體驗(yàn)的結(jié)構(gòu)層設(shè)計(jì)。
分門(mén)別類(lèi)
在說(shuō)橫縱向互通之前,我們還是先來(lái)看幾張截圖:
從這些截圖中可以看到,無(wú)論從功能還是內(nèi)容方面看,現(xiàn)在的APP的結(jié)構(gòu)都愈發(fā)復(fù)雜。在這如叢林一般的應(yīng)用里,確保用戶(hù)不迷路,是我們要實(shí)現(xiàn)的目標(biāo)。
要想讓用戶(hù)不迷路,首先我們要做的是對(duì)信息進(jìn)行分類(lèi),如上面滴滴出行的截圖,快車(chē)、出租車(chē)、專(zhuān)車(chē)、順風(fēng)車(chē)等分類(lèi)清晰可見(jiàn),用戶(hù)根據(jù)自己所需進(jìn)入相應(yīng)的頻道即可。
再比如京東的截圖,它有兩個(gè)分類(lèi)的地方,一個(gè)分類(lèi)的地方是首頁(yè)Banner圖下方的地方,另一個(gè)分類(lèi)的地方則是底部導(dǎo)航“分類(lèi)”頁(yè)面。兩個(gè)分類(lèi)所呈現(xiàn)的內(nèi)容是不一樣的,這也就告訴我們,一個(gè)平臺(tái)上有時(shí)候是需要有多個(gè)分類(lèi)維度的。
當(dāng)我們梳理好類(lèi)別后,就需要考慮交互設(shè)計(jì)的問(wèn)題了,而橫縱向的互通則是核心設(shè)計(jì)之一。這主要是因?yàn)椋m然類(lèi)別需要清晰地劃分,但在空間有限的移動(dòng)端,只有相互之間是互通的,才能確保用戶(hù)的體驗(yàn)是通暢、高效的。
縱向互通
我們先來(lái)看縱向的互通。在同一類(lèi)別里,也會(huì)有層次,用戶(hù)操作步驟越多,層次可能就越多。而縱向的互通,就是要打通層次之間的隔閡,讓用戶(hù)可以在不同的層次之間自由切換。這里我們來(lái)看一下豆瓣的截圖:
從截圖中可以看到,當(dāng)我們進(jìn)入“廣播”板塊時(shí),產(chǎn)品會(huì)推薦用戶(hù)關(guān)注某些人。對(duì)此用戶(hù)可以選擇關(guān)注,也可以選擇不關(guān)注。如果不關(guān)注,用戶(hù)就可以點(diǎn)擊下方的“跳過(guò)”(不過(guò)沒(méi)有弄明白“選好了,去玩廣播”是什么作用),頁(yè)面就會(huì)跳轉(zhuǎn)到個(gè)人發(fā)布廣播頁(yè)面:
在發(fā)布廣播頁(yè)面,用戶(hù)可以選擇發(fā)布廣播,也可以再點(diǎn)擊“發(fā)現(xiàn)更多”回到推薦廣播頁(yè)面,這的操作就是一種縱向互通的設(shè)計(jì)。值得關(guān)注的是,在發(fā)布廣播頁(yè)面,是沒(méi)有返回按鈕可以點(diǎn)擊的,這印證了縱向互通設(shè)計(jì)的重要性。
也許有人會(huì)覺(jué)得,如果有返回按鈕,那不就同樣能實(shí)現(xiàn)互通嘛。事實(shí)上,返回按鈕是目前應(yīng)用最常用的互通設(shè)計(jì)。不過(guò)對(duì)于層級(jí)少的應(yīng)用,用戶(hù)體驗(yàn)是可以接受的,但對(duì)于層級(jí)多的應(yīng)用,用戶(hù)體驗(yàn)就會(huì)變得非常差。一個(gè)方面,設(shè)想用戶(hù)需要點(diǎn)擊四五次返回按鈕,才能去到想去的頁(yè)面,大家覺(jué)得用戶(hù)會(huì)高興地去嗎?
另一個(gè)層面,也涉及用戶(hù)引導(dǎo)的問(wèn)題。就如豆瓣的例子來(lái)講,產(chǎn)品之所以這樣設(shè)計(jì),是希望用戶(hù)關(guān)注更多人的。如果沒(méi)有這些引導(dǎo)元素的存在,會(huì)有多少人會(huì)想到要返回去選擇關(guān)注別人,是個(gè)未知數(shù)。進(jìn)一步從用戶(hù)心理上講,如果這不是他的核心目的,他為什么要選擇去做呢?
橫向互通
縱向講的是同類(lèi)別不同層次的互通,而橫向講的則是不同類(lèi)別之間的互通。關(guān)于橫向互通,我們來(lái)看網(wǎng)易新聞的截圖:
我們會(huì)發(fā)現(xiàn)網(wǎng)易新聞底部導(dǎo)航分為首頁(yè)、要聞、直播、視頻、我五大部分,然后我們?cè)倏础笆醉?yè)”頭部導(dǎo)航,其中也包含了要聞、直播、視頻,點(diǎn)擊去內(nèi)容與下方的導(dǎo)航內(nèi)容是一樣的。
我們?cè)賮?lái)看高德地圖的截圖:
當(dāng)我們?cè)谑醉?yè)點(diǎn)擊車(chē)輛標(biāo)志時(shí),跳轉(zhuǎn)的頁(yè)面是有叫車(chē)服務(wù)的:
而我們?cè)谑醉?yè)點(diǎn)擊定位按鈕,同樣是有叫車(chē)服務(wù)的:
除了這兩種典型橫向設(shè)計(jì)以外,還有一種常用的橫向設(shè)計(jì),那就是首頁(yè)。顧名思義,首頁(yè)就是用戶(hù)首先看到的頁(yè)面,因此首頁(yè)必然要實(shí)現(xiàn)兩個(gè)目標(biāo):一是要吸引住用戶(hù);二是要為用戶(hù)關(guān)心的內(nèi)容提供入口。這兩個(gè)目標(biāo)也決定了,首頁(yè)肯定是橫向互通的集散地。這里我們舉一個(gè)極端的例子來(lái)說(shuō)明一下。我們來(lái)看得到的首頁(yè)截圖:
我們看到,得到下方的導(dǎo)航,除“發(fā)現(xiàn)”以外,其他都是登錄用戶(hù)入口(得到只有登錄才能使用)。也就是說(shuō)對(duì)平臺(tái)內(nèi)容的展示,全部集中在“發(fā)現(xiàn)”內(nèi)。這里我們可以理解發(fā)現(xiàn)就是一個(gè)大的導(dǎo)航,然后用戶(hù)想去哪里,都要從這里進(jìn)。
不過(guò),一般的應(yīng)用都會(huì)提供若干個(gè)主入口,例如喜馬拉雅FM。除了首頁(yè)(和得到“發(fā)現(xiàn)”性質(zhì)一樣)以外,還提供了“發(fā)現(xiàn)”欄目。
事實(shí)上,體驗(yàn)過(guò)得到APP,筆者也是不建議把所有的入口都集中在首頁(yè)里。因?yàn)閺氖醉?yè)進(jìn)入各欄目頁(yè),再到詳情及學(xué)習(xí)頁(yè)面,用戶(hù)都必須通過(guò)一層一層的返回操作,才能實(shí)現(xiàn)。這樣的用戶(hù)體驗(yàn),真的不能說(shuō)好。
結(jié)語(yǔ)
本質(zhì)上,用戶(hù)體驗(yàn)設(shè)計(jì)是要提高用戶(hù)使用產(chǎn)品的效能,進(jìn)而實(shí)現(xiàn)用戶(hù)滿(mǎn)意。正因?yàn)槿绱?,無(wú)論是橫向互通設(shè)計(jì),還是縱向互通設(shè)計(jì),都需要洞察用戶(hù)的真實(shí)使用場(chǎng)景。在用戶(hù)場(chǎng)景中找到用戶(hù)體驗(yàn)設(shè)計(jì)點(diǎn),出現(xiàn)在用戶(hù)最需要的地方。
作者:古木,微信公眾號(hào):E木筆記
本文由 @古木 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來(lái)自PEXELS,基于CC0協(xié)議
Mark
哈哈哈
“如上面滴滴出行的截圖” 哪有截圖?
好差的用戶(hù)體驗(yàn)
??這個(gè)確實(shí)忘了放了…