While cruising around the Disney Store site I found something that was mildly irritating. The site over all is super clean and, dare I say, classy looking. However, the hover states on the buttons are a bit annoying.
Here’s a typical product page on the Disney Store site:
I haven’t seen this one in the wild, only as an example of what not to do. So I was surprised to see that Plumfund, a crowdsourcing fundraising site, managed to confuse checkboxes and radio buttons.
You can’t both hide your name publicly and post a message to the Plumfund wall. Oops!
I recently got a new phone and since I’m cheap I use Boost Mobile. While checking on my privacy settings and what not I found a curious use of color and toggle buttons
See that toggle button on the left there? Since I’m a more experienced use of the internet I will know that when a toggle is to the right it is on, but when it is left it is off. However, this is a major failing for most people using the web. First of all, there’s no text to indicate which one is off and which one is on.
Well that could be possibly solved by use of color, right?
Oh. Oh no. That’s no good. There’s no feedback for a user so they know *for sure* which is on and which is off. Throw the user an extra bone by giving them a noticeable color shift or some other indicator.
For more reading on this behavior I’d recommend Nielsen Norman Group and their write up of toggle switch guidelines.
The company I work for has a segment of products geared towards seniors. This is a handy article talking about designing for seniors (older adults). I do find it funny how light the text is…
And here’s another article on the same subject.
This is a really cool look at colors used in design throughout decades. It will even generate palettes based on those decades!
This is a neato app that analyzes a logo and suggests improvements. I haven’t tried it yet, but it looks promising.
Really good look at the history of the landing page and what the future is for it.
A lot of our customers want sliders. Here’s an article talking about how to make the most of a slider.
A recent hot button of debate (pun intended) at my workplace is a battle between square and round buttons. I lean toward round buttons because I strongly believe that a “button should look like a button.” To me, round implies button more than a straight on rectangle does. But what do I know? I needed to research the web to see what was out there.
In order to figure out whom might be right or whether it was simply a matter of opinion I decided to check out a bunch of sites and see what their buttons looked like. I visited 76 total sites from many different categories to see what I could come up with. It’s probably not scientific, but I wanted enough of a sample size to get an idea of what kinds of sites had round and what kinds of sites had squares.
There’s Square, which is a square button with 0 corner radius applied.
Round can be broken up in to a subtle round, which features a corner radius of around 3 px to 1 px all the way to completely round.
And then there’s a couple of weird ones, like this button at Think Geek which is a combination of round and square.
I recently had the pleasure of going to a Brewers game with my girlfriend, her parents, and my parents. It was a once a year thing and that’s the amount of baseball I can handle. One game a year. Anyway, I wanted to buy preferred parking for the game ahead of time. It was as I was attempting to perform this task on the Brewer’s website that I came across some bad UX/UI.
Here’s a small example of bad user design on a gas station pump that I ran into recently. When using a gas pump you want to be as quick as possible. Nobody wants to try to figure out the pump, even if it’s an extra nanosecond added to your day.
This particular pump threw me for a second. It asked me if I wanted to get a car wash. Considering it was raining, I said no. By the way, it would be nice if there was some tech in there to detect when it was raining and instead suggest something else, “How about some nice warm hot chocolate?”
Anyway, I wanted to say no and my eye scans and sees “Cancel” and “Yes.” I couldn’t see “No.” It might be obvious to you, but as a user quickly scanning it wasn’t in a logical place. It took me a second to realize that “No” was actually above the yes. And with it being a different color than all the other buttons it didn’t match the pattern I was expecting (for it to be grey or yellow).
There’s another issue here too. What do we want to direct the user to do? We want them to say “Yes.” A customer saying “Yes” will be them spending more money at the pump. It’s a little odd to me then that “No” is not only a different color, but it is much larger than “Yes”. And with it being so prominent and by itself it would seem like it’s a bizarre call to action that’s a negative result.
I love role playing games. The kind where you sit around a table and basically create a story with some friends. Yes, I’m talking about games like D&D. I haven’t run the most famous of the rpgs yet, but I do fairly regularly run a rpg version of Star Wars (Star Wars SAGA Edition for those really needing to know all the details). I recently flexed my design muscles to give my players a hand.
It was time to get my hair cut and I went to my default hair cut place to do their online registration. Now, the site looks pretty good. It’s fairly modern and friendly, however I found one instance of some confusing and rather aggravating UI with their date picker.
First we start typing in a date.