让你移动APP脱颖而出的小细节

Little Big Details For Your Mobile App
by Nick Babich让你移动APP脱颖而出的小细节

让你移动APP脱颖而出的小细节

你应用程序的成功,基于很多因素,但总的来说,用户体验还是最重要的。一个能在市场上脱颖而出的应用,用户体验一定很棒。对移动端产品的用户体验来说,追求最佳的体验是一条非常可靠的方法。在整体产品设计的时候,我们往往很容易忽略一些看起来很好,但又感觉不必要的设计元素。然而,好的与惊人的用户体验之间的区别往往就在于我们这些贴切的小细节的设计。
Your app’s success is based on a combination of factors, but the overall user experience tops them all. The apps that stand out in the market are those that deliver great UX. When it comes down to designing for mobile UX, sticking to best practices is a solid way to go, but during the creation of the big picture it’s fairly easy to skimp over design elements that feel like nice to have but not necessary. However, the difference between creating good experiences and amazing experiences often comes down to how thoughtful we can design these small details.

在这篇文章里,你会明白,为什么说这些小细节的设计与很多显著的设计元素一样重要,这些小细节的设计,同样决定着你的应用的成功

In this article you’ll see why these little big details are just as important as the more obvious elements of your design, and how they help determine the success of your app.让你移动APP脱

启动页
Slash Screen

当用户打开 app 时,最不能做的事情就是让他们等待。但是如果 app 的初始设置非常耗时,又不可能优化该怎么办?你不得不让用户等。如果他们愿意等,你得知道如何 吸引他们。启动页解决了等待的问题,让你有一个简洁有力的窗口来吸引用户。

When a user launches your app, the last thing you want to do is tell them to wait. But what if your app has a time-consuming initial setup phase and there’s impossible to optimize this step? You have to ask users to wait. And if they should wait, you should figure out how to engage them . A splash screen solves the waiting problem and gives you a short but vital window to engage a user in your proposition.

2-3

2-2

这里有一些小贴士,在设计启动页的时候记得注意:
Here’s a few tips to keep in mind when you’ll design a splash screen:
Google 和 Apple 都建议用启动页 模拟更快的加载 来提高用户体验。启动页给到用户即时反馈,表示 app 已经启动并正在加载。 为了保证人们等待的时候不厌倦,给他们一些 娱乐:有意思的,意想不到的,或者任何可以抓住用户注意力的东西,时间长到够 app 启动就好。
Both Google and Apple suggest to use the splash screen to improve the user experience by simulating faster loading times . Splash screen gives the user immediate feedback that the app has started and is loading. To ensure people don’t get bored while waiting for something to happen, offer them some distraction: something fun, something unexpected or anything else that catches your users’ attention long enough for your app to load.

3

如果 app 的初始设置超过 10 秒钟,考虑使用 进度条 来表示正在加载。记住,不确定时间的等待给人的感觉要比确定时间的等待更加漫长。所以,你要给用户一个清晰的标识,他们需要等多长时间。
If your app has a initial setup phase, which takes more than 10 seconds, consider usingprogress indicators to show that loading is in progress. Keep in mind that uncertain waits are longer than known, finite waits . Thus, you should give your users a clear indication of how long they need to wait .

3-3
Make the loading process feel natural by using progress bars.
通过使用进度条让加载过程更自然

让你移动APP脱颖而出的小细节

空状态
Empty States

我们通常会设计一个丰满的界面,布局中的所有元素都完美的放置,看上去很美。但是如果界面正在等待用户操作,该怎么设计?我要说的就是空状态。设计空状态是非常重要的,因为即使它是一个临时状态,它也会是 app 中的一份子, 并且对用户 有用。
空状态的意义不仅是一个装饰。除了向用户提示界面上将要展现的内容,它还可以作为一种 导引 (介绍 app,展示为用户做的事情),或者 助手 (出错时的屏幕)。这两种情况下,你都希望用户能做点什么事情,所以,屏幕不会立即变为空状态。
做好这4个细节设计,让你的移动APP 用户体验脱颖而出
We normally design for a populated interface where everything in the layout perfectly arranged and looks great. But how should we design our screen when it’s pending user action? I’m talking about empty (or blank) states . Designing an empty state is a very important moment, because even it’s meant to be just a temporary stage it should be a natural part of your app and be helpful for your users.

