Interaction Design IxD tutorial Web Design Patterns | Laurence Svekis | Skillshare

Interaction Design IxD tutorial Web Design Patterns

Laurence Svekis, Web technology Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
16 Lessons (1h 19m)
    • 1. Promo Video

      1:41
    • 2. 1 Interaction Design Introduction

      2:57
    • 3. 2 Interaction Design Start thinking User interactions

      4:25
    • 4. 3 HTML CSS JavaScript Bootstrap Course info

      3:28
    • 5. 5 Introduction to Interaction Design start thinking Dynamics

      7:17
    • 6. 7 Interaction Design know your Audience

      6:25
    • 7. 9 Interaction Design Strategy Color and Typography

      7:47
    • 8. 10 Interaction Design Patterns

      8:56
    • 9. 11 Interaction Design Thinking Mobile first Grids

      4:43
    • 10. 13 Interaction Design Usability first

      4:15
    • 11. 14 Interaction Design Help user achieve their goals don't leave them hanging

      6:27
    • 12. 16 Interaction Design Consistency

      8:48
    • 13. 18 Interaction Design Easy to understand

      2:24
    • 14. 19 Interaction Design Invisible Guide

      2:36
    • 15. 20 Interaction Design be familiar

      4:42
    • 16. 21 Interaction Design achieve its purpose

      2:34

About This Class

Interaction Design IxD tutorial Web Design Patterns

Learn how to better design web content for interactive websites, anticipate user requirements and meet their needs

BETTER WEB DESIGN

The internet is no longer static, the use of JavaScript has made websites dynamic. They are communicating back to the user and users now expect the interaction. No longer is it a one way conversation, and when it comes to website design you should be building for this interaction.

The future of the web is ever more interactive, also there is huge change in the devices and technology that is being used to access the internet.

User Computer communication is IMPORTANT to think about when you are creating web designs. Think about how to best deliver results to help your users achieve their goals.

We have designed this course to help you think different about web design, avoid the pitfalls of unhappy users and give users what they expect.

quick lessons get right to the point
source files downloadable to work along
challenges and lessons
30 day money back guarantee
new course material added regularly
trusted name in education since 2002
full HD easy to read source coding
Learn how create smarter web design and fundamental concepts to think about even in the planning stages.

Transcripts

