交互的一大价值即从用户的角度出发,帮助产品梳理业务逻辑,将抽象的需求转化为具体的解决方案,做出的设计方案,既要满足用户需求,用户可以通过页面呈现更容易地找到自己想要的“东西”;又要满足产品目标,通过页面信息架构设计,去教育、说服、引导用户完成产品目标。在做日常需求时会发现,设计师常常会由于信息层级的表达不清晰、信息强弱关系调整方面反复改稿。在具体的项目中,如何提高交互高中信息层级的表达呢?
一、确认你所理解的需求是否准确
前端时间,团队中一个初级交互设计接到一个商城圣诞大促的需求,评审时
产品经理说:“这次需求最重要的是通过两个游戏提高页面分享率,测试这种游戏化玩法与日常大促相比,是否能提高分享率。游戏1的玩法是……游戏2的玩法是……页面的下半部分铺爆品推荐。”
然后整个评审会大家都在围绕着游戏的玩法以及实现讨论。因为需求较急,小姑娘回来后立马就开始想两个游戏的实现,做了一版草图给需求方看。
产品经理又说:“哎呀我们这个需求最重要的是游戏2,游戏1要弱化弱化。“
然后设计师又做了一版草图给需求方看。
运营说:”我们要首页露出一部分爆品推荐的,现在游戏篇幅太大了,游戏不重要。”
然后,我们把产品经理、运营策划叫在一起,仔细聊了聊这个需求的背景和目标发现,需求方最大的诉求是在圣诞节前七天每天推荐一个商城专场,进行优惠力度大的商品推荐,圣诞节当天是多商城集合狂欢,游戏是为了促进活动的分享,也为最后一天的活动引流。
经过了一天两次过稿,终于把需求方的真实需求”挤“出来了,这也给我们的初级交互上了一课,接到需求时先不急着画图,应该确保需求方描述的需求是准确的,你理解的需求也是准确的。
1.确保需求方描述的需求准确
工作中会发现,需求的发起人和执行人往往不是同一人,当需求经过多人之手,或者PM本身未能理解或没有传达清楚,需求传递到设计师手里经常已经变了味道。还有些需求方不会主动告知设计师需求的背景和目标;还有些需求方喜欢上来就从页面布局、功能实现方面讲解需求。有时经验尚浅的设计师会被需求方的要求带走,不深究需求本身是否合理,导致按照需求方的描述做的交互稿无法满足需求本身,交互稿会反复改稿。
因此在开始一个需求前,要确保需求方描述的需求准确至关重要,这直接影响后续的工作方向是否正确。探讨需求时,设计师要了解需求的目标是什么,包括运营、产品、商务等方面目标?需求给目标用户提供了什么价值?
2.确保你理解的需求准确
对于同一个需求,可能每个人的理解是不一样的,交互设计师在拿到需求以后,认真研究需求,整理出发现的问题,以便于产品经理沟通时寻求解答。沟通时,要将自己对需求的理解和简单的设计构思阐述给产品经理,以确保自己的理解和设计构想准确,避免因为需求理解不一致造成的后续返工。
二、精准分析信息优先级
确认你所理解的需求与需求方一致后,在开始设计前,还要了解页面信息层级和用户的核心行为流。用户在不同的阶段会产生不同的行为,不同阶段的页面中的核心功能和用户使用频次也会不同,所以首先要根据用户行为定位页面,帮助分析页面中的信息优先级。
每个页面都有传递给用户的核心内容,将页面中的信息按照优先级分层次,把真正重要的功能/内容/元素放到突出的位置,以最多的界面资源去展示它们,而将次要的部分,弱化、隐藏起来,再次的部分,则索性砍掉。使产品功能主次分明,用户能很容易地找到自己想要的功能,完成特定目标,交互稿呈现上要让用户在使用产品时第一时间就可以看到自己想要的信息。
信息优先级划分:
优先级1:重要信息必须强化展示
优先级2:重要信息但不用强化展示
优先级3:必须展示但信息并不重要
罗列页面中需要展示的所有信息,按照优先级划进行信息分层级,并与需求方确认,确保双方对信息层级的划分认知一致,避免后期改稿扯皮。
三、交互稿更好地传达信息层级
交互设计师的交互方案,最终都会由交互稿呈现。在交互稿中,如何才能更好地表达信息层级呢?如何保证交互设计师不在场讲解的情况下,上下游团队也能很好地理解交互稿中传达的信息呢?设计师应有意识地分析信息优先级,了解哪些视觉表现手法可以建立信息层级及每一种方法背后的理论依据,不仅仅凭感觉做设计。
一般来讲,交互稿使用黑白灰色调,利用页面布局、深浅、大小、样式对比在页面中表现出信息层级以及功能逻辑。交互稿中应尽量少地使用彩色,彩色一般在表示警示、错误提示或设计师要表达特定意思的时候才会用到。设计中对优先级的把握就是要让我们能够将真正重要的功能/内容/元素放到突出的位置,以最多的界面资源去展示它们,而将次要的部分,弱化、隐藏起来,再次的部分,则索性砍掉。
四、利用快速可用性测试提高页面理解力
在做界面交互时,我们一直强调要站在用户角度思考问题,客观地理解用户的内心感受及真实诉求,设计出交互友好的界面,让用户可以在一定的“信息规划”下更容易的找到自己想要的“东西”。而我们投入到某个需求时,对需求的方方面面有了深入地了解,正是因为设计师本身对需求的足够熟悉度,导致有时会无法以一个普通用户对页面信息的理解程度看待页面。
比如在做的这个圣诞节活动中,需求方想通过一个游戏及奖励机制提高用户的分享率,提高活动的站外曝光,吸引更多的人参与到活动中来。
经讨论,我们设计了拼图瓜分卡瓜分10万红包的游戏,用户将活动页面分享给微信好友,微信好友帮“我”拼一块拼图,每拼成一张瓜分卡就有一次瓜分机会,12月25日当天用户来到页面,触发瓜分按钮,瓜分价值10万的红包。当完成交互页面后,我们将页面拿给对该需求毫不了解的非设计岗位的同事做可用性测试时发现几个问题:
①支付宝的新年五福瓜分现金玩法深入人心,因此用户以为拼好瓜分卡后12月25日后台自动瓜分红包,不需要圣诞当日回到该页面触发瓜分操作。
②用户无法快速理解游戏规则,部分用户不知”谁“来拼图,拼图后获得什么奖励
③用户不懂最多可以拼三张瓜分卡,每张瓜分卡可瓜分一次的概念
问题①:原方案中有拼图、瓜分卡、瓜分10万红包三个概念,规则复杂,用户理解成本高,且瓜分卡与10万红包发放规则无法完美契合,引发歧义,因此我们摒弃掉瓜分卡的概念,改为拼图抽奖,更容易理解。抽奖按钮加重,明确告知用户抽奖时间,且加入抽奖倒计时增加紧迫感。
问题②:主文案中明确告知用户“做什么”(邀请好友拼图)、“为什么做”(赢抽奖机会)、“利益驱动点”(奖池10万红包),副标题再加入“具体规则”(拼成一张图得1次抽奖机会,每次100%中奖)。
问题③:采用3张拼图叠加的展现形式,且和拼图下方的三个“图槽”一一对应,在视觉上帮助用户理解最多可拼三张拼图,赢三次抽奖机会的概念。
当解决完上述问题后,我们拿修改后的交互稿去找新的测试用户看时,绝大部分用户能很容易地明白游戏玩法。
五、设计跟踪发现问题总结经验
1.点击热力图
交互稿完成后交付视觉设计师完成视觉稿,再开发测试上线,通常一个需求告一段落,但不能忽视后续设计跟踪。当需求上线后,我们会利用点击热力图插件实时跟踪上线中的数据动态。热力图可以真实反应用户在页面中的点击行为,从而帮助我们分析用户行为及动机,监测用户行为是否与我们的设计目标相符。比如用户的点击行为是否集中在我们想要引导用户去点击的区块;比如页面中一些不能点击的区块反而点击密度高,设计时是否没有考虑周全。
如下图中,用户的点击多集中在“邀请好友帮我拼”按钮上,而“抽奖规则”的点击量较小,表明绝大部分用户在不看规则的情况下,是可以理解活动规则并按照设计引导进行操作的。
而在另一个活动页面中,大奖区域的点击密度较高,可以推测用户想要查看大奖具体信息的意愿较强,而原设计中我们未设计该功能,导致页面未能满足用户的需求,造成体验缺失。
2.数据埋点
每次需求都会根据需要进行数据埋点,来搜集用户的真实行为数据,然后利用数据分析方法帮助我们分数据,从而发现规律或得到结论,为后续的迭代提供历史数据依据。比如利用漏斗分析法分析用户在整条流程中各个节点的流失和转化,从而发现问题节点。再利用热力图分析该节点页面的点击行为、查看该页面更详细的各项数据指标,如停留时长等。