交互自查表帮你查漏补缺(移动端)

交互设计师在日常的工作项目中,可能经常遇到以下状况:产品上线后发现缺失网络信号弱加载不出数据的提示页面;不同页面相同属性的操作交互形式不一致;点赞评论的数值没有做极限值规定预埋了隐形bug等等。

交互设计师在实际项目中,不仅要考虑正常场景的任务流和页面流,还要从特殊场景、操作与反馈、页面状态,数值限制条件等多个维度完善项目。因此一份尽可能全面的交互自查表,能够帮你在项目交付前完成最后的查漏补缺。本文将结合图例,针对移动端交互自查表内容,提取重要场景展开说明。

一. 特殊场景复查

1. 网络状态

1.1 没有网络(无网)

这是最常见的一种异常场景,用户在浏览页面时突然断网,依据尼尔森的可用性原则之一:帮助用户识别当前状态,并从错误中恢复。需要给用户提示断网以及解决方式。(截图中抖音的断网场景最全面)

1.2 网络环境切换

是指从WiFi切换到数据流量环境时,是否需要提示和状态变化。一般如视频类网站流量消耗较大时,当出现网络状态切换需要中断工作流,并给出用户流量消耗提示,请用户自己决定是否继续。

下图中苏宁易购榴莲视频有一个小细节没有考虑到:网络状态切换后只是暂停播放视频,并没有给出异常原因提示,用户在观看视频时突然中断却不知道原因在哪,并且点击已暂停的视频仍然没有耗费流量提示。这些细节点对用户来说都是不够友好的。

1.3网络超时、网络太慢以及加载失败

此外断网、弱网、加载失败后是否自动加载,都需要给出恰当的提示以及相应的解决方案。

2.异常状态

2.1 数据相关

常见的包括:进入页面后服务器获取不到数据,搜索无结果状态,数据加载时间较长时预设默认图片、状态、内容框架等。如下图今日头条内容加载动图,人人都是产品经理移动端首页加载占位图,以及网易严选搜索无结果提示图文。

2.2 页面状态提示

对于即将上线、已失效、服务下线、系统繁忙等状态给出相应的提示。并且需要考虑出错页面内容的情感化表达,以减弱用户的受挫感。

2.3 异常操作

比如连续多次点击给予怎样的反馈,同一设备频繁的退出登录增加验证码认证;连续破坏性操作多项内容时是否需要身份验证等。

3.模式

3.1 编辑模式

在一些阅读类应用,当用户输入书评或评论后,出现意外情况退出是否提示保存或者自动保存已填信息。如下图,网易蜗牛读书填写书评后,未保存退出系统自动保存草稿。微信读书填写书评后用户未保存退出,弹框提示让用户自己选择是否退出,系统并不会自动保存已编辑内容。

3.2 无图或省流量模式

对于新闻资讯类应用,图片是消耗流量的主要因素,因此这些应用内提供了“非Wi-Fi下不下载图片”或“非Wi-Fi下加载消耗流量最少的图片”。如下图轻芒阅读和知乎采用前者,而ZAKER采用了后者。

4.账号权限

登录和未登录权限差别:目前绝大多数应用,用户在无账号登录情况下仍然可以浏览信息,但是当执行某操作比如购买行为之后,则需要登录用户账号才可以。另外有些查询个人社保公积金的应用,账号未登录的情况下是无法查看的。(如下图淘宝和我的南京App)

二. 操作与反馈复查

1. A状态到B状态

1.1 结果反馈

初始页面及页面状态切换是否有反馈,反馈方式是否恰当。常见的反馈方式有小红点或数字(轻度),toast或悬浮按钮(中度),弹框(重度)。常见的结果反馈类型有成功、失败、空和无权限。

1.2 关联性

是指两个状态之间的承接关系是否明确。目前大多数页面是通过不同层级之间采用相同的交互方式,为用户呈现页面跳转前后的逻辑关系。而一些用户体验更友好的应用已经通过新的交互方式更直观简单的体现关联性,如下图中网易蜗牛读书的分享页面,以及最美应用打开内容详情页的交互动效。

1.3 取消或撤回

用户正在执行状态中是否可以取消正在发送的内容;已发送信息是否支持撤回;考虑到服务器缓存等因素是否要对可撤销时长有时间限制。这一点以微信为例说明:微信语音可以取消正在发送的信息;并且已经发送的语音在两分钟内支持撤回。

2. 刷新和加载

需要确定刷新的方式:手动还是自动。刷新的交互方式:顶部下拉、底部上拉或刷新按钮。以及刷新失败如何提示。目前大多数移动应用采用顶部下拉的方式刷新数据,如下图网易严选。

另外对于内容布局是瀑布流形式的采用底部上拉的交互方式加载数据,具体每次刷新的内容数量依据服务器性能决定。

三. 数值限制条件复查

