生活中很多人會(huì)調(diào)侃道:“每天手指在手機(jī)屏幕上滑動(dòng)的距離比走路的距離還長(zhǎng)削祈!”隨著指尖上的瀏覽融入到生活的方方面面,如何讓用戶手指滑動(dòng)的更有效率肮砾,在滑動(dòng)手指的同時(shí)看到更多想看的內(nèi)容诀黍,而不白白滑動(dòng)手指,是提升手機(jī)APP用戶體驗(yàn)的重要方面仗处。為深入理解人們的APP瀏覽行為眯勾,我們使用專門用于追蹤移動(dòng)設(shè)備注視行為的眼動(dòng)儀對(duì)用戶瀏覽社交APP的習(xí)慣進(jìn)行了研究,試圖更加直觀地展示人們?yōu)g覽APP的特點(diǎn)婆誓,以及由此引發(fā)的對(duì)于優(yōu)化APP瀏覽體驗(yàn)設(shè)計(jì)的思考吃环。
手機(jī)與PC瀏覽,區(qū)別在哪里洋幻?
我們?cè)群筢槍?duì)QQ空間PC版和QQ空間手機(jī)版進(jìn)行了眼動(dòng)測(cè)試郁轻,讓用戶登錄自己的QQ空間自由瀏覽好友動(dòng)態(tài),對(duì)比兩次測(cè)試的結(jié)果(如下圖)文留,可以發(fā)現(xiàn)好唯,相比于使用電腦瀏覽好友動(dòng)態(tài),用戶在手機(jī)上瀏覽好友動(dòng)態(tài)時(shí)手指滑動(dòng)更頻繁燥翅,經(jīng)常是在滑動(dòng)手指的同時(shí)瀏覽內(nèi)容骑篙。在進(jìn)行基于電腦網(wǎng)頁的眼動(dòng)數(shù)據(jù)分析時(shí),我們主要關(guān)注用戶的注視焦點(diǎn)和軌跡权旷,但對(duì)于手機(jī)來說替蛉,只分析用戶看了什么和不看什么是不夠的贯溅,有必要兼顧眼睛注視和手指滑動(dòng),來分析用戶的瀏覽特征躲查,并評(píng)估用戶的瀏覽效率它浅。
在對(duì)QQ空間手機(jī)版進(jìn)行眼動(dòng)測(cè)試的過程中,我們發(fā)現(xiàn)镣煮,有時(shí)用戶明明對(duì)某一條動(dòng)態(tài)感興趣姐霍,卻只是滑動(dòng)屏幕而不看上面的內(nèi)容,直到把內(nèi)容調(diào)整到一定范圍內(nèi)的時(shí)候才開始看典唇,這種情境顯然降低了用戶的瀏覽效率镊折,增加了手指的滑動(dòng)距離,卻沒有因此看到更多的內(nèi)容(如下圖)介衔。在該研究中恨胚,我們將這種情景稱為“低效滑動(dòng)”。
低效滑動(dòng)的情景讓我們不禁思考:既然用戶不是自上而下將整個(gè)屏幕的內(nèi)容瀏覽完之后才向上滑動(dòng)屏幕炎咖,那么赃泡,用戶的注視范圍究竟有多大?如何基于注視范圍來優(yōu)化設(shè)計(jì)以減少用戶的低效滑動(dòng)乘盼?用戶的注視范圍能否改變升熊?
指尖上的注視范圍有多大?
以QQ空間手機(jī)版為例绸栅,我們使用Tobii X120眼動(dòng)儀對(duì)24名用戶進(jìn)行了眼動(dòng)測(cè)試级野,讓用戶使用手機(jī)登錄自己的QQ空間自由瀏覽好友動(dòng)態(tài),結(jié)果表明粹胯,注視范圍的長(zhǎng)度占手機(jī)屏幕長(zhǎng)度(不含頂bar和底bar)的比例約為75.0%(如下圖)蓖柔。
說明:
1、每張圖均由參加相應(yīng)終端測(cè)試的6名用戶的注視熱點(diǎn)圖疊加而成矛双,獨(dú)立版是指QQ空間的客戶端渊抽,結(jié)合版是指從QQ上的入口進(jìn)入看到的QQ空間;
2议忽、在熱點(diǎn)圖中懒闷,顏色越深,代表關(guān)注度越高栈幸。對(duì)于疊加而成的熱點(diǎn)圖愤估,屏幕背景只是為了示意屏幕的大小,熱點(diǎn)覆蓋的區(qū)域代表注視的范圍速址,不代表實(shí)際看到的內(nèi)容玩焰;
3、標(biāo)注的紅框是為了凸顯注視范圍的邊界芍锚。
有限的注視范圍與圖文并茂的APP設(shè)計(jì)
在瀏覽一條感興趣的動(dòng)態(tài)的過程中昔园,當(dāng)用戶想看的內(nèi)容沒出現(xiàn)/沒完全出現(xiàn)在注視范圍內(nèi)時(shí)蔓榄,會(huì)通過用手指滑動(dòng)屏幕來調(diào)整這些內(nèi)容的位置,定位好之后才開始瀏覽默刚。因此甥郑,把用戶想看的內(nèi)容顯示在其注視范圍內(nèi),可以減少低效滑動(dòng)的發(fā)生荤西。
圖文并茂是社交APP內(nèi)容的主要呈現(xiàn)形式澜搅,其中,圖片占據(jù)了屏幕的較大面積邪锌,且扮演著重要的角色勉躺,無論是好友類動(dòng)態(tài)中的生活見聞?wù)掌€是讓資訊類動(dòng)態(tài)更加生動(dòng)直觀的圖片觅丰,都是用戶用來判斷對(duì)動(dòng)態(tài)是否感興趣的關(guān)鍵要素饵溅,也是瀏覽感興趣的動(dòng)態(tài)時(shí)重點(diǎn)瀏覽的內(nèi)容。由于用戶的注視范圍有限舶胀,在對(duì)動(dòng)態(tài)中文字和圖片的高度進(jìn)行設(shè)計(jì)時(shí)概说,應(yīng)注意哪些問題呢碧注?
第一嚣伐,圖片為豎圖時(shí)高度控制在注視范圍內(nèi)。在單條動(dòng)態(tài)中萍丐,橫圖的高度通常不會(huì)超過注視范圍轩端,用戶不需產(chǎn)生低效滑動(dòng)就可以完整瀏覽文字和圖片。但對(duì)于豎圖逝变,則高度不宜過長(zhǎng)基茵,應(yīng)控制在注視范圍內(nèi)。當(dāng)圖片沒有完全展示在注視范圍內(nèi)時(shí)壳影,用戶看完文字就會(huì)上滑屏幕拱层,其間不會(huì)注視圖片內(nèi)容,將圖片定位好后宴咧,通常是把圖片的頂部與屏幕最上方對(duì)齊根灯,才開始瀏覽圖片,這不僅給用戶瀏覽圖片帶來了麻煩掺栅,而且當(dāng)用戶想再次看文字的時(shí)候烙肺,還要再次下滑屏幕才能看到文字。
第二氧卧,文字較長(zhǎng)時(shí)展開部分文字桃笙,將文字和圖片的總高度控制在注視范圍內(nèi)。對(duì)于文字較長(zhǎng)的圖文并茂動(dòng)態(tài)沙绝,用戶在手機(jī)上通常通過標(biāo)題搏明、圖片來快速判斷自己對(duì)動(dòng)態(tài)是否感興趣鼠锈,而對(duì)大段文字摘要的關(guān)注度較低。有時(shí)用戶沒有被標(biāo)題吸引星著,滑動(dòng)屏幕直接略過文字摘要脚祟,當(dāng)該條動(dòng)態(tài)中的圖片出現(xiàn)在屏幕上后被圖片吸引,然后點(diǎn)擊詳情頁閱讀全文强饮。因此由桌,將較長(zhǎng)的文字部分收起,把文字和圖片的高度控制在注視范圍內(nèi)邮丰,可減少用戶略過文字時(shí)產(chǎn)生的低效滑動(dòng)行您。
思考:用戶的注視范圍是否可以改變?
通過上文分析用戶瀏覽社交APP內(nèi)容時(shí)的特點(diǎn)可知剪廉,用戶的注視范圍與圖文并茂類動(dòng)態(tài)的設(shè)計(jì)有著密不可分的關(guān)系娃循。那么,對(duì)于不同的社交APP斗蒋,用戶的注視范圍是固定的嗎捌斧?
在對(duì)QQ空間手機(jī)版進(jìn)行眼動(dòng)測(cè)試的同時(shí),我們也針對(duì)Facebook手機(jī)版用戶進(jìn)行了眼動(dòng)測(cè)試泉沾,讓6名用戶自由瀏覽Facebook捞蚂,得到用戶使用Facebook時(shí)的注視范圍(如下圖)。
Facebook的注視范圍的長(zhǎng)度占手機(jī)屏幕長(zhǎng)度(不含頂bar和底bar)的比例為87%跷究,長(zhǎng)于QQ空間手機(jī)版注視范圍的長(zhǎng)度姓迅。為了更好地分析注視范圍的形成,我們也對(duì)用戶瀏覽單條動(dòng)態(tài)時(shí)的注視情況進(jìn)行了研究俊马。Facebook的動(dòng)態(tài)是卡片式設(shè)計(jì)丁存,兩條動(dòng)態(tài)之間的間隔較為明顯,用戶在瀏覽一條動(dòng)態(tài)時(shí)柴我,通常將其滑到屏幕頂端后開始瀏覽解寝,加之文字和圖片的總高度在一屏之內(nèi),用戶可以在一屏內(nèi)看到圖片的底邊艘儒,這使得用戶在瀏覽一條自己感興趣的動(dòng)態(tài)的過程中聋伦,可以直接在一屏內(nèi)完整地瀏覽文字和圖片,很少發(fā)生看完文字便開始滑動(dòng)屏幕來調(diào)整圖片位置的情況彤悔,因而使得注視范圍的長(zhǎng)度增加嘉抓。
由此,我們推斷晕窑,在使用社交APP時(shí)抑片,用戶的注視范圍并不是固定的,通過設(shè)計(jì)上的改變可以擴(kuò)大用戶的注視范圍杨赤,這不僅可以更好地利用了屏幕的大小敞斋,也可以減少用戶的低效滑動(dòng)截汪,提高瀏覽效率。當(dāng)然植捎,這只是對(duì)比QQ空間手機(jī)版和Facebook手機(jī)版得到的推論衙解,注視范圍受哪些設(shè)計(jì)元素的影響、設(shè)計(jì)上的改變對(duì)注視范圍的具體影響機(jī)制如何都是值得進(jìn)一步深入研究的問題焰枢。
小結(jié):本文主要揭示了用戶瀏覽社交APP的特點(diǎn)蚓峦,并試圖從瀏覽體驗(yàn)的視角為APP的設(shè)計(jì)帶來一些啟發(fā)。針對(duì)用戶的注視范圍和低效滑動(dòng)問題济锄,如何通過設(shè)計(jì)上的改變來擴(kuò)大注視范圍暑椰、減少低效滑動(dòng),是設(shè)計(jì)社交APP中動(dòng)態(tài)的呈現(xiàn)方式時(shí)值得思考的問題荐绝。與此同時(shí)一汽,對(duì)于其他類型的APP(如資訊類等),用戶的注視范圍具有什么特點(diǎn)低滩?與社交APP注視范圍的異同在哪里召夹?是否可以通過對(duì)比不同類型APP的注視范圍總結(jié)出一些完善APP瀏覽體驗(yàn)設(shè)計(jì)的準(zhǔn)則?對(duì)于這些問題恕沫,我們將會(huì)持續(xù)地開展相關(guān)研究去尋找答案监憎。
(本文轉(zhuǎn)自騰訊ISUX)