Bummer! This is just a preview. You need to be signed in with a Pro account to view the entire video.
Interdisciplinary Approaches to Web and Experience-Based Design42:15 with James Pannafino
In this session James will give a holistic overview of how other disciplines can help web professionals develop future projects. He will discuss a broad range of disciplines such as industrial design, psychology, comics, communication and more. James will use his love of diagrams and visual imagery to communicate his research and findings. This session will serve as a palette cleanser, and can help inspire and enlighten future web endeavors.
Thank you for taking the time to come to my talk. 0:00 I really appreciate it. 0:03 It means a lot. 0:04 Again I'm from Lancaster, Pennsylvania. 0:07 I teach at a university called Millersville. 0:09 Lancaster is about an hour west of Philadelphia, and 0:11 I do not know any Amish people, so no need to ask me that, later. 0:15 I'm gonna be really brief about my background. 0:20 I think it's gonna help me frame my overall presentation. 0:23 I promise to be really quick. 0:26 So, just about myself, I have a graphic design undered, undergrad 0:28 education and how many graphic designers in here went to school for undergrad? 0:34 So, good amount. 0:38 Do you, this looks familiar, right? 0:39 These, you know, pre-web skill sets. 0:40 Topography, gestalt principles, evaluation, systems thinking. 0:43 A lot of timeless skills. 0:48 We still learned the basic programs, but the idea was we're mainly designing for 0:50 static based design solutions. 0:56 You know, a lot of print based stuff. 0:59 So, as my career progressed I was very lucky to start working when the web 1:01 first established and you know, a lot of align left, align right. 1:06 And it progressed into, you know, 1:11 more complex design solutions with CSS and so forth. 1:12 And I was very much immersed in it. 1:16 I loved it. 1:18 You know, I was a web designer or nerd. 1:18 I'm a big nerd. 1:20 I'm just gonna be honest about it. 1:21 I'm not cool at all. 1:22 But I love being in that culture. 1:23 I, I wa-, but at the same time, 1:27 I was really lucky to transfer into the world of academia. 1:28 And I felt this great kind of pressure on myself to teach my students 1:34 in the liberal arts, kinda, realm these timeless skill sets that I learned, and 1:39 I appreciated, and I grew from. 1:44 But what I found was, it was really difficult to just take what I learned 1:46 as a senior interactive designer, and just show them, you know, 1:51 decision-based outcomes or what I, what I was producing as a professional. 1:55 I mean, I continued to do freelance at that time. 1:59 And because as you know as professionals yourselves, 2:02 skills change over the time, you know. 2:05 CSS, HTML Java, you know, the, the programs, you know. 2:08 When I was using Photoshop, it had, like, six panels and the tools. 2:12 And now it's so many, it's so different. 2:16 I mean, there wasn't even layers at the one point I started using it. 2:18 So, how can I really change this? 2:21 Make this work for the new type of student that I was teaching? 2:23 Well, it's, the answers kind of right in front of me and what I really notice I saw 2:28 this diagram by Dan Schaefer and he's a expert on interaction design. 2:32 And he talked about the idea of interaction design being very multi 2:38 disciplinary. 2:41 And it wasn't just the idea of designing for that given object, but 2:42 you know taking a visual design component, so 2:46 user experience, information architecture, you name it. 2:48 And, I, I looked at this. 2:51 I, it really inspired me to think of well, 2:52 what happens if you were to add more disciplines on top of that? 2:54 That kind of me, lead me to my topic today, that I'm going to talk about. 2:58 Just interdisciplinary approaches. 3:02 And as I wrote in the description, 3:04 I very, this is going to be a very holistic overview. 3:05 In, in education we talk about depth and breadth you know, this is a very, 3:09 you know breadth is what I'm going for today. 3:13 So, hopefully it inspires you to kind of, 3:16 look further into some of the topics I'm going to discuss. 3:19 I really focus on the idea of not individual type of point of view. 3:23 Because I said to myself, I'm an educator, you're professionals. 3:27 I don't wanna create something that's just my point of view. 3:30 How can it, you know, affect the whole, the collective whole? 3:33 So these are just two different philosophies, and 3:36 I was a bit doubting myself, you know. 3:38 Could my point of view help others? 3:40 And, what I was really pleased about is as I was doing my research the past few years 3:43 is the idea of, I'd been reading a lot of articles based on 3:47 professionals and how their life experiences and interactions and formed 3:53 their experience and interaction digital, experience interaction projects. 3:59 And it was really kind of like a epiphany to me and 4:04 I was like well if they're doing this maybe I can kind of build off of that. 4:07 I'd just like to quickly share some topics or articles, and 4:10 I actually emailed some of these people I said hey do you mind if I talk about this? 4:14 And they were so kind and said, yes, please do talk about it. 4:18 So it talks about this sense of fellowship we have as a discipline, 4:21 not just an education or a non-profit, but also just in the professional field. 4:25 So this first article is by from Melissa Man, Mandela. 4:29 And she talked about the idea of applying our, 4:35 her background in architecture to product design. 4:37 And I thought it was very, very interesting. 4:40 And what she states is the idea of how her herself as a product designer and, 4:43 and how she uses circulation systems such as list menus and tabs. 4:48 Necessary to help people navigate through a product, and how, 4:54 when she was a architect how she learned that circulatory systems, or 4:59 circulation systems with stairs, and you see that diagram up top right, stairs, 5:04 hallways, elevators were very important helping people navigate a building. 5:09 So it's just a nice parallel metaphor in how she took those information and 5:13 brought into our current state as you see the bottom 5:17 of navigating through product design. 5:19 Another article that was written by Simon Duncan, I found really interesting. 5:23 He wrote about the idea of how hip hop teaches, taught him about UX design. 5:28 And I don't have a good voice but 5:33 I'm going to try a rap from you this is from Tupac. 5:35 If you need my assistance there will be no resistance. 5:38 I'll be there in an instant. 5:41 You could save your applause for later. 5:44 Simon's tran, [LAUGH] Simon's translation was based on that lyric was a healthy and 5:46 open critiquing process and is essential for great design. 5:52 And I'd think we'd all, we would all agree with that. 5:55 And we can never evaluate something at the surface level because I think lyricists, 5:58 rappers take life experiences and condense them down into these narratives. 6:04 So we talk about content being very important. 6:09 The idea of keeping that life experience and 6:11 communicating in that short brevi of time is very inspirational. 6:14 Another article written by Ethan Martin talked about how, 6:19 how his experience as a waiter taught him a lot about his UX profession. 6:23 And he went on to talk about the idea of how we're, we're, 6:29 as designers, liaisons between the user and the brand. 6:33 Just like when he was a server, he was a facilitator between the kitchen and 6:36 the patron, or the customer. 6:41 And we have to keep considering how human, human experiences 6:44 in the physical world can help provide insight into our digital craft. 6:48 And these three articles really pushed me into the topics I'll talk about today. 6:53 The overarching, you know, the, this term of everything old is new again. 6:57 And the idea here is that sometimes life experiences that might not seem directly 7:02 connected to what we do as professionals can bring a fresh perspective to us. 7:09 And I truly believe, truly believe that this is the future of web design. 7:15 Is that, not just the idea of UX experience usability but well beyond that, 7:20 these disciplines will help inform us of how to make decisions further on. 7:25 Maybe not directly. 7:29 You're not gonna go into your job and say I learned this I'm gonna do this. 7:30 But indirectly in the way of helping us to explain to stakeholders colleagues or 7:32 even training new employees. 7:38 Myself, I do it as an educator. 7:40 So, I'm gonna talk about four disciplines industrial design interaction design, 7:42 oh sorry, industrial design, psychology communication and comics. 7:48 And there's many more I can kinda go off of. 7:52 And the interesting thing about industrial design is the fact that you know, 7:54 let's look at like, you know, ten years ago UX was a big profession. 8:00 You know, up and coming. 8:04 Now it's pretty standard. 8:04 Industrial designers ironically have been dealing with usability for ages. 8:06 And it's nothing new to them, and 8:10 it's something that we need to really keep looking at, because, you know, 8:12 we talk about product design as a profession for us. 8:15 They've been dealing with physical product designs for a long time. 8:19 I'm gonna, kinda go fast here. 8:23 So, if you miss a slide and you want to have it, I'd be glad to send it to you. 8:25 So don't worry if I kind of go speed through some of these. 8:31 As web designers we tend to deal with interactions in three different ways. 8:35 First is the idea of WIMP, Windows icons, menus, and pointers. 8:42 Or, as many of us will call it, desktop type of design relation. 8:45 We use our hand, our finger, some of our arm. 8:49 The second would be multi touch or gesture. 8:52 A lot of mobile devices, tablets, anything to do with kiosks. 8:55 We use a little bit more of both our hands, more of our arms, you know, 9:00 lifting, holding and so forth. 9:04 And then we progress into natural user interfaces, the idea of not just using our 9:06 hands, arms, and fingers, but also our legs, bodies, and so forth. 9:10 So we've got to think about how the the elements of extension of how we think and 9:15 interact with things, even though they're flat screens or wall kind of indications, 9:20 how this applies to the overall product of interaction. 9:26 So, if you look at it from a industrial designers perspective, 9:30 they might not have as much knowledge about WIMP, gestures, or NUI, we do, 9:34 but if you take the concept of affordance. 9:39 And if you're in those psychology workshop with Joe he talked about this 9:41 great coincidence. 9:45 Of course I did this presentation, well before I went into that workshop, 9:45 but I thought it was great, because the idea of affordances basically talks 9:49 about something that you do every day as a designer. 9:53 Affordances are basically objects in design that signal properties. 9:56 Or functions that afford us the ability to complete an action or task. 10:00 The well known affordance example that we see all the time, books, websites, is 10:06 the idea of door handle and it signals to our mind the ability to afford to turn it. 10:11 So in this example here there's only room enough for the hand. 10:17 You can actually turn a signals a pull, a pull. 10:20 Where a large, long form handle bar, we could act, can't actually hold. 10:24 But affords us the ability to put two hands on it, so we can push it. 10:28 Now in some cases you know when a affordance fails 10:33 when the signal doesn't match up with the function. 10:37 So the example to the far right is a perfect example. 10:39 How many times have you seen a building or 10:42 office where they have a note that says, push to open? 10:43 The reason is because more, most people pull. 10:46 And there's plenty of old buildings and, 10:48 and offices that kind represent this failure in design. 10:51 So let's get back into what we do, as far as, design for screen or web designers. 10:56 Here's a okay website. 11:01 You know, it's not gonna win any awards. 11:02 But you look at it and if I were to ask you, where do you click? 11:04 Where, where does it afford you the ability to interact? 11:07 You'd probably say, 11:10 well there's a main navigation bar, I see some icons that go left and right. 11:11 You know as far as going through the carousel and some more buttons. 11:16 You know that's pretty clear. 11:20 But it actually fails in, in many instances just because we're afford to 11:22 interact in certain spots there's a, a, a large missing element here. 11:26 And what I'd like to point out is that there's very inconsistent in which, 11:30 how they signal these affordances to the user. 11:35 We have yellow roll overs, we have massovers with no change. 11:38 We have black underlines, red underlines. 11:41 It's very confusing. 11:45 Some would argue with me and say well, that duh, 11:46 they could probably use a desktop mouse and hover over a mouse signal. 11:48 But we, as we know, when we get to touch-based devices, 11:52 we lose that ability to discover with the mouse or WIMP-base experience. 11:56 So what we really have to take into consideration is the idea of 12:01 signal and cue. 12:04 Signals are basically audible, audible or visual cues that are, audible or 12:06 visual indications that action can take place. 12:10 And cues are a signal, are are indication that let's us know that has taken place. 12:14 Here's a basic example of a website that shows us a system and there's many 12:20 different ways of establishing good signal and cue with affordances. 12:24 Consistent styling as you may even do already, but the idea that you're creating 12:27 a system, top to bottom, so while you know the very top, the logo the main navigation 12:32 are clickable, the idea is that it informs you later on what you can click. 12:37 Also, we don't want to lose that dimensionality that comes with 12:43 physical affordances, so any type of rounded off button or 12:46 circle signals to us that you can actually click it too. 12:49 You're not constrained to just making everything one color. 12:53 Now, as you progress, in creating systems with signals and 12:57 cues, and we transfer over into, you know, 13:02 interactive relationships, we have to think about other things that we see. 13:05 So, here's an example over to the right. 13:10 You know, this shows us the direction of someone moving on a map. 13:12 This shows us basically, a series of steps in which we can move along a path. 13:16 So not everything has to be in the digital realm. 13:21 We can think of printed maps. 13:23 We can think of physical experiences. 13:25 You know, anything that allows us to interact with the environment 13:27 is a good parallel to establish what we're working with as the digital environment. 13:31 Lastly what we have here is the idea of a stoplight. 13:36 This signals stop and go, and 13:39 actually indicates the movement in which we progress throughout these environments. 13:41 So these are all signals and metaphors that help us establish affordances, 13:45 the ability to afford to do something. 13:49 So let's start to think of the idea of moving throughout 13:52 a environment within the context of a directional-based product design. 13:55 If you haven't heard of it, Hammerhead One, is a project that, 13:59 that's being developed. 14:02 And, what, what it basically is, is a attachment onto your bike that uses 14:04 signals in a very simple format to afford us the ability to turn left, or right, or 14:08 so forth. 14:13 And what's really nice about this is that it's quick, it's easy to see, and 14:14 if we go back, it relates to this establishment that we're already used to. 14:18 Okay. Just imagine trying to mount a, 14:24 say like a phone to your bike, and 14:27 then looking at that at going at the speed of say, 10 miles an hour, 14:30 20 miles an hour, as you're driving through a city scape or city block. 14:32 Another thing I'd like to talk about in industrial design, 14:39 as I quickly transition over, is the the principle of feedback. 14:42 And that's something that we're very used to doing in a subconscious level as 14:46 we're designing. 14:49 But we really have to think about how industrial designers 14:50 apply that to their own designs. 14:53 So we look at this, a simple toaster oven here. 14:55 Feedback is essentially the idea of when there's output of information, 14:58 it gives us some indication something's happened. 15:02 So I wanna make a pizza, and essentially I turn it on, now, 15:04 I know the, this oven's working because that little red light is turning on, and 15:08 that, maybe at the top right it's clicking. 15:13 This is feedback to my brain that it's working so I can walk away, 15:16 come back when my delicious pizza is done, right. 15:19 Well, when we take this idea of feedback and 15:23 we progress it, we move into the concept of physical experiences. 15:26 Cuz we're not, we're no longer just designing for handheld devices or, or 15:31 static websites. 15:35 What we're design, we have to think of, of beyond that. 15:37 So heres a good example here, The Field house museum in Chicago. 15:39 The, the company Blue Cadet out of Philadelphia, 15:43 developed a central space interaction project, projection project. 15:46 And what is was for was the Restoring Earth exhibition. 15:50 And what they did was here is, even though they had a indication or 15:54 prompt explaining the interaction, it said you know 15:58 walk in front of the screen wave your arms, you know it, something will happen. 16:01 They still had to establish a sense of feedback before that interaction could 16:05 fully be 100% identified by the person. 16:10 Some people don't learn as well by reading, 16:13 in some cases they might miss that text. 16:15 So what they did was they went and, and 16:19 created feedback through creating an impression of the person's body or 16:22 their outline, so as they walk through the exhibit automatically the outline would 16:26 appear forcing them to under, or allowing them to understand that feedback. 16:30 And then they would go up to the motion sensors, and 16:36 then they would actually interact with the environment, which was based on the idea 16:38 of, of conserving, conserving water drops in these kinda of, of this virtual orbs, 16:42 as they, they're coming down. 16:46 So there's a bit of gamification in there, too. 16:47 You know, each section I have, I have some basic takeaways. 16:52 But you know, very basic things to think about here is the idea allow users, 16:56 users affordances through, and communicate signal and cue. 17:00 And make sure you give proper feedback to engage the user. 17:04 Next thing I'd like to do is talk about psychology and 17:09 I know during the workshop Joe talked about a lot of these aspects but for 17:11 those who weren't there, hopefully, this will be a fresh kind of perspective. 17:14 Thinking about designing with choice in mind. 17:18 How many people know who this is? 17:22 All right. So 17:24 you probably went, you were in high school when I was in the 90's. 17:25 This is Eddie Vedder from the band called Pearl Jam. 17:29 So maybe most of you guys have heard of them. 17:31 [LAUGH] I love Even Flow. 17:34 So, it, it aligns perfectly with this, talk. 17:36 Anyways, when we talk about the flow of music, if any of you play music or, 17:39 you know, even play video games or you're into knitting? 17:45 I don't know. 17:48 Any type of creative experience, you get caught up and 17:49 you lose the, the sense of time or where you're at, right? 17:52 And this is called flow state theory. 17:55 And what flow state theory in psychology states is that it basically tries to 17:58 balance the experience of boredom and anxiety, right. 18:01 And if you get this channel flow, it'll allow you to be fully immersed in this 18:07 experience and you lose a sense of time. 18:11 Now, for many of use this really is something we could talk to for 18:15 game based experiences. 18:20 Maybe not so much for the click through website or system like that. 18:22 But if you think about something as far as playing Angry Birds or something along 18:27 those lines, that's where a, a flow state theory is really the strongest. 18:30 Let's think about the idea of choice when it comes to website design or 18:35 mobile device design. 18:41 So we look at something like this, and as my last slide talked about, 18:43 you know, we hear a lot this basic phrase, keep it simple and clear. 18:48 I don't know if that's always right. 18:54 This is a beautiful website, it's easy to find where the elements are to navigate, 18:55 but is that always the right choice or the default we should go to? 19:00 And that's something that I want to talk to you real quick. 19:04 And this is a bit abstract but just kind of bear with me. 19:07 There's a study of, jam, that they did at grocery stores. 19:10 And the study really wanted to see is if they offered up samples of jam, 19:16 would people actually buy the jam. 19:19 And what the study really found was the idea of putting 19:22 one sample jam out there wasn't enough to entice them interact with sampling. 19:26 And in fal, in following didn't entice them to actually buy any jam. 19:31 But what happened was if they actually offered more jam, 19:37 they're more enticed to try and they're definitely enticed to actually buy. 19:40 And you say great just put out a crap load of jam. 19:43 And, what they found was more people kept trying the jam. 19:48 And this just wasn't, this just wasn't a jam, 19:52 you know, exciting community but the idea here was. 19:55 They tried more jam, but their ability to choose or buy something was stifled. 19:59 And they actually bought less than when there's less choices before. 20:06 So real concept behind this is that when we have to balance the choices and 20:11 the flow based on the type of experience. 20:16 And this leads me to my next part, talking about Cognitive Load Theory. 20:19 So, if you're not familiar with this, Cognitive Load Theory is the amount of 20:24 working memory we can hold in our mind to make task-based choices, compared 20:29 to long-term memory, which is things that are stored for long amount of time. 20:35 Think about your home phone number from when you were a kid. 20:39 That's more the long term memory compared to what type of soda you want out there, 20:42 you know, was it Sprite, was it Coke, and so forth. 20:46 I'm glad Joe's not here because he might like nitpick little things here or there. 20:49 But stay with me. 20:53 So we think about our cognitive load, how much work and memory we might have. 20:54 But, here's a story, I like to tell you real quick. 20:58 I don't, I have a kid now, so I don't get out as much. 21:01 But, I was out with my friends and, was celebrating someone's birthday. 21:03 We had nice flow of conversation. 21:08 We're sitting there at the restaurant, there's like 10 of us. 21:10 We're talking about things. 21:12 And, the waiter came up to us and was like, what do you want to eat? 21:14 And we had this big menu. 21:18 It's like this big. 21:19 I couldn't even fit it [INAUDIBLE]. 21:20 I had to turn it sideways. 21:21 And we all just looked at the menu and we stopped. 21:22 And the flow of conversation ceased to exist. 21:26 And we're all, no one made choices. 21:29 We're just looking at it. 21:31 You know this is very basic to what you guys are familiar with, 21:32 we talked about the constant information overload, right? 21:35 We have too many choices, in front of us, so it stifles us from making the right 21:38 choice and we stop kind of going through that progression. 21:42 Now my friend Ross ,who's an accountant, very smart guy, goes, you know what James? 21:45 I go what, Ross? 21:49 He goes, this is just like the Cheescake Factory. 21:50 And I'm like, no, it's nothing like the cheese. 21:54 I raised my nerd hand and I'm like, it's nothing like the Cheesecake Factory, Russ, 21:56 and let me explain to you why. 22:00 And, I said that the Cheesecake Factory 22:01 actually has more choices than this restaurant. 22:04 But what it does is that it uses the idea of Millers Magic Number Seven plus or 22:07 minus two. 22:12 And just like Joe said in the workshop and my psychology colleagues 22:14 have mentioned to me, this actually got debunked a number of years ago to four. 22:17 And the number seven actually comes from the number of 22:22 digits in a telephone number. 22:24 That's where the original study came from. 22:25 But the idea still holds true to a certain extent. 22:28 What you're essentially doing is you're chunking and sequencing info per page, 22:31 which allows the viewer to actually process it in the more meaningful way. 22:36 And what happens at the Cheesecake Factory, too, if you haven't been there is 22:41 there's multiple pages in this booklet, and they actually have ads in some cases. 22:43 And these ads actually add visual rest that allow our mind to actually 22:47 take in the information from the last page and 22:51 continue on taking in new information as we progress. 22:54 Now, we have a lot of different design techniques in the digital world to 22:58 work with that system. 23:01 You know, one that's been around for a while is just called Sequence Mapping. 23:02 If you have any, if you've been through any type of sign-up system, 23:05 you see Sequence Mapping used a lot. 23:10 That's a basic idea of two functions, showing the step by step process, how many 23:12 steps are in the process, and then also showing what step you're currently on. 23:18 So just think about that, of just informing the user, giving them a sense of 23:23 control and understanding where they have to go in the future. 23:26 With that idea of like keeping that all in mind, 23:31 it really, it's a nice tool of the sequencing out experience. 23:34 I'd like to talk about a few other theories, too. 23:39 First is a Hick's Law. 23:40 Hick's Law very much connects into the idea of information overload. 23:42 Hick's Law states that the more choices you have, 23:46 the more time it'll take to process something. 23:49 So we look at like a drop down menu like here, and there are so 23:52 many choices you have doesn't mean you will give up all the time, 23:57 it means that you take more time to actually accomplish this. 23:59 Now does it mean we have to limit the choices just like we did before 24:03 with the idea of Cheesecake Factory? 24:06 We have a fly out menu here that actually has more choices. 24:11 But because the sequence to track to info, close to seven, 24:14 you know, it's a little better for us to take in all that information. 24:17 This leads into another theory I like to talk about, which is called Fitz Law. 24:22 Fitz Law is the idea of the distance between your mouse at rest, 24:26 your target width, that would be the button that you want to click and 24:31 the total time of distance. 24:34 So this formula basically allows us, if we test it out and the user's successful, 24:35 we can see from that, first drop out, fly out minute all the way down to the bottom, 24:40 you know that's the furthest distance. 24:44 All the rest of the buttons will be successful for 24:46 the user to take and create a meaningful interaction. 24:48 You know and this comes down to the idea of thinking about chunking and 24:53 chunking's been around for awhile. 24:57 You know, writers do it all the time and you do it as a design. 24:58 And just thinking about all those experiences together and 25:02 chunking still works to this day. 25:05 But we really have to think about chunking as not just breaking up information in 25:08 small units but also thinking about how it helps predict the future for the user. 25:11 So if you have a system and you foreshadow the ability 25:16 of the experience or ability for them to navigate through experience, 25:21 it allows them to progress faster as they see more of this. 25:26 Here we can see the idea of chunking, labeling, Miller's Magic Number seven, 25:30 you know, again four to seven or so forth. 25:34 And then,, [UNKNOWN] all work very successfully. 25:36 Some basic takeaways, I'd like to talk about is give the users choice but 25:40 try to allow flow. 25:43 Inform the user where they are and then sequence and chunk info when needed. 25:46 The next section I'd like to talk about is comic books, and 25:51 I know that's why most of you are here, right. 25:53 You're here to hear about comic books. 25:55 Here's a surface interpretation. 25:59 Two people punching each other, super heroes, all that stuff. 26:00 And don't get me wrong, I love Avengers, I go see all the super hero movies. 26:03 But it's more than that. 26:07 We can't confuse the message with the medium. 26:11 The message could be super heroes, com noir, biographies, war stories, etcetera. 26:13 Well, the medium itself is, and if you go by Scott McCaudill, 26:20 well known comic theorist, it, 26:24 by his own definition juxtaposed pictorial and other image in deliberate sequence. 26:26 And this is a lot of power, not just the sequence but 26:31 the idea of cartooning to add to what we do as web designers or visual designers. 26:34 Another kinda way to reinforce this is, Will Eisner, the creator of the Spirit, 26:40 in 1985, he created this, well, before the internet was established. 26:44 And what he explained was, the broad range of disciplines and how they informed us as 26:50 web designers that comic books can be a, well, not for us now, but 26:56 for creative people in general, that, comic books are a science and a language. 27:01 And we can see the highlighted aspects that we interact with to this day. 27:06 Human interaction, motion force, 27:10 how things work, vocabulary, mechanics, social values. 27:13 Again, this is established long before the Internet was around. 27:18 The first thing, another thing I'd like to go back to Scott McCloud's the idea of 27:24 amplification through simplification. 27:28 And his idea was that when we abstract a image in cartooning we're not so 27:31 much eliminating detail. 27:36 We're actually focusing on specific details. 27:38 We're stripping down the image to its essentials to create a meaning 27:41 that is much more, well, it's much more meaningful than a realistic art can be. 27:45 And we see a lot of this in symbol-based type of systems. 27:51 And this ties into another theory in Psychology. 27:54 So I'm kind of mixing things up, called Geon Theory. 27:57 And that talks to the state of recognizing objects when we break them 27:59 down to their simplest parts. 28:03 So if we just take say, you know, a bunch of different, rectangles, circles, 28:05 squares, and we build them up into a basic shape like a train over there, 28:11 which you can imagine as a icon on a website or used in some sort of 28:14 interaction-based experience because it's built off of these basic symbols. 28:18 Well, its more easily recognizable. 28:23 And this, I'm gonna tie this into something else too again. 28:27 People don't know, but 10% of the male, there's been a study done 28:31 where 10% of the male population suffers from a degree of color blindness. 28:35 So it's actually, we think about their users and 28:39 their abilities, you know, disabilities, and restrictions, and 28:41 constraints are something we have to take into consideration. 28:46 So we tie this into cartooning, simplification, genome theory. 28:49 This project called Color Aid was a nice example to bring us into 28:53 that type of user. 28:57 What this designer did was, connected that symbol-based system, or 28:59 that abstractation, into identifying colors for 29:03 people that maybe can't identify them as well. 29:08 And, what we really see with this is the idea of the color wheel not [SOUND] being 29:10 recognized based on the chromatic, type of reflection as much as those symbols. 29:15 So, by having color [INAUDIBLE] system, someone can actually work with something 29:21 that maybe they couldn't before, based on the abstractation of those symbols. 29:27 And you can see over to the far right, 29:32 on the end of the color pencil is very much like we'd see on say, 29:34 some sort of interactive drawing device, say on the iPad or application. 29:37 As I progress through this, I actually like to talk about the idea of sequence. 29:43 First is panelization. 29:46 There's a lot of studies done into the idea of what's a panel, 29:48 what are the visual boundaries, what does that tell us about the content within it? 29:51 When we just look at a panel by itself,the boundaries, the images, 29:55 they have a sense of story. 30:00 What we is, as we progress and 30:01 add elements to the story what we're creating is compositional space. 30:04 And a lot of times the, this these studies or 30:10 theories talk of the idea of the gutter. 30:13 This gutter, this im, imaginary action between two see two images in a sequence, 30:15 which further changes the meaning of the first image before it's just a house, 30:20 now we know it's a house that's just been entered and that, 30:23 that gutter is this kind of answers that question between those two images. 30:26 Next term I like to talk about is the idea saccade. 30:33 Saccade talks about the rapid eye movement between images 30:35 that fixates on individual panels. 30:39 This allows a natural progression of the eye connecting from one to two to three. 30:41 And as we connect through that saccade, we actually tend to see eye path or 30:48 eye movement through the panels. 30:52 And what we really see here, is the artist has intentionally drew a line across 30:54 the page, using gravity and the top of the door on the left and 30:58 then across the top of the plant in the middle image, across his shoulders and 31:03 then across the top of the doorknob in the middle image, and 31:08 then across his mouth and the side of his jaw. 31:11 Very purposefully drawing the eye across the page and down, and 31:14 this continues down the page even though I have it cropped. 31:17 So, we can kind of think of that eye's path. 31:20 Another thing that's very important that you can use as far as tools for 31:23 interaction design UX, web design's idea of panel distance and angle, 31:27 this is what comic book artists use to describe how they're gonna tell the story. 31:31 And it's a combination of distance and angle, so the first one is the long shot. 31:37 Even storyboard artists for movies use this, too. 31:41 A long shot is considered the establishing shot of the story. 31:44 The mid-level mid, mid-range shot establishes kind of a mid-range 31:47 conversation, allows us to see the full character. 31:52 And then the close up, it's not so much giving us detail because we already saw 31:56 what they are in the mid-shot, but they give us a sense of mood, stress. 32:00 We can read the reaction in their mind. 32:04 So these types of angles and distances can be mixed up, and tell a proper story for 32:06 comics, but what I like to do is tie, tie this into UX scenarios. 32:11 Or what you do as far as a web designer. 32:17 So, this first one talks about, you know, if we have a user scenario sketches, 32:19 how can we use the tools we just looked at as far as a comic book artist? 32:24 Well, we can think about the panelization. 32:28 We could think about the panel descriptions. 32:31 You don't have to render it perfectly. 32:34 Not everyone can draw like a comic book artist. 32:35 But the theory and the idea of how you place those images in there, 32:38 as you're telling a story between colleagues or 32:41 as your showing a stake holder, such as a client, that makes it meaningful and 32:43 you're giving the full impression of this, the, scenario you're trying to present. 32:47 Another thing we can think about too is the idea of the eye path. 32:52 And, how we leave the pay, leave the eye across the page using, 32:56 activating space, and then allowing the eye to connect to certain objects. 33:01 This is a very basic thing most designers know how to do. 33:05 But if you think about how someone might use small elements in a comic book 33:07 design we could connect this with our graphic design or web design. 33:12 Also to the idea of using the saccades, an overall 33:18 idea of gutter space to communicate elements or pacing in storyboarding. 33:23 So if you have a motion design or some sort of light-based design thinking about 33:28 how much time and how we make connections across a certain elements in relation 33:33 to how comic book artists establish narratives for their own designs. 33:37 Some basic things I'd like you guys to take away from this is, 33:41 don't undervalue the idea of amplification through simplification. 33:44 Always take in consideration the panel arrangement, and 33:48 what meanings they might have. 33:51 And then the visual language of comic books and how powerful they could be 33:53 into explaining your concepts to fellow stakeholders be employees or clients. 33:56 The last section I like to talk about today is the idea of communi, 34:03 the discipline of communication and 34:06 how understanding information and how we exchange it with each other. 34:08 Essentially, you know, communications is the idea of how 34:12 institutions match information between, between each other. 34:15 If it's, you know, 34:18 someone trying to inform someone about something happening or internally. 34:19 This one model of communication or theory is called Shannon's Wea, 34:23 Shannon-Weaver communication model. 34:27 And this, this originally was developed for signals within telephone systems, 34:29 but as it got progressed what it went into the idea of, 34:35 of verbal and nonverbal communication. 34:39 So, as we see with this there's multiple stages to every message. 34:42 This firm, the, the very top there in the yellow talk about informing or taking 34:45 information from one's brain, sending it to the mouth, and then progressing as 34:51 a noise, actually verbalizing, either written or verbally with sound. 34:56 And then having it being decoded or translated into the user, 35:00 think about how many times you have a misunderstanding with a loved one, or 35:05 internally, it could be through email or it could be a conversation. 35:09 This, this is where it breaks down into this section. 35:13 So, if we could better understand how we send messages, 35:15 we can hopefully refine that process and be better at actually doing it. 35:19 There's a lot of different things I could talk to. 35:26 I'm just gonna mention two tools that in my personal point of view, 35:28 talk to this idea of breaking down those barriers of communication and 35:32 eliminating some levels of you know, a breakdown in noise. 35:36 First is Trello maybe some of you guys have used it before. 35:40 It's an online collaboration management tool. 35:44 What it does really well is the idea of showing all the stakeholders the idea of 35:47 what everyone's doing in one place informing them of changes, 35:53 not just written but also visually. 35:57 And then creating a log for that. 36:00 So if you need to communicate, it's all right there. 36:01 You don't have any type of 36:04 levels of barrier communication that might hinder that overall experience. 36:07 While you do have to click to access certain features, 36:10 you could still see the overall experience in that kind of native area. 36:13 Another one you might not be familiar with but I'm excited about is called Mixmax, 36:18 it's a utility you could add on to your Gmail that's relatively new. 36:22 But the idea is that you can design emails all within the browser without any 36:27 special application, applications outside of it or any special clients. 36:32 And what it does is, the concept is that you're in the context, right? 36:36 So if you send an email to someone and 36:40 you wanna talk about scheduling an appointment, it doesn't 36:42 give you links that you click out of, everything happens within that email area. 36:45 So you can schedule meetings, you can uphold them, and 36:49 you're never leaving your email environment, which is 36:52 a welcome thing in my perspective because I just know how many emails I get and 36:56 how many times I have to leave it to accomplish another task. 36:59 Another theory inside communication I'd like to talk about or 37:04 mention to you is the idea of cool, cool and hot media. 37:06 So, cool and hot media is basically the idea of how much energy and effort we have 37:10 to put in something to engage with that particular type of interaction. 37:15 So hot media is described as something that has a lot of noises and 37:19 sounds and, actually, does most of the work for us. 37:24 Essentially, it's hot, right? 37:27 And we need less effort, maybe 20% effort. 37:29 You're sitting at the movie, you're relaxing, all that imagery is moving for 37:32 you, all the sounds are doing that. 37:36 You still need to listen. 37:37 But that is a level of media interaction that isn't as prevalent as this next one. 37:39 Cool media takes much more effort. 37:45 So we think about reading a comic book, moving eyes across the page, 37:47 turning the pages understanding the different dialogue boxes, 37:52 understanding the different characters takes much more effort. 37:55 And what I really want you to think about with cool and hot media is that 37:58 the idea of when you engage a user in this different type of media, what type of 38:01 stimuli are you, are you putting forward and then, also, what type of devices. 38:05 And we can go back to signal and queue. 38:09 We can go back to cognitive load. 38:11 And tie these into the communication model of cool, hot media. 38:14 And how this is gonna engage the user. 38:17 The last topic I'd like to talk about in communication is the idea of 38:21 denotation and connotation. 38:25 So we see a big, fat, juicy cheeseburger there. 38:27 And the denotation is actually the definition of, 38:31 if we look in the Webster dictionary under hamburger, it would say, 38:34 low quality meat behind two buns with cheese. 38:39 Or something along those lines. 38:42 Where the connotation is the interpretation from a person, 38:44 their emotions, their impressions, their memories. 38:47 So what we have here is, Mark says, hamburger, mm, delicious, 38:50 Jane, cheap, Sarah, memories, Mike, junk food. 38:55 This is really important because if we start applying this to objects we use or 38:59 we present to people, pe, present to our users, 39:05 we can think about the almighty hamburger icon. 39:08 And there's a lot of controversy, you know, a lot of studies, and 39:11 you can meet me in the hallway and say it. 39:14 90% of the people know to cook Pannafino, you're wrong. 39:16 But, the interpretations are open, you know, the denotation is, okay. 39:20 Well, this is a icon, and it's been around for a long time. 39:24 It's been popularized the past few years. 39:27 But, you know, it's something that you should click on. 39:29 And you could get another result, hopefully, more menu items. 39:32 But the connotation a lotta times is when I saw it a few years ago, you know, 39:35 I was like what's this, what are these three little lines? 39:39 You know, Mark here might think it's, 39:42 he might, might make him think of a hamburger. 39:43 Instead of cooking he might go to McDonald's. 39:46 Jane thinks of it as a layer icon. 39:48 Sarah just thinks of it as the icon she can click. 39:51 Mike just thinks of it as line spacing, because he's a hardcore designer, and 39:53 he just sees three lines, he thinks of line spacing. 39:57 What it comes down is the idea of learned behavior. 40:01 If you could present someone to something that has a broad range of connotations 40:04 you have to balance out how much you want them to learn, 40:09 and these learned behaviors are based on experiences. 40:12 And if you're will, willing to have the user 40:15 get over the idea of experience going through the experience and 40:19 figuring what it is, then they know what it is from that point on. 40:22 It's just the idea of balancing the two. 40:25 So general take away's, I'll make you to think about is just, 40:29 you know, understanding barriers in communication. 40:31 You know, balance out the levels of participation in media and 40:36 understand user's interpretation. 40:40 I'm really at the end here. 40:44 One thing I'd just like to talk about, if you ever heard of Seth Godin he's author, 40:45 talks about the idea of tribes. 40:50 Tribes being not demographics but 40:52 groups of people that are interested in similar subjects. 40:54 So what I want you to do is think about what tribe you're in, 40:58 as far as web designer who you work with, where you communicate, and 41:01 encourage you to expand that. 41:05 Maybe go to a conference on psychology, or talk to a bunch of people on comic books. 41:06 See what their perspective is to do your craft, and 41:11 see what you can do to learn from them. 41:14 Continue to recognize parallels in learning experience. 41:19 Continue to expand your language and hopefully this inspires you for 41:22 future endeavors. 41:25 I know I'm not giving you this tool or that tool, but hopefully, you know, 41:26 based on my description, I gave you a holistic overview of some things to think 41:30 about and I'd be glad to answer any questions if you want to send me an email. 41:33 One thing I wanna say is that you can email me at firstname.lastname@example.org. 41:37 I wrote a small introductory book. 41:41 And if you email me one nerdy thing, cuz I told you I'm a nerd, if you email me one 41:44 nerdy thing about you, I'll put you on a list and I'll send four copies out. 41:48 So feel free to email me email@example.com, 41:52 and I'll send four copies out. 41:56 If there's 40 people I'll just do a drawing of four randomly. 41:58 Remember, you have to send one nerdy thing about you. 42:01 Comic books. 42:03 [SOUND] Of food shows whatever it might be. 42:04 Thank you so much for your time. 42:07 I worked pretty hard on this presentation. 42:09 I appreciate you all coming out. 42:10 Thank you so much. 42:11 [APPLAUSE] 42:12
You need to sign up for Treehouse in order to download course files.Sign up