Many new UX writers often struggle to find the balance between creativity and clarity. You can’t make everything fun/exciting/interesting as it can have an adverse effect on usability. But there are times when you can add a bit of flair.

許多新的UX作家經常努力在創造力和清晰度之間找到平衡。 您不能使所有事情都變得有趣/令人興奮/有趣，因為這會對可用性造成不利影響。 但是有時候您可以增加一些天賦。

Loading animations are a great place to start if you’re a new or aspiring UX writer. What I’d like to do in this article is:

如果您是新手或有抱負的UX作家，則加載動畫是一個不錯的起點。 我在本文中想做的是：

1. Get you to think about UX design principles before you write
   在編寫之前讓您考慮UX設計原則
2. Provide new & aspiring UX writers with some practice exercises and ideas for where to flex their creative skills
   為新的和有抱負的UX作家提供一些實踐練習和想法，以幫助他們提高創造力

載入原則... (Loading principles…)

The more you know about UX design and HCI (human-computer interaction), the better a UX writer you will be. So let’s start there.

您對UX設計和HCI(人機交互)了解得越多，您的UX編寫者就越好。 因此，讓我們從那里開始。

Why do we have loading animations? Is an animation better than a static image? Why? Do they need text? What should the text say and why?

為什么要加載動畫？ 動畫比靜態圖像好嗎？ 為什么？ 他們需要文字嗎？ 文字應該說什么，為什么？

Simple questions, but not necessarily things you’ve stopped to consider before.

簡單的問題，但不一定是您之前已經停止考慮的事情。

Loading animations give the user feedback (this is the keyword). The user’s not left wondering if the website or app has broken; they can see something is happening.

加載動畫會為用戶提供反饋(這是關鍵字)。 用戶不會懷疑網站或應用程序是否已損壞； 他們可以看到正在發生的事情。

If you use a progress bar, this can give some indication about how long is left.

如果使用進度條，則可以指示剩余時間。

Loading animations/screens can also look nice. This is important if you expect the user to stare at them for a while.

加載動畫/屏幕看起來也不錯。 如果您希望用戶凝視他們一段時間，則這一點很重要。

In combination, all these can reduce the stress of waiting and the perceived waiting time.

結合起來，所有這些都可以減輕等待的壓力和等待時間。

Loading animations/screens are also a great opportunity to infuse the brand voice into the user flow.

加載動畫/屏幕也是將品牌聲音注入用戶流程的絕佳機會。

But is an animation better? In most cases, I would say yes. A static image only gives a limited amount of feedback. And you could argue animations are more interesting to look at.

但是動畫效果更好嗎？ 在大多數情況下，我會說是。 靜態圖像只能提供有限的反饋。 您可能會認為動畫更有趣。

Do we need accompanying text? Not always, no. It’s hard to measure how much value the word “Loading…” under a spinning wheel icon adds, but it does make the interaction more human. And as mentioned above, it can add a little bit of the brand voice into the experience. In terms of conversational design, adding that bit of text can help strengthen the relationship between you and the user. It makes the whole experience feel more real and personal.

我們需要附帶文字嗎？ 并非總是如此。 很難衡量在“紡車”圖標下的“加載中...”一詞有多大的價值，但這確實使交互更加人性化。 如上所述，它可以在體驗中添加一些品牌聲音。 在會話設計方面，添加少量文本可以幫助加強您與用戶之間的關系。 它使整個體驗更加真實和個性化。

Here’s a bonus question for you to think about on your own. Why do many sites and apps use ellipses after the word “Loading”? If you get stuck, remember not all loading animations/screens use ellipses in their messaging. Why not? When would you use them, and when would you not?

這是一個獎金問題，您可以自己考慮。 為什么許多網站和應用程序在“正在加載”一詞后使用省略號？ 如果陷入困境，請記住并非所有加載的動畫/屏幕在其消息傳遞中都使用橢圓。 為什么不？ 您什么時候使用它們，什么時候不使用？

