Every day, whether we realize it or not, we depend on a lot of visual cues to decide if a product or interface works for us. That’s why it’s up to designers and developers to ensure that product is smooth, easy to use, and functional. The only way to accomplish this is to create a product that’s both useful and visually attractive.
The visual elements of a product — from the way the website copy is structured to the placement of the illustrations accompanying it — serve as small cues to enhance the user experience. It’s vital to review a website from all aspects, including visually. This is where a effective website feedback tool that also promotes collaboration comes into play.
Brucira, ruttl’s parent company, is a product design company, so we’ve made our fair share of websites and web apps. The review process that includes marked-up screenshots and emails isn’t conducive to productivity or collaboration. We built ruttl to overcome those shortcomings. We realized that feedback plays a critical role in web development. To ensure that this visual feedback was used properly, there had to be some guidelines for visual feedback and collaboration during our web projects:
1. Actionable feedback
We’ve discussed this before, but it always bears repeating: feedback should be clear, specific, and actionable. When you use visual feedback tools like ruttl, you can add feedback through comments by tagging the relevant team member — this ensures the team member knows who the feedback is coming from, what needs to be done and can ask any questions for guidance.
Actionable feedback saves a lot of time. Developers and designers can see exactly how the website looks like on ruttl and decide what needs to be changed without needing to recreate the website again and again to tackle multiple bugs or issues.
2. Easy changes
Along with actionable feedback, visual feedback and collaboration tools should also allow you to make quick changes to see how to make the website better. On ruttl, team members can change any images, restructure website elements, and edit the copy without any coding knowledge. This allows the team to go through several versions of the website quickly and easily, with minimal effort.
ruttl also allows you to make changes to live websites — this means that you don’t need to rework the entire website to change a few aspects or take it down when you’re redesigning it. Easy changes allow designers and developers to collaborate better to improve the website’s overall look and feel.
3. Accessible feedback
If you’ve taken the effort to make sure that your feedback is clear and actionable, that’s great! Don’t let your efforts go down the drain by losing the feedback in lengthy email threads or countless marked-up screenshots. Visual feedback and collaboration tools need to ensure that feedback is accessible to everyone involved in the project.
This means that any client or company feedback needs to be correctly relayed and interpreted by the designers and developers. Similarly, any feedback from project managers or senior designers needs to be placed in an accessible and easy to use manner for junior designers, developers, and copywriters working on the website.
On ruttl, to address missing or inaccessible feedback, we designed a global activity panel that also houses all the comments addressed to anyone in the team. Any comments addressed to you will also show up here. Since every comment is placed contextually (more on that below), it’s easy to locate it on any specific webpage for redesign or redevelopment.
4. Multiple versions
What happens if you’ve redesigned the website but forgot to retain some of the previous aspects that users loved? Whether you missed it or have to reach for it due to a change in the brief, visual feedback tools like ruttl also keep multiple versions of your web project. This way, you can revert to any version, take a quick look and rework the latest version to better align with the project guidelines.
Multiple versions also allow you to play around with the visual elements. You can create different versions to test out which looks and works better without having to code every single version. This saves a lot of time, money, and effort and offers excellent results that you can use to boost your final version.
5. Contextual feedback
Simply sending a slack message or an email about a bug isn’t going to get the issue fixed properly. Designers and developers have long-since relied on images, screenshots, and rough sketches to tackle problems through a visual way to ensure clarity and understanding.
ruttl takes this one step further by allowing you to place comments exactly where the issue is. Say you want to move the copy a little to the left? If you don’t have access to edit the website, you can quickly place a comment right where the text currently stands and clearly say what you want to be changed.
ruttl also makes it easy for developers to pick up the codes and rework the websites to meet the designers and the clients' expectations. This way, you can create pixel-perfect websites and ensure that your web development and design teams can collaborate easily.
We’re a product design agency ourselves, so we’ve known first-hand the problems faced when you cannot incorporate visual feedback when creating websites. From early-stage sketches to wireframes to the final version that goes live, every single web project has numerous changes. These changes, both little and large, take up a lot of time and effort.
Clear, actionable, and accessible feedback that’s placed contextually can really help speed up web development projects while also delivering high-quality work.
Excited about ruttl? Check out more of our features here: ruttl.com
Follow us on LinkedIn | Instagram | Twitter | Facebook to stay updated about new trends and updates in the design industry and in our company.
