 All right, let the gentlemen sit down and then get started. I'm starting at 12.04. I know the time now is that you guys are just that I get that forward sign. So I know the sitting is smiling. OK, all right. Good morning. Say good morning. How difficult is that? One more time. So interaction design is losing balance with my talk. I have 20 minutes to go with the rest. Before I get started, let me ask how many people can't decide what's in this book? Can't even answer it. You don't need to. Come on, the hands need to go up more. Everybody's a designer, you know, if it's on the right. Let me see all the hands go up. You're all developers, right? In some right, we are all designers, ain't it? Cool. So today, I'm going to present a session called interaction design, use and dose. It was actually a very politically incorrect irreverent take on how design gets translated on the web. OK, so this talk is not about stuff that you would learn at a place like NIV. I'm not going to give you, like, high details of theory, but it's a very practical oriented life experience over the situations as to what people tend to do in interaction design and what people could learn differently. Question number one. What is, in your opinion, is interaction design? Can somebody define it to me? Anyone, yeah? Don't be shy. Yes? OK, good. Go ahead. Yes? It's a very important interaction design. Very nice. Exciting. Yeah. So interaction design is, unlike your graphic design or your print posted design, it has got an aspect that somebody is going to interact with what you are designing. That is the reason why interaction design is a form tougher concept to understand that it is more difficult to design. So on that note, let me introduce myself. My name is Harish. I am the random bed guy at Adobe. I get paid to actually go and speak with conferences and con people to believe that I'm intelligent. So that's what I am. I'm also a decision maker back at Adobe. That's pretty nice for that hand. And this is very important. I know how nice that is. So whether or not how this session goes around will like me, yeah? Because I'm the nice guy. Right? Right. Okay. So let's get started. All of us agree this, right? Design is subjective. All of us agree to this. It even has to be form. See, that's what. What form is actually painted in color? Think about it. You'll get me started. Right. See, that's it. That's what. Design is subjective. And most of the things that I am saying are subjective to me. Right? Don't agree with me. Say that to me. It doesn't really matter to me. Similarly, what I'm going to say is something that you don't agree with me doesn't really matter to me. Because that's the essence of what you're doing. But certain things can be patternized, and that's exactly what I'm trying to put forward in this session. So I haven't heard about human interfaces. Everybody talks about this in several respects. See, I don't really understand the real technical knowledge of what human interfaces is. But most of the times I have seen people replicating human behavior on interfaces. Can you give me an example? It was growing and essentially when you say, you know what? Everybody put reference here. You know what I think. Okay. Okay, that's one. Anybody else? See, for me, I'll tell you. The most annoying human behavior I have seen in my experience is showing analog rock to show time on the page. With the second you were clicking in an animation, it could be a jiff or it could be like an SVT, it could be a flash animation. The next one was the most annoying thing I have is the page flip effect that non-flash guys have finished through their lives. It's just slowly the bad thing we have actually flipped the page, moved the mouse through the middle of the page, and it will slowly the animation change over. That's human behavior, I think, but that's freaking annoying. I hate it. But there are people who like, people are still using it. That's fine, but I hate it. So in my experience, certain human behaviors should not be replicated on doing stuff for the web. We have to actually reflect what humans do, given a particular condition. What can you do post with something? And how do you translate that into an interface is actually what defines how you do the interaction design. So directly transporting all physical aspects that you do in life into the web to actually result in really disastrous results. So that's why I call out very simple demand plans. It's actually a nucleated term of commandment that every interaction designer should follow. And my experience does not come as a graphic designer. I am not a qualified UI UX guy, but what I really am is a guy who actually worked with several large-scale projects with designers, with developers, in large companies, in not so easy conducive situations. So what really happens is designing becomes a one-way cumbersome exercise as opposed to an Oxy process that it needs to be. So many things beautiful. Do you know some of those guys? Yeah, I think I know some of them. Right. So who is he? This is the third Kira Jader, Viking Mafia. Yeah. He is the most beautiful thing I've seen in various projects. Look at that. Right. So why do I say this? You know, why do you need anything beautiful? Beauty is again a subjective condition, but why do you need anything to be beautiful? Let me get off to you guys. To feel good? To feel good, then? To connect. To connect? Then go on a date. Make it beautiful. Make it beautiful. See that the essence of doing an interface between interaction design is that that whole presentation that you get needs to be beautiful in a certain sense. See, it might just blow my mind. It might just look okay, but something just downright ugly looks downright ugly to everyone. Don't you agree that being ugly is more or less behavior? See, it takes a lot of heart and soul to create something downright ugly. But as the guys, that program was specifically without making much effort to actually achieve that. See, because most of the times UI is an afterthought. UI design is a guy who is generally getting paid. He is the guy who works with rectangles and squares. We just don't even know how to declare a variable. But then, taking that in mind, you actually end up building something which looks like ira. But you respect that idea. But the first requirement is make something beautiful. Second one. Make things fast and agile. Most of the times, what we end up with is not shit and nothing. We need a fast, not agile. Right, sir? So, when you're building something, the greatest piece of software which takes hours to load or hours to manifest is useless. Simple things. See, I really miss the creative part. I'm a big fan of the creative application. But I think it works really fast. It's a personal experience. It's just a simple web page. It doesn't have a lot of graphical elements going into it. And it's really fast. It really works. Third point first. Make things really expressive. Really expressive. This point, I ended up with the guy in the picture. He's the most expressive I've ever known. From screening to swearing at the umpires to crying, he has done everything. So, sometimes, when I think about an expressive person, this guy comes to my mind. I'm from Kerala. My heart bruises coconut iron. Right, sir? So, considering your fellow Manu man having this wide range of expressions, these are very good examples of how you can make things look really expressive. So, we'll come to examples. We'll come to thinking points in terms of all these points. And finally, this is my favorite slide. Make things that work every day. This guy works every day. Even in the moon. He's the guy with the split the bullet. Even his brother-in-law can create a song which is viral on YouTube. He just works every day. I'm just setting context. This is not on top. I'm just setting context. See, the five elements are simple. These are things that we already know. We want beautiful things. We want them to work for us. We want them to express themselves. We want them to work everywhere. Now, take a deep breath and think people who have written software at home today, how many times have you thought of this dimension? Why write in the future? How many times do we go beyond the unit test? I have several times seen engineers build a login form with two text inputs, type it and click enter. It works. Now, the designer will come and write a CSS. And if he doesn't write a CSS, what do I have? I still got something working. And eventually, the user will even get to use it. The first one, I asked the PC application with a great example of that. My name is not in my domain. I have a subtle application. But you have to get used to it. You're not trying to change it. That's how most of the emphasize is done. And that's how second-hand parties at this time. I can't ask this question to every single place I go as a user. Can you make this jazzy? Okay. And I use a lot of broken words in my talks. Okay. Who gets offended just blows your ears. But certain things cannot be mentioned without those right, technical words. So what does that mean? Can you explain to me what does making something jazzy mean? Something like that. Blue, fucetia, green, red color. Make an application. I want you to consult for me because I have this application. I want that to be made jazzy. Because I was a flash guy earlier. I used to get put in all sorts of weird pictures because I'm actually the jazzy guy. I'm the one who spanned the monkey and the monkey jumps. And you win a laptop. So I have an answer to this. Do you want jazzy? Come to my post area. That's not design, buddy. You don't want to take an application and make it jazzy in the name of interaction design. I will come to certain points where how people make these jazzy and completely screw it up. And what color is your sidebar? What color is your head up? What color is your foot up? The first thing that comes to mind is how are you going to make the head up? How are you going to make the foot up? How are you going to make the sidebar? I am not going to make a head up put a sidebar. The design does not start there. So how do you have written an application with headers put as a sidebar? Please let me see the hands go up. Don't you at least get me to asking this left side sidebar is looking very asymmetrical. Why are you looking at the right side? Why? Then it looks like really symmetrical. Haven't you heard this crap several times? You would have. Why do you have to cut down things in headers, putters, and sidebars and actually talking to the side? See, this is a don't. If you want, if you have to create something with the head up and sidebar going, but that's not your start point, engineer specifically. Designers, excuse me, you wouldn't probably do this. But guys who actually that would have been designed. A typical program who does not have a designer to support them. The easiest way to do a project is actually creating a head up and a sidebar in it. Your manager would think you're actually starting work. Ain't it? Don't do that. That's not how you start writing applications for project safety. Content is being created. That's often right as this. The user can go screwing. The only clear one is the content. Like if I have my entire content got done later on to the page in whatever way, if nothing works, then you start working. Ain't it? What sort of work should we do? It's a browser feature. Who are you? I said don't work yourself. Right? So don't do that. So when you're actually building something out of content, your biggest benefit, the biggest challenge for you as a developer is to actually present the content and that's where the interaction design comes to place. How does a person interact with your content? It is not by putting it like an alipsy. It is not about putting it like an alipsy. Let me not get started. Why can't you follow very simple life steps in interactive design? Be simple. Be polite. Be available. Be responsive. These are things that you do in real life, right? You actually go and stand in a regular ticket booking counter. We will follow all the four. That's how you get a ticket. So let us look at a simple example of how a web page, a simple text on a web page can be simple and overly complex. By clicking on this checkpoints, you can remember your password. Option one. Remember me. Option two. Which one is nicer? The first one. Second one. Why is it nicer? Does it convey what it has to convey? Does it? It does, right? Be polite. Incorrect password. One alert. You like it? You do the incorrect password. I want all the signs there. Password? I was just trying to look at the software. Don't do the incorrect password. I hate you. I am not doing the right password now. Just say, if you forget your password, that was incredible. You want to try again? Be a little polite. Right? That helps. I'm speaking purely in terms of simple text that we put in the pages or web applications. You are not even speaking like, you know, color economics or size of your patterns or, you know, what kind of information is sent to you. I am not talking about that. I am not talking about that. I am not talking about that. I am talking about simple light stuff that I did and how I found the web. Be available. What do you mean be available? I am telling you what is being available. It's not a high availability process. I am not telling you that. What is being available in terms of web? Canceling it, yes? It's not available. Well, it will be available to send. What do you mean? Well, it's actually a little profound process. Being available is something which we actually look at in a little detail where we actually speak about the principles of processing, principles of improving and so on. When you actually work on a page, you want stuff that you want to work with. You want stuff that you want interact with to be available for you without you having to make an effort to go and find web. A classic example, I almost finished up it, but the site has always put in work. I asked you this. I want to put a pipeline to take the day morning. So, how do you do it? Anybody that's interested in this site? They are also going there. So, there is this interesting feature where you actually search for something. You can actually search and show a list of things and the top right you can actually show where this succeeds. Then you click that button to come down and click it. It's like a learning rabbit. I have to like be a PhD on the bridge to understand where to click what to do and that's why I actually put up the website. And finally, be responsive. You click a button that's for you. See, most of the times I don't believe that small if you broke the circle that many on the website show, right? They are not doing shit. I don't think they are doing anything, but they are still there because it actually tells you that some shit has happened. I think if you give a time out that's like the other page. If it's worth time out it's not time out because you put up very progress bar it's not going to time out everything is going to work. But put that got out the feedback that you actually the user actually gets responsive. Responses that's also another feature. Like, you know, you do something get something instantly in your feedback. Use it as a channel. Like, you know, do more stuff on the client. Like, you know, actually work on stuff that will actually work very quickly on the client. Can you tell me one physical metaphor that has been applied to be touched on the site? A simple one that you are very familiar with? Touch. Touch. Which one? Can't hear you, sir? No, sure. It's okay. No, I'm just asking what physical metaphors have you transferred? Thank you. Touch is one. Tongue button switches. Tongue button. Brilliant. What else? Canada? Canada? Canada? It's not a physical metaphor, but it's something physically. You're used to seeing dates in a calendar. But what is probably not useful is the stuff that I mentioned. Showing actually our analogue blog. I'm going to take off some. That's a busy metaphor. Right. You take to actually agree and you've crossed to the site. Good point. It's so nice to see that a young man sitting in a web conference. Awesome. So, part of the section is critical. You know, part of the section like you rightly mentioned, no, the high devices actually have that nice little traffic switch and you can actually snap. So, we've actually looked at this in a little bit of detail. Some examples that I wanted to let you respond. Swipe versus scroll. I want to open this out for an opinion generation. How many of you guys like to swipe visibly scroll? Who likes swipe? Brilliant answer. It depends on the application. Absolutely. But let's say it is definitely to go on. Would you like to swipe or would you like to scroll? It depends on the video. It depends on the video. Let's say it's a touch come, let's say it's a touch video. It's a swipe on this. So, so, right. So, this let me, this works for, I'm running OSX live. So, clearly to scroll here I swipe as well. I just flick my hand on this thing. Swipe. Swipe versus scroll. People are not flipping. Swipe. Why do you think it is preferred because it comes from something which we are so used to doing. See, instead of flipping like this, you flip a page like this, it gives a similar metaphor but it's actually much better translated. That's what I call reflection of human behavior. See, everybody likes to swipe. I'll just leave it like that for a person. Drive and drop versus double flip. Which would you flip off? One of that page. Drive and drop. Why? I won't ask why. What do you think double flip is faster? Double flip is faster than that. See, this is exactly what I wanted to do with this stuff. So, how many of us actually think you want to double flip as opposed to a drive and drop? I want to see the hands. How many of you think we'll drive and drop and not double flip? What do you have in mind? Drive and drop versus flip. Drive and drop versus speed is much better. Exactly. So, I see the point but why am I believing this is like speaking web in general. Like, you know, so this is where you actually start making decisions. I've come to two other points. So, like, you know, very appropriate because I think what he has called out in the last two answers is what you need to keep in mind. Because web technology is that you drive and drop. Or because certain technology allows you to drive or swipe. That is not the way that you drive. So, you need to evaluate what medium you are and what application are you building. Sometimes even, you know, sometimes I've seen people actually doing shopping cart applications with drive and drop. You can drive icons into a cart by swiping. I for running at a personal level, I would like to just click a button. Just a single click on an icon is actually much better. I actually have a demo which demonstrates what launch is this, right? Yeah, yeah. I don't know how it didn't go. Yeah, never mind. Slow versus patient with the auto scope. In context versus moda showing a dialogue box to tell you something versus showing it in proximity to the control that you're interacting with. Which one is better? Moda? Yes. Moda is always better? Right. Yeah. Again, not understanding the application that we've mentioned already. See, which one is better? I'm asking is just trying to understand what your answers are. How do you interact with this? I know that it is no direct specific application I'm glad but this talk is because I see seven people who do not think like that. See, I have seen a lot of people simply doing live talk because it's possible. That's the reason why I have this stuff. See, if you're actually going to come back and say and take the same stance that, you know, which one is something that we have to do? If we were back there wouldn't be so many bad applications on the internet. If we were all that very intelligent and positive about doing design. So don't fool me on that. We actually don't think that much. That's the reason I am. I'm not teaching anything technical here. I knew the risk of doing that and the contrast like this but I still played with it because I want to get the perspective of what the work teams are doing there. Right? So in context there is useful in certain situations but doing in context everywhere that's not good idea. That's why it is put as verses. Like you need to wave which direction that you want to take when you actually do see for example let's take a when you actually do a model when you want to I have seen several instances where warnings are shown as model dialogues. The day before yesterday I was building an application for a client of mine that I went as a consultant. They were actually showing all their warnings as model dialogues simply saying that that is our architecture. We have with this great interface intelligent system where everything has been extracted away into a pop up and then you start doing it. Right? So verbose versus concise not always right? Consize for like a forgot password icon verbose for instruction but what really happens is somebody follows a verbose pattern they don't even think about it they actually put verbose all across right now for the simplest simple things we actually have yellow colored boxes with a lot of text going in here have you seen that? See it is actually an interaction it's job to actually build an interface which has actually got combinations verbose versus concise descriptions graphic elements sometimes you need a button with just an icon sometimes you need a button with icon and text right? See what what I commonly see is that it is always an icon with text because somebody is going to walk up to you and say that I don't understand what this icon is So where is that balance coming you need to actually see the balance you see the interface applications here interface apps people who actually build background software the internal software and things like that two people I have a question for you sir isn't this a common challenge that you face? yeah because because you as a designer the designer might want to build a combination of infographics and icons and things like that but you have a small real estate to actually convey a lot more information that is the place where you need to actually sit back and think how we are going to do your design in terms of those design aspects and where you are going to be in your concise design aspects sometimes the tooltips are going to be like yeah so tooltips is one way of doing it actually moving up again tooltips are a big problem in touch devices because they don't really have an internet mouse over activity so something to keep in mind instruction versus suggestion shouldn't you like suggestions that we like suggestions but sometimes you have to instruct sometimes you have to suggest are you thinking that way or are you thinking about the suggestion have you been thinking about that way many of us have not been and we actually do a mixture of both we actually instruct at a place where we actually have to suggest and we actually suggest at a place there we need to instruct so that is something you need to think panic versus reactions always reactions when you panic your credit card has failed is panic you cannot get credit card you actually put a panic notion correct you have to say your payment did not go to something important for something like if you complete your password would you panic you wouldn't look like you forgot your password and relation that way right so you talk just about the things there are visual ways of showing panic and visual ways of showing reactions say visual way of showing panic is actually showing an alarm board how do you how do you do reactions how do you how do you react to a person that is actually not doing anything right colors colors are beyond colors are going to be this is not the thing I am talking about the word would you actually do options would you actually bring in relevant contacts that would help them actually overcome problems would you force your face is very helpful no no so panic versus reaction is an interesting interaction design challenge finally in the enterprise applications because enterprise applications have complex workflows and most of the time is what I get back anybody uses something called conquer conquer it is this is that a panic driven website every single error will actually increase severe panic something terribly went wrong this is an error I am actually not right so it fails in the context that the design of the interaction has failed to capture the user in terms of what he really has to do all I know is I have to panic now I really don't know how to fix it so sometimes in situations where you have to absolutely panic panic but most of the situation can be solved by reassuring the user in terms of what he needs to do when he has actually circumvented a real workflow find this on your face works when you are actually setting the most sober advertisement on a web page see for example Adobe tried it and because they have a strong brand name called it's one of both real white and red actually works but if it is subtle and on your face is actually a huge debated interaction design system how do you design a interface would you do dark on light or light on dark how much is the light on dark dark on light majority of the world prefer dark on light so I was part of a project called the Adobe media player a long time ago I was the promotion on dark of dark which I was the designer and the other prefer and we built a light on dark application which of course did not resonate with the people who actually watch videos even though Windows media player is a white on dark application which a lot more people do so color scheming and on building your right on types of building your contents of building a typography you need to have a concept preset you cannot have an application which has got auto-model contrast between subtle and on-the-face you can actually taking a something too on-the-face approach you actually have to create you cannot have two different aspects of the same application you bother your business requirements this is something which you need to consider why you are doing this so don't think that I am going to build a white and again the enterprise white and blue is the color scheme most of the times so it is a very safe option so we want to have said white and blue right like now with Facebook also concept is pretty authorized that white and blue in my principles of grouping anybody know about this this anybody studied this context proximity similarity and common fate are the most common ones applicable now more these are the most common ones applicable to doing interaction proximity is actually grouping things that are similar to each other together by naturally perceives the related actions together but these things right this could be a combination of different actions but then they are put in close proximity they make sense while similarity is grouping similar things together what is between the proximity and similarity is very small very small but a very important difference see proximity a good example of proximity is if I click this and I show a tool bar right next to it which has got everything pertaining to styling this that's an example of proximity see everything that is put together while similarity is a set of similar things like you know it could be a a combination of things which can actually come together and what is common fate common fate is applied in animations like when you actually swipe something when you actually transition from one view to another in an android application the whole ui slides past and a new ui comes in this can be compared to you don't perceive it as one word flying view when you actually see a two-speed approach you'll actually perceive it as a group motion like a fleet the same way if you're actually doing motion you actually need to be careful in terms of how you're perceiving or creating that motion something which flash developers the bad ones made a huge mess out they had general flying elements on speed like because animation was possible things used to randomly fly around I have an example of that so that is a place where you actually sit back and you want to use motion animation you need to think and actually have a common field situation to be able to use it sorry I don't have a screen so I don't know what it is talking about movement has been only in common field situations otherwise movement is typically annoying see generally things bouncing around or jumping around is annoying and the technology which I used to represent earlier the technology called Adobe Flash I used to be a evangelist in the global world because there was completely thoughtless mindless use of animations and movement which then it did not have a real common field something to keep in mind thin line between meaning annoyances transitioning use and skip filter of annoyances the first one means main second one is pure annoyances so again going back to my first point of making a jazzy most of people actually throw animations even today I was actually animation running on a web page before yesterday because it was considered jazzy don't do that bad design and bad technology are bad design and bad engineering are technology masters you can create bad shit with anything so please remember that you are actually doing something you are actually doing something and you are actually creating shit it probably means that you are sort of doing something like ridiculously bad and after you have fixed all that go back and slowly and slowly my transitions are so bad have you actually looked at your backside have you have you reflected when you come out of a quicker bootstrap when you come out of a micro frame and say it's really slow it might be slow but have you evaluated your part of it in terms of have you designed it right have you programmed it right and here is an example of an exhibit A this is an HTML5 application cleaning edge now is this looking terrible because of HTML5 so there HTMLDropper.com go and check it it's actually a brilliant example and the more bigger you should suspect it's a slash it's an example of how you should not go inside isn't it right so I am sort of short in time let me quickly move I have to get how to take questions I have two demos you can find me also I can show them the demos but I can take questions you can take questions I have a question how do you handle desperate customers because when it comes people are very desperate to use your particular service they wouldn't mind they wouldn't really you know care about the design buy and place the button or anything the button won't really mean anything they are not desperate how do you deal with that after he's finished with his work I'll show you that's right because it is people like that who actually completely sanitize and sanitize by design because I'm so desperate you throw shit at me and you shit the point is the moment the user gets more discerning he actually gets really better software the whole business why do you have bad software or bad strategy design is because the user is desperate I ask you to see right example I am desperate I need to go to my buy and place buy and place minding I need to buy a ticket whatever shit they are throwing I'm going to take it so I don't want to handle them I actually want to trade them or ship them any other questions yeah since this I just wanted to ask you and everyone do you think there is a certain thing called good design and they will have you come across like there will be things that you are the designer who will completely understand and people don't take it and maybe it's the purpose of design to be intrinsically understood by everyone but I in my career have you come across something like that did you come across my handling no I haven't any of the other people this question is have you ever come to see a design which you would intrinsically call great design like is that what the question is yes every time you design there are a set of people who agree there are a set of people who are design some people like some people like see it as a common consensus so I don't believe there is 100% consensus I don't believe there is but this is from my experience as a person who was built in classic situations of design looking at that software I've actually built custom customary old fashioned 90s style that software my work was to actually bring them to actually give them a little bit of color I think this I created see nine out of ten designs I actually thought were great I think all my designs are great that's what every design thinks otherwise you don't have to design that but nine out of ten how actually being failures with respect to the person to the samples I collect right but what I realize a specific audience that you're going after no software is extremely democratic like every software has its audience so if your audience doesn't understand the points of the audience you will actually arrive at something which is better than most of the functional ones and still at that 80% that is my dream but if you ask me is there a perfect design that somebody is not a company that's on I am not the policy expert to comment on that so I actually I sign on things in the room I'll be happy if somebody can actually take the question so my unless you build it for a single person there's never going to be 100% theoretically I wouldn't have you yes I have a question or you want to answer yeah we characterize our audience we identify the characters which are our audience and then we recognize the situation the situation is better than most of the everything is there in place but you design you know but eventually and the Personas are always hypothesis yeah see personas are a belief of a person see personas are nothing against personas every development project has a persona allocations but with your experience you have realized that personas are not a hypothesis so in your persona phase the easiest experience is just saying my persona was wrong I think the main of the questions are simple the small world of flipping over here is the impressions it's a tool that I built which is our visual authoring through impressions you can actually go check it's also it's something like you don't write a lot of HTML JavaScript CSS to build impressions okay hang on my next I'm going to show you my coordinates so that's my coordinates I like what has to use is dollar leverage of charge isn't that what you guys use I like that one so beer is my leverage of charge so anybody who wants to hang on virtually that's what I'm on Twitter I have a bunch of projects on Jitha mostly on development standards and another shameless plug before you guys go away after lunch I have a talk over here which is not an opinion talk it's a technical talk I'm trying to cover Canvas and SVT case-to-case and C which you actually go by building if interested please come back here and see you guys have a nice lunch thank you