#microinteraction

[designaday]

In the Details: Shake, Shake, Shake

My personal setup here in my home office is rather luxurious. I have a 27-inch, Retina 5K iMac in the center of my desk. On either side, there’s a 20-inch Apple Cinema Display. That’s 18,273,600 pixels. That’s a lot of screen, and it’s a lot of space in which to lose your cursor.

In Apple’s Accessibility preferences, under Display, there’s a Cursor tab. Therein, you will find a checkbox labeled “Shake mouse pointer to locate”. When this is checked, shaking the mouse rapidly back and forth will cause the cursor to enlarge. When you stop, it shrinks back to its normal size, and your eye easily follows it.

I’m sure Apple’s UX researchers noticed people doing this to try to find their cursor and figured they could help us out. Maybe it was done specifically for people with poor vision, but as with many designs for accessibility, it helps everyone.

[motion-ui]

Menú icon microinteraction 💘

(via Animation Flow - Menu Close And Open by Ajay Mishra)

[motion-ui]

Desktop Menú microinteraction for Tate Catalogue. 

(via TATE Menu/Catalogue by Eleken. - Dribbble)

[motion-ui]

Ueno Store, Suprise me microinteraction! Really nice  

(via Ueno.store 😍 Surprise Me 😍 by Kwok Yin Mak)

[motion-ui]

Menu interaction, awesome spatial awareness 🆒

(via Digital Smile Academy - Menu by KREATIVA Studio)

[visionicagency]

𝐌𝐢𝐧𝐢𝐦𝐚𝐥 𝐓𝐨𝐠𝐠𝐥𝐞 𝐔𝐈

A simple toggle interaction concept focused on usability and visual clarity.

[designaday]

In the Details: Assume Intent

There are two philosophies when it comes to keeping users from making mistakes. You can assume that they are going to make mistakes often and check every time. This is the approach that every video projector takes: “Press power again to shut down.” How many times have you accidentally picked up a projector remote, pointed it at the projector and pressed the power button and then thought, “Oh, what am I doing? I don’t want to turn off this projector.” I’ve never done that. Not once. And yet, I have to press the button twice every single time. It’s become a habit such that I automatically hit the button twice. If I were doing it accidentally, I’m sure I would accidentally hit the button twice.

The other approach is to assume that people usually mean to do what they do. This is the approach that the UI designer took in the video system in my classroom. When I hit the power off button, it displays a message indicating that it will shut down in some number of seconds unless I press a button to stop it. That’s a smart choice.

[designaday]

In the Details: Hint Text

Hint text is commonly used in web forms to provide a hint about what you should enter in a field. For example, it might show you the format of the data the field is expecting or an example. Hint text is usually a light gray so that the user doesn’t think that it is actual text in the field. It typically goes away when you click in the field.

I was recently setting up an event on Tito and filled out the date and time in this form. When I hit the button to save this information and continue to the next step, it told me that the time I entered was invalid.

This puzzled me, as it certainly looked valid. After a couple minutes of trying to re-enter the time, I realized that the “PM” show in the field is hint text. It expected me to click on the PM and type “P” or “A”. Once I did so, it looked like this.

Notice the difference between the “PM” in the Start time and End time fields. This is the first time I’ve encountered a time entry field that works like this. It was unexpected and confusing. If I had wanted to change it to “AM”, I may not have had the issue, as I probably would have clicked it to try and change it. As it was, I assumed that PM was the default, and the error message that was provided did not explain the problem.