互動設計原則:如何用好的設計留住你的用戶?

2021-01-19 人人都是產品經理

本人屬於實踐派,這些方法都是在實際工作中碰到印象深刻到問題後隨手記錄下來的,寫得不妥之處還希望大家給予意見回執。

首先揭露一些常見的現象,從現象到本質到總結一些設計方法。

現象一:內容複雜時,用戶大都只會掃視

當我們在查看內容和信息的時候,絕大多數情況下我們都會有目的和意識的去尋找自己感興趣和對自己有幫助的內容。

比如,我們很少會完整地瀏覽複雜網頁上所有的文本和內容,絕大多數的用戶打開網頁都是在試圖完成某項任務,達成某個目標;而頁面中的不同的內容模塊往往是服務於不同的功能和目標的,我們只要尋找可以完成自己目標的內容部分即可,並沒有閱讀全部的必要。

不過,作為軟體和網頁的設計人員,我們需要根據不同的用戶場景和需求去設計功能,增強用戶體驗,所以往往會使得頁面邏輯相對複雜。怎樣把複雜的需求和邏輯通過簡單清晰的界面展示出來,便需要遵循幾點設計方法。

下面是自己針對這一現象總結的幾個重要的設計方法:

儘量使用言簡意賅的標題和段落,確保用戶掃視時快速理解選擇;突出關鍵信息,不要強調太多的內容,這樣會失去強調的作用;產品說明通過界面化引導,拒絕長篇文字說明。現象2:層級關係混亂容易造成用戶理解誤差

視覺層次是確保用戶快速掃視能夠獲取到信息的重要助力。

視覺層次能夠呈現出頁面中不同元素之間的優先級和關係,在設計的時候,同樣需要遵循下面的幾個原則:

梳理主要流程,將功能劃分出主次取捨功能操作,突出主要操作流程,弱化次級功能通過視覺表達層級關係:重要的元素需醒目;邏輯上關聯的元素,在視覺也應相關層級不能太多,三級以內較合適,四五級的層級界面會讓用戶找不到重點。

通過以下的設計案例的截圖對比,我們也不難發現:右側清晰的層級劃分、簡短的文字信息、良好的設計引導能讓用戶快速找到想要的功能;而左側缺乏層次,界面布局冗長,用戶無法一眼掃到全部內容,閱讀效率降低。

現象3: 用戶不在意產品背後的邏輯,不要讓用戶思考問題

實現產品邏輯往往是極為複雜和曲折的,我們需要把這些複雜的邏輯做到產品的背後,不要讓用戶有所感知。對於用戶來說產品智能、操作簡單才是體驗極好的。

要做到這一點,同樣總結了幾條準則:

儘量簡化用戶的操作邏輯,可以通過後臺邏輯實現幫助用戶操作智能化,例如聯動性操作;在長進程的流程操作中,儘量不要輕易打斷用戶進程讓其思考;在功能設計中不要過多的限制用戶,讓其如履薄冰,例如警告性詢問性的彈窗避免出現;

下面的是一個微信加群內好友的軟體操作,可以一鍵給多個群的所有群成員發送好友驗證消息。

如果一個相同的群成員在多個群內,且此時你對該成員的勾選狀態不一致,此時軟體會自動詢問這批群成員是否需要發送好友驗證。

如果在選擇中途打斷用戶或是禁止操作會讓用戶產生疑問,需要用戶去思考背後的邏輯,就不是很友好了;面對這種衝突性的操作時,在結尾二次詢問用戶能讓用戶自然理解背後邏輯,也體現了軟體的智能性。

現象4: 為了特殊需求埋葬大眾需求

產品設計過程中經常會遇到這種問題,特別是產品迭代的過程中,用戶不斷的提出需求,就不斷地往產品上堆積功能,這樣長此以往會造成產品的冗餘,功能雖多卻沒有一類用戶能找到適合自己的使用場景,這是十分可怕的。

因此在設計的過程中我們要評估好需求的主次,遵循以下幾點設計原則:

需求評估和界面設計時要以多數用戶的主要場景為主;在新需求迭代時不要輕易推翻原本的設計從頭再來,需要平衡好用戶體驗;在原本界面上兼容高級功能時,需要通過層級劃分把用戶當的操作路徑規劃好;高級功能是為高級用戶準備的,可以設置一定的學習成本;

