優化UI界面會惹怒用戶?你應該這麼做

来源:http://www.cnblogs.com/thomas2/archive/2017/08/27/7439985.html
-Advertisement-
Play Games

有時候在優化UI界面時,會惹怒用戶。那麼,如何有效的去避免呢,我們來一起看看有哪些優化UI界面的方法。 ...


以下內容由Mockplus團隊翻譯整理,僅供學習交流,Mockplus是更快更簡單的原型設計工具

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

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

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

那麼,如何在你改變UI界面的時候,不會讓用戶不滿意呢?下麵,我們一起來看看有哪些技能可以幫你在改變產品界面的同時,又能使你的用戶對此改變感到滿意。

人們是如何感知信息的

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

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

結果,研究人員認為,用戶快速學習的關鍵在於三個因素:長期記憶,短期視覺記憶和眼球運動。知道人們如何感知視覺信息使UI / UX設計人員能夠創建出不妨礙用戶找到自己想要功能的高效界面(和微調的UI界面)。

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

古騰堡圖

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

gutenburg-diagram.jpg

古騰堡圖介紹了內容排列原理,闡明瞭如何讓用戶更容易找到相關內容。

如你所見,用戶選擇先瀏覽左上角的象限;這個象限被稱為主視覺區。你應該把你的關鍵內容,比如標題和標誌,放在這個位置。

接下來,用戶的眼睛移動到強烈的休閑區域。可考慮在本區域中提供某種後續內容,例如你之前表達的想法的圖片說明。

然後,用戶就會進入弱的休閑區,這個區域不太可能會引起人們的註意。它是用戶在閱讀路途上的“休息”區域。最後,在右下角的一個終端區域將引導用戶得出合乎邏輯的結論。建議將CTA(行為召喚)在此區域中以文本、視頻或鏈接的形式出現。

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

F模式

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

f-pattern-diagram.jpg

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

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

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

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

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

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

Z模式

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

你可能已經猜到,這個模式代表了用戶眼睛的類似於z圖案的移動。

z-pattern-diagram.jpg

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

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

1.頂部的水平線應該包括醒目的內容和元素,比如logo和導航欄(這樣用戶很快就能訪問網站的相應頁面)。

2.遵循經典的講故事方式,對角線應該向用戶介紹主要內容,包括主要內容,吸引註意力的圖片,幻燈片等。

3.最後,一條較低的水平線應該有一個CTA(行為召喚),它可以刺激用戶執行某些動作,比如註冊、訂閱或購買。

底部線條:

視覺模式的知識使設計師理解用戶是如何感知和識別頁面內容的。成功地應用這些模式使設計者能夠構建和優化出使用戶愉悅的界面,並創造整體的易用性。

如何防止用戶對界面優化的不滿

一個網站或應用程式的成功改版是通過深入的研究,包括各種可用性測試來實現的。可用性測試旨在評估新系統的設計和功能或具有真實用戶的現有新系統。以下是設計人員採用的一些有效的測試技術:

A/B測試

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

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

●複製(產品說明,按鈕文字等)

●號召性用語(例如,他們的刊登位置或措詞)

●註冊表單

●佈局

●圖片

●配色方案

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

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

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

走廊測試

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

當地的星巴克可以是一個好的去處: 一般來說,人們在舒適的環境中與陌生人互動的可能性更大。此外,在星巴克,你可以給幫你測試的人買一個鬆餅或一杯咖啡作為獎勵,這還可以幫你多爭取幾分鐘的寶貴時間。

starbucks-front.jpg

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

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

當你展示你的設計時,你可能會問以下問題:

●你明白這個標題/名字嗎?

●你覺得按下這個按鈕後會發生什麼?

●你如何評價這個界面的外觀和感覺?

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

五秒鐘的測試

5秒測試(也稱為印象測試)的目標是引出用戶對界面的第一印象,並瞭解一個網站或應用程式能否將其目的傳達給來訪者。

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

在5秒的測試過程中,用戶查看界面並嘗試儘可能多地去記住界裡面的元素。之後,你可以問他們一系列問題,這可以幫助你瞭解他們的反應:

●你對這個網站/應用程式的外觀和感覺是怎樣的?

●這個網站/應用程式是關於什麼的?

●界面中的什麼元素吸引了你的註意力?

●在這個網站/應用程式中,你最喜歡的是什麼?

●…等等

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

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

結語:

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

為了使優化的界面對用戶不產生負作用,你可以採用研究策略。去做可用性測試和進行用戶研究,這將幫助你做出必要的調整,而不會讓你的用戶離你而去。

學習工具,但不受限於某種工具。Mockplus做原型,更快更簡單,現在下載Mockplus,免費體驗暢快的原型設計之旅。

原文作者:Maryna Zavyiboroda 

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


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • ...
  • Notification的幾種基本使用方法,大家肯定都已經爛熟於心,我也不必多說.給一個鏈接:https://zhuanlan.zhihu.com/p/25841482 接下來我想說的是android5.0 後的彈出通知, 網上的方法是: 但上面的做法並不能在android5.0以下的設備上使通知彈 ...
  • 因為項目中需要用到頭像上傳的功能,所以就下個Ddmo先來實現下。 demo我是類似仿微信的,在一個GridView中展示所有的圖片,其中第一個item可以去照相;獲取到圖片後再進行剪切。 圖片的剪切是從網上找的感覺不錯就用,暫時也沒有測試。 獲取圖片可以用:https://github.com/lo ...
  • 效果 源碼 https://github.com/YouXianMing/Animations 說明 1. TwoLevelLinkageView封裝了兩個tableView,左邊tableView中的cell以及右邊tableView中的cell以及header都可以定製 2. TwoLevelL ...
  • 利用SQLite在android上實現增刪改查 方法: 一、直接利用database.execSQL()方法輸入完整sql語句進行操作 這種方法適用於複雜的sql語句,比如多表查詢等等 這裡適合於增刪改,這個方法沒有返回值,而查需要返回數據,故不適用 增實例: database.execSQL("i ...
  • 轉載自:http://blog.csdn.net/bwf_erg/article/details/70858865 數組是由一組類型相同的元素構成的有序數據集合。數組中的集合元素是有 序的,而且可以重覆出現。 1 數組創建 在Swift語言中,數組的類型格式為: Array<ElementType> ...
  • 利用SQLite在android上創建資料庫 方法: 1、創建我們的資料庫類繼承SQLiteOpenHelper類 完成相關函數的重寫和資料庫對象的初始化 public MySQLiteOpenHelper(Context context,int version) super(context, "f ...
  • 1. 簡述 在實際開發中,常常需要進行不同應用程式之間的數據通信,例如讀取聯繫人列表等等,ContentProvider就是Android提供的用於實現不同進程之間進行數據通信的類。 ContentProvider的作用是對外提供對本應用的數據進行“增刪改查”的介面,而後在其它程式可通過Conten ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...