If you do add microcopy, your goals should be the same as the designers:

如果要添加顯微鏡，則您的目標應該與設計者相同：

1. Give the user feedback (let them know something is happening)
   向用戶提供反饋(讓他們知道正在發生的事情)
2. Make the wait more enjoyable, if possible, and reduce the perceived waiting time
   如果可能的話，使等待更愉快，并減少等待的時間
3. Add a touch of the brand voice
   增添品牌聲音

Don’t forget to add accessibility text if your team has decided against adding microcopy. Some users won’t get enough/any feedback from just a spinning icon.

如果您的團隊決定不添加顯微鏡，請不要忘記添加輔助功能文本。 某些用戶僅通過旋轉的圖標就無法獲得足夠的/任何反饋。

實踐使… (Practice makes…)

Ok, let’s get into some exercises. Here are 3 scenarios for you to practice writing the microcopy for. Afterwards we’ll do a roundup and a bit of a postmortem.

好的，讓我們開始一些練習。 這里有3種情況供您練習編寫顯微照片。 之后，我們將進行綜述并進行一些事后分析。

1. You’re writing for an app used to find restaurants and book tables. The user has selected some search criteria (location, type of cuisine etc.) and hit search. The design team has added a brief loading animation (one of the spinning circle types below) while the search results load. You’ve been given the placeholder text “Loading…” that will appear under the spinning icon. The brand wants to focus on the principles of young, adventurous, and convenient.
   您正在寫一個用于查找餐廳和桌子的應用程序。 用戶已經選擇了一些搜索條件(位置，美食類型等)并點擊搜索。 設計團隊在搜索結果加載時添加了一個簡短的加載動畫(下面是旋轉的圓圈類型之一)。 您將獲得占位符文本“正在加載...”，該文本將顯示在旋轉圖標下方。 該品牌希望專注于年輕，冒險和方便的原則。

2. You’re working on an installation progress screen for a project management application. The design includes a percentage progress bar this time and it will be an independent screen as opposed to just a UI element. This brand wants to make project management more visual, easy, and accessible. They say they’re open to using more casual language to seem more fun. As well as the loading bar, they want to add an image and text, but want your input to ensure the content and image match. (Feel free to think of animation rather than a static image)

2.您正在處理項目管理應用程序的安裝進度屏幕。 這次設計包含一個進度條百分比，它將是一個獨立的屏幕，而不僅僅是UI元素。 這個品牌希望使項目管理更加直觀，輕松和易用。 他們說，他們愿意使用更多隨意的語言來表現更多樂趣。 除了加載欄之外，他們還希望添加圖像和文本，但希望您輸入以確保內容和圖像匹配。 (隨意考慮動畫而不是靜態圖像)

3. You’re the writer for an online sporting goods store. The user has entered their bank card info and you need a loading screen while you process their payment. This brand has a strong sporting theme. But they want to appear professional, knowledgeable, and accessible; their site is popular with soccer moms after all. They want to use a repeating colored dots animation to show the loading state, with some text above it. They haven’t given you any placeholder text this time.

3.您是在線體育用品商店的作家。 用戶輸入了他們的銀行卡信息，并且在處理他們的付款時需要一個加載屏幕。 這個品牌具有強烈的體育主題。 但是他們希望表現出專業，知識淵博且易于使用的狀態； 他們的網站畢竟受到足球媽媽們的歡迎。 他們希望使用重復的彩色圓點動畫來顯示加載狀態，并在其上方顯示一些文本。 他們這次沒有給您任何占位符文本。

要考慮的事情 (Things to think about)

How did that go? Hopefully you came up with 3 very different voices for those products.

怎么樣了 希望您為這些產品提出3種截然不同的聲音。

Let’s look at some of the things you might want to consider for each scenario.

讓我們看一下每種情況下可能要考慮的一些事項。