1. Promo Video: websites are not static anymore that dynamic and users are expecting more. You have to be able to anticipate what a user may want to do on your website and design principles of interactive design help you design better for the new. Within this course, we're gonna be talking about the main core concepts. Help You better understand how does design or effectively and efficiently within the new users are coming to your website expecting interaction with your website functionality has become more important than aesthetics. You want your users to achieve their goals as well as yours. We're gonna talk about concepts, how to make your website using dogs. Guide your user. Better not leave them hanging at a point. And we're also gonna talk about design and how that is. And finally, the purpose goal with website the utility of your website is really important for the user . This course is designed to get you thinking about the future of Web. Web design within this course, were also could be discussing some of the talk resources that you need and how to access those resources. Everything is included within this course to get you going with. We've been designing high quality courses. It's 2000. Are you ready to learn interactive design? Let's 2. 1 Interaction Design Introduction: interaction design within this course, we've designed it to cover off all the fundamental principles of interaction, design and how you can make better website design taking into consideration concepts that we're gonna be covering off within this course interaction design is basically designing for that human computer interaction on your website and anticipating any changes or any dynamic abilities that your website might have and how that's going to impact the design and the users behavior. My name is Lawrence, and I've been a Web developer for over 14 years, and I'm gonna be covering off all these important principles of interactive design. Within this course, we're going to be covering off basic coding ideas and principles, as well as talking about interactive designs and interactive patterns covering off patterns that available in the Yahoo designed pattern library and how these patterns can help you make your website more familiar or trustworthy and easier to navigate through for users that air coming in and interacting with your Web content. And then finally, we're going to cover off what principles your website should be covering. So here we've got the Four corner storm principles of good Web design, where we've got a website that achieves its schools. But we've also got a website that's familiar and easy to understand. We've also got a website where we've got good navigation and we don't have these confused users that are coming in and users understand the purpose and are able to achieve their goals on your website. And then also we're gonna be looking at basic design concepts where the concept itself is going to be easy to understand and the purpose off objects on your website are gonna be intuitive for the user coming in. So they're going to be able to use your website more effectively. Notes are also going to be included in PDF format after each lecture series as well as we're gonna be providing a lot of downloadable and Web accessible resources. They're gonna help improve your process of creating interaction Web design with dynamic websites and mobile websites and different screen sizes and ability for websites to be responsive. Web design has taken a new step and that's interactive web design 3. 2 Interaction Design Start thinking User interactions: to introduce interaction design. I wanted to talk about one of these designs. I was submitted to me a few years ago by a designer. And of course, this is not it. This is kind of like my quick markup of it where I've just placed some code. So I've placed this kinda DIV menu hovering over in an absolute position. So it's gonna be in a static position. And of course, the designer had made a really nice menu and there was some hovering over the map elements . So we're using Google map within the design. And so the map, the application was based within that using the Google map and having ability for the user to be able to interact with the map and scroll it back and forth. And then we had a menu and some additional logo's and items hovering over the map. So initially the design, it was really nice. And if you look at this, I'm was just wondering if any of you can spot any initial problems with this type of design going into more of a mobile thought process, where you thinking for designing for mobile? What could be the problem with this other than the fact that it's fairly ugly and these links don't work. But when we look at the actual design of it. So this was a really nice menu with a really nice logo when it had working links. What would be the problem with this where we want the user to be interacting with the map and that they can scroll back and forth. So the problem really becomes evident when you look on smaller screens because you're actually getting a reduced space to use for the user to interact with the menu as well as interact with the map. And the main issue really, is the fact that this menu is overlapping the map. And when a user is using this interface, this application on a mobile device, they're not gonna have this kind of click on and click up ability there. We're gonna have swiping ability, so they're gonna be swiping the map back and forth. And when they swipe over this menu, it's actually gonna lose that swiping capability. And they're not gonna be able to swipe over certain parts of the menu so functionally, even though this might have looked nice within the design. Functionally, this doesn't really function on mobile devices, and that's what we talk about when we talk about interaction design because although with the original design, it might look really nice when the user sees it and they come to interact with it, they might not be able to be able to use that functionally within the design. So this is when the user comes in and they want to actually interact with the Web application, and they're getting responses. This menu is going to be hovering over and conflicting with the user's interaction ability within the mop, and that's going to be causing a conflict. So when you are designing for Web sites for mobile sites, you have to always take into consideration that the mobile screen is going to be much smaller. And actually, this man, you should actually be sliding over when we re size it. But I did create like very quickly, so So that's why it's not really doing all the interaction that you typically would expect . The main consideration here is how this application is going to function on mobile when we have a smaller screen and we don't have this ability for all of this real estate that we have on a desktop device and also the different ways people interact on mobile, where they would be more swiping it and so they can't get that ability to swipe under the mop. And it's gonna make it a lot more difficult for that user to interact when they've got this menu hovering over. So also, they're gonna be pinching and moving it in and out so they don't have the same capabilities as they do on desktop. And that's got to be taken into consideration when you are designing for mobile and designing for a more functional design where the users actually interacting with the design itself. 4. 3 HTML CSS JavaScript Bootstrap Course info: I'm just going to include this quick lesson about the code that's behind here. So just in case you are curious about the code that we're setting up here and that we're gonna be using throughout this course So we've set up we've linked in bootstrap or bootstrap is a front end framework, html, CSS and JavaScript, and it gives you a whole bunch of built in functionality. So it saves you the time of having to go out and build up all of these functionalities. And it's really good for functional design because it's already been thought out and it is based within a grid like pattern in order to get bootstrap. It's, uh, it's free to download, and it's actually one of the more popular repositories on Get Hub as well. So I definitely one of the most popular html CSS and James JavaScript frameworks and allows you develop response of mobile first Web projects. And now mobile First is really one of those things that you have to always been considering when you are developing online. So usually I do like to use bootstrap because a lot of really cool elements in it, and it really does speed up the development process, and it's got a bunch of bunch of already, well thought out items within it. So if you go over to the JavaScript section, you can see that it's got all of these built in JavaScript. So it's gotta motile it's gonna drop down. It's got a tool tip pop over Collapse Carousel and a whole bunch of really cool things so definitely worth while using. And that's what we're gonna be using throughout this course as well. Eso just below here. I just did some styling. So again, this was just basic styling to illustrate the point of having that absolute position menu button. So even though that that would look, obviously it doesn't look good on desktop because I didn't really style it very well, but just to illustrate the point. So we just have an absolute position within CSS. So we've set that up there, and then here we've just got kind of a mock up drop down menu, and then we've got the I frame off the Google maps, a P I and then just below that, we've got calling in the J Query library, cause bootstrap does use Jake Ring So you have to always remember to include Jake Worry before you're setting up the Jake we're or the Bootstrap library. And then after that, we've just got the script code there. So we're also going to include this within the next just as a resource file. So if you do wanna take a look at this and play around with that, you're gonna have to actually entering your own key cause after this lesson's over, I'm gonna actually be disabling this key. So you have to go over to Google Teoh, get their map a p I and entering your own user key in order for that to work. But basically, you should just be looking at this and, um, just has a good basic HTML CSS framework. Actually, we should also be including the style sheet separately. So we shouldn't really be doing this where we're doing an on page styling as well. So I'm gonna update that, and I can include the code in the resource section of this course 5. 5 Introduction to Interaction Design start thinking Dynamics: So when we look at interaction design, we have to take into consideration that websites and Web applications are now dynamic, which means that you're expecting the user to come in and interact with various parts of your website, and that interaction has to be taken a consideration within the design process. And that's where we get the term interaction design. So Wikipedia, of course. They have a really good example here, and some good definitions of what interaction design is. So essentially, it's that human computer interaction when you're looking at the software and developed development, so abbreviated I X d and again the practice of designing interactive digital products, environment systems and services. So they go through a brief history here. They've got some methodologies. And then down here we look at five dimensions of interaction design. So the 1st 1 is words. And then again, of course, how words and users interact with those words that basically means that you've got some words there. You've got something like my menu and how the user's gonna interact with that and interpret that so something like this, where they've got about contact that would be taken to what they're doing and what they should do. What this part so usually a menu is more intuitive than this. Eso We don't really have to write my menu there that the menu should be designed in a way that the user understands that it's a menu and so that we could not have to write out my menu. Eso also, we've got visual representations, And so if we've got any graphics or diagrams on also the type pack typography. So the different fonts that we're using and you can see that within the Google map there. So they've got these green different typography is there compared to the city names. So when they've got these green areas, they do have different types, typeset and as well over here. Visually, we can see that these are all the highways. So they're all indicated here when we look at this map and we can start to begin to understand that this is the name of the highway because it's visually on top of the road, and these are the names of the cities here and so on. So there's also physical objects or space and again, how the user's gonna interact with those physical objects and when we look at time, so this would be something that's more of an animated option. So if you do have something that's animated, so maybe we can find something here within. So we've got our carousel here and again. This is a visual off. What? It's generally understood that if you have these Chevron's thes carousel indicators here that this means that it will move on to the next slide when you click it and as well, we've got these three buttons here. So this gives you an indication of how Maney slides are here within this carousel. So just by looking at this, you can understand some of the options here that are available within this carousel and this again when we come with interaction design, it's implied that the user will understand how this works, and we do have this cycling through off all the different items let nested within the carousel, so this is more of a time based animation type action as well. So this is something also to consider that the user generally you have only a few seconds to really make that impression on a user that's coming into a website eso We see here that we've got a specific timeframe set out here that we're gonna be sliding over these different slides and advancing the slides. Eso This is something to take into consideration that how you want the user to interact with the timing of this. You don't want to make it too quick because you don't want the user come in and say, Wow, this is just cycling through too quick and I can't tell what's happening within this, and this just doesn't make any sense to me. You want the user come in and have a pleasant experience to really be able to take the time and look at the imagery that you have within the slide. And if they decide to, they can. Just by looking at this, you can see that there's additional images here. There's additional images this way, and we also have the three images. And then lastly, we've got the behavior and how they're going to interact with your interface. So this is similar to what we're looking at in the earlier example where we're guts, we've got this user behavior that's built into the map and the users expected to be able to perform that task that in order to slide through to resize the map, and when you are designing for different screen sizes, you have to take all of this into consideration. And this is one of the illustrations of how we can look at behaviour within with an interaction design. So again, we want to make sure that we're not having these design elements that are actually even if they do look really nice initially that they're not going to interfere with the interaction of the application. And we're always going to be looking at because of the dynamic, the dynamics of Web design now that users are interacting and we've got to consider this human computer interaction, so that's a very important term. And that really does sum up with what interaction design is because you are expected to be able to interact with the Web content and you don't want it interfering with you want to be able to design it in an intuitive way so they use understands how to use it and how to interact with it. So it's not your traditional graphic design where you do create these mock ups and the page is going to be static. So always think that that users coming in interacting with this digital environment and you're going to get input and feedback back from the the website. So there's computer feedback and it is communication between the user of the website and the Web application itself. So the server and the human are communicating together. Very important on this is something really to kind of think about when you are designing websites, especially dynamic websites. 6. 7 Interaction Design know your Audience: interaction. Design starts with the planning fees, so you have to determine what the requirements are and understand the users. So, first of all, we need to find the users goals. So that means getting to know that audience understanding what their needs are and how you can help them achieve these goals. So get educated a boat who your audience is and what they're going to be expecting and how they typically, what type of sites they typically are visiting and what they're expecting from your website when they visited. Because you have to understand that audiences are going to be different. So depending on what type of product you have and what your website is about, you can expect toe have different audiences with different expectations. So understand and know your audiences the better. You know, your audience, the better. You can design your website for them and then afterwards, once you understand your audience, you can begin to break apart your website and determine what sections air gonna be vital and crucial for your website design. So what information and what functions you're gonna need to be providing for users to be able to properly go through your website. So this is a listing of information, functions and salon and then you have to determine navigation. So how are the user's gonna navigate through your website? What are they gonna use? Where the links and what are the relationships and how are the? And how are you gonna guide that user to be able to best experience your website and achieve their goals when they arrive at your website in The key point here is to understand your audience. Now we're gonna list out some tools in order for you to help you with in the planning stage . So one of the tools actually that I've been using here is mind meister. So this gives you the ability to map out what's gonna happen within your website and break down the difference, features and functions and navigation of your Web application. So I had just simply created five different slides and I've done this kind of slide show here just to illustrate how it can be used in order to help navigate through your website. And I believe they do give you as a free user you can have up to 33 different projects available in there, but again, you'd have to check with the website. So we're gonna include the link within the resource files. Eso again? That's mind meister. And the good thing about it is that you can actually share your your map and share your functionality. So this air gives gives other users and developers and designers as well as your stakeholders a better idea of how your website is gonna function. And as we were just showing their in the slide so you can kind of click through and you can walk through, like in a presentation stage, how to how your user might be going through the website and what they're going to see. It's a really great cool application as well as for wire framing eso. We've got balsamic eso this again. You can download it and you can do a free trial on it. So it's a really nice application toe have to design walk ups a swell. We've got a few wire framing applications, so there's wire frame cc, so this gives you the ability to really quickly create a wire frame. And again, I'd be mindful of when you are creating a wire frame when you are sharing your ideas so you can create Theisen pdf sor j pegs and then shared across. And I've got some other tools here as well. So we've got Framed Box, which is another online wire framing tools. So this one's really good for creating forms. A swell. We've got the image options, and again, you can very quickly wire frame up on idea eso if you're not used. The benefit of actually using online tools and tools is the share ability of it s So if you're actually writing it out on paper, it might be a little bit more difficult to share. Digitally and again, if you're creating these types of navigations, is another one here where you can drag and drop. So this is glitzy dot com, and they're just showing example here where you can just simply drag and drop. And this is a really good, useful tool for the navigation part eso. It allows you to really connect those ideas and illustrate how users should be navigating through your website on what they can expect. So if you do have a dynamic object here and there's several different possibilities, you can illustrate it. You can also even maybe make them circles or whatever works best to generate server interactions. You've got stuff there, and this is actually one of my favorite to us to be using. So again, we're gonna list out all of these tools within the resource section off this, uh, this course and again going back to that planning stage. So it's really important that you do understand your audience and how they're gonna be expecting to interact with your website on and the planning stages the first step within the design stage. You've got to get that information that crucial information in order to design, designed the website effectively, and that goes to if you're how you're trying to understand your audience and how you're working with your audience. 7. 9 Interaction Design Strategy Color and Typography: So when it comes to your design strategy, So this is the part we're actually going ahead and designing your Web site. There's a few things to take into consideration, so there's a whole bunch of tools, actually, at Interaction Design Association, so their website is i X d a. So they're definitely worth checking out for more ideas and techniques and strategy. Eso we're just going to run through some of the more typical types of applications and ideas that you should be looking at. So the 1st 1 when we're doing our design so typical for any design, you have to look at colors so color palettes and to make sure that your palates have the ability to really kind of flow through. So ideally, you're gonna have really good contrast. And the colors are gonna work well with the mood and the feeling and as well as overall design of the Web page. So here we're just on pal iton dot com, where you can really easily kind of go through in click out various colors. And when I went in doubt, there's always blue. So blue is probably one of the safest color palettes to use eso you have these Deep Blue's later blues and so when in doubt usually go with blue. But again, it's really kind of neat that you do have this ability with all these different shades and of course areas that you want a contrast more. You make them darker with lighter text and vice versus you could do it later with darker text and really highlight out those key points to your website. Another thing to take into consideration is your typography. So here we've got another website where we've got our type scale eso again when you are designing websites on something to keep in mind that 16 picks equals one e m. S O. Here if we were to change it to 24 but we got our calculation for the PM's and we can kind of see how these different types are gonna come out. We can also scale them as well. We've got a preview type. So here we've got a preview text eso in case there's any kind of fonts that were unsure about and we want to really make sure that we are getting that uniformity across entire website and that nice flow eso here. We've got an option for Google thoughts and fought family and as well as Wait. So what Google thoughts are if you're not familiar with Google fonts, So they have Google has gathered together. I think it's 774 families now. And these spots so you can look through here and you can select out if you're looking for a particular font or they've got this really neat thing where they've got these filters. So if you're looking for more of a handwriting type front, they've got all of these options and in order to set it up on your site, so I'm just gonna go here. So we've got an option for quick use pop out and add to collection. And if you want to do something, where you gonna use quick use? So all you have to do you can bring it into your source code like this, or bring it into your CSS like this on. And then they also have the JavaScript option. So just show you quickly how we can actually bring it into our CSS. So we've linked our CSS style sheet here to style, and this is that previous code that we're working with. So we're actually gonna change, Change the type font, Go back out to our websites. We're gonna change the sponte to be this Gloria Hallelujah fought that were found on Google . So going back out to Google thoughts and in order to use it, they just got a really easy way here. You can just copy and paste, so I'm importing it into the CSS. If I was using it on this page itself, I could just linked to it as well, so different ways to bring it in. But usually I prefer within a style sheet that I just bring it in this way. And here I just do copy and paste. It's really easy to to get this on your website and school back you to the site. And when I refresh it, I should have that new font there. And as you can see, it's really neat, really nice how it it shows up there right away. So that's the font. And then if you wanna actually scale it through, I think that we just to find the font. And so I had to do a little bit of manipulating there. But here, we can see the preview. So if I was creating it for my menu items something like this, we can really see that how the sponte is taking shape and then we've also got those different size suggestions. So we've got eso. Typically, if we're working with 15 p m. So it's gonna go a little bit bigger, a little bit smaller. You see, the 1 a.m. And this gives you a really good idea how this is gonna show up on your website . The good thing about type scale, a swell. You can grab the CSS. So if I wanted to bring this into my website and use it within my body Eso we've got our sizing here as well. The H one h two h three h four. So these are really important to be setting within your style sheets, Andi, some just some margin bought in there as well. And another thing here you can edit out on code pence. I believe if we open that up, it should pull in that CSS there and this again you can see another really good sample of the way that it's gonna look on, and it gives you like a whole bunch of all the characters there as well. Eso again on code pen. You could even post paste in your own HTML to really get that feel of it before you're actually putting it on your site. Um, and what it's gonna look like and again, you could just go over to Google fonts. If you want to make any changes on the front, you can again pick through all the different categories and you could search through it. You can also categorize it by different widths, slants, thickness, a whole bunch of great great options here, um, and Euros able to preview it. So the Grumpy Wizard and I believe that this has all the different characters, all the different letters. You can also sort by popularity date added number of styles trending so you can see what's trending now as well. It's a really good options here and let's say set up color and typography. We're gonna include this within the resource document as well. And yes, there's quite a bit of stuff here toe work with. And as you can see here in code pen, they've actually just brought in the stash. It with a link within the HTML, so that gives us the ability or the the Web page stability. To use that style sheet eso whatever way you prefer to bring that style sheet in, you can bring it in, so I usually just important the CSS, but you can also do it within that HTML. 8. 10 Interaction Design Patterns: So when it comes to design strategy, there's quite a bit more than just working with the colors and just getting that typography rate. Eso we're looking at within that last lesson. How to do the typography and how to get those colors and use Google fonts and a whole bunch of really great resources. So the other thing that you have to consider when you are making, especially for interactive designs, you wanna have that familiar and understandable type patterns. When a user goes there, they know what to expect. And knowing what to expect is a really good builder of trust. So the user, when they come in, they can say, Okay, well, these air buttons and typically a red button you might want to avoid a green button you might want to go so green is go, Red means stop. And then these other colors air just in between. So again default. You know, maybe you're not highlighting that as much, cause it's in line with the background color on then the primary buttons. You really want to highlight that? I didn't bring that out. Eso again think about the color scheme and also just familiarity so somebody, even if they've never been to your website before. Uh, and if you've got this kind of button layout and working with the color scheme, you can understand that thes buttons are just implied with the colors on, then whatever text is on top of their that should work within that behavior, so the behavior should be predictive. And again, if you want to highlight it, make it bigger and salon eso The other thing, too, is building up that trust and that understanding about what each one of these elements is going to do on your site. So if you see something like this, you know that if it's ah, lighter colored button, it might be just disabled and so one so that the user has to take some kind of action to enable that button. Maybe it's a form that they have to finish filling out, and it's gonna be disabled until that point where they're ready to actually go through and finish filling it out. And the other thing to keep in mind as well is keeping it simple, so you don't want to overcomplicate the actions. Just try to simplify as much as possible within the design of the site. So especially when it comes to forms, a lot of times forms can be overdone and there's just too much information. So here's an example off where we've got a check blocks for. Remember me? So sometimes you might have a form with the email password, Remember? Yes, No, Maybe use radio buttons and you want to really try to avoid that complexity and try to keep it simple. So remember me If the user chooses to be remembered taken, just check it. And if they don't want to be remembered, they don't have to worry about that. Eso usually try to keep the actions mawr of proactive, like a pro type of action that whenever they do something, that this is the added additional option and feature supposed to even when you come in and you've got this already pre checked remember me? Eso they might not necessarily want this option. They might not want to be remembered s so keep that in mind. When you are creating forms and a swell, you don't you want toe? Avoid that user frustration that they might not necessarily want to be remembering. And you do want to keep things familiar. So email password thes types of forms. And keep that in line. This well with order of importance. So usually people are expecting. Put a name and email eso those air. Fine. But if you're adding a whole bunch of questions there, then again you have to keep it in mind. What's simple. And it always comes back to understanding your audience, understanding what they're expecting and how they're expecting toe work through the website and be able to use that website effectively to accomplish their goals. Because whenever anyone is coming to a website, they're trying to accomplish something. There is a reason that they're on the site. There's a reason that their browsing through the site and the better you are at guiding them through the website. The more successful you will be, the more that the happier the user will be and as well for yourself, you're gonna be able achieve your goals on creating the website a lot more effectively. So keep those goals in mind. I know what that audience is expecting and understand your audience, know what their goals are and how they were actually expecting toe work through the site, one of things that were going to be getting later into later on within this course are designed patterns and design patterns really play into that familiarity of what the user needs to do. So if they do encounter an accordion, chances are they've encountered an accordion before on a website, and there is this kind of expectation of how the Korean should work. So going back to bootstrap believe that we should be able to find an example of an accordion. And if you notice up here, boots struck, four is coming out. So that's really exciting. Eso accordion is collapsible Korean example s Oh, here we go. For an example of an accordion type site, eso again. They should be able to know what they're expecting. So when they see this kind of layout, this accordion pattern, they should be able to understand that that's what's gonna happen. That those menus will open up and provide Maura additional information. So typically, this type of thing is used when you've got a whole bunch of text here and you don't necessarily want to show it all at once. Eso just going to give you a quick illustration within the blood page there about how this is gonna work So I can just go to copy clipboard, open up this. And so I'm going to get rid of that Google map because we definitely don't need that anymore. And I'm also going to get rid of this menu because again, we don't need that anymore and go back out to the page. And when we refresh it, we see that now we do have this accordion set up on our website and we can click through and we could see all those different hidden text. And I believe when we go over and we just remove a bootstrap for a second and tobacco to the page, we can actually see the site the way that's gonna look without that accordion option. So again, great design option, because it really is going to save save time, safe space on your websites and zoom it back to 100% but still a street a little bit better . So if they're coming into a website and they see something like this, generally they're not going to know that or they're not gonna anticipate anything hidden there because we don't have any indication of that. And then if they do come into a website and they do see these types of menus on they are they know that these air clickable links because when you hover over them, they do get that underline, and they're able to open and close them. And then when we go to the Yahoo designed pattern library, they're going to explain a little bit about what problem gets solved and when to use it. So for this collapsible again, if there's too much text, their thin this is going to save time saved safe space for limited space when you don't wanna have too many items being displayed. And when the title is sufficient enough for the user to be able to say Okay, while I'm interested in reading this one s so I'm gonna go ahead and click through that So I'm gonna refresh that again and again. Make sure that these titles makes sense for the content that's available within their. And again, This is one of the reasons why I like bootstrap because it already has a lot of these patterns built in and ready to use and easy to use and set up on your site. 9. 11 Interaction Design Thinking Mobile first Grids: in the previous election, we were looking at what Bootstrap has in mind. So going back to our initial design. So when you are working with interactive design, so it's a good idea to kind of look at things just like with any other design for more for mobile, you wanna have that ability to have everything within a grid, right? Fashion. So when we go back to bootstrap and CSS and when I say grid system eso grid system is fluid for mobile, its scales appropriately. So when you have, when you have, when they are using bootstrap, it uses this kind of 12 column system where when you've got essentially got these 12 columns across and they're gonna change depending on the size of your device. So if you're looking at it on smaller devices, you're going to see if you're using this prefects and tablets, you're going to use this prefects, medium devices and large devices. So if you want tohave just a quick tip about bootstrap. So if you want to have 12 columns across, and if you want to keep those 12 columns, even on those small screens, those mobile devices which generally you probably don't want to do it. More applies to Maybe if you've got two columns and you want to definitely keep those two columns on the small size, then what you would be using is this call dash excess, and that would keep the was two columns, no matter how what the screen sizes. And then, if you use call dash sm. If the screen size shrinks down to a tablet size, it's gonna resize. But if it goes to a smaller device, it's going to stack these columns. And just to illustrate that when we do resize this, we're going to see that thes columns are actually going to stock. And as we shrink down, we see that what's happened here because they were medium sized M. D S O. Once the page got smaller than 9 70 it ended up stacking all of those columns, which were actually separate columns before. Let's just a quick tip about how to use bootstrap and columns, But the main point here is to keep in mind that when you are designing, designing from mobile to make sure that you do look at it kind of like in this grid fashion and you don't have overlapping items. I because those overlapping items are gonna cause problems when you do resize. So think mobile first and think about how your page is gonna look like when you're your screen sizes bigger. And then again going back to those interactions to make sure that those interactions are always available. Eso When you are shrinking down these stocks, these columns that if you do notice that you do have this kind of shrinking of the columns , so it has to still make sense, even on the smaller screens as it does on the larger screens. So you had a whole bunch of text here, and maybe you wrote something like, Click the button on the right hand side and you've got your button here on the right hand side. But when it re stacks, the button is no longer on the right hand side, so it could lead to confusion for the user thinking that well, I'm looking for this button on the right hand side, and I don't see a button on the right hand side, so you have to be able to anticipate how that if you are using boots, drop or other frameworks how that's gonna look when it re sizes and take that into consideration, especially when you're giving directions for specific actions and then helping toe locate where these actions are gonna be. And also, when you are designing, keep in mind that grid again because, as in our previous example, where we had that menu overlapping within a grid structure, you're not gonna have any of these columns overlapping or rows overlapping. They would be called cells within the grid, so you don't want them overlapping. The idea is that they should be able to move fluidly, and when they don't overlap, that gives you more flexibility, so always work that into your design structure. 10. 13 Interaction Design Usability first: So when it comes to design, even though that this is just Onley part of our website design, what do you think is wrong with this design? So do you think it's the font? Where do you think it's the way it's presented? Or maybe it's just when we resize it to mold bile. Maybe it just doesn't look right. S So what do you think? The problem here is with this This design and if you look really closely issue is the letter spacing eso Sometimes when? Every year using CSS you have this ability to do letter spacing. So I've actually condensed the letter spacing in an effort. Teoh, get more content on the page and be able Teoh present more information because here I was limp, limited to the amount of space that I had. So maybe I thought it was a good idea to really condense that spacing. And when we look at this, this doesn't work overall either, even though it might work just for headers. So if you've got a header and if you want, apply it only to the headers. Uh, so we can just do that here if I want to apply it to the panel, so this might work a little bit better. And you do see this quite often that it's used within headings in order to have a different type of effect. Eso here we've just the rest of the text has been spaced out, and these headings have been condensed the spacing and sometimes we do those text transform , and we're just gonna do it all uppercase. So see this sometimes for headings that they're all supposed to be upper case. And when you're considering doing this, you have to really look at what type of fought you're using and as well as if this is gonna be actually be readable within a regular within mobile as well as desktop. So something that might be easily readable here when we shrink it down, it might not be as readable. So always keep that in mind when we do shrink down the text that maybe these things don't stand out. And you can see here that these words actually don't stand out as well because of that, because of the spacing between the letters. So it's something to keep in mind and what you want to be doing when you are creating do something that the user can understand. Eso this The's headings, especially the heading, should always be readable. They should always be something that if a user is quickly going down and they're able to read through this when they're scanning through the site, and especially when you have something like this, this collapsible menu that you do want the users to have the ability to be able to just scan over the site quickly and see what's gonna be available within this collapse of the menu. So make sure that the usability of your design comes first. Eso, even though this might fit in with the type of design you wanna have, or maybe you constrained on space and you decide you wanna shrink the letter spacing. Sometimes it might not be a good idea, and again, you might want to consider changing around the font a little bit. Eso that that font is readable, so you always want the thought to be readable. You always want headers to stand out and make sure that users can easily understand and see what you're trying to do and how you anticipate them being able to work through and use it , and you're always thinking about how you can minimize the frustration. So if a user is coming in and they're not able to read these very well, that's gonna create frustration. So think, think ahead and think about ways that you're gonna minimize that frustration for the user and again usability first and then worry about how it's gonna look. 11. 14 Interaction Design Help user achieve their goals don't leave them hanging: Okay, I know I've said this before, but you really have to understand your users so your users might not be the same as users on another website. They might be totally different with totally different expectations. And I'm probably going to say this over and over again that you really have to understand your users and what you can expect from them. And also understanding your users will help you make better design design decisions within the future. So what I mean is, when you understand your users, they don't generally all have the same experiences. And if you've ever done that game where you've got a word and you've got a group of people that have too tight rate out how what that word means to them, you're gonna find that typically words mean different things to different people. So it's not gonna be a simple and straightforward as even putting up a Nikon a cliff and having every user be able to interpret it the same way. So you might have something like this moveable life con. So some people might be familiar with it. Some people might not, uh, this tenting one. So this might look like water drop to somebody and they might not understand. Well, what does this mean? Does this really mean to tent on their website and so on? So even going past things like lifts, you have to really consider what the user is and where they're coming from. So if they're an experienced Web user, they might understand things a little bit better where they might say that. Okay, well, this this here means that we're going full screen, and this button here means to move it around. And this is a Cliff Khan for an image, whereas somebody else that might not be your typical Web user might not understand the meaning of these cliff cons. So don't don't assume that your users are going to understand what you're doing and that, um, and then this guy always goes back to that point of knowing your user, and that helps you make those decisions about how those users are going to be interacting with your website. So you typically don't want toe, have them confused at any point. And you also want to eliminate any barriers that they might have to achieving their goal because you do have a funnel. You are trying to get them and guide them through the process, and especially when it comes to dynamic websites, users don't always know what to expect. Eso. You can also rely on these design patterns as well that these air typical actions that a user can expect he's knowing your user is going to really help you along this design process. Things should be as a user expects. So going back again to this thes design patterns, we can see that when we do look at these design patterns something like bread crumbs, that just makes sense because you really don't want someone to navigate through your site. They get caught up somewhere and you don't want to leave them hanging. Okay, so I just had to throw this graphic in because this kind of illustrates that you've led your user into your website. You've led him to the point where you wanted him to get to. But you don't ever want him getting to this point where it's kind of like a cliff, and he's going to drop off. He has no idea what to do now, so that's why things like bread crumbs they make sense because they help that user understand where they came from and as well, where they can go next. And if they do get lost, or if they do get stuck, then they know that they can navigate back to where they came from. This is really important part of Web design and understanding how your user's gonna be flowing through your site and always giving them that option to where is the next step? What do they have to do, Where to the press and those? Those actions should be something that the user can understand and be able tow work with on the flip side of this that you're leaving somebody hanging. You also want to make sure that you're making it easy enough eso again going back to that principle of being simple that you do want to make it simple enough for the user to be able to navigate through. But creating that simplicity sometimes eliminates these thes additional actions that a user so by making it simple, sometimes you do create thes cliffhangers where a user doesn't know where to go next, because maybe you've oversimplified it and you've taken out to too many items and you're just confusing the user so again, keeping in mind that you want to have the user be able to navigate effectively and be able to understand and reach their goals, help that user make those decisions and where they need to go next and guide them through to get to their goal. But you also wanna have that ability that the user doesn't get confused and doesn't get lost on your website and always has that ability to know where they came from. Eso simpler is better, but sometimes you do need to add in thes steps and really think it through when you are designing the navigation that you don't want to leave someone hanging and bread crumbs is a really good illustration about. If somebody gets to a point where they are confused, they can always go back. And if you find that your users are ending up on these cliff hanging pages, then you might want to take a look again about how your interfaces working that you want to make sure that you are from you are doing something that's familiar, and that the pattern is something that the user can understand that they can be guided through, and they have a reasonable expectation that they can make it through to wherever the goal is that they're trying to achieve. 12. 16 Interaction Design Consistency: So here I've created a quick design and we're just gonna go through some of the flaws that we might see here within the design. So we do have our breadcrumbs, our navigation, and we've got it right here. A top eso This does help us with a user. Maybe they've got to data and they're looking for data and they're saying Okay, well, I don't see any data here, so they can always go back to the library and they can reassess their path going backwards . So you want to really try to avoid users having to push the back button because the back button usually is indication that somebody's frustrated. They've gotten to a point. They don't know what to do next. And they're just Onley only option. They have this within the browser to say back, So always make sure. And that's one of the main reasons why we always try to keep this main navigation bar here as well. So if you don't have bread crumbs, always make sure that this navigation bar is here because this always gives that user the ability to say OK, well, I've gone all this way. But you know this isn't exactly the information that I wanted. So instead of leaving their sight altogether, just closing it, going back to Google and doing a search, you give them the options that you see here in the navigation menu. So maybe against they see something here that they want to see another action, orm or information that they want to see. So I give some thought ability and again, the importance of having search on the site s Oh, this really does keep people on your site as opposed to going to Google and letting them rely on Google in order to search for content on your website. Eso You definitely don't want to do that because the whole idea is to keep them on on your site and to guide them through your website in order to convert and do the actions that you've provided for them in order for them to achieve their goals. So typically a users on a website, because they have a point of frustration and they want to solve a problem. So they've come to your website to solve their problem, so you have to be able to facilitate that and guide the user through so don't so consistency on the website is important as well. So if you've got the navigation bar up here, you don't wanna have it somewhere else on the next page and maybe a side menu and the next page, you want to keep the site consistent. Eso often times you will find that the index page the first page, the initial page on the website might be different. You might have a bigger graphic there, really to kind of draw that user in and keep them on your site. Eso sometimes within a template that you might be using You might have more than one format on it said. And if you are doing that, it's important to keep that consistency so that initial front page should look like the other pages, so they don't feel that they've gone to entirely new website eso again buttons as well, So buttons have to make sense. So if you've got some buttons here on the website and you've got something like this, even though the user can identify this as a button, it doesn't really make sense. What? This button is four. So why do we have a red button over simple marketing. This is very confusing for a use for coming in, whereas this button here which says learn more, makes sense. Because if you've read this, you've got into this button and you find out that there's more information and as well, from a user coming in, they can easily see that. Well, you know, here's some contents boat Hello World. And while there's more information, if I click here so this will lead me to solve that question that I have because I've gotten to this point. I'm reading this topic. I see the header and I see that there's a whole bunch more information. And if the user is looking for more information while you've just answered their question that okay Mawr information Perfect. This is exactly where I want to click through, and then they'll go ahead and read that article as opposed to having it something in here. Or even if you did the let learn more in here, I mean, it wouldn't really indicate that maybe if you want to learn more about simple marketing, it wouldn't really make sense. So again, structure is important. Eso if you did have content but simple marketing you don't want to keep it within a button like this. You do wanna have maybe a separate paragraph or separate section for it and then have the learn more. But in there so people could read about simple marketing, get an introduction to it, and then they could click through, if that is the action and if that is the content that they want to find through. So that's what we talk about when we talk about getting guided through a website. Andi as well. Here s Oh, we've got another illustration where we've got a heading. We've got some introductory text and if the user comes the site and says, Wow, this is exactly what I want to read more about They do have this subtle indication. So this is less subtle as this learn more button. But again, it gives you that indication. So this is more of something that the user reads. This reads through this content and then hits the spew details. So if they want to continue reading about the topic, but it doesn't necessarily mean that you're trying to push this topic on them as much as if you did the learn more button So big difference between buttons and again the buttons have to make sense. And again it kind of goes back to that original statement where a design is important and things have to be consistent and makes sense. So if you've noticed here when I've been moving around my mouse, I've got a hyper link here. But if I take this off, it is a little bit bold id. But to me, if I was to come to this website and if I was toe be reading this over quickly and if I had some in for more information about the website informational website and that was the what I was actually trying to do eso if I was being guided through here and I said, Well, you know, I'm looking for a template for marketing or informational website. I wouldn't really know which one that I might know that simple marketing can be clickable, but it still has to be brought out more. But I have no idea that information website is clickable. So always be careful when you are using these removal of the typical hyperlinks and make sure that you're replacing it with something else that might indicate a hyperlink. So sometimes we do do, like a color change or something like that in order to indicate that it is a hyperlink. So I'm just gonna set it to that default blue, which is uniform for people to understand that that's a hyperlink. So when I refresh this, okay, so now we know that this actually does something. There's a different color, so it's bringing our attention to their and when we hover over it, we see that the underlined shows up and we know that this is gonna be a hyperlink. So makes it make sure that your hyperlinks stand out and make sure you're using the same format throughout your site. So if I've got view details, if I've got all of these, these hyperlinks should all be the same. They should all be uniform. And in order for the user to understand that there's consistency in this website that I'm not linking some out with this red around it. I'm not linking some out like this, and then some like this. And this is one of the things that comes default with the with with browsers that hyperlinks do usually stand out and there is something different about them, and this really helps users to quickly differentiate paths that they might be able to go down. So again, if they got to this point, there was no other buttons. There is no links, no navigation, and all we had was this informational website hyperlink. But we hadn't really indicated that it was a hyperlink. The user would be stuck and again, we don't want that. We want to make sure that the user ends up in the right place and that they're not stuck with questions about where to go next, and especially that they don't have to go to this back button. The back button is definitely a last resort because the back button is usually close to this search bar, and if so, users really frustrated, they just give up and they just type in something else. Within the searcher. They go to another site 13. 18 Interaction Design Easy to understand: I want to go over the main concepts that you should understand about being able to design websites. So one of the main concepts is that we've been going over is that it should be usable. It should have a purpose and solves a purpose. So when we look at this illustration here, we can see that this makes sense. We know what's happening here. That this puzzle piece is the missing piece here. And when we push this in police, we know that we're solving this puzzle. Here s Oh, this is just something that just makes sense. And if a user was to come in here, if this guy comes in here and he says, OK, well, what do I do with this puzzle piece? I know I'm gonna push that into place here. So we don't wanna have these cumbersome explanations where we've got someone up here that's making a long explanation and they have to say, Okay, well, you know, first you go here, then you go into here and then you do this. We don't wanna have that. We want stuff that just makes sense. When someone comes into the site, they say, OK, well, I've got a puzzle piece here. I can fit it into place here. And even easier is something like this. This illustration again. It really does bring to the point where we've got a support button. It's a green support button. Green means go. I'm gonna click that button if I need support. So very easy to understand. And when you look at this diagram, you know right away what the point of it, ISS that it just simplifies access to support. And all you do is just click that button if you need that help. So what? This is one of the main pillars off doing good Web design and user interaction that the user comes in and no, was what to do. And that's going to solve a lot of problems down the line if the user avoids the user from getting confused, and if they really do understand where they have to go and what they have to do to accomplish their goal, so always keep that in mind, keep it usable. Keep it easy and make sure that the user can understand what problem they're gonna be solving 14. 19 Interaction Design Invisible Guide: So we've got two images here, and each one has a goal in mind. So when the user comes here, they've got a few arrows. And as you can see, this guy's a little bit confused about which way to go and how to achieve his goal. So if he wasn't actually able to see this cup, if this was something that wasn't visible, he would have a hard time actually being able to determine how he could find that were, as opposed to on the right hand side here, we've got a bunch of footprints. So typically, if you were to come to this right hand side, you could say, Okay, well, I'm just gonna follow these footprints and I'm going to see where that leads me because I can see that maybe this is a path someone else's gone here before, and this just makes sense on what I need to do. So this concept, the second concept that we want to talk about and that we've talking about we've been talking about throughout this course is this invisible guide that the user, even though they might not be aware of where the goal is, So if you can imagine both of these diagrams without the's troll phase and how they would know where to get there. Having this invisible type guide is a lot more effective and efficient than having these arrows, once pointing one way once pointing another way. So there's maybe possibility of several different goals, and this the user just really doesn't know what to do. So always think Invisible guide, how you Congar guide them to their goal without them actually even being aware that you are guiding them. So you might see that within hospitals where they've got these footprints on the floor. And that's the same type of idea where, if you are lost and if you are trying to find your way that you've got these footprints on the ground and you can kind of follow them through to find where you're going. And they're not very intrusive, their work a lot better than the signs on the wall so they might have signs on the wall as well. But overall, that's gonna be a lot more confusing. So I guess when you think about invisible guide, you can think hospitals where we've got signs on the wall as opposed to the footprints on the floor. So what's gonna work better and what's gonna be less intrusive? And have the user actually not even realized that they are actually following through to where you want them to be within your website? 15. 20 Interaction Design be familiar: so in this example were actually over on a website called Layout It. And this thing, this website helps us design bootstrap layouts. So here we can just do a preview of it and we can quickly see that. I guess one of the main reasons why I'm always attracted to bootstrap is because it just makes sense. Ah, lot of the components that are built in are things that people are gonna be familiar with. So going back again to the design patterns that Yahoo has that these things just makes sense when you've got something like a calendar picker, you know what to do here. You know that when you click on this, you've got this little pop up that shows up, and from there you're able to actually go through and pick out the different items in the calendar that you want to use and so on. So in the same thing with bootstrap, it just makes sense. You can use design patterns and you can build use thes built in type of patterns. So typically, you know, you're putting here at the top, you've got a heading. So if we put this hello world after the paragraph. It really wouldn't make any sets because typically what you're doing is you're placing these headers, and this is going to give you an indication of what this text is gonna contain. So you want someone to be able to come in quickly, scan your website and say, OK, well, description lists because they're gonna look at this highlighted stuff and this highlighted stuff, they're going to understand that. Well, this is gonna be usually a summary of what's coming here. So I don't have to read over all this little text to know exactly what's contained in here . And I can briefly kind of scan through the website and say, OK, well, yeah, this is really interesting description lists, and I'm going to read a little bit more about it and the same thing, especially when it comes to forms. They just have to make sense, so your form layout should always make sense. Try to keep those the mandatory fields, the required fields within one place. Also, when you are displaying error messages, try to keep them on the right hand side because it just makes an easier flow to the website and the Web information. So Maybe if you had an error message pop up, you don't want it popping up somewhere, totally different, somewhere unrelated to the fields. Ideally assignment. They show up within the fields, and that's how you understand that. That's the field that you're working with. And that's the one that had the problem. I think a lot of people have seen that kind of frustration where they're filling out this long form. They hit, submit and they really have no idea what just happened. That's not submitting. There's something missing. Sometimes they do very little to kind of indicate what was missing in the field, and that's frustrating. And again, that's going to create a barrier to entry and especially within a form form. Data is gonna be really important. The reason that you're asking for this information is because maybe this is one of the goals that you're trying to achieve on your website, and you want to make sure that the users have absolutely no barriers, that it makes sense and it's easy to understand. And that's why a lot of these design patterns, their form based because forms are very, can be very complicated and simplifying those forms just really helps out. So some things like those auto completes and all of that really does help out on Big N when we're going to navigation things like the breadcrumbs, even how you're doing Page Nation pagination eso here where you've got a whole bunch of pages and you're tryingto figure out the best order to keep them in. So sometimes on alphabetical filter is good and filters air really good, too. Break up those huge pieces of content and data, so again, think it through well and make it easy. So over here we've got an ad subscribe again. It's very simple, straightforward form, and always to do is make this check box and that were subscribing, subscribing at 10 email address and try to keep it as simple and familiar and easy to understand as possible. So use design patterns where you can and as well use typical fashions of design. So don't try to reinvent it. Work with what's been proven to work because users are gonna be familiar with those 16. 21 Interaction Design achieve its purpose: So the last major concept that we want to speak about is that a website should achieve the purpose. But it set out to do That's the primary objective of the website. So just like a wheel has a use a purpose that anyone can say, OK, well, I know how to use a wheel. I know what I'm going to do with this wheel. So we've got an illustration here of someone that's come up. They seen the wheel and they said, I have an idea. I know what I need to do with this wheel. So you want to remove all of those barriers and all of those things that might get in a way of achieving the purpose. So instead of overwhelming the user with a whole bunch of different objects, maybe present them with the simplest format of a wheel and let them decide how they're going to use it and achieve their own goals. So I've got someone coming in here. He sees a wheel, he knows what to do with it and the same thing for your website user should come on your website, see the website, know what to do and know how they're going to use it to achieve their goals. And another thing about a wheel is there's always that common saying about that. You don't have to reinvent the wheel, and that's very true within website design as well. So you'd want to avoid reinventing things, reinventing the wheel. You might take a look at the concept of the wheel and say, Well, that's a really good concept. I can use it within this type of format on my website, and that's how you should perceive and look at the content that you're developing and the website itself that you don't necessarily need to reinvent everything. And basically, you shouldn't be looking at re inventing everything you should be looking at, how it can achieve the purpose that it set out to do. And that's gonna be the one of the main things that you're gonna be looking at when you're doing website design and interactive design to make sure that you can achieve your goals. Number one objective beyond everything else beyond the design, everything. Just make sure that's achieving what it set out to do, and that's the real purpose of making sure that you've got a good interactive design it once it achieves its purpose than the rest is just additional styling and making it look good.