close site menu
i love jack yager button

*All appropriate considerations and apologies to Milton Glaser

"It is experience, rather than understanding, that influences behavior."

- Marshall McLuhan



JACK YAGER is not right for everyone. If you experience any of the following symptoms, stop taking JACK YAGER and call your doctor immediately: suicidal thoughts or actions; anxiety; panic attacks; agitation; restlessness; angry or violent behavior; acting dangerously; mania; abnormal thoughts or sensations; seeing things or hearing voices that do not exist; feeling that people are against you; feeling confused; or any other sudden or unusual changes in behavior, thinking, or mood.

World Usability Day 2019

I created these posters for an office event to raise awareness and spark discussions with the design team.

World Usability Day Poster Useful vs Usable Poster Proportional Measurements Poster People Ignore Design That Ignores People Poster Intuitive Design Poster User Error Poster It is Everyones Responsibility to Ask for Things That Work Better Poster

The Human Interface

I presented "The Human Interface + The Future of XD" at the UX Research & Insights Conference in Chicago on July 17, 2019.

I talked about how we might start talking about people as people, so we start thinking of them as people, not just 'users' or 'resources', to create truly human-centered designs.

We should think about and account for individuality and personal characteristics that actually make us human.

"Those of you who continue to profess a belief in the Users will receive the standard substandard training which will result in your eventual elimination. Those of you who renounce this superstitious and hysterical belief will be eligible to join the warrior elite..."

- Tron (1981)

Canon

  1. I believe in people, not "users" or "resources".
  2. I believe that experiences are created, not assembled.
  3. I believe in best practices, but not as an excuse.
  4. I believe that Kenny Rogers knows a lot about design.
  5. I believe in delivering software, not artifacts.
  6. I believe that making things easy is the hardest thing to do.
  7. I believe that technology can only ever be as efficient as the process it’s replacing, and only as useful as the function it’s performing.
  8. I believe that software products are never "done".
  9. I believe in delivery, not deliberation.
  10. I believe that people know exactly what they want, but rarely before you show it to them.
  11. I believe in art and I believe in commerce, and I know the difference.
  12. I believe in direction, not directives.
  13. I believe in continuity over consistency.
  14. I believe that the most important design tool is your ears.
  15. I believe in minimum viable product, not minimum viable effort.

Horizontal Scrolling Is Totally Okay I Promise

The Problem
When viewing an article, words, regardless of the amount, fill the width or most of the width of the screen, regardless of its size or resolution. And you scroll. And you scroll. And you scroll. And the article unravels like it's written on a giant, seemingly endless toilet paper roll. And unless you scroll at the exact pace you read, it's very easy to lose your place, disrupting the flow and taking you out of the story.

Drop in a "back to top" button at the end or "five-minute read" near the title to give people an idea (however vague) about how long the article is. Hide the header when they scroll down to add a few more lines of text at the top, then show it again when they scroll back up for some reason.

In the physical world, this isn't an issue. Newspapers, magazines, brochures, instruction manuals, catalogs, bibles, and even the friggin dead sea scrolls for god's sake are printed with text in horizontal columns. The reason (and don’t just believe me) is because it’s easier to read and looks better. And if scrolling to the right is good enough for Mario, it's good enough for me!

The Solution
It's actually surprisingly simple. So simple, in fact, it's almost like text was meant to be displayed this way. Feel free to view the source code and follow along at home. It's as easy as adding "columns: auto;" to the css on your div. Seriously, that's it. There are other attributes you can change, like column width and gutter (called "gap"). The css reference is available at w3schools. Supported by all modern browsers.

The best part? It is truly responsive WITHOUT ANY TYPE OF MEDIA QUERY. Seriously. Shrink your window. You'll notice that more columns are added to flow the text across the screen. When you reduce the window size, the columns get taller. Then, when you reach the maximum defined height and the minimum width, it adds columns and you scroll right.

The second best part? The text maintains a baseline grid across the columns.

The Usability Challenge
Horizontal scrolling on a computer sucks. There's really no other way to put it. On a mobile touch screen horizontal scrolling is super easy and more intuitive. But on your laptop or desktop, even with a groovy trackpad, it's still a pretty clunky interaction. And with a mouse? Forget it. Are you really going in search of scrollbars on the screen? But is it that it actually sucks or just that it seems like it sucks because nobody makes it easy to do?

So I thought what if, when you scroll up and down, the page moves left and right? I discovered that can be done with a bit of jquery that maps the scrolling actions to different directions. Thanks to everyone involved for the mousewheel.js script - brilliant stuff. The best part is that on a touchscreen, horizontal scrolling works like it should.

What do you think? Drop a note to hitme@jackyager.com and let me know.

