如何在你改變UI界面的時候，不會讓用戶不滿意呢？本文作者與你分享一些技能，希望可以幫你在改變產(chǎn)品界面的同時，又能使你的用戶對此改變感到滿意。

有時，優(yōu)化網(wǎng)站或移動應用的界面會讓用戶感到崩潰。人們可能會對新的配色方案、元素的定位或其他類似的東西感到失望。顯然，用戶這樣的反應并不是你所期望的界面優(yōu)化。

即使是像Facebook、Instagram和Spotify這樣的大型成功公司，也經(jīng)常受到負面的反饋。例如，在2017年2月，Spotify更新了它的網(wǎng)頁播放器，引入了新的布局、新的搜索功能和帶藝術范的頁面。

這一改變導致許多用戶在社交媒體上表達了自己的不滿。一位推特用戶甚至寫道: “哦，太酷了，他們升級了Spotify網(wǎng)頁播放器，讓它變得更糟糕了!?”太棒了!”

那么，如何在你改變UI界面的時候，不會讓用戶不滿意呢？下面，我們一起來看看有哪些技能可以幫你在改變產(chǎn)品界面的同時，又能使你的用戶對此改變感到滿意。

人們是如何感知信息的

現(xiàn)如今，界面有了多樣性，用戶每次遇到新的(或更新的)界面都必須學習。因此，要用戶花時間尋找功能時就會讓他們感覺不愉快。

阿爾托大學(Aalto University)最近進行了一項研究，他們對視覺搜索進行了建模，試圖找出人們是如何獲取新的或改變的界面。

結果，研究人員認為，用戶快速學習的關鍵在于三個因素：長期記憶，短期視覺記憶和眼球運動。知道人們?nèi)绾胃兄曈X信息使UI / UX設計人員能夠創(chuàng)建出不妨礙用戶找到自己想要功能的高效界面（和微調(diào)的UI界面）。

包括尼爾森諾曼集團(Nielsen Norman Group)在內(nèi)的多家研究公司對人們是如何瀏覽一頁的信息以及他們的眼睛如何移動的問題進行了研究。據(jù)該小組的研究表明，用戶通常在閱讀或觀察內(nèi)容時遵循以下三種模式。

古騰堡圖表

古騰堡圖表反映了西方的閱讀文化:?從上到下，從左到右。根據(jù)古騰堡圖表，頁面上的信息應該被分成四個象限，讓用戶更容易感知豐富的文本內(nèi)容：

古騰堡圖介紹了內(nèi)容排列原理，闡明了如何讓用戶更容易找到相關內(nèi)容。

如你所見，用戶選擇先瀏覽左上角的象限;這個象限被稱為主視覺區(qū)。你應該把你的關鍵內(nèi)容，比如標題和標志，放在這個位置。

接下來，用戶的眼睛移動到強烈的休閑區(qū)域?？煽紤]在本區(qū)域中提供某種后續(xù)內(nèi)容，例如你之前表達的想法的圖片說明。

然后，用戶就會進入弱的休閑區(qū)，這個區(qū)域不太可能會引起人們的注意。它是用戶在閱讀路途上的“休息”區(qū)域。最后，在右下角的一個終端區(qū)域?qū)⒁龑в脩舻贸龊虾踹壿嫷慕Y論。建議將CTA(行為召喚)在此區(qū)域中以文本、視頻或鏈接的形式出現(xiàn)。

在界面上使用古登堡圖表可讓用戶把握閱讀節(jié)奏和增強對閱讀的理解。這種模式還能讓你洞察到在那些最有可能被閱讀或注意的地方放置重要元素。

F模式

F模式表示元素在頁面上的類似F的定位。據(jù)尼爾森·諾曼（Nielsen Norman）的研究顯示，人們通過橫向移動眼睛開始接觸內(nèi)容。接下來，他們掃描一條垂直線，試圖找到他們感興趣的點，如果他們找到他們想看的內(nèi)容，他們會繼續(xù)橫向瀏覽內(nèi)容。

Nielsen Norman對200名參與者進行了研究，結果顯示其中一種流行的瀏覽內(nèi)容模式是F型的。

為了提高用戶體驗，可以使用諸如要點、排版、彩色按鈕、高亮文本等元素。這些元素賦予界面視覺權重，并指出頁面中重要的點。

使用F模式可以確保頁面上有一個高效的視覺層次結構，這樣用戶就可以快速瀏覽內(nèi)容并快速找到相應問題的解決方案。

例如，Medium之前的布局利用了F模式，將主要內(nèi)容(博客文章)放在左邊，同時把側邊欄放在右邊。側邊欄中包含了非主要內(nèi)容，但仍然是相關內(nèi)容，包括每日摘要、標簽和“關于我們”和“使用條款”的鏈接。

Medium之前的排版就是F模式的鮮明案例

現(xiàn)如今，Medium已經(jīng)沒在使用帶有圖片預覽和大標題的經(jīng)典線程模式。相反，新的博客文章以列表形式顯示，因此他們將用戶的注意力吸引到文章的作者，而不僅僅是圖片預覽。

Z模式

Z模式被非官方認為是登陸頁面的王者，因為它涵蓋了視覺層次結構，內(nèi)容結構和CTA等重要方面。與更適合文本或展現(xiàn)繁重內(nèi)容頁面的F模式不同，Z模式有效地將用戶的注意力集中在帶最小副本的登錄頁面上。

你可能已經(jīng)猜到，這個模式代表了用戶眼睛的類似于z圖案的移動。

簡約的界面可以從Z模式中獲益，它以一致的布局和視覺上令人滿意的內(nèi)容結構為用戶帶來愉悅。