For the restaurant reservation app, you kind of have free rein here. You could even try something food-related. Something like “Coming right up…” like a waiter or chef serving up their search results. It’s very subtle, so even if your brand isn’t trying to be fun, you can probably get away with it. Remember not to take things too far, unless that’s part of your brand voice. You could even suggest making the spinning icon food-related if your designer has time.

對于餐廳預訂應用程序，您可以在這里免費使用。 您甚至可以嘗試一些與食物有關的東西。 諸如“來吧……”之類的東西，例如服務員或廚師提供他們的搜索結果。 這非常微妙，因此，即使您的品牌不打算變得有趣，您也可以擺脫它。 切記不要太過分，除非這是品牌聲音的一部分。 如果您的設計師有時間，您甚至可以建議使旋轉圖標與食物相關。

But remember this won’t be on screen for long (hopefully), so the text has to be relatively short. This is something you need to talk to the design and tech teams about. If it’s only a split second, your flash of text might be pointless.

但是請記住，這不會在屏幕上顯示很長時間(希望如此)，因此文本必須相對較短。 這是您需要與設計和技術團隊討論的內容。 如果只是一瞬間，那么文字閃爍可能就毫無意義。

For the project management application, again this is creative freedom. A great example of content and design working well together is Mailchimp. Their success pages and “Prepare for launch” pop-ups are a great case study if you’re trying to convince your design team to involve you more. Think about what kind of wording and imagery you would want to use for this project management software, and how it fits with their values. It’s also worth asking how long installation takes. Do you want one image or multiple? Maybe you need to write something for each image. Or maybe an animation is enough?

對于項目管理應用程序，這又是創作自由。 Mailchimp是內容與設計完美配合的一個很好的例子。 如果您想說服您的設計團隊更多地參與其中，他們的成功頁面和“準備發布”彈出式窗口是一個很好的案例研究。 考慮一下您想在此項目管理軟件中使用哪種措辭和圖像，以及它們如何適合其價值。 還需要詢問安裝需要多長時間。 您要一張還是多張圖片？ 也許您需要為每個圖像寫一些東西。 也許動畫就足夠了？

For the online sporting goods store, there’s not necessarily a right or wrong answer here. But this kind of scenario shows how you approach a problem. It certainly shows how well you can empathize with the user. Be aware you’ve just asked someone to hand over their bank card details. And like I said in the brief, it could be someone’s mom. She’s not likely to appreciate any funny messages. She just wants to know her payment is being processed. That doesn’t mean it has to be something as straightforward as “Processing your payment…”, but if you try to be too clever you could end up with something the user wont understand, or worse, confuses them. Sometimes simpler is better. You don’t want them to sigh with relief when they realize you were just processing the payment.

對于在線體育用品商店，這里不一定有對還是錯的答案。 但是這種情況說明了您如何解決問題。 它肯定顯示了您對用戶的同情程度。 請注意，您只是要求某人交出其銀行卡詳細信息。 就像我在簡介中說的那樣，可能是某人的媽媽。 她不太可能欣賞任何有趣的消息。 她只想知道她的付款正在處理中。 這并不意味著它必須像“處理您的付款…”那樣簡單明了，但是如果您嘗試變得太聰明，最終可能會得到用戶不會理解的東西，或更糟的是，會使他們感到困惑。 有時越簡單越好。 當他們意識到您只是在處理付款時，您不希望他們感到寬慰。

As a UX writer, it’s part of your job to learn the UX principles behind a design, and then craft your copy with those in mind.

作為UX作家，學習設計背后的UX原理，然后牢記這些原則，是您工作的一部分。

Loading animations can be a relatively harmless and unobtrusive UI element to play around with. Perfect for scratching your creative itch. Look for loading animations on your product that stay on screen for a while. How could you make them more enjoyable? How could you make the copy more interesting or on-brand?

加載動畫可以是相對無害且不干擾用戶界面的元素。 完美解決您的創意難題。 尋找在您的產品上加載會在屏幕上停留一段時間的動畫。 您如何使它們更有趣？ 您如何使該副本更有趣或更具品牌影響？