當前位置:首頁 >教程首頁 > U I 設計 > AI+UX設計大師班 >如何做出好的交互設計方案?

如何做出好的交互設計方案?

發布時間:2021-11-25 09:48:50

我們在日常使用某個 APP 時,經常會聽到別人說某個產品用戶體驗很好,但是一問具體怎麼體驗好,要麼說不出要麼說不全,那到底什麼樣的設計才算是用戶體驗好?如何做出好的交互設計方案呢?

在我看來,一個好的設計是無任何感知的過程,使用過程中容易導致當下行為中斷都不算一個好的方案。舉個例子,我們拿出耳機接下來的行為大概率是為了連接設備,藍牙耳機相較於有線耳機,最大的優勢是不會有線纏繞的麻煩,當有線耳機還在整理線的時候,藍牙耳機可以直接在設備上進行操作連接。

大多數人對 AirPods 的反應是,很方便,體驗很好,即便它仍存在一些問題,但對於大部分來說,戴上即連接的便捷體驗已經足夠忽略一些缺點。

初代 AirPods 的識別原理並不算複雜,紅外距離傳感器會發射光波,紅外線經過反射再次回到耳機附近,耳機內部的芯片確認紅外線返回信號後判定耳機和物體之間的距離,進而識別人們是否戴上了耳機,從而進行連接設備的判斷。2018 蘋果發布初代 AirPods 後,藍牙耳機逐漸成為一種文化,即便它有著不菲的價格。

我們再來看下,蘋果在連接耳機的這個流程中做了什麼?

戴上 AirPods 後會自動連接設備,把與設備成功連接這個步驟更進一步效率化。用戶的目的是連接上設備,而連接這種步驟可以交給機器算法負責。當用戶專注於自己的目標時,在整個流程中不會因為連接按鈕在哪,意外連接失敗的問題困擾時,蘋果給出的這個連接方式就是一個好的交互方案。

設想下,對於連接藍牙耳機這個問題,如果不是從問題產生的時候去思考,最後的方案也可能是在設備上顯示一個大大的顯眼的連接按鈕,但這種方式明顯沒有自動連接的方式好,因為增加了連接成本。

這個案例對於交互設計師來說有什麼啟發呢,交互設計師是解決問題給出方案的角色,我們考慮方案時,應該平衡考慮整個產生問題到解決問題流程上的體驗,把解決問題的方式簡單化。

1.jpg

在產生問題和解決問題的過程中,需要評估一些環節存在的必要性,不能單純以較少頁麵跳轉,減少操作次數來作為提升優化的標準。

平衡考慮整個流程,即使讓用戶多操作一秒鍾,也不要讓他遲疑一秒鍾再去操作,這是因為思考成本大於操作成本,可以把一個複雜的問題分多個簡單的小問題解決,而不要把很多簡單的小問題變成一個複雜的問題。

我們了解需要考慮解決問題的角度,但是在實際工作中,具體的方案還需要進一步評估,做到細節完善,邏輯完整才稱得上是一個好的設計方案。

經過一些項目經驗,結合幾個方法論,我整理出了一個評估交互方案完整性的方法,也可以作為前期考慮方案的分析方式。下麵就來介紹一下,希望能給大家幫助和啟發。

2.jpg

預見性

1. 符合行為的預期

唐納德·A·諾曼在《設計心理學》書中提出“意符”的概念。意符是一種提示,告訴用戶可以采取什麼行為,以及應該怎麼操作。

現如今產品越來越複雜,但是用戶經過長期的教育,已經懂得很多約定俗成的規則,已經形成了一些共識和心理預期,比如知道了搜索按鈕點開就是搜索功能,輸入框點擊可以喚起鍵盤進行輸入。

設計師可以利用這種操作預期,合理的使用意符提示,來做出符合用戶操作預期的設計,避免做出一些容易令人困惑的產品。

3.jpg

2. 更為便捷的預判設計

前麵提到了我們設計時需要從用戶產生問題的時候就開始思考解決方案,在一些場景裏,用戶的行為具有很明顯的目的性,比如收到驗證碼短信後下一步是為了填寫驗證碼,在臨近十二點這個時間段打開外賣軟件是為了吃上午飯,我們可以根據這種目的性把用戶需要的展示給用戶,來提升用戶使用效率,進而提升功能使用完成率。

在思考方案階段,可以結合自身產品屬性和用戶畫像,從用戶的身份,行為習慣、所處物理環境、內容偏好,價值觀以及易誤操作場景等方麵進行輔助思考,來得出設計點。

複製一段地址後,打開淘寶的添加地址,會彈出一個新建地址的彈窗,並且可以部分信息進行操作,考慮用戶複製地址到打開新建地址的流程,不難得出用戶想使用這個地址的目的,對剪貼板信息進行識別和導入可以降低操作難度,將流程效率化。

在支付寶的對話框中,隻輸入純數字時,會有轉賬的操作提示,預判用戶可能是因為想轉賬的行為,但是錯誤的在聊天窗口進行操作,將轉賬入口顯示出來是進行的一種錯誤的挽回設計,縮短了重新打開轉賬功能的步驟。

4.jpg

可見性

內容、當前狀態明確

在尼爾森十大可用性原則中第一條就是狀態可見性,指的是係統應該在合理的時間周期內,給予及時的反饋,讓用戶能夠了解正在發生的事情。清楚地呈現當前的係統狀態,能夠促進產品的可信度和可預測性。

在內容型的產品中,經常會有空狀態頁麵的顯示,一般會去做一些內容的引導,但是當前狀態的顯示優先級應該大於引導的內容,應該優先讓用戶知道狀態,才去引導避免這種狀態出現,即便空狀態會造成一定的頁麵空間浪費。

