Lessons

Lesson Info

UX vs UI: What's the Difference?

the next one is a big question. So are you Excellent. You by the same. You seeing those all the time saying, shaking his head already? Um, you seeing those? And job title? All the times people just say I'm you. Actually, you I designer. All right. Um, I see. No, no. Uh um I think, yes, there are a lot of similarity. Yes, I was unlike a graphic designer transition to you. Act. So, yes, I have knowledge a little bit of both, but it doesn't mean they're the same thing. The two. Even though there's a little bit of crossover I like to think if you think of a product as a human being, um, you access pretty much the skeleton, the muscle, the organs, um, your height, your weight that makes up the inside of who you are, right. And then you kind of have to figure out OK, the brain goes there, the heart goes there. The heart doesn't end up in the head because that would be wrong. Um, there's two arms and two legs. If you have more than you, kind of It's not. It's not like the norm. Right? And the...

n you I on the other hand, is the color of your skin. The color of your hair, the color of your eyes. Um, how you are dressed right? It kind of tells you who you are on the outside when you're being perceived by other people. So, like to the two of them together, obviously, where can in hand to create this product or this human? But then they are both. There are different things. Great. Um, so that's more of like that. So you personification of a digital product. But now let's take a look at a website when you look at a digital product. So, for example, um, this is let's just say this is a website, um, in the very back, you have the back end programming. So you have the server side of things. Um, can be the cloud storage, right? That's the It's probably like a big computer located every zone, our Utah right. That's just like running and holding all the data. Um, that's something that you don't really touch at all you like as a end user or you as a consumer, I don't even care about the of I don't care about back and I don't care what language use us honest. The websites functional. I don't care what hosting service you've used, right? Um, so there's a bag in, and then there is the front end programming. So that's where the client side of the logic and data is happening. So this is this is how this is where you talk about. Is there Java script if there's CEO says using PHP using HTM out or even html five using flash, right, that sort of sub. And when you are there, like as a user like I don't care, I don't care what type of language. Um, your website, it's written as long as it's functional. Um, if you're talking about, um, native app that maybe this is a little bit relevant to you because it would become okay, So what type of, um, platform are you building on? Are you building on? Um, I'll s Are you building your own android? Are you building on windows or even blackberry? Um, then maybe if let's say this is a if this is a a series of products that works on an application, a website, and maybe a wearable device, like ultimately, they go back to the same server that has the saying database because otherwise you would have to create three different database and they won't talk to each other, right? So that's how as a UX designer, you kind of have to figure out how that relationship work, how the devices or how the applications talk to each other. Because, for example, if let's say you are building a e commerce site so you have a you have a shopping website rays of the Here's the catalogue page that everyone will browse, Um, browse for a new shoes, vows for new shirt. And once they clicked, um, Lower one say they add stuff into the shopping car. So at that point is still in the front end is still on the client side, right by client. I mean, it's still on like the user's local computer. And so I added a bunch of stuff onto my shopping card, and now it's time to check out, right? So when I click, check out, then am I asked me to log in or Korean account. So by that moment, um, the front end is actually talking to the bag and say, OK, wow, if this person wants to create an order. We have to find if if this person is in the database or not. If the person is not in the database, we need to get some, um, information to let us know who this person is. Ray. So that's when you create account or you log in and say, OK, this is me. So, um, joy at gmail dot com I type in my password, and then it authenticates and say, All right, great. This joy does exist in our database, so great, we can go ahead and start creating this order. Um, and then when you when you check out where you hit the pay button, then the front end is gonna say, OK, well, which which payment Gateway. Are you supposed to point joys credit card to right? So maybe maybe this website provides three different types of payment methods. So maybe there's Google wallet. There's pay Paolo. And then there's like the oh, no, um, like traditional. Just enter your credit card form, right? And they each of these will send you two like different, um, services. So am I send you back to the paper outside, which is going to go through their server and do they do their own thing or in my shoots you to like Google Wallet, which does his own thing. And then, after all that, then an order is created. So now, um, on the merchant side, right on their screen, The merchant screen, um, they're going to see a new order has been created. And then now the merchant needs to go in and fill fill all that order, Um, and make sure it gets shipped in time, right? And then ones they once number trend, uh, tapes up seals the package and the merchant. These who like do something on there on the internal business tool to enter in the tracking information, right? And then all that stuff and make sure the UPS guy comes and picks up the package. And then there you go. And then the ups guy's shoots a tracking number to you, and then you can link it to their site. Right? So there's a lot of back and forth. Yes, it gets complicated, but I think that is the fun. It's one thing to dio. Um, so that's like the all the coding stuff that's going back and forth, right? And then as a consumer, sometimes you don't really notice this thing. You're just like, OK, I want a pair of shoes. And then now I'm checking out. Here's my credit card, and then I'm expecting a tracking number. I'm expecting three day shipping, so that better shows up in front of my door in three days. Otherwise, I'm gonna call the customer support. Right. So there's not that does all I need to know as a consumer. But then when you are designing the product, you you need to figure out you need to figure out how all of these work, otherwise anything is possible. We can design anything, right? Without given given constraint. All right, so now we're gonna move into task flow and system behavior. Yes. Do you start with you ex first? Are you going to you? I start with you. I first I saw it. Would I start with the user needs? First I start with figuring out the objective more toward the side of us. Yes. So I I start without the's thing in place where So maybe I should, like, add another one. That just like a thought bubble right. So, like, what is the idea? So you would probably go back to if you're working with the founder or if this is your own application, think about the objective. Like what? What? What are we building here today? Right then. Then I might ask you. And then you say, Okay. I want a website that sells shoes, right. So that is like, the core objective. Then we have to figure out, OK, while if you're selling shoes, Are you selling it on an existing platform? Right, Orel Rebuilding entirely new system for you because there are existing products. There are existing platform out there that does e commerce site of things. So you don't have to build all these right? But then you're like, Well, but my shoe company is super unique, right? And I want to I want to, like, recreate the this like the order filling process, and I don't want to use anything that's out in the market right now. Then we would I think we were kind of Well, it would be my responsibility too. Figure out the task flow working with you to figure out ok, while that says, does this, uh, workflow that your need, right? Does it fit in your business strategy? And then you might say yes. This is exactly what I need. Or, you know, I know we're missing a trunk because I really want, um I really want to integrate the shipping thing in there, too. Raid. So it before all these happened, we would have that conversation to really fee figure out the needs and the objectives. Yeah, so? So after the coding side of things, So usually I kind of have a conversation with the engineers to make sure we're on the right track. And then they go off doing their magical coating, things that I don't really even know. And and then I would work on task flow and system behavior. Which is this red one here? Um, yes, in that you know, what is the expectation of your understanding of the kind of capabilities and limitations of the different tools that the developers air using? You know, if it is there an expectation that you kind of understand that you know that you're working in the system, so you can't really ask for these kind of things that happen. Or are you given free rein in your work environment to kind of bring it all ideas, the table and then the developers just kind of go off like you said there I like to do in research first. I think there's merits not to actually know what you're building on. Um, obviously, you can always like if I think it's great if you are working in a team right, then you should be talking to let developers hand in hand and ask him, All right, I really want this thing. To happen in the product is a doable right? And then it's like And then you kind of tell them what you're expecting, the system to dio, and then they might come back and say, Now that's totally impossible. That would take three years to build. We're not doing that right Or they say, Yeah, you know what? What would be really cool is this new thing. You're like, Oh my God, that's even better, right? I think there's always this conversation going on is not it's not really up to you to figure out every single thing you don't sure process that happens before you even start right, and then it also depends on the It also depends on the budget on the time right. If the client really wants to launch this thing in two weeks, obviously you're not gonna have all the time in the world to kind of figure out what did what is core not right. Maybe you just say OK, this is a new platform we're going with worshipping in. And if you're working at Ed applies where it you are known for just innovation, invading stuff, right? If you're working for, like, an innovation team, then it is up to you to come up with, like, the next new interaction. So I think it really depends on the environment you're working with in s all as you figure out the objective and the need, I think we're good to go here. Yeah, right. So when I'm doing the task flow, what I'm doing is, um, Externalizing. So let's forget. I'm just going back to my example off. They really want to build a shoo shoo. Um, what site? Right. So, like, in this conversation, I am Externalizing your needs and objectives into something that is technical, like a flow chart so that I can pass it off to the team and then they know what you want exactly in the system. And at that point, it's still very abstract because it's pretty much just a series of actions linked together. And then some, like conditional stuff, right? So it's like, um, this is a page I'm on And then I clicked to go to another page. Um, if I say if I choose option A, I go to the A page. If I choose option B, I go to the B page on. Nothing is visualized at this point is just a series of boxes. I kind of set you up on what you would explode you are expected to see and I'm not. I don't really care about color at this point. I don't really care about the layout at this point yet, because I just want the logic to be done first. Um, so after figuring out the behavior of how the system talk to each other, So Okay, so this is also a place where you kind of figure out how the front end and back and talk to each other to or if let's say you have three different products. That's, uh, talking to each other. For example, um, the Facebook app in the messenger up right there, the same thing. And the you have the little crossover, right? Then you have to figure out how they're talking to each other. Otherwise, people will get confused and or like, the product will even know how to build that out. Um, so after figuring out the flow, then it's time to organize the content. So, looking at the actions and looking at what you are going to present in the product itself, then that's when you start creating a site map. So, um, a site map is pretty much a visual representation of where things are within the product. Um, so that kind of gives you and hierarchy of how things are laid out so you might start with. Okay, so I have a home page home page splits into, um, four different categories. So I have men's shoes, women's shoes, um, maybe like sale and then shopping card. Right? So that's like the four main categories that I can break down my pages. And then now I look at OK, so there's men, shoes or woman shoes so I can pick it out even further where I can break now. OK, so for men's shoes, we can have dress shoes. We cannot have sneakers, um, sandals, flip flops and then for girls shoes. Um, the terminology might be different because there's now we have pumps. We have wedges. We have, like all the like Oh, no groceries like there's a lot right And then after that, that maybe on the sale section it's a It's a different mentality. So I might group things based on price, right? So sale I My group things, though. This section this for 70% off another section is 50% off. The other section is 20% off, right? And then shopping cart shopping cars did takes you to like another thing. So that's so on in the information or picture. Or like when you're creating a site map. This is how you will lay out. And then, um, at a very quick Glenn's you you will see that. All right, so I have four major sections. Two of them will break down into even further until they get to the shoe product page and, um, and then this is also where you can start designing different versions of it. So you can say, All right, Actually, for version one, I'm only focusing a month to make sure my business sustainable. Right before I import all these woman's shoes, I need to find out if people are actually buying it. So I'm just going to start off with men's shoes, right? And that even in men's shoes, I'm gonna only start well, what sneakers and flip flops? Because those are cheaper than dress shoes. So I'm gonna only do these two, right? So that's the version One same map is a super minimal is probably only like three pages, and then you can design a site map for B to where you can say, OK, so now I'm adding another, um, another section on here. So I'm actually including the woman section on here this time. And at a very quick quick glands across different versions of the same mob, you can actually get a quick visualization of how your website will expand across time. And if there is something that you are crossing out, is also a great tool to kind of, um set you up for miles no, to see where you were, and then where you are today. Yeah, So at this point, you kind of have a good sense of how the website is going to look like because, you know, there are four sections, right and that there is a shopping car somewhere, and then the two major section would break out into even smaller sections. So now the next step we're going to do is figuring out the navigation and the interface. Um and then this is where wire frames happened also. So this is when you start thinking about, um okay, so if I have four section on the top, maybe it's gonna look like that. It's like a top navigation with four sections. And now when I click on the men's section, there's a little drop down that tells me what type of shoes are available for men's right. So you can start thinking about, um, having a consistently out across the from pages. And you can also start thinking about all right, maybe the sale pages is completely different. And which is fine, too, as long as you make it clear that the user is on sale page instead of all in like a men's shoes page. Yes, are you going to talk about? What products or software you use for any of these steps. For instance, I hear wire frame, wire frame. And, you know, I'm used to just writing it down on paper. So what products would you use for that? Okay, um, I think I can talk a little bit about it here. Um, there are a bunch of different Softwares available. And, um, I think that's also included in my materialist that you will get for this course. Um, but usually for back in in front, and it's probably like a speck, so you probably just type it out, right? It's nothing visual yet. And then I do agree with you. I think, um, paper and pen, his agreed tool. It's super guys free. Right? Um so don't ever, um, don't ever lose it just because there's like, a new software around town, because that's my go to tool when I am having these meetings to, um So the next thing is so for tasks, tax flow. If you're interested, look up the word. Yeah, look up the word task flow or how to build flow chart. So that's then I think you will probably get, um, a pretty robust knowledge of how to build those things. And then there's also something called on Good Karen I A. Which is introduced by Jesse James Garrett, which is like a visual vocabulary on how do you create these boat charts or, um, even site maps? Like how? How those low indicator work. It could get pretty technical, right? There is a whole language like UML like location. So unified modeling language where the helping different types of flow charts? Yes, flow charts, I think. Derived from just like computers. I ends right? And then how system design works. Um, I think Jenna, that's too technical for what we're doing as a designer. So I think the U X flow chart is definitely much simpler, and it still achieves the same thing. Like by the end of day, when you're looking at a flow chart, you should understand how the system is supposed to work. Um, so that's flow chart. Um, when I'm talking about Simon up, So Simon is another term and site map. It's kind associate to website. If you're building an app, we sometimes still call it site map to, but sometimes we get cheeky were like Hapmap. Uh um, So that is the 4th 1 on their um, yeah, there's different there. There are different Tom tools that you can use to both these, um, just to name a few of my go to one. Is Romney grateful? That's my wire frame prototyping tool. Yes. Um, there's a bunch. So there's also sure, um, there's proto I Oh, I mean, you can also go to go use illustrator if you want. Like at the end of the day is just how do you create these boxes and connect them? OK, so I have used illustrate before. It's a little clumsy because you have to write out. You have to draw a lot. So I was just I hear you know, wire frame. And so I'm thinking, Well, there's a product that doesn't very easily is there. That's what I'm asking. Only golf. It was my goat. Okay, um, I like it because you just drag and drop like there's a lot of pre existing elements that's built out already, so you don't really need to reinvent the wheel like Illustrator is obviously robust for building out director based graphics, right? But then when you're just dragging the same boxes and arrows all day long, you don't really want to go to that. Um, so that's that, um right for war framing? Yeah, there's a bunch of tools. So, like, if you so if the if the list on them in the bonus material is not enough for you and me just cool it just cool, like wire frame Softwares. And then there is a bunch that you can just use. Um, right, So, like, my my go to tool is on the graph full. And if you are doing this professionally, um, you should always ask the company you're applying for, like, what? What software's air using as a company just to make sure you kind of get a little bit of understanding. Um, but at the end of the day, wire frame is just wire frame like you should be be able to do it on paper, and whatever software is he would uses up was really up to you. Like I mean, go on, try all of them first and see which one sticks to you. Uhm, union that said, um, for us interface Lee on navigation. Um, then the next one is we can talk about transition and feedback. So that's the less tenable part race. So now you can start thinking about OK, so if I have all these pages done, what sort of feedback do I want to give to the user? Right. Is there like a clicking noise? Maybe there's an Easter egg, right? Maybe Like when they scrolled down to the end of a list, we show them like fireworks or don't know a picture of a cat. Right? That's really popular on the Internet nowadays. Um, what sort of transition do you want to give to the people? Um, when they are scrawling when they're sliding. Right. Um, so maybe it is a reading app, and we want people to flip. Right? So what does that transition look like? Um, if they have, we are building, um, a shoe website. Let's think about what other actions as associated with, like, shoes, right? Maybe Maybe there is, like, a virtual trialling experience with shoes, right? Or maybe we're maybe Daniel like this. You take a photo of your feet and measures the size for you. Very. So I was like, OK, so what are the stuff that we can we can do to make the experience better race. And then that's all of his pain point. Would you use a wife side if it worked? Okay, so the next one is talking about Brandon identity. So obviously at this point, like you, where is the logo? What does it look like? What does the brand mean? What story doesn't tell, right? Obviously, um, let's see what? Our so much to company. So Converse has a very different brand story than Nike. Rather kind of targeting different people. They have different voice eso that goes into content and language. So So what type of, um, content are you delivering to these people? Raise. So for Nike, a lot of their content revolves around athletes because they want you to think that when you're wearing their product, you should feel like one of those Olympic athletes running on the tracks and be all Gloria's right. And then what you are when you're variant worrying on I don't know Uggs on how you should feel like come comfortable Pumpkin spice? Um, yes, cozy eso. So, as you can see as we move to the top of the surface then that's where the user start interacting with your system, and that's where the user interfaces. I start to come into play. So, um, obviously site map and task below is also used useful for a interface designer because the interface designer needs to know. Okay, how many different types of layout do I need to build? Right? So maybe there is. There is one layout that I do for the shoe product page, and there is another layout that I do for the, um, for the category pages, right when I'm showing a loss of shoes, right? How do I How does it look like? And how does a product page look like? How that's the home page? Well, because a really different right. And then do I need to do anything different about the navigation? So those two are good reference for the interface designer, But that one where you I really comes into play is the layout part of things. And then, like telling telling the brand story in a very visual and intriguing way. Yes, cool. Any other questions about this? Yes. So you would say like back end programming should be like towards the end of the process where no, it should be. In the beginning, you should beginning. Yeah, but what if you know you design the interface and everything and the user doesn't like it and they want answers and other features going to be more time time consuming to do the bride back and programming again? Yes, I agree. So if you haven't have stuff figure out yet, obviously I think is bus to not invest all the time and energy into designing a database, right? And I think that's where M V P really comes into play. So delighted something designed prototype Quickly go out and test and make sure that users like it once the usual I get, I think it's it's a bus to build the right to build it right instead of building it quickly. Um, I think they are a lot of, um, data base. I just suck, right, because it's like a last minute thing. And then it's kind of is very much patched up the database because people are always adding new feature in the front and the back going to support it, right, So they're just like tacking on stuff without really thinking of building a sustainable database. And I think that's also where you X can come into play when you're designing for a system is also to leave that I believe the question open ended and really talk about. OK, so here's the system that we have today. But let's just kind of keep in mind that we might go towards this direction in the future. I think that's also where the version site maps come into play to, because it gives the entire team a really good picture of where we might go. Yeah, yes, it's were all just a iterative process, right? Sometimes you're doing things going. Yeah, um, so I think like as Aux is honor, obviously you have to wear all these different hats to can just switch around. But I think now he is fun really finds its really crafting the entire story from the facade of the right to from like the front of the store to all the way to like the back of the store, Like how the shoes are organized. If you're thinking about a physical store