Simple but often overlooked UI ideas

Ashim D’Silva

I am at a computer most of my day; it’s been the norm for over a decade now. Three years ago, I bought a Mac and never looked back. I turned quite militant with the Mac-love, but truthfully, I don’t think I’d be writing this article if I hadn’t switched, because Windows seems to think “if it ain’t broke, don’t fix it”. The smallest things really do make a difference in practice, even if in your head, one way is as easy as the other. As designers and developers we often put out products to a target that isn’t us. It becomes important then to think about the ways people might go about using your software, and not simply how it’s meant to be used.

This list is by no means complete, but simply small things I see on the web, that have been, and should be, done better, but get overlooked fairly often.

1. Large link hit areas

This becomes especially apparent in lists of links. Consistent link sizes means a user can move the mouse vertically to go to the next link, without needing to be overly specific with his aim. Of course, feedback like rollovers become essential in letting the user know they are over the link they want.

2. Click text for check boxes and radio buttons

This seems similar to the previous point, but I think it deserves it’s own space. Forms are pain on general principle and I’m really not a fan of filling them. But, they need to be filled fairly often. I’m reading the text to make my decision, why should I have to click the little box beside it? Also, this problem get fairly amplified on a small mobile touch screen…

3. Highlight text input fields (and add hints)

Operating systems should do this by default. But adding a little something extra can go better with your design and give a little extra information. A phone number field isn’t complicated, but the hint reminds you to add the country/city codes.

See this form working here:

4. Hover controls

With more power, comes more buttons. Each of these comments on YouTube has a time stamp (4 months ago), and a set of action buttons. But you only see these things when you hover over the area. It’s consistent, so you know it’s all there, but doesn’t cover the screen in dozens of repeated buttons.

5. Action Buttons

Windows is infamous for this. Every dialog, whatever it is for, has Yes/OK, No and Cancel buttons. I means you actually have to read the dialog box contents, comprehend and then make the choice. In contrast, on Mac, you hit a ‘Save’ button to save, ‘Print’ button to print, and so on… It’s one of those differences that seems to be negligible, but is actually fairly significant.

Here’s a second example ’cause I really feel for this problem:

6. Interpret User Input

This is easier said than done, and it can take some serious programming depending on what the input is. But here google is your ultimate example. Using the same google input bar, you can solve an equation, find an address, check a flight’s status, get movie timings, and a host of other things, because in the back, google is trying to understand what you want done.

The amount of work involved in implementing this depends on how complex your data is, but if you put some thought into it, even small simplifications make a huge difference for the user. Eg: Google maps allows you to input an address or lat/long coords…

7. Darken the background under modals

Darken/Lighten/Blur: it depends on what options are available to you and suite your site. Whatever you choose to do, fading the site to the background brings the more urgent matter to the foreground giving the user focus and clearing distractions.

8. Enter to submit forms

This is incredibly simple, but it’s crazy how often this is overlooked. There’s even an HTML standard, which ties in really well with mobile devices. There is absolutely no excuse for leaving this out.

It does become the first steps to keyboard shortcuts, and it you have an application, without a doubt, you should be looking at shortcuts. Gmail uses them very effectively, making running through mails and absolute breeze.

There’s a lot of other things you can, and should, do but the general principle is to make things uncomplicated and easy for your users. It separates everyday tools from specific tools – opening a door is easy, flying a jet possibly harder.

Do you have something to add? Or another point of view altogether? Voice it… comment away…

Counter-point: Usability is important, but I’d say the one thing that trumps it, without question, is the experience of the site. I’ve been influenced heavily by the idea that “text that is typographically hard to read could be more memorable, but requires a previous commitment to the subject matter in order to begin deciphering it“. On the web, it translates to sites that you’re not meant to get in and out of in a hurry. You spend time, live through the site almost like a story panning out. These UI ideas then have no place there…

more posts