Welcome back. This week, we are going to be looking at the various kinds of prototypes that interaction designers use in their practice. First of these, is the wireframes. Wireframes are a visual representations of the screens of an interactive application that show layout, types of information that are displayed and the elements of pointer-based navigation that users can use to navigate between screens. Let's take a look at an example. What you see on the screen, is a wireframe of the front page of Twitter when a user is logged in from a few years ago and what you see here is the various chunks of information that this particular web page contains, as well as the different pieces of navigation that users can use to navigate through the Twitter website. For example what you see on the top left is the place for the Twitter logo. Right under that is the large area where an individual can write a tweet as well as the button that they can press to post that tweet. That's followed then by a list of tweets in that person's current stream. On the right, there are a number of sections that include dimensions as well as saved searches, as well as on the top right a navigational menu for the Twitter website as a whole and you're able to see all of this without any actually specific information about either the tweets that were included or any of the more finely grained design details about the web page such as colors or spacing. Which you're also able to see here, is that the navigational elements are relatively clearly distinguished from the static text. So, we see clearly that there is a button that users can use to post a tweet, as well as, a number of things that are marked in blue that represent the links that users can click to go to another page on the website. These kinds of images are the bread and butter of what interaction designers do in their design practice, and they're one of the most common and most useful types of prototypes that designers create during the design process. The reason for this, is that wireframes can help designers answer a lot of questions relatively early on into design process. First of these is whether these screens that they've created, actually capture the right chunk of system functionality. So, wireframes can help designers just work on the concept. Is this actually something that is a good design? Is it a good concept that should be developed further? Another question is, are the components of the wireframe the right thing which I have on a single screen? So, in this particular case of the Twitter web page, whether saved searches for example should be something that is on the same page as the main information about the stream of the tweets and the functionality to post a new tweet. Another thing that a wireframe can answer is the question of whether the screen captures the right components, that need to be presented to the user? So, whether individual chunks of functionality there are the things that the user needs to see on the same screen. As well as more fine-grained details about the layout of the information on the screen and navigational elements. So, a lot of this information can be obtained from users relatively early in the design process by mocking up wireframes. So, let's take a look at an example of this. This again is the wireframe of a good morning message from the Heart Steps system that we will discussing in the last few lectures. This particular piece of functionality, which was very quickly sketched out in this particular case, is supposed to be a message that users receive first thing in the morning, that gives them a little bit of information that we think might be useful for their day ahead. Even with this quick sketch that was literally done in about 30 seconds, we are able to answer a number of these important questions. So, we can actually give solace to users and ask whether it would be useful to have this kind of a message show up on their phone first thing in the morning. We could also find out whether the information that we contained here is actually the right kind of information. Would it be helpful for them to in addition to their health information also have information about their calendar or the weather for that day? Is the order of the information correct? This is something that we debated a fair bit when we were first thinking of this component. But it is something on which we can get very easily feedback from participants just by showing these sketch to a number of people. So, one of the things we were considering is whether we should first give people something that is just useful to them generally. So, their calendar, weather forecast and maybe some pieces of news, followed by the health content or we should foreground the health content and then have these other things about their day come afterwards. As well as a more fine-grained details such as whether just being able to accept and decline a step goal is the right way for this functionality to work and how individuals might be able to just finish interacting with this notification that comes in in the morning. So, a very simple sketch, was shown to people who could answer a lot of these kinds of questions. There were also a number of questions that wireframes are not able to answer and for which you need different kinds of prototypes that we'll be discussing later this week. One of them is, the question about the state that is required to generate the output. So, the picture of the wireframe of Heart Steps does not really tell us anything about the conditions that the system used and the sensing that the system used to deliver the message to the participant. It also does not tell us much about how concrete content would be ordered in a particular design. So, think about something like the result list in Amazon or on Google, where a wireframe can show you that the results, that there is a list of results. But it wouldn't really tell you anything about the machine learning that these kinds of sites use in the background to order which results come first. Usually with wireframes also navigation tends to be underspecified. So, wireframes would only show large scale navigational elements such as buttons to go to the next screen or in our case, with Heart Steps to accept or decline the step goal. But it would not provide all of the minute details that are involved in navigation such as the whole pop-ups, progress bars and things of that sort. As well as wireframes, there's very little to say about the non-visual output that the system produces, such as haptic feedback or audio feedback. So, they're useful for answering a number of important questions that designers need to consider early in the design process, but they do not allow the designer to get all the feedback that they need to complete the design. So, how do we wireframe? There are different ways that one can create a wireframe and the easiest one of these is sketching. So, one can just use a pen and paper to draw out the screens of the application and transitions between them. But there are also a number of software packages both that work on the desktop, as well as on the web, that allow one to create wireframes in an easier way. What you see on the right of the screen is a screenshot of a system called Balsamiq, which is one of a number of different wireframing systems that provides a range of useful functionalities such as buttons and UI elements of different software platforms such as iOS or Windows or Android that can be easily drag and drop into the screens to create wireframes. When should the designer create wireframes? Designers really tend to create wireframes as early as they understand the chunk of functionality that they're trying to prototype and want to get feedback on that chunk. So, this is one of the first kinds of prototypes that get developed as soon as the formative work is complete and designers start thinking about how their systems should work. There are also times when designers will create wireframes just to try different ways to present a particular kind of information. So, you can think about something like a list of personal experiments that might be present in a smoking sensation apps. That might be shown as a list or it might be shown as a carousel or might be shown as a set of cards like Facebook uses in their mobile applications, and being able to create wireframes of all of those would allow the designer to get feedback on those different kinds of presentations and try to understand which of these would work best for the user. Finally, wireframes are often used to try to concretize the functionality that the system will need to have to help developers plan on the requirements for the system backend. That's what kind of data store is going to be needed and what kind of information the system will need to be able to support in order to produce this functionality that the wireframes are displaying. So, in all these cases, wireframes are created relatively early in the design process and designers continue to create them iteratively throughout the process. So, just to summarize, wireframes are the basic building blocks of UX prototypes. There are some of the first kinds of prototypes that designers create when they're trying to display the actual information that the system will be presenting to users because they allow designers to get feedback early and to try to revise and refine their designs as quickly as possible. They can allow designers to test concepts of functionality, presentations of interaction components, as well as the layout of how those components will be displayed on the screen. They allow designers to gather feedback before full systems has been thought through. Because they can start creating wireframes as soon as a single piece of functionality has been decided on and designers want to get feedback. Finally, like the other kinds of prototypes will be discussing this week, wireframes are fast to create and cheap to discard. So, they allow designers to get feedback on concepts quickly and then decide to discard the concepts that don't seem to get traction and move on to other things. All of these reasons make wireframes an important type of representations that UX designers create and it's something that you will need to get a lot of experience creating in your design practice. Thanks for watching and see you next time.