The purpose of a empty state is more than a just decoration. Besides informing the user about what content to expect on the page, empty states can also act as a type of onboarding (they introduce the app and demonstrate what it does to your users) or helping hand for your users (the screen when things go wrong). In both cases, you want your users to do something so that the screen wont’ be empty as soon as possible.
5

下面是一些设计空状态时的小技巧:
Here’s a few tips to keep in mind when you’ll design an empty state:

给新手用户设计空状态。记住新用户的体验很 重要。给他们设计空状态的时候要尽量简单。重点放在用户的主要目标,设计互动性最大化:清晰的信息,合适的图像,一个按钮,这就够了。
做好这4个细节设计,让你的移动APP 用户体验脱颖而出
Empty state for a first-time user. Remember that first time user experiences should be focused . When designing empty states for a first-time users, keep them as simple as possible. Focus on primary user goals and design for maximum interactivity : clear message, right imagery, and a action button is everything you need.
6

Khaylo Workout 是一个关于空状态设计的很好例子。这个空状态告诉用户为什么会看到当前界面(因为他们还没有挑战任何朋友)以及如何操作(点击 + 图标)
Khaylo Workout is a great example of a proper empty state design. This empty state tells users why they see it (because they haven’t challenged any friends) and how to fix it (tap the ‘+’ icon). Image credit: emptystat.es
错误状态。如果空状态时由于系统或用户错误,你必须在友好度和帮助度之间寻找一个平衡。一点小幽默通常可以抹平出错的沮丧,但是更重要的是你要清楚的说明解决问题的步骤。
Error state. If the empty state was due to system or user error, you must find a balance between friendliness and helpfulness. A short sprinkling of humour is often a great way to diffuse the frustration of an error, but it’s more important that you clearly explain the steps to solve the problem.

7
迷失方向,孤立无援,就像在一个荒岛上?遵从 Azendoo 的建议,保持冷静,点个火,然后继续刷新。
Feel lost and unconnected, like you are on a deserted island? Follow the advice from Azendoo, keep calm, light a fire, and keep refreshing.

让你移动APP脱颖而出的小细节

框架界面
Skeleton Screens

Feel lost and unconnected, like you are on a deserted island? Follow the advice from Azendoo, keep calm, light a fire, and keep refreshing. Image credit: emptystat.es
Skeleton Screens
我们通常不考虑内容的不同加载速度——我们一直认为都是立马加载(或者至少非常快)。所以我们通常没有为用户需要等待加载的场合设计。

We don’t usually think about different loading speeds for our content — we believe that it loads instantly (or at least very quickly) all the time. So we don’t usually design the uncomfortable moments when users must wait for content to display.

但是网速不是总是有保障的,它可能比预期的要慢。尤其是下载比较大的内容时(比如图片)。如果你不能缩短时间,至少要让用户等待得舒服一点。你可以用临时信息容器 来保持用户的注意,比如框架界面和图片占位符。比起转圈的加载提示,框架界面能建立对内容的预期,减少认知的负担。
But internet connection speeds aren’t always guaranteed and actions can take longer that expected. This is especially true when heavy content (such an images) is downloading. If you can’t shorten the line you should at least try to make the wait more pleasant for your users. You have a great opportunity to keep users engaged by using temporary information containers , such as skeleton screens and image placeholders. Rather than show a loading spinner, skeleton screens create anticipation of what is to come and reduce cognitive load.

让你移动APP脱颖而出的小细节

