交互方案设计阶段中需要重点解决的3大点

  • A+
所属分类:经验思维

本文来源: 潘达(公众号:潘达的设计小站), 共 3450 字

本文主要想和大家探讨的是在具体的交互方案设计阶段中,需重点解决的几个点,对于交互设计在其他阶段,如需求挖掘与收集、场景与人物建模、需求归类与优先级定义、后期验证等阶段需重点解决的问题,有机会的话在后续的文章中和大家另做探讨。接下来我们就详细聊聊具体的方案设计阶段中,交互设计需要重点解决的结构认知、状态认知以及效率提速这三个点。

结构认知

结构认知是指用户刚开始接触到产品或初期使用产品时,对产品主要提供的内容、功能以及价值主张的认知。若产品未能让用户形成清晰的结构认知,则容易使用户对产品产生杂乱无章、毫无重点的印象,容易使用户迷失,从而导致用户放弃使用我们的产品。那么,该如何帮助用户形成清晰的结构认知呢?我们可以从以下几个方面去优化。

1.根据不同产品类型选择合适的导航结构;

导航结构它类似于一本书的目录大纲,可以方便的让你知道本书主要讲什么内容以及快速的将你导航至你想要去的章节。下面具体聊聊移动端常见的几种基本的导航结构以及每种结构主要适用的场景。

a.标签结构

此类结构适用于产品主要模块不多,最多不超过5个,且各模块之间的重要程度差不多,一般用户有在各个模块之间经常来回切换的需求。如淘宝、网易严选等。

交互方案设计阶段中需要重点解决的3大点

b.Tab结构

此类结构经常与标签结构一起搭配出现,以呈现更多更复杂的信息结构。如新闻资讯类的app经常使用此结构。

交互方案设计阶段中需要重点解决的3大点

c.抽屉结构

此类结构主要用于那些想重点突出产品主要功能,而将其他边缘功能弱化的场景,目的是尽可能的给用户制造沉浸感。如知乎日报等

交互方案设计阶段中需要重点解决的3大点

d.宫格结构

此类结构适用于产品主要模块不多,且这些模块都是作为功能入口存在,一般用户不会有在各个模块之间频繁切换的需求。如美图秀秀、滴墨书摘等

交互方案设计阶段中需要重点解决的3大点

e.轮播结构

此类结构适用于每个模块内容较少且需要有较大视觉冲击力的展现在用户面前的场景。如最美应用、医账通等

交互方案设计阶段中需要重点解决的3大点

f.舵式结构

此类结构可以算的上市标签结构的变体,适用于产品模块不多,最多不超过5个,但其中某个模块或功能是非常重要且高频用到的,需要重点强调。如闲、有道云笔记等

交互方案设计阶段中需要重点解决的3大点

2.利用相关认知心理学知识构建布局;

选择了合适的导航结构后,接下来重点要考虑的就是页面中的布局了,而页面的布局又属首屏最重要。诺曼说过,好看的界面让人觉得用户体验更加,更好用。所以“好看”是首屏的不可或缺的一个因素。另外,首屏是用户进入到APP中的第一印象,如果设计的不好,产品被用户放弃的概率就大大的提升了,所以我们在设计首屏的时候,一定要遵循“首屏三要素”这个原则。

首屏三要素是指在APP首页一定要让用户知道“我是谁(Who)”、“我有什么内容(What)”、“什么内容能吸引你(How)”。

交互方案设计阶段中需要重点解决的3大点

下面我举两个例子,帮助大家理解一下首屏三要素。

例1:苹果官网,个人认为它在首屏三要素上做的非常不错;

交互方案设计阶段中需要重点解决的3大点

例2:旧版的12306官网,个人认为首屏三要素做的就比较差;但是经过大家的吐槽后,全新的12306官网还是很不错的;

交互方案设计阶段中需要重点解决的3大点

大家看了旧版之后或许会问,旧版的首屏也有三要素,但怎么就遭到大家的吐槽呢?这是因为它未能根据用户当前场景下的核心任务或需求将三要素进行合理布局。用户进来后,核心任务是购票或者退改签,而旧版本页面的导航和中间大部分位置提供的内容都与用户的核心任务关系不大,反而将购票和退改签放在了页面不易发现的左下角落里,所以无法形成吸引;新版本根据用户认知习惯,将核心任务突出显示,并利用格式塔原理中的接近原则与相似原则将页面中其他内容进行合理布局,最终新版如下图所示

交互方案设计阶段中需要重点解决的3大点

状态认知

状态认知是指用户对自己当前所处何种状态、过去已经发生以及未来去向的认知。状态认知的好坏,映射至用户的心理感受就是“控制感”的强弱,失去控制,给用户造成焦躁的心理,随时可控,用户有安全感,体验会越好;那么,该如何帮助用户形成明确的状态认知呢?

1.遵循所见即所得原则

所见即所得最早是由菲利普·威尔逊所提出的一种电脑文本编辑器方面的技术,即用户在编辑文档时看到的样子和最终得到的成品样子是一样的,比如常用的Word就是一种“所见即所得”的软件,你在编辑文档时看到的样式和文档打印出来的样式是一致的。所见即所得它能及时的将最终结果反馈给用户,让用户提前进行决策,提高使用效率,从而增加了用户的状态认知感。例如,ai软件调整字体样式时,鼠标移动到预设的样式上时字体立即变为相对应的字体样式,用户明确的知道该字体是否为自己想要的。

