交互设计:请别忽视空白状态

  本文转载自 desiringclicks,原文标题为《空白狀態也可以發揮作用》。作者谈论了在不少产品中被忽视的「空白状态」。

  空白状态(Blank Slate),是出现在动态信息页面中,当还没有提交任何资料时的空白画面,通常会显示如「你还没有任何照片」「你还没有追踪的朋友」等,但这看似是个很直觉的页面设计,其实是个能够与使用者对话的重要机会,也是个能够诱导使用者跨出第一步,并且开始着迷于你有趣服务或程序的关键。


  想想看通常我们都会在这个空白页面写什么呢?最常见的就是「目前没有消息」或是「目前没有上传的照片」等,对于使用者来说可能不至于有反感的感觉,但跨出第一步总是门坎比较高,因此很多网络服务或应用程序,都会有很多使用者呈现幽灵状态,在申请后就再也没消没息,或是保持潜水只看不产出内容,这当然可以有非常多的原因,但是我们所希望的,就是竭尽所能的诱导他们提交内容,因而与服务产生连接。

  所以我们更不应该错过这个良好的机会,因为空白状态的页面有可能就是你的使用者最后所看到的画面,之后他们很有可能再也不会打开这个服务或是应用程序。

  知名设计与工程师 Nathan Barry 在 Designing Web Application 中建议了三个空白状态需要提供给用户的信息:

  告诉用户什么数据将会出现在这里(What)。

  给使用者为什么他们想要在这里提交内容的理由(Why)。

  要怎么提交内容(How)。

  首先我们必须要清楚地告诉使用者,这个页面所会出现的内容信息是什么,常常可以看到只显示个「空白(Empty)」或是「没有数据(No data)」这种没有注明内容名称的方式,那到底是没有什么信息?什么东西是空的呢?可能是朋友、照片、或是旅游记录,但用户无法马上了解到此页面的信息形态,我们应该要清楚的提示内容的形态,例如 Evernote 与 Instagram App 就透过清楚的形态名称(tags / friends)再加上图示让我们可以很快速的就明白我们将要提交的内容是什么。


  除了文字与图标的解说以外,还有另外一种快速让用户了解信息内容的方式,就是让他们直接体验真实的信息内容,或是一些范例信息,而不需要凭空想象,例如 Evernote Food 与 Lift 如下图:


  在了解信息内容的形态以后,最好能提供使用者一个渴望提交内容的冲动或诱因,告诉他们使用了你的服务以后可以得到些什么?例如你因此可以认识更多的人、提交了标签以后你可以更轻松的找到你要的信息、或是你可以与客户之间的往来更方便而节省时间与成本等,让使用者产生目的性以及愿景(下图为 FreshBooks 网络服务)。


  情绪性的言语表达或是图示,有时候也是可以发挥作用的,例如 Vine (下图)里面不开心的图示,就会让人想赶快分享些什么东西。


  当初 Facebook 在删除用户账号的接口中,就透过了「你的朋友会想念你的」 的文字加上照片,成功的拦阻了许多想要删除 Facebook 账号的网友们,我们也许可以用类似的方式如「你的朋友正在等待你分享的消息呢!」加上朋友的图片,来提高使用的意愿,人类的促发行为往往是察觉不到却又有大大影响行为与结果的能力!


  在最后,我们需要提供使用者一个简单明了的提交方式(通常就是一个明显的提交按钮),我们为什么不利用充裕的空白状态的页面,让使用者可以直接在页面中间轻松的点击提交,而只显示个「没有数据」的文字消息呢?

  在 SoundCloud 中橘通通的录音按钮(下图),就提供了一个很好的示例。而若是你的服务会有很多复杂的操作,尤其是有创新的使用方式时,Nathan 也建议可以将难以记住的教学步骤拆开来,与其一开始就把使用者搞的昏头又记不着,不如分别显示在空白状态的页面中,当你点击到此页面时,才解释并且教你怎么使用。


  空白状态多半是在使用者刚开始使用的时候才会被看到,这时他们仍然对你的新产品保有些微的耐心,我们应该把握住这个能与使用者对话的珍贵机会,而不要让使用者看完这个页面后,脑中真的仍然保持「空白」的状态。

时间: 2024-08-29 14:46:22

交互设计:请别忽视空白状态的相关文章

交互设计中常常忽视的两个重要状态(一)

一般交互设计初,最容易忽略掉一些特殊状态的设计.往往在测试后,会出现一大堆的问题,不但延误工期,上线时还会影响体验. getting real提出对于每个界面,都要考虑可能出现的三种情况--常规.初始.错误三种状态的设计. 常规:即一切运行正常时候的界面,用户看到有内容的界面.这个人人皆知,也是花去最多时间的地方. 初始:用户第一次使用,在没有内容前的界面. 错误:有错误发生时,用户看到的界面. 常规界面自不必说.初始和错误状态却是常常被忽视的两个状态. 产品在初始状态下是没有内容的.当新人注册

业内人士称深圳山寨机与iPhone只差交互设计