几点建议:
Here are a few tips for your design:
框架界面不必很抢眼。只需要凸显必要的信息,比如段落结构。Facebook 的灰色占位符就是个好例子——它加载时使用了元素模板,让用户熟悉正在加载的内容的整体结构。注意框架界面中的图片和线框并没有很大区别。
The load screen doesn’t need to be eye-catching. It should highlight only necessary information such as structure of the sections. Facebook’s gray placeholder is a good example — it uses template elements when loading content and makes the user familiar with the overall structure of the content being loaded. Notice that images used in skeleton screen aren’t drastically different from wireframes

8
对正在加载的图片,可以用图片中的主色填充一个占位符。 Medium 有一个很棒的图片加载效果。首先载入一个小的模糊图片,然后慢慢转变成大图。
For a loading image you can use a placeholder filled with the predominant color of the loading image. Medium has a nice image loading effect. First, load a small blurry image, and then transition to the large image.

9
真正的图片出现之前,你可以看到模糊图片填充的占位符
Before the actual image appears, you can see a placeholder filled with the blurry image.

让你移动APP脱颖而出的小细节

动画反馈
Animated Feedback

好的交互设计会提供反馈。在现实世界,像按钮这样的物体会对我们的交互做出反馈。人们会对 app 中的元素有同样水平的期望。可视的反馈让人们有 掌控感:
Good interaction design provides feedback. In the physical world, objects like buttons respond to our interactions with them. People expect a similar level of responsiveness from app elements. Visual feedback makes users feel in control :

它会告知交互的结果,让结果可见并可以理解。
It communicates the results of any interaction, making it visible and understandable.

它给用户一个信号,这个对象(或者 app )执行一个任务成功或者失败。
动画反馈通过即时的信息沟通来节约时间,并且不能让用户厌烦或者分心。最基础的动画反馈就是 转场:
It gives the user a signal that they (or the app) have succeeded or failed at performing a task.
Animated feedback should save time by instantly communicating information in a way that doesn’t bore or distract the user. The most basic use of animated feedback is in transitions:

10
当用户看的点击/触摸操作引发的一个动画反馈,他们马上知道这个操作被接受了。
When users see an animated feedback triggered by click/tap action, they instantly know the action was accepted.

11当用户点击勾选任务已完成, 包括这个任务的区域就缩小并且变成了绿色。
When user checks the box to indicate that the task is complete, the block containing this task shrinks in size and changes its colour to green.

but an app can truly delight a user whenanimation is used in ways beyond the standard scope of actions.

下面是关于动画反馈的一些提示:
Here are a few tips and things to remember for animated feedback:

动画反馈必须经久不衰。第一次看着新鲜的东西,100 次之后可能就烦了。
Animated feedback must survive long-term use . What seems fun the first time might become annoying after the 100th use.

12

13动画可以让用户分心,让他们忽略加载的时间。
Animations can distract your visitors and make them ignore long loading times.

14动画可以让用户体验打动人心,刻骨铭心。
Animation can make your user experience truly delightful and memorable

总结
Conclusion

用心设计。app 的 UI 里面,每个微小的细节都值得密切注意,因为 UX 就是让所有细节协调的总和。所以,请从一而终,持之以恒的打磨你的 UI,创造真正无与伦比的用户体验。
Design with care. Each minor detail in your app’s UI deserves close attention, because UX is the sum of all details working harmoniously. Thus, polish your UI from A to Z in order to create really amazing user experience
Thank you!

让你移动APP脱颖而出的小细节

移动APP可用性测试:数据的量化处理(下)

用户研究从业者常常在做可用性测试的时候碰到这样的问题,可用性测试作为一种定性的研究方法,拿到完成率、完成时间以及满意度等结果时是简单做下描述性统计分析(毕竟我们称之为定性),还是可以进一步量化、标准化比较呢?

不是所有的数据都可以拿来量化,这取决于这是哪一种可用性测试。

美国教育家和心理学家Scriven(1967)曾将用来测试学习成果的考试分为两类,一类是Formative test即形成性测试,目的是通过及时的反馈来改进学习(例如随堂听写);另一类是Summative testF即总结性测试,目的是通过测试成绩来评估学习的效果(例如期末考试)。

