不可忽视的交互细节之“反馈”提示

本文是根据《设计之下》一书中“反馈提示”的内容做了案例分析,同时结合了公司产品进行举例。记得2016年12月做完一次线下分享后,ppt一直沉睡在电脑里,最近想把之前总结的几篇文章都发出来,欢迎交互道路上的同仁们,一起交流~~

后续还将发出“如何设计体贴的产品”、“未来的输入方式可能是语音”。

一、为什么要反馈

以人与人的交流为例

1)人与人的交流中,无法忍受的一种情况是:对方对自己说的话没有反应,好像视而不见

2)没有反馈或是不友好的反馈,就好像冷冰冰的人一样,会给用户带来无助或不悦的负面体验

给用户及时、恰当的反馈,是交互设计非常重要的一项原则,见下图。

及时恰当的反馈的用处

1)能够告诉用户下一步该做什么

2)帮助用户做出判断和决定


二、反馈的形式

反馈的形式多样(见下图),所有的提示都应该在恰当的时候出现在恰当的位置,用简短而清晰的文字提供有用的信息,不让用户产生迷惑。

常见反馈的6种形式

1、Toast/浮层

先来说说“toast”反馈,它是用户操作结果的反馈提示,通常只是短暂出现在画面上,就像气泡一样过一会儿就会自己消失,并不需要对它进行任何操作。用于告诉任务状态、操作结果,见下图。

标红的为toast

再来看看“浮层”反馈,它是一种用户引导类的提示,通常不会很快消失。有时会带有一个指向具体位置的小尖(如:滴滴、闲鱼),提示用户需要关注哪个位置。用户需要点击指引区域或是点击关闭按钮,来让提示消失。

总的来说,toast和浮层,优点是不影响当前操作,反馈及时;缺点是容易被用户忽略,所以不适合承载太多文字或重要信息。

2、弹窗

弹窗分“模态”和“非模态”2种,需要考虑场景使用,参考下图。

模态和非模态的区别

模态弹窗:强迫用户关注弹窗内容和操作,并屏蔽背景的所有内容,但需要注意的是必须可退出操作;文字描述尽量简洁无异议。它通常分为Dialog对话框和Actionbar底部功能框2种设计方式,可根据实际场景选用。一般当Dialog对话框出现三个或以上的功能按钮,会增加用户的功能选择负担,所以需要使用多个功能按钮选择的时候可考虑使用Actionbar。

非模态弹窗: 不影响用户当前操作,可常在,类似浮窗。通常明显区分确认和取消的颜色,说明可能造成的损失,见下图。

弹窗小结:

弹窗的出现,会强迫用户关注弹窗内容和操作,对用户形成严重的打扰。根据使用场景,尽可能减少模态的设计。确保每一次用户都能安全的退出路径,回到预期操作。若出现三个或以上的功能按钮,尽量使用底部功能框。


3、按钮/图标/链接的按下状态

按钮:在现实中按一个按钮会立即有按下状态,比如下图。

现实生活中的按钮

在人机交互中,当用户在屏幕上按下一个按钮或链接时,也需要有状态的改变,让用户知道界面已经接收到他的操作了,见下图。

4、声音UI Sounds

声音是人体感官中很重要的组成部分,也应该是产品用户体验中的一个方面,但很容易被有意无意的忽略。

常见于游戏设计中,游戏中的反馈设计,是让玩家快速适应游戏操作,获得参与感和成就感的重要手段,见下图。

沉浸在游戏声音的反馈中

而在人机交互中,恰当使用声音反馈有点睛效果,给人带来愉悦感,比如下图的例子。

微信摇一摇和手机拍照功能

那什么是好UI Sounds的设计呢?你需要达到以下3点:

1、符合用户预期(即接近现实生活场景)

2、表达明确且准确的意义和情绪

3、良好的声效感官体验(悦耳度、声响、时长)

当然,并不是所有的设计都适合加上声音,很多情况下,不使用声音是更好的体验,所以你必须允许用户应用内静音。任何「自动播放」、「强制播放」声音的体验都应该慎之又慎。


5、振动

举生活中一个实际的场景,使用电动牙刷,使用过程中牙刷给牙齿强烈的进行中触觉反馈,并且每30秒振动2下提示换边,用户无需计时即可养成良好的刷牙习惯。

振动反馈

在人机界面中,振动被广泛应用在,如来电、短信、数据线已连接充电等,见下图。

需要注意的是:振动是一种比较强烈的触觉反馈,可用来代替或加强声音提示,但不可乱用。


6、动画

动画,着重强调:贴合产品,有趣、及时。举个常见的例子:下拉刷新,运用有趣的动画能让等待不再枯燥,见左图。

如滴滴打车场景一样,用户发送问诊单,等待医生接诊,界面上不断出现可接诊的医生头像,动画效果及时快速,帮助用户直观了解操作的结果,见右图。


三、反馈的内容

反馈内容主要由文字组成,文字信息应该简洁易懂,避免使用倒装句,最好一两句就能将意思表达清楚,避免使用过于程序化的语言。

内容的类型由以下4种:

反馈内容的类型


信息,下面举例几个场景:


警告:一般用警告框表示,用于向用户展示对使用程序有重要影响的信息,见下图


错误:文案提示用户操作出现了问题或异常,无法继续执行。


确认:用于询问用户是否要继续某个操作,让用户二次确认,为用户提供可反悔、可撤销的退路。


四、反馈出现的位置

根据不同的场景,会出现在以下几个位置:状态栏、导航栏、内容区上方、屏幕中心、菜单栏上方、底部(覆盖菜单栏)。

状态栏,优点:刷新需要一定的时间,为了不让用户空等、还能去做点别的事儿,弱化等待过程;缺点:位置不明显,建议做重要程度不高、或有跨画面显示需求的提示。(见下图)


导航栏:适合显示临时的较重要的提示类信息。一般是连接状态的展示,表示产品正在努力连接网络、拉取数据中。(见下图)

内容区上方: 位置在内容区上方、导航栏下方,通常为下拉刷新,是加载新内容的一种快捷方式。默认的提示信息是隐藏的,向下拉界面时才显示对应的提示信息,以引导用户操作。


屏幕中间:通常为整体性的比较重要的信息提示。需要引起用户重视的、系统提示均可以显示在此位置,见下图。

菜单栏上方:可以是应用的整体信息的提示;也可以是与界面底部内容相关的提示。


底部(覆盖菜单栏):在此位置显示提示,是根据app独有的特性而设计,可能是对于新形式的一种追求,keep的这种设计,保持操作了位置的连贯性。


五、反馈的设计原则

——为用户在各个阶段的反馈提供必要、积极、即时的反馈

——避免过渡反馈,以免给用户带来不必要的打扰

——能够及时看到效果的、简单的操作,可以省略反馈提示

——所提供的反馈,要能让用户用最便捷的方式完成选择

——为不同类型的反馈做差异化设计

——不要打断用户的意识流,避免遮挡用户可能回去查看或操作的对象。


以上是关于“反馈”一章的案例介绍,整篇粗浅列举了微医app的大部分案例,很多地方没有深入研究,欢迎大家拍砖·~·

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,911评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,014评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 142,129评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,283评论 1 264
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,159评论 4 357
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,161评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,565评论 3 382
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,251评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,531评论 1 292
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,619评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,383评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,255评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,624评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,916评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,199评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,553评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,756评论 2 335