Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Essential Visual Feedback Tools For Web Designers

The creative process takes a lot of time, and web designers know it. When you factor in feedback from clients, the process takes even longer: numerous emails, revision notes, chats and meetings — that’s what it normally takes to find out precisely what the client wants.

Fortunately, today’s web provides various solutions to optimize the communication process. The first web services that allow users to report bugs on web pages appeared several years ago. Since then, tools and technologies have emerged to make the process more convenient and user-friendly. Today’s market offers several useful products for visual bug-tracking, each with its pros and cons.

We have selected our top five tools and compared their features, functionality and pricing. We hope that this review will simplify your workflow and speed up communication between your team and clients.

InVision LiveCapture Link

Invision1 is a prototyping tool that enables designers to easily collaborate on design projects and to showcase their work. Quite recently, the company announced the release of a new tool, InVision LiveCapture192. It grabs full-length snapshots of live websites and helps users provide feedback during the design process.

InVision enables designers to collaborate and to showcase their work.3
InVision enables designers to collaborate and to showcase their work. (View large version4)

User Experience Link

Getting started with InVision is easy. Just add your first project and install the extension for Google Chrome. To start commenting on a web page, click on the extension icon and select the project.

InVision LiveCapture extension
InVision LiveCapture extension.

When someone adds a comment, feedback appears on the normal screen in InVision, which would already be familiar to the designer.

InVision LiveCapture extension
InVision LiveCapture extension.

The service is targeted at web designers who are looking for an easy way to get feedback on their work in progress. Unfortunately, it cannot be used to comment on a live web page or integrated in a large team’s workflow or used as a bug-tracking tool. On the other hand, it’s free!

Pros Link

  • Easy to work with
  • Great for collecting inspirational ideas
  • Ideal for existing customers looking to get more out of Invision

Cons Link

  • Works with Google Chrome only
  • Browser extension required
  • Reporting bugs is difficult

Third-Party Integration Link

  • InVision
  • Doesn’t support third-party project-management or bug-tracking systems

Supported Browsers Link

  • Chrome

Pricing Link

The free plan is available for individual use. A subscription plan for teams with up to five members and unlimited projects costs $100 per month.

TrackDuck Link

TrackDuck5 is a visual feedback tool that is ideal for web designers and developers. Users can highlight issues on the page, comment and receive feedback in real time. Bug reports are sent directly to the dashboard, where you can chat with others, assign tasks and track progress.

TrackDuck Visual Feedback
With TrackDuck users can highlight issues on the page, comment and receive feedback in real time.

User Experience Link

Immediately after you register, which takes about a minute, a simple wizard helps you to get started with your first project in three simple steps: enter a website address, install the extension for capturing high-quality screenshots, and invite colleagues to collaborate on the project. The website that you add then opens in a new tab, and you can start commenting right on the web page by selecting and dragging the mouse wherever you notice a bug. You can appoint a colleague to fix the issue and assign a priority to the task.

TrackDuck visual feedback
TrackDuck visual feedback
It works even for responsive websites, and you can always check what a bug looks like on your smartphone6
It works even for responsive websites, and you can always check what a bug looks like on your smartphone. (View large version7)
All tasks and bug reports are available in the dashboard. Issues are also visible as pins on the web page itself
All tasks and bug reports are available in the dashboard. Issues are also visible as pins on the web page itself.

TrackDuck currently integrates with only a couple of systems: JIRA and Basecamp. The integration works both ways — tasks are sent and updated automatically in both systems, no double entry required.

Pros Link

  • Unlimited number of team members
  • Cross-browser
  • Technical details are collected automatically
  • Real time with WebSockets
  • No extensions needed
  • Anonymous feedback allowed

Cons Link

  • Extension required to capture high-quality screenshots
  • Few systems to integrate with

Third-Party Integration Link

  • Basecamp (both ways)
  • JIRA (both ways)
  • WordPress plugin
  • Modx plugin

Supported Browsers Link

  • Chrome
  • Internet Explorer
  • Safari
  • Firefox
  • bookmarklet (for other browsers)

Pricing Link

You can get a free 14-day trial of the fully functional version. The free version allows for one project and unlimited contributors. Paid subscription plans start at $19 per month. Custom enterprise plans are also available.

BugMuncher Link

