如何深思熟慮地優(yōu)化產(chǎn)品界面中的細節(jié)設(shè)計

你的產(chǎn)品的成功是基于一系列因素,但是整體上看用戶體驗至上。當設(shè)計一個新的應(yīng)用程序或一個網(wǎng)站時,堅持最佳實踐是一個必要的途徑,但是在創(chuàng)建大畫面的過程中,撇開那些看起來不錯但不必要的設(shè)計元素是非常容易的。然而,好與壞的體驗差異往往歸結(jié)于我們?nèi)绾紊钏际鞈]地設(shè)計這些細節(jié)。
視覺反饋
視覺反饋可能更容易在很大的設(shè)計方案中被忽視,但它實際上將整個體驗結(jié)合在了一起。當沒有任何反饋時,就沒有適當?shù)幕印O胂笠幌?,與不給你任何方式回應(yīng)的人說話——你根本不能溝通。所以你的應(yīng)用程序也是如此。
缺乏視覺反饋能夠使用戶混淆。
您必須確保對用戶操作總是有一些反饋意見,因為它讓用戶感到受控。視覺反饋
確認應(yīng)用程序已收到用戶的操作。
溝通互動的結(jié)果,使其既可見又可理解。給用戶一個信號,告知他們(或應(yīng)用程序)執(zhí)行任務(wù)是成功還是失敗了。
使按鈕和其他控件有形
在現(xiàn)實生活中,按鈕、控件及其他物體響應(yīng)我們的互動,這就是人們所期望的行為。人們期望應(yīng)用程序的元素具有類似的響應(yīng)能力。
操作結(jié)果
當你需要通知用戶有關(guān)操作的結(jié)果時,視覺反饋也是很有幫助的。您可以用現(xiàn)有元素提供反饋。
系統(tǒng)應(yīng)該告訴用戶他們的狀態(tài)
用戶希望在任何給定的時間內(nèi)知道他們當前在系統(tǒng)中所處的環(huán)境,應(yīng)用程序不應(yīng)該讓他們猜測-?他們應(yīng)該通過適當?shù)囊曈X反饋告訴用戶發(fā)生了什么。對于頻繁和次要的行動,響應(yīng)可能不大,而對于罕見的和主要的行動,響應(yīng)應(yīng)該更大。
動畫通知使用戶能夠快速了解當前狀態(tài)。
加載動畫提供應(yīng)用程序進程狀態(tài)的實時通知,使用戶能夠快速了解發(fā)生的情況。
加載欄與用戶互動,并防止應(yīng)用程序忙于加載數(shù)據(jù)時出現(xiàn)混淆。圖片出自:馬克
微視圖
微視圖是引導(dǎo)用戶體驗的一小部分文字。顯微技術(shù)的例子是錯誤信息,按鈕標簽,提示文本。一目了然,這詞與整體應(yīng)用程序設(shè)計相比微不足道。但令人驚訝的是,它們對轉(zhuǎn)換有巨大的影響。
在應(yīng)用程序中編寫好的微視窗與使其正常工作,以及用戶界面易于使用和高效使用是同樣重要的。
證明你是人類
一個快速的方法,使你的用戶界面更溫暖,在副本中減少機械性的人的語調(diào)。如果你的產(chǎn)品聽起來很人性化,那么人們會更容易信任你。
在故障時刻使用友好和有用的副本
如何傳達錯誤會對用戶的產(chǎn)品體驗方式有很大的影響。通常被忽視,一個用錯誤構(gòu)造的錯誤信息可能會讓用戶感到沮喪。
諸如“發(fā)生錯誤”的警報信息對所有用戶都是神秘的,并且可能會使經(jīng)驗豐富的用戶感到煩惱。
另一方面,精心設(shè)計的錯誤信息可能會使一時的沮喪變成一時的喜悅。因此,使用人為,而不是技術(shù)性的錯誤信息,去適應(yīng)你的觀眾。
錯誤狀態(tài)必須包括關(guān)于下一步做什么的簡明、友好、和指導(dǎo)性的副本。
緩解用戶的擔憂
微視圖是特別情境。這就是為什么它如此重要。它解決了人們和他們所關(guān)注的點這一非常特殊的問題。例如,微視圖可以在根本安撫用戶的訂閱或共享的細節(jié)。雖然 '不要垃圾郵件/自動鳴叫' 可能被視為理所當然的良好的營銷時,要求電子郵件地址/訪問社會網(wǎng)絡(luò)帳戶連接,用戶是不確定的。因此,當人們添加他們的電子郵件或連接他們的Twitter帳戶,說:“我們討厭垃圾郵件。”
微視圖涵蓋所有潛在用戶的關(guān)注在一個緊密的句子中。
空白區(qū)域
空白(或負空間)是設(shè)計師沒有設(shè)計元素放置的區(qū)域??瞻椎脑厥俏谋緝?nèi)容中的圖像,邊距,填充,行間距和字母間距的空間。雖然許多人可能會認為這是浪費寶貴的屏幕空間,但空白是用戶界面設(shè)計的基本要素。
提高對用戶界面的理解
混亂是不好的。用戶界面過量載入信息:每一個添加按鈕、圖像和文本使界面更復(fù)雜。如果你認為你設(shè)計的任何部分不應(yīng)該有故意空白的,看看下面的例子,你會看到當有太多的對象吸引你的注意力時,會發(fā)生什么情況。
混亂的用戶界面是沒有吸引力的,用戶不會看它,尤其是當視圖中沒有可視化層次結(jié)構(gòu)時。
白色空間的力量來自人類的記憶和注意力的極限。我們的短期記憶可以容納少量的信息(通常約 7 個或更少)銘記在一個活躍的,隨時可用的狀態(tài),在很短的時間內(nèi)(通常從 10 至 15 秒,有時甚至一分鐘)。
用戶關(guān)注是一種寶貴的資源,應(yīng)相應(yīng)地分配。
如果你的用戶載入過量的信息,導(dǎo)致界面混亂。因此減少混亂以此提高對用戶界面的理解能力??瞻卓梢允挂恍┗靵y的界面看起來更簡潔。空白減少了大量元素,讓用戶看一次就能夠便于搜索。使用空白技巧是為你的用戶剝離掉多余的細節(jié),以提供易理解的內(nèi)容(大塊的內(nèi)容)。
媒介是一個不錯的例子,使用空白來改善內(nèi)容和用戶界面的理解。
關(guān)注點
空白創(chuàng)建設(shè)計元素的空間,幫助它們脫穎而出,或從其他元素分離。它有助于溝通什么是最重要的,什么是需要注意的。
元素周圍提供的空間越多,它的聚焦就越大。
Google搜索首頁是使用空白的一個很好的例子。布局立即通過將主要交互元素(搜索框)放置在前面和中央位置,在任何一方有足夠的空白以增加重點,從而有助于用戶目標。
缺少其他元素將使現(xiàn)有元素更加突出。
明確關(guān)系
接近法則描述眼腦作用是一個不斷組織、簡化、統(tǒng)一的過程,正是通過這一過程,才產(chǎn)生出易于理解、協(xié)調(diào)的整體。我們的視覺系統(tǒng)自動對視覺輸入構(gòu)建結(jié)構(gòu),并且在神經(jīng)系統(tǒng)層面上感知形狀,圖形和物體,而不是只看到互不相連的邊,線和區(qū)域。看看這張照片。幾乎每個人都看到兩組點,而不是簡單的 16 點。
把信息分成相應(yīng)的組可以使它更清晰且具有可讀性。在右邊的表格,把 15 個領(lǐng)域分為三組,使過程更容易。內(nèi)容的量是一樣的,但對用戶的影響卻大不相同。
圖片來源:nngroup
結(jié)論
精心的設(shè)計。應(yīng)用程序的用戶界面的每一個小細節(jié)都是值得密切關(guān)注,因為用戶體驗是所有細節(jié)的工作協(xié)調(diào)的總和:
“細節(jié)不是細節(jié)。它們造就設(shè)計。”——Charles Eames
原文鏈接:https://uxplanet.org/the-details-that-matter-8b962ca58b49?source=---------0-----------
作者信息:Nick Babich
譯文出自:SKYUI
相關(guān)文章
- 簡單而片面的說,爬蟲就是由計算機自動與服務(wù)器交互獲取數(shù)據(jù)的工具,這篇文章主要想談?wù)勁老x獲取數(shù)據(jù)的這一部分。爬蟲請注意網(wǎng)站的Robot.txt文件,不要讓爬蟲違法,也不要2017-12-18
- 設(shè)計師可能無法減少App加載頁面的等待時間,但是可以讓等待時間變得有趣~,本文主要為大家淺淡App加載頁面的等待體驗設(shè)計技巧,有興趣的朋友們就來了解下吧2017-12-15
- 表單無論實在網(wǎng)頁設(shè)置中,還是在APP、應(yīng)用程序、軟件界面中都被廣泛運行,從而一個好的表單設(shè)計就非常重要了,本文主要為大家分享幾個交互好且轉(zhuǎn)化率高的表單設(shè)計技巧,有2017-11-20
適配iPhone X要點:十分鐘快速掌握iPhone X UI界面適配技巧
目前,第一批預(yù)約iPhone X手機的朋友們已經(jīng)拿到真機了,目前還沒有適配iPhone X的應(yīng)用運營商,相信都在加班加點適配呢,本文為大家?guī)砹诉m配iPhone X的要點,讓你十分鐘快2017-11-08如何讓網(wǎng)頁可讀性更強?善用F式布局設(shè)計增強網(wǎng)頁可讀性方法解答
雖然網(wǎng)頁排版方式千變?nèi)f化,但是布局方式通常都遵循著幾種常見的規(guī)則,F(xiàn)式布局式設(shè)計能夠增強網(wǎng)頁可讀性,這種說法是有跡可循的,本文就為大家介紹如何運用F式布局,有興趣2017-11-08- 在網(wǎng)頁的設(shè)計中表單都是界面中最常見,也是最重要的組件之一,對于設(shè)計師、前端和開發(fā)者而言,應(yīng)當對于表單的設(shè)計盡量多上心,讓它們更加易用,細致的設(shè)計對于用戶的體驗、2017-10-26
登錄頁面怎么設(shè)計更好?登錄頁面設(shè)計的15個心理學(xué)策略
有很多東西下意識地影響了我們的日常決策,這里面很多都是微妙的心理因素在起作用,大家都知道用戶體驗設(shè)計跟心理學(xué)相關(guān),甚至?xí)苯佑绊懏a(chǎn)品的轉(zhuǎn)化率,那么,登錄頁面怎么2017-10-10網(wǎng)站評論模塊怎么設(shè)計 10個關(guān)鍵點告訴你如何設(shè)計產(chǎn)品評論模塊
網(wǎng)站不僅內(nèi)容很重要,評論模塊同樣也很重要,那么,網(wǎng)站評論模塊怎么設(shè)計呢?對此,本文就為大家詳細介紹10個關(guān)鍵點告訴你如何設(shè)計產(chǎn)品評論模塊,有興趣的朋友們就來了解下2017-09-25網(wǎng)站導(dǎo)航設(shè)計怎么才是符合搜索引擎優(yōu)化?SEO網(wǎng)站導(dǎo)航建設(shè)技巧分享
搭建網(wǎng)站的任何細節(jié)都需要考慮到是否利于SEO優(yōu)化,在網(wǎng)站導(dǎo)航設(shè)計的過程中,我們應(yīng)該怎么樣進行操作才是符合搜索引擎優(yōu)化的呢?對此,本文就為大家進行簡單解答2017-09-21- 在做網(wǎng)站設(shè)計的過程當中,很多人可能會對于頁腳這個方面產(chǎn)生忽略,但是實際上在我們平時的使用下來的整體的分析數(shù)據(jù)表明,頁腳對于一個網(wǎng)站來說還是有非常重要的作用的,那2017-09-04