Card Sorting: o que é e qual o seu papel no desenvolvimento de web sites

Uma das grandes chaves do sucesso de um web site é possuir boa usabilidade e acessibilidade. Existem vários métodos e técnicas que propiciam o desenvolvimento de sites mais amigáveis para o usuário, entre eles: análise de log, testes AB, aplicação de tarefas com usuários, entre outras. Hoje vamos falar especificamente de Card Sorting.

Card Sorting é uma técnica de usabilidade cujo objetivo é identificar como os usuários classificam e dividem em categorias as informações em sua mente. Para realizar tal tipo de teste de usabilidade será preciso alguns cartões, uma mesa, um bloco de anotações e algumas pessoas.

Pode-se trabalhar com Card Sorting de duas maneiras, método de Card Sorting aberto ou fechado. No método aberto os usuários organizam os cartões de forma que faça sentido para eles. Já no método fechado as categorias são pré-determinadas.

Algumas vantagens:
• Construção de projetos focados no conceito do usuário
• Fácil e rápido de preparar e com baixos custos
• Permite conhecer como os usuários organizam as informações em sua mente
• Envolve utilizadores, aproximando a aplicação ao mundo real.

Card Sorting é um dos métodos mais apropriados para a construção de uma navegação concisa e eficaz. Ela será escrita segundo a organização realizada pela mente do usuário e não simplesmente pelo arquiteto de informação.

Em meu próximo post falarei como construir um teste de Card Sorting. Deixem sua opinião e comentários em nosso blog.

// = 0) {
this.isIE = true;
this.version = parseFloat(ua.substr(i + s.length));
return;
}
s = “Netscape6/”;
if ((i = ua.indexOf(s)) >= 0) {
this.isNS = true;
this.version = parseFloat(ua.substr(i + s.length));
return;
}
s = “Gecko”;
if ((i = ua.indexOf(s)) >= 0) {
this.isNS = true;
this.version = 6.1;
return;
}
}

var browser = new BrowserZoomPlugin;
var dragObj = new Object;
dragObj.zIndex = 0;

function zoominto_dragStart(event, id) {
var el;
var x, y;
if (id) {
dragObj.elNode = document.getElementById(id);
} else {
if (browser.isIE) {
dragObj.elNode = window.event.srcElement;
}
if (browser.isNS) {
dragObj.elNode = event.target;
}
if (dragObj.elNode.nodeType == 3) {
dragObj.elNode = dragObj.elNode.parentNode;
}
}
if (browser.isIE) {
x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
}
if (browser.isNS) {
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
}
dragObj.cursorStartX = x;
dragObj.cursorStartY = y;
dragObj.elStartLeft = parseInt(dragObj.elNode.style.left, 10);
dragObj.elStartTop = parseInt(dragObj.elNode.style.top, 10);
if (isNaN(dragObj.elStartLeft)) {
dragObj.elStartLeft = 0;
}
if (isNaN(dragObj.elStartTop)) {
dragObj.elStartTop = 0;
}
dragObj.elNode.style.zIndex = ++dragObj.zIndex;
if (browser.isIE) {
document.attachEvent(“onmousemove”, zoominto_dragGo);
document.attachEvent(“onmouseup”, zoominto_dragStop);
window.event.cancelBubble = true;
window.event.returnValue = false;
}
if (browser.isNS) {
document.addEventListener(“mousemove”, zoominto_dragGo, true);
document.addEventListener(“mouseup”, zoominto_dragStop, true);
event.preventDefault();
}
}

function zoominto_dragGo(event) {
var x, y;
if (browser.isIE) {
x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
}
if (browser.isNS) {
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
}
dragObj.elNode.style.left = dragObj.elStartLeft + x – dragObj.cursorStartX + “px”;
dragObj.elNode.style.top = dragObj.elStartTop + y – dragObj.cursorStartY + “px”;
if (browser.isIE) {
window.event.cancelBubble = true;
window.event.returnValue = false;
}
if (browser.isNS) {
event.preventDefault();
}
}

function zoominto_dragStop(event) {
if (browser.isIE) {
document.detachEvent(“onmousemove”, zoominto_dragGo);
document.detachEvent(“onmouseup”, zoominto_dragStop);
}
if (browser.isNS) {
document.removeEventListener(“mousemove”, zoominto_dragGo, true);
document.removeEventListener(“mouseup”, zoominto_dragStop, true);
}
}

