In this segment, we're going to look at two different approaches to user interface design. One which is much more template based working with conventions versus one that is more content based. If we go back to our generic web structure, we can see that in many ways that template equals a distilled version of conventions. This can be useful because of its familiarity and its ubiquity, but it can also be a little bit boring and sometimes predictable due to the same factors. The template doesn't take content into account. The template is content agnostic and while this offers a level of functionality, it also offers a level of predictability and sometimes that experience means it's not that exciting. It doesn't matter what kind of content you flow into a generic structure, the framework never changes. If we're making a website about the shapes of animals for instance, it might very little if our content was how to bake a cake or how to buy a T-shirt. But adversely, the generic interface does have some great advantages. First of all, it's fast and it's easy and it offers some flexibility. So even though it's generic, it can still be customized. It's good for repetitive similar kinds of content. For instance, here's a website built using Square space, which has standardized templates. This is a website for an artist, where you can see it's easy to categorize the information into certain bodies of work and it's easy to navigate them and choose which body of work you want to look at. It's very clean and functional. It's not confusing it's very clear. So there are other conventions we can see here. There are thumbnails of work that you can click on. You can scroll through images from top to bottom. So thinking about what kind of areas a template might be successful in, something like this website where the content is visually complex but needs to be organized in an easy to understand and accessible way, might be good for a template. There's also not a lot of user interaction here apart from looking at pictures of things. So here again, a template would work very well for that. We can see similarities with how that might be a structure that also works for something like our animal shapes website, where the content is very similar. So it makes sense for it to be organized in a flat way. But let's see what happens when we change that content into something that has a little more variation. For instance, here's some publications that I've designed and I might decide I want to make a website of my book designs. These are very three dimensional and they have different kinds of formats. So suddenly, it's a lot harder for me to arrange these. I'm not working with regular squares as part of my interface elements, I'm working with a regular objects so the generic interface starts to work a little bit less. But I can take this idea of a fairly generic functional website and I can start to customize it. I can add color to my website for instance, I can create a division between the navigation and the content area. I can choose the color of my typography. All of these things are options that might be available in a template and I might be able to choose something where there's much less of a visible grid in the structure for instance, that creates a different kind of experience, but it still feels like a relatively generic solution when we're working within the constraints of the template. Even my aesthetic design decisions are still contained under the umbrella of what the template can do. So here's what that website actually looks like when it might be made. It's taking some of the ideas of the template in terms of structure, accessibility and logic, but it's creating something that has a little more visual interest by creating a user interface that is a little more specific to this particular kind of content. Here are the same kind of books, but they're structured in a way where there's a different color coding system and the typography works in a more visually interesting way. But the logic and structure of the site is still very much based on how a template works, where you can peruse different sections and zoom into them and look at details. But it's actually the details of the design and the interface design that make the difference to this experience. It makes it more rich. It makes it a more idiosyncratic experience than if a user was looking at a purely generic website. But at the same time, it retains some of the functionality and familiarity the ease of use that you want to have from a generic or functional website. And that's something that the generic website can offer. It's essential to remember that in this way, one size does not fit all. A template can be very useful in terms of its functionality but it has to be modified in order to take certain kinds of content into account or on the other hand, the template could be ignored entirely and we could take some of those conventions and turn them into a much more content specific design. And what we mean by this is really looking at what you're building an app or website or an interface for and trying to think about what is the best kind of interface possible for this kind of content. And we often call this context specific design, because it's taking into account other things as well as just the content. Context specific design has a relationship to specific content. In other words, the way that a visual experience looks has a direct correlation to what the content is or what the message of that experience is. But the interface is also shaped by other factors. There might be a certain user group that is specific to this particular digital experience and that might change how the interface looks and how the interface feels. For instance, if I knew that my user group would purely people that listen only to heavy metal music that might dictate the kind of typography or the kind of imagery that I might want to use. But if I knew that it was for people that liked all different kinds of music, I'd have to create something that had a more general feeling to it and a less specific feeling. The design can also be tempered by the digital experience having certain goals or outcomes that are desired. And this might drive how the user interface works and also how it looks. And these external factors can be different for each different website. So it makes us think about when to use a template and when not to use a template. When the content is strong or has a specific user group or specific goals, a template might not always be the best solution. We're looking at a balance between the functionality of generic design and interface conventions and the specificity of different kinds of content or experiences that we want a user to have. A lot of interface designers strive to have an invisible experience for the interface to be invisible. What this means is they don't want the interface to get in the way of the content and that invisible experience really equates to prioritizing the functionality above all. But the danger of the invisible experience is that it can become a generic experience. Another way to think about it is that the specificity of any digital experience comes through the aesthetics of that experience whereas the functionality is coming from the interface conventions or the utility. When you combine the aesthetics and the functionality together, you end up with a complete digital experience where you feel like you have something idiosyncratic and personal, but you also have something that is functional.
