search

kilmc / animal-crossing-toolkit

A bunch of tools to make playing Animal Crossing more enjoyable
0 stars 0 forks source link

Non-donated museum icon disappears from top right corner of bug/fish/creature when in viewing 2+ columns #3

Open bedirhansolo opened 4 years ago

bedirhansolo commented 4 years ago

If a bug/creature/fish has not been donated to the museum, the museum icon disappears from the interface just after the browser changes from single column to 2+ column view.

Image from Gyazo

This is consistent in Chrome, Firefox and Safari.

Despite the donate icon disappearing, clicking on the top right corner of a bug/fish/creature does toggle the donate to museum functionality.

If a bug/creature/fish has been donated, the icon does not disappear.

Image from Gyazo

kilmc commented 4 years ago

This is intentional although I think it’s more maybe pointing out a flaw in the design.

I designed this donate interaction Desktop first so I was thinking that users would hover over the cards and discover the donation functionality that way.

When I started testing this on mobile I realized 2 things. 1) The donation functionality was basically impossible to discover 2) When an element that’s tappable is fully transparent (at least on iOS devices) you have to tap once to make it visible and then again to have the onClick fire

My solution was to make the icon slightly opaque on smaller screens where I presumed folks would be tapping rather than using a mouse and wouldn’t have hover capabilities. This helped with both discoverability and got rid of the 2 tap issue.

The final reason I only did this on smaller screens was because I felt like showing the donation buttons constantly cluttered up the page especially when you were on a device wide enough to show several cards per row. I figured you’d discover the functionality and then you’d not want those buttons cluttering up the visuals so you could focus on the info.

As far as addressing this, I think for the moment I’m going to keep it as is, but I’m going to noodle on some ways to make this better across devices and maybe have a more universal treatment in a future iteration of the design.

Thanks for the detailed report. And thanks for using the Toolkit!

bedirhansolo commented 4 years ago

This makes sense.

I think where I stumbled is, on desktop, the donation icon shows up only when I hover over it (and I only found that by accident). Without already knowing where the icon is, I wouldn't have known where to hover to find it.

I would've expected the icon to show up on hover over entire card.

Image from Gyazo

That being said, if a constraint of hovering is the entire hover zone is clickable, then it makes sense to only have the icon appear when hovering over the donation icon.

Making the entire card clickable to donate feels like it would be more confusing, especially since users may not catch what exactly happened and why the thing they just clicked disappeared.

Also, and I feel like I should've lead with this, you've made something wonderful. Excellent work!