Last year, I wrote a listicle about five user interface fails. In the interest of balance, I'm going to bring you five
user interface wins.
Groovy!
These are five little things that while not groundbreaking, do make life easier for the user above and beyond
the call of duty. Things not just done right, but done excellently. This, incidentally, is in accordance to the
second Great Virtue of a Developer - Impatience.
1. The Nationalistic List
You know those pesky drop-down lists of countries you have to use whenever you fill out a form that asks for
your address? This drop-down does one better. It anticipates what country you are hailing from (based on
guesswork, IP address or somesuch) and puts that country at the top of the list. How excellent is that?!
Sure, it's a small touch... but in user experience, the small things do matter.
Country:
2. Preemptive Login screen
You're probably familiar with the standard login screen where you have to fill in your id and password. This
can be a major pain in the ass if you're confronted with a "invalid login/password" message after typing in
both fields.
This login screen does it better. First, you enter an id, and if the id doesn't match any id in the
database, you simply don't proceed.
Go on, try it. Enter any value. The "Next" button doesn't become clickable until you enter "teochewthunder".
And then it asks you for the password. This saves you a bit of typing if you enter an incorrect id.
3. Overlaid Operation
Want to save screen space? Don't want to dedicate an entire page to what amounts to a simple operation?
Use an overlay for, in this example, registration.
The main advantage is that you don't get taken away from whatever you were doing. You're still on the same
page.
The other advantage is that in an age where screens are getting smaller, this saves you some valuable real
estate.
x close
Registration
Name
Email
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
4. Explanatory Rollover Buttons
The button is obviously clickable and self-explanatory, but when you mouse over, there's more information.
Sure, this probably won't work on a touch-screen information, but on a conventional interface, it adds value.
The win here is that absence of the additional value will not take away from the usefulness of the original button. It's
just the icing on top of an already very edible cake.
50% off
selected products!
BUY NOW
5. Searchable Lists
Frameworks such as jQuery Mobile already have APIs for this cool little feature. Say you have a long-ass list of
stuff and don't want to scroll through all of it. I don't blame you - who would? You type in whatever you're
searching for, and the list gets truncated down to your search results! Pretty neat, eh?
The example below reuses the list of countries in the first example.
So much win.
There's so much more I could add to this list, but the sheer awesomeness might just cause your skull to implode.
As technology improves, UI and UX have become increasingly sophisticated. These aren't even the most
impressive things you'll find out there.
Sadly, simply because stuff like this is so commonplace, the ingenuity of these little things often goes unlauded. Well, no longer.
No comments:
Post a Comment