這樣的例子其實很多,特別是移動端的產品,由於移動端界面的局限性,更加需要平衡好主次性。

例如微信更新迭代的視頻功能,採用隱藏的下滑設計,不影響老用戶的用戶習慣,卻也能玩出更多花樣。切忌隨隨便便推翻重來的設計。

現象5:過度創新帶來團隊效率低下

創新的確會給產品帶來新的活力,但是為了創新而創新的設計不是好設計,真正優秀的創新設計都是基於用戶體驗的。

市面上有太多的工具和應用,忽略約定俗成的規則,特立獨行地採用自己的規則,會讓每個應用的學習成本都提高,這對於用戶幾乎是毫無益處的。

每個元素的設計不能僅僅是為了好看,而是要基於用戶體驗微動效是為引導用戶理解產品而存在的,不是為了酷炫不要為了設計而設計,設計中儘量使用大家默認易懂的標識和組件

在入職伊始,我很喜歡酷炫的設計風格,各種微交互的創新設計幾乎成為了我的研究重點。

在工作兩年多以來我發現這些酷炫的技能是工作崗位的奢侈品,團隊根本不會為了你認為很棒的視覺體驗買單,任何設計都需要考慮成本,一個產品設計原型往往一天就要評審,更不沒有過多的時間去考慮視覺,重點還是要把邏輯和流程表達清晰。

但是微交互也不是完全沒有用武之地,在產品相對成熟的階段,追求精益求精的用戶體驗時,這些存貨也是能派上用場的。所以我希望設計師在學習和工作過程中不要本末倒置,要有自己清晰的判斷和思路。

現象6:問對問題,才能深度挖掘用戶行為

用戶回訪的時候,問用戶「你們覺得下拉菜單好用嗎?」這樣的問題,不僅銷量不高,而且不會帶來價值。

這個問題,應該這麼問:「在某某場景下,這個頁面上的下拉菜單設計你能不能快速發現和操作,能不能理解使用邏輯?」。所以,用戶回訪時一定要深入思考問卷問題,才能挖掘更多的用戶行為和對產品有幫助的反饋。

以上是我工作以來的一些心得,整理和總結出來奉獻給大家閱讀,有什麼不一致的意見可以留言,很樂意和大家一起探討。

 

本文由 @UX-ICY 原創發布於人人都是產品經理,未經許可,禁止轉載

題圖來自Unsplash,基於 CC0 協議

收藏已收藏 | {{ postmeta.bookmark }} 點讚已贊 | {{ postmeta.postlike }}

