Microinteractions Best Quotes

Book: Microinteractions: Designing with Details by Dan Saffer (foreword by Don Norman)

I highly recommend this read for people who work within UX, content writing, or development. So many great pull-aways, which I list below. The author gets straight to the point without much fluff. An ideal book for learning.

“Feedback can take many forms: visual, aural, haptic (vibrations).” p. 17

Feedback can be… “prominent, unmistakable; subtle, ambient; descriptive as a voice; ambiguous; disruptive; a whisper.” p. 17

“What is important is to match feedback to the action, to convey information in the most appropriate channel possible.” p. 17

“Feedback is not only graphics, sounds, and vibrations; it’s also animation. How does a micro interaction appear and disappear? What happens when an item moves: how fast does it go? Does the direction it moves in matter?” p. 18

“An example of a loop. On eBay, if you’ve bought the same item in the past, the button changes from ‘Buy it now’ to ‘Buy another.’” p. 19

“During the course of a design project… try to identify any possible microinteractions. Make a list of them. …For each one, deliberately consider the structure as outlined in this book, and see if you can polish each individual component. You’ll wind up with elegant microinteractions—and possibly Signature Moments.”

“Signature Moments are those microinteractions that are product differentiators.”

“Microinteractions are an exercise in restraint, in doing as much as possible with as little as possible.”

“The ‘minimum viable product’ can be one micro interaction. Working this way justifies and provokes a radical simplicity to your product, which allows you to say no to feature requests as they arise.”

“…have the trigger initiate the same action every time.”

“The goal for microinteractions is to minimize choice.”

“Things which are different in order simply to be different are seldom better, but that which is made to be better is almost always different.” —Dieter Rams

“The best, most elegant microinteractions are often those that allow users a variety of verbs with the fewest possible nouns.”

“Ask: is giving this choice to a user going to make the experience more interesting, valuable, or pleasurable? If the answer is no, leave it out.”

“Text fields in particular need what system designers call requisite variety—the ability to survive under varied conditions. Often this means ‘fixing’ input behind the scenes in code so that all the varied inputs conform to the format that the code/database needs.”

“Too often, and too easily, algorithms can be designed solely for efficiency, not for value.”

“Remove complexity. Reduce controls to a minimum.”

“Reduce options and make smart defaults. More options means more rules.”

“Use the rules to prevent errors. Make human errors impossible.”

“Predictability is desirable.”

“Feedback provides the character, the personality, of the microinteraction.”

“Always look for moments where the feedback can demystify what the microinteraction is doing; without feedback, the user will never understand the rules.”

“Feedback is for humans.”

“How humans learn is when our expectation doesn’t match the outcome.”

“The second principle of feedback is that the best feedback is never arbitrary.”

“The third principle for microinteractions feedback is to convey the most with the least.”

“Errors or moments that could be frustrating for users such as a long download are the perfect place to show personality to relieve tension.”

On designing for speech: “‘To turn sound off, say yes’ instead of ‘Say yes to turn sound off.’ Always end with the action.”

“Spring loaded modes (sometimes called quasimodes) are only active when a physical action such as pressing a key or holding down a mouse button is occurring. As soon as the action stops, so does the mode.

The value of a spring-loaded mode is that the user seldom forgets that they are in a different mode, because they are doing something physical to make that mode possible, and it doesn’t require switching to a different screen.”

“Bring the data forward in any way. What is the one piece of information that users would like to see before starting the microinteraction?”

“Data should be an input to your decision making, not the decider alone.”

“…it’s the tiny moments, the microinteractions, that can make these large systems humane. Its an era of algorithms and self-driving cars, we need all the humaneness we can get.

Details demonstrate that some care, some thought, some attention has been paid. And this is ultimately what we all want to feel: that some attention has been paid to us and our needs.”

 

Reading: designbetter.co

The next step in my curriculum is learning Product. Product is understanding design, development, and business. What value can I bring to conversations around business decisions, while honoring best practices for design and development?

Recommended reading from my mentor: designbetter.co

I pulled some quotes that I want to remember:

“Successful, design-driven companies are doing just the opposite—they’re succeeding fast by guessing less.”

“A product story is a visual explanation. It should be shared as a storyboard, a map, a comic, a series of illustrations, or a video.”

“Humans are visual thinkers. We often need to see something before we can comprehend it. Visuals will turn the abstract ideas of a product concept into a North Star that can guide teams to deliver on that vision.”

