In the last segment, we looked at buttons and how to work with buttons and now we're going to look at all the other things that aren't buttons in our interface. So, how else do we navigate through our digital content, if we don't use buttons. Well, we have other systems in place, menus, links, fields. On all of these different systems have to be designed by a UI designer. They're all simple fast functional means of interaction. Unlike buttons, they rely on design conventions that we're very familiar with. There's no point reinventing all of these, we actually have to work within the conventions that already exist, because those conventions are there for a reason. They're very successful. There's some fundamental principles of graphic design that we can consider in order to keep our simple, fast, functional interface working. We can use shape, scale, contrast, clarity, and economy in order to reinforce and emphasize the goals of speed and function. So, let's look at how we might apply some of these design criteria to some simple interface elements. Let's start out by looking at one of the simplest things of all, a text field. On the surface of things, it just looks like a rectangle with some contrast from the background, but it can still have design decisions applied to it. So, the shape and the scale of it could change for instance and become functional or dysfunctional depending on what kind of move we make. So, as a designer, we can change the functionality of the text field, but we can also change the aesthetics of it as well. By small moves, we can make it feel different and give the user a foreshadowing of the functionality of the field. So, by giving it ran corners for instance we could make it feel much more like it's a window for texting in. Once we introduce that functionality to hold text, we've suddenly got a relationship between the text in the box and now, we really do have to consider our shape and our scale because the box now has a function. So, we could make the text too big or too small or we might have to consider how much text does the box have to contain. Is it just for sending a very tiny amount of text or is it going to have the capacity to send a whole paragraph. So, again function and aesthetics are intertwined. We could also think about whether the field has the ability to change its own shape and respond to the amount of text that's filling it. As we look at the relationship between the text and the field, we have to now start to think about ideas of clarity and economy. We don't want to waste space and we also want to have the text to be as legible as possible. So, we might alter the size and letting of the type but we might also alter, the shapes and proportions of the box. Even when we have a good relationship between the size of the type and the size in the box, we have to decide on the overall size of that element within our interface. Once again, we would need more contextual information about how this is going to work on a screen. How much text is there going to be, what kind of background is it going to have. Is it a single message or part of a conversation. Once we know a little bit more about the function of the design, we can go back to our design criteria shape, scale, contrast, clarity, and economy and start to let those things inform the user interface design. Right now, the placement of these speech bubbles isn't very economical. There's too much white space between them, and if there's two people having a conversation, how do we know which person is which. We could use color to show that. We could use other design conventions to accentuate one voice coming from the left and one from the right. By adding tails to the rectangles. We turn them into speech bubbles, which is also another convention that we're very familiar with. So, even in a design that were very, very familiar with, you can see how many small decisions there are to be made by the interface designer. These micro decisions all contribute to the ultimate look and feel of the interface. Let's look at another example of a really basic interface element. Let's say that we have a text field for entering data, where the data is very limited. For instance, entering your first and last name. When I go to enter my name, there's immediately a problem. My first name might fit, but I have quite a long last name, so we're definitely going to need a bigger box. Once more as the interface designer, we're having to negotiate that balance between aesthetics and functionality. In this case, we have two pieces of information. One typographic piece acting as a label and the other acting as the data that we enter. This is not a very economical way for us to build our interface. So, we could think about combining those two things into the text field itself. Now, we have to think a little bit more about the relationship between the text and the text field, because they're sitting on top of each other. Also, the text is now going to have to have a dual function, in that it's a label and it's also going to change into editable text. We could create a number of different design directions, that look at the relationship between the background, the text field and the text itself. One of the things you can see here, is that we've created different levels of contrast. So, in some of these examples, the text really stands out and in other examples, the text field is the thing that is more visible. It's not that any one of these examples is a better solution than any of the others, it would again be contextual depending on the other components that we had, and the kind of content that we were working with. Some of these solutions might work better than others because they're more familiar. They use existing design conventions and those conventions aren't always the best solution, but sometimes they really are. For instance, if we think about a visual convention from the digital world, we can look at some examples that are very, very successful. So, if you think about links for instance, there's a clear and simple way to show a link. The simplest way is just to underline a piece of text and this is so prevalent and so ubiquitous and just the simplest way to do something complex that it's become an absolute convention that we all use and understand very, very quickly. So, when we're trying to create some of these interface elements, there's no point reinventing the wheel. We don't need to come up with a different language to show a link, for example, it already exists. We don't need to reinvent functionality but what we can do, is change the visual aesthetics, the style of those interface elements. So, let's take another example to look at. Let's look at a simple text menu. We take simple text menus for granted because we use them all the time on our computers, but they're actually a very economical and very clever way of getting information to the user. So, let's try and analyze what they do that work so well, so, we can maybe use it for other things. Our text menu allows us to have a dropdown type list and we can go through that list and highlight whatever it is that we want to choose from that list, but you can also have nested subcategories. So, we can compact a lot of information into that menu and make it be visible and invisible whenever we want. So, it's a highly economical system. Our text menus always live at the top of our user interface, so we know where to go whenever we need them. Because they're text-based, they can carry any kind of function that can be described by text. It's also a very economical system in terms of space, because we can contain the sub menus and only make them be visible when we need them. They work on a need to know basis. They remain hidden and compact, until we decide that we need to access that information. Drop-down text menus are hyper functional. We can contain a lot of information in them and a wide variety of information, but we can nest that information and keep it hidden, until we need it. So, you can see it's the main way that we get a lot of our information within the operating systems when we're using them on a computer because it's so functional and so flexible. That flexibility means, they can be used for almost anything, no matter what the content. All they're really using as graphic devices, are words, some muted color, the odd symbol, and a few lines. With this very minimal palette, you can do almost anything, but of course, you might not want your app or website to look exactly the same as the operating system. So, you can take some of those same principles of functionality and compactness and redesign them, to get them to work with the aesthetic of your app or website. So, here's the website for the CalArts poster archive online. It was designed by a couple of my students and it needed to have some drop-down menus that fit the aesthetic of the website, bu, also maintained the functionality of regular drop-down menus. So, they kept the same kind of interaction, but changed all the graphic elements in the menu. So, the typography, the shape of the box, how it appears and disappears are all different from the standard operating system. It's such a simple element of interface design but we often don't think about what we can do with it, as a design component. So, let's look at what some of the variables are for our dropdown text menu. We could change the shape and the proportions of the box. We could change the scale of the box in relationship to the background elements. We can change the color, we can think about its relationship to the other elements on the page. While none of these design changes change the functionality, they do change the look but they also change the feeling that a user is going to have, when they use this menu. We can go into a little more detail and look at some of the micro decisions that might shape the look of our menu. We can think about the typeface, what kind of weight it is, what kind of size, the leading, space between the lines, whether it's upper or lowercase. The color of the type and how we're going to indicate a change of state when the user selects one of the items from the menu. In this case, there's no nested subcategories to think about, but we might want to think about how the category might look, when we've exited the drop down menu. So, if you look in the top right hand corner here, it's showing us what our selection was. So, even in something as simple and familiar as a drop-down menu, we've made many design decisions. We've looked at shape, scale, contrast, clarity, and economy, but none of these aspects of design exist on their own. They're all interrelated. You can't just fix one and expect all the other problems to resolve themselves. Shape is related to scale, is related to contrast and clarity et cetera. Any one change you make in one of these areas, will have effects on the other. You can't change the scale without affecting the clarity, for instance. What this means, is that interface design is a relational activity. All of these different design decisions that you're making, are all interconnected. Each design decision works in relationship with every other design decision. So, you have to consider the more when you're designing each element of your interface, but then you also have to think about how each of those elements is going to have a relationship to every other element, as well, to form your complete interface.
