Let's look at some basic user interface functionality. To begin with, we can ask ourselves the simplest questions. How does an interface work? How do we know how to interact with an interface? How do we know what's interactive and what's not? Is it all just trial and error or are there rules or intuitive behavior that inform the way that we interact? Let's take a very basic interface element. If we have these three circles with three different colors, what kind of expectations do we have of what's going to happen when we interact with them? We don't really know until we try. We might have an expectation that we think something red or green or blue is going to happen but we don't know what that is until we touch or click on that particular button. But once we've interacted and seen the outcome of that interaction, we can predict what the other interactions are going to do. We have an expectation that's quite logical. So, if we know that blue made blue then we're pretty sure that green is going to turn the background green and red is going to turn the background red. In this very simple way, we've created a logical system. The benefit of this logical system is that it's predictable. By just clicking on one button, the blue button, we've already understood how the other two buttons work without even clicking on them. We've made a very economical system for our user. They didn't have to expend a lot of time or energy to understand how the whole system works as long as we stay logical. Once we break the system and make it illogical, for instance, if the blue dot turn the background pink, we've created a system that is going to take the user a lot longer to learn because the system has stopped being predictable. We can extend our idea of logic and the predictable system a little bit further if we click on the green dot and it turns the background green. The dot itself could change in response, it now becomes black. So, not only does this give us another color to work with, it also lets the user know that their action has had an effect. One of the benefits of having a logical and predictable system as part of your interface is that it can be expandable to the nth degree. So, once I know how this button works, I know how any other similar button to this works. So now we're looking at a system that is logical, predictable, and expandable. The next question is, how do we make it economical as well? Let's take our color dot example and give it a little bit more of a real world application. Say, for instance, we wanted to color in an image and we could pick different colors for different parts of the image. We could change the eye color to blue. If we pick another color, we're pretty sure it's going to change the eyes to whatever color we select, in this case pink. We're already being economical in some small way because one click is changing two items. We could also have it so that each click changes just one of the eyes. Let's say that we want to change other parts of the face as well and color those in different colors. Maybe we want to change the mouth, the eyes, and the hair. One way of doing it would be to color them all ahead of time so we can just simply click on whichever ones we want. But again, while this is visually predictable, it's not necessarily the most economical way of creating an interface. It does make it very clear what the outcome is going to be from each of our interface elements but it takes up a lot of real estate on the screen. In a lot of ways, we've unpacked all the possibilities of interaction and laid them out for the user to see all of them. What does work here is the visual relationship between the button and the image area, and that's because they're basically the same thing. One is a smaller version of the other. So, one way to be economical would be to remove the color from those elements and to give the user a two-step process where they're picking the particular part of the image they want to color and then picking the color that they want. In a lot of ways, we're adding an extra step for the user but we're giving them many more options because we're working in an exponential manner. Now I can choose any of these colors for any of these elements. I might decide that I want to change the color of the mouth and then I could pick whatever color I wanted. So in this case, I'm going to decide that I want it to be blue. What we've basically done here is given the user 18 choices out of 9 elements on the screen. So, we basically cut the real estate of our interface in half. We can continue to try and do more with less in this interface by using visual hierarchy. We don't really need those colors to be that large, for instance, in order for us to understand the differences between the colors. We could also arrange the colors in a more economical way or arrange the elements of the face in a way that they had a better relationship to the main image. We can keep reducing our onscreen real estate and keep increasing our options for the user by some other means as well. We can shrink our repeated components of the face down so they start to look like icons. We could easily take the same amount of space for six colors and turn it into a color wheel where we have thousands of choices. All we'd really need to do to get it to work is to change the cursor from an arrow to an eyedropper to let the user know that they can sample any color. Once we've given ourselves permission to change the cursor, we could question whether we even need to have the repeated small icons for the face. Instead, we could use the arrow itself to select those elements on the larger image and then turn the cursor into an eyedropper to select the color. In short, we've compacted a lot of the users options into the tool that they're using. We've empowered the user to give them a multitude of choices and that's got to feel much better as a user because you're going to feel like you're in control, and you create a whole system based around intuition. Again back to our colored dots. Once we figure out how one part of this works; the eyes, the mouth, or the hair, we can figure out how all the parts work. We could keep going with being economical with our interface. We could condense down and compact the whole color wheel into any of these parts of the image on the right-hand side so the color wheel might only appear when you needed it. Rather than laying out every option for the user to be visible, we're compacting and condensing them into the interface. So let's try and sum up these ideas about how the interface works. It seems like on the one side we have logic, hierarchy, and systems and on the other side we have intuition, discovery, and learning. This seems like quite a reasonable way to think about interfaces. As interface designers, we're trying to create a logical system with a hierarchy that's easy for a user to understand but we also want that user to be able to grow within that system so that you don't have to show the user every single thing that the interface can do in a step-by-step manner. You want there to be some intuitive learning on the part of the user. You want your interface to be understandable but not 100 percent a generic experience. In a lot of ways, you're turning over the driving seat to the user and they have to feel like they're in charge. If you go too far towards the functional end of the spectrum, you end up with an interface that's boring or dis-interesting to the user. If you forget about the function, the interface simply doesn't work. So, it's about finding a balance of both.