可分为范围值和极限值。范围值是指数据的取值范围。极限值往往容易被忽略,是指数据的显示限制。下图中网易云音乐歌曲评论列表页点赞数遵循一定的规则,并非完全的展示数字。

另外对于社交类和阅读类应用,往往在页面一行内同时展示点赞数和评论数,这里需要考虑单行宽度限制,比如数值1000以内直接显示数字,超过1000显示为数字+汉子的样式“1.5k”,超过10000显示为“1w”,且最大值为999w。

四. 页面状态复查

一般分为默认状态、正常状态和特殊状态。默认状态指默认的文案、选项,以及调用系统数字键盘还是文本键盘等。正常状态指用户正常使用时会遇到的状态。特殊状态是前面特殊场景中也提到过的,指特殊场景才会出现的状态。例如无数据情况/加载失败/网络错误。

五. 其他维度复查

除了以上提到的四个重要的交互走查维度之外,交互设计师也要在完成交互产出物之后,在其他维度进行全面复查,包括:

功能自查:功能是否缺失?新功能是否对旧功能操作有影响?信息层级是否清楚?该功能是否具有技术可行性…

流程自查:核心任务流程是否形成闭环;页面流的逻辑跳转是否流畅走通;退出/撤回/返回/过期失效等异常流程是否考虑…

文案自查:文案是否通俗易懂;重要复杂的操作内容是否有清晰的解释说明;相同场景文案是否保持一致;文案长度是否有限制…

动效自查:该动效是否是必须的;该动效是否明确表达出含义;动效出现的时机是否恰当;动效是否流畅且不损耗系统性能…

控件自查:按钮类型及状态使用是否恰当;正确使用文本框/tab切/系统键盘…

弹框自查:使用弹框的操作是否优先级较高;核心重要的功能是否有二次确认提示…

六. 文末总结

以上是我对移动端交互自查表重要场景的梳理,希望对你工作项目中交互产出物的查漏补缺有所帮助。如果你有需要补充的内容,欢迎留言交流。

Viksea(公众号)

作者:Viksea

(0)

相关推荐

  • [交互自查表]可用性优化实录

    作为交互设计师,大家对交互自查表必然不会陌生,相信不少同学也尝试过建立自己的自查表.但不知道大家的这张自查表,最后是否有真正利用起来呢?其实,在我们的团队,交互自查表就经历过一段被束之高阁的时期,这份 ...

  • 手把手教你打造【0失误神器】——交互设计自查表

    前言 之前做一个H5活动,忘记了要给"立即抽卡"按钮加抖动的动效,发现的时候已经没有时间再修改了,最终上线的活动是一个静止的按钮.虽然并没有影响活动本身,但是我们都知道,动态的按钮 ...

  • 设计自查表:快速搞定分支流程和异常情况

    写在前面的话: 先来看一个比较老的梗,把大象装进冰箱需要几步?相信大家都知道 . 打开冰箱门-–把大象放进去-–把冰箱门关上 流程图如下: 这应该是大多数人,按照直观感觉都能想到的正常理想操作顺序. ...

  • 谁动了我的电脑?巧用系统帮你查真相

    谁动了我的电脑?巧用系统帮你查真相 我们的电脑中或多或少都存放着自己的一些隐私,即使这些隐私不重要,但仍然不希望暴露在别人眼皮底下,所以我们一般都不太愿意自己的电脑被别人随意使用。可就是有某些人不顾及 ...

  • Excel中“多排表”帮你省钱又美容

    Excel中"多排表"帮你省钱又美容 步骤/方法 01 高考成绩刚刚出来,单位领导要求将全市七千多名考生的成绩打印出来,可只需要考生的三列信息(准考证号.姓名和总分).这样,需要打 ...

  • 让Excel帮你查邮编

    公司因业务需要,经常要向外界发送大量信函,因此查找邮政编码,就成了一件非常头痛的事,于是,我就用Excel制作了一个简单的查询表,使用起来觉得很方便,现在就推荐给大家. 步骤/方法 01 公司因业务需 ...

  • 好用的办公软件有哪些(如何快速掌握办公软件的使用)

    "宁可累死自己,也要卷死别人"现在HR招聘时总会问:"你会的基本办公软件有哪些?"你:(一脸懵),眨着24K大眼睛,脑袋里迅速过一遍自己会的软件,但再看看别人, ...

  • 高手经验:进行APP设计改版的15个技巧

    提到这个话题有两层不同的讨论方向,在工作中对公司项目进行设计改版和利用业余时间进行自由主题的改版练习.这次我们主要以后者为出发点进行讨论,其目的是为了给部分设计师在利用自己业余时间上面探索出一个新的方 ...

  • UI设计师如何有效的跨团队、多角色沟通?

    作为设计方接口人,我近期参与了某产品新版本的交互设计及开发跟进工作.该项目的产品规划.设计.开发.运营由京深两地四方多个团队合作进行.结合自身项目经历,现将我对跨团队多角色沟通的感悟与加以总结,希望对 ...