那么,可用性测试如果也分为形成性测试和总结性测试的话,结果会有什么差异吗?

形成性测试

大部分的可用性测试都是形成性测试,以查找和修复可用性问题为目的,数据也是以问题描述和设计建议的形式来输出。这时候的量化一般仅以问题发生频率和严重等级为代表,任务完成率、完成时间因没有可对比性,所以只做描述性分析。

总结性测试

而总结性测试既然目的是用数据指标去度量一个应用程序的可用性,那么这个指标必然需要一个可以比较的对象,不然又如何去评价这个指标代表的可用性到底是好还是坏。如果以“比较的对象”来划分,总结性测试则又可以分为“基准测试”和“比较测试”。

(1)基准可用性测试

基准可用性测试的目标是描述一个应用程序相对于基准目标的可用性程度(如用你的每门期末考试的成绩去和之前预定的目标成绩进行比较),那么这也就提供了改善产品修复问题的着力点(哪门课没达到预期目标就重点复习),同时为比较改善后的效果提供了基线(重点复习后下次考试是否达到目标)。

(2)比较可用性测试

比较可用性测试,一般设计两个及以上的应用程序进行比较。可以是当前版本与前期旧版本的比较,或者是竞品之间的比较。如果去设计一场比较可用性测试你需要考虑清楚是“被试内测试”(相同的用户完成所有产品的任务)还是“被试间测试”(不同的用户分别完成不同产品的任务)。

  • 被试内测试:在用户数较少(或能够给予的酬金有限,无法邀请多人参与)时可以考虑让每个用户分别去完成各款产品的测试,但是必须要切记不能让所有用户在每个产品上的先后顺序保持一致(打破顺序效应)。
  • 被试间测试:在用户数充足时可以考虑每款产品分别找不同的用户进行测试,但是这里需要注意的则是必须保证每款产品间的用户个体差异不大(即有相似的年龄、性别、学习经历、竞品使用经历),如果需要在每组内划分为新手用户、中间用户、专家用户,则须保证各组中三类角色的人数占比一致。

数据统计

虽然对如何测量有效性、效率和满意度没有具体的指导方针,但Sauro and Lewis在一项针对近100个总结性可用性测试的调研揭示了从业者收集的典型数据。大多数的测试包含任务完成率(失败率)、任务时间、主观评价、寻求帮助的次数、可用性问题清单(通常包括问题频次和严重等级)。

本文主要就以上几个指标的量化处理进行介绍,更多可用性测试中收集测量指标的实操技巧,请参见《A Practical Guide to Measuring Usability》(Sauro,2010)和《Measuring the User Experience》(Tullis andAlbert,2008)。

任务完成率

(1)定义

也称为成功率,是最基础的可用性测量指标(Nielsen,2001)。

(2)计算

通常以二进制测量形式采集,以任务成功完成以编码1、失败为编码0。

注:二进制完成率即是基础可用性度量指标,也是应用到所有科学领域的度量指标。

图3

图4

(3)置信区间

虽然我们计算出A产品任务1的完成率为80%(10个人中有8人完成)但是我们却没有办法保证当样本数量为几百人、几千人,甚至当我们有上万用户在使用这个功能时,完成率还会是80%。

如果想要知道在未知的用户总数中能够完成该任务的比例范围,我们需要在这一样本范围上计算出一个二项式的置信区间。Wald校正区间二项式置信区间是最常用的方法,对于任何一种被编为二进制码的测试都适用。并且除完成率外,另一种衡量可用性的常用方法是统计遇到了同一问题的用户数。在使用Wald校正区间公式时,如果3/5的用户遇到了UI设计上的一个问题,那么我们可以95%的肯定,所有实际用户中23%-88%比例的人可能遇到了同样的问题。

任务完成时间

(1)定义

即用户花费在一个任务上的时间,通常为成功完成一个预先设置的任务场景的时间总和。测量和分析任务持续时间的方式一般有三种:

  1. 任务完成时间:用户成功完成任务的时间;
  2. 直到用户失败为止所用的时间:从开始直到用户放弃或者未正确完成任务的时间;
  3. 任务总时间:用户花费在一个任务上的总持续时间。

