春節專題!App 設計系列之提示的概念和設計要點

上一篇文章為設計師們撥云見霧,分析了模態彈窗與非模態彈窗,受到了挺多讀者的喜愛,詳文《春節專題!App 設計系列之模態彈窗與非模態彈窗》,但是其實對于彈窗的詮釋還是有限,彈窗的作用是引導、指導用戶,給予用戶反饋信息。那么在這類反饋信息中,怎樣的提示才能更加人性化?本文根據提示信息中的正反例子、各種提示的作用,來為大家說明解釋,提示的人性化設計與提示形式的多樣性。

一. 提示反饋概述

提示反饋:是指用戶在系統內進行任務操作時系統的回應。

目的:遵循用戶心理預期,告知用戶當前狀況,反饋用戶有效信心。

二. 提示的人性化設計要點(利用正反例子)

1. 提示信息應針對特定的用戶場景

例:花瓣的收集成功,如果只顯示成功,則會增加用戶辨識難度。

解析:提示樣式是多樣的,提示信息是有區別的。如刷新提示不適用做模態彈窗,刪除確認不適用做非模態彈窗等等,提示信息肯定有所不同,刷新顯示「刷新成功」,關注顯示「關注成功」。

針對不同的用戶場景,需要有不同的提示內容與之對應。有些應用在所有的成功狀態下都使用同一種提示信息,如「關注成功」與「取消關注成功」,都僅僅提示「成功」,會給用戶帶來難以區分的不便利影響。

春節專題!App 設計系列之提示的概念和設計要點

△ 花瓣、微博

作用:不同提示信息能符合用戶當下情景的使用需求。

反例:一款應用中所有提示信息都一樣。

2. 提示信息應簡潔易讀

例:刷新成功、關注成功、取消關注。

解析:提示信息應用最廣是「刷新」,用戶操作后接到的提示反饋不應阻礙用戶閱讀,因此大多數app刷新提示的信息放置于頂部或底部,避免阻礙用戶操作。

常見有些產品的提示信息帶有符號,雖然符號表情能為提示信息增加趣味性,但是復雜或者過多的信息堆積,會影響用戶理解,增加閱讀障礙。

春節專題!App 設計系列之提示的概念和設計要點

作用:提示為用戶說明當下的狀態、所處的位置及操作的結果,所以簡明的信息是易于理解、易于閱讀、易于交流的,提高用戶易讀性。

反例:一大串奇怪的文字字符。

3. 用戶遇到問題時提示應友善

例:404頁面、輸入錯誤時。

解析:用戶使用過程中的錯誤行為是常見的,但是有些錯誤因素卻不一定是用戶造成的。如常見的網絡連接錯誤、服務器未響應,登錄或注冊無反應等。用戶在操作的過程中出現問題,情緒上會有波動,優秀的設計能很好的安撫不安的用戶情緒。

春節專題!App 設計系列之提示的概念和設計要點

作用:友善對待你的用戶,可以讓用戶體驗到你的產品是舒服的、便利的、是為他們而設計的,從而提升用戶體驗,抓住了用戶的滿足感,更能在接下來抓住用戶的心,提高用戶對產品的信賴度。

反例:枯燥乏味的空白頁。

4. 用戶在即將犯錯時的避錯提示

例:誤點刪除。

解析:當用戶在進行一項極其「危險」的操作時,能給予用戶顯眼的信息提示,避免用戶犯錯。曾經就經歷過不好的產品體驗,在該應用上正在查閱信息,進入到套餐項目里,一般用戶會先看清套餐條款,再選擇購買,但是不小心點擊到購買按鈕時,購買已經產生,既不需要用戶再次確認,也沒有任何提示彈窗,涉及金額不小,一個誤操作就讓用戶犯了錯。即便是支付寶,對于小額數值還需要用戶自己去設置是否免密操作。所以作為產品本身,應當選擇盡量避免讓用戶輕易犯錯。反之如果不能解決這種用戶問題,可能會讓用戶的忠誠度降低。

春節專題!App 設計系列之提示的概念和設計要點

作用:避免用戶在誤操作時產生了消極情緒,避錯提示能夠給予用戶需要的「安全保障」,提高用戶忠誠度。

反:直接清空緩存、直接刪除聯系人。

5. 完成反饋提示——激勵

例:簽到成功、完成有獎。

解析:此類提示很常見,簽到機制與獎勵機制是現在娛樂類、社交類平臺慣用的運營手法,通過獎勵的措施培養用戶習慣,來達到保持產品活躍度的目的,工具類應用則多用完成任務即獎勵的形式來維持用戶熱度。但也有不好的體驗,最直接的就是無反饋提示,有些產品是存在簽到模塊,但是點擊卻只是換了「已簽到」的字樣。

春節專題!App 設計系列之提示的概念和設計要點

△ 觸漫、欲望與成就