“One thing to keep in mind is that a product story shouldn’t be overly prescriptive about how to realize that future. Every team involved—designers, developers, marketers, ops—will have to use their own domain expertise and judgment to deliver on their end of the work. The product story should inspire and inform but never dictate.”

“Pencils are inclusive. They’re not just for designers—anyone can use a pencil to express their ideas clearly. The pencil is the great equalizer.”

“…although sketches start from ideas already within the mind, they can mutate into the unexpected—forming new ideas. Sketching is a thinking activity!”

“Decades of research have consistently shown that brainstorming groups think of far fewer ideas than the same number of people who work alone and later pool their ideas.”

“Creative Director Jared Ponchot has devised a simple and inexpensive way to sketch as a team despite the distance that separates them. He bought each designer a simple USB document camera, the IPEVO. At just $60 each, Jared even buys the cameras for engineers, clients, and other key collaborators in the company so they can participate in early sketching sessions.”

“Design is more than color and form; design is the act of planning with the intention to serve others.”

“Grab lunch with a developer who may build out your next design. No need for an agenda—just get to know each other. Spend time with researchers who have their finger on the pulse of your customers, sales people who hear frequent requests, product managers who understand schedules and scope, and customer service agents who know where users struggle the most. All have valuable context to offer you. Each influences the success of your work.”

“And don’t just network laterally—spend time with different stakeholders and executives to understand their roles and expectations. Ask questions about the broader strategy of the company. You’ll need to understand the big picture to design products that fit into the company vision.”

“While at the health tech company CounsylLaura Martini made a habit of inviting engineers and execs to design reviews to get new perspectives for her team, but also to put design on people’s minds.”

“Making it Pretty” and the Middle-finger that Accompanies this Phrase

For the past year and a half I have been studying design under my mentor along with a few other seasoned designers on the team. Prior, my design education consisted of various art histories, color and design theory, and practical courses in design related programs such as the Adobe suite. Limiting my review scope, I want to look at the last year and a half. Throughout this time I followed a curriculum set by my mentor learning the basics from typography, grid, hierarchy, and UX principles. Outside of his set curriculum, I read and researched things that I felt I needed to learn in order to boost my personal growth as a professional designer and well-rounded human being.

Can I say that this was really, really hard? I worked a full-time schedule learning and doing, and on the weekends, and after school at night (yes, I was an active student and full-time employee) I was still in it. I was serious about becoming at least negligibly good, in hopes of maybe understanding a little bit of what it means to be a designer. My goal was not to get praise from other designers, although when that began happening I felt complete relief, but it was to be earnest in learning something to the best of my ability.

I had heard this phrase said occasionally throughout this time, but didn’t worry about it because I was so busy in the student-state-of-mind. But now as someone who is actively in it, I can sympathize with bearing the pain of the words that make me want to yell at someone.

“Making it pretty” is a phrase that most designers will cringe at. After learning about our craft and it’s historical foundations such as in the De Stijl school of thought, or the more broadly known Bauhaus school; to modern day research on eye movement on printed or web-displayed typography, I can’t deny this phrase implies that the speaker is making an uninformed observation.

To me as the designer, I hear this phrase as being belittling and how the underlying motive behind saying it is, “You just care about arranging items to be aesthetically pleasing. You don’t understand the importance of a message. You don’t understand the importance of making money for our business. You just care about type, color, and having too much of an opinion on what images we use.”

Can I repurpose this last sentence?

We care about type, color, the images we use, the placement of those images, the message, the content, the voice and tone of the content, the profitability of our decisions, because we care about the historical context and modern day implications of user research and being relevant in whatever industry we find ourselves working in. We care about it a lot. The difference is that we make informed decisions. These decisions are not arbitrary. These decisions are not made because we want to “make it pretty.”

Web Form Design

I’m working on a UX/admin project that contains a single-page form. I followed patterns that were already set up, and just updated the titles of the fields, not thinking twice about it. During our daily design critique, my team lead asked me if I knew about affordances. Nope. Well, maybe I had heard about it through an article a few weeks ago, but I didn’t really understand it. So after explaining a bit about it, he also recommended I read through Web Form Design by Wroblewski.

