Users Don't Read - The Ride
When working with new clients, I sometimes find it useful to strip the text off of a site and see what's left. Where is my eye drawn? Can I spot the call to action? What can I really tell, just at a glance?So, I thought it might be fun to create a simulator (sorry, it's not really a ride) that does just that. Just enter any website URL into the form below, and you'll see what it might look like if users couldn't (or wouldn't) read. Letters are replaced with "X" or "x" and numbers with "0":
Consider it a thought exercise. Here are a few tips for how to use the simulator:
- See where your eyes are naturally drawn without text
- If you couldn't read anything, where would you click?
- Are you overwhelmed by colors, emphasis, or links?
This is just a beta for now. If people like it, I'll consider beefing up the code.
Mikael Halén
· Thursday, April 29Nice test! It reminds me of the test where you blur out the site and see what your eyes are drawn towards. I can see this being used together with eye tracking tools.
Mikael Halén
· Thursday, April 29By the way, google chrome tried to translate those X's to english. It didn't go too well :]
Dr. Pete
· Thursday, April 29@Mikael - Yeah, I noticed that Chrome keeps wanting to translate it from Slovak. Not sure what that says about my ancestors and their language :)
Brandon Leonardo
· Thursday, April 29Great work! Love the idea. Very helpful in determining what people are actually seeing.
I'd love to see a javascript version that i could include on my own site and run manually so that I could check pages behind a login screen.
tchalvak
· Friday, April 30I think it'd be more useful to just fade out the text, e.g. set the color of text and links to the same color as the background, or set them to transparent (or almost completely transparent). The XXXXXes are kinda more visually grabbing than the text itself -was-.
maria
· Sunday, May 2My site did not work well without text. I think this is a major problem since people visually surf the web. Tomorrow I'm going to try and add more graphical interface buttons to my site. Thanks for this.
Imprimante
· Wednesday, May 5When you use this tool, you really understand the importance of images and graphics.
Rob
· Wednesday, May 5Great tool Dr. Pete! Definitely going to be part of my usability arsenal in the future. I found your site recently via your contributions on SEOMoz and is definitely a site that I will be visiting frequently. Your own site and content are a testament to your usability knowledge and expertise. Thanks for the free docs as well.
Paul
· Friday, May 7Thanks for the tool. Looks interesting, but I guess you have to use it a few times to see the need for it.
boulder-seo
· Friday, May 14Interesting effect when one has very few images on the page. Point well made.
Online Marketing Strategy
· Tuesday, May 18Excellent tool, thanks!
However, I'm running current wordpress and some text in the header and all of the footer did not convert to xxxx's. Will check to see if I have some indexing/coding issues, great tool.
Jack
· Wednesday, May 26Nice tool! On my site, the ampersand makes the rest of the text stay in place. Interesting to compare to competitor sites with our own as well. Thanks!
Jeux
· Sunday, May 30When you use this tool, you really understand the importance of images and graphics.
John
· Tuesday, June 1As a visually impaired I can use it in reverse: if a simulated site looks good you have an e-accessibility problem.
Dr. Pete
· Tuesday, June 1Thanks, everyone!
@John - I certainly appreciate your point, but I should be clear that I really only see this as a thought exercise for the design side. I'm not advocating extreme minimalism. In my experience, though, a lot of text-heavy sites are mostly marketing jargon and aren't good for any audience. It's tough, but I think you can design a site that communicates well both visually and textually, which includes using solid alt text and other attributes.
Hosting
· Friday, June 4It is interesting to see my own website with this tool. I have been a little surprised what draw my attention and what not. I believe it may be very useful to ask 5 - 10 people to use this tool and watch their behaviour.
Adam Hayes
· Tuesday, June 15I always like to zoom way out and see what stands out (has the same effect as you can't see the text well). Interesting Concept.
Sean Weigold Feguson
· Wednesday, June 30I love this tool Pete. I agree with the feedback about the X's being a little distracting. This is definitely a very creative and useful resource!
timyeo
· Thursday, July 1Great job! I've always thought about this, and it works.
However, instead of replacing with simple X and 0's, I was thinking of translating the text to a different language.
Dr. Pete
· Thursday, July 1@Sean - I honestly wasn't sure if some distraction would help replicate the feeling of text without the actually reading or just be a distraction. When I do mock-ups for clients, I sometimes just strip out text entirely, but depending on the site, it can end up too artificial.
Jean-François Monfette
· Thursday, August 5Another very useful usability tool coming from you. I too consider the X a little distracting. Maybe using Chinese or Arabic would help. Keep us posted about this coming out of beta !
OmarKH
· Thursday, August 5Great idea, but Arabic language is not supported in this tool :(
Search Engine Optimization Service
· Wednesday, August 11you use this tool, you really understand the importance of images and graphics.