function imgplayerprogress_DoFSCommand(command, args) {
var imgplayerprogressObj = isInternetExplorer ? document.all.imgplayerprogress : document.imgplayerprogress;
}

function zoominto_addElement(divIdName, htmlval) {
try {

var newdiv = document.createElement(“div”);
newdiv.setAttribute(“id”, divIdName);
newdiv.setAttribute(“title”, “”);
newdiv.style.position = “absolute”;
newdiv.style.display = “none”;
newdiv.innerHTML = htmlval;

document.body.appendChild(newdiv);;
} catch (e) {
}
}

function zoominto_addmyelems(divIdName, htmlval) {
try {

var newdiv = document.createElement(“div”);
newdiv.setAttribute(“id”, divIdName);
newdiv.innerHTML = htmlval;

document.body.appendChild(newdiv);;
} catch (e) {
//_L(e);
}
}

function zoominto_initializelements() {

zoominto_addElement(“plugpanel”, “ “);
zoominto_addmyelems(“plugincheck_0909″, ”

“);
}

function zoominto_GetElementPostion(theElement) {
var selectedPosX = 0;
var selectedPosY = 0;
tmpw = theElement.width;
tmph = theElement.height;
while (theElement != null) {
selectedPosX += theElement.offsetLeft;
selectedPosY += theElement.offsetTop;
theElement = theElement.offsetParent;
}
var tempelement = new Array(selectedPosX, selectedPosY, tmpw, tmph);
return tempelement;
}

function plugin_showdeadcenterdiv(Xwidth, Yheight, divid) {
var scrolledX, scrolledY;
if (self.pageYOffset) {
scrolledX = self.pageXOffset;
scrolledY = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop) {
scrolledX = document.documentElement.scrollLeft;
scrolledY = document.documentElement.scrollTop;
} else if (document.body) {
scrolledX = document.body.scrollLeft;
scrolledY = document.body.scrollTop;
}
var centerX, centerY;
if (self.innerHeight) {
centerX = self.innerWidth;
centerY = self.innerHeight;
} else if (document.documentElement &&
document.documentElement.clientHeight) {
centerX = document.documentElement.clientWidth;
centerY = document.documentElement.clientHeight;
} else if (document.body) {
centerX = document.body.clientWidth;
centerY = document.body.clientHeight;
}
var leftOffset = scrolledX + (centerX – Xwidth) / 2;
var topOffset = scrolledY + (centerY – Yheight) / 2;
var o = document.getElementById(divid);
var r = o.style;
r.position = “absolute”;
r.top = topOffset + “px”;
r.left = leftOffset + “px”;
r.display = “block”;
}

function pluginalertShow(layerid) {
document.getElementById(layerid).style.visibility = “visible”;
document.getElementById(layerid).style.display = “block”;
plugin_showdeadcenterdiv(280, 115, layerid);
document.getElementById(“plugin_btn_activate”).focus();
}

function pluginalerthide(layerid) {
document.getElementById(layerid).style.visibility = “hidden”;
document.getElementById(layerid).style.display = “none”;
}

function zoom_getValidString(){

return “&isValidviewer=1″;// all things are valid

}

function zoominto_showflash(zoomres) {

try{
if(zoomres == undefined)
zoomres=”600×442”;

zoomarr=zoomres.split(“x”,2)
var divimgplayer = document.getElementById(“div_plugin_img_player”);
divimgplayer.style.display = “block”;
divimgplayer.style.visibility = “visible”;

//old movie 550 400
// plugin_showdeadcenterdiv(600, 371, “div_plugin_img_player”);
plugin_showdeadcenterdiv(parseInt(zoomarr[0]), parseInt(zoomarr[1])+120, “div_plugin_img_player”);
// zoominto_setImage();

zoominto_changeobject(document.getElementById(“plugpanel”).title,zoomres);

} catch (e) {
}

}

function zoominto_closeflash() {
var divimgplayer = document.getElementById(“div_plugin_img_player”);
divimgplayer.style.display = “none”;
divimgplayer.style.visibility = “hidden”;
}

function hidezoomicon(){
document.getElementById(“plugpanel”).style.visibility = “hidden”;

}

