Interfaces

Monday, September 21st 5:15 pm

We've all used the term interface, and we all know what about GUIs (Graphical User Interfaces) or APIs (Application Programming Interfaces). I think a lot of us even know, in a visceral sort of way, the difference between a good interface and a bad one, when it comes to those last two terms. But I don't think a lot of people think about what makes a good interface, and how to create those characteristics. Let's start with the basics, from Merriam-Webster Online:

1 : a surface forming a common boundary of two bodies, spaces, or phases 2 a : the place at which independent and often unrelated systems meet and act on or communicate with each other <the man-machine interface> b : the means by which interaction or communication is achieved at an interface

And a little more specific from Wikipedia:

Interface generally refers to an abstraction that an entity provides of itself to the outside. This separates the methods of external communication from internal operation ... and allows it to be internally modified without affecting the way outside entities interact with it...

Alright. Fairly obvious. An interface is the boundary between two things, and potentially the medium through which those two things can communicate. In computer science (which I consider to encompass web development), this can be the public methods of an object, or the command line options for a program. When a lot of people think of an interface in relation to computers, they think of point-and-click interfaces - buttons, menus, text boxes - the Graphical User Interfaces, as mentioned before.

Again, we all know if an interface is bad after we've used it. It's difficult to use. It's slow. It's hard to find the options you want. Things are misnamed, or obscure. When we want some data from the interface, it doesn't give us what we think it should. Once you've used the interface, you can say "It was confusing" or "It was slow".

But our task, as web developers is to create a good interface, potentially without having ever used it. (Yeah, I know, testing blah blah blah, but time will be saved if you create a good one the first time. Saving time saves your client money, which makes a happy client, which makes a repeat client.) Now, I don't claim to be an interface design expert. I'm not. But I've been thinking about interfaces a lot lately, as I'm building a couple different kinds over a couple different projects. And I have a couple things that I think make a good interface: Simplicity, clarity, and familiarity.

Simplicity

The old adage applies: K.I.S.S. - Keep it Simple, Stupid.

One great example is jQuery's .attr funciton. The end developer only needs to know one funciton for getting and setting attributes of a jQuery object. This means that it's easier to remember. If you can find a way to simplify your interface in a similar way, I think it can be a great improvement. If you can achieve a complete GUI with with fewer elements, it's the same thing.

But be careful. It may be easy to remember one all-purpose function name, but if it takes 25 arguments, then I'd say you have some issues with simplicity.

Clarity

Make sure your interface elements are well-named, well-labeled, and well-documented. Functions that are appropriately named will be easier to remember and use. GUI elements that have appropriate labels are more likely to be used, and used appropriately, by those who need to use them. And in both cases, documentation helps. Whether it's a page describing the use of your function, or a bubble that pops up below your GUI element on mouseover, or even simply the HTML title attribute, some form of help or documentation will make your interface better.

Familiarity

An interface that people have seen before will likely seem better than an interface that your users have to learn from scratch. If you see a cool UI element, or an interesting way of writing a function, I say take it and make it your own (if it's too unique or cool, though, beware of patents). I'm doing this with a library I'm writing - the aformentioned jQuery .attr function was my inspiration for a function which sets and gets user information. Websites all over the internet use menus, slideshows, and searches that are very very similar. If a user sees your interface, and relates it to another user interface they've seen, they're more likely to be able to use it effectively.

Those are my three big things about designing interfaces of all sorts, and things I keep in mind while designing my interfaces, whether graphical or application-based. Maybe they can help you out too, or maybe you have different ideas. If you do, please share.

<< Prev Next >>

Ryan Kinal is a programmer and web developer, specializing in JavaScript, HTML, and CSS,

Interfaces

Simplicity

Clarity

Familiarity