Inside Scratch Lab: the Making of Animated Text
This is the first in a series of posts giving you a look inside Scratch Lab, where we help invent the future of creative coding for kids.
What is Scratch Lab?
Scratch Lab is a team within the Scratch Foundation, where we explore new ideas for the future of Scratch. It’s also a website where we share some of those ideas with the world and get your feedback on them.
Introducing Animated Text
Animated Text is one of the first experiments we shared on the Scratch Lab site. If you’ve ever wanted to create shimmering rainbow text to tell a story, a stylish score counter for a game, captions for your project voiceover, or other creative and dynamic forms of text, Animated Text was designed with you in mind! It’s a Scratch extension, meaning it provides additional Scratch coding blocks. These new blocks let you display, style, and animate text in your Scratch projects in new ways.
Why Text?
Lots of kids play with text in Scratch. We see an incredible range of ideas in their projects, from poetry generators to role playing game dialogue to custom fonts. But we also notice that these projects often involve very complex code. How could we make playing with text in Scratch accessible to more kids? We set out to make new blocks that are relevant to the community and enable a diverse range of creative projects, but still feel simple and playful.
Key Design Decisions
Our process for creating Animated Text started with research into what kids are doing on Scratch and in other creative tools. We brainstormed and prototyped new blocks, then tried them out as a team. Before deciding our prototype was ready to try out with kids, we had to make some key decisions about how to draw the text, how to style it, and how to make it playful.
How to Draw the Text?
We came up with three different ways our new blocks could draw text, and we had to choose between them. Should it be Pen Text, Widget Text, or Costume Text?
Pen Text: Not Simple Enough
The first option is inspired by “Pen Text Engines” created by kids. These are complex projects that store data describing the shapes of each letter in the alphabet, and use Scratch code to draw them using the Pen extension. Pen Text Engines involve hundreds of blocks, but our extension would simplify all that into just a few. One advantage is that this is similar to what kids are already doing. But in order to update the text, you have to clear everything drawn by the pen first. We wanted to make playing with text feel simple–more like changing a sprite’s costume or using a “say” block.
Widget Text: Not Flexible Enough
We also explored making “widgets’’ that display text: shapes that show up on the stage to show text for specific purposes. This idea is inspired by our existing “say” block, which creates a speech bubble, and our “ask” block, which creates a text input box. They could include a title widget, a dialog box like the ones used in games, and a multiple-choice widget with a button for each answer. These widgets are simple and easy to use, but they felt too constrained.
Costume Text: Just Right
We ended up choosing Costume Text, because it’s a sweet spot in between the others: simpler to use than Pen Text, but more flexible than Widget Text. These new text blocks change a sprite’s image, its costume, to become the text. Each sprite can change its text independently, unlike Pen Text. And unlike Widget Text, the appearance of the text is very flexible–you can use our existing core blocks to change the appearance of the text by changing its position, size, and rotation, and even applying graphic effects.
How to Style the Text?
There are endless options for styling text, as you may know from using text editors or presentation software. We quickly designed lots of blocks to let you change the font, size, color, alignment, line breaks, and more. But in order to keep the number of blocks manageable, we had to focus on the features that felt most expressive and playful. For example, rather than creating a separate block for font size, we relied on the core block “set size,” which works for any sprite, including ones that are displaying text. And we left out other options, like “bold” and “italic.” This approach left us with a simple but powerful set of just six blocks.
How to Make it Playful?
Partway through the process, we felt worried. Were we making something playful enough? If it’s really just text, isn’t that a little… boring? We returned to our background research, and looked at a weird and wonderful piece of software we had found called “Textreme 2.” It makes your text wiggle, shine and bounce (and explode when you delete it!). We were especially inspired by its animated rainbow effect. So we decided to add a rainbow effect block.
This was so exciting that we started adding more effects right away. The “type” effect makes your text appear one letter at a time, as though it’s being quickly typed. The “zoom” effect makes the text start small and zoom in. We’d seen kids create similar effects by coding them, but putting them into a single block makes them accessible even to total beginners. Once we had these effects in a single block, we could see that people were surprised and delighted, tried them out in different ways, and got new ideas for what to make. In other words, it felt playful.
Play Testing
Once we had our prototype ready, we were ready to start play testing. As always, we started with a Scratch Team play test. Team play tests help us validate ideas with people who know Scratch well and can reflect on the design and how children will use it. They also give us a chance to find any lingering bugs before trying new features with children. The team was delighted with Animated Text, creating everything from dress-up games to fortune generators. As we reflected on the play test, some open questions remained: is it clear enough how to style your text? Is it confusing that text replaces the sprite image? But with the known bugs fixed, we felt ready to try Animated Text with groups of kids.
Our remote play test with kids showed us we were on the right track. The kids got the idea and started creating projects right away. At one point, a kid shouted, “it works!” He was thrilled that he could use the text blocks to show the score in his game. The kids were excited about the rainbow effect, and they enjoyed tinkering with different fonts. One kid tried combining text with existing Scratch “graphic effects” to make text whirl into a spiral. As with any design, there were minor challenges–some kids asked about how to show both their sprite and the text at the same time, and there was a bit of confusion about that and other details about styling text. Overall, we left the play test feeling confident in our design decisions.
Online Feedback
Having validated the idea with kids, we felt ready to launch Animated Text to the public on our Scratch Lab site. The main goal of sharing our experiments this way is to get feedback from kids, educators, and others around the world before we decide if these experiments are a good fit for Scratch. Our feedback form received over 25,000 comments, mostly from kids. Many of these reflected their excitement:
“Personally I have wanted this feature forever, and you should add it to scratch… rainbow text is cool!”
“I love that it is so creative and fun to see all the different fonts and colors. I would like you to change nothing about it is AWESOME!!!!!!!!!!!!!! I did not run into any problems. ❤️🧡💛💚💙💜❤️🧡💛💚💜❤️🧡💛💚💜❤️🧡💛💙💜❤️🧡💛💚”
We received some critical feedback about our design choices, often quite thoughtful:
“I have no problem with it… except the fact my sprite disappears and turns my sprite into a bunch of words. Maybe we could keep the visual sprite and the text at the same time?”
“The rainbow text though I didn’t like. First of all, you can already do it. Secondly, it doesn’t really seem like it belongs in scratch as scratch is so good because it gives you simple blocks with endless capabilities. This is not simple though as it gives you a ‘pre-made’ script.”
Overall, the feedback validated our idea to make it easier to do things that kids were already doing on Scratch:
“100% support this. It makes text engines so much easier, and will help variables look a lot better.”
“It was so much easier to show your score in a game without having to use a lot of blocks just so you can see your score. Now you can use 1 block and boom! It’s there.”
The feedback also included lots of feature requests, for things like more fonts, more effects (like “shrink,” the reverse of “zoom”), and ways to make the styling of text easier to understand.
After our public launch, we also got the chance to see the surprising, and inspiring projects our global community was making with Animated Text through images and videos they shared with us on social media.
Reflections
Reflecting on our process, from brainstorming and prototyping to play testing and gathering feedback from kids around the world, we see a few ideas to carry forward, and that we hope others might learn from as well.
Make Curb Cuts
We set out to solve problems faced by a subset of the kids on Scratch, who put in a lot of work in order to play with text in their projects. The work of understanding and empathizing with kids is the most important reason the project has been successful. We hope Animated Text can have a “curb cut” effect, like how ramps from the sidewalk to the street make it easier for people in wheelchairs to get around, but also help everyone. Similarly, by making the solution to these Scratchers’ challenges really simple and inviting, we might benefit a much larger group of kids who wouldn’t otherwise have tried playing with text at all.
Build a Low Floor and Wide Walls
We chose the “costume text” option, because it was both simple enough for kids to understand right away, and flexible enough to support a wide range of creative projects. This type of compromise is present in lots of design decisions we make about Scratch. We use a house metaphor: design for a “low floor,” so it’s easy to get started, and “wide walls,” to support a variety of interests. While focusing on these first, we also try to create a “high ceiling,” so that complex projects are possible.
Follow the Giggles
As we prototyped Animated Text, the “rainbow” effect felt like a breakthrough, because of the delight people showed. We saw this joyful response in our play tests with the team, with kids, and even in the online feedback form, where some kids use lots of emoji to express how they feel. We noticed moments of joy and laughter in the design process, and leaned into them.
Next Steps
We’re now in the process of evaluating the feedback, revisiting our engineering and design decisions, and investigating what it would take to bring Animated Text to the full Scratch community. We’re also working on more Scratch Lab experiments that we can’t wait to share with you in the future.
The Scratch Lab team that developed Animated Text included: Eric Rosenbaum, Jacy Edelman, Kathy Wu and Paul Kaplan