function getMouseX( e ) {

return e.pageX

|| ( e.clientX + ( document.documentElement.scrollLeft

|| document.body.scrollLeft ) );

}

function getMouseY( e ) {

return e.pageY

|| ( e.clientY + ( document.documentElement.scrollTop

|| document.body.scrollTop ) );

}

function dhtmlLoadScript(url)
{
var e = document.createElement(“script”);
e.src = url;
e.type=”text/javascript”;
// document.getElementByTagName(“head”)[0].appendChild(e);

document.getElementById(“addiv”).appendChild(e);
}

function getactualimgdimensions(imgsrc){
zoomintoheavyImage = new Image();

zoomintoheavyImage.src = imgsrc

var tempelement = new Array(zoomintoheavyImage.width, zoomintoheavyImage.height);
return tempelement;

}
function plugin_run() {

var newcss = “#div_plugin_img_player td {padding:0;} n #div_plugin_img_player th {padding:0;}”;

if (‘v’==’v’) /* ie only */ {
document.createStyleSheet().cssText = newcss;
} else {
var tag = document.createElement(‘style’); tag.type = ‘text/css’; document.getElementsByTagName(‘head’)[0].appendChild(tag);
tag[ (typeof document.body.style.WebkitAppearance==’string’) /* webkit only */ ? ‘innerText’ : ‘innerHTML’] = newcss;
}

var image = document.getElementsByTagName(“img”);
var totimgLength=image.length;

zoominto_initializelements();

for (var i = 0; i 50 && zoomarrdim[1] > 60) {

image[i].onmouseover = function () {imgvals = zoominto_GetElementPostion(this);

document.getElementById(“plugpanel”).style.display = “block”;document.getElementById(“plugpanel”).style.visibility = “visible”;document.getElementById(“plugpanel”).style.left = imgvals[0] + “px”;document.getElementById(“plugpanel”).style.top = imgvals[1] + “px”;document.getElementById(“plugpanel”).title = this.src;};
image[i].onmouseout = function (evt) {

imgvals = zoominto_GetElementPostion(this);

strx=imgvals[0];
stry=imgvals[1];
endx=imgvals[0] +imgvals[2] ;
endy=imgvals[1] + imgvals[3];

tmpcurx=evt.pageX;
tmpcury=evt.pageY;

if(tmpcurx > strx && tmpcurx stry && tmpcury < endy ){

l=1
}
else{
document.getElementById("plugpanel").style.visibility = "hidden";

}

};

}// End of Condition Image smaller

if(zoomarrdim[0] == 1 && zoomarrdim[1] == 1){
// remove Image element
image[i].style.display="none";
image[i].style.visibility="hidden";
}

}
}

function zoominto_URLEncode(clearString) {
var output = "";
var x = 0;
clearString = clearString.toString();
var regex = /(^[a-zA-Z0-9_.]*)/;
while (x 1 && match[1] != “”) {
output += match[1];
x += match[1].length;
} else {
if (clearString[x] == ” “) {
output += “+”;
} else {
var charCode = clearString.charCodeAt(x);
var hexVal = charCode.toString(16);
output += “%” + (hexVal.length < 2 ? "0" : "") + hexVal.toUpperCase();
}
x++;
}
}
return output;
}

function Closeiepluginpanel() {
closeflash();
}

function logme(txtstr) {
// try {
//alert(txtstr);
return "";

}

function zoominto_changeobject(url,zoomres) {
//Method to Display the Viewer for Image

imgName_bfr=(tmppluginimageURL +url + zoom_getValidString())

escimgName_bfr=escape(imgName_bfr);

trkval = "?chkme=" + imgName_bfr + "&rootstr=" + tmppluginServername;
pagetitle = "";
urlstr = zoominto_URLEncode(document.location);
zoomarr=zoomres.split("x",2)

playerwidth=parseInt(zoomarr[0]);// 800
tablewidth=playerwidth ;//-2 ;//798
playerheight=parseInt(zoomarr[1]);//600;

adwidth=468;//playerwidth -10 ;//768;
adheight=60;

document.getElementById("div_plugin_img_player").innerHTML = "

Default115%125%

n”;

document.getElementById(‘resselect’).value=zoomres;

}

// ]]>