在使用z模式設計時，應遵循以下結構：

1. 頂部的水平線應該包括醒目的內(nèi)容和元素，比如logo和導航欄(這樣用戶很快就能訪問網(wǎng)站的相應頁面)。
2. 遵循經(jīng)典的講故事方式，對角線應該向用戶介紹主要內(nèi)容，包括主要內(nèi)容，吸引注意力的圖片，幻燈片等。
3. 最后，一條較低的水平線應該有一個CTA（行為召喚），它可以刺激用戶執(zhí)行某些動作，比如注冊、訂閱或購買。

底部線條：

視覺模式的知識使設計師理解用戶是如何感知和識別頁面內(nèi)容的。成功地應用這些模式使設計者能夠構建和優(yōu)化出使用戶愉悅的界面，并創(chuàng)造整體的易用性。

如何防止用戶對界面優(yōu)化的不滿

一個網(wǎng)站或應用程序的成功改版是通過深入的研究，包括各種可用性測試來實現(xiàn)的?？捎眯詼y試旨在評估新系統(tǒng)的設計和功能或具有真實用戶的現(xiàn)有新系統(tǒng)。以下是設計人員采用的一些有效的測試技術：

A/B測試

A / B測試，或對比測試，是一種比較兩個不同概念的方法，如按鈕、CTAs、配色方案和廣告橫幅。A / B測試的目的是找出哪些選項是最成功的;?例如，哪個按鈕點擊的次數(shù)最多。

每一個A / B測試的案例都是獨一無二的。測試的元素取決于你的業(yè)務目標。雖然如此，在用戶界面設計中，通常需要測試以下元素：

• 復制（產(chǎn)品說明，按鈕文字等）
• 號召性用語（例如，他們的刊登位置或措詞）
• 注冊表單
• 布局
• 圖片
• 配色方案

請謹記，A / B測試必須同時執(zhí)行，而不是連續(xù)執(zhí)行，因此你可以獲得不受趨勢或行為變化影響的相關結果。

做A / B測試可以幫助你避免用戶的不滿，甚至可以通過對界面進行必要的調(diào)整來幫助你獲得更好的轉(zhuǎn)化率。

Google Analytics,?Optimizely和CrazyEgg這些在線工具可以幫助你進行A / B測試。

走廊測試

走廊測試是一種非正式的利用真實用戶來測試你的設計的方法。一個走廊測試需找到一個擁擠的區(qū)域，然后，簡單地要求路人對你的某一個設計界面進行測試和評估。

當?shù)氐男前涂丝梢允且粋€好的去處：一般來說，人們在舒適的環(huán)境中與陌生人互動的可能性更大。此外，在星巴克，你可以給幫你測試的人買一個松餅或一杯咖啡作為獎勵，這還可以幫你多爭取幾分鐘的寶貴時間。

和你的同事一起測試一個設計也是一種方法。在這種情況下，你可以快速地在走廊上或飲水機旁對你的想法進行測試。此外，有些人更喜歡和他們認識的人交往，而不是和陌生人在街上交往。

要想成功地進行測試，你需要事先計劃好一切。準備布局，測試產(chǎn)品，問卷，以及在測試過程中任何可能需要的東西。另外，請記得向參與測試的用戶解釋測試的目的，這樣他們就能完全參與到這個過程中來。

當你展示你的設計時，你可能會問以下問題：

• 你明白這個標題/名字嗎?
• 你覺得按下這個按鈕后會發(fā)生什么?
• 你如何評價這個界面的外觀和感覺?

雖然走廊測試是一種測試用戶體驗設計的首選方法，它可以檢查一個界面是否易于導航，但它也常被用于UI設計測試。通過對UI設計的測試，你可以找到界面中哪些元素會讓用戶困惑，以及你的用戶是如何構思整個系統(tǒng)界面的。

五秒鐘的測試

5秒測試（也稱為印象測試）的目標是引出用戶對界面的第一印象，并了解一個網(wǎng)站或應用程序能否將其目的傳達給來訪者。

盡管此測試的名稱意味著在界面評估上只花費5秒鐘，但有時會根據(jù)界面的視覺復雜性將時間延長到10或15秒。

在5秒的測試過程中，用戶查看界面并嘗試盡可能多地去記住界里面的元素。之后，你可以問他們一系列問題，這可以幫助你了解他們的反應：

• 你對這個網(wǎng)站/應用程序的外觀和感覺是怎樣的?
• 這個網(wǎng)站/應用程序是關于什么的?
• 界面中的什么元素吸引了你的注意力?
• 在這個網(wǎng)站/應用程序中，你最喜歡的是什么?
• 等等

請記住，作為詳細研究的一部分，使用5秒鐘的測試是有效的，因為這個測試通常是為了評估一個可視的UI組件而不是整個界面。

像UsabilityHub和Userzoom這樣的工具可以幫助你有效地進行5秒的測試。

結語

全球化的公司的實例告訴我們，用戶界面的優(yōu)化可能會讓用戶感到不滿。但是，當你的UI界面需要做出重大優(yōu)化而你忽視的時候，一樣會讓你的用戶感到不滿。

為了使優(yōu)化的界面對用戶不產(chǎn)生負作用，你可以采用研究策略。去做可用性測試和進行用戶研究，這將幫助你做出必要的調(diào)整，而不會讓你的用戶離你而去。

原文作者：Maryna Zavyiboroda

原文地址：https://speckyboy.com/annoying-ui-changes/

以上內(nèi)容由Mockplus團隊翻譯整理，僅供學習交流。

本文由 @Mockplus 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Pexels，基于 CC0 協(xié)議