Bugmuncher8 is a handy web application allows you to highlight problems on a website. Users can make notes on specific areas of a website where they notice issues. BugMuncher will automatically take a screenshot of the area where the highlight was made and send it to you.

BugMuncher9
BugMuncher allows you to highlight problems on a website.

User Experience Link

Installing and getting started with BugMuncher isn’t complicated. All you have to do is embed the code on your website. Anyone who has ever set up Google Analytics could handle it. There is no onboarding tour, which could be a problem for inexperienced users. Also, when you embed the code on your website, a small shortcut appears for all visitors to the page, allowing them to highlight or (if they need to hide personal data) to black out certain parts of the page. However, you cannot add separate text comments to the web page.

All tasks and bug reports are available in the dashboard
All tasks and bug reports are available in the dashboard. Issues are also visible as pins on the web page itself.

When testing this tool, I couldn’t scroll down the page and was confined to working within the visible area, which is a bit odd.

After you have highlighted an area of the page, you will be prompted to enter your email address, describe the bugs you’ve found and submit them. You can access all reports, configure email alerts and set up integration in the dashboard.

Pros Link

  • Cross-browser
  • Automatically attaches technical details
  • No extension needed
  • Allows for anonymous feedback
  • Supports Internet Explorer down to version 7

Cons Link

  • Not real time
  • Cannot select a particular area of a page
  • No way to comment on dynamic elements on the page

Third-Party Integration Link

  • GitHub
  • activeCollab
  • Bitbucket
  • Trello
  • Zendesk

Supported Browsers Link

  • Chrome
  • FireFox
  • Safari

Pricing Link

A free 30-day trial is available. After that, pricing starts at $19 per month for a personal subscription with one account. There is no limit to how many team members can use BugMuncher; the profile limit refers to separate ‘buckets’ of feedback reports, and different notification options — available for $99 per month.

BugHerd Link

BugHerd10 is a simple bug-tracking and collaboration tool for web designers and their clients. It allows users to flag issues on web pages using a simple point-and-click interface and to submit reports of problems.

BugHerd Main Page11
BugHerd allows users to flag issues using a simple point-and-click interface and to submit reports of problems. (View large version12)

User Experience Link

You don’t need a credit card to sign up. Registration is pretty simple: You can try the tool by installing a browser extension or by adding JavaScript code to your website. Once you’ve done one of these two things, you’ll be able to add websites to work with. Don’t forget to include the http:// or https://, or else it won’t work.

After completing the short onboarding process, you’ll be all set and can pin issues and bugs directly to web pages. You can’t highlight random areas of the page; the tool is tied to DOM elements — a useful but questionable solution. We particularly had problems selecting big areas of the page.

While not a major issue, the indicator can be hard to notice on light and gray backgrounds, so you might have to refer to the task list to find it sometimes.

Another drawback is the size and location of the side panel, which occupies a big part of the page, hiding your pins and most of the page.

The side panel is a bit too big
The side panel is a bit too big.

BugHerd offers quite a lot of integration (we tried Basecamp and JIRA). Unfortunately, integration seems to work only one way for now — tasks created in Bugherd are sent to Basecamp, but if you update them directly in Basecamp, you won’t be notified of the changes in Bugherd.

Bugherd toolbar13
Bugherd’s toolbar. (View large version14)

Overall, the product is very good. The UX is questionable in places — as mentioned, the side panel is just too big. Prices are a little steep, too; prepare to pay almost $100 for a team of five.

Pros Link

  • Highlight bugs directly on the web page
  • Anonymous comments allowed
  • Screenshot automatically sent with every bug report
  • A lot of third-party integration

Cons Link

  • Sidebar is too big
  • Integration with third-party systems is one way
  • Quite expensive
  • Extension required to capture screenshots
  • Expensive for teams

Third-Party Integration Link

  • JIRA
  • Basecamp
  • GitHub
  • Redmine
  • Zendesk
  • Pivotal Tracker

Supported Browsers Link

  • Chrome
  • FireFox
  • Safari
  • Internet Explorer

Pricing Link

Pricing starts at $19 per month. A short free trial is available, after which you’ll have to pay for each user on the account.

Notable Link

Notable2315 is a web-based application for sharing feedback on images, mockups and live website designs. The user takes a screenshot of any interface, draws a box around the area they want to comment on and then types in their feedback.

Notable Main Page16
Notable is a web-based application for sharing feedback on images, mockups and live website designs.

User Experience Link

You start the registration process by entering your payment details, even if you’ve selected a trial account. If you want to skip this step, then you just have to watch a demo video of the service on YouTube and then install the required extension. Then, when you click the extension’s icon, the app automatically takes a screenshot and uploads it to the server. After the upload, you are redirected to the saved screenshot, where you can highlight any area and add comments.

Notable in action17
Notable in action. (View large version18)

It also saves HTML and CSS from the page, including meta tags, in text format. This separation of code, styles and images seems less useful than BugHerd and TrackDuck’s method, but it might appeal to some users.

Pros Link

  • Export custom PDFs
  • Unlimited team members
  • Ability to comment on source code

Cons Link

  • Credit card is required
  • Browser extension is required
  • Cannot mark up dynamic elements of web pages

Third-Party Integration Link

  • No information found

Supported Browsers Link

  • Chrome
  • Internet Explorer
  • Safari
  • Firefox
  • bookmarklet (for other browsers)

Pricing Link

Pricing starts at $19 per month, and a 30-day trial is available. A credit card is required for all plans.

Our Choice Link

Before visual feedback tools, it was difficult to imagine a project manager’s daily workflow without the endless emails and chats between designers and developers. Email was the primary means of communication, and it felt like a big waste of time.

A colleague of ours introduced us to BugHerd, which is an awesome tool for collaborating on web projects, and we started using it. Later, we switched to TrackDuck for a few reasons. First, the service is relatively new and takes advantage of modern web technology. It also offers the same functionality but is significantly more affordable for medium and large teams. In addition, we use Basecamp to manage projects, and the two apps integrate nicely. As a bonus, TrackDuck offers two-way integration, with updates being sent to both systems automatically.

Summary Link

Visual-feedback and bug-tracking services are becoming ever more popular, and integrating one of them into their workflow would simplify the communication process of any web developer. Taking the five that we’ve identified and that we think are the most useful, we’ve laid out the advantages of each in the table below to help you determine which is right for you.

Service Advantages Pricing
InVision LiveCapture192
  • Easy to work with
  • Great for collecting inspirational ideas
  • Ideal for existing customers looking to get more out of Invision
  • Free for InVision users
TrackDuck20
  • Unlimited number of team members
  • Cross-browser
  • Technical details are collected automatically
  • Real time with WebSockets
  • No extension needed
  • Anonymous feedback allowed
  • $0 – $49
  • 14-day trial
  • Free plan forever
BugMuncher21
  • Export custom PDFs
  • Unlimited team members
  • Ability to comment on source code
  • $19 – $199
  • 30-day trial
BugHerd22
  • Highlight problems directly on web page
  • Anonymous comments allowed
  • Screenshot sent automatically with each bug report
  • A lot of third-party integration
  • $29 – $180
  • 14-day trial
Notable2315
  • Export custom PDFs
  • Unlimited team members
  • Ability to comment on source code
  • $19 — $99
  • 30-day trial
  • Credit card required

If you have experience using visual feedback services, please let us know in the comments below.

(al, ml)

Footnotes Link

  1. 1 http://www.invisionapp.com/
  2. 2 http://www.invisionapp.com/new-features/25/livecapture-bring-the-web-into-invision
  3. 3 https://www.smashingmagazine.com/wp-content/uploads/2014/08/01-invision-opt.jpg
  4. 4 https://www.smashingmagazine.com/wp-content/uploads/2014/08/01-invision-opt.jpg
  5. 5 https://trackduck.com
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2014/08/06-trackduck-popover-opt.jpg
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2014/08/06-trackduck-popover-opt.jpg
  8. 8 http://bugmuncher.com
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2014/08/08-bugmuncher-opt.jpg
  10. 10 http://bugherd.com
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2014/08/10-bugherd-opt.jpg
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2014/08/10-bugherd-opt.jpg
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2014/08/12-bugherd-toolbar-opt.jpg
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2014/08/12-bugherd-toolbar-opt.jpg
  15. 15 http://notableapp.com
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2014/08/13-notable-opt.jpg
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2014/08/14-notable-opt.jpg
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2014/08/14-notable-opt.jpg
  19. 19 http://www.invisionapp.com/new-features/25/livecapture-bring-the-web-into-invision
  20. 20 https://TrackDuck.com
  21. 21 https://BugMuncher.com
  22. 22 https://BugHerd.com
  23. 23 http://notableapp.com
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Lusya is a freelance blogger, in the past she has worked as a digital marketeer in web and game development companies. She's interested in IT project management, web design and writing, and tweets as @gde_trava

  1. 1

    I’m currently using TrackDuck.com and what can I say. It’s a perfect tool for visual feedback from your clients.

    -2
    • 2

      We provide website design services to various clients. As we interact with multiple clients at the same time, getting meaningful feedback is critical – we have tried using a lot of different feedback services and here i would recommend two of them:

      1- to get clients feedback on the designs we create, we use NotableApp – the site is notableapp.com, we love the simple UI and interaction with clients.

      2- to get the feedback on website design itself before showing it to clients, we use a service called FeedbackGuru – the site is FeedbackGuru.com – they provide expert feedback on site UI design and recommend changes, which we then pass on to our designers. There are other similar sites too, however, we recommend and use these two.

      2
      • 3

        We have used both NotableApp as well as FeedbackGuru.com – they both are excellent in what they do. Highly recommended!

        1
  2. 4

    Looks like you completely forgot about usersnap (https://usersnap.com) which offers both: on-site feedback via a feedback button and extensions for Chrome and Firefox and 20+ connections to different tools (Asana, Basecamp, …)
    I also tried some of the listed tools above but came back to Usersnap as it was a better fit. Working with it for a long time now and I think its a great product + great customer service

    2
  3. 5

    Nice article and some useful new systems I’ve not looked at before.

    Might be worth highlighting that the fantastic InVision does now support third party integration for JIRA, Slack, Trello, Basecamp etc. – http://www.invisionapp.com/new-features/26/live-embed-bring-your-designs-into-trello-basecamp-slack-and-more

    Thanks :)

    1
    • 6

      Yauhen Ivashkevich

      September 16, 2014 5:07 pm

      TrackDuck already have a bit more integrations too: Slack, HipChat, Trello, Basecamp, Jira, PivotalTracker and more coming soon.
      BTW, InVision is a great tool, thanks for update.

      1
  4. 7

    Looks like you completely forgot about usersnap.com which offers both: on-site feedback via a feedback button and extensions for Chrome and Firefox and 20+ connections to different tools (Asana, Basecamp, …)
    I also tried some of the listed tools above but came back to Usersnap as it was a better fit. Working with it for a long time now and I think its a great product + great customer service

    0
  5. 10

    I am using ViewFlux.com and I have found it to have all the features that I need and I’ve just followed up on the blog and from what I see a lot of new features are going to be out soon.
    Yey!

    1
    • 11

      Viewflux looks awesome! Been using Invison in our small studio but their pricing is mad ($100 a month?!). This one is much more affordable and we get all the features we need, thanks for recommending it.

      0
  6. 12

    You should take a look at http://pageproofer.com

    It is similar to some of the other tools you have listed here but it is extremely easy to setup and use. It works on normal and responsive websites, desktop and mobile devices.

    0
  7. 13

    proof.li is a simple tool that works well.

    Jay

    0
  8. 14

    Haven’t used any of the tools mentioned above, but I used conceptinbox.com when we were working with a designer… it worked quite well. I know that right now they even have a video collaboration feature.

    1
  9. 15

    We’re using notable but are still searching for a tool with deeper hierarchy.

    We’re running lots of projects, and each projects has multiple sub projects and pages and sections….

    Also, frontify is a nice tool.

    3
  10. 16

    Hi Lusya,

    The truth be told, I just did not have a clue about any of the tools you’ve so brilliantly written about in this Blog post.

    I head the software section for a modest sized development house and my team and I have got to interact with designers for various throughput that we meld into our code.

    Its been quite frustrating doing this so far. I’m going to patiently try out each of the tools you’ve mentioned to see if I can get one tool that is a great fit between, us coders, the client and the designers.

    I’ve often been told that designers use the right side of their brain to think (I hope I got that right) and coders use the left side of their brains, whatever side is used, its sometimes quite a job to get everyone on the same page.

    I’m sure this Blog post content is going to help me sort out this old / sticky issue. I think that something like InVision LiveCapture is going to be a real big help for me and the team.

    Fortunately, we all use Chrome as our prime Browser for testing so it ought to be relatively painless to implement this for delivering the coders opinions, the client’s opinions and sharing all of this visually almost painlessly with the designers.

    Your BLog post has been a big help and is deeply appreciated. Thank you.

    Warmly,

    Ivan Bayross

    5
  11. 17

    Thanks for the list Lusya!
    Really like the sound of TrackDuck myself so will give it a go, need a tool like this.

    0
  12. 18

    These are great tools, but I’m looking to take things one step further.

    I often make CSS changes in my browser using Firebug/Dev Tools. I like to experiment with simple things like typography changes or header colors. I’ll often screen grab my latest creation and share the grab with my team. However, this is awkward because screen grabs are obviously static and don’t show things like hover states or scrolling effects. Also, I make multiple versions of the grabs with different fonts, colors, line heights, etc. I’ll label the file name of the grab something like font-size-16px-blue-headers.png so I can remember exactly what I changed.

    It would be great there was a tool that scraped a url and allowed you to make CSS changes to the scraped version to show for feedback. So instead of noting on a screen grab “Make these section headers color #XXX” I would actually like to be able to do that and use indicators to mark whats different. Other team members could fork and then make CSS changes to my existing version. It would be extra cool if once a version of CSS changes were approved that you could then download a new .css file that reflects the changes.

    Does something like this exist? How do you guys keep track of and present changes that you made in Firebug with people that aren’t able to see your screen easily?

    2
  13. 19

    Just wanted to mention that bugherd doesn’t require a browser plugin. You can add javascript the the head of your page and it runs off that. Then if you go into the bugherd admin panel you can send invites to clients and they can use the links in the emails to go to your site and report bugs without having to install anything. Only downside of that is it doesn’t take screenshots of the pages without a plugin.

    0
  14. 20

    Fantastic overview on visual feedback tools. Only tool I’m missing is Notism: https://www.notism.io. They have just released a fantastic new video feature for reviewing motion design work as well as static images.

    Definitely worth trying it out!

    7
  15. 21

    I’ve used Trackduck in a recent freelance project. It was really useful to be able to get feedback on design changes that needed to be done on the website.

    With the free plan, you’re allowed to use it on one website and have a max of 10 open tasks (changes on the site that someone marked up) at a time. Once you close one of the ten open tasks, you can add another task.

    The client found the tool easy to use and I found it prevented me from pulling my hair out when dealing with a client who is very particular about the way things look (even if none of their audience will notice the logo could be moved over 3px to align with some random object on the page) :(

    Alright i’m just starting to rant at this point. Once again, TrackDuck is awesome, highly useful and really easy to use for both you and your client.

    2
  16. 22

    So glad to see InVision included!

    It also just announced full integration with Sketch. When you save your Sketch files to InVision, it extract your screens and assets automatically.

    More information: http://blog.invisionapp.com/sketch-meet-rapid-hi-fi-prototyping/

    0
  17. 23

    This list proves that you can get overwhelmed with different tools out there to gather feedback and build a community. I’ve been using Helprace for collecting customer feedback – but the real selling point is that it also doubles as a ticketing system and a knowledge base. All in one platform. You can check it out here: http://helprace.com

    0
  18. 24

    Like the article! very useful insights on the tools. I would personally recommend trying Voice of Customer: http://usabilitytools.com/voice-of-customer/

    I found it quite useful especially using it on my product page. It helped me a lot to gather valuable feedback from my users in the early stages of my product. Hope this will be useful. Thanks!

    0
    • 25

      Shergul: If i may recommend using FeedbackGuru.com for getting UX feedback in the early stages of your design. For us expert design feedback always worked better than regular usability exercises. Expert feedback is a lot cheaper and convenient.

      0
  19. 26

    Alva Hollinshead

    April 16, 2015 11:34 am

    May I simply say what a comfort to find a person that really knows what they’re talking about on the internet. You definitely realize how to bring a problem to light and make it important. More people should check this out and understand this side of your story. I was surprised that you aren’t more popular because you most certainly possess the gift.

    0

↑ Back to top