相關焦點

  • 設計原則總結:最全的互動設計原則和理論匯總
    設計是有原則和方法論的,鑑於網上各種文章和原則比較零碎,這次統一將互動設計的方法和理論匯總,不足之處也希望各位能夠提出,一起補全。尼爾森可用性原則尼爾森的十大可用性原則是產品設計與用戶體驗設計的重要參考標準,值得深入研究與運用。1.狀態可見原則用戶在網頁上的任何操作,不論是單擊、滾動還是按下鍵盤,頁面應即時給出反饋。「即時」是指,頁面響應時間小於用戶能忍受的等待時間。
  • 互動設計的最後一公裡(一)——動效設計
    動效設計在交互稿的邏輯展示及提高可讀性方面是很有必要的,當然其作用也不限於交互稿的展示,還有很多富有創意的設計點都可以用動效設計來進行表現加載動效因此,動效設計在交互稿的邏輯展示及提高可讀性方面是很有必要的,當然其作用也不限於交互稿的展示,還有很多富有創意的設計點都可以用動效設計來進行表現。
  • 互動設計|如何做好操作反饋規範的設計?
    互動設計中的操作反饋設計,要從用戶和產品的兩個角度去思考——反饋能為品牌氣質的提升帶來什麼價值,能多大程度地優化用戶的體驗效果?規範,意指符合邏輯,客觀、真實、全面、完整、準確、及時,達標。明文規定或約定俗成的標準, 使某一行為或活動達到或超越規定的標準。
  • 互動設計 | 如何做好操作反饋規範的設計?
    互動設計中的操作反饋設計,要從用戶和產品的兩個角度去思考——反饋能為品牌氣質的提升帶來什麼價值,能多大程度地優化用戶的體驗效果?設計規範的制定都帶有很強的目的性,一份規範的制定不僅是對產品自身有利,對設計研發團隊以及用戶都是有諸多顯著的好處。什麼是互動設計中的操作反饋?設計規範中的操作反饋規範的制定,實則就是將用戶操作APP後的行為給出一致性的反饋,讓用戶的每一步操作都有明確的感知。
  • 一文讀懂,語音互動設計流程
    的基本設計原則1.作用:它能夠讓你在投入開始研發之前,知道你的設計效果是如何。3. 視覺原型雖然是語音交互,但是還是離不開GUI的,它可以結合示例對話,將用戶體驗可視化。示例對話和原型組成了我們產品的故事板,GUI+VUI是用戶一套完整的體驗,所以,VUI和GUI在早期階段就開始合作,這樣對用戶體驗會更加流暢。
  • Web設計教程:網頁設計中的對比原則
    網頁設計是由很多個不同的元素構成的, 而這些元素的重要性都不同, 並且有些元素還需要尤為的突出.有些元素彼此之間存在著聯繫,而另外的元素之間則 一點關聯性都沒有.比較難辦的部分就是如何有效的在視覺上來傳遞元素之間的關係.這就該用到對比原則了.
  • 如何用感染力提升設計價值
    之後能夠對滿意度進行評價,並用商品自身的能力及服務來感染用戶,使其能夠自發的宣傳產品。這樣不但能夠節省大量的成本,且可以將良好的品牌形象根植在用戶心中。 做設計也是一樣的,好的交互體驗及視覺體驗,能夠給用戶身臨其境的感覺,也會帶來很好的效果。
  • 從互動設計到產品設計到服務設計,變遷是怎麼發生的?
    用戶在WEB端願意獲取更多的信息,是因為信息傳播的速度慢,對信息是饑渴的。到了移動端以後,你會發現信息傳遞的速度成幾何速度增長,信息的幹擾越來越多,所以信息傳遞的精準性就顯得尤為重要。網頁端到移動端的轉變,出現了大量的交互工作需要完成。移動電商怎麼做、移動社交怎麼做、移動新聞客戶端怎麼做?網頁端的屏幕信息呈現能力很強,時間也是點狀的,不連續的;移動端的屏幕信息呈現能力弱,時間是連續的,和用戶高度綁定的。移動端的信息呈現變成了抽屜式的收納,如何讓用戶理解產品就變得尤其重要,這就是交互的工作。2. 互動設計的理念
  • 對啊網設計學院:用戶體驗——設計的一致性
    這意味著該產品以相同或相似的方式與用戶進行交流,無論交流的點或渠道如何。就用戶體驗而言,這意味著相似的元素在外觀和功能上都相似,從而減輕了認知負擔,並使交互更加流暢和直觀。考慮到當今人們信息過多的事實,他們傾向於選擇易於理解和交互的產品。此外,一致性在產品外觀和工作方式上為和諧的感覺奠定了可靠的基礎。和諧永遠是我們擁有的任何經驗中不可或缺的一部分。
  • 解讀交互稿模板:如何讓設計稿更規範化?
    PS:本文適用於移動端,Axure軟體製作的文檔型交互稿。交互稿應該包含哪些內容?如何搭建一個合理的交互稿結構?各個界面應該如何擺放?清晰易讀的設計說明應該是怎樣的?想必作為一個新人,很難完全弄清上面的問題。
  • 在設計過程中,有哪些不容忽視的互動設計要點?
    如何通過界面元素間的位置關係引起用戶注意,從而快速有效地感知並獲取目標信息是界面設計的重要方面。從設計角度來說,應當使設計內容容易被發現、容易被識別。人機互動系統中大量的信息需要集中在有限的界面中,當無法保證用戶如何從眾多的信息中識別出對自己有用的內容時,用戶也很難從界面中尋得情感上的共鳴。界面應該具有自己內部的和諧,這是最基本的要求。
  • 可視化設計的10個指導原則
    它應該考慮用戶對視覺處理的了解,提高並簡化用戶的數據體驗。目前有很多工具和框架可用於構建這些圖形,是時候回歸基礎了。是什麼讓數據可視化有效?在設計數據時我們應該遵循哪些指導原則?以下最佳實踐將幫助您設計豐富、有洞察力的數據體驗。01 為特定受眾設計可視化是用於揭示模式的,提供上下文並描述數據中的關係。
  • 信息維度與互動設計原理
    圖形用戶界面的互動設計關注在二維空間裡,如何選擇二維媒介載體,表達內容的信息架構與功能的交互模型,達成互動設計的可用性目標與用戶體驗目標。 三維信息由二維信息和一維信息演化而來,三維信息構建為三維空間,簡稱為「體」,由實體的點、線、面、塊、體構成生活在其中的信息空間。通過將二維摺疊形成的蟲洞,就是三維空間。
  • Apple 的設計哲學:交互篇
    蘋果是一家為數不多以設計驅動的公司。如今,當我們談論起產品設計、談論起用戶體驗,總是離不開蘋果,它所堅持的設計哲學是對細節和質量的極致追求。下面,我就帶大家看看 Apple 在交互方面做的努力。
  • 設計回歸本原!OriginOS給用戶帶來「獨特」交互方式
    vivo歷時一年打磨的全新系統OriginOS發布之後,給廣大用戶的第一印象就是顏值高!要知道,該系統帶來的獨特UI美學設計,顏值在線不說,還能夠讓用戶打造屬於自己的個性化桌面風格,極具亮點。而讓廣大用戶更加驚訝的是OriginOS帶來的創新性交互方式,其與桌面風格一樣都可以進行自定義設置,讓用戶可以打造出獨一無二的交互界面,非常吸引人!交互池帶來全新交互方式OriginOS帶來的交互池功能非常新穎,該功能能夠對手機屏幕側邊的手勢操控進行自定義設置,用戶只需要點擊交互池圖標就可以調整交互方式,非常簡單。
  • 「Material Design」的九大設計原則
    除了在Google+社交媒體上發布了相關內容之外,谷歌還給與會者發送了一些藝術印刷套件,其中就包括一些極具特色的明信片,這些明信片很漂亮,也向人們展示了新設計語言的設計原則。谷歌是這樣介紹的:「設計是創造的藝術,我們的目標就是要滿足不同的人類需要。人們的需要會隨著時間發展,我們的設計,實踐,以及理念也要隨之提升。
  • 如何設計分層架構和交互接口 API?
    僅僅四個步驟就完成了架構設計嗎?這會不會太簡單空洞了呢?各位看官,不要著急,請聽蔡老師慢慢道來,每個步驟都有極具可操作性的方法及工具。層次的切分方法面對一個龐然大物,你該如何下手呢?不用擔心,這已經給你準備了庖丁解牛的方法,輕輕鬆鬆把一個複雜的大系統變得可以掌控了。
  • 從理論到實踐,我是如何完成這份互動設計的?
    隨著時間的流逝,我們已經不自覺的進入了極為細緻,極為縝密的深層交互定義和行為推演中。往往是午飯回來後,相關設計人員才會突然意識到,好像在不同的模塊出現了一致性問題,出現了出口入口的流程方向問題,還出現了忽略網站協同,單純的在思考移動端深層行為問題…而產品在Q(質量)C(成本)T(時間)模型中如何權衡取捨,如何構建具有競爭力的模式,如何通過設計和運營變現,也因為被帶入深度的細節討論忽略了全局。
  • 關於交互Demo設計的一些建議
    為方便產品經理、設計師、開發及項目相關人員能夠看到直觀的效果,進行更有效的溝通;提供直觀的產品設想,說明用戶將如何與產品進行交互,在互動設計的過程中一定會產出各種各樣的產出物,如流程圖、思維圖、紙上的草稿、甚至高保真演示稿。這裡簡單分享下自己在項目過程中的交互Demo設計的一些心得。
  • 卡內基梅隆大學互動設計專業全面解析
    互動設計專業是CMU的一門強勢學科,並且也是眾多藝術留學生的選擇。接下來,大家就一起來了解一下關於卡內基梅隆大學互動設計專業的介紹吧!CMU HCI的項目更加側重的是:設計流程,用戶研究,用戶體驗設計這些東西。也就是說,CMU的HCI項目,從課程設置和就業方向上來說,和互動設計非常類似。 Master的HCI項目學用戶體驗、可用性,畢業後最合適的工作是在業界的大小公司的產品線上工作。