As a designer, I can’t help but scrutinize over designs that I come across during my day-to-day life. It can be anything from the button design on a gas pump when filling up my car, the package design of my chewing gum, or the interface design of my newest mobile app.
Two things that I am more and more focussed on during my digital UI design observations are microinteractions and card design (both of which are discussed further in this article). These seem to be going hand-in-hand lately, as I stumble upon interfaces that I find delightful to use. In the last few weeks, I have come across two sites that particularly seem to do a great job with both: the Fitbit online dashboard once logged in (yes, I finally joined the FitBit culture) and Adobe’s new tutorial site: adobeknowhow.com.
The Fitbit dashboard has some great microinteractions that correspond with each UI card (which they call “tiles”). For instance, hover over any card, and you have options to change the settings of the card, quick view the info (always love a good quick view!) or “See More” for the more detailed page.
I must say though, that I am pretty bummed out that you can only interact with a card for the present day. Why can’t we see the details from previous days for a card?? Seriously. I hope Fitbit fixes this. They must have the data stored anyways, since they still show the card summary on past days.
The Adobe KnowHow site is another great example of a card design UI, a flat design aesthetic, and some user-friendly microinteractions.
Each card holds unique content, but they all possess the same functionality. Once you learn the UX of one card, you understand how each card works: hover over it to “Explore course” and see the overall ratings, click the + to add it to your wishlist, etc. Filtering by “Free” courses is an option, for all of us who like free stuff…like, all of us. From a user perspective card design is easy-to-learn and intuitive. From a developer perspective, it’s easier to build because every card functions the same way. From a designer perspective, well, you get the point: things are just easier and more efficient. Isn’t it wonderful when things work well for the user, designer, AND developer?!
When you click into a course, the interface is clean and intuitive. I am, however, experiencing some glitchy issues with the “Learn Now” button that becomes a sticky button on the page. When I scale my browser window down in size, it gets a little busted up.
Here it is acting glitchy:
Here it is working properly:
I’m sure it’ll get fixed soon, but I couldn’t write a 100% rave review of the UI of the site when there are actually glitches present. Perhaps someone at Adobe will stumble across this post and fix it. My guess is someone already knows the glitch exist but it’s lower down on the priority list. Ahhh, the joys of the endless cycle of technical development and testing and fixing and…
Anyways, those are two sites I’ve enjoyed analyzing the card design UI and microinteractions of recently. I’m sure there are plenty more to come in 2015!