Fox in Socks: Lessons in UX and Tutorial Design From Dr. Seuss
I loved Fox in Socks as a kid, and a sale at Target was a great excuse to get it for my kids. Growing up dyslexic, reading was (and is) a struggle, and usually not an enjoyable task. Today I tried to read it to my almost 3 year old, but while I was flipping through the pages reading (as he ran around the room), I realized this book provided a perfect analogy and a lesson in designing game tutorials, or even more on point: educational games.
Dr. Seuss is known for funny and entertaining rhymes and rhythms, and puts a lot of effort in making reading and phonetics easier to learn. However, I'd like to focus on the layout and pacing so that anyone, regardless of subject matter or game system could use similar structures for their own learning and user experiences.
FOX SOCKS BOX KNOX
This is the first page of the book. There is no sentence, no intro or story, or any formal structure. Just 4 words. You are presented with the elements that follow through the story, not formally, but in district small chunks: Fox Socks Box Knox. The words are spaced out, aligned with their respective visuals, providing a foundation for the rest of the book. While the first 3 items are familiar, this page introduces a single new one: Knox.
Lesson 1: Front load only necessary information. Cognitive load should constantly be in any designer's mind, and UX designers in particular. When learning new things, we can only hold small amounts of info in our minds. If we are learning something new, or trying to recall recently learned material, all other tasks are set to autopilot. We simply can't focus on or even notice other things, while we are focusing on a new task.
This is shown perfectly in the Selective Attention Test, by Christopher Chabris and Daniel Simon.
So, every piece of new information needs to be identified, and presented without unnecessary distractions.
KNOX IN BOX
In the next page there are no new elements, but sentences start to form. The sentences start short, and then get longer: two short sentences followed by a longer one.
The following page repeats with two similar longer sentences that are still spaced out, providing sufficient break for the reader. All these pages use the same four words learned first.
Lesson 2: Ramp up slowly. Give users a safe place to practice, review and retain new information. Once you've given players something new, let them experience and play with it before showing them the next thing. Game designers can be eager to show all the cool features right away, as a way to advertise their game and hook players. What happens instead is that players have to give up mastering the new feature, and move on to the next one. This leaves them confused and distracted, with a superficial understanding of how to play the game. Likewise, when learning new content, if you don't allow for users to play, explore, and master a concept, they won't retain it later. Allowing learners to play with the new information in context builds connections. By understanding "Why is this important?", "How does this help me reach my goal?", "What happens if I don't do this?", the info will start to shift from working memory into long term memory. Instead of memorizing a fact, you build a mental model of its importance and value to you. This is crucial: if we only rely on memorization, we will quickly forget it. Below is a chart of Hermann's forgetting curve, which shows how long uncontextualized information remains in our working memories.
The key here is uncontextualized information. Telling users the answers to the questions just adds more out-of-context information they need to memorize and more probability for them to forget.
As game designer George Fan said in his GDC talk, How I got my Mom to Play Plants vs Zombies: "Don't tell the player what to do, have them do what to do." There are a few core concepts that are important to know when playing Plants vs Zombies. Fan could have provided this information to users as text for them to read before playing.
Instead, Fan designed a level to let players experience those concepts in a limited and safe space. By having one row, players can only place items horizontally, instantly observing what happens, and retaining the information better than reading it. We can (fail and) observe what happens. This answers the question: "Why is this important?". We do instead of being told.
MARIO VS MATH
It's even more important in educational games. Use the game system to teach, not the game theme. Many educational games take an unrelated but familiar game mechanic and map learning content on top of it.
In this Scratch game example by UltraSonic777, the designers used Super Mario Bros as reference. When you land a jump, a math question populates. Answer correctly to make the jump, or incorrectly to lose a life.
It is understandable how people might think this is a good idea. If Mario is fun, adding math must make math fun too! Except that it doesn't. In fact, it reinforces the idea that math isn't fun because math is what is literally blocking you from actually playing a fun game. And because you needed to add math into a game, it must mean that math is really hard and boring. If you have to bribe me with rewards in order to do math, it must not be fun so I wouldn't want to do it on my own.
Instead, if you use Super Mario's system to explain math concepts, they become part of the game. This is done well in Super Mario Quadratics by John Rowe. In the original Super Mario Bros game you master jumping to get coins and win. Here, you master quadratic formulas to get coins and win.
By editing the equation, players see how each value can affect the dotted curve that reflects Mario's jump path. This makes playing around in the formula fun. It doesn't need to tell the players if they're right or wrong because they can see for themselves. It allows them to play with each component and observe the results. Instead of blocking you from jumping, the math is what makes the jump. You do, instead of being told.
CHICKS BRICKS BLOCKS CLOCKS
Lesson 3: When leveling and pacing, provide breaks on the way up. This follows Flow Theory by Mihály Csíkszentmihályi. It's the idea that keeping users engaged in a task requires striking the balance between too difficult and too easy, and changing this balance over time as user mastery increases.
After readers grasp the main elements, the next few pages gradually get harder. They add more words and sentences until they start to look more like paragraphs.
From page 8 on, the sentences are structured: 4, 6, 4, 4, 8, 4, 4, 9, 2 to a page. The increases are followed by declines, 8 to 4, and 9 down to just 2 lines.
In Itay Keren's (my husband and co-parent) GDC talk Boss Battle Design Fundamentals and Retrospective, he talks about the importance players get from the anticipation of a triumph. When players are in the middle of a challenge like a boss fight, or when readers are working through a full page of lines, noticing the upcoming break will feel rewarding, and improve their retention and motivation. This is linked to the release of Dopamine, the neurotransmitter that triggers a sense of pleasure, rewarding us for success, motivating us to repeat the actions that led to it, and retain what we learned. Not only is it important to have that break built in, but letting players or learners see the upcoming break while in the thick of things, is key to their enjoyment and retention.
This optimal state feels fun, engaging, and satisfying. This is a key principle in games: too hard leads to frustration, too easy leads to boredom. The game adapts to a user by providing increasingly harder challenges to keep the game fun. In learning, like in games, there needs to be breaks along the way. Too much ramping up puts a lot of mental burden on the learner, and without a break in sight players can get overwhelmed and exhausted. Like lifting weights, sets need to happen in - well, sets. Similarly in games, it's not only about a break from learning new things, the breaks allows players to rest, regroup, and recharge before the next wave of enemies, the next boss, or the next concept is introduced.
NEW SOCKS
After the first set of pages about Chicks and Bricks, the Fox introduces a new story for the Knox.
Lesson 4: Break up content with distinct areas, chapters, levels, and maps. This allows the players to build on the information previously learned and apply it to different regions. The regions keep the challenges fresh and engaging even if they're still mastering the same basic concepts. In Fox in Socks, the stories have different characters and distinct colors that help separate the areas from each other. Smaller sections and regions can tell their own stories and allow players to expect a predictable structure with a beginning, middle, and end, or challenges and breaks, as discussed before.
7 +/- 2
This is Miller’s law: the magic number of data we can hold in our working memory without much difficulty. Breaking information down into groups or sections can allow us to hold on to more information. Take phone numbers for instance, if viewed sequentially:
1916352238
The mind gives equal weight to all parts, a total of 10 elements to hold in memory at once. Chances are you won't remember this number correctly within a few minutes of viewing it. But when spaces are added:
1 916 635 2238
The mind now groups the numbers together, and we're down to 4 distinct elements. The spaces allow you to group the information as separate bits, and you're more likely to remember the series correctly.
Grouping or categorizing pieces of information can help us make order out of a lot of different bits of information. Grouping information by region, story, class, or suit enables complexity while decreasing cognitive load. It does this because we can associate the different environment, difficulty, and characters to a particular region. When we leave that region we can release that information from working memory, as we no longer need to use all these details. We can get introduced to many different environments and characters, but we only need to remember them when we go back to that area. The information is now grouped as a unit, so recalling it is faster and more consistent.
In Zelda: Breath of the Wild or many other open world games, the areas of the maps have different regions. Each region has its own difficulty level, enemies, resources, and strategies for navigating. We can plan for and experience different challenges, but we don't have to remember every detail all at once. When we leave an area, we no longer need to think about the strategies used there. We travel and adapt, but as we return to that area, those memories, along with techniques and strategies, are reactivated together as a unit. It's not just about taking breaks, it's about compartmentalizing information to lessen cognitive load as we move through the book, or a map, or a level. If the cognitive load is extensive, the experience is going to be less pleasant as the mind has to work harder subconsciously to recall the information missing from working memory.
Recap
The basic foundations to creating a good user experience, level design, or tutorial system can be found in this well known children's book. While bad design is everywhere, good design can be hidden in plain sight, and we might miss it if we don't stop to notice.