 Hi, sorry, I got caught up talking in the hallways. There are some very interesting people here. I do apologize So I Think you know how they say that from each talk you should take one thing away I think with Navjot's talk It kind of relates a little bit to my business model, which is that I get paid by the hour So for a lot of the time you'll see me just sitting back in a chair You know with my eyes closed and I keep telling my managers or my clients I hope none of them are here in the audience today. I see only a couple No, I'm questioning things, you know, that's what I'm doing right there. I'm questioning, right? so It's funny because it kind of flows into this talk as well As a designer you present something to a client you say, okay You know this is what I've been working on for 65 hours, you know at X amount per hour just in case they forget and They look at it and it's there's barely anything there It doesn't look like there's very much work which has gone into it people will often say Is that just is that all you've done? because design is not really Putting things on a product It's often design is often done when you can't remove anything further and I think that's Perhaps part of what you're going to talk about Looking at how to reduce Unnecessary elements, how do you reduce? the experience to its most pure form and that's what I understand so Vic is going to talk about so so Vic There's a number of things one of which is that he runs a very interesting food blog called belly centric he's also one half of Web design company in New Delhi called Mirange and we'd like to thank you for sponsoring the travel Yeah, and so so Vic is here today and we've got another speaker Pratik who's the other half of Mirange who's going to talk tomorrow Last announcement There are t-shirts which you can pick up outside Met our refresh conference t-shirts which you can pick up outside. Oh also. I made a mistake about your badges You should only leave them behind if you don't plan to come back tomorrow You should hang on to them if you plan to come to the party this evening So hang on to them because you'll need them to get into the party, right? Thanks Hello, am I are am I audible? Alright Good afternoon. I am 15 minutes before afternoon so but I think I can say good afternoon right now and Ben and Jo have like set the stage on fire and I'm facing the heat right now Oh, yeah, so thanks for the introduction Rahul and Thanks has geek and the entire team for having this conference I I have this is my second has geek conference and and it has improved tremendously from the last from last time And I think it will get better over time So my talk it's titled overexposed. I guess you guys would have seen my preview video. I I run a web design firm in New Delhi called mirage and As Rahul said we are a small form just two people and I'm sure you can guess which one is me. I am the fat one. Oh, this happens again. Oh, it's right All right, so I'm the fat one out there And Rahul pointed out I love food. I talk I go out for food trips That's something I'm really passionate about so I'm going to get that in I Start with a small story. My mom is a good cook and how many of you guys recognize this dish Biryani, yes, it's a Rice dish very flavorful. I Enjoyed it a lot and my mom served me some biryani and I was having that A tender meat a flavorful rice. Everything was going excellent and suddenly I bit into something that was a bit hard and Awkward taste Filled my mouth like it was just overwhelming. It was bad and I just spit that thing out turned out to be a clove How many of you like the taste of clove in your mouth? There are there going to be some people who like how many don't like it Oops, how many of you have experienced such a thing before maybe with chilies, maybe with cardamom some other spice So it's that that bit That small second of that bad taste and it just ruins the experience. I Complained to my mom. Of course, why shouldn't I I told my mom mom you should not put these things in the biryani and She gets back to me watch out when you're eating That's like that's like your fault I'm like, okay, and if I if I say anything more she'll say go cook your own biryani. No, I can't do that I'll just eat so from here. I'll just come bit into the designers the genius of design Talks about what designers do and I really like this definition. It says they worry about stuff Not in general, but in particular the fine detail of stuff the stuff that we build our lives from They worry about it so that we don't have to and we in this case is obviously the users people who are using the system and I think what makes design great is Is the little things I think that is what makes the design great and I Think there's something wrong there oops Oops, okay, so is the little things Hey, did you notice a difference? Anyone notice a difference right now? Let's let's do that again Now do you notice it? That little thing that's there these are the things that make the difference that this is something that makes the design good to great and and I think Some someone actually solved the problem of spice in a biryani or any food and How many of you have seen something like this? It's called a spice bag Small muslin cloth you put the spices in that put it in the food the flavors are all there But you can remove it before you serve it on the plate So it's that that there's someone who put thought and design something like this which will solve that little problem The food still works though The the goal of the food is to be good to be flavorful to be healthy All that is taken care of but this little problem that occurred to me would not happen if people use this So my talk is primarily on these small hiccups these are subtle things They have some impact, but they are never critical So you can go on with your product you can go on serving a biryani without removing the spices, right? People will enjoy wow excellent food good food, but that little experience that's there so We build tools right? I guess you all will agree we build we build tools on the web or in the physical world and Every tool has two sides So you have one side which is doing the work which is performing the function the other side is What the user interacts with? So if I take the most basic tool a hammer You have the head by part and you have the handle right there the head is Responsible for banging on the nail the handle is supposed to give a comfortable experience to the user while he is at his job right and It's often that The head part or the part that does the job, which is it is a bit intimidating or frightening and Users would not want to be on that end they would because you put your hand in between the hammer and It you'll hurt yourself and if I take a look back at computers Which is a tool which is very close to us all web designers programmers Early computers I am going only to 1940s not before that This is the Howard Mark one These are the input output mechanism. So you would put in a Punch tape Inside for all the input and output and it'll take a huge space a full room right After about 30 years you got something like this. It was quite a micro computer then You'll have switches You'll have switches to give all the input the LEDs to give you output and you have to understand that And you have to be an expert in working with this Then came the PC Monitors keyboard much more comfortable to do that. Do your work put give input take output Then mouse came in GUI Laptops they remove the mouse you have trackpads now The thing is much more portable And finally right now you have something like this Not even the trackpad not even the keyboard it will come when you need it So if you look at these computers they've evolved right they have evolved over time and what is the most striking difference that has happened to them? Anyone would like to share. What is the most striking difference that has happened? Sorry Simple I I I wonder if people will say simpler because I would the first instant I say, oh, they have become smaller Right. They used to take flow space and now they take Only inches they fit in my hand, but I think more importantly They expose file X complexity to the users They have hidden away lots of elements that you don't need and yes, they have become simpler and when we say it's simpler The machines are more sophisticated But when the user is interacting his experience is much more smoother That is the part that has become really really simple for the users so I'm going to talk about a few I'll give I'll start with from here. I'll give out few examples I don't want to cover the entire landscape of Examples that I'm That are overexposed which are the technical implementations you need to learn them you need to understand them You need to be educated or you need to be rather trained in that field to understand and These are little things that we expose in our interface and it cause causes a small hiccup Let me start off with you are this is a small thing that I also said in my previous videos It's the first point of interaction your web app or websites and When you're designing your is or right from the beginning when you are also created They were always meant to be for people right to read and to be able to understand exactly which address we appointed to and I Went to a website called aircell.com. I guess people will be knowing SL it's a mobile Telecom website and it immediately redirected me to something called aircell.com slash aircell war and What is aircell war and if a user comes here? What is this a terrorist website? I might be able to understand maybe a web archive. Okay, but that's not what you want to expose to the user and A news website. Let me make him the stand times.com Probably you can even drop the WWW it's redundant these days you can drop that but more importantly you have something I let me just split it out into different parts So you have in the stand times.com, you know where you are. It's about business news world economy Petroid diesel prices may go up this week Should I just rush out for a can of petrol right now? When when did it happen? So some somewhere the you are who can give out the entire story But if you design it well, it can make a lot more meaning for users and you can probably drop out something That is so syntactic This is a BBC news article and the next few articles will next few links that I show are all pointing to the same news If you look at this you are most likely you will not be able to figure out what the news article is, right? I'm sure no one has any idea of what this new news article is. You can figure out. Okay World news world Asia. So you know where it is But what news is it? So I think the same news article or the at least the same Incident covered in the Hindu They have put in things like today's paper National New Delhi, which makes sense Elabat stampede told 36 So now do people understand what news article this is if I Go in the Hindustan Times case They are also giving India with the Padish Elabat stampede death toll mounts to 36 probe ordered as well That's part of the URL. So you understand a little more about the story and Oops, yep first post comm Has a much more simpler URL. It goes first post India. So you know that the news is in India You have the story, but it still puts in something at the very end That's that does not make any sense to the users and I think this is where The New York Times does it Very well, I'm not saying this is the best solution But I think whenever a news happens. There are two things that I want to know when and where Then did that incident happen and where did it happen? And it answers that if only they won't have that HTML at the end because that is a Technical detail, right? That's what language you're using. You don't need to expose that to the user You're better off hiding the matter way from the users So that's the other part. Let me talk about actions So when you have buttons and you want people to perform tasks and click and you put You put a copy on top of that or the rather a label on top of the button. What will the button do? I went to the air to a website They are all services I use I love to use But then I take a look at the right side. Okay, pay my bills click here click here click here click here The button levels a click here. I mean, I haven't seen a chair that says sit here So there are two things wrong in this one It's unnecessary to say that you need to click a button because the button by definition or by its own look Should have the affordance and you should immediately understand This is something that is clickable But what will happen if I click the other problem over here is you see you're using the word click people use touch devices you might tap and You don't even need to right click or tap because people might still not understand my mom won't understand that honestly speaking Similarly, quote a quote Amanda Bank That is my bank of choice and I find their websites to be perhaps the best Bank Indian Bank website that I have come across. Okay, and yet they have click here securely login Now I am not sure can I stop for a question? Yeah, please to the SL side, right? I Think that the click is actually given their audience which tends to be a lot of older people the airs Clicker, okay. All right, given that their audience tends to be a lot of older people My mom knows what a click is but she looks at a button and she never understands Whether I left click right click should I is it a button or is it just text? So the click actually makes things obvious and I don't really see the issue It's repetitive yes, but maybe for their audience it actually is all right So when you come to design, right? There are always some compromises here Right, you're working with compromises if you take a decision that would be good if you take some other decision that would be bad I think it will be a No design is perfect. I do agree but going forward and if you look at if The design is such that if you look at a button and you can realize that I can perform an action on that Right and what it has to say is what will happen if I do that? touch action or a Tap action on that. So it's something like I want to pay my bill. So if a button says pay my bill would Would a person not understand that what will happen if I touch that thing or really you are you saying that? The person will not be able to realize that if I touch on pay my bill then I'm going to pay my bill Does that happen? Maybe maybe not for that We'll have to look at the expanse of the users look at what they are comfortable with and if we can match up the extremes That obviously everyone in the middle take care of themselves So I believe a better user testing might work if people old people are really using the website And they really think if click is there I'm going to click on that It makes sense, but even if you say click here It's also confusing ten different click hairs. Which one do you click on what happens if I click on that? lots of problems there, so I'll go on with my examples quickly over here So there are also input when you're taking input lots of times. They're very strict You ask the users to give very strict input That's because your entire UI is often built at the mercy of your back end your back end requires that input to be strict So I had to change my Apple ID password once Very recently. I had a very simple password about a year or two back and when I had to change it recently I was I was not happy to see this. I mean you are giving me a huge list of restrictions and Things that I have to follow checklist a long checklist to select my password There could be better ways of doing things like this You want the site to be secured, but this is not the only way to make it happen because now you're asking the users to really understand What is all this what it not contains multiple identical consecutive characters? My mom will go. Oh Really? I was going thank them All right. This is also website. That is very well done. I mean I use them that a lot I They don't take my phone number very well I think it is very natural for people to Create blocks of numbers to memorize. So you'll say 9876 and then you'll give a pause and then go 675321 And if I want to enter the details like this and if you tell me that it's not a valid phone number That's a technical thing that you have exposed to the user and that is not necessary because it isn't rocket science to extract the actual Information or the real data from a reasonable input. It is in rocket science So I think these are the things that we should do Credit card numbers So again, they'll not take spaces and this is far worse because every credit card has blocks of numbers So my when my mom goes on to enter this credit card numbers She goes tap tap tap and there's a space She puts a space and everything she does everything and then it will take oh enter a 16 or a 20 digit numeric value So the some people have tried to solve this in a different way They've said that if I if a person pays press a space I'll hack I'll put a JavaScript hack and I'll not let the space appear at all. So you'll go 4 7 3 space Okay, the space is not coming Right because you want to be very strict with what input you're getting and I think these things This is bad too So this is where they don't allow spaces to come in at all error messages I think we leave out error messages a lot. I when we are designing Error cases is something that we have to design for and what message should go out to people what tone it isn't What is it trying to explain those things have to be careful? This is one of the best designs website in my opinion in India But this is this little thing your username is a required field is too technical for my taste or I think even elder people a simple thing that we need your username or Please provide the username your name, please is something that I would really like to see these the tone changing a lot My payment failed and flip card reported you're sorry a payment has failed because 3d authentication failed Why are you doing a 3d authentication on my whatever it might be? But of course I being a technically capable. I mean being a designer myself I understand what this is what this exactly means, but this is not meant to go out to the users. I believe And apart from all those copy problems there are general things that happen So tell that we designed the website recently They put a big banner on the top. We have migrated To this beta version To this beta version of our new website for all archive stories visit this a link I think a simple thing that we have a new look if you prefer the old one we have it to Very something that how you'll say to a normal person and a Different point that why does it even need to be there? Does it need to be there? Maybe it does maybe it's a conscious decision to put this but a person has come here to read a news article Probably something like this is not required. Maybe it is again a design decision Again coming back to the ASL website first time you open it, please choose your circle Anyone has come down to India for the first time. Do you know what circle you belong to? You don't oh my god Oh, I think you should put down your Google hangout circle or something over here So an interesting me the same website has done it's much better in my opinion You are in a drop-down that says Delhi or any other city you are in which city which state give a drop-down of that Again little things and often there are solutions that Take the problem and pass it on to the users so well and this is like No, everyone hates this website, but what they have recently done is So you have you have to select a gold category of a payment gateway Which has a success rate greater than 80% or something So why can't Why why when you're designing why can't you take a decision for the user and why does he even have to select from multiple gateways? Because what he really wants to do is pay I want to pay you select whichever gateway you want to send me to just send there I'll put it in my credit card details So you say I think you're saying if you give your sorry You can repeat if you actually give your email somebody else's email ID in the registration form Okay, that you get it will show the actual use idea of the person who has that email ID Right and one more typical problem that I see and one more service that is going out in India a lot a tax wife filing again, this is Something it pinches a bit The government has laid down a set of compliances You have different forms for different kind of people different kind of income group or different organizations How do you want to how you should be filing your taxes? That's a paper form that they had designed but on the web you should be able to take up the advantages that you have on the web Perhaps definitely not the case in which you take the paper form and give the exact same form over here online So a section 80c section 80 triple C. What is it section 80 CCD? Oh CCD All these things so these are technical details that the government has laid down you can make it much more friendlier Where you're doing it probably for half? personas How will a person who is just drawing salary how will he file his taxes and just make it for that flow? Because what you really need is a strict output at the end what you have to give to the government You don't have to take the input exactly in the same manner So what do you really need is I think? empathy and Not be complacent about these things It is important to step into the user shoes But I don't think it's easy The reason it's not easy is because we are too competent So there is something known as the stages of competence and it relates to the cycle Psychological states involved in the process of Progressing from incompetence to competence in a skill. So if you are learning a new skill What are the stages that you pass from and the first stage is unconscious Incompetence and this is the time when you know very little about how little you know Make sense, you know very little about how little you know and Once you pass that state you go into a state of what is called as conscious Incompetence, which is when you realize how you little you know you realize that I know very little Right and when you realize that you start learning and when you start learning You slowly reach a stage of conscious Competence that is when you have to consciously acquire the skill and you have to consciously apply your skills and Beyond that once you have practiced enough you become in a stage, which is unconscious Competence which is where you don't have to consciously think through while applying your skills if I have to give an example Let's say driving as an example when you're a little kid You don't know what is driving you'd know very little about what you don't know, right? You don't know that you don't know how to drive a car. So you think you have to sit in the car and the car will just go That's what you think as a kid Slowly you learn that okay. There's something known as driving. I have to learn how to drive a car My dad drives a car my uncle drives a car Once you are trained in that the first thing you do is okay. I'm going to sit in the car Okay, what is the thing that I have to do? Oh neutral. Let me check the neutral, right? Let me start the car Let me put oh I have to press the clutch before I can change the gear So you think through all the actions that you're doing and you consciously apply those actions, but Years down the line when you've practiced enough you sit in the car. You just go zoom You don't even know what you're doing You don't know whether you've turned on the car because it happens automatically you see a cat coming in front of The car and you press the brake immediately, right? No one thinks that I am going to press the Brake when something comes in front of the car it happens automatically and that is the stage of unconscious Competence and I think that we as creators and designers are Have are unconsciously competent at what we do We just know what to do and we just do it and we just apply our skills straight away Which is where? We are experts at designing and but we are also experts as users and as a result If it I I firmly believe that if you don't decide this little things if you don't explicitly think about these little things then somewhere down the line these this these decisions will happen implicitly unconsciously and These things will be exposed to the user, right? So you have to explicitly take a decision that okay The URL is something that I have to worry about when I'm giving an output This is something I have to worry about otherwise it will happen implicitly and you'll just give out Things that you understand that your users users won't and I Think implementation should follow interface Many a times clients come to us. Oh, we have the entire back-end ready. I just want the interface Whereas I think that it should be the other way round you have the interface and you drive the back-end to Make the interface functional The interface should not be at the mercy of back-end the back-end should be at the mercy of the front-end I guess that is how I'll put it and similarly When you're taking any business decision, you should keep in mind the behavior of the users, right? You take you don't try to bend those behaviors. These are natural tendencies of how people work How people understand how afraid they might get if you put in a if you put in something that is scary for them Finally Your users are here on your Product to achieve a goal and they have come over here because they think that your product can help them achieve that goal So that is why I think it is extremely important for us to align with the user goals and I think Frank Chimera put it very well people ignore design that ignores people and I Think the web is our amazing platform. It's it has given us lots of capabilities and Whenever we are designing on the web Which is reaching out to thousands and millions billions of users? I think at every design step at every Point when we are when we have to take a decision. We should ask ourselves this question am I of over exposing these implementation details that should not go out to the users and I I just hope that people will take This will be a Principle that you will take along while you're doing your design decisions You're making your design decisions and you'll just stick by it Thank you. So questions So I like your idea about people We being experts of you as users as well making some decisions difficult, but In a sense what I would like to ask is is there something called Backward compatibility in design like take for example You you might say Mac has a great design, but coming from the background that I come from If you give me a Mac, I slightly get confused because it's not natural My my natural tendencies have actually changed over the period because of using some technology So isn't there a sort of backward compatibility as well when you are thinking about design? Look, I think when you're taking design decisions There are certain set principles and certain set goals that you can always fall back to Because those are the things that will most likely be true Everything else is an unknown. You don't know what you don't know So if you have a set of principles and values and you just live by those things Simple things like how will I show an error message? How will I take input? How will a person naturally go and work with a system if you just stick by those principles? It even if it's something that is new to a user It is more important for the product to be learnable Automatically a person should become should be able to pick up a smartphone and start using it rather than someone have to Go to a tour lecture pay $500 take a training and start using that so that is where I think you have to draw a balance and It's not really about backward Compatibility right there, but it's it's not about making all interface looks the same and work the same so that if a person comes from some other If if you're using windows and you come to Mac then it has to work exactly the same manner But the interface has to have these simple qualities that it's learnable very easily self. You can easily self teach yourself Hi Yeah, where are you? Here In your talk you stressed up on the the formation of URLs, right? You said that you have to spend a little time so that you can Put out what the content you want to in that you are itself So I do believe that no we should expose the URLs in a semantic way so that a lot of APIs can access But it doesn't make any real sense for the user like most of the URLs that shared upon the web They'll have the URL shortness for example if I want to check any article either on the Twitter and the Facebook Everyone uses the short form. So there is no real sense to do it that way, right? I think that is I Think these shortened URLs in a way of breaking Things over here because it was never meant to work like this It was meant to always link to the right URL and when you read the URL You should be able to understand because end of the day URL you could have done with an IP address instead of putting a domain name, right? It the reason something like that came in the reason you are naming a file instead of calling it by its file ID on the on your file system, right is So that people are able to read it and it is more and more important these days to Write your code or design things so that if someone else comes in Like you go away from the system and someone has some other developer comes in He looks at the real URL and is able to make sense about what action will that API perform So it's about explaining to people rather than just making it work for the system That's what you're targeting for the developers, but not the end users, right? No, so in case you are doing an API URL that is targeting to the developers Yeah, I mean actually you make sure that it's either in the semantic way or it follows the rest architecture So you don't have to lose so it's not give and take you don't have to lose on semantics to make it Friendly for a user. I I don't think that if you want to go semantics. It becomes unfriendly for a user Got it. Thanks One quick announcement before we continue with the questions Will if you'd like to take a break, could you do it now? We'll continue with the questions for another five or six minutes But let's start the next talk sharp at 12 30. So if you come back by 12 30 that would be great So can I continue with my question? Yeah, hi. Yeah, hi. So it thanks for the interesting presentation I'm glad that there is someone who Know who discussed the error messages because in India people don't take content seriously Sorry Yeah, so as I said in India people don't take content seriously So do you think it's time like the design teams should hire a copywriter? If their budget permits and you know focus on micro copies because most of that they don't even I know Give much importance to micro copies which creates a lot of confusion and you know and makes the experience complex I think we are already past time when we should have a copywriter Copywriter is really important and if you look at most of these examples, it's a problem with the copy right and As designers ourselves we even we feel that there's a limitation There's something that is holding us back from writing and expressing ourselves Exactly in the way in which people will understand it Which is where I think copywriters are Extremely extremely important the faster you can have them and we tend to design our websites and The work that we do are for our clients. We do it content out So we take the content first before we start designing we try to take Make error messages before we decide where the error message goes in and things like that. So copywriter. Yes very Important and of course what you're saying is right I have a question about the URLs that you mentioned in the beginning of the talk So when you design you are the two things that you need to work on one is make the URL readable Okay, and make the URL permanent absolutely, okay So many of the things that you considered you mentioned that some of the parts are not Important you can remove them. Okay, for example, it has articles dash one two three four dot html something So if you see some of those URLs that ID number is actually very useful to make the URL permanent for example Some of the techniques that are used are you add an ID to the URL so that if you find it typo in the Message or the part of the URL you can fix that so that it gets direct to the right page. So I guess Sometimes even though some parts are not really adding a value to the readability might actually You're saying if I'm right you're saying that that's a necessary you will yeah So I think when you're designing URLs These two are the absolute goals it should be readable and they should be permanent no questions about that But how do you go on to achieve these goals? Can make a difference so as an example? There is always a reasonable decision Which will most likely work for all cases for example these news articles if they have put the date component It not only makes sense to the users, but it could in a way also make it permanent because Most likely there will not be two articles on a news site or a newspaper on the same date at the same place happening, right? Which is where it can remain permanent as well human readable as well and it works Now that's a design decision. Do you want to insert this number or whatever your internal ID is or not? There are pros and cons. There are things that can happen better if you put a number There are things that I can happen better if you don't put a number But I would first lean towards making it work for a user rather than making it easier for developers to handle these I'm not talking about edge cases the thing is Sometimes there's a need for changing the URL because you find a mistake in the typo in the thing that I put in etc. Okay, so So you're losing the so if you're if you're if there's a need for change in the URL Anyways, they're not permanent right? You're broken the first law But if you have an ID then it's very easy to redirect back. You can redirect back. Yes for sure But it's still not permanent, right? You're and if you want to redirect back You can still redirect back a typo. I agree. So you're saying that's a leaking of the technology Should I take these offline?