3

I've seen similar questions asked and the answers were not quite what I'm after. Since this question is slightly different, I'm asking again - Hopefully you'll agree this isn't a duplicate.

What I want to do: Generate an image showing the contents of my own website as seen by the user (actually, each specific user).

Why I want to do it: I've got some code that identifies places on the page where the user's mouse hovers for a significant length of time (ppl tend to move the mouse to areas of interest). I also record click locations. These are recorded as X/Y co-ords. relative to the top-left of the page

NB: This is only done for users who are doing usability testing.

I'd ideally like to be able to capture a screenshot and then use something server-side to overlay the mouse data on the image (hotspots, mouse path, etc.)

The problem I have is that page content is very dynamic (not so much during display but during server-side generation) - depending on the type of user, assigned roles, etc... whole boxes can be missing - and the rest of the layout readjusts accordingly - consequently there's no single "right" screenshot for a page.

Option 1 (which feels a little nasty): would be to walk the DOM and serialize it and send that back to the server. I'd then open up the appropriate browser and de-serialize the DOM. This should work but sounds difficult to automate. I suspect there'd also be some issues around relative URLs, etc.

Option 2: Once the page has finished loading, capture an image of the client area (I'd ideally like to capture the whole length of the page but suspect this will be even harder). Most pages don't require scrolling so this shouldn't be a major issue - something to improve for version 2. I'd then upload this image to the server via AJAX.

NB: I don't want to see anything outside the contents of my own page (chrome, address bar, anything)

I'd prefer to be able to do this without installing anything on the end-user pc (hence javascript). If the only possibility is a client-side app, we can do that but it will mean more hassle when getting random users to usability test (currently, we just email friends/family/guinea pigs a different URL)

Improve this question

3 Answers 3

Reset to default
4

One alternative solution would be to "record" the positions and dimensions of the main structural elements on the page:

(using jQuery) 

var pageStructure = {};

$("#header, #navigation, #sidebar, #article, #ad, #footer").each(function() {
    var elem = $(this);
    var offset = elem.offset();
    var width = elem.outerWidth();
    var height = elem.outerHeight();
    pageStructure[this.id] = [offset.left, offset.top, width, height];
});

Then you send the serialized pageStructure along with the mouse-data, and based on that data you can reconstruct the layout of the given page.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

That's a nice idea - far better than sending the whole DOM (a sledgehammer approach).
@Basiclife Yes, anything is better than serializing the whole DOM :) (is that even possible? ). Note, I changed the code to outerWidth and outerHeight.
I assume it's possible (allowing for the fact that some properties will be unreadable due to security issues, etc...) - Certainly enough to be able to reconstruct the page layout should be. That said, it makes my skin crawl just thinking about it... Thanks for pointing out the change, I would've missed that
1

One thing we always talk about where I work is the value of ownership vs the cost required to make something from scratch. With the group I have, we could build just about anything...however, at a per-hour rate in the $100 range, it would need to be a pretty marketable tool or replace a very expensive product for it to be worth our time. So, when it comes to things like this that are already done, I'd consider looking elsewhere first. Think of what you could do with all that extra time....

A simple, quick google search found this: http://www.trymyui.com/ It's likely not perfect, but it points to the fact that solutions like this are out there and already working/tested. Or, you could download a script such as this heatmap Obviously, you'd need to add a bit to allow you to re-create what was on the screen while the map was created.

Good Luck.

Improve this answer

1 Comment

A very valid point to raise, thank you - I'll certainly look at the alternatives
0

IMO, it's not worth reinventing the wheel. Just buy an existing solution like ClickTale.

http://www.clicktale.com/

Improve this answer

1 Comment

I have to admit I normally shy away from COTS solutions as they're often over-priced and/or poorly developed. That said, clicktale seem to offer surprisingly useful information so thanks for the pointer.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.