 gave a very nice summary about how designers can also code and that everyone can design. I am here to talk about developed to design, a guide to emergency design for front-end developers. Basically which says that if you are a front-end developer you can still be trying to give inputs on design and why would a front-end hacker want to give inputs on design or learn about design is probably because if you are trying to develop your site project you want to give a good experience to the user or if you are at lean start-up basically where you want to fail fast iterate and learn. An advantage that front-end hackers have is that we use the product every day either while testing and we know its limitations and it works generally. The end goal is to help the user take the right action on your site so that he makes the most out of what you built. I am here to talk about the how. This session is not going to be about how design needs to be pretty. I want to talk about how you can give the user a better experience. I am Rahul Sias at Rahul Sias on Twitter and Jitub. I work at a discovery platform startup called Unboxed. Design is more than making things pretty I would say although it is a part of it but design is about trying to make the user take the right actions on the web. When I say right action I mean function before fancy graphics. Let us just take an example of our good old call to action button. What are its good features is that you can identify it anywhere on the web page. How do you define that kind of an importance to an element could be either or many of these things like size, contrast, shape or position. If you do not have importance on your web page this is what happens. If everything is bold you have no importance basically. This is a pretty good example of a weak visual hierarchy though you can see the elements pretty clearly. You would not be able to say which is at higher importance than the other. Just by changing the contrast of the elements and the bit of positioning I would say that it creates a pretty stronger visual hierarchy so that you know that from the top you have to go down to the bottom. How would you go about trying to achieve that kind of visual hierarchy is that you should be taking all the elements on your page, rank it by their priorities as to what is important to the user and then you can actually align it with the application and to the user's idea of using the product. That brings me to the next topic which means that general web users nowadays have a pretty decent mental model of how an application should run. Things like how a form needs to be submitted and all those things are pretty familiar. Basically if you are trying to give a better experience to a web user we need to conform to the user's understanding of the web. While I say that what I mean is that let's just say you have a model and an escape should always close the model. I would expect that to happen. I would also expect on enter that the form should always get submitted. I will also expect that on a checkout form if I save an address and if there is something, some error that happened on the page I shouldn't be re-entering that address again. You make a statement that my app is just too complex because I do a lot of complex things so the user experience will be complex but that need not be the case because you want to be able to make it simple so that the onboarding of the user needs to be better and quicker. This is a good example because it clearly shows you the action what the user needs to take on that application. Basically what we are trying to do here is that we are improving the user's mental model so that it becomes a habit to use the application over and over again. Sometimes what we tend to do is that you have a reporting application with a lot of charts looking beautiful. The designer has made it for you and then you suddenly realize if there is no data you have no charts coming up. You have empty placeholders, devs through which the user cannot figure out what to do next basically. Possible actions you would take would be directing the user to do what next he must do so that that data gets filled up. Tumblr has a pretty good example also here because it has a clear message plus it has a clear action what you could do or you could not try that option also. We generally find this use case when the user is entering the app for the first time and he just enters into a fully loaded cockpit style dashboard and the user has no idea what to do next. A better onboarding could make the user actually come back to learn and use the application in its right way. So probably you could use things like a wizard or a setup guide, help, probably even a video. I have seen an example of this type which has a simple picture which says when you put data you get these charts here. That is also I thought was a pretty good way of making them understand what they need to do. So design for feedback would be the user always needs to be able to know what the status of the application currently is and probably at one click. And it is very very important for us to understand that the user will always be looking forward for a feedback and any action should not be without a consequence. There should be a consequence on what you do. So another step further would be to give them appropriate feedback and proximity of feedback. So when I say proximity of feedback you might see a text box which has the error messages very close to it. That is a good way of telling the user that there is an error nearby. So that is a good way. And we have also seen a Gmail if you are adding an attachment which is a very large file and if you send, if you press send it says on the top bar it says uploading your attachments then it changes to your mail is being sent and then it changes to the message is sent successfully. And I also like the way Harish talked about his feedback on the recharging process where it is actually about where the user could actually figure out what state the backend processing was going on. Instead of simply showing a loading bar he has actually maintained a state to show the user a better information. Worst case would be if you don't have time still the loading bar would still make do I feel. So we should always try to reduce that user's experience of latency that once he clicks nothing, if he feels that nothing is happening on the side he will try to probably click more times which is what we don't want. Another important thing I would like to talk is about making, letting users make mistakes so that they can correct so that they can learn how the application works. So in Gmail if you accidentally delete an email you can always undo it, right? But that is not so critical. If it is a very machine critical kind of action let's just say like deleting your repository on Jitav. Jitav shows you this that you need to confirm it before you try to delete that repository. One more thing what I wanted to tell is about these are all standard patterns which you can use to make your application feel better for the user. So if you still think that my app is too complex and that there has been nothing that has been built till now that makes sense for me to work on then you could probably take parts of recent trends to get most of the things right because standards are what users are mostly accustomed to. There is one more psychological concept called gestalt loss. These basically tell you that a user feels a better experience if there is an order and symmetry in the web page. So let's just say why does the save and the cancel button always stay together because they are proximally close to each other which means that you feel that it is part of a group. But mostly most of the things are they are not rules they are just guidelines. So this would be an example of a bad design for a good designer but probably it serves their purpose. You want to stream a movie but now where do you click play? That is not the play button. The free is the play button. They want you to click on the ad more so it has been designed in a way so that the revenue actually increases for the company. I want to leave you with this note on David Karavi by David Karavi. Sorry if you want to read it. Thank you if you have any questions.