I am available for freelance work - HIRE ME

On Interfaces and Intuition

posted by Matt Ward on Sep 18, 2010.

Many design projects focus on the creation of interfaces for web forms, applications and other types of products. In this article, I would like to look at the concept of intuition as it pertains to the world of design, approaching the topic primary through one of my own recent experiences with Adobe Illustrator.

A few weeks ago, a project landed on my desk that involved creating some highly detailed work in Adobe Illustrator. Based on the nature of what needed to be done (which I really won’t get into) I figured that the best option would be to give the gradient mesh a whirl. I’m not all that experienced with this particular tool, though, so I went out onto the web and found myself a nice little video tutorial on how to use this particular tool.

What I learned blew my mind!

Ironically, however, the mind blowing revelation actually had absolutely nothing to do with the gradient mesh itself. That particular tool worked pretty much the way I expected it to, and while I picked up a couple of neat tricks that made working with it easier, there was nothing all that earth shattering. No, what I learned was that I could actually use the Convert Anchor Point tool (buried beneath the Pen tool) to independently adjust a single curve handle, without effecting the opposing handle.

I had always thought there should be some way of doing this, but I had never been able to actually figure it out. Instead, I always just used the direct selection tool to select the desired anchor and make any adjustments that way. Finding a different and more precise way of doing this was a huge bonus for me in my own Illustrator work, of which there is a lot.

The Problem

For a long time, I wondered why Adobe didn’t include some way of adjusting individual anchor handles to allow for this kind of precision editing of curves. It seemed like a fairly significant oversight in my mind. As it turns out, it wasn’t an oversight at all. The functionality was there all along. It just wasn’t obvious to me. And that, dear reader, is part of what I want to talk about today, primarily because of its interesting ramifications on the notion of usability and design.

Thinking about my own experience here, I think that the problem emerges from two key factors, one of which is somewhat more significant than the other.

First, when you look at Illustrator’s interface, the required tool is (as already mentioned) buried beneath the pen tool. This of course, means that it is not immediately visible from the main toolbox. Granted, this is somewhat of a minor problem, all things considered. With the sheer number of tools that Illustrator offers us, it would be impossible to display them all at the top level of the tool box.

But that’s just the minor issue.

The bigger issue is one of naming. To start, I’ve never been particularly enamoured with the Pen tool, either in Illustrator or Photoshop. It’s not that I don’t like what it does, because I do (and I use it all the time). It’s just that I don’t find the name to be all that meaningful. When I think of using a pen, I don’t think of the kind of functionality that Adobe’s Pen tool actually offers. In other words, I don’t imagine creating a series of anchor points and adjusting their handles in order to create curves.

I suppose from some perspective, I can understand the choice though. As a guy who had aspirations of pursuing a career as a comic book artist, I definitely did a lot of (very bad) manual inking of my pencil art. So, when I think of a pen in art, my mind tends to naturally gravitate to that kind of work, and since a large part of the inking process tends to involve filling in fair sized areas with black, the idea of tracing shapes does seem vaguely analogous.

It’s the kind of analogy that I have to puzzle out for myself, though, and that doesn’t make it particularly intuitive.

Even more problematic to me, however, is the Convert Anchor Point tool. Quite naturally, the name of this tool suggests that it is specifically intended to convert an anchor, and the primary use that I’ve found for it through my own learning and experimenting in Illustrator was to convert a single anchor point from a curve to a corner. In and of itself, that’s actually a pretty useful functionality, and I assumed that it was about the extent of what the tool did.

The Convert Anchor Point tool does not suggest the full range of its functionality

The Convert Anchor Point tool does not suggest the full range of its functionality

I did not suspect that this same tool could be used to individually adjust the curve handles on an anchor. And really, who can blame me? There is nothing implicit in the tool’s name or icon that suggests that it has this kind of functionality. Even now, knowing full well what it can do, I still don’t find there to be any really meaningful connection between the concept of converting an anchor point and the ability to manually adjust handle points.

Somewhere, there is a disconnect between the tool (and its name) and this very useful functionality that it provides. As such, that part of Illustrator’s interface design is simply not intuitive.

Intuition in Interface Design

I certainly don’t expect that my little rant about the Convert Anchor Point tool is going to get the attention of the Adobe development team and cause them to rush out and make any dramatic change to the interface of Illustrator CS6 – whenever that is actually due out. At this point, it would actually probably be a bad thing to go and change it, because so many of their users are probably so used to it already.

But that’s another interface issue, to be discussed another time.

The point at hand is that my recent discovery about the tool got me thinking about interface design on a larger scale. In an application like Illustrator, the interface – and in this specific case, the toolbox – is there for the use of the designer/illustrator. It’s supposed to be a simple collection of graphical elements through which the user can quickly select between a variety of tools that they may need to help them as they work on a particular project. And, if the interface is supposed to help, then it stands to reason that it should also be intuitive and easy to use.

