STORYSOFT’S UX Laws Guide for Digital Storytelling

ux-law-guide-cover

Senior UX designer Jon Yablonski compiled a list of UX laws built on the basis of psychology and the trends seen in how humans perceive various aspects of design. In this guide, we’ll define and discuss the same UX laws through the lens of digital storytelling. 

By putting the UX laws into practice in your marketing endeavors, you’ll have more control over the ways in which your customers interact with your content, absorb your messages, and feel about the experience afterward. 

Think of the UX laws as sanding tools, helping you create the smoothest user experience possible!

Table of Contents

clock

1 Timing and Simplicity

1.1 Doherty Threshold

1.2 Goal-Gradient Effect 

1.3 Hick’s Law

1.4 Tesler’s Law

1.5 Law of Prägnanz

1.6 Parkinson’s Law

1.7 Occam’s Razor

connection-icon

2 Spatial Awareness

2.1 Law of Common Region

2.2 Law of Proximity

2.3 Law of Similarity 

2.4 Law of Uniform Connectedness

2.5 Fitts’s Law

brain-icon

3 Memory

3.1 Von Restorff Effect

3.2 Zeigarnik Effect

3.3 Serial Position Effect

3.4 Miller’s Law 

thumbs-up

4 Meeting Expectations

4.1 Aesthetic-Usability Effect

4.2 Jakob’s Law

4.3 Peak-End Rule

1 Timing and Simplicity

Doherty Threshold

The gist: To hold a customer’s attention, responses should be provided within 400 milliseconds. Don’t leave a customer waiting. 

Application: Aside from quickly providing system feedback, you should include progress bars or engaging animations in your digital stories to make wait times more tolerable.

  • By the book: In storytelling, it’s not enough to capture someone’s interest, you must nurture it, constantly offering bites of information to keep them hooked. If a reader loses interest, they’ll close the book.
doherty-threshold

Goal-Gradient Effect

The gist: Customers work more quickly to reach their goal or finish a task the closer they get to completion or reward. 

Application: UX laws suggest you should let customers know how close they are to the end of your digital stories. You could do this by adding a progress bar, as suggested above, or by adding page numbers throughout.

  • By the book: Think about when you’re reading a book. Don’t you feel more motivated once you pass a certain number of pages? When you know you’re nearing the end, aren’t you more likely to power through rather than putting the book down to finish later?
goal-gradient

Hick’s Law

The gist: The more options with which you present a customer, the more time it will take them to make a decision. 

Application: When creating your digital stories, reduce the number of choices available and break up complex tasks to make it easier for customers to come to a decision.

  • By the book: As much as detail matters in storytelling, clarity matters even more.
hicks-law

Tesler’s Law

The gist: There will always be some aspects of complexity that cannot be reduced completely in your designs. 

Application: You may not be able to eliminate complexity entirely, but you can make a customer’s experience less complicated by putting extra work in behind the scenes during development. 

  • By the book: Think about all of the editing and rewriting that goes into crafting a narrative. You don’t publish a first draft, full of inscrutable complexities.
teslers-law

Law of Prägnanz

The gist: Customers will perceive complex images in their simplest form, that being what requires the least amount of effort.

Application: Keep designs and figures simple to allow customers to better process your digital stories using minimal effort. 

  • By the book: Unless we’re talking about the Great American Novel, stories should be relatively straightforward. No story should be complex to the point of obscurity.
prägnanz

Parkinson’s Law

The gist: If a customer is given more time to complete a task, that time will be used, even if the task could’ve been completed more quickly. Tasks expand to fill the time allotted.

Application: Minimize time to align with how much time customers actually need. Save time with autofill features.

parkinsons-law

Occam’s Razor

The gist: Lessen complexity by eliminating as many elements as you can without compromising the function of the design as a whole.

Application: Do not include more than one interactive element per page of the digital story.

  • By the book: It’s like fine-tuning a sentence. Maybe you can take out a few unnecessary adjectives, but keep the nouns and verbs that give the sentence meaning.
occams-razor

2 Spatial Awareness

Law of Common Region

The gist: Customers tend to group together visual elements sharing a space without clear boundaries. 

Application: To combat this unwanted grouping, add borders or backgrounds to your digital stories to keep regions defined. 

  • By the book: Page breaks and chapters exist for a reason.
common-region

