Informal Feedback in a Single Click

September 26, 2014

There are many ways to capture feedback from users & testers, from feedback buttons built into the app to issue trackers and tools like JIRA Capture. Another method we have been using, especially for upcoming releases or new features or widgets, within the OpenMRS community is a side-by-side feedback page.

feedback-page

The application is on the left and an etherpad on the right. While I am not suggesting this as an approach for issue tracking, but we have found it to be a quick & easy way of collecting community feedback.  The combination of a link taking them directly to the product to be tested along with the near-zero activation energy required by etherpad makes it a handy combination.  It’s also nice to be able to throw a brief intro into the etherpad to direct people on what to test and how to report feedback.  And lastly, there’s a nice side effect of people seeing each other’s activity in real time.  When combined with a developer responding to feedback and re-deploying fixes in real time, it can be incredibly powerful.

Anyway, the main reason I decided to blog on this is because I tweaked our side-by-side tool a bit and wanted to throw my one-page feedback HTML in here for the next time I need it.  Here it is:

<html>
<head>
<title>Feedback</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<style type="text/css">
.header {
	width: 100%;
	height: 20px;
	float: left;
	overflow: hidden;
}
#feedbackButton {
	position: relative;
	left: 1050px;
	text-decoration: none;
	font-weight: bold;
	cursor: pointer;
	font-family: arial;
}
#content {
	width: 1050px;
	height: 98%;
	float: left;
	overflow-y: auto;
	overflow-x: hidden;
}
#contentFrame {
	min-width: 1000px;
}
#feedback {
	width: 550px;
	height: 98%;
	float: right;
	overflow: hidden;
}
</style>
</head>
<body style="margin:0; padding:0; width:1600px">
<div class="header">
	<span id="feedbackButton"></span>
</div>
<div id="content">
  <iframe id="contentFrame" src="" width="100%" height="100%"></iframe>
</div>
<div id="feedback">
  <iframe id="feedbackFrame" src="" width="100%" height="100%"></iframe>
</div>
</body>
<script>
$(document).ready(function() {
	function getParam(name) {
		var value = new RegExp('[\?&]' + name +
			'=([^&#]*)').exec(window.location.href);
		return (value == null ? null : decodeURIComponent(value[1]) || 0 )
	}
	function config(conf) {
		$('title').text(conf.title)
		$('#contentFrame').attr('src', conf.left)
		$('#feedbackFrame').attr('src', conf.right)
	}
	function setButtonLabelAndPosition() {
		$('#feedbackButton').html($('body').scrollLeft() > 0 ?
			'move &rarr;' :'&larr; move')
		$('#feedbackButton').offset({top:0, left:Math.min(
			1050, $(window).width() + $(window).scrollLeft() - 75)})
	}
	$(window).resize(function() {
		if ($(window).width() >= 1600) {
			$('#feedbackButton').hide()
		} else {
			$('#feedbackButton').show()
			setButtonLabelAndPosition()
		}
	})
	$(window).scroll(setButtonLabelAndPosition)
	$('#feedbackButton').click(function() {
		$(window).scrollLeft($(window).scrollLeft() > 0 ? 0 : Math.max(
			550, 1600 - $(window).width()))
	})
	setButtonLabelAndPosition()
 
	/*
	 * Configure side-by-side feedback by providing the
	 * following properties:
	 *   title = Title of page
	 *   left = URL of site to be reviewed
	 *   right = URL of page (e.g., etherpad) for feedback
	 */
	config({
		title : getParam('title'),
		left  : getParam('left'),
		right : getParam('right')
	})
})
</script>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *


*