But what is this “intuition” word and what kind of bearing does it have on design? In an interesting article entitled “What Makes a Design Seem ‘Intuitive’?”, Jared M. Spool tackles this issue, by writing:

To those who police the English language, interfaces can’t be intuitive, since they are the behavior side of programs and programs can’t intuit anything. When someone is asking for an intuitive interface, what they are really asking for is an interface that they, themselves, can intuit easily. They are really saying, “I want something I find intuitive.”

But, I believe that English is an adaptable medium, so it’s ok with me if we call a design intuitive.

Basically, then, intuitive interface design is about creating something where, when the user comes to the interface, they know exactly how it works – even if they have never seen or used it before.

Spool goes on to discuss two important knowledge points, which describe how much a particular user knows about the interface. The Current Knowledge Point encompasses everything that the user does know, while the Target Knowledge Point encompasses everything that user needs to know in order to make proper use of the interface.

The space between these two points is referred to as the Knowledge Gap, and according to Spool, this is

where design happens. [...] We only need to design the interface for the space in between current knowledge and target knowledge.

From this perspective, effective interface design is about building a bridge, helping users move from Current Knowledge to Target Knowledge almost seamlessly.

Filling in the Knowledge Gap (image from Spool's article)

Filling in the Knowledge Gap (image from Spool's article)

Knowledge and the Symbolic

Interesting though it may be, one thing that Spool’s article doesn’t really get into is the nature of knowledge itself. Like in language, I believe that there are essentially two key forms of knowledge that inform our approach to an interface.

The first is literal knowledge. This essentially encompasses everything we know about the interface itself. It may be an understanding of standard web forms, or the conventions of navigating through a wizard. It may also be a matter of standardized positioning – such as always looking for the power button at the top of the remote control.

This type of knowledge, essentially based on previous experience, allows us to make quick and intuitive decisions about how to interact with an interface. Provided that our knowledge is sound, and that it actually leads to the successful execution of a desired function, most of the time we won’t even be aware of the fact that we are even using this knowledge.

The second type of knowledge is figurative. We may not have specific, literal knowledge about an interface, but because designers have provided us with key hints, through various symbols or icons, we are able to intuitively understand the functionality and thus use the interface.

It is precisely this kind question of figurative knowledge that is at the core of my primary issues with the Pen and Convert Anchor Point tools in Illustrator. The symbolic implications of their names and icons are not entirely analogous (at least in my mind) and thus misinform my initial understanding of what the tools are intended for.

Conclusion

Of course, when anybody builds an application as vast as Illustrator, packed (perhaps even over-packed?) with such extensive functionality, the likelihood of just being able to design a flawless interface that anyone can just sit down and start using without any sort of learning curve is, essentially, an impossibility. There’s just too much going on – and too wide of a user base – for anyone to be able to realistically achieve that level of interface perfection!

Also, I want to reiterate that I am not really harping on Adobe here. The discovery I made about the Convert Anchor Point tool just happened to be what set my mind off on this line of thinking. I’m sure it could have happened as a result of less-than-intuitive interfaces in any number of other applications too!

The point is simply to stress the important role of intuition in interface design. So, whether you are designing simple web forms, complex applications or even real world products that require some level of user interaction, always remember that your job is to close the knowledge gap, by designing the most intuitive and useable interfaces that you possibly can.

What do you think? When you need to design an interface, do you work to make it intuitive for your users? What kind of techniques do you use to do this?

Post A Comment

Also from Echo Enduring Media:

An Unfolding Tale

About the Author

Matt Ward is a digital artist who lances freely under the moniker of Echo Enduring Media, and specializes in graphics design, illustration and writing. He is also the Creative Director for Highland Marketing, a creative direct marketing company based out of Waterloo, Ontario. You can follow Matt on Twitter

Like this post? Help Promote it!

Comments

Sep 18, 2010

Stefan St. says:

A very interesting post. Made me think of a discussion I had recently. It was on the zoom icons and if you can be sure it is a culture neutral metapher.

Another concept of knowledge is to divide into implicit and explicit knowledge. Where explicit knowledge can be thought of any knowledge which can be written down, but implicit knowledge could be interpreted as unconsciously knowledge. This is the kind of knowledge you can’t write down and which depends on all your experiences.
I think it is an important thing for any designer to think and reflect on these matters.
Thank you for the article

Sep 20, 2010

Jessica says:

I’m not sure which version of Illustrator you’re using, but in my version (CS3) the convert anchor point tool is to change the anchor point from straight lines to having curves. Yes it does allow you to move only one handle at a time, but once you’ve made that initial handle, you cannot move it again. To do that you must use the direct select tool. Holding option before you select the handle lets you move just that one handle, and not the opposing one as well. Hope that helps you out some.

(Though you might find it useful to find an Illustrator book to help you learn some tips and tricks. It will really help you save some time.)

Sep 20, 2010

Andrew Liebchen says:

With the example of the Adobe Illustrator pen family, perhaps you’re missing the legacy of the program itself, and how it has transformed and grown throughout the years. Kind of an embedded history of Illustrator and its users. In fact, you could argue that Illustrator invented this kind of functionality, or is at least the oldest and most widely used tool of its type. Given that, what is “intuitive,” especially when there isn’t a apt metaphor in the physical world for manipulating this type of curve mathematics?

At any rate, “burying” the Convert Anchor Point tool in the pen family actually makes sense for certain kinds of work flows. If I were creating an outline from scratch, I would layout a rough set of points with the Pen Tool. Then, I would switch to the CAP tool to establish the curvature of the connecting segments…I’m done using the Pen Tool, thus it is replaced on the tool palate by the CAP tool.

My point is that there is hardly an “intuitive” reference for this workflow, other than the one established by the program itself. Not say you were using the program wrong, but all tools should demand a way of working, and Illustrator in spite of its flexibility, should be no different.

Sep 20, 2010

Toni Kukurin says:

While this certainly is an interesting point of view, I believe the problem – as far as Adobe’s software goes, at least – is much deeper than just that.

For one, the icons must be small. And represent as much as possible through their name. And be easily recognizable. And follow the general “pattern” that has been made over the course of time.

Also, it’s interesting to note that most people learn Illustrator/Photoshop in one of two ways (or a combination of both):

- “Play around” in the interface, eventually either quit or resort to…
- Learning from an on-line tutorial – but NOT Adobe’s official documentation.

There’s the problem, perhaps. Official docs are boring, hard-to-read and full of unnecessary information. Unfortunately, they also often “hide” cool stuff like this from you and therefore very little people know about it.

And the people who do know about it consider it common knowledge, and believe you already know that.

Fact: Illustrator diagonal guides.

So there we have two sides of the same coin; and I think both partake equally in our (lack of) knowledge about certain things.

Sep 20, 2010

prax08 says:

The individual bezier handle modification you have mentioned about is also possible to accomplish using the Direct Selection tool both in Photoshop and Illustrator. You have to press ‘Option’ key while adjusting the bezier handles :)

Sep 20, 2010

Serdar says:

Thanks for this nice article.

I disagree about the name of pen tool though.

When I think of ‘pen’ reference in an artwork environment, I immediately think of Rembrandt’s and Picasso’s pen-and-ink works.

Pen in this sense, is strongly related with the art of ‘drawing’ with a draughtsman’s virtuosity: drawing the fine-tuned/perfect line which this tool actually tries to replicate digitally with Bezier curves.

Sep 20, 2010

Prax08 says:

On handling the beziers, individually moving a handle is accomplishable using Direct Selection Tool itself in both Photoshop and Illustrator. You just have to press the “Option” key while moving the individual bezier handle.

But a nice write up is produced there.

Sep 22, 2010

Joe Klemmer says:

There is a great book that Apple published quite a while ago called the Apple Human Interface Guidelines http://j.mp/czKs72 that discuss this topic. It is a very good read for anyone interested in UI.

I was also going to go all harpy about how the MS Windows UI is only “intuitive” because it is what everyone knows. The design actually sucks badly. But I’ll just leave it at that.

Side note: There were some minor type-os in the article.

Paragraph one: Last Sentence -
“so I want out onto the web”
should probably be -
“so I went onto the web”

Paragraph 11: Second Sentence -
“As guy who had”
is likely supposed to be -
“As a guy who had”

I’m not Trying to be a grammar Nazi with this. My ability to spell the English language is, well, without spell checkers no one would be able to read what I write. I’m just trying to help out someone just as I would hope someone would do for me in the same circumstances.

Sep 23, 2010

Matt Ward says:

Thanks for pointing out those typos, Joe. I do try to proof these articles, but sometimes I just miss those little things.

Interestingly, today I had to do more work in Windows that I have in a while. After having worked on a Mac for a while now, you’re right. Windows is just not intuitive. I hated using it :)

Sep 23, 2010

Michael Fever says:

Went to the doctor today, the whole office of 14 exam rooms, and the reception area is all on Mac. I’ve never seen this before in a doctors setting, must say, I was impressed!

Sep 27, 2010

Joseph Alessio says:

That’s a good post, Matt, and I agree with your article on the whole.

On the other hand, though, I have found that usually there is far more below the surface that isn’t apparent, and occasionally wonder whether we are to blame for not learning thoroughly or the creators of whatever for not making it intuitive enough. User-friendliness is a real issue, but sometimes the issue is that we of the 21st century are used to having everything conveniently at our fingertips (or the mental parallel to fingertips). Hope that makes sense to anyone!

Leave a Comment

Links

  1. CSS Brigit | On Interfaces and Intuition

Top Commenters

Thanks so much to these awesome people for joining in on the discussion!

Copyright © Echo Enduring Media 2009-2014