Little Big Details For Your Mobile 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

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.


Here’s a few tips to keep in mind when you’ll design a splash screen:
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.

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 .

Make the loading process feel natural by using progress bars.让你P脱颖而出的小细节

Empty States

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.

Here’s a few tips to keep in mind when you’ll design an empty state:

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.
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:

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.

7Feel lost and unconnected, like you are on a deserted island? Follow the advice from Azendoo, keep calm, light a fire, and keep refreshing.


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:
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.

Here are a few tips for your design:
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

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.
Before the actual image appears, you can see a placeholder filled with the blurry image.

Animated Feedback

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.
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:

When users see an animated feedback triggered by click/tap action, they instantly know the action was accepted.

11When 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:
Animated feedback must survive long-term use . What seems fun the first time might become annoying after the 100th use.


13Animations can distract your visitors and make them ignore long loading times.

14Animation can make your user experience truly delightful and memorable


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!





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










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


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

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















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



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




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










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














文 / 媛媛大王  原文 /