摘:体验设计中选择什么形式,是横滑还是竖滑,大致分为3个层次:目标、效率、然后是易用。我们设计产品时考虑是否满足了这3个层级后,再考虑什么交互方式更好就会明确了。
设计说很酷,产品说No
去年,我们在一个福卡的项目上,因为产品数量的增加,需要在原来资源位增加展示多个产品,我们给出的优化方案是通过横滑交互操作展示3~5个的理财产品,结果产品经理说不行,他说用户只能看到一个产品,后面的几个产品可见性太低,他们希望用户能同时看到更多产品的展示,这样增加提升转化的机会,用户可能对第一个不感兴趣,但可能会对第2 个、第3个产品感兴趣。
横滑or竖滑?
那究竟该如何选择呢?什么情况下用横滑?什么情况下竖滑呢?
横滑:以为水平方向为轴,通过左右移动形式展示内容,这种交互方式用于在同一纬度下的多内容展示。
竖滑:以纵向为轴,通过上下移动形式展现内容,对用户来说只要不断往下滑动屏幕,就能加载展示更多的内容。
横滑竖滑两者之间的优缺点
优点:
(1)横滑,交互形式很酷,层级关系简单,视觉上比较突出,这几点是设计师喜欢用这样形式的原因。
(2)竖滑,是业务方喜欢用的方式,因为屏效展示率好,在有限的区域可展现内容更多,用户操作起来简单方便。
缺点:
(1)横滑:
① 内容可见性差,通常越往后,后面的内容点击量就越低。
② 用户习惯:用户对横滑的操作具有一定的学习成本,需要通过识别一些信号来操作,而竖滑就不同了,用户无意识的操作手机的习惯。
(2)竖滑:
① 增加用户操作频率,内容过多容易分散用户注意力。
如何合理使用这两个交互形式呢?
1、以内容维度为切入点
同一维度内容展示适合“左右横滑”,比如一个专题下的不同内容。尤其是曝光率不高,信息重要程度不那么高的内容。
多维度的内容适合纵向滑动,尤其对于首页多种通常业务的内容聚合,通常会采用大标题进行不同模块的内容区分,
2、从数量判断
一般来说,横滑展示5-8个内容为佳,过少会导致一滑就见底,过多还不如引导用户去下一级更多主题页面,看到更多内容。
在重要的区域或流量地方未来展示更多内容,比如feed流适合用纵滑方式展现。
3、展示可见性效率
自动展示:banner 一般在头部,用户横滑的操作带来不够便捷,通常会在几秒后自动横切过来,这个自动展示的效果就提升了内容可见性。
部分隐藏:通过露出遮挡部分文字和图片,来提升后面更多内容。
引导箭头、底部加载:当滑动到卡片最后一张时才露出“查看全部”,为那些看到最后还意犹未尽的用户一个出口。
4、 内容主次
纵向和横向优先级常常导致主次判断失误,在首页聚合页中,头部位置很少建议用横滑卡片,会干饶下一层内容重要性,一般,在页面底部不重要的内容,卡片采用横滑展示会比较合适。
最后,体验设计中选择什么形式,是横滑还是竖滑,大致分为3个层次:目标、效率、然后是易用。
我们设计产品时考虑是否满足了这3个层级后,再考虑什么交互方式更好就会明确了。
总的来说,横滑看起来很酷,但需要慎用,过多使用导致可见效率不高,其次,交互操作一横一纵导致用户操作路线乱。
原文地址:咏舍(公众号)
作者:咏舍