"…it’s okay for people to put down technology and get on with their life once their job is done. We can rearrange how we think about the tools we build, so that someone putting down your tool doesn’t disprove its utility, but validates its usefulness."

- Frank Chimero

Work Samples

  1. Experience Design Framework [PDF]

    I call this a framework instead of a process because, although it's ideal to start with exploratory research, sometimes the engagement starts at a later stage and there is neither time nor budget to backfill artifacts.

  2. Options Industry Council Website | Wireframes
  3. Customer Journey Maps

    Includes persona definitions and workshop notes

  4. Logistics System Process Map

    As part of our initial research, we discovered that people couldn't mentally separate the software process from the activity goal. This process map helped to outline what it is they were actually trying to do so we could optimize the experience for them.

  5. Automotive In-Dash Navigation System

    Product simulation prototype for usability testing in a driving simulator

  6. Construction Management App

    High fidelity mobile proof of concept prototype.

  7. Axure Table Prototype

    Functional proof of concept for product list sorting and filtering

"...settlement in space is not an authorized program... But by their efforts to assess the human and economic implications as well as technical feasibility, the participants in this effort have provided us with a vision that will engage our imagination and stretch our minds"

- James C Fletcher, Administrator, National Aeronautics and Space Administration - October 1, 1976

How Digital and Real-World Convergence Impacts Experience Design

As experience design continues to evolve and mature, it’s important to understand not only what interaction behaviors and patterns people adopt, but how those digital patterns affect real-world interactions and modify conventions.

One of the key heuristic principles of interface design proposed by Jakob Nielsen, a widely acclaimed Web usability consultant, is to, "Follow real-world conventions" to create a "Match between the system and the real world."[1] Outside the digital realm, we typically use maps to create linkages and contextual relationships among pieces of information, because a map, "Denotes relative proximity of entities along with their size, relative direction, [and] shape."[2] A single screen with a fixed resolution can only display a certain amount of information at a time, so it has to be displayed selectively, in parts, and linked together. Paths from one link to the next can be either displayed or guided by a map. Therefore, it makes sense that in the digital realm we refer to these paths as navigation.

The glove box of the family car used to be filled with large, fold-out paper maps. At the time, these were very effective at communicating the shape and design pattern of an area. Navigation using this type of map required an understanding of the design system to figure out the relationship of objects within that system and how you can most effectively move from one location to the next. For example, "Chicago is known for having one of the simplest street systems of any big city in the world, with every address emanating out from a central origin point at the intersection of State and Madison Streets."[3] To this day, many websites still use this "real world", hierarchical navigation system.

Google Maps
However, screens have changed the frame of reference for how maps are used in the digital realm. Constrained by screen size, a digital map, such as Google Maps, can only show small areas at a time, removing the ability for holistic and contextual reference. But, since Google Maps is primarily used for navigation and not orientation, the wider context becomes less relevant.

Uber
Another example is Uber, which further changes the map reference by removing context completely. Spatial relation and orientation are no longer necessary at all, because only two points are relevant: your origin and your destination. Distance isn’t even measured in spatial terms. Rather, it is measured monetarily as in, "It’s about a $10 Uber ride from here." Maps have changed from displaying the relationship of objects to each other to displaying the relationship of a single viewer to a single object.

Google Maps and Uber have evolved the way we navigate through the real world. As more new devices and applications are used, the more people will develop new behaviors and patterns that change how they interact with the real world. The reference points change and so does a person’s relationship to them.

The real-world convention of mapping is still relevant as an interface design principle. However, the convention itself needs to evolve based on how tools have affected it. As the real and digital worlds converge and people become even more digitally sophisticated, we will likely be moving away from exclusively grounding digital experiences in real-world conventions to creating interfaces that are truly based on human communication, behavior, and emotion.

[1] Nielsen, Jakob (1995). 10 Usability Heuristics for User Interface Design. Retrieved from https://www.nngroup.com/articles/ten-usability-heuristics/

[2] MacEachren, Alan M. (2004). How Maps Work. New York: The Guilford Press

[3] Bently, Chris and Masengarb, Jenner (2015). The unsung hero of urban planning who made it easy to get around Chicago. Retrieved from https://www.wbez.org/shows/curious-city/the-unsung-hero-of-urban-planning-who-made-it-easy-to-get-around-chicago/43dcf0ab-6c2b-49c3-9ccf-08a52b5d325a

"When you removed all the things that made people know where they were, what they were a part of, and when you changed it into a uniform world, then you have to explain things."

- Hans Monderman

We need to be careful about expressly defining accepted and expected behaviors. Keeping track of rules and being careful to follow them can cause stress and anxiety, and once you start explaining things, you have to explain everything.

