6個小技巧，讓用戶體驗馬上好！
標簽：
網頁設計
2017.04.26
用戶體驗這個名詞已經被說爛了，大家應該都知道它有多重要!但你真的知道怎麼應用在你的網站或 app 上嗎？今天提供 6 個小技巧，讓產品使??用者體驗馬上好!
1.了解用戶怎麼閱讀網頁
我們可以透過眼動儀技術(Eyetracking)無幹擾的追蹤人眼球移動的過程。由研究得知，人們獲得資訊的模式大多不是深讀，而是掃視(scan)。眼動儀係統可以透過分析得知用戶會傾向看哪邊?動線為何?注視熱區(hot zone)在哪?最後產出熱像圖表(heat map)方fang便bian我wo們men來lai解jie讀du。有you趣qu的de是shi，大da多duo數shu用yong戶hu的de眼yan動dong模mo式shi都dou是shi由you左zuo上shang角jiao開kai始shi，然ran後hou移yi動dong到dao右you方fang，並bing再zai度du的de往wang下xia方fang第di二er個ge水shui平ping方fang向xiang移yi動dong，且qie覆fu蓋gai之zhi區qu域yu比bi第di一yi次ci還hai短duan，最zui後hou會hui掃sao視shi左zuo側ce垂chui直zhi區qu域yu。這zhe樣yang的de模mo式shi在zai熱re像xiang圖tu表biao會hui出chu現xian類lei似si"F"的形狀，因此研究員稱為F模式 F-pattern。
2.提供合適的可閱讀性與對比度
文字是與用戶溝通的重要方式之一，而文字區塊設計的首要重點就是一定要"可閱讀"(readable)，再zai來lai才cai是shi美mei感gan。另ling外wai，試shi著zhe讓rang文wen字zi區qu塊kuai之zhi間jian保bao持chi適shi當dang的de留liu白bai空kong間jian也ye可ke以yi幫bang助zhu閱yue讀du，並bing且qie提ti升sheng網wang站zhan質zhi感gan。最zui後hou，請qing在zai螢ying幕mu上shang測ce試shi各ge種zhong亮liang度du是shi否fou也ye能neng夠gou順shun利li的de閱yue讀du。
3.先體驗後注冊
別bie認ren為wei每mei個ge用yong戶hu都dou是shi愛ai你ni的de，在zai使shi用yong或huo購gou買mai你ni的de產chan品pin前qian都dou會hui乖guai乖guai的de注zhu冊ce會hui員yuan或huo提ti交jiao資zi料liao。他ta們men甚shen至zhi看kan到dao需xu要yao注zhu冊ce或huo提ti交jiao的de按an鈕niu就jiu會hui產chan生sheng厭yan惡e的de感gan覺jiao，並bing離li開kai這zhe討tao人ren厭yan的de頁ye麵mian。最zui好hao的de方fang式shi就jiu是shi了le解jie用yong戶hu真zhen正zheng的de需xu求qiu，提ti供gong他ta們men真zhen的de想xiang要yao的de服fu務wu或huo產chan品pin，讓rang他ta們men先xian體ti驗yan或huo選xuan擇ze他ta們men要yao的de產chan品pin，若ruo他ta們men滿man意yi了le自zi然ran會hui注zhu冊ce。
4.製定404錯誤頁麵
當伺服器找不到頁麵時，會出現404錯誤頁麵，千萬不要什麼事情也不做，讓網頁呈現404錯誤訊息的預設值。因為這是一個絕佳的機會可以設計與眾不同的頁麵，不論設計的方向是加強品牌的意象、展(zhan)現(xian)幽(you)默(mo)感(gan)或(huo)提(ti)供(gong)協(xie)助(zhu)都(dou)是(shi)對(dui)用(yong)戶(hu)體(ti)驗(yan)大(da)大(da)的(de)加(jia)分(fen)。但(dan)也(ye)別(bie)忘(wang)了(le)要(yao)試(shi)圖(tu)幫(bang)助(zhu)用(yong)戶(hu)找(zhao)到(dao)他(ta)們(men)搜(sou)尋(xun)的(de)頁(ye)麵(mian)，我(wo)們(men)可(ke)以(yi)透(tou)過(guo)教(jiao)導(dao)或(huo)鼓(gu)勵(li)的(de)方(fang)式(shi)讓(rang)用(yong)戶(hu)重(zhong)新(xin)搜(sou)尋(xun)或(huo)放(fang)置(zhi)超(chao)連(lian)結(jie)與(yu)聯(lian)絡(luo)訊(xun)息(xi)。試(shi)著(zhe)透(tou)過(guo)設(she)計(ji)404錯誤頁麵來降低傷害吧!說不定還可以贏得用戶的支持。
設計師們該如何設計404錯誤頁麵呢??可以參考這篇文章，絕對能讓你獲得許多靈感。
5.移動裝置的用戶體驗與 PC 不同
設計移動裝置的 app 時，一定要深入研究和觀察用戶的使用脈絡，例如他們會在哪裏使用你的 app？所處的環境為何?舉個例子, 相較於用戶使用PC，透tou過guo移yi動dong裝zhuang置zhi上shang你ni的de網wang站zhan時shi，他ta們men更geng容rong易yi因yin為wei周zhou遭zao所suo處chu的de環huan境jing而er分fen心xin，因yin此ci清qing晰xi的de文wen字zi與yu明ming顯xian的de按an鈕niu可ke讓rang用yong戶hu快kuai速su的de了le解jie或huo操cao作zuo你ni的de網wang站zhan，減jian少shao用yong戶hu分fen心xin而er錯cuo失shi網wang站zhan傳chuan達da的de訊xun息xi。
6.網站放影片不是萬能
不bu應ying該gai把ba網wang站zhan上shang的de影ying片pian當dang作zuo與yu用yong戶hu主zhu要yao的de溝gou通tong方fang式shi，因yin為wei用yong戶hu不bu願yuan意yi或huo是shi沒mei時shi間jian觀guan看kan，或huo網wang絡luo問wen題ti無wu法fa觀guan看kan時shi，網wang站zhan與yu用yong戶hu間jian將jiang會hui產chan生sheng巨ju大da鴻hong溝gou，最zui終zhong可ke能neng導dao致zhi失shi敗bai。所suo以yi請qing確que保bao在zai沒mei有you影ying片pian時shi，用yong戶hu也ye可ke以yi得de到dao所suo需xu的de資zi訊xun。
1.了解用戶怎麼閱讀網頁
我們可以透過眼動儀技術(Eyetracking)無幹擾的追蹤人眼球移動的過程。由研究得知，人們獲得資訊的模式大多不是深讀，而是掃視(scan)。眼動儀係統可以透過分析得知用戶會傾向看哪邊?動線為何?注視熱區(hot zone)在哪?最後產出熱像圖表(heat map)方fang便bian我wo們men來lai解jie讀du。有you趣qu的de是shi，大da多duo數shu用yong戶hu的de眼yan動dong模mo式shi都dou是shi由you左zuo上shang角jiao開kai始shi，然ran後hou移yi動dong到dao右you方fang，並bing再zai度du的de往wang下xia方fang第di二er個ge水shui平ping方fang向xiang移yi動dong，且qie覆fu蓋gai之zhi區qu域yu比bi第di一yi次ci還hai短duan，最zui後hou會hui掃sao視shi左zuo側ce垂chui直zhi區qu域yu。這zhe樣yang的de模mo式shi在zai熱re像xiang圖tu表biao會hui出chu現xian類lei似si"F"的形狀，因此研究員稱為F模式 F-pattern。
2.提供合適的可閱讀性與對比度
文字是與用戶溝通的重要方式之一，而文字區塊設計的首要重點就是一定要"可閱讀"(readable)，再zai來lai才cai是shi美mei感gan。另ling外wai，試shi著zhe讓rang文wen字zi區qu塊kuai之zhi間jian保bao持chi適shi當dang的de留liu白bai空kong間jian也ye可ke以yi幫bang助zhu閱yue讀du，並bing且qie提ti升sheng網wang站zhan質zhi感gan。最zui後hou，請qing在zai螢ying幕mu上shang測ce試shi各ge種zhong亮liang度du是shi否fou也ye能neng夠gou順shun利li的de閱yue讀du。
3.先體驗後注冊
別bie認ren為wei每mei個ge用yong戶hu都dou是shi愛ai你ni的de，在zai使shi用yong或huo購gou買mai你ni的de產chan品pin前qian都dou會hui乖guai乖guai的de注zhu冊ce會hui員yuan或huo提ti交jiao資zi料liao。他ta們men甚shen至zhi看kan到dao需xu要yao注zhu冊ce或huo提ti交jiao的de按an鈕niu就jiu會hui產chan生sheng厭yan惡e的de感gan覺jiao，並bing離li開kai這zhe討tao人ren厭yan的de頁ye麵mian。最zui好hao的de方fang式shi就jiu是shi了le解jie用yong戶hu真zhen正zheng的de需xu求qiu，提ti供gong他ta們men真zhen的de想xiang要yao的de服fu務wu或huo產chan品pin，讓rang他ta們men先xian體ti驗yan或huo選xuan擇ze他ta們men要yao的de產chan品pin，若ruo他ta們men滿man意yi了le自zi然ran會hui注zhu冊ce。
4.製定404錯誤頁麵
當伺服器找不到頁麵時，會出現404錯誤頁麵，千萬不要什麼事情也不做，讓網頁呈現404錯誤訊息的預設值。因為這是一個絕佳的機會可以設計與眾不同的頁麵，不論設計的方向是加強品牌的意象、展(zhan)現(xian)幽(you)默(mo)感(gan)或(huo)提(ti)供(gong)協(xie)助(zhu)都(dou)是(shi)對(dui)用(yong)戶(hu)體(ti)驗(yan)大(da)大(da)的(de)加(jia)分(fen)。但(dan)也(ye)別(bie)忘(wang)了(le)要(yao)試(shi)圖(tu)幫(bang)助(zhu)用(yong)戶(hu)找(zhao)到(dao)他(ta)們(men)搜(sou)尋(xun)的(de)頁(ye)麵(mian)，我(wo)們(men)可(ke)以(yi)透(tou)過(guo)教(jiao)導(dao)或(huo)鼓(gu)勵(li)的(de)方(fang)式(shi)讓(rang)用(yong)戶(hu)重(zhong)新(xin)搜(sou)尋(xun)或(huo)放(fang)置(zhi)超(chao)連(lian)結(jie)與(yu)聯(lian)絡(luo)訊(xun)息(xi)。試(shi)著(zhe)透(tou)過(guo)設(she)計(ji)404錯誤頁麵來降低傷害吧!說不定還可以贏得用戶的支持。
設計師們該如何設計404錯誤頁麵呢??可以參考這篇文章，絕對能讓你獲得許多靈感。
5.移動裝置的用戶體驗與 PC 不同
設計移動裝置的 app 時，一定要深入研究和觀察用戶的使用脈絡，例如他們會在哪裏使用你的 app？所處的環境為何?舉個例子, 相較於用戶使用PC，透tou過guo移yi動dong裝zhuang置zhi上shang你ni的de網wang站zhan時shi，他ta們men更geng容rong易yi因yin為wei周zhou遭zao所suo處chu的de環huan境jing而er分fen心xin，因yin此ci清qing晰xi的de文wen字zi與yu明ming顯xian的de按an鈕niu可ke讓rang用yong戶hu快kuai速su的de了le解jie或huo操cao作zuo你ni的de網wang站zhan，減jian少shao用yong戶hu分fen心xin而er錯cuo失shi網wang站zhan傳chuan達da的de訊xun息xi。
6.網站放影片不是萬能
不bu應ying該gai把ba網wang站zhan上shang的de影ying片pian當dang作zuo與yu用yong戶hu主zhu要yao的de溝gou通tong方fang式shi，因yin為wei用yong戶hu不bu願yuan意yi或huo是shi沒mei時shi間jian觀guan看kan，或huo網wang絡luo問wen題ti無wu法fa觀guan看kan時shi，網wang站zhan與yu用yong戶hu間jian將jiang會hui產chan生sheng巨ju大da鴻hong溝gou，最zui終zhong可ke能neng導dao致zhi失shi敗bai。所suo以yi請qing確que保bao在zai沒mei有you影ying片pian時shi，用yong戶hu也ye可ke以yi得de到dao所suo需xu的de資zi訊xun。