Law of Proximity

The gist: As determined under the law of common region, customers tend to group together objects that are in close proximity to one another. 

Application: If you want certain objects to be seen as a group, place them close together.

  • By the book: In writing, line breaks clearly delineate different portions of the text, same as the spacing between elements such as page numbers and chapter titles. It is easy to tell the body of a text from titles and epigraphs.
proximity

Law of Similarity

The gist: Customers tend to perceive similar elements in a design as a group.

Application: If you want important links or buttons in your story to stand out on their own, keep them visually dissimilar from surrounding content. 

  • By the book: You never want characters to merge, indistinguishable from one another. Every character needs a unique voice and set of traits.
similarity

Law of Uniform Connectedness

The gist: Customers will relate elements that are visually connected more than those that are visually disconnected. 

Application: If you want to emphasize a connection between elements, unite them using colors, shapes, lines, arrows, frames, and so on. 

  • By the book: In books that utilize diagrams, those diagrams are referenced in the content with numbers or colors so readers know which information pertains to which image.
uniform-connectedness

Fitts’s Law

The gist: Customers will take more time to reach a “target” with a pointer the smaller the target is and the longer the distance to it.

Application: In your digital stories, “touch targets” should be large enough for simple desktop use, spaced out, and easily accessible.

fitts-law

3 Memory

Von Restorff Effect

The gist: When a group of similar items is presented to a customer, the one that is least similar is better remembered. 

Application: Keep the most important information visually unique. 

  • By the book: Main characters stand out from the sea of background characters.
von-restorff-effect

Zeigarnik Effect

The gist: Customers better remember incomplete tasks than completed tasks. 

Application: Let a customer know of additional content in or beyond your digital stories. 

  • By the book: If you know there’s a sequel, you’re likely to become more invested in the book you’re reading, remembering small details that could be crucial to comprehending the sequel or may hint at future plot points.
zeigarnik-effect

Serial Position Effect

The gist: Customers tend to best remember the first and last pieces of information in a series.

Application: This UX law suggests that you set up the problem on page one of the digital story and present the solution and call-to-action on the last page. 

  • By the book: The middle of a book is important, yes, but first and last lines are often remembered most of all. I’m sure this particular final line rings a bell: So we beat on, boats against the current, borne back ceaselessly into the past.
serial-position

Miller’s Law

The gist: The average person can only hold about seven items in their working memory. 

Application: Less is more. Break up content into smaller chunks so as to not overwhelm a customer. 

  • By the book: Chapters break up the plot, keeping things tidy. Similarly, most books only have a handful of main characters or perspectives because it would be too difficult to expect readers to keep track of a fictional army.
millers-law

4 Meeting Expectations

Jakob’s Law

The gist: Customers tend to perceive aesthetically pleasing designs as more usable. Better visuals can mask usability problems. 

Application: If customers value beauty, make your digital stories visually appealing. Choosing the right colors for your designs is critical. See our color guide.

  • By the book: It’s what’s on the inside that counts, but book covers still matter. It’s what initially attracts a reader. Think of it as the first hook.
jakobs-law

Peak-End Rule

The gist: Customers prefer your site to work in the same way as the other sites they use.

Application: Use existing sites/features as models to keep the user experience seamless. 

  • By the book: Tropes and formulaic writing across genres exist because as much as people like to be surprised, they also relish the comfort of familiarity. Same goes for retellings of old stories, like modern takes on classic fairy tales.
peak-end-rule

Aesthetic-Usability Effect

The gist: Customers will judge an experience by its peak and end, rather than as a whole.

Application: Ensure customers have a positive experience by focusing on peaks and final moments in your digital stories. 

  • By the book: A book isn’t good because of a few powerful lines sprinkled throughout. To succeed, the climactic scenes of a book must carry you through to a satisfying end.
aesthetic-usability

Digital stories should be just as captivating as a great book.

These UX laws will help you reach that peak level of engagement by ensuring maximum efficiency and visual appeal from beginning to end.

Start creating user-friendly digital stories for your brand with STORYSOFT now. Learn more.

Book a Demo

See how to bring personalized digital experiences to life for your brand

   During the call you will: 

  • Hear how it works
  • See example digital Stories
  • Walk through the analytics
  • Get your questions answered
BOOK A DEMO

Leave a Comment

You must be logged in to post a comment.