5.jpg

一致性

1. 在產品中一致的感知和理解

在同一個產品的功能使用層麵,相同的功能要保持一致的反饋和操作,這樣可以大大降低用戶對產品的理解,複雜程度的降低也有利於留住用戶。

2. 在同類產品中保持一致的行為習慣

雅各布定律(Jakob’s Law)認為,降低用戶學習成本要求盡可能依據用戶既有經驗進行任務和流程設計。就是說我們用戶在其他產品上積累經驗,學會如何使用,當相似產品出現的時候用戶會立刻知道該如何操作。

保持與同類產品相同的用戶習慣,有利於用戶的習慣遷移,通過提升熟悉感來降低使用難度,當用戶感到使用困難和複雜時,就會毫不猶豫的離開。

比如現在豎屏的短視頻應用在設計時,都會考慮在切換方式上使用上下滑動的方式,用戶已經在抖音、小紅書這類應用上學習了這一方式,知道了這類產品的使用方式,當轉移其他產品時,相同的習慣也更容易上手適應。

6.jpg

即時性

滿足當下的即時場景

功能設計時也需要考慮具體的使用場景,當物理環境、時間等這類因素發生變化時,用戶的需求也可能發生變化。比如我在白天和深夜打開音樂軟件,聽歌的類型可能不同,我在兩個不同城市打開本地美食推薦,想看到的內容也可能不同,這就需要我們考慮更精細化的場景。

淘票票在電影即將開場的時間段打開時,會顯示電影票信息,這個滿足了臨近時間段快速取票的場景,當取完票或超過時間段時,就不會再顯示這個信息。

微信的語音轉文字功能,滿足了新消息的信息提取場景,當信息已讀時,“轉文字”的提示的意義就不是那麼大了,可以考慮隱藏提示,較少頁麵信息幹擾。

7.jpg

流暢性

盡可能讓用戶更方便地使用

用戶使用產品是因為產品能提供價值,可以試著用故事板的方式,模擬用戶在使用產品的過程中的流程,對整個過程進行細節優化。盡可能讓用戶的流程不會因為各種情況中斷,也盡可能讓用戶不會因為思考下一步要怎麼做而遲疑。讓用戶在解決問題的過程中保持流暢的狀態,也可以提升任務的完成率,實現產品價值。

登錄頁是最常見的頁麵,大家都習慣了輸入手機號碼後,再去切換輸入驗證碼的輸入框,那這個流程還有優化的空間嗎?

小紅書的登錄頁在輸入手機號碼時,會判斷號碼的位數和號段,當滿足條件時會自動定位到驗證碼的輸入框,在輸入信息的過程中隻需要在屏幕底部的鍵盤上操作,手指不需要一直上下移動,這個細節也符合菲茲定律的應用,特別是現在移動端設備屏幕越來越高,減少這個步驟的體驗太好了。

8.jpg

一個交互方案並非都需要滿足以上五個方麵,具體看需求的內容,但是可以作為方案設計的方向考慮,讓方案體驗更好。抖音在視頻流中增加直播的類型的方案,我認為就是一個很好的設計方案,來具體以這五個維度分析看看。

9.jpg

預見性

進入直播間的引導是一個明顯的按鈕提示,文案上“點擊進入直播間”,很好的形成了行為引導,簡潔明了的示意了點擊後會進入直播間,也提供了當用戶被直播內容吸引,想進一步參與更多的跳轉直播間入口

可見性

在視頻流中加入直播類型,很容易把兩種不同的類型混起來,為了區分當前是視頻還是直播,抖音對內容進行了界麵內容上的差異展示。在直播類型中,高優先級的顯示“直播中”標簽和“進入直播間”的提示,在上下滑動的過程中可以較為明顯的進行區分

一致性

內容展示樣式都是以全屏展示,昵稱和內容描述也保持了樣式和位置統一,便於相同信息的理解

即時性

直播類型的顯示滿足了當前正在直播的場景,當主播下播後,無直播間內容就不用顯示和引導進入直播間,用戶也不會瀏覽到這條信息。在上下切換的過程中,也隻保留直播畫麵和描述,去掉了多餘信息,減少用戶無目的瀏覽內容時的幹擾

流暢性

在點擊進入直播間的過程中,所做的頁麵跳轉處理是保持了直播畫麵不變,其他信息加載的方式進行。這樣的好處是在用戶專注於直播畫麵時,進入直播間的過程保持了極好的畫麵延續性,不會因為進入直播間的頁麵跳轉而產生明顯的信息中斷,也不會因為其他信息的加載問題導致錯過直播信息,整個過程極其流暢

作者:小饅頭的交互筆記

华体会hth体育网 賞析
  • 2101期學員李思庭作品

    2101期學員李思庭作品

  • 2104期學員林雪茹作品

    2104期學員林雪茹作品

  • 2107期學員趙淩作品

    2107期學員趙淩作品

  • 2107期學員趙燃作品

    2107期學員趙燃作品

  • 2106期學員徐正浩作品

    2106期學員徐正浩作品

  • 2106期學員弓莉作品

    2106期學員弓莉作品

  • 2105期學員白羽新作品

    2105期學員白羽新作品

  • 2107期學員王佳蕊作品

    2107期學員王佳蕊作品

專業問題谘詢

你擔心的問題,火星幫你解答

微信掃碼入群領福利

掃碼領福利最新AI資訊

點擊谘詢
添加老師微信,馬上領取免費課程資源

1. 打開微信掃一掃,掃描左側二維碼

2. 添加老師微信,馬上領取免費課程資源

×

同學您好!

您已成功報名0元試學活動,老師會在第一時間與您取得聯係,請保持電話暢通!
確定