深圳交互设计应用几为空白 业内人士称,深圳工商注册根本无交互设计选项,深圳山寨手机与Iphone之间所差的,就是交互设计 Iphone被视作交互设计产品中的翘楚,但在交互设计应用空白的深圳,设计师们很难有渠道获得与国际同步的交互设计知识. 还局限于材料.外形.结构的产品设计已经无法跟上市场的需要.一种从用户体验入手.更关注人与产品之间的互动.能直接影响人们的购买习惯和依恋程度的新设计理念---"交互设计",成为当下深圳工业设计领域面临的新课题.近日,深圳市工业设计行业协会举办首期交互设

交互设计中的5项视觉指导原则

  视觉是人的第一感观,它在影响用户行为方面起着决定性作用,视觉信息对产品的交互产生了深远影响. 来自UXPin的Jerry Cao,通过本文向我们解释了如何保持视觉与交互的协调. 我不想贬低文字的重要性,但也不想忽视视觉.两者是同等重要的交互设计元素.文字就是交互,但那些视觉元素(比如图标.菜单.图像等)才是用户实际上操作的东西.虽然有些可用性专家会提及Craigslist甚至Amazon,作为丑陋但可用(而且受欢迎)的网站案例.但毫无疑问,美感总会有所帮助. 情感是用户体验的关键:视觉设计优

网页界面交互设计:系统的用户体验的衡量标准

文章描述:精益用户体验(UX):摆脱只注重结果的工作(留意互动机构的区别之处). By Jeff Gothelf from SmashingMagazine.com翻译&编辑:DamnDigital, (转载请说明翻译来源, 尊重我们的努力) 网页(以及交互设计,界面设计,等)传统上是基于可交付的形式来执行.框架.网站地图.流程图.内容清单.分类系统.原型和规范文档(又称"The Spec"),帮助定义网站在其起步阶段的执行.这些结果构成了一个系统的用户体验的衡量标准. 随着时

一个完整的交互设计流程是怎样的?

  一.定性研究(Qualitative Research):针对可能使用你的产品的人,可以是问卷.访谈-- 二.确定人物角色(Persona):即产品的典型用户,可以有一种或几种.例如可以有一个人物角色叫CEO. 三.写问题脚本(Problem Scenario):罗列人物角色在使用产品时可能遇到的问题,可以整理成一个故事便于别人理解 四.写动作脚本(Action Scenario):像写故事一样,写人物角色在使用你设计好的产品时,发生的细节.注意,这个时候你的交互方案的概念模型已经基本成型了

产品交互设计实例:首都机场的点烟器

文章描述:产品交互设计实例:首都机场的点烟器. 首都机场的吸烟室里并不像其他机场那样放几个固定的打火机,而是点烟器,和车载点烟器基本是一样的:先按下加热,加热好后,它会自动弹起,拔出来,里面的电阻丝已经是红红的了,就可以点烟了.上图为车载点烟器,与首都机场的点烟器一样,加热过程中只是被按下去了,未显示进度,也未能形象的表现出"正在加热"的含义. 我走到点烟器的近前,按下,让它加热,然后等待,等了一会儿还不见动静,不知是仍在加热还是出了故障.吸烟室里很多人,感觉自己被别人看着,不会用这玩

交互设计中如何增加趣味性、提升愉悦度?

  「好的产品关注功能,优秀的产品关注情感」 趣味性.愉悦度,这些都是针对用户情感化设计的领域. 功能.实用性,这些需要很强逻辑性的事物很难和情感产生关联,并不是指这些不重要,它们很重要,它们是基础,但缺少了情感的作用,很难产生一些东西,像:快乐.愉悦.悲伤.美- 花.大海.春天.小屋- 这些都是很普通的名词,但将它们富有诗意的组合在一起:我有一所房子,面朝大海,春暖花开.接受者会投入不同的情绪去理解这样一个组合. 上面这些名词就像我们在设计过程当中所遇到的各种元素,按键.菜单.icon.动态效

网站用户体验分析:交互设计7大定律

"除非有更好的选择,否则就遵从标准",那在交互设计领域都有哪些法则定律被认作了标准了呢? Alan Cooper:除非有更好的选择,否则就遵从标准. 作为交互设计之父的阿兰·库珀最为人熟知的或许就是这句"除非有更好的选择,否则就遵从标准"了,在交互设计领域有很多经过了时间的验证的法则定律被认作了标准,那么你都知道都有哪些吗? 1. Fitts' Law / 菲茨定律(费茨法则) 定律内容:从一个起始位置移动到一个最终目标所需的时间由两个参数来决定,到目标的距离和目标

The Story of Mr.Gray — Web 交互设计“灰色”的8类应用

在进行Web的交互设计中,颜色信息的传达也是不可或缺的一部分.我们常会发现许多"灰色"的应用,他们的出现总是不动声色而又恰如其分,维持了整个页面的平衡与统一.本文将从一些实际案例出发,阐述"灰色"在Web交互设计中的8类应用. 首先让Mr.Gray 来做个简单的自我介绍吧: 狭义的 Mr.Gray 狭义的Mr.Gray, 是指没有色相与纯度,只有明度,将黑色和白色混和而成的一种中间色. 依据不同分类方法可大体分为浅灰与深灰两种,亦可分为暖灰与冷灰. 相对来说,其特征