Menu-wht

ZURB Apps

Notable Updates

Better Interfaces through Faster Iteration Subscribe via RSS.

Notable Updates

Better Interfaces through Faster Iteration Subscribe via RSS.

Critique a Web Page in 30 Seconds or Less

When you're ready to launch your website, you'll want to give visitors the best user experience possible. Learning to evaluate a website effectively is part art and part science, but it's a skill that can be learned. To develop an eye for what works on a website and what doesn't, there are few simple techniques that help you critique your website in 30 seconds or less.

Note where your eyes go first - Type in your URL, then close your eyes before the page loads. What's the first thing you see when you open your eyes? Does it explain the page instantly, or do you have to look around a few more seconds before grasping its meaning?

Squint your eyes - By closing your eyes almost completely as you look at the screen, its content will become blurry. Note the path your eyes travel and what your brain is trying to reason out from the limited information it's getting. Can you make out what's happening on the various section of the page? You're looking for good contrast among the various sections, and your eye will naturally go to the areas that create the most contrast.

Scan the page diagonally from top left to bottom right - This is the direction the eye is automatically trained to read (of course, it's the opposite in some cultures). Since the human brain is already prepared to receive information in this order, make sure your content is presented in clear and logical order from the top left of the screen to the bottom right.

The "Five Things" trick - Jump to your homepage, scan it for five seconds, then list five things you remember. Limiting your viewing to only five seconds forces your brain to remember only things it deems relevant. Hopefully, the five things you recall align with the top five things you want your customer to know. The human brain is only able to hold so much in short term memory, and most people aren't patient enough to continue reading, so they'll click to learn more. That action marks the beginning of the user experience, so make those five most memorable things count.

Find the intersections - Take a look at where the major lines of the page force the eye to focus. Does the eye naturally travel to the most important elements on the screen? A good web design subtly draws the eye to the places where the maximum amount of information can be assimilated in the minimum amount of time, often just seconds.

Learning to view websites critically is an important skill to hone. It trains your brain to think like a user and the more adept you become, the better you're able to provide an enriching user experience.

Too many companies spend needless time arguing over details of a website before the larger picture is fully developed. This puts users, and ultimately your business, at a disadvantage because the "big picture" is what creates the users perception of your service or website.

Take a look at your website and use these tips to critique it in 30 seconds or less. After all, that's what a majority of potential customers do after typing in your URL -- whether they realize it or not.

Update: Due to enormous popularity of this post we have created a webapp which helps you employ these techniques above by capturing a screenshot of any website and applying different effects to gain a new perspective on your design. Check it out at http://spurapp.com

Dave Gamache (ZURB) says

Another quick strategy I use to evaluate the effectivity of a website is a personal mood test. Like a mood ring, I load the site, then as soon as it loads I determine my feelings - does it make me smile? Does it stun me with its unique composition or great imagery? Am I just plain overwhelmed by the amount of unorganized information? Often times these more subconscious factors can play surprisingly significant roles in our emotions towards a site.


Jeremy (ZURB) says

I'd add another #6 to Dave's:

What are the first three words you notice? What are the words of the thing you'd click? (Or, be honest, you click the 'Back Button'?).


Jacob (ZURB) says

Nice article. Usability testing starts with you! I think step #7 should be asking others for their input too. The more the merrier, that way you can get a range of different views; especially relevant depending on the market the site is aimed at.

We created our own usability testing tool at http://intuitionhq.com to take the legwork out of it, so we can just send tests to stakeholders, clients and such and get pretty instant feedback. In fact, flick me an email if you'd like to have a play and I can set you guys up with a free test to try it out.

Thanks for the blog post!


Sacha (ZURB) says

Two other techniques I use: looking at the screen sideways, and taking a screenshot of the screen and looking at it at 50% size. The last one is especially useful to get a sense of the general balance and hierarchy of things.


Tanya (ZURB) says

The other thing I like to do (from both a usability and a code quality standpoint) is look at what's in your heading tags. Is that h1 really an accurate reflection of the most important information on the page? Do the h2 and h3 tags hit the highlights and tell users what they need to know? This can make a difference in both usability and SEO.


Matt (ZURB) says

From the engineering side it's a good idea to clear your cache and load the page to see what the response time is like for a new user (unprimed cache). It's easy to forget what the initial load is like when you've been working with cached assets.


Jason (ZURB) says

For the "Five Things" test this web tool is very helpful. http://www.fivesecondtest.com/


Martin (ZURB) says

Excellent article with simple principles, I hope more people start to read your blog, then the Internet will be a much better place to hang out ;)


Andy Sowards (ZURB) says

Great article guys!

Critiquing a website can often be overwhelming if you don't know what you are looking for - this should help a lot of people out :)

