 All right. Take it away. Can you hear me, guys? My voice clear, Ben? Perfect. Let's start, guys. So my name is Vinit Elwar. So first of all, thank you so much for this opportunity to learn WordPress team. I'm happy to share my knowledge with you guys. I'm going to begin my slides now. So let me share my screen and then we can begin. Screen two, share. All right. I am going to start from the beginning. Do you see my screen? Yes. Okay. So first of all, guys, let us begin. So today's workshop is about website auditing and conversion optimization. See, your brand success is not measured by the amount of money the company has already made. It is measured by how much more money the company will make this year. Okay. How many new user correction, new paying users you will get this year. And today I will take you to the journey of how to audit a website effectively and be the conversion hero. Hi, my name is Vinit Elwar and I have been working with various industry brands so far helping them fix their tech. So you can call me a brand consultant and two times founders build the companies from scratch. So I know in numerous ways how not a brand can be succeeded. So how not to fail as Thomas Edison said, I know a thousand ways how not to, how both cannot be made. So I know in numerous ways how brand will not succeed. I'm associated with WordPress since 2012. So yeah, this is about me. Now let's get to know you guys. I would like to ask how many of you guys are developers here. Maybe can you write some messages in the comment. So just I get to know how many of you are developers here. Just say I'm developer or I'm an AC or I'm a server people. Okay, Andrew Khan. I assume that plus means you're a developer. I would like to make this interactive guys. So just, yeah, affiliate and successful. Okay, any more. Then can you help me get answers also developer. Okay. I will wait one more. People can type I'm a developer or you can even use the emoji reaction since zoom. Yes, that will also work. So couple of messages was about developers. So let us begin I think. Okay, I've been having multiple websites. Okay, and developer. Okay. So let us begin. I will take it to the next slide. So first of all, thank you learn dot WordPress or G team for organizing this meetup workshop. This is basically a great way to share knowledge with you guys. I mean, if you like this format, really do give a shout out to the organizers with using this hashtag learn WP on X or Twitter. And I think this is something like automatic slides being turned on one sec. I don't know why. Okay, so I would like to tell you one more thing. This is a two part presentation in first part we will be going through some concepts and in the second part we will be seeing some examples. This is an online format. I may not know how many of you are actually. Do you know Ben how to turn off this automated slideshow. Are you. They are automatically going away before I'm even able to finish. Are you using Google slide to using something else. I'm using PowerPoint. PowerPoint. They are turning on automatically. There should be a sitting in the slide presentation setting or something. Something like that but never mind I can maybe go quickly or come back so sorry for this inconvenience. So first of all, this is an online format so I may not know how many of you are getting it or not so basically I would like you guys to have fun. And of course, a lot of memes you will see. If I need something maybe just type it in the question so let's start with this slide I know this is coming again and again. So this is a typical slide website where it looks like in 2022. So, you know, you come to a website you figure out how to decline all the essential cookies you close the support widget, asking if it need health, or you stop that auto playing annoying video in the background and you're like, Oh my God, where where did I land into. I think this subscriber pop up comes in. And guess what, and then you try to remember why did I came here as a first place. Well as a developer our job is to give user experiences, but definitely not this. And this is my face in the end, when I see there. Okay, so let's go to the next one. Let's talk about buttons. Amazing creatures, you know, there are three types of people, some who pressed them once and just wait. And there are some one who just don't press and they're like, Yeah, let it pass. And there are some people who passed them hundreds of times like this increase of frequency of pushing these buttons is directly proportional to users level of frustration. Right. And you shouldn't definitely do like this like Will Ferrell from the movie else, you know, because by doing so you're making a lot of people angry. See people don't have patience at all. They have a better time to interactive than this. See, interactive impacts rage clicks so you're not giving people websites you're giving them experiences where they can do stuff. Anything user expects experiences to be interactive in about 1.3 times the point when they are visually ready, if not rage clicks happens. So this is some example from Google that okay if the loading time increases, you know, it affects that. It affects the bounce rate and users just leave your website at bad website has a measurable business impact. Don't let your users wait. They don't have time. Nobody has time in this whole word. Right. So, okay, so I found these two tweets which are really nice and I'm like, Okay, let me explain. So Marcus Brownie, you know, this guy MKBHD who makes a lot of videos. So we posted the similar experiences on Google and John made a again made a reply and they're like, you know what, this is the kind of things you shouldn't have. So basically, what I wanted to say is Google loves user experience and SEO is definitely not a black magic. Some this autoplay some aspects of SEO is relevant and high quality content content accessible to search engines and good SEO signals, such as core web vitals life under this last category. See, a website is not done. Right. If you thought your website is that no it's never done. Most businesses simply ignore the part of maintaining and continuously improving their website. But how, how do I fix my website. Let us talk about different measures. What do we need. There are certain measures that make your website amazing lawless average or even burst. Right. So what do we need to do work on a website. So they have five pillars of website auditing. We will not talk about all of them in the details in this presentation, we will skim through the first four, however, UX is our focus so we will take focus more on UX side. So if I'm not covering all of them, don't be angry, maybe we can cover up in the future sessions. So let's start with simple security. Okay, we guys have heard. Yeah, yeah, yeah, everything has to be secure. So people have misconception that a wordpress is insecure. I know a lot of people might be and not be happy by reading this but guess what, this is untrue wordpress comes as a package for you to get started and work on that and wordpress is not responsible. How you plan to manage and handle and secure your website. If a car is met with an accident. It's not the fault of the car is the fault of the driver. And guess what you as a developer is the weakest link here. Okay, are you secure. So these are the things I want to talk about. So there are things like security headers. Yes, there are some awesome. These are the some awesome resources actually, you guys should make a note or actually start using it. And installing an SSL is not the only thing you should do. Of course SSL is a must. But what if your SSL is installed correctly. You can check it on various sites and like observatory.mozilla it can tell you or there are also other sites which tells you if your SSL is correctly installed or not. Let me tell you a story. One time I met a cybersecurity company couple of years back. They didn't even have a security headers installed. I mean, seriously, that's the biggest irony. Previously I used to recommend WP scan, but I will not recommend because that has a jetpack product in it and now there's recommending jetpack products. So that's got from the list and I would recommend WPSEC for this thing. So these are the tools I would recommend you guys can use basically to improve the security of your website. And another thing I want to say, if you're using a premium plugin always always buy the plugin and support the devs and do. Don't buy from site. So support the devs. Just buy just don't buy from the site which is saying that oh yeah you get the plugin from the discount. No always buy from the official website. There is not an excuse not to upgrade to even latest minor version. Always keep everything up to date. Even your WordPress, all the plugins. Keep your website audited. Keep the code secure. Don't have any null code and stuff like that. You can also leverage AWS firewall or they are also offering a bad firewall so you can give it a try or you can use any security plugin. Next topic is security. There is no excuse to have a bad performance on your website. It's going so fast. You can check out my previous talks on WordPress or TV about performance. I'll be covering covering some information here. So, still loading. I was 19 when I clicked this link. You know that kind of thing you should not give users experience to. Let's talk about game of. And you're like what is, you know, whenever a telemarketing guy calls me and I'm like, he's asking so many questions and I'm like, what are you talking. I do you mean an Indian the guy gets so frustrated that he even closed that call. And you know normally that's opposite way around the telemarketing guy are getting you frustrated. See, a bad speed on your website will have less downloads less donations or even your sales or any conversions speed is a ranking factor on search engines nowadays. So we should not forget. And guess what, Google wants you to speed up and code web vital is one of their metric they are using. I think they started in 2020. It became in power. I'm not sure about the exact timeline but something like that. See code web vital focuses on three aspects for a website. One loading the LCP, which is basically how quickly the page is loading. Interactivity, which is how soon you can interact with the web page stability which is CLS how stable your web pages as it is loading and as the user is interacting with code by the metrics are combined with other signals for search, which are also called as page experience ranking factors, basically which are HTTPS safe browsing mobile first and no inclusive interstitials. And it's going fast again, very good. And I'm not finished yet. So I suggest you take a look at my previous talk, and you will get the idea. Sorry, Ben, you're saying something. Yeah, I just found how to turn off that or that automatic switch on the Microsoft slides. Okay, can you help me? Yeah, I just dropped the message in the zoom chat. Does that help? I'm going to click on the slideshow tab. Okay, maybe then I have to start from this slide. Guys, sorry for this inconvenience. I'm trying to figure out also. Click on the slideshow tab setup slideshow. And select manually. Okay, slideshow monitor. Okay, and okay. And I hope it works. Let us give it a try one more time. Yeah, it was really annoying. I did not know about the setting. Thank you so much. Okay, so let's go to the next one. Performance. Yeah, this is my face whenever I'm waiting for a slow website to load. There are some tools which you can actually use to find out how fast your website is. So tools are being doing page speed insights and so on and so forth. You can give it a try and it's also in building your Google Chrome tools. Guess what? You should not make you, you should make users happy, not lighthouse happy. Perfect 100 is awesome. But are your users really getting what they really need? See these tests provide single numbers. However, real time situation is quite different. You need to have a look at that. These are just metrics. Okay, important. Sure. But is your website UX compliant? That's also another the key. So next topic accessibility. I think that didn't work then it automatically moved ahead. So, but never mind. All right. Never mind accessibility. Okay, I will try to come back on that slide whenever I have to say something. So accessibility. Let's talk about accessibility. I will not focus much on accessibility. As I said, the first topics I will not focus much, maybe for future presentations, but these are some nice resources. I can definitely recommend in lighthouse test. It's there and having a text make improves it and these are some WordPress good best practices provided by WordPress accessibility team. Give it a try. And this is a 111 project. Also giving you checklists. Give it a try. You keep choosing that. So, see, I like these names to explain it. So you will see it all the time and you'll be like, oh, this guy woke me up in this morning or afternoon or whatever just to show me names. Yeah, sure. All right. Next topic SEO. So is your site reachable in Google and how what I wanted to say is, oh, God, and how good your presence is. And this is how SEO is done. Go to Google and say, give your give your greetings to Google. No, that's not. It's a joke. Of course, use any website crawler. So what I would like to do, there are a lot of things you can do to improve your SEO. So first of all, there are a couple of tools that can help you improve. So first thing for us to check on web dev measure, how that is suggesting your SEO compliant or not use SEO plugin, because these SEO plugins help you have that perfect meta text or perfect meta description. Of course, not perfect. You need to write some text there, but it will help you handle stuff. Make sure you don't have much for a force or Intel linkings, or in your back links and these are not much for a force. If there's external links, you're opening them in new tab and not crawler is not exiting. So these are the way you can send them other links. And then you can use to like screaming frog, which will do what which will just crawl your website, validate your internal linking validation capacities and will enable you increase traffic and sales also helping you improve your pages. And thus improving your sales and conversions right. If you crawl your website and you found that okay there are some opportunities to increase your website traffic, you can just improve it there by using these tools. Okay, our important topic is here. So what is basically UI and UX. Are they same or are they different. Most of the time users are confused with the same. In reality, they are not saying to explain UI and UX and single slide. This is it. And to in the language we speak UI and UX on this. Okay, see a user interface is like a joke. If you must explain it. It's not that good. So next one, but realities, most of the time your user experience is this. So whatever your design is designing. It's not always the case. So let me correct it here. So serious. It's not the design at fault. It's UI without any research is at fault. Did you consider all the use cases for your user. Did you even test it as a customer, or maybe. Maybe you will find this path, you know, so user is always reacting different way than whatever your UI designer is preparing. So a testing testing testing and improving is always the key to improve. See, UX and psychology are match made in heaven, right, they are correlated, always think as a user, you know what, talk to your real users before building something do random black box testing with some potential users. You know a neighbor who is a friend, you know, just show them your website show them your path show that okay this is what you're built. Maybe let them test it and you know what give it a try. How that user is reacting to your, your website, and then get an idea so a black box testing is really really important. There are other stuff like hot jar and AB test also I would suggest another thing is conducting a research running workshops with key stakeholders. So if you're out for your company and analyzing the data, and guess what Indian test test and test. Guys, if you like any part of this presentation, and if you real. So you feel free to tweet it, you can use learn WP hashtag you can tag me there. And if you like something, just share it on social media. I'm happy to see that. Let's go next slide. Most of the time developers thought they are making an amazing UI. Okay, whatever the designer gave they made an amazing you but in reality, these are your users. Let that sink in. Okay, so they are different permutation combinations that you need to consider how your users will act in such a way. But guess what, you need to plan it out. This is the key. A website, no matter how fast it is, it is not usable. If it is not usable for users. It is not worth it. You need to plan out certain stuff like number of traffic you're expecting. What you expect people to do on your website. Are you offering everything that you your user is actually looking for. Are you users living without doing anything test your website in another browser just like you test and just like you open, you know, any website on incognito mode just to check to test your website there and give it an idea. And also, don't forget your mobile users, like what they are expected to do, and focus on your user retention test and you and as I said test test test the key to succeed. You can also give it a test that you can leverage. So there are tools like Google is using Google optimize and there are other third party providers also. You can also give it a try like hot jar test hot jar is an amazing test. You know, just like you watch movie at Netflix you can watch your how people are reacting, and you can watch those videos, even having a popcorn. This is a nice exercise for your UI team and your developer give it a try. This will help you find out where your loopholes are and you can take action accordingly. And of course analytics is also the key. So most of the time your clients do not understand what they really want. So this is this is the site perfectly explains how your clients are thinking. So clients really don't know what they want you have to, you know, show them tell them like what they actually want. So another important slide I have, but I would like to take a water break. Give me a second. Guys, if there are any questions, please post them in the chat. Happy to take them in the end. Somebody suggested if the auto scroll doesn't stop, maybe you could just share your speaker deck link and then you'll be able to control the speed and just an idea. Yeah, I mean you shared it already right. Yeah, yeah, but like if you if you want to show the speaker deck on your screen. Okay, okay, that sounds good also one sec. That sounds good. Let me give it a try. Yes, because it is actually blocking me I mean this automatically stuff is blocking me. You are right. So there you go. We are at slide. Okay, okay, okay. Yeah, one sec. Okay, that's a good idea. So, so, so, so, I mean we tested everything but we didn't test this thing as I said, combinations and combinations. This is the permutation combination we invented and got chance to test. Okay. One sec. Okay. Yes. So, do you see the screen guys. I mean it's running perfectly right. So this is the speaker deck. Cool, cool, cool. Okay, so UX is all about where you are what your motivations are what your experiences and what your interactivity is and how you feel. So, this is a perfect example that I would like to show you guys. So this is how your UX sees it. And this is how your client is expecting it and what they are sees but your creatives are like this. So this is a perfect website I would like to suggest they are covering a lot of use cases and guess what none of the links that I'm sharing in the slides are sponsored not so I'm not sponsored or affiliated by anything. So these are the things that I actually use in my daily life or maintaining all the websites. So growth design case studies are covering a lot of examples to give them a try. So, okay, so next slide. Why came out good. So UX design is a bridge between your users and your business, right, but user experience. Okay, so what I would like to say your better user experience make more happy users design fundamentals should be followed by every website maybe there should be a design standard that you guys need to have for your website. So one one more thing I would like to say somebody was telling me that UX design is easy. That's not. So, actually, that's not the case right all. So, then that guy said all you need to do is make things obvious for every day. But guess what, these are your everyday people. Obvious things will never kind of work. Like, I'm going to cover some examples in the second part of this presentation where you will get the idea, like, like what kind of audience you have in your day to day life. Okay, speaking of speaking of masks. Similar to this, we can't expect our users to react in certain ways. So guys, UX design is what UX design is is a sequential process. So the first part is research, basically understanding your users, interviewing them, getting the ideas, finding your personas like as personas, I don't know a lot of people know it but you're like putting on a mark like what kind of your typical user looks like. Okay, my user is an 18 to 28 year old, or it's a student or a working professional and stuff like that. So, first of all, find out your user personas and based on that design your use cases or website accordingly. Okay, have like a proper journey maps like what is a user journey looking like for you. Right. And also, don't forget to do brainstorming. Find out your user flows have like a proper wireframes. And then next step, implement your UI prototypes. So you see, before implementation, these are two steps involved big steps, your research for brainstorming, then comes the implementation part basically the UI prototyping front end and back end. And the last step is reporting basically usability reporting, black box testing, split testing, ab test, hot jar analytics, reporting. And guess what, when you find some problems in the last step, all you have to do is repeat accordingly. Okay, you found some problem. Okay, go back to step two, then step three, then step four. Okay, found another one, step two, three, three, four. So as I see, this is a sequential process. Okay. So let's go to the next slide. Decoding us. This is much so far my favorite slide, I would say, I would like to say, a company should consider a permanent role for a UX designer or a UX researcher, which helps you design your better UX, of course, they have the UI designer, but they should have a UX designer or UX researcher. Here's my suggestion. You should, every company should always do black box testing, as I said, a black box testing gives you the trailer of the film that you're about to release for the audience, right. This picture presents similar sort of stories for their these are the two users. So the first sort of user is your parents, parents see that oh my kid is happy we should give them the toy but this is the view of your kid. Right. So it doesn't mean one UX for one user is better for another one, right. So you should, as I said, we interview your potential users, focus on your messaging, how clear your messaging is. You know, sometimes when I land on some websites and I'm like, I always ask my question. Okay, fine, you do this you do that but what is that you actually do. I don't really get it. You know, the lot of text, a lot of heavy videos and stuff like that. And that is also not good. Your messaging should be clear. Your content flow should be clear. There should be definite purpose for each page. Right. As I said, analyze, identify the trends test test and test. And that's how you will succeed in the UX. I think I repeat the next slide but I'm going to skip to the next one. So, okay, so let's start with the examples before that I would like to know is there any question or anything I need to take attention then. Not that I, nothing's coming to zoom chat but if anybody has a question. This would be a great place to ask. And you can unmute and ask a question right now if you want or you can drop in the chat. Yep. I see two misses. Okay. So guess what. Okay, let's go next. So examples I would like to talk about now this is very important. Are you ready. Let's have some fun. Okay, I would like to see some sort of messaging here. So, here you go. My favorite example is from the country where I'm living in by the way, I'm living in Germany right now. And can anybody guess what kind of website. I'm going to talk about is Deutsche Bahn, the train company of Frank from Germany. Does that hurt that black on red. Does that hurt. Yes, yes, yes. That's hurting my eye. I mean, seriously, you're designing a bond card, you have a black on red. Okay, let's see some use cases. So, as a user when I came here, I hit on that login button. Okay, you see the domain here it's bond.e. Now. I'm not habituated of doing it. Sorry, guys. Okay. Okay. Now the new domain here is far carton dot bond. Okay, this is fine. I want to book tickets. So I clicked on tickets kauffin. Another domain. Okay, why. Okay, I'm like, that's fine. Not my problem. I want to click on the homepage. I want to go back on the homepage. I don't know. I'm even logged in or not. So I guess what I click on the login. I click on the homepage and guess what I see the login again. I just did log in few seconds before. So this is not the kind of UX you should give you guys. So don't be dodge one. This example. Okay, I'm going to talk about is Facebook. Now you guys will be like what's wrong with Facebook. It's an amazing website. I use it all the time blah blah blah. Can somebody tell me what can be improved on this page. It's a general UX question. I would like to see the question. Guys, can somebody tell me what can be improved on this page. Anyone. I can give you half a minute. Anyone guys. Yes, no, anything. Okay, it doesn't seem like. Okay. It's the phone. Yes, the phone. It's not intuitive actually. So as a user I went there I started typing my email. I'm like, what did I'm typing in. Is it an email or is it a username. Okay, then I have to delete it again and come back there. Confused. Let me show the next example. Wikipedia and now you guys be like what is wrong with this guy. What's wrong with Wikipedia now see as a user now you see it's duplicate username enter your username. Okay, also not good but you know what what's a perfect use case example here. Can anybody guess your favorite Twitter. So in Twitter when you start typing your email address this for the phone email username place order goes on top. So it's a floating labor at any point whenever I'm typing. I know what's going to happen or what am I typing it here was the phone number email username so it's there giving all of the options so it's always visible to you. Right. So it's not duplicate not like Facebook. Okay, next example. Thank you to the next example. So this is a Spanish example. So you guys must have seen La Casa de Papel or as we call it money I stand on Netflix. I'm sure you must have heard of it I'm guessing. So I was once curious like how the Bank of Spain website actually looking like. So I came here I'm like okay this website uses cookies for better running display and collection I'm like okay fine. I may not want to have those cookies. So what I did was I clicked on configure. Okay. See what came next. I'm like, okay, but I wanted to configure I don't want to a lot of these steps. I'm like, you know what I would just simply close this website. It has to be just that it's very simple. That's no close. Why make it so complicated. Okay, let's take you to another example. So this time I'm going to use an Austrian example I was looking at banks website. And you know what what's hurting on my eyes on this page is this aggressive red color. So it's so aggressively read that the white text or the navigation is not even clear. There is a thing called as guys it's called brand color philosophy. Keep in mind take a look and always always design your brand color accordingly how you frame your brand as a bank it doesn't suit to have such aggressive red color. Maybe brands like Red Bull or stuff like that you know we're showing that aggression energy. Okay, maybe but again red color for bang doesn't always. Okay, they're branding sure, but this is not good UX in my opinion. Okay, let's see the next one. So next one on my list is so since we're talking about Austria. I want to take a look at the university so University of the Vienna. Let's look at this website can somebody tell me what's wrong with this page, just type in here in the chat, so that I'm able to answer anyone. Guys I want to make it interactive would be great if you can tell me what do you see what's wrong with this. Anyone. No one. Oh, you guys make me sad. So what's wrong with this website is the navigation. Where's all info. Okay, in a way it's so what I wanted to say it's the navigation. So why navigation because it's so small it's not here, and what they're doing is they're having a section to make it clear. Right. So it's not here what I what I'm about to do here. Navigation your navigation is your key area where your users land to your websites and navigation should not be like that. Okay, since we're looking at the university. And guess what I did the same talk for working Valencia, and I covered this example there also that's why I'm using the same example here. Okay, what is the issue here anyone. It's clear it's in front of you guys. It's intuitive. Okay, yes, many yes that's menu. You see this blue ugly menu. You see, there is no reason to have ugly menu like this. Okay, except cookie box is also pretty big. The navigation items are pretty small. Okay, the logo is so big chat is still working. But guess what I love one thing about this website. The domain. It's so cool. It's so small to be dot yes efficient. But you see on the mobile. This is the cookie box. Seriously, and the chat is still working. Okay, as a cookie box I make this thing should not work. Why this is working. That means a chat cookie is getting loaded in the background as a GDPR. Not good. Okay, let's look at the next one. And most importantly, this speed. This is what the speed is. And this is the screenshot from last year I took the screenshot in October 2022. And you know what the current is. So you can see that the fcp 16.9 TTI 3823 performance of 1277 42 91. Let's see the next one. It's still the same. So it's to me it seems like in one year there's nothing done with it. Okay, that's fine. That's fine. And we're not there to judge but I'm telling you, this is not what you have to do. So and this screenshot I took it this morning. Okay, next one. Guess what? There is another use case called without WWW that do as a user. If I know your domain, I'm likely to open the website directly. But your website is not available specifically your top level domain sub domain. It's fine. But your top level domain if that doesn't point in your WWW or redirecting to the review version. You're losing out to potential traffic. Let's say I know this domain. It's the coolest domain and I'm like, I can't even access it like what is going on. Okay, another cool example since we're talking about the value x let me talk about good UX. I really like tunnel beer here. Anybody use tunnel beer before guys. It's a VPN client. Yes, no. Yes. Okay. So what's cool about tunnel beer is their user the beer shape pictures or animations they're using all the time. So this is the amazing best example of a quirky UX and this is what I call making a boring product which is a VPN fun to use. Okay, so what I did was I started entering email. And the next slide when I started entering the password we are just close to size. Seriously, this is really nice. It makes me fun. It makes me a laugh for a second right. Okay, so I was using it again and I'm like, Okay, you know what I want to try connecting it. Oh, there was a nice animation and literally a beer opened a tunnel and then went into it and went to Canada. Let's use Canada there and came out of that tunnel right now. Okay, this is nice. This looks nice. This feel nice, but there's still one small problem with this one. Can anybody guess there's one tiny problem here. Anyone comments. No. Okay, let me tell you this is the update notification that they have here. Yes, this is hiding the beer. You know what they could have done here. The bottom area is empty. Maybe they could have shown it here or or or they could have put it as a small dot in the right side. So you know you they have this right navigation area completely empty. Maybe they could have showed an update notification here or use like a bottom area. It doesn't matter but hiding here. Okay, not cool. Yeah, you want to update sure you want attention, but still that's not cool. Okay. Okay, so let's look at the next example. My favorite favorite example Indian people can relate to it. The Times of India. Yes. Sorry, is there some comment I need to. Not right now. There were a few questions you can come to it a bit late. Okay. Okay, good. So Times of India. I was accessing this website from Europe and in Europe GDPR law is there. Okay, fine. So when I came here, this is the what this is the kind of thing I was mentioning in the first slide. And I came here. I see a pop up on a pop up or a banner on top of a banner. I just landed on the website here. I don't want to subscribe. Let me read some news here. Why I would just click later and guess what you notice one thing on the right hand side here on the top somewhere here, you will see that there's a cookie blog. There's still 65 cookies are being loaded. Oh my God. And there's no option to disagree or like you know get out of it. There's always an accept in the cookie box. Okay. Next example. So let me come back to German example where I live in live here. So, and what is wrong with this page. Glad you asked everything. And this is also aggressive red for a cinema. A red aggressive color doesn't make sense. It doesn't go for a brand philosophy. Your users feel agitated if they if you use such heavy colors, you know, take a look at brand philosophy or Internet later on after this call and you will get this idea. Like what kind of color schemes you should actually use. Right. This is the kind of this is screenshot I took it when there was COVID times happening. Okay, so but then I was like you know how how are they doing nowadays so I went to their website again this morning. See this cookie box is fine. This is a sticky practice you know I cannot just close it there is no close button anywhere. And this this is what business are using nowadays. Right. So guess what I thought I'll just bypass it. So what I did was I tried clicking here there. Maybe I couldn't. I'm like, wait a minute. What is this in the background. It was not there before. I'm like, okay, okay, this is fine but why is a selector on top of selector. Okay fine. I'm like, you know what, let me accept the cookie let me go ahead. I went ahead. Okay, you know, this is what it was looking like. This is fine. They were asking for a selector where they're cinemas for those who don't understand German this is where where your cinemas you can select your location and there was this close button. I'm like, okay, I don't want to select close button. I want to know how much the ticket costs or I want to buy a gift card let's say this was my use case. So I landed on their website. Disappointment. I just clicked on close and there's nothing I waited for a minute, nothing loaded. This is not the user experience you should do. And for such a big brand like keen upon this. This makes me surprised. Okay, let's look at the next example. I go to the next slide. My favorite favorite for Indian people they would relate to you know what I was. I'm really glad I noted this again I also found this example when I was preparing for work in Valencia. I was creating to the music. The other day, and that I was in Spain I'm like, you know what, I want to listen to Indian music. I went to Google, I went to this website called Ghana.com. So, though I think Indian people may know this one. So, I'm like, Okay, I went here but why did I like to pop ups. Okay, you know what I don't want to accept this cookies. I'm like, Okay, do not consent. No wait. Sorry, I forgot. I said, maybe I want to see the manage options first. What is happening here. I clicked on manage options and such a long list, such a long list. See the scroll bar. And what is this okay consent not but what is this legitimate interest. A legitimate interest is another way of saying, give me your data, give me your data. I want to show ads I want to learn more. This is fine but this is too much. I'm like, Okay, fine. What I did was I just closed each and everyone blah blah blah. I said no I don't want to have a legitimate interest and I managed to scroll down completely Indian. And guess what I found another option. Another preferences. So preferences inside the preference. So to me, it seems like I'm in some sort of a metrics. I wanted to listen to music. I didn't want to deal with all this. But to me, after all this, do I want to really want to deal this? I guess no, I would just exit the website. So, but I'm like, you know what I want to finish this test. So I clicked on the window preferences. I'm like, Okay, let me see what kind of data they're stealing or they're having. So another long list of selectors. See the list of school. Again, the same thing, legitimate interest, blah blah blah. Okay, I'm like, you know what, I don't want it. I just selected all of it out and just clicked on confirm choices. I don't want to play this game really. Okay, then another pop up came at this point, I'm like, what is going on literally frustrated. Okay, I'm like, you know what, I still want to finish this test. This is an amazing test for the UX case study that I'm doing right now. Another hidden consent box behind another cookie box. As I said, some sort of matrix. I still didn't want it to consent. I'm like, I did not consent. Wait a minute. Another thing you notice, there is an ad about backups. I'm in IT, but I'm seeing a similar ad. But wait, my cookies are blocked. You see why I'm seeing a similar ad something is fishy here. I'm like, Okay, I also asked the Chrome to block cookie something is going wrong. Something is wrong with the website. I'm like, you know what, I don't agree. As soon as I clicked on don't agree. It says your data will be deleted. I'm like, what data will be deleted? Excuse me. I don't get it. Then I did what I close clicked on this close button again. And I saw the screen again. And I'm like, what kind of data you want? Then I clicked on it again. Don't agree. And I came back again. Then I clicked on delete data. And guess what? I'm like, what kind of data do they have about me? I wanted to go completely Indian. I wanted to see what's actually going on. So I clicked on delete data. And to my utter surprise, they're saying, Okay, delete your account from Ghana, blah, blah, blah. I'm like, but I didn't even create an account. I just lend it to your website. I just came to a website where is my account is okay. You want to delete. Okay, fine. I don't know. I assume you have some sort of data. I said I accept. Okay, continue. And I'm like email ID at this point. I'm like, okay, this is a face palm moment. I just came here. Okay, but you know what, when I close it again. It came back to the I accept. So it didn't even let me enter the website until I accepted the cookies, right? But I'm here for the first time. That's what the website didn't understand. It's not. So if a website has to agree, run in Europe, they have to go through a GDPR law. Doesn't matter which country they are in. So, and this is not the kind of user experience a user, your user should have. They should feel trust from your website. Even if that's an Indian website and American website, if they want to European customer, they have to follow all the data laws. To me, this is a clear GDPR violation. I can say that. But at this point, this is the kind of example you should not give to your users. Okay, at this point, I don't trust this website anymore. And I'm like, I really want to close this website. But I still, I'm like, you know what, I still want to test it. I really want to listen to the song. Again, I saw the screen. Okay. I'm like, can I just click one and go ahead? You know what, it says, click accept all the checkbox back to Pavilion where we started, right? I'm like, okay, you know what, let's do the track. So now I clicked all and see the number of cookies they're loading to 152 add cookies. So much of the tracking happening. Mind you, I've cleared all the cookies when I entered to this website and before I even loaded, right? Okay. Wait a minute. I also said did not coincide in the start. Do you remember? And still all the cookies are loaded and relevant ads are not cool, not an option for you to have a bad website. So this is the kind of user experience your guys should your website should not have. I mean, I only covered few examples guys considering the amount of time we have for this workshop. However, I would like to take some of the questions in the end. So let's go to the next step. So we covered the example. So this is the last segment of the slide. I want to talk about one second. I want to talk about one more topic before we almost close the site. A performance budget is just what it sounds like. You set a budget on your page and you do not allow the page to exceed that. Yes, right. Just like you do like a financial budget, you should also do like a performance budget for your website performance budget can include a lot of things like your total page size, your number of HTTP requests, your page load time on the mobile network, your FCP or LCP and these kind of stuff you should have and any organization should really really invest on a performance budget. And. Okay, after this, you will have possible issues. Yes, you will definitely going to be having for possible issues. And this is how you make the web efficient and faster. Thank you for your attention guys. Any questions. I would really like to take your questions. And in the end, I would like to leave the link to download the slides. So this is it. Thank you for your time guys. Let's take some questions you can download slides for my link free. You can find the contact here also. Thank you very much for needs. We did have some questions come through so let me read them out for you. Arjun asks, please give an example for a good sales page UI. Do you have a good sales page UI you can provide sales UI you mean the sales landing page. I think so. Okay, I mean I cannot think over the top of my head some example, but no I cannot think any top of the my head any some example like that. But I've seen a lot of businesses like the, like I really like Google's branding or Apple's branding and how they are dealing with it. But other than that I cannot think any other example that I can really say okay this is the efficient one. And this is the kind of thing I'm trying to help brand succeed to have like an efficient UI and have like a proper website. Arjun, if you have an additional question you can drop in the Zoom chat for us. Jean had a question. And when you were talking about the login screen for Facebook and how the field appears or doesn't appear. She says, isn't it good for accessibility to have a description so when you start typing in the field, the subject of the field is still available. The accessibility. So first of all accessibility yes this has to be available and that's what the example I said that Twitter is doing an amazing job there. So when you start typing the email address. You don't really know okay you are midway and you forgot okay what they're asking are they asking me username but Twitter is doing an amazing job at this day. And this is the kind of thing your form has to be intuitive otherwise you're lost for accessibility side. It's handled by your browser side right so you need to have your code accessibility compliant like so your browser scan read for it like okay, but that's a separate thing but if you're asking for a UX side. I would say there isn't potential improvement. Of course, they're a billion dollar company so they're not losing revenue or something like that. It's just a tiny way how they can improve their form my suggestion. So it's not like a revenue loss from them it's very tiny for them. So if you follow ups to that feel free to drop them the chat. And then we have a few comments when you were showing the final music site about the cookie banner on top of a cookie banner and you couldn't. Yeah, if we're commenting like top management and the UX designers didn't work together. Somebody also said developers must use scripts that manage cookies and so the infinite pop ups can sometimes come from these scripts. So not really a question there but different people. I can add something I can I can say at some point here. So then one more the bet I mean I can really suggest to use some sort of GDPR compliant, or maybe a co provider can manage stuff like this. I have personally experienced with one trust. I mean I'm not sponsored by them but I've experienced with them. And this is working perfectly fine. You can integrate your one trust in your GTM and have all your script on your GTM. So if the user accepts the cookies in the cookie box then only the scripts are loading, and you can do like a geo compliant. So if your users are in EU, okay it works on an opt out model or if you can set country by country, wherever the country in whatever the country have whatever the law you can set for your users. That is the kind of thing I would recommend rather than handling it all in your code. It makes it easier also to remove you can save a deployment if you handle everything in the GTM. Okay. Jean sort of added a comment. Sometimes there are cookie policies that just pop up show for a second and then default to accepting all. But I guess if you can use trusted third party solutions like this that would solve that problem also. That is correct. We are coming to the top of the hour but if anybody had some final questions they wanted to slip in. This is your last chance. And while people are typing. Vinit has shared his social media links on the slide here so if you have questions after the presentation is over. You can connect with Vinit and ask him directly. I think that's okay Vinit and people can connect. Yeah, this is perfectly fine. Yep. They can even download the slides here find out all the resources about me, follow my work and everything also through my link tree. I dropped the link to the slides before but let me do it one more time in the zoom chat here. So this link. Okay, so yeah let's let's make this the last question. Okay. Can you share some good work which takes all the boxes not not any website is perfect. Every website is not perfect actually. So one recent example that I can say my colleague here is also in the presentation today and he did this website, I can say. This is a good example, built on Gutenberg blocks, I can recommend totally take a look at it. So, yeah, this is a good example of course not a perfect one, but that's what he did so I can totally recommend. Check his check out his website. Check out how to understand by the way for this amazing website. I don't know if he's still there. Okay, and Jean dropped one last comment so let's get this one. You were talking about accessible forms before and she says you're fine with losing potential kinds of difficulty filling out your forms. It's not just visual disabilities it's cognitive too. I guess, is there a solution to having a form that's both good for user experience and also accessible like is it possible to get both in the same go. Yeah, I mean I forgot the name of that provider I. Okay, I really I cannot remember on top of my head but there there was this provider I used all the time. So, it's an intuitive nice UX so it says one question. There's a form it shows the progress bar, and there's a next button. So one question for per page is coming up. Can anybody remember that name that is a perfect good provider I can totally recommend. Normally you use that website to take feedbacks. I really can't remember. So it's a nice form type for David. This is a perfect example I can totally recommend. This is the kind of form a website should have a perfect accessible example, which is intuitive, you know what to do. That's a UX, UX model. All right. Next we will close this presentation now, but thank you everybody for the questions in the zoom chat. And once again, thank you for the need for presenting for us today. And I just want to give a bit of a. Thank you for you. And this recording will be going up on WordPress TV a bit later. And so put a message in the meetup.com event when that goes up as well. Okay, thank you everybody for your time today. And I hope we all learned something new. All right, and see you in the next online workshop. See you guys. Thank you guys. Thank you for your time.