(2)测量单位

可以是毫秒、秒、分钟、小时、天或年,通常以均值(算术平均数或中位数,两者适用场景不同)。

(3)算术平均数 VS 中位数

到目前为止,我们最常用的是将算术平均数作为衡量集中趋势和等级量表的平均数代表,但是当样本分布呈现为左偏态和右偏态时,中位数明显要比算术平均数更加合适(当为正太分布时中位数与算术平均数相近)。这样说来,是否以后都用中位数来报告平均任务时长就万事大吉了?答案是NO,别忘记了中位数与生俱来的两大缺点:变异性与偏差。关于中位数的变异性与偏差有疑问的同学可查资料或者后台留言哦,篇幅关系这里就不拓展解释了。

图5

(4)几何均值的计算方法

对于小样本而言(小于25人),几何均值比中位数、算术平均数都更适用(Sauro and Lewis,2010)。对于样本量更大的可用性测试而言,中位数则是最合适的估算方法。计算几何均值,首先要将原始任务时长数据进行对数转换,然后计算所得到转化值的平均数,最后再将其转化回原尺度。工具上可以用Excel函数=LN( )进行对数转换运算,或者使用大多数计算器上都有的“ln”按钮。

满意度评分

(1)定义

即用户使用系统时感知到的主观评价,可在完成一项任务之后立即完成(任务评估问卷),也可以一系列可用性环节结束后完成(整体评估问卷),更可以独立于可用性测试使用。

图6

(2)测量工具

虽然可以自己编写感知易用性的问题,但采用当前可使用的标准化问卷,评估结果会更加可靠。对用研来说标准化问卷是最熟悉的工具与助手,这类可重复使用的问卷,一般由一组特定的问题+使用特定的格式+按照特定的顺序呈现,基于用户的答案产生度量值后也用特地的方法进行统计。基于不同的研究对象和目的,可选用的标准化问卷也不尽相同,所有的标准化问卷都有其优点和缺点,每种问卷都或许在你特定的情况下是最合适的。

常见标准化量表:

图7

(3)比较方法

如果要判断例如SUS可用性评分、NPS或者任务时长此类连续变量的均值之间是否存在显著差异,你首先需要明确的是这是场被试间测试还是被试内测试。并且对于不同的数据类型(连续变量or 分类变量)、用户小组数、样本数,均有不同的统计方法。

下图为连续型数据(满意度评分、任务时长)选择统计方法的决策图。离散型二进制数据(任务完成率)的统计决策图,后面有时间会补上。

图8

可用性问题清单

(1)定义

一般包括所属模块、问题编号、问题描述、问题层级(一到四级)、处理优先级以及跟进人。

严重等级判断与可用性准则这里就不重复介绍了,此前的上篇已介绍过。

(2)问题优先级的计算方式:

[(问题频数X4)/总参与人数]+严重等级

如一个UI问题被提到3次,总参与人数为10人,严重等级为三级(一级最高),那么相应的优先级则计算为四级(4.2四舍五入为4),即表示该UI问题的修复优先级为最低四级。

但是在实际工作中,可用性测试中发现的问题,当确定好严重等级后,修复的优先级除了问题频数,还需要综合考虑开发成本、业务成本,最后需要用研人员与产品经理共同确定修复问题的优先级。上方公式仅可作为用研根据问题频次与严重等级去判断修复优先级的算法之一。

总结

关于可用性测试中收集的指标如何量化,本篇中就介绍到这里。其实对于可探索、可深究的问题仍有许多,例如一个复合型的度量指标是否可以全权代表可用性测试中其他指标?小样本数据的量化是否真的可以达到一个可靠的置信区间?

带着问题希望大家可以继续深入探讨,本次抛砖引玉的介绍就到这里,欢迎交流。

文 / 媛媛大王  原文 / http://www.woshipm.com/user-research/424355.html