作用:刺激用戶活躍度,引導與鼓勵用戶操作行為,培養用戶使用習慣。

反例:無反饋效果。

6. 錯誤提示信息應該是對用戶有用的,有幫助的

例:請輸入正確驗證碼、請輸入正確密碼。

解析:錯誤提示和避錯提示是有區別的。錯誤提示信息是為讓用戶有效地避免犯錯,人都不喜歡犯錯,用戶也不喜歡,但是僅僅只是避免用戶的犯錯行為還不夠,交互邏輯不夠嚴謹的界面,沒有區分的錯誤提示有可能造成用戶操作停滯,影響用戶體驗。

最常見的還是網頁中的登錄注冊界面,當你輸完賬號與密碼時,僅提示用戶登入失敗,并無提示用戶是賬號有誤,還是密碼有誤。即影響用戶體驗,還會讓用戶對產品失去耐心。

春節專題!App 設計系列之提示的概念和設計要點

作用:為用戶提供最快捷、最清晰的解決方案,能讓用戶快速意識與糾正錯誤。

反例:模糊不清地描述用戶的錯誤。

7. 提示信息可以根據產品特性位于不同位置

例:頂部刷新、底部刷新。

解析:提示信息的位置是不固定的,上一篇文章的彈窗形式為大家解釋了多類彈窗的特點及區別。不同位置的用戶體驗是不同的,當用戶視覺中心放在中部以下時(如閱讀類app),此時的大部分次要提示信息應當放置于頂部,如刷新提示,主要提示信息需要放置于中間乃至全屏彈窗。

春節專題!App 設計系列之提示的概念和設計要點

作用:遵循用戶使用習慣,滿足用戶使用所需。

反例:任何提示都以同樣式彈窗顯示。

8. 提示信息中色彩的應用(紅色、綠色、品牌形象色)

例:成功、錯誤。

解析:色彩心理學對于人的影響巨大,不了解的可以翻閱相關色彩心理書籍,根據色彩心理學一論,顏色對于人的情緒是有導向作用。正確的使用配色能更好的體現提示信息的優先層級。如常用的「刪除」、「退出」、「注銷」一般以紅色為主,代表警告操作,優先層級最高等。成功操作一般為綠色,也有使用自身品牌形象色。

春節專題!App 設計系列之提示的概念和設計要點

作用:通過色彩心理學滿足用戶當前使用情景,有效地反饋提示信息的內容。

反例:沒有區分。

三. 提示形式(利用正反例子)

1. 頁面提示(全屏彈窗)

春節專題!App 設計系列之提示的概念和設計要點

△ 布卡app

優點:優先級最高,可以讓用戶停留在產品想要給用戶看的頁面,信息展示最全。

缺點:遮擋用戶當前頁面,阻礙用戶進行操作,影響用戶體驗。

2. 窗口提示(模態窗口)

春節專題!App 設計系列之提示的概念和設計要點

優點:吸引用戶視覺焦點。

缺點:模態彈窗下需要用戶進行操作才可繼續,影響用戶體驗。非模態彈窗下提示信息顯示不全,用戶容易忽略。

3. 標簽提示(輸入表單常見)

春節專題!App 設計系列之提示的概念和設計要點

優點:提示用戶當前操作存在的問題。

缺點:不宜存在太多表單。

4. 動畫提示(加載動畫、刷新動畫)

春節專題!App 設計系列之提示的概念和設計要點

優點:使頁面生動有趣,提升產品體驗。

缺點:過于花俏的動畫不僅會讓人疲憊,還會增加產品的開發難度。

5. 點擊反饋(按鈕的點擊效果)

春節專題!App 設計系列之提示的概念和設計要點

優點:讓用戶更好融入產品的使用情景,辨識當前操作。

缺點:按鈕的可點擊標識不可以太低,會讓用戶誤以為是不可操作狀態。

四. 總結

用戶至上的設計理念,其根本的核心就是用戶讀得懂、讀得快。用戶的目的是想知道現在的自己在哪里、在做什么、應該做什么、且知道這樣做的結果,在iOS Human Interface Guidelines 中也有所體現,并且蘋果把此類信息稱之為「反饋」。其實這篇文章不止適用于App的產品設計中,也同樣可適用于Web設計中。

作者微信號:JJ865477301

歡迎關注作者的微信公眾號:「JAYGO」

春節專題!App 設計系列之提示的概念和設計要點

「App提示好文推薦」

================明星欄目推薦================

優優教程網 UiiiUiii.com 是優設旗下優質中文教程網站,分享了大量PS、AE、AI、C4D等中文教程,為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章,按照我們的專欄一步步學習,一定可以迅速上手并制作出酷炫的視覺效果。

設計導航:國內人氣最高的設計網址導航,設計師必備: http://hao.uisdc.com

收藏 6
點贊 1

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。