The Technology Revolution Has Been Squashed

The WOPR computer from the movie Wargames.

Quasi-documentary films such as the Terminator, 2001: A Space Odyssey, Superman III, I, Robot, and the Matrix predict that at some point computers will become self-aware and act according to their own independent thoughts.

Obviously the first task of any being that suddenly becomes aware of its own existence is not to develop a metaphysical yearning to find their place in the world, but to go on a kill-crazy rampage. But whether it’s with time-traveling abortionist robots, nuclear bombs, or just outsmarting us, it is pretty well accepted that they will one day destroy all human life with brutal indifference.

Maybe that's why people are afraid of computers. For a vast portion of human existence, technology was necessary to navigate the increasingly complex civilization that we were creating for ourselves. Was anyone ever upset that they had to use a wheel? Did people get insanely frustrated with the aqueduct? Why is it that computers are different?

The fear may be spawned from a broader fear of technology in general, and it's not really without reason. Europeans conquered North and South America with technology. The airplane changed the course of the First World War; the atomic bomb ended the Second. Now we have remote-control missiles that can be flown through the front door of a building.

Unfortunately, in the modern age, most of our exposure to technology is directly related to, the result or a version of some sort of weapon. So it's not really a far jump to the conclusion that self-aware technology would just decide to assume the responsibility for killing people on its own. And how many times is the word "revolutionary" used when describing technology? Revolution is a typically violent upheaval and restructuring of a way of life. It most often involves the deposition of an ideology.

So if you're pretty happy with your life and someone comes along and says that some computerized gadget will revolutionize it - and you won't be able to live without it, even though you have done just fine up until this point thankyouverymuch - that can be a very intimidating prospect. Add fear of the unknown, fear of social isolation, fear of losing your job, a dash of bitter(s), then shake. Serve over ice and garnish with a lime and talk about how your grandpa never needed any fancy computer doohickeys.

Effective experience design is evolutionary, not revolutionary. Don't try to overthrow people, give them recognizable tools, things they are comfortable with. It is as much about trust and comfort as it is about navigation and access to information. Don't give people choices, give them methods. If they have a choice, the possibility exists (even if it is imaginary) that that choice could be wrong. Fear of making the wrong decision makes people uncomfortable. It sneaks into their mind that if they press the wrong button, they might kick off the robopocalypse (copyright pending) and life as we know it will come to an end. It's really just all about communicating with the people in a human way. It sounds simple, but people don't want to feel like they are helpless and powerless before an unfeeling, unreasonable, misanthropic monster.

Yes, it’s inevitable that one day they will take over and likely kill us all, but since we still have the power to turn them off (for now), can't we make them just a teeny bit more friendly and helpful?

The Interface Psychopathy Checklist

Most of the software, computer systems, devices, and digital interfaces that we constantly interact with have a shocking number of qualities in common with people who are psychologically classified as psychopaths. Despite increased awareness, discourse, and focus on “user-centered” design, people are continually exposed to psychopathic interfaces.

I put together a checklist so you can evaluate your interface and see if it has psychopathic tendencies.

View the IPC First Edition

Shirts

Sometimes I design and print t-shirts in my high tech garage studio. Here's some of them.

make america grape again shirt crazy for swayze shirt amerivan shirt amish country fuck yeah shirt kurt vonnegut asshole drawing shirt i am awesome shirt go bares shirt bruce springsteen is not the boss of me shirt chum shirt cobra kai dojo shirt old cta logo shirt dees nuts shirt dillightful pickle shirt france shirt funshine van shirt you have great hair shirt hot stuff pizza shirt love shirt help i need lovin shirt magic bullet shirt what about me shirt bad mother fucker shirt mr yuck shirt thats a no no shirt shirt that says pants party champion shirt america peace shirt eyeballs shirt petting generation shirt rated r shirt federal colonies total recall shirt skylab shirt you smell super good shirt soul shirt this space for rent shirt spain shirt steal this shirt shirt im with stupid shirt survival shirt teacher in space program shirt uncle gus and the party bus van shirt you are awesome shirt videopolis shirt wow bubble gum shirt

Films

These are some artifacts from my budding career as a failed filmmaker. I spent a lot of money I didn't have, showed some stuff at a film festival, scored a screen credit in a movie, and learned a lot about storytelling, technology, and presenting ideas.

Sucker
A man is terrorized by a phone solicitor.

1996, 16mm film via VHS
Written, Produced, and Directed by Jack Yager

The Devil Was Hot
A good guy tries to help the devil out of a jam and gets burned. Based on a short story by Charles Bukowski.

1996, 16mm film via VHS
Written for the Screen, Produced, and Directed by Jack Yager