Transcripts
1. Trailer: I'm Erika Heins, I'm a Web designer and Web developer. I have been working for over 10 years in the field in USA. This is organized Web design, UX, IA, and Paper Prototypes. This first class is about getting organized and how to plan a Website. So, we'll go through content outlines about, what do you have? What do you need to create? Who can you get to start working on creating that content into some branding guidelines, so that's throughout the process should be coming from a consistent point of view? Then, into sitemaps and user stories and wireframes. All this sort of functionality and narrative as a ways in which you navigate a Website. So, at the end of this class, you'll have clickable paper prototypes. They could be either pen and paper sketches that you've linked up as JPEGs to do some user testing or we'll be using a tool called Assuming. Being able to make Websites and maintain Websites, to understand how they work, and how to make them more powerful, or effective is just one of those valuable skills.
2. Introduction: Hello and welcome to organized web design. The goal of this class is to provide all the outlines you need for a clear and productive web design process. Like Ryan Singer says, design is a path-dependent process. So we want to break the process down into discrete steps and gather the right feedback at the right time, to make good decisions at each point. Responsive web design has changed a lot of our workflows and so we'll talk through a process with multiple prototypes. Our project is to plan a website for yourself or someone else. You'll figure out your navigation, sketch the user experience and test how your ideas are received. You can complete the assigned project or follow the lessons on your own idea. We'll talk through project briefs, sitemaps, branding guidelines, content outlines, user flows, responsive wireframes and usability testing. You can hand these documents off to designers and developers or follow the next two classes to design and build the site yourself. The tools we'll be using are: a text editor like TextEdit, Google Drawings, regular old pen and paper, and Balsamiq. So let's get started. Go ahead and set up a Google Drive account if you need one and create a project folder for this site. Also download Balsamiq if you don't have the app, they have a free trial to start with.
3. Project Outlines: Let's get started with our project outlines. These questions and plans will keep us on track throughout the process. There's a project outlines file in the Resources Section, if you want to follow along and fill yours in. First, look at your high level goals, why does this site need to exist? Are there any specific metrics that you're chasing? What will make you look at this site as a success? Make sure your team is in agreement. We're making in a patron event so, we obviously want people to show up. A lot of people stop there, but there are some secondary goals too. We want the attendees to get to know each other, we want them to benefit from that event even after it's over and we might want or need sponsorship. So, make a list of anything like this. A lot of startups watch what are called pirate metrics because of the acronym. These are acquisition, which is how many people you're getting to the site, activation, how many actually do something once they get there, revenue, which is what they contribute to the site's sustainability, retention, which is what number come back again, and referral, of course, who tells a friend. So, write down any specific numbers you'd like to hit. Now, let's talk about process. How are we going to achieve these goals? How are we going to deal with the responsive web? So, a typical waterfall design process goes from idea to plans to mockups to code. A user-centered design process involves users at each step of the way to deal with feedback as early as possible. This is an important shift in perspective and if lucky that Skillshare provides you with the forum to present and test your work with others. Stanford's design thinking process describes this as empathy. You want to learn about the audience for whom you're designing. IDEO's human-centered design process starts with hearing. You go out and you listen to observations and stories. The main point is that you need to talk to your users. You need to listen to them and you need to visualize their life and their daily routine in order to really design something that's appropriate and appealing to them. Capture all your observations in whatever form best suits you and you can use various formal methods to gain this empathy. It's outside of the scope of this class but lookup the agency formerly known as Bolt Peters for a lot of great resources. It all comes down to understanding. If you're designing for someone other than yourself, make sure you really understand their perspective. You're trying to see the world through their eyes. Design is translation, not art. Keep your mind as open as possible. We will go through various exercises in this class and if you drop your expertise, you might find something new. So, as you think about your users, consider your impact. What might be the legacy of this project because there are various formats a website can take. Brochures are the oldest style where you're just presenting and arranging some text information. But games and communities are now more prevalent or important now that we have the technology to support them. Even if you're not building a whole online community or game, you can still use it as your design model for interactive and visual inspiration. For example, Facebook was designed as a mirror of real-world communities. It's main interaction is Like which encourages people to post the most likeable things. Jonathan Harris designed Cowbird as a storytelling platform. Its actions include dedication, sprouting and more. He talks about how this created a competition of vulnerability, a totally different feeling on the site. So, if we just think of our site as a social network, we might just list some basic features but if we come up with a new metaphor, it might really help the site evolve into something new. Also think about when people will visit the site, in a moment of boredom, as a habit or in pursuit of a goal and remember where they might be and how your site might serve or adapt to that. Is your site a map to discover something new or is it a service to help you remember something important? These are all metaphors and inspirations, let's come back to the practical. So, go back to your project outlines document and again, list all your goals for this project. They could be high and lofty and also supremely practical. Now, list all the specific content that you have to work with. To be as specific as possible, we want chunks not vague blobs, as Karen Migraine says, texts, images, videos, songs, whatever is ready to be placed into your layouts. I'm doing a website for my friend, Ariel Crass who's a yoga teacher. So, here's the type of content I might have on his site based on what he already has on his current site. But you also want to list the things that you want to create, an intro video, a bio, whatever. Sometimes, the client has this list for you but often it's incomplete, so you want to think through it too. Try to think in these discrete pieces, not full pages. The more specific we are, the better our layouts can be. The third thing to think about is phases for this site. For example, if you're doing an event site, you'll have things before the event, for example, an overview, a schedule, a register link, but you might also have some different content during the event. You might have a live stream or a hashtag stream that you want to be playing when people come and visit. Afterwards, you might show photo galleries of all the attendees, you might show information for next year's registration. If you list all the stream content now, you can get copywriter started writing it and you can get photographers started shooting it and have real content by the time you're ready to design. So, your content outline might also include a list of attendees, video trailers, news feeds, social media links, an email newsletter, contact info, the bios for the people involved, descriptions of your previous events, a shop for merchandise or sponsorship info. If any of that applies to you, add it to your content outline. Then you can go and ask developers how complex each of these features is and you can slot it for future update if it's going to hold up your launch. So, think of this project as version 1.0 of your site, but it's great to go ahead and have plans for version 1.1 or 2.0. Now, list your priority actions for this site. What must happen in order for this site to be sustainable? Start off with your business needs, basically, your personal needs from this site. We will go into the users' needs in a bit more detail in a second. So, list those users who might visit this site. Order them in order of importance or frequency and think about how they will hear about your site, why they will visit, and how you will help them once they're there. Finally, outline your navigation just as a rough list of how you think the content for this version could be grouped. Again, we'll go into detail later, but it's helpful to see already how your site might start to take shape. If you want to go further with this part of the process, I highly recommend Content Strategy by Erin Kissane. It's a great short book that will help you make a content plan that will last the long term. So, go through and clean up your project outlines and review them with any potential visitors if you can.
4. Site Maps: At this point, I like to do a site map and get a sense of the overall scope of the project. It's also really important to think through your navigation and how people are going to get around the site. So, if you laid all your content out on index cards and you started trying to figure out what groups made sense and what labels you might use for those groups, you would start to get a sense of your site map. This is fun to do with Post-its on the wall, so you can move them around freely and stand back and look at the big picture of the site or you can also do it on your computer. So, card sorting works on smaller sites. It also shows you what language actual people are using, if you're doing this with a group of people of testers. You can do it as an open card store, where you arrange all the content and then you figure out what labels make sense at the end. Or you could put all your labels up on the wall and then ask your users to arrange the content to match each of these labels. Make sure that your mental model is matching your user's mental model. For larger sites, I go ahead and go to the computer and make a site map. I use OmniGraffle for its symbol libraries but Google Drawings also has magnetic arrows, so it's just as good for this purpose. You want to include all the screens that must be designed, built, or visited. These includes newsletters, Facebook pages, third-party services, admin panels, anything that's part of the user experience and that someone is going to need to design. You don't have to include an arrow for every single section. I've included some here to show you the basic navigation from the homepage, to say, the retreat page and then down through the payment process. But if you include every single link on your site, the site map starts to get a little bit overwhelming. Everybody designs these in a different way, but here are some styles that I find helpful. You'll notice that I've used rectangles for all the regular pages. Then this stack of rectangles indicates that this is a template, so I know that there's going to be multiple versions of this page. I can also get more detailed and do color coding. So, I do yellow for landing pages, the most important pages and where people might come from Google or from Facebook. Clients and founders often focus on the homepage, but landing pages are many users' first or most frequent impressions of your site. So, think about BuzzFeed or Upworthy, do you even go to their homepages? No. You only land on those article pages. So, think about your blog posts, think about any special promotions you'll have and really highlight those pages so they get equal attention to the homepage. You can also highlight any third-party services in gray so you know that this is a page which is part of your ecosystem, but you don't actually have to design that one. You might be able to skin it but sometimes you can't. Then I like to highlight in green any pages that generate revenue. It reminds me that I need to get people into that funnel, if this site is trying to support someone. The blue highlighting is for marketing work. For startups and other people trying to plan their website, it's often business planning at the same time. By including all these different properties, like your Facebook page or Twitter page, any flyers you're creating, the word of mouth badge you're trying to create, it helps them remember that those are additional properties that they need to create and maintain. Then you can also highlight in red any pages that require login, so password protection or just your basic admin panel. I also use rounded corners for things which might be a layer instead of a standalone page. So for me, this is my sign in layer. I also would have these call-outs which would appear on multiple pages, so to subscribe to the newsletter, to share things. Then, so you might have a really simple one. It looks something like this, which just gives you the name of the pages, this rough grouping of content, or you might have a super involved one. This was for a multi-year project I worked on, where I was color coding each platform that we were using. It was a open source aggregation of four different open source platforms. This was the long-term vision of how the platform would work when we first got the systems all working together, but obviously, it's a bit overwhelming if you're just doing a small site for a small group of people. Try to make a site map that reveals the scope of the project in a way that's useful to you. It clarifies the priority actions on the site and it gets all team members on the same page. So, you'll go to Google Drive and you'll create a new drawing and you'll have this blank canvas. You can go through the different shapes, the different arrows. Those are the most important tools. But of course, you can polish this up to look as nice as you want. So, go through your site map, make a rectangle for each screen or section, make stacks of rectangles for templates, and then remember to color code it so that you can get a high-level overview of the priorities for this site.
5. Brand Guidelines: Our next step is brand guidelines. People don't always want to make time for this step but it's super important if you want your project to have a consistent feeling. Download the brand guidelines file from the resource's section if you want to follow along. The next class in this series will get in-depth about visual design but you need to have an idea of your brand's personality at the UX stage too. What words will you use as labels? Will you tell your story through images, diagrams, or something else? These elements are all part of the user experience, and there are now millions of websites in the world. So unique and consistent personality is essential for both functionality and impact. For example, the White House has a particular image that are trying to convey which is very different from what you might expect from Disney or from Starbucks. So how do you articulate this? How do you put it into guidelines that everyone can use? There's a Santa brand book that was put out as a kind of a joke but that actually give you a really good idea of how these things tend to work about the feelings and the values of your particular brand. So look through that one for a funny overview. Another great example of brand personality is MailChimp. They've done a lot of work being really creative and really consistent across many different platforms. And Aarron Walter who works at Nalgene has a great book to give you more insight into this process, it's called Designing for Emotion. And we use a couple of his exercise to complete our outline too. So here's an example of what he calls a brand persona. Where you explain either they have an actual character who's holding some of the personality but for our purposes, we'll think of like a celebrity that might represent our personality. He also does brand traits in the format X but not Y, so you have kind of a range that your brand will fall within. And then you also talk about your engagement methods or your interactivity methods that your website might use in order to convey his personality. And also remember that it's about your users. You're not trying to represent yourself unless this is your portfolio website but you want to think about what's going to charm and delight your users. So use their language not necessarily yours, try to do it in a style that gives them something that they're proud to own, and think about the images that are aspirational for them, not necessarily the banal details of a day today. So when we do all this, it gives us a consistent direction throughout each step of design. So again thinking of it as a celebrity is a really good way to start. So is your personality super upscale and more formal, is it more young and innocent and full of energy? What celebrity might you pick to represent the personality of your site? So start off by listing the best features of your brand. Is it about how tech savvy you are, is it about how friendly you are, how fast, whatever you're trying to get across. Make a short list of all those features. And then if you'll look at this personality scale I've drafted, plot where you want to fall on each of these ranges. Are you more professional or more casual? Are you more well established or are you more cutting edge? Don't be afraid to lean way to one side or the other. That's going to give you some really clear design clues later on. So take some time and look through each of these scales and plot where you are now and you can also plot where you want to be if that's something different. Once you settled on your representative's celebrity, make sure you've explained why. So it's about their hard working attitude, or it's about the sense of glamour, or it's about the approachability or the knowledge that they represent. So the reasons why are actually more important than the person you've chose themselves. The next step after that is to figure out what type of visual language might express your personality. So what type of colors, would they be loud, would they be quiet, would they be kind of retro, would they be neon and futuristic, what kind of tight choices, would it be all Caps, super formal, would it be casual and rushed, would it be scripts like more hand written. So think about all these type of visual cues that your brand might have. And then finally list out your interaction methods. You'll see some examples in the brand guidelines doc. So if you're trying to be friendly you might ask questions or you might give tips to your users. If you're trying to be sophisticated, you might use a more modern animation techniques and you might use responsive layouts and if you're trying to be fun, you might use humor or games or surprises throughout your layout. So think through some of these ideas and make a sketch of all the pieces of your brand as they might relate to your site design.
6. User Stories: Now, it's time to think about user stories. The biggest thing to remember about Web Design is that it's 4D not 2D. You're designing experiences over time, not flat compositions. No matter how photoshop might make you feel otherwise. User experiences is the feeling that a user gets as they go through a process. Do you want it to be super simple and focused and minimal, like the Google homepage, or do you want to be crazy, inspiring, and fun., with lots of people around. Like this Jameson site, we can think of this as a story and your storytelling techniques to help us plan. Just like stories have a narrative arc with an opening scene, the various crises of action, a climax and then a resolution, we can think of our user journeys as having a beginning, a middle and end, and maybe even an epilogue. Where we use stories they're much more relatable. So, for example the Karma Wi-Fi site, introduces us to John who's constantly on the go and needs to stay connected. As you scroll down, it shows him setting up his Karma hotspot, meeting another user, telling her story, walking through the process of how the service works and then the benefits of using it. It's much more compelling, much more relatable than a lot of technical specs. But what is a very technical product. Stories also much more emotional and touching than just information or a brochure. Charity water does a great job of telling different stories about how your gift will help, how they got started, why you should donate to them instead of any other charity. They use a lot of personal photographs, a lot of close-up photographs, a lot of personal stories to make it much more impactful and much more lifelike. Within the main story as you scroll down their homepage, there's even a sub-story about here's a likely scenario if your village gets a water project. So, you as a donor could visualize exactly how your gift will help. Stories also make your site way more unique. So, Sony says, we're engineers but we are also artists, and if you go through this site it's crazy examples of animation and creativity to show that they're not just another hardware producer, but that they really see this as artistic creativity in the way that they design things, which makes them very different from maybe any other electronics provider. Shocking headlines can also tell a different story to grab your attention, this one it's about slavery across the world and that it's still in existence in a way that you might not think and so then some prompts to ask you some questions or to direct you to the next step depending on what your interests are. So, these are also called flows when you're trying to direct people or what are follow them through different paths throughout your website. So, in the marketing world book, they're called funnels, so you would measure how many people visit the website and then what percentage of those sign-up, what percentage of those enter your trial, what percentage of those enter your credit card information and then what percentage of those become a paying customer. You study each step of that funnel to see where are people dropping off and then you might do AB tests to try to improve each step of the funnel. Then, when you get into experience design, you can also map their mood during this part of it and that helps you try to design your site to support your customer in a more personal way. So, you can think about before they even get to your website, they're doing something, they're doing some research, maybe they're on Google, maybe they're on Facebook. What is their mood there when they first get to your your homepage. Then of course they have their mood changing as they move throughout the steps of your process, and then after they've signed up for your event or they've emailed you, they might also have some follow-up questions or feelings that you might also address through different techniques. So, Google and other analytics tools, map this out as a detailed flow again where you can see all the different sources that we're thinking about how people started this process, where they land and then what happens next and again this becomes a timeline. So, they're not 2D layout but this is like showing path of someone through time on your site. So, how are we going to plot this journey. Some people do persona's but in my experience those turn into stereotypes where you start hypothesizing, what this caricature might do. So, you want to make sure that you're starting from actual user research, from a real understanding of your users and then phrase them as roles. So, a generous philanthropist is one of your most valuable users or struggling sophomore is one of your most frequent users. Then, think about what each one of their goals are. So, they might have one major goal or they might have several goals while they're on your site. You'll plot each one out separately. Then think about what they need from you in order to reach that goal. So for example, this generous philanthropist who wants to make the world a better place, they just need confidence that their gift is going to be effective if they decide to give to you. Whereas, if you're doing say a photo tutorial site, the sophomore, their goal is to become a photographer someday and so they need basic training via short tutorials. So that's, if you're actually thinking about what that actual user needs, your content will be much more specific. So, you can sketch this out again, I like sticky notes because it gets you off your computer for a while. By thinking of your role as the starting point of the journey, all the way on the left and then trying to plot out each little step along the way in order for them to reach that goal. So, that might be they hear about your site from a friend and so then they Google you. Then they land on your classes page and then they browse through your classes and then they pick one and read the description. Then they sign up and then they leave and then they attend the class. There's a whole lot of steps if you really want to want to get into detail. So, try and identify your most important users and their main goals and plot out all these steps. So, you can just use a pencil and paper. I have these notebooks from Muji that I like that have pre-drawn squares on them or again stickies are fun, you can put them on the wall and then they're easy to rearrange. So, remember that it's just you're starting state and the end goal and you're trying to fill in all the steps in between. So, for this photo novice looking for training, our flow might look like this. Their first step would be they're Googling photography tutorials and so we want to think about, in red is our response that we would want to make sure we optimize our site for those keywords. Then from Google they land on our homepage and so we want to think about, oh this novice would want to see maybe the most popular classes. So you want to just fill in for each of these steps. Now go and fill in the priority content that would support what you want them to do next or what they want to do next. So, stories can be goal-oriented. Like we've just described. They can also be exploratory though. So if you're on Pinterest or a site with a lot of content on it, you might just be reading and browsing and say you might plot out one of those if you're doing a site where people will be browsing. But they also start to surface these functional requirements. So, you would start to see that, oh we need to be able to highlight most popular classes or we need to be able to sort by price or whatever other functionality this person might want. So, that's why you want to walk through them in detail, and again they often reveal gaps. You have this content outline that maybe your client provided you thought up, but when you walk through the stories in a linear format, you're going to start to realize overlooked pages and content, and there's always one more step to the story. After they leave your site, they might go tell a friend. They might come back later. What's their experience like as a return visitor. But always think about that last step. Even if it's usually sign up, there is a big call to action so then after that you want to thank them. You might give them reward that might be a good time to collect some feedback, what else would you like to see on our site? How did you like that class? You could also recommend other activities if you want to help them try to navigate, your site and see some content that they they might have skimmed over. You can also suggest that they follow you, subscribe to your newsletter, keep in touch so that they they don't miss whatever service you're providing and then also just have some fun with it. You might tell them a joke, surprise them, give them something entertaining after they've finished a particular chunk of your website. So, go through and list all your user stories. Identify your main users, the most important ones and also the most frequent ones. List the main goals for each one. What they're trying to achieve and then also what you need them to achieve and then lists each step to reach that goal and how you're going to support it. Again, you can use stickies, paper, or computer. Then after you've got all those stories written, go back and aggregate all the needs for each page. So for example, this novice photographer might need one thing from the homepage, but a professional photographer might expect a very different first impression. So, you're going to have to, each page is going to have a set of requirements for many different users and then you're going to have to sort them in order of priority. Obviously, you can't make everyone happy but your layout is going to try to.
7. Wireframes/Paper Prototypes: Now, we're ready to move onto wireframes and paper prototypes. You want to start with sketching. It's good to stay loose and staff the computer when you're trying to come up with your original ideas. I love this quote from Jason Santa Maria that, sketchbooks or not about being a good artists, there about being a good thinker. So, don't worry about your drawing skills. Try not to be self-conscious about what you're putting on the page, you're just trying to capture all your ideas in a way that you can sort through them. So, you can do this through a lot of crazy iPad apps now or just your sketchbook whatever makes you most comfortable that you can render your ideas at a level of clarity that's appropriate. So, for my yoga site, I usually do Sharpie for bold outlines and then a lighter pan to fill in some details obviously the text is going to look really different when we get into design. It's not really about that, it's about are we having the class time or just the day on the page? Are we having a pattern or six patterns? You're just trying to figure out what's going to be on the page and what people are going to see first, second, third etcetera. So, here's my user flow going out as sketches and again, I've started to try and indicate what the supporting content for each page. So, I'm thinking about what's the first impression for that person, what's the supporting content and then what's the call to action for each step of the process. Again, paper in my experience is the best way to capture creative ideas. You're not limited to the software, you're not fussing with your keyboard shortcuts and it's limited in certain aspects. Of course, you can only do a certain number of paper drawings in a certain amount of time. Because you can't copy and paste, you can't duplicate them unless you're getting really crazy with the copy machine and with your scissors and tape. So, when we move into wireframes, this word means a lot of different things to different people. Engineers might expect all the technical requirements, they would want to know when is this screen saving to the database? When our error message is getting triggered? What does a logged out version looks? Whereas, your manager might expect the outlines at every single element on the page in the same position as they'll appear as the final design. Designers might expect that they would these wireframes would describe the priorities for the page, but they might not expect to take the layout so seriously. So, you want to confirm what your team is expecting before you start wireframes. For this project, we're going to focus on wireframes that sketch the main content and functionality so that we can test our most important user stories. Here's an example of what I did for CreativeMornings. Where this was helping the development team see that we wanted to be able to sort by continent, to sort by alphabet, to sort by rainbow. We wanted to have a start a chapter or link, we wanted to have a hover state on a map, we needed to have a map. So, they can start to make all their technical plans and let us know how long our ideas are going to take to build. But this is obviously still a rough enough format that me as a designer, I can't start choosing colors, I can't start fussing with the layouts. This is never going to look beautiful. If your wireframe start to look beautiful you're spending too long in them. They're really just about capturing ideas and functionality. Here's another one I did for this book app I mentioned, Riffle. Originally, I had a concept called Book Drop where was all about a drag-and-drop interface. I really wanted a feature where if you didn't like the book you could drag it into a pit of fire and watch it burn can't it go over so well. But it was fun to put those ideas onto paper and have people be able to understand what we were talking about. Again, we talked about what happens when you recommend the book to a friend it generates a message, what type of message? What does that message say? There's a lot of sub-steps in any startup site especially, a lot of sub pieces that need to be addressed. When you make these clickable, you also are able to then test the interactivity of them. So, ideally before you link them all up, you want to make sure that you've started to sort this hierarchy of needs for each page. But the needs that you determine through your user stories. Hopefully, you've included all of the functionality that's required and the main content and you've started to see where you have layout issues. If you're thinking you're going to line up all these photos as a panorama but then it turns out none of your photos are formatted that way, you're starting to see some of that stuff and start to maybe make other plans as you visualize the site. We also need to consider context in the responsive design era. So, Google made a huge research study called The Multi-Screen World and talks about how the context determines which device a person is going to pick up. So, we used to stereotype that mobile users were out and about. They were out on the street or standing in line but we now know that people often pick up their phone when they're sitting on the couch. You don't want to go across to the other side of the room to get on your laptop or you don't want to get back on your computer and start doing work. So, you might pick up a phone because of the amount of time you have, because you have a certain goal you're trying to accomplish, because of the particular location where you don't have access to one device or the other or also just your state of mind. Because people see their phones obviously as more of a personal device, it's usually just a one-to-one relationship of some with their phone. A computer might be shared among multiple people or it might be something that they only have at work. A tablet sometimes fills this in-between role where it can be more of like a media center, maybe it's just where they watch movies or just where they listen to music or just where they play games. So, think about the particular contexts for each of these devices as we start to plan how our layouts are going to reflow for them. Again, phones can start a process but it might not be where you finish it. So, the study says that 65 percent of searching tasks are started on the smartphone but then you might go to your computer to continue the process. So, if you're planning a trip, if you're trying to shop online, you might just try to see maybe if something's in stock on your phone. But then you might go to a larger screen once you want to compare options, or trying to make plans, or start to compile a research document, so think about that too. Often the phone or the mobile devices about gathering the info and the desktop layouts are about organizing or sharing them though. There's not just three anymore we used to always break things up into mobile, tablet and desktop but we have to realize that there's many hardware makers now. So, think of it as mobile-ish, tablet-ish. These medium sized devices or tablet-ish devices but we can't design for particular pixel widths anymore. So now, you want to write contextual stories list each of your main contexts so you could start off by just saying mobile tablet and desktop and you want to list the likely goals on each. So, somebody on their mobile phone might just be looking for your address, somebody on the desktop might be trying to sign up, enter all their credit card information. Whatever it is list any particular goals for each context and again, lists all the steps to reach each goal. Then go back to your page requirements and add these additional needs for each context. But also remember you could reduce your needs. Sometimes people on a mobile phone don't need everything that you're offering on the website. So, you might also be able to simplify your website for different devices. Then we'll be ready to start the wireframing process. Again, wireframes are about focusing on the content and just getting things on the page, they're not locked down layouts. They help you start to figure out some layout issues but you're going to revise all these layouts during the visual design phase. So, just focus on getting things on the page. So, Smashing magazine talks about logical breakpoints versus these device specific breakpoints. So, you might say, all right, on a narrow screen if I only had a small amount of space, I would need the navigation and I would need the main text of the page. But if I had a little bit more space, I would put some ads in there because that's going to help my business survive. If I add even more space, then I will go ahead and show the user comments so they start to get a sense of the community and action going on this site. So, think about the content outward breakpoints versus just devise inward. I think of it also as the Goldilocks approach. Since I'm usually going all the way from planning to design into development, there's only so much you have time to do. Goldilocks was again breaking things down into ish layout. So, it's small, medium and large. They call it baby, mama and papa bear versus my iPhone. Three layout, my iPhone 5 layout, the Android layout. There's not usually time to do a layout for each device. So, think of it as three general contexts. So, it's helpful to start out. I go to Balsamiq at this point. So, I can copy and paste and again, duplicate and you can link things up and make them interactive layer. I'd like to start by maybe wireframing all the pages next to each other. So, I can just copy and paste really easily and start to see how each layout reacts. Balsamiq is a really helpful tool because it has Symbol Library. So, you can just drag and drop menus, you can drag and drop link bars. You're not having to recreate all these things by the pixel in Illustrator. It has built in selected or disabled states. Again,it let's you link up your pages so you can make them interact and interactive PDF or a link to a prototype. So, this is really important because when you're doing responsive websites, you have at least three times the layout. So, you need to be as efficient as possible. So again, focus on the functionality and the basic hierarchy here. If it starts to look good, you're taking too long on these. Also make sure you look through Balsamiq Symbol Library and familiarize yourself with all its different elements. In matches actual HTML and patterns pretty well. So, it's much more realistic as a Web design tool than Photoshop. You can also look through their site mockups to go for a lot of other symbol libraries, for example, all those Facebook sharing panels iOS elements and you can also make your own symbols by importing images into the program or using other libraries. So, when you have this all sizes file, eventually you want to break it up into one layout profile so then we'll be able to test them. So, if you look at the bottom tabs on this screen, you can see that I've got my what six pages plus a menu all mocked up and then you can see Balsamiq showing me the links that I've made to all the different pages. So, there'll be clickable. The other helpful thing is that, excuse me, you can also increase your vocabulary of Web design by looking at sites like Pattern Tap, UXLab, library patterns and more. Check out my resources guide for some favorite sites because we're all working with the same alphabet of HTML elements. But there's a million ways to combine these pieces of texts, these buttons into all sorts of new user experience patterns. To make good wireframes that are actually useful for playing and testing, make sure that you're using real text and not Lorem Ipsum, so that you're designing actual content and your users get the point instead of it just being an anonymous arrangement of boxes. Make sure you label any images. So, if you drop a big gray rectangle on the screen nobody's going know what that means unless you label it landscape of Peru then they'll understand when you're doing the user testing. So, go through your wireframes and start with your mobile layouts and focus on hierarchy of needs for each page and in that context, for each of your users. Then I'd like to go to the biggest layout and do the desktop version. So, trying to take full advantage of the large screen and then, I'll go into the tablet layouts and see how where's the middle ground. Sometimes I'll go straight to the browser and do some code for this but it's also helpful to do them at your wireframe phase and see how your layouts hold up.
8. User Testing: Okay, you've drafted your wireframes. Now, you want to test them. Why? Because you'll save yourself some headaches in the design and development phases. In web design, we have to admit what's called the Malkovich Bias, which is the tendency to think that everyone uses the Internet in the same way that we do. But when you watch someone actually try to go through your beautiful layouts, it is an enlightening and very humbling experience. They cannot find the button that you thought was so obvious. They're totally missing some major section of content. It really forces you to look at your layouts in a new way. So, here's another example of this from usertesting.com. What's the experience like on your website or app? Oh, guys, you got no zoom again. That's terrible. How am I going to see all the stitching? Shame on you. Wow. So, tons of stores. I can't really tell which one is closest. I'd like to take a look at those specifically, just the one source. I'm clicking here to see but nothing's happening. So, let me to try to contact them. Right, well, I am not on Outlook so that's a problem for me because I can't use that. That's a little more than I'm looking to spend so I'm going to try narrow down by price here. Let's try 50 and below. Dish soap? So, we see that there's a lot of things we didn't really intend to happen that pop up and you can get this kind of feedback even on your wireframe. You can start to see the main hierarchy if they're getting it and how the navigation is working. So, go back to your sketches or Balsamiq and make links between all the pages. So, in Balsamiq, you'll just drop down, there's a dropdown menu to select links and then you'll export them as an interactive PDF or you can export all the pages as PNGs and link them up in InVision app. So, you'll end up with something like this where you have all your different pages and you're going to link them up together so to someone viewing all of them, it seems like they're clicking through a sketchy website. InVision is this tool where you can upload a whole folder of PNGs and then somebody can open up that link on their phone and when they tap the various buttons and links, it will take them to the various screens in your PDF. So, those are the two main tools that I use for clickable sketches. If you did all your wireframes on pencil and paper, you can also use InVision app. So, just take photos of all your paper sketches and then upload them to InVision and then you draw hotspots and you can link them up from there. Or you could sit side-by-side with someone and do some in-person testing of a paper prototype and you would just have them point to the button and then you would show them the next piece of paper. So, that's another really lo-fi, really quick way that you can get feedback day one on your ideas. So, when you're doing this actual test, there are some important guidelines to keep in mind so you're not biasing your results. Read Remote Research, the book, and also look at their site for a lot of tips about how you can do this. You can test people through your website, through labs, in person, all the different types of research you might do. The basic guidelines though are that you want to focus on individuals and not focus groups. Humans definitely have a herd behavior and if you get a crowd of people in a room, they are going to look at each other before they respond and you're not going to get honest opinions. Also, make sure that you're talking to qualified users and not everybody in the world is going to love your website or use it at all. So, you want to make sure that you're talking to the people that are really excited about your website and they're going to give you the best feedback. You also have to try to be as neutral as possible. So, you wouldn't want to say "Is this new homepage better than the last one?" Because that's leading the witness. You would want to say "Which of these two versions do you prefer?" You want to try and be as neutral as possible. Your tendency just as a human is going to want to be to nod and say "Yes, that's right," and give them some encouragement or some feedback but you want to stay very neutral and say interesting or ask them why. Why do you say that? Why do you think that should be here? Ask them the reason for the feedback that they're giving you and try to get to their motivations. Because again, these are ideas you're putting on paper. They're not polished layouts and you're just trying to get the feedback on these basic ideas. So, to prepare for this interview, take your most important user stories and you want to phrase them as scenarios so that the person that you're testing can visualize what you mean a little bit better. So, in your user story, you might have a user who's already bought a camera and now needs to contact support. So, for your user testing, you might have something like you found an error in your account and need to contact customer service. So, that lets them imagine a little bit more clearly the start of your story. Then you'll write this all out in a clear script to guide you as you do the user tests. So first, you'll give them some context, so how or why they got to your site. So, this is just like it would be in the real world. A friend might send them a link and they're checking it out because of their friend's recommendation, or they might have a particular need that's driving them to use your site. So, if you're an event calendar, they would say, "All right, I'm trying to make-", you'd help them imagine that they're trying to make a plan with two friends. So, that would give them the perspective that they need to judge your layouts in an appropriate mindset. Then you want to get first impressions. What's the first thing you see that grabs your attention and what do you think this website does? With your sketches, it'll be mostly about the headlines that you've chosen, maybe some labeled images if you have them, but it just lets you know if those things are working. You want to present these screens without hints or instructions, so ask them what do they see first, what would you do next and what would you expect to happen when you do that? So, for example, you see this post on Facebook. What would you remember about it? What would you do and what would you expect to happen? Then show them the next screen. Ask them to narrate their thoughts and questions and feelings throughout this experience. You can try and take notes while you're walking them through it or you can record the session with your phone or with some other type of recorder or you could ask a friend to come along and play scribe for you. After that, you're going to give and observe these tasks, these main scenarios that you want to make sure are really usable and really easy. So, one at a time, you'll have them go through it and you'll just say, "Imagine you're trying to contact support," and you'll just watch them click through your prototype and you'll observe. What's distracting them, where do you have something else that's intruding on their attention, what labels or layouts confuse them. For example, if your store is labeled Latest Collection or what do they expect from your navigation labels. Then you can also notice how quickly they accomplish the goals. So, does it take them 10 clicks just to add a product to their cart or is that something you could reduce to nine or eight? Each one of these flows, we want to try and make as simple as possible. Then you'll wrap up. Get some overall feedback. Is this site useful to you? What else would you like here? What would you normally use to do something like this? How does this site compare to that and then what's the most memorable thing about this site? That gives them the overall impression, and again, at this sketch stage, it'll be mostly about your ideas and about your content. You can stop your testing once you have consistent results from this phase. So, you should start to see patterns after about five or 10 tests, hopefully after five according to Jacob Nielsen and some other major usability researchers. So, once you have some clear insights, you can go ahead and iterate your prototypes. So, build something that's really fast. You can change the layout if nobody is understanding where to click. You can change the headline if everybody thinks it's dumb and you can go ahead and retest with your next people. So, go through and make your testing plan. Write out what are your goals, what you want to explore. In this one, it might be that you want to test your functionality and test your content. You want to write down your requirements of who's qualified. So, if it's a portfolio site, are you applying for a certain industry? Is it going to be a certain person with a certain level of design education that's going to be judging your work or is it going to be something where you want everyone to be able to use your site? Then you want to list out your tools which is how you're planning to reach them. So, are you going to do a clickable PDF? Are you going to use InVision and you need to export some PNGs? Are you going to call your users and walk them through it on the phone? Are you going to do a Google Hangout and screenshare and record it? Write out exactly your tool so you can put together a list and then write out your script. So, again, you set the context for the testing, you gather their first impressions, you assign them a variety of tasks, and then you wrap up and get their aggregate impression. Then you also want to plan what you're going to keep. So, are you going to take photos of each person you test so you can make a nice presentation later? Are you going to transcribe all of this? Are you going to write up a Google spreadsheet so you can try and do some data analysis on it later? So, make a plan for, once you've got five or 10 people that you've tested, what's going to be a useful format for you to return to this feedback and also to share it with others. The best thing is if everyone on your team can be watching these user testing sessions in person, but that's not always realistic. So, we do need to think about what kind of documentation is going to be useful to have later on. So, keep going through this. Test and iterate. You can test with other people here on Skillshare, you can find people that represent your site visitors in the real world and keep iterating until you feel like you've got these functional wireframes that will serve your designers and your developers in the next phases. You have all the documents you need now to design and develop a solid web experience. Your scope is defined, your brand guidelines are set, and your main actions are clear and considered. So, if you want to continue on, our next step will be Gorgeous Web Design and you can follow along and design your own website.
Erica Heinz, Designer/Developer
