In this video, I walk you through my approach to website UX/UI reviews. If you’ve seen any of our Cloudways Mavericks webinars, you’ll have seen this in action. Now find out what’s on my mind as I help Cloudways customers optimize their websites and seriously boost their conversion rates.
This has been edited for length and clarity.
Hi there, it’s Piccia Neri here, one of the three Cloudways Mavericks—that’s Jan Koch, Lee Jackson and me. Once a month we have webinars where we examine websites submitted by Cloudways customers. You can do that too, if you’re interested. Each of us looks at the site from our specialist point of view. I am an expert in UX and UI, so that’s what I look at. Jan Koch looks at the technical side of it, and Lee Jackson looks at the content marketing and branding side.
I just want to give you a breakdown and tell you what I look at, what my priorities are when I examine a website. Now, it has to be said that the people we do this for have really great results. They report hugely increased conversions and so on, so this is worth listening to.
I’m going to give you the example of the last website that we looked at [in February 2020], which is. It’s a wonderful website all about traveling the world. I love it because I love traveling. I love the photos! They’re beautiful photos. There’s lots of great content in here.
What Do You Want Your Website Visitors to Do?
The number one thing that I look at is: what is there for me to do as a visitor landing on this site? Is there anything I can do? In the case of A Lovely Planet, there isn’t quite. I can see that they are concentrating on the content that they’re creating, but really, there should be something for me to do. You need to have clear in your head, what it is that you want your visitors to do when they land on your site.
It could be that you want them to fill in a form, well then in that case, do the best that you can to get them to fill that form. The ideal thing is that your visitors find themselves in a place that is the best for you, and for them. That’s a sweet spot. It’s the best user experience as well as the best marketing. If you’re really sure about your product then you know that you’re doing a favor to your visitors. And if they’re the right customer to visit you, then it’s also in their interest to be where you want them. So that’s what you need to decide.
What we said when reviewing A Lovely Planet, which is run by a lovely couple (the woman is called Hailey), is that they’re clearly based on content but it’s there’s no clear experience on this page. Once you start going into the content and the destinations, there’s loads of great stuff. Look how brilliant the photos are! I’m interested in the article about the best diving in Southeast Asia because I’m going there this year, but it’s there’s no experience, as it were. There is nothing for me to do.
So the first message is to make sure that you know exactly who your target audience is. And the second is to think of where you want them once they land on your site and then get them there in an easy way.
Hailey has said to me that she’s already implementing some changes, which is brilliant. If I’m not wrong the typeface has changed since we first saw it. I think that’s a change that’s been made already.
So clearly, this site is all about content, which is great. But you could have something here such as “Where do you want to go next year?”. And that’s something for your visitor to do. For instance in my case it would be Southeast Asia, so I’d click on Southeast Asia and get taken there. Even with something as simple as a travel website, there are things that you can do to engage the visitor.
What is the visitor supposed to do when they land on the site? That’s the number one thing I look at, then I usually move on also to look at the brand a little bit. Now the content marketing and the branding in a wider sense is Lee Jackson’s territory. What I look at is things like the visual branding—in this case the A Lovely Planet logo. It’s a lovely logo, but it’s a bit too complex when you make it small. They’ve changed that; it used to be different and now it’s just the globe, which is absolutely fine. But you see that if you make this logo smaller, it’s way too detailed. This is not a vector version of the image, either. A vector is basically an image that is not made up of pixels. I’m not explaining it well, but it’s an image that is easy, without contours or complicated details. You know, a bit like an icon, as it were.
If you don’t know what a vector is, then you can you imagine the little icons that you have like this arrow here. That’s a really simple representation. Vectors can also be against any color background as they don’t have a background of their own. Whereas this JPEG image has a background. So that’s what I look at. And my recommendation in this case was to make the logo way simpler. Keep the lovely watercolor illustration, but keep it somewhere else. To have a logo like that, make it way, way, way, way simpler.
Summing up so far, the first thing that I look at is what there is for the visitor to do: Where are you sending me? What’s your call to action? That’s number one. Number two, I look at the logo and visual branding. And then number three, I look at the typography, which is a hugely important part of web design.
Typography and White Space
Now, typography is extremely important because the web is still 95% written content, believe it or not, even with the huge ascent of video. In this case it was a bit too small, and now it’s bigger.
I also very much care about white space. What I mean by “white space” is not the fact that there’s actually white, like this header here is coincidentally white. White space is space that isn’t used. It’s negative space, breathing space. For instance, here the header looks alright but it’s way too close to the content. I feel that this grid should be lower down. I love the fact that the grid is full width, but it should be lower down. This is to do with typography because when with your typography you need to make sure that you have enough spacing as well.
See how just by talking about one specific thing I kind of—it’s not veering off, it’s just that everything is connected. So I will point out other things that are helpful to think about.
The typography here in the menus is lovely. It’s now definitely big enough. I always say, “please make it big enough”. Even if your audience is a younger audience, there may still be people who have visual problems. You have no idea how early people start having visual problems. Even many people who don’t wear glasses actually can’t see very well. They say that 16 pixels is ideal, but I say 18 and that it very much depends on the typeface that you’re using. Some typefaces are way too tiny at 16 pixels. You need to always verify. Ask your mom if you’re not sure. I love the fact that it’s such a nice, curvy, friendly typeface. It goes perfectly with the idea that I’ve made myself of the brand.
Now I’m going to show you an article. And I’m going to go into ‘The Best Diving in Southeast Asia’ because that’s where I want to be next. Yeah, they haven’t had time to change this yet. My comments on this were that you have lots of white space here, which is brilliant. But there are two things here that I would not recommend. They’re using a version of the typeface that looks kind of handwritten. And it’s not too bad, but I would make the headings way bigger, and then when it gets to the body copy I don’t recommend using this typeface.
As lovely as it is, if you go into detail, the typeface is now a bit small and there’s very little line spacing. Line spacing should be just right. Again, it depends on the typeface, but it could start from 120%. It depends, really. You need to play with it — there are websites that can help you with that — but in this case there’s not enough space between the lines. Even worse, the line is way too long. My eye can’t follow all the way across.
The third point is that while this typeface is lovely when it’s in big headings without long words, I don’t recommend it as a body copy typeface, because it’s too simple. I love its simplicity, I love how it’s round. It’s a beautiful sans serif but the letters are all very similar to one another. You can barely tell the ‘a’ apart from the ‘o’ because it just has a tiny little descender. That’s a reason why, in the long run, you don’t want to be reading this.
People with dyslexia or other different ways of seeing the world might have issues telling these letters apart because they look too similar. I recommend that you change the typeface for something that’s more readable. Normally serif typefaces are easier to read. This san serif is a simpler one with no, like, curly bits, and serif fonts have the curly bits.
So let’s say for instance that I want to go to the Banda Islands. I can already jump there, which is fantastic. Well done. But can you see here how the layout needs breaking up a little bit? The photos are amazing! Oh my god, don’t you want to be there? It’s fantastic. We recommended working on the layout a little bit. And this came from me just talking about the typography.
So point four is looking at the layout in general and how that helps the experience. The way you do your layout really, really changes the experience. You lead the eye, so you lead the way your visitor reads your content, which is what they want to do here. There’s not much leading being done here. It’s all boom, boom, boom, boom, boom, just coming straight down.
Haley told me that they were already making changes and that they had now chosen a theme. We recommended choosing a theme, because this is a WordPress site, and they work with themes. Themes come with a layout for blog posts so you don’t have to reinvent the wheel, you can use a layout that works for you. Then that leads the eye. They’re doing so well here with information architecture—brilliant job, I’m so happy—but then the information needs to be broken down.
Overall Website Experience
So after I’ve looked at the layout, I usually take some time going over a few other pages in the website, because I want to check what the experience is like. I need to get an idea of what it is exactly that you want your website to do. In this case, I think maybe it’s the ads. They’ve got ads which are not moving. I don’t like animation, so that’s really good. They’re not bothering me for now because they’re over on the side, but I don’t know what will happen when they change the layout. I’m sure they’ll do it discreetly.
I think that they want to attract traffic using content, because of the ads. In terms of the content, brilliant job. This is the point where I think about more about the website, in general. It’s where I start giving you advice about how to organize your content a little bit.
In this case I would say that it’s really well organized, but I would have tab tags. I would have a better way of helping your user navigate and get to what to what they want.
The ‘About’ Page and Social Media
Another really important thing is the ‘About’ page. The ‘About’ page is really essential, and it should not be last [in the top menu]. It should be much earlier because it’s how people interact with the website first. So many people go to the ‘About’ page first. All the statistics say that is the most important page on your website.
I love their whole story here, it’s just so nice. And I love their Instagram. The photos are amazing. They have a team, and it’s a really lovely story. They have a good amount of followers, it’s a really engaged Instagram, so I don’t think there’s any point having [an embedded Instagram feed] here. Usually there’s no point but you do need obviously the icons.
Which reminds me: I don’t remember if we said when we did the reaction review, but if your social following is important then make it much more prominent. Not so much sharing buttons. It’s kind of proven that sharing buttons just slow your website down and there’s no point. But in the navigation I would definitely give people the opportunity to follow you. Follow icons can be put in the navigation really easily. They don’t slow your website down, whereas most other widgets, to count likes or do sharing, do slow your website down, and they’re just vanity metrics that don’t really matter. I’ve taken them off my websites.
And Cloudways Maverick Webinars Include Much More
I end up talking about so much. When we do the Cloudways webinars I am so fantastically followed by, and helped along by, my colleagues Jan Koch and Lee Jackson. They ask me a lot of questions as well, about things that they notice but I may not see. And then Jan looks at the site speed, which is a hugely important aspect of user experience, SEO, and lots of things. Jan analyzes that and then Lee looks at the way they’re marketing themselves, and how their social media presence works, whether they’re exploiting it enough, and so on.
So this is it in a nutshell. I could go on for longer, but these are the points that I cover in my reviews. From a big sweeping view, it is:
- What do you want your customers to do?
- Your visual branding
- Your typography
- Your layout and colors
- If there’s anything that’s not accessible
- The general experience on the site, what your other pages are doing, and whether you’re doing a good job of communicating your message
The first thing is always: What do you want? And what do you give? Where do you want your user to be? What do you do for them? Why are people on your website? That’s the most important thing. And that’s the first thing that I look at.
Right? I hope this was helpful and not too confusing. And thank you so much, and thank you Cloudways for hosting us and giving us the opportunity to help people out with our webinars.
Start Growing with Cloudways Today.
Our Clients Love us because we never compromise on these
Piccia has been a practicing designer for over two decades, working with global brands and cultural institutions. She runs her own global UX and design consultancy agency, Design for Geeks, and offers workshops and courses. She is also known for her talks at international conferences like WordCamps.