Finger Wag Usability

computer screen showing a big animated finger wagging

He got a real chuckle out of the finger wagging at him. Love a user interaction that elicits emotions.

He tried to upload multiple files at once, but the application can only process one at a time. As user feedback, the program shows a large, illustrated finger pointing into the screen. Why do we like this? It’s recognizable as a no-no, it’s unexpected, and it’s informational guidance.

 

Best Employee Page

The group at Wistia has the best employee page I’ve seen. The rollover effect on the employee image shows the person in different poses. It gives life and character to an otherwise boring page of employee pics. Applause.

http://wistia.com/about/yearbook

Then I wondered what it looked like on the phone, and how it acted since there is no “hover” on a phone.  At first I didn’t think the phone version was working correctly because I expected clicking an image would take me to a link, and it didn’t.  I started tapping all around to accidentally find a link to Twitter. Upon going back to the desktop version for a closer look, I see the images contain no links. You have to click the textural link under the name to get a link to Twitter. This is how the designer got around the “no hover” on phone issue.  The tapping of the image on phone cycles through the different poses of the employee, and a deliberate tap on the textural link activates the link. Cycling of the poses only happens at 100% resolution, so if you zoom in on the phone you lose the effect, nothing happens.

This is a good way for video marketer to make use of video footage, without actually playing a video. No need, just put still shots in the hover effect. Looks like because there are 3 hover shots per employee, so the typical :hover is not being used. I am trying to locate the script they used for this. Because.  I’m geeky like that.

 

Best pics of employees
Best pics of employees

Wistia Employee
Wistia Employee