 Hi everyone. I'm going to talk about prototyping in user-centered design for Drupal today, a bit about myself. My name is Chloe. I'm a UX designer and front-end developer at Morft. I started interactive multimedia system design at UTS and I've been working with Drupal for the past two years. So I ran into this website the other day and can anyone tell me what's wrong with this website? Anything else? I mean, what's the problem with this website? Exactly. As a user, I struggle to use it. It's fancy, it's artsy, it's creative, it's totally out of the box. But as a user, I find big usability problem with it. There are plenty of websites out there that have the similar issue. It looks nice, it's so creative, but it's not for the users. So my topic today is I'm going to talk about this one simple thing we can do to avoid usability problems. First of all, I like to define what prototype is and isn't. And then I'm going to talk about different prototypes and different tools we can use to create them. And finally, I'm going to talk about usability testing which is the most important part. First of all, what is and what isn't a prototype? Well, prototypes on sketches. Sketches are freehand drawings that we can quickly and easily make to visualize ideas and communicate with others. It is in no way meant to be a model of the final website. According to Bill Baxter who is the principal researcher at Microsoft Research, who is also known for being one of the pioneers in human computer interaction design. He thinks the difference between sketch and the prototype is the following. Sketch is used to explore ideas. It's used to raise a question, to propose a potential solution, to make suggestions, to invite people to come and collaborate with you. Well, prototypes is to describe a solution, to refine and test your design, to answer questions and to test, especially usability testing. Secondly, prototypes are not wireframes. Wireframes are visual layout of a website. It doesn't include any functionality of the website. It doesn't have animations. It doesn't have clickable navigations. It doesn't have change of page state. I tell you where each component of the page will leave. I give you some insight into the sitemap hierarchy. However, now as wireframes become interactive, I mean, when I click on the menu, it will take me to another page. Then these wireframes become a prototype. Finally, prototypes are not mockups. Mockups are visual design of a website. It doesn't include any functionality of the website. Now, what is a prototype? According to the human-computer interaction handbook, a prototype is a concrete representation of a part or all of the interactive system. What does that mean? Well, interactive system have three important aspects. The first is the role, which means what role does this website play in the user's life, in which way it is useful to them. For example, the paper, you pay someone. Implementation means the functionality of through which component and techniques this website implement its functionality. For example, for Drupal site, we use Drupal. We use PHP. We use HTML, JavaScript. Look and feel refers to the concrete sensory experience the user have when they are using the website. What are they looking at? What do they hear? How do they feel? A prototype and prototype do cover one or two or three of these three aspects. Now the question comes, why do we need prototype? First of all, prototype is to validate, test and refine our design. It is to tell us what works and what doesn't before we even start building the site and writing custom modules. It gives developers, designers and project managers the confidence that whatever they are going to do is going to work based on testing. Once you have a prototype, which has been thoroughly tested, the site builders can just go in and start building the site. The final design won't differ much. The second reason we need prototype is we can use it to sell ideas. It's always easier to pitch to a client if you have a concrete prototype for them to test out and play with rather than just trying to tell them in words what you are trying to do. And thirdly, prototype is a great way to spur collaboration. Clients, developers, designers, they can all come together, work on one prototype, feedback directly into the prototype. So now comes to prototype fidelity. When it comes to fidelity, we talk about low fidelity, high fidelity, but it's actually just one aspect of prototype fidelity. We have many levels of fidelity in prototype. We have visual fidelity, which means how polished this prototype is. Does it look like the final website? Interactive fidelity. Does the prototype has the same animation and transition with the final website? Data content fidelity. Does the prototype has the real data and content? And environment fidelity. Does the prototype work on mobile? Does it work on tablet? How does it work at home? At work in different browsers, environment fidelity. And there are many other aspects of fidelity. I'm not going to bore you with the details here, but you can see. However, with the increasing fidelity is the increase of time and money. So in the world of prototyping, it's not always the more the better. For most projects, for some projects, especially most projects in agile development, we have several version of prototype iterating from low fidelity to high fidelity. However, in some projects that doesn't have big budget, it's always good enough to start from low fidelity prototype. It's cheap. It's easy to make. It gives very inspirational feedback to the designers because testers don't have to worry about building onto the designer's idea. They don't have to worry about upsetting the designers. They can just say whatever they want to say. Secondly, low fidelity prototype is great for A-B testing. So do everyone know what is A-B testing? So a quick explanation. A-B testing is a usability test that we create two versions of UI element and we set a matrix for success. For example, here, on version A, we have sign up form on the left, on the left of nav bar, behind the page title. On version B, we have sign up form behind the content body on the right hand side of the nav bar. Then we have two randomly distributed user to test on both prototype. In version A, we have 50 sign ups. In version B, we have 75. That means version B is more effective than version A. So in low fidelity prototype, A-B testing is easy because it's easy, quick and cheap to move around UI element. Thirdly, low fidelity prototype allow testers and designers to focus on user flow and task flow rather than being distracted by colors, typography and images. However, there are times when we need to use high fidelity prototypes. That's when we need detailed feedback on colors and typography and so on, or we're trying to test the effectiveness of animation and transitions. So different type of prototypes, paper prototype, by far the most common one and the most easy to make one. No learning curve, everyone can sketch. And the software is nowadays that allow you to upload your drawings into the computer and build interactions based on that. I have here a quick example of paper prototype I created. So if you're interested, you can come to me afterwards and I can show you how it works. So basically, we use post-it or paper to indicate page overlays and markers to indicate UI element. And of course we have digital prototype. Digital prototype, it helps us to easily create high fidelity prototypes. It's very easy to share and collaborate with others. Once you put it on a server, everyone have access to it. And it's great for organized online testing. I'm going to briefly talk about some tools I use for digital prototyping. First one is actually, I'll show you a demo. Bear with me for a second. So here is a digital prototype we have created earlier for a client using Action. As you can see, we can have different page, menus, drop-downs, select box, go to different pages. We can have web forms, maps and so on. It's very easy to create high interactivity fidelity prototypes in Action. Just to show you that I'm not lying about it. I'm going to quickly create one. So this one is I created earlier. It's about page. This is the user interface of Action. So I'm going to create a new page. So I just click here, a new page, call it person page, and then predefined header and footer so I don't have to do it the second time. And heading here, image, very ugly page. Now I want to create some interaction. I want to happen that when I click on this, it goes to the next page. So I create and click event, open link, open to person page. And now I preview it. When I click on it, it goes to my very ugly page. That's it. It's that easy. The second tool I like to use is Invasion. The difference between Invasion and Action is you create your element in Action by yourself. It's very easy to do high interactivity prototypes. Well, in Invasion, you upload your designs into Invasion and build interaction based on that. It means you can have fabulous high visual fidelity prototypes that look exactly like your design. And you can create very basic interactions. I have example here. So here's an example I created earlier using Drupal.org. What I did was I just took a screenshot of Drupal.org, signed up screen, and did a bit of upload to Invasion and added a bit of interaction. As you can see, if I click on the username field, it fill up for me. And I click create new account and goes on and create new account. It's very good tool to show to client because they can't just go to common mode and say something like this is bad. I don't know how to get out of this. And the third tool I just discovered a few weeks ago is called Precursor. I love the simplicity of it. Compared with Action and Invasion, it's just so simple and works on tablet. A quick example as well. So you have only five tools. But you can quickly put on your ideas and some text and share with whoever you want to share. It works on tablet, so it means you can actually draw with your hand. So here are digital prototyping tools. And of course for all of us here, we can do prototyping Drupal. Drupal is open source. It's free and for all of us here, there's not much to learn. And the thing with digital prototyping and paper prototyping is that if you want to do a prototype that works on mobile and tablet on different devices, you need to create at least three of them. In Drupal, you create one. And by using a responsive framework, it works everywhere. Especially with the framework such as Bootstrap, Foundation and modules like Panels and Displaysuit, it makes Drupal prototyping really easy. The advantage of Drupal prototyping is that you're using the exact technology with your final website. This is especially good for agile development. When you have a version of prototyping and you test it by the end of this sprint, the designers get all the feedbacks from stakeholders and users and then put it into the next iteration. Until the final stage of the project, your final prototypes become your website. Another situation when Drupal prototyping can be used for is, in my opinion, when you are creating one or two new designs for an existing website. You already have all the nuts and bolts for the website. You have the views. You have the content types. You just prototyping Drupal, get feedback, iterate and then that's it. So now we have prototype and we come to the most important part which is testing. User-centered design, the user feedback are the most important source of feedbacks and the prototype allow us to put user testing at the beginning of the project rather than at the end of the project. So as designers, we shouldn't make any assumption that what works and what doesn't. All the conclusions should be drawn from testing. In the ideal world of testing, we have real users sitting in front of us, stakeholders hiding behind some one-way glasses looking at us. We spend about one hour each session with a user. We do at least five users a week. However, this is not always possible. And then online testing comes to rescue. I'm going to talk about a few types of online testing here. The first one is usability hub, offers this five second test. Five second test is based on the principle that users only look at your design for five seconds. And if you fail to impress them, if you fail to make them take action, then you fail. So here's an example, again using Drupal.org. What it does is it let user look at a screen for five seconds only and ask them to answer a series of questions. Here I use Drupal.org homepage. Let user look at it for five seconds and ask them what do you think this company does? I get a report of the answers and then from the report I can see whether my key brand is getting through to the users. The second type of test is navigation flow test. It works by letting user accomplish a task by going through your navigation system. Here's an example. I let user to try to find out a piece of content on my prototype. As you can see at each stage, some people manage to do it, some people dropped off and this report show me the average response time. This is great for testing whether you have a clear understandable navigation system. The third one is click test. Click test can be used to test your call to action buttons or newsletter sign up. Example here, I have this prototype, I have the newsletter sign up here. Oh, what's happening? I'm sure it didn't do. Ignore it as if it's not there. So yeah, my prototype is too awesome. It's good. So yeah, I have this newsletter sign up button here and of course it's a very successful one, nobody, only a few clicks as well. But by doing this type of test you can see whether your call to action is working or not. And the last one is this distraction test. This is used to test whether the key message on your web page is prominent enough or whether your page is too cluttered or too busy for people to really see what you're trying to see. So here's an example. On the left we see users basically clicking all over the place. That means it's the page is too busy or the key message is not prominent enough. Well in conclusion, prototypes are important. It is one of the most important deliverables in UX design. And you might say what if I don't want the whole full on UX design process I want to lean UX. Well prototype is, lean UX prototypes shine even brighter because it helps you to avoid the most obvious mistakes. Just do a low fidelity prototype. Keep your focus on the key element and you can avoid making heavy, costly mistakes in later stages. Again, low fidelity prototype sometimes are more effective than high fidelity one. And the most important thing is we do use ability testing thoroughly. Don't make any assumptions. Thank you. That's all. Any questions? Yes. I use bootstrap when I'm creating prototype in Drupal. I have an example here. So this prototype is created in Drupal. I use the bootstrap theme and panels. No single line of code was written. And then you already can have all sorts of layout. So yeah, I hope that answers your question. No, I haven't. Yeah, I will definitely have a try. Yeah. This one, it's more of panels that deal with the layout. And bootstrap that deal with for example the media object, the thumbnail, what is it called, accordion stuff. Yeah, definitely foundation. That will work as well. It's the same principle. We have project that works like this. But like I said, that's building a new design on the existing website. So we show them a pretty basic demo like this. And then we can improve upon that. But with full project, a lot of times they would prefer to say a bit more than that. So I think in agile development that will really work. Any more questions? Okay, thanks.