Ep 229| Holistic UI & Heuristic evaluation in UI Design with LIVE Case study
16 Jun 2024 · 10 min
Jagadeesh P breaks down heuristic evaluation and UI design principles using real examples from Tesla, Airbnb, and IBM. He covers affordance, feedback, and error prevention, showing how these concepts shape usable products and drive business results.
In the past videos we've been seeing lot of ui, UX and product design concepts. And in this video I'm going to summarize and why it is very vital for a designer to have this whole understanding and what impact is going to give in your whole career. And it is very important in industry the statistics and the interaction designs, principles. Whatever we learned in that last videos, it's going to be concluded here. We learned about affordance, signifier constraints, feedback, mapping, lot of things, right? So in this video you're going to learn something very interesting also how you can evaluate these parameters, how you can make a big difference using this evaluation metrics and then you can take it up for the final product launch. Okay, let's jump in. Last week we saw about what is the entire concept like let's say affordance. We saw about how the product could be afforded. Like let's say if you have a glass, something like that. So this particular handle has been designed in a way in order to afford it, in order to take, take it out. So is that affordance very clear? It is very poorly designed. People will not understand how to interface with the product. Same is applicable for the digital product as well. You can take door handles, pushing, pulling. Affordance needs to be very clear, okay, let it be digital or physical signifier. Whether the arrow mark, whether the navigation, whether the symbol is being communicated correctly or not. So that people will be signified and informed properly about their decision. Feedback. Whatever we are doing and whatever we are getting, it should match. We have to get the feedback. At least if it's wrong, at least if it's right. If the feedback is not there, user goes in frustration. We have recorded a separate video for that constraints. It limits to the possibilities of what a user can do. So that is very, very essential in order to make an error free design for anybody. Particularly in safety critical industries like aerospace, medical, space, everything. Discoverability, whatever functionality you keep, unless that is not discoverable by the user, that is not a point at all. So how you are making that product discoverable, their features and attributes and characteristics is what is called discoverability. So all these things are fine, but end of the day, if you're not able to implement it properly and evaluate it, you will not be able to make a big difference. That's why we are talking about something called user heuristic principles. Okay. Usability heuristic principles by Jacob Nielsen law. So how do you understand this? Don't get scared by this law. Very interesting and very easy. Let me explain you with a case Study so that you can get a clarity visibility of system status. Let's take an example of Tesla website. I hope you can able to see this clearly. Let's say whatever I'm seeing here, like let's say the model 3.1.9. So the information is put here, right? I wanted to understand how much tax gas savings I'm making because of purchasing a electric vehicle. If I'm taking this particular saving gas savings. If I'm going to use it for three years at the live, it is showing the status for me. Let's say if I'm using it for eight years, look, the status is life changing for me. So visibility of the status of the system should be live showable. Sometimes if the graph also populates exactly, you will know how the difference is. Okay, it will happen in real time. Like let's say if you put some other car example. This option is not here. If you put another car, what happens is your entire difference comes in the arrow mark goes. So the visibility of the system when it is clear, people can able to understand more clearer in their aspect. Second is user control and freedom. If you don't have control Z in your ui, what we are operating in the Microsoft Excel or the word file in the ppt, our life entirely goes into a big frustration. We need to have a freedom also to give a control and freedom both in order to get the user attached to it. Sometimes we make mistakes, sometimes we wanted to go too. Two steps back, three steps back. Imagine if control Z and control Y is not there. You will be having a big trouble. So that's why it's very important to have in a website and mobile app. Third is match between system and the real world. An example other I'll take from the website. If you're operating this particular. If you're seeing this card, if I'm pressing this right side, it has to go right, right. Imagine if you are turning the book page in right side. Same like that is also happening here real time. Also people have the experience of turning the page and also in the interface that's happening. This is called match between real world and virtual. So if that is clear, then people will not need a user manual to operate their product in the interface. It's as simple as that. This is another heuristic law. And next is consistency. Have you seen Adobe products? Have you seen Microsoft products? All the option like let's say cut, copy, paste, format, painter, it'll all be same. What happens if it's kept different? People will not recognize it. People will take A lot of time to learn that user curve and they'll go for an easier software order website to learn. It's very important. Second is error prevention. I just started to put something, it shows me this parameter is required. So it's giving me an error prevention methodology so that it can prevent me that okay, this error is prone to happen, please correct it. So there's some kind of a red color highlight indication is happening number only is working. Error prevention and error detection and diagnosis is a part of UX research and UI design. It needs to be evaluated in your parameters itself before it grants to the customer. Okay, very important and interesting. Recognition rather than recall. This is a model X, this is a model thesis. So what happens for the user he'll take a lot of time to understand. Model is if you put visuals, relevant symbols, relevant graphics it becomes so easy for the user to understand this parameter. Okay, this is very, very interesting. Recognition rather than recall is one of my interesting, interesting parameter. Next is flexibility and efficiency of use. The users should be able to use even when they're seeing their website for the first time, even if they're experienced people. So it has to be both way. Like let's say when you take this example, even when you go, there are only few options available. People can see the car, they can see the price they want to order, they can order. If they want to book a demo drive, they can do people who are even 10 years, 12 years old, they can still understand this is a car, this is a price. So it's very clear and very simple. You don't have to get confused with multiple figures and multiple options and multiple flowcharts and all this. This is called flexibility and efficiency of use. So aesthetic and minimal. Obviously the website, what you're seeing is very minimal to the point aesthetic as well. Avoiding unnecessary clutters and misinformation helps user recognize and diagnose error. I think we have discussed this Help and documentation. Any website, when we see it needs to have a kind of a help documentation. Like let's say there's a contact, it needs to be there. If people are not guided properly, not getting the relevant information, they have to get the page to get the information wherever they can. Even if I put a question like this, like let's say if I'm. If I'm asking for a search button, like let's say Tesla energy See energy related items are all coming. So help and documentation is very, very important for a UI designer or interaction designer to keep it. So these are all the real time case Studies of particularly applying this heuristic evaluation. I hope you got a clarity. Let me tell you how it is very important if you are growing your career in UI UX design. If you needed to improve your skill, this is the most most important thing which you need to learn practical application. All these things will come after that. But initially you need to understand why it is very, very important. Let me tell you why it is impacting in the industry a lot. A Forrester research found that every dollar invested in UX design brings a return of $100 in return. Also they said website conversion can go up to 200% high if that UX is designed properly. So PwC report says that 32% of the customer would stop doing business with a brand they love after just one bad experience in their UI UX ESPN landing page. They have changed a little bit information. You know what happened. Their revenues grew up like anything, only a small change in landing page. So people are taking it very, very seriously rather than before. Research by Google indicates It takes about 50 milliseconds for the user to form an opinion about your website or a product or an app. Please be very careful when you put a button or make it affordable. Discoverable, signifiable constraint, feedback, mapping everything makes a big sense. Companies with a strong design foundation outperform companies who are weak with 219 percentage s and p index over the last 10 year period. We need to understand this why it is all happening. We'll take a real time company is what is it has impacted. Okay. Airbnb initially struggled to attract their retain their customers. They invested heavily in UX research particularly. It's a very good case study. As a result, they created professional photography. They made a very intuitive interfaces. They created a lot of user experience factors how user can able to easily identify and recognize. Even I got confused when I started using Airbnb. But now from 1.3 billion, they rose up to 31 billion in 2017. In the seven years at that time, India has not seen much UI UX surge and growth. But now it's very different. But in America it was that time very very high. Bank of America they had a very good banking, but the customer satisfaction was very low. They implemented the user centered design. And what happened? 45 percentage increase in online banking happened. Particularly online banking. IBM, IBM was very inconsistent in following their systems across the different platforms. They designed a system, they created a centralized design system which became a benchmark in the industry. Even I take a lot of case studies from my students from that because that is so useful and referred after that IT has improved 300% return on investment in design thinking. So this is the factor guys. This is why people really implement this thing. Intuit. You can take any case study and keep on going and you will know why. It is very, very important for a designer to understand these factors. If you understand why ui, UX and product design is ultimately important for users interface and experience, and then if you know how to evaluate it even before putting to the customer or the market, you'll make a huge difference in your design. What else you think is important in experience and overall product design? People reading your comment will have an enlightenment. So it's not a video, just you just listen and go take action. If you take something action, you will also reflect on whatever you learned in this video and that sticks to your memory. SA.