A Race Against the Clock

Why our computers must keep up with us as much as we keep up with them

In an ever-changing world of ever-advancing technology, it’s increasingly easy to keep up with the demands of the user. Split-second calculations, upload speeds reaching hundreds of megabits per second, and monitors with refresh rates faster than the human eye can see.

However, faster isn’t always better. Just as humans have maximum time requirements before we get bored, lose interest, or fail to see a connection, we also have minimum requirements. Computer reaction times far outweigh human ones, but as much as the computer needs to keep up with its user, the user needs to be able to keep up with the interfaces they are using. Jeff Johnson explains some of these time restraints in his book, Designing with the Mind in Mind, specifically chapter 12, “We Have Time Restraints”.

Explaining this concept was a design challenge in itself, but this is what I came up with: an interactive infographic containing a short list of time requirements, arranged by order of magnitude. I’d like to walk you through my process as I came to this result.

The interactive infographic and the five info boxes

The Task At Hand

As with all design projects, I followed the design process closely in order to arrive at this prototype. I call it a prototype, and not a final project, because for this project I followed the Sprint format: Define, Research, Ideate, Prototype, and Test. To begin I pondered the ways I could create a design centered around the theory in mind, the theory that we have time restraints. I structured these thoughts in the form of questions beginning with the words ‘How Might We?’:

  • How might we communicate the idea of short lengths of time visually?
  • How might we condense the theory into a short series of images or animation?
  • How might we represent responsiveness in a still image?
  • How might we create a hierarchy to show units of time without explicitly naming them?
  • How might we explain the importance and urgency of responsiveness?
Monitor refresh rate can impact motion graphics, video games, and more

In Context

What are time requirements, and why are they important to designers? The chapter “We Have Time Restraints” of Designing with the Mind in Mind list several time requirements based on human psychology and physiology, such as the length of a flinch, how long it takes to register a visual stimulus, and the longest gap of time in which the brain will still link two events as a direct cause and effect. These requirements are useful because they dictate to designers the maximum or minimum periods of time in which they must program a response to occur. Most of these are under a second, making it even more crucial to adhere to them.

This concept is orchestrated every day of our lives, even if we don’t always notice it. Our monitors must have a high refresh rate, or else we will notice that our actions are not immediately reflected on screen, videos will not play smoothly, and the illusion of any motion graphics will be broken. The same is true of latency in video livestreams, except on a more human level. If there is too much delay between a content creator and their audience, the personal connection will be lost, and viewers will not be satisfied.

There are also safeguards put in place in case of total failure to respond. For example, if a Windows program crashes, and therefore fails to maintain responsiveness, Windows takes over and notifies the user of the situation and offers to send a crash report. Google Chrome does the same thing if internet connection is not available, and even offers a small game while the user waits for the internet to reconnect.

Brainstorm

Right off the bat I had several ideas running through my mind for this project. I collected my thoughts in a mind map, and sketched ideas in a format called ‘Crazy Eights’, which involved sketching eight ideas in as many minutes. I eventually came up with two new designs, both drawing on elements from the two ideation exercises.

Sketches from the ‘Crazy Eights’ exercise (left) and a rejected sketch
A sketch of the winning idea

Case In Point

After I determined that the best course of action was to create an infographic showcasing the different time restraints, I fleshed out the idea I thought would be the most interactive and would get the point across the most clearly. It’s an interactive infographic with expandable lists of time restraints, grouped by orders of magnitude, or powers of ten. Each group is represented by two icons, illustrating the connection mentioned in one of the restraints of the group: for example, the ‘1 second’ box has a hand and a brain, signifying that 1 second is the length of a visual-motor reaction.

The first screen of the prototype

The prototype is not overly designed; it is not made to be a final product, so it would be a waste of time to make it look perfect. It does its job as well as it needs to in order to convey the ideas at hand, and no more.

Make or Break

To test the effectiveness of my prototype, I tested it with five subjects, and unfortunately I received very mixed results.

I interviewed five people, all of whom have some background in or adjacent to game design, web design, or interactive design in some way. I asked questions regarding their connection to design, their use of technology, and if they had run into the concept of responsiveness. I showed them my prototype and asked more questions; the results were varied.

Some testers thought it was cluttered and hard to follow; others said it was smooth and that everything made sense. Some said it was intuitive and informative; one said it lacked enough context to be helpful, and one didn’t even notice it was interactive.

Overall, though, I learned a few things. Everyone involved in interactive design could see why it was helpful information, and everyone said they learned something. That means that at least at some level, the prototype did its job: convey to interactive designers that we have time restraints. It may not have been pretty, it might not have had enough context for the information to be helpful, but for those interactive designers, it got the job done.

The Next Step

Of course, this isn’t to say that that’s where I would leave it. Were this an actual project outside of a class that is already coming to a close, I would already be bursting with ideas on how to improve it, make it more visually interesting, make the experience smoother and more intuitive, and more. One comment that came up a few times was that there was not enough context surrounding the icons or facts listed. The first thing I would fix would be to add some color to the text, likely red and green to signify a minimum or maximum time restraint. Another addition could be arrows between the icons to demonstrate their relationship more clearly.

We Have Time Requirements. That’s the lesson I conveyed with this project. But I learned many more lessons to reach that goal — testing is more valuable than any cost it might come at. Building a prototype can save time and resources. Research is just as important as ideation. Start from the end. Don’t start writing a blog post the day it’s due. These and many others are important steps in the design process, and the design process is one that is never truly complete — we just stop working at it.

Written by

Graphic Design student, Maryville University. He/him. Views are my own.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store