交互方案设计阶段中需要重点解决的3大点

2.让用户随时可控

不管用户处于某个页面或者状态下,我们应该让用户有对当前状态操作的权利,增强用户的控制感。最常见的例子就是弱网环境下,loading状态下能否让用户主动操作。左图网易126邮箱loading状态下,页面所有操作被禁用,用户只能干等,权利被剥夺;右图上海公交APP给用户“取消”的权利,让用户自主决定是否继续等下去,控制感更强,体验更好。

交互方案设计阶段中需要重点解决的3大点

3.清晰的状态提醒

状态提醒就好比你使用产品过程中的一个小助手,它会告诉你当前处于什么位置,你能做什么以及对你所做的操作给出“答复”,甚至给出人性化的建议,让用户顺利达成自己的目标。例如,支付宝会员领积分界面,最开始上线的一个版本,界面只显示了可用积分是多少和旁边散落的小积分,以至于进入这个界面后我懵X了几秒钟,不知道该如何操作。后来支付宝的设计同学可能也发现了这个问题,没过多久时间他们就对这个界面进行了优化,在界面中增加了“点击领取”积分的状态提醒,从而提升了体验。

交互方案设计阶段中需要重点解决的3大点

4.良好的防错与容错

用户在使用产品的过程中,有时候会分心或者误操作,那么我们在设计的时候应该尽量防止用户误操作,或者误操作之后能让用户较小成本的返回。例如,金融产品在开户绑卡时,当用户填写完信息进行下一步时会再次让用户确认一下关键信息,防止出现错误的信息,导致开户绑卡失败。

交互方案设计阶段中需要重点解决的3大点

接下来这个例子,是关于滴滴的某个旧版本的。某一次,我用滴滴成功叫到车后,不小心碰到左上角的返回按钮,就直接返回到了初始的叫车界面,而我还没记清楚来接我的车的信息,我想再次进入到成功界面查看车辆信息时,页面路径比较隐蔽且比较长,增加了我的焦虑感和使用难度。不过好在,滴滴现在进行了版本的优化,在初始叫车界面比较显眼的地方增加了再次进入成功叫车界面的入口,提升了容错性。

交互方案设计阶段中需要重点解决的3大点

效率提速

相信大家应该会经常看到用户体验的一个公式“用户体验=完成任务的成就感-期待 ”,从这个公式可以得出,提升用户体验要么提高用户完成任务的成就感,要么降低用户的期待,而提升效率就是降低用户期待的手段之一。那么,该如何提升用户的使用效率呢,我们可以从以下几个方面入手。

1.根据相关定律优化交互行为

菲茨定律为我们指明:点击区域越大,用户越容易操作,使用效率越高,体验会更好。例如,支付宝线下红包付款就是通过菲茨定律进行了优化,提升了使用效率。

交互方案设计阶段中需要重点解决的3大点

2.让用户快速识别或记忆

根据人的记忆和认知习惯,在产品设计中尽可能的遵循已有的习惯和认知,提高记忆或识别的速度。如银行卡与手机号的显示可采用方便用户识别和记忆的格式。

交互方案设计阶段中需要重点解决的3大点

3.优化等待体验

用户在使用产品的过程中不可避免的会遇到等待的过程,有等待意味着效率会降低,但是我们可以用设计的手段和心理学的相关知识在主观感受上让用户觉得等待的时间比较短,从而达到提升效率的目的。下面我简单的列举了几个例子,如果大家对“如何提升等待体验”感兴趣的话,可以查看我的另外一篇文章《6个方法,快速提升“交互等待”体验》。

交互方案设计阶段中需要重点解决的3大点

4.减少干扰

用户在使用产品的过程中,尽量不要出现干扰用户的信息。例如,头条的西瓜视频,用户在看视频的时候,调节音量的提示信息很干扰用户,降低了对视频信息内容的获取,体验较差;相比而言,抖音这方面优化的比较好,它将音量调节的提示信息很弱的显示在视频区域外,不干扰用户看视频,这样的体验不错。

交互方案设计阶段中需要重点解决的3大点

5.更加体贴或更进一步

在用户使用产品的过程中,若我们能提前预判用户接下来的操作而做好准备或者帮助用户省去一些操作的话,那这样就会大大的提升效率,提升用户对产品的好感度。例如,苹果手机连了WiFi后,只要在附近打开笔记本电脑,手机系统就会询问你是否要将密码共享给电脑,省去了用户再次在电脑上输入WiFi密码的繁琐步骤,真是太贴心了。

交互方案设计阶段中需要重点解决的3大点

再如,有些做的比较好的搜索功能,当用户输入拼音时,它也会智能的去解析用户的意图,从而给出相关的搜索推荐,从而提升搜索效率。

交互方案设计阶段中需要重点解决的3大点

再比如,在发邮件的时候,当你输入@后,系统会立即提供常用的邮箱后缀给用户选择,减少用户的输入。

交互方案设计阶段中需要重点解决的3大点

写在最后

本文主要是将网上学到的知识与自己在生活中使用产品时遇到的正反案例进行总结归纳,希望能给大家一些启发,共同进步。



发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: