Website Comments: The Best Options for Annotating Sites

Feedback is crucial at every stage of the design process. What if you could leave comments among your team directly on top of the designs? It would make your life so much easier! Fortunately, there are plenty of tools for leaving website comments.

You can even leave comments directly in the HTML code if you prefer. That said, the tools we now have make it easier and cleaner to view your colleagues’ feedback.

Here’s everything you need to know.

How To Add a Comment Box in HTML

It’s always useful to know how to add a comment box in HTML. That way, you can communicate with other developers easily without it being visible to the end user.

The code snippet is simple. Just use <!– –>. Anything that appears between <!– and  –> will not display in the browser.

Generally, though, using this code isn’t useful for providing feedback. It can be confusing if you’re looking at the front end and then having to dive into the code to find the feedback.

So, code comments are better if you want to make notes of your code, helping others to understand it.

For the rest, you’ll need a commenting tool.

What Is a Website Commenting Tool?

A website commenting tool allows you to provide feedback on a website that you can share with colleagues. 

There are a couple of different options for using these tools. A comments plugin can work directly with tools like Figma, allowing you to overlay your designs with feedback. 

Others are third-party tools where you can paste your designs to add feedback. It’s like adding screenshots to a Google Doc and then using the commenting feature to provide your thoughts.

This would be a complicated process. There are plenty of tools that make it far easier, with better aesthetics and a cleaner interface.

As a UXer, you probably know the importance of a good user interface. However, some of these tools cost money. 

So why bother investing in them?

Why Add Comments To Website Layouts?

The right tool can open a lot of doors for you and your team.

When you can add comments to website designs, you can:

• Annotate quickly: Having the design in front of you means you can leave comments without diving into the code. You can leave multiple comments, jot down your train of thought, or go into more detail. And all of this takes very little effort!
• Highlight elements and text: Some tools allow you to highlight what you’re talking about. This goes beyond a screenshot and makes it easy for everyone to see the feedback. In many ways, it makes feedback more actionable!
• Leave comments for review: Most tools are shareable. You can edit and leave comments in real time, and these comments remain up for review. That way, they can stay in a place that’s easy to find until someone fixes the issue.
• Directly send feedback: Certain tools allow you to send reports and feedback directly to the issue tracker. It speeds up the process!
• Receive email notifications: Have you ever missed a comment? And then it was days before addressing a problem? Notifications prevent this from happening, giving you updates on any and all feedback.

These are just some of the features that come with commenting tools. Each one is different, so it may have a variety of unique capabilities.

Regardless, having one on hand can really help your team streamline the design process.

And by the way, good UI can increase a website’s conversion rate by 200%, according to a report by Forrester, while improved UX can increase it by 400%. Getting your design right is crucial, and feedback will spur on this process.

What’s the Best Website Feedback Tool?

There is no one right answer to this question. Indeed, the best website feedback tool depends on your company and its needs.

For smaller companies, there may be budget constraints. Meanwhile, for larger companies, your focus might be how many accounts you can create or implementing real-time editing.

Here are four of the best website feedback tools to try.

1. Framer

Framer is a great tool for website design. It allows you to build clickable prototypes in a seamless, clean interface. Its features include version control, team collaboration, and, of course, commenting.

Adding comments in Framer is really simple. Just follow these steps:

1. Open the editor.
2. In the top navigation bar, click on Comment. The icon will turn blue. This means you are now commenting, not editing.
3. Click on any element where you want to leave a comment. A pop-up box will appear.
4. Write your comment, then hit enter or click the arrow to post it.
5. All comments will appear in a thread on the right-hand side.
6. If you want to view a comment, click on it, and the window will zoom in on the relevant element.
7. Expanding the comment also allows you to reply to it with your own opinions or feedback.
8. Tag people in the comments by writing an @ followed by their name.
9. To stop commenting, click on Comment again in the top navigation bar.

One of Framer’s main selling points is its ease of use, and commenting is no different.

2. Miro

If you’re looking for a tool that has everything you need, it’s Miro. The design boards have all the bells and whistles to create wireframes, prototypes, and beyond. There are multiple plans with different price points, but most offer the tools you need.

Compared to Framer, it’s a little more complicated. Still, it’s a great tool. Here’s how to add comments in Miro:

1. Open the board you want to edit.
2. Zoom in on the section to focus on.
3. In the navigation bar on the left-hand side, click on the Comments icon. This puts you in commenting mode. 
4. Click the element or text you want to comment on. A pop-up box will appear.
5. Type your comment, then press the paper plane icon to post it.
6. You can reply to comments by opening up the comment and typing in the box below.
7. Mention people using the @ symbol followed by their name.
8. Click on the comments icon on the top navigation bar to open a sidebar showing the entire comments thread. Click on a comment to hone in on the element, reply, and so on.

Each comment has tons of options to personalize the experience, including:

• Resolving comments by toggling the Resolve button on.
• Changing the color of the comment to denote something different and categorize feedback.
• Turning alerts on and off using the bell icon.
• Reacting to comments and replies with emojis.
• Pinning comments.

Also, you can view all comments from the Miro dashboard. So, you don’t even need to access the specific boards to see people mentioning you.

This wealth of features is what sets Miro apart.

3. Figma

Most designers are familiar with Figma by now. UX teams use this tool for practically everything, and that includes providing feedback.

Here’s how to add comments in Figma:

1. Open your board.
2. Click on the speech bubble icon in the top navigation bar. It will turn purple to show that you are commenting.
3. Click somewhere on the screen where you want to comment. A pop-up bubble will appear.
4. Type your comment, and click the arrow icon to post it. You can also add emojis and mentions.
5. Hovering over a comment bubble will reveal the comment. From there, you can reply, mention, and so on.
6. Use the image icon at the bottom of the comment box to upload a picture. This can help you illustrate your point further.

Figma’s commenting feature is relatively basic, but it gets the job done!

4. Notion

Typically, people use Notion for organizing and task management. However, it has a huge range of uses, and that includes team collaboration and providing feedback.

It’s not a wireframing or prototyping tool. So, you’ll need to add screenshots or examples of your website to your Notion pages.

From there, here’s how to add comments in Notion:

1. Open the relevant page.
2. Hover over the element you want to comment on. Six dots will appear on the left-hand side. Click on this to expand the menu.
3. Click on Comment. A pop-up box will appear.
4. Write your comment in the box, using @ to mention people.
5. Hover over the comment to reply, edit, or resolve by clicking the Tick icon.
6. You’ll be able to see all comment notifications in the ‘Updates’ section, located in the Notion navigation menu.

For smaller enterprises, Notion certainly does the job. 

How To Design Posts and Comments Areas on Websites

Another way to garner feedback is from users themselves, and for that, you’ll need comment boxes. 

If you’re wondering how to design posts and comment areas on a website, then it depends. It varies depending on the way you’re building your website.

However, what we will say is that you definitely need one! Your users can provide feedback on website issues, such as slow loading speeds. Or, they can comment on your content and engage with your brand.

Don’t miss out on this important step!

Website Comments Examples

Some companies add interactive online surveys integrated into their web pages. As a result, users can more easily leave feedback. 

Here are some website comments examples:

• Net promoter score survey: This measures customer loyalty. It asks the user how likely they are to recommend your product/service. 
• Customer satisfaction score survey: This gauges satisfaction, asking users to rate their experience on a scale.
• Customer effort score survey: Measures the ease of experience in completing a task. 
• Website visitor experience survey: Captures feedback on the overall experience.
• Website content feedback form: Collects feedback on specific pieces of content, such as blog posts.
• Product feedback form: Asks users to provide feedback on a product.

All of these types are essential. Implementing them means you have a helpful feedback loop to iterate and improve your product.

You can also add some of the nicer website comments to your home page in the form of testimonials.

Learn More With Page Flows

So, there you have it. That’s how to add website comments in different tools. Creating a team dynamic where everyone can provide and act on feedback is essential for developing the best products.

Speaking of the best products, if you’re looking for design inspiration, why not learn from amazing examples? Page Flows is a helpful resource for finding interaction design ideas. Get started today to access our growing library of user flow recordings and finally stay up-to-date with current design trends.