Although at first glance, it seems like it may be mind-numbingly boring (a 300 page book on data-entry forms??), it’s actually really pretty great. For a seemingly niche aspect of design, it covers a lot of various concepts including real-world examples, so you know right away how to apply what you’re learning. It really helped me to see a broader picture for UX design in general, such as understanding that all audiences are not the same, thinking through accessibility, measuring ease of use, getting people through tedious parts as quickly as possible, etc.

Putting Wroblewski’s research to practice is a grace for your user and potentially can help increase revenue for your company too (read page 26 if you’re wanting to see a real-world application).

Highlights:

  • Looking at things “outside in” means starting from the perspective of the people outside your organization or Web site. How would they define being a member of your service? Chances are, they’d describe it differently than your database would. They’d talk about what’s on the other side of the form—for example, about the things they’d get or be empowered to do.
  • When succinct labels may be misinterpreted, look for opportunities to use natural language to clarify the questions your forms ask people to answer.
  • Organize the content on your forms into logical groups to aid scanning and completion.
  • Consider asking optional questions only after a form is completed.
  • Use initial capital letters to make the titles of content groups easier to scan.
  • A single path makes it easier to process the questions a form is asking through a consistent layout. This, in turn, can increase completion rates by keeping people on task and ensuring that they see and respond to all the questions a form asks them.
  • …generally about 50 to 75 percent of the height of an input field between each question works best.
  • The difference between checkout and shopping on Amazon.com is stark. Even the site’s logo, which usually allows people to return to the Amazon home page, is deactivated to minimize ways off this crucial form.
  • An accessible form takes into account the unique needs of users who have limited or no vision, limited or no hearing, limited physical movement, or cognitive impairments. Statistically speaking, there’s a 25 percent chance that could be any one of us at some point in our lives!
  • Radio buttons: Allow people to select exactly one choice from two or more always visible and mutually exclusive options. Because radio buttons are mutually exclusive, they should have a default value selected.
  • This basic analysis demonstrates that even seemingly simple data collection problems can be solved in multiple ways, with each solution presenting a unique combination of advantages and disadvantages. The job of the designer is to fully explore and analyze these possibilities in order to arrive at a solution that best satisfies the unique needs of the audience and application.

What is the Role of a Product Designer?

I came across a good article that explains the role of a Product Designer, and wanted to capture my favorite ideas:

“Unfortunately, design has classically been seen as purely aesthetic. ‘Make it pretty,’ they say. This is a perception we have to change. We are the custodians of the user experience, and as such it is our solemn duty to educate those around us, above us, under us, about what it is we actually can and should be doing.

[A product designer is] there to help you identify, investigate, and validate the problem, and ultimately craft, design, test and ship the solution.

When you hire a Product Owner, you likely do so because this person is well-versed in a wide range of disciplines; they understand some front- and backend coding, timing, budget, business value, analytics, management, etc. In many ways, this is how you should be thinking about hiring Product Designers. Sure, they might have a beautiful portfolio, but can they be a key player throughout the entire product development process? A good Product Designer knows a bit of animation, prototyping, coding, research, visual and interaction design. They know when to deliver wireframes, and when to deliver pixel perfect mockups. They know when to use animation, and when to prototype. They know how to convincingly communicate their solutions.”

What is Product Design? —article by Eric Eriksson

Quarterly Book List 2 and 3

These last two quarters I have been reading on a variety of topics. I am keeping it design heavy, but have also incorporated other topics that pertain to me individually. These books, such as Quiet, or Everything is Workable are useful in understanding personality differences while still collaborating with other people, so very much an integral part of being a designer. Towards the end of this quarter I am getting pretty specific with my UX skills in something like Web Form Design (review with quotes coming soon). Hope you enjoy.

I have sorted this list with my most current read at top.

The Visual Display of Quantitative Information by Edward R. Tufte Read

Web Form Design: Filling in the Blanks by Luke Wroblewski Read

Everything Is Workable: A Zen Approach to Conflict Resolutionby Diane Musho Hamilton Read

Designing Your Life: How to Build a Well-Lived, Joyful Life by Dave Evans and Bill Burnett Read

Bird by Bird by Anne Lammot Read

Creative Anarchy: How to Break the Rules of Graphic Design for Creative Success by Denise Bosler Read

Designing Brand Identity: An Essential Guide for the Whole Branding Team by Alina Wheeler Read

Quiet: The Power of Introverts in a World That Can’t Stop Talking by Susan Cain Read

Lean In: Women, Work, and the Will to Lead by Sheryl Sandberg Read