Thanks for the great content!


Brent (ZURB) says

But honestly, who has 30 seconds! I have only five, which is why I use: http://fivesecondtest.com/

Seriously though, great suggestions, I'll be using this again and again. :)


Bryan (ZURB) says

@jacob IntuitionHQ seems like a good tool. We created Verify to address similar issues. Quick, iterative testing is a great way to understand how to improve your webpages.

@brent Five Second Test is good too. Verify has a five second test plus 5 additional tests to understand different opportunities within a page.


Ross Hudgens (ZURB) says

Very cool, and not what I expected. I love any time I get a "new take", and this is definitely what that was.


Website Design (ZURB) says

Helps to have a little bit more of a breakdown and give a few categories such as notes on;

color layout navigation etc


Connor (ZURB) says

These are great strategies to use while in the process of designing a site. One more strategy I'd add to the list is to view your site in black and white. This allows designers to easily focus on the spacing between elements and type on the page.

It's easy to get tunnel vision when you're designing, so it's very important that designers literally change their perspective as part of their process.

Viewing opportunities differently opens us up to find new solutions.


Mike T. (ZURB) says

View the source and complain about how unsemantic it is.


@marycray (ZURB) says

I like this post and comments from Jeremy and Dave.

I always think "who is my audience", "What 1 word will they think after seeing the site at a glance," and finally, this is more metaphorical to fashion: when staring at the page for 3 seconds what things pop...and are they the things I want to stand out?


Scott Corgan (ZURB) says

These are great quick tests. I've used a few in the past and present. I enjoy articles that are less on how to do a certain technique and more on how to actually design. Thank you!


Armig Esfahani (ZURB) says

pretty nice :) thanks :)


tgpo (ZURB) says

Extremely useful for goal based designs, which should be every design. I'll be saving this post and showing it around the office. Thanks.


Dmitry (ZURB) says

Squinting your eyes and looking for areas of contrast is a great way to see where your eye goes first. From marketing point of view I take it a step further and see: When I un-squint my eyes do I understand the purpose of this site by looking at that area of contrast? What is the value proposition of this site? Do I care? What is the end benefit for me? Since this is the first spot a visitors eyes go it's imperative to communicate the value here.

My next question is: Once it's obvious to me what the value of the tool is, what should I do next? Is the call to action clear? What's the next step for the visitor? Sing up? Purchase? This has to be absolutely 100% clear. You do not want to confuse visitors with multiple calls to action. Usually one call to action works great.

If your website visitor was actually visiting you at home or work in person would you want them to use a lot of effort to figure out the value you can provide for them and how they can buy your service? No. So make it's insanely easy for them on the web as well.


Dmitry (ZURB) says

A quick side note about the contrast: Don't forget to make the site easy on the eyes when focusing on that contrast effect. For example: white text on black background is a bad way to create contrast since it causes eyes to strain harder than necessary. You've got to keep the content readable if you want visitors to stay on the site.


AlejandroBriz (ZURB) says

¡Fantástico!


Bilal Aslam (ZURB) says

Excellent article! I've just redesigned the top part to make sure that the incoming visitor will instantly know what my site is all about, thanks.


Design ideas (ZURB) says

Great tips for design analytics. Thanks for good reading


JSON (ZURB) says

Great, I stand upside down while looking through one eye to critique websites. Sometimes I even hold my breath...1, 2, 3, phhhew. I almost passed out.


Silberfalke (ZURB) says

Thanks mate, really great tips and pretty fast if you have no money for doing an eye-tracking-test :)


Ted Thompson (ZURB) says

Great article, very helpful, thanks for sharing.


Ariana (ZURB) says

Great article- I can say I knew you when. :)


axooh (ZURB) says

Great article and useful comments. I got some helpful hints for my design workflow. Thanks for sharing and discussing!


LuviKunG (ZURB) says

OH very helpful tricks. Thanks :)


David Fokala (ZURB) says

I agree in to-to.When I read this ,I immediately thought of the guy I say at the car watch. While cleaning his car, he frequently got up, took a couple of steps away from the car to assess I think how clean the car was and what he needed to do again.I think your ideas are the best I have had so far web sites designing.I will use them as I continue to improve on my site. A great piece of work. Thanks, David


bert (ZURB) says

Interesting ideas, I wish somebody'd have a look at my site, it's a bit messed up :(


Dietmar (ZURB) says

Great Article, I'll take it to my Online Marketing class to teach them how to critique a website! Thanks!!!


Visit Notable →

The ZURB Apps blog is a place where we discuss news, customers, tips and tricks about our web applications. For additional information on ZURB, check out the ZURBlog, where we discuss product design, business and strategy.