I have a come to a point in my day job where I would like to know how the users are actually using our application. For this I need someone or some people to do some usability testing, not lots, but some. Anything in fact, would be better then where we are now.  Let me give you a bit of background.

We design and build a product in New Zealand, and it is marketed and sold to clients in the USA. We, the developers don’t garner a lot of feedback from our management about how the users actually use the software, just the list of what’s wrong with it and what needs to be added e.g. bugs and feature requests,  the usual whip cracking.

Very few of the feature requests come from actual end users. The features and product direction are driven by management, not users. Which in itself is not all bad, they know the market and have a good understanding of what the product needs to be able to do to keep up with our competitors. However, as a developer who wants to improve the users experience of the application I would love to start doing some usability testing. Nothing exciting like setting up a special room with darkened glass windows where the developers watch eagle eyed the subjects use the application. Some basic Q & A with customers and someone observing how people use the application once a month would do!

Doing it wrong

So my question to you is, if you do usability testing at your company, how do you do it and how has it changed your product, has it proved beneficial to your product?

If you have no idea what usability testing is, have a watch of this video: Usability Testing, the least you can do.

Answers on a post card

In the app I work with we have a list of search engines thus:

<select name="_select_criteria" id="_select_criteria">
 <option value="" selected></option>
 <option value="Altavista">Altavista</option>
 <option value="AOL">AOL</option>
 <option value="Ask Jeeves">Ask Jeeves</option>
 <option value="Comcast">Comcast</option>
 <option value="Earthink">Earthink</option>
 <option value="Google">Google</option>
 <option value="Google Images">Google Images</option>
 <option value="MSN">MSN</option>
 <option value="Netscape">Netscape</option>
 <option value="Windows Live Search">Windows Live Search</option>
 <option value="Yahoo">Yahoo</option>
</select>

Now when the page loads the first time, we have no way of determining what should be selected as the default, after something has been selected, that’s relativly easy to handle server side.

I wrote a quick piece of javascript to come up with a solution to setting the default value of the select box. Thus:

Ext.onReady(function(){
 // set the search box to google as it defaults there.
 // query for the select criteria box.
 var selectbox = Ext.get('_select_criteria');

 Ext.each(selectbox.options, function(item, index){

// iterate and set the select box's selected index to whatever position google is.
 if(item.value == "Google")
 {
     selectbox.selectedIndex = index;
 }
 });
});

That’s why I love Javascript! especially with Ext… Yum!

If anyone still reads this after the other domain expired (I trust most of you updated your links/subscriptions) I’ll explain the reason behind my prolonged absence.

I’ve been studying for a MySQL exam, the certified developer exam part 1. Ok not big news in itself, but it was big for me, I’ve given it 6 months and a heck of a lot of practice and I’m please to say I passed on Friday 1st May with a score of 61 / 70.Couple that with the fact that it’s probably the first legitimate study I’ve undertaken since being 17 and breezing through high school.

So, now that’s down I’m gonna hold up on the study for a short time as the Mrs and I are planning on getting busy, heh not like that… although…. hahha stop now. We’ve got some projects under way, wheels in motion that kind of thing that we want/need to focus on.

So After passing this exam, I’m think give it a gcouple of week / months and hit the books again for part two, by which time it’ll be defunct as Oracle will have totally owned MySQL.

Changing the subject a little, if you get the chance and are around in Auckland for the next few weeks, take the time to go to the Comedy Festival. You won’t regret it. We went to see the opening night’s “Big Show”, yeah it’s actually called “the big show” it was fantastic, the comedians included Dan Nightingale (Preston, UK – I used to live there, awesome funny chap), Lindsay Webb (Aussie, who heckled me for going to Mexico on honeymoon) and a guy called Carey Marx, who I think stole the show! His timing and delivery was just fantastic, all of these guys plus a couple more who I can’t remember made for a fantastic night out! So go see some comedy.

Time to get back to some javascripting posts now…

James

Ext-Perience has moved, although not far, it’s a change of theme and a change of URL so update your bookmarks and feed reader settings etc…

The 1018 domain was expiring at the end of April and since this was the only thing on that domain I decided to move home to wordpress.com for the managed hosting of this blog.

Everyone will get 301′d here from now on so hopefully I won’t loose any valuable traffic or linkage. If I do, not worries.

Hopefully this new hosted blog will inspire me to post more often as the other one started to run into technical difficulties due to the hosting provider, but you get what you pay for and I paid nothing so I have no room to complain.

By the way, I’m thinking of trying to push this blog a little more now they’ve released Ext Core, very cool idea guys… would anyone like to write a piece on here or a regular column? Leave a comment if you’re interest.

I know I don’t blog as often as I should but, my microblogging is second to none! Why not follow me on Twitter as well.

jameshd out.

Turns out, there’s not a great deal of difference in the length of the code, maybe the clarity and readability is slightly improved with jQuery, although looking at it there’s not a great deal in it. So for shits n giggles here’s my jQuery code:

<script type="text/javascript">

$(document).ready(function(){
$("#select_none").click(function(){
$(":checkbox").attr("checked", false);
$("#update_button").attr("disabled", true);
return false;
});

$("#select_all").click(function(){
$(":checkbox").attr("checked", true);
$("#update_button").attr("disabled", false);
return false;
});

// clear all checkboxes.
$("#select_none").click();

$(":checkbox").click(function(){
if($(this).attr("checked") == true)
{
if($("#update_button").attr("disabled")==true)
$("#update_button").attr("disabled", false);
}
else
{
if($(":checked").length == 0)
{
$("#update_button").attr("disabled", true);
}
}

})
});

FYI if you’re interested in checking out jQuery in more detail, have a look at the post over on Ajaxian filled with jQuery videos presented by John Resig himself.

First the 3 buttons to perform the actions.

<div style="text-align:right;margin:5px;clear:left"><input id="select_none" onclick="selectNone();" type="button" value="Select None" />
<input id="select_all" onclick="selectAll();" type="button" value="Select All" />
<input id="update_button" onclick="update_charts();" type="button" value="Update Graphs" /></div>

Easy enough, we’re going to implement the select all and select none operations first. I use the onclick attribute because, well you’ll see don’t like calling an elements click() handler when it hasn’t actually been clicked!

function selectAll(){
var checkboxes = Ext.query('input[id*=state_]');
Ext.each(checkboxes, function(obj_item){
obj_item.checked = true;
});

Ext.getDom('update_button').disabled = false;
}

function selectNone(){
var checkboxes = Ext.query('input[id*=state_]');
Ext.each(checkboxes, function(obj_item){
obj_item.checked = false;
});

Ext.getDom('update_button').disabled = true;
}

Two features I love here are the Ext.getDom() method and the query with the wildcard (*=) pattern match. great stuff Ext team!

Now for the coolness, I wanted to write 1 block of code, which would add the event handler to each checkbox and take care of enabling / disabling the update button for me. Here’s what I came up with:

// add disabling / enabling code.
Ext.onReady(function(){

// clear the check boxes , this is why it's a separate function
selectNone();

// add a click event handler to each checkbox.
var checkboxes = Ext.query('input[id*=state_]');
Ext.each(checkboxes, function(obj_item){

Ext.get(obj_item).on('click', function(event, checkbox){

up_button = Ext.getDom('update_button');
if(checkbox.checked == true){
if(up_button.disabled = true)
up_button.disabled = false;
}
else
{
if(Ext.query('input:checked').length == 0) // great place to use the selectors
up_button.disabled = true;
}
});
});
});

This code handles the disabling and enabling, it’s really simple to understand too, I’m pretty sure jQuery could do this with less code, due to it’s method chaining abilities. One thing I would have loved to do is this, but I don’t think it’s possible:

// apply handler direct from the query() method. You can do this with jQuery.

var checkboxes = Ext.query('input[id*=state_]').on('click', function(event, checkbox){

up_button = Ext.getDom('update_button');

if(checkbox.checked == true){
if(up_button.disabled = true)
up_button.disabled = false;
}
else
{
if(Ext.query('input:checked').length == 0)
up_button.disabled = true;
}
});
});

Alas, it was not possible so I forfeit 1 extra line of code to get something working right, not a big deal really eh?

James @twitter

Take for example the following array.

$list =   array('AL'=>"Alabama",
'AK'=>"Alaska",
'AZ'=>"Arizona",
'AR'=>"Arkansas",
'CA'=>"California",
'CO'=>"Colorado",
'CT'=>"Connecticut",
'DE'=>"Delaware",
'DC'=>"District Of Columbia",
'FL'=>"Florida",
'GA'=>"Georgia"

... and so on

I won’t paste the entire code as it’d just waste space.

To get that into a 4 column list proved rather tricky.  My first attempt was using an Ext.FormPanel, combined with PHP to generate the array. Not a glamorous solution by any means but it worked .

Here’s the code. It’s pretty self explanatory. are in mind the list variable from above.

<script>

/**
* here we loop our $list variable creating some JSON objects
* which match the specification for an Ext.Checkbox
* The PHP you see just stops the last , being added to the list, IE chokes on that!
*
*/
var _list_items = [
< ?php $lastKey = count($list); $i = 0; foreach($list as $program_id => $program_name): $i++?>
{
boxLabel: '< ?php echo ucwords($program_name);?>',
name: 'programs[]',
inputValue : '< ?php echo $program_id;?>'
}< ?php echo ($i !== $lastKey) ? "," : "";?>
< ?php endforeach;?>
];

Ext.onReady(function(){

/*
Create our FormPanel variable in the usual panel way.
*/
var _fp = new Ext.FormPanel({
renderTo: Ext.getBody(),
frame:true,
title : 'States',
method: 'POST',
url : 'post.php', // dummy page, which spits back the variables passed through
width: 795,
autoHeight:true,
bodyStyle : {
padding: '10px'
},
/**
After seeing the examples of this it's pretty easy, the one thing to rememember is if you don't want a random
Colon (:) to appear in the top left when you enter no fieldLabel, use hideLabel, I think there's a bug for the Ext Boys.

*/
items : [{
xtype: 'checkboxgroup',
hideLabel : true,
id : "program_checkboxes",
itemCls: 'x-check-group-alt',
columns: 5,
vertical: true,
items: _list_items // our php generated list.
}],
// add some funky buttons. bbar is such a cool config option!
bbar : [
'->',
new Ext.Button({
text : 'Clear',
handler : function(){
_fp.getForm().reset();
},
style : {
display: 'inline',
margin : '0px 5px'
}
}),
new Ext.Button({
text: 'Save',
style : {
display: 'inline',
margin : '0px 5px'
},
handler: function(){
if(_fp.getForm())
{
_fp.getForm().submit();
}
}

})]
});
});

</script>

So that should be sufficient to get your Ext.FormPanel displaying check boxes vertically. What surprised me though, was the amount of processing it took to render! Reloading that simple script caused my Firefox to freeze on several occasions. Not sure why!

Anyway here’s how it looked;

After the serveral crashes I decided to try some PHP to lighten my mood.  The solution I came up with is a little tricky to get your head around but, is very flexible, and doesn’t crash the browser so much. All it takes is a little PHP and CSS.

<div id="form-container">

< ?php

// set the maximum columns as a hard limit.

$max_cols = 4;

// determine how many rows to output per column
$perCol = round(ceil(count($list) / $max_cols));

// create two numerically indexed array of keys and values.
// this is important, because our initial array is indexed by strings, we need to re index them.
$names = array_values($list);
$ids = array_keys($list);

// now its a simple case of looping and creating a column out of a div each time.
?>

< ?php for ($i = 0; $i < $max_cols; $i++):?>
<div class="programcol">
<ul>
< ?php for ($js = 0; $js < $perCol; $js++):?>
< ?php if(strlen(current($names)) > 0):?>
<li>
<input type="checkbox" name="programs[]" value="<?php echo current($ids);?/>">
<label>< ?php echo ucwords(current($names));?></label>
</li>
< ?php endif;?>
< ?php next($names); next($ids);?>
< ?php endfor;?>
</ul>
</div>
< ?php endfor;?>
</div>

< ?php
/**
* We loop down each time, iterating the array in sections, making a column out of each section.
* I'm sure this can be improved upon!
*/
?>

That generates the divs’ holding a list of columns, now to sprinkle on a little CSS to get the vertical styling.

<style>
body
{
font-family:tahoma;
font-size:10px;
}

#form-container
{
width:795px;
min-height:250px;
max-height:500px;
float:left;

}

.programcol
{
float:left;
width:195px;
height:auto;
text-align:left;
display:inline;
clear:none;

}

.programcol li
{
margin: 4px 0px;
height:12px;
padding:0.25em
}

.programcol li label
{
margin-left:4px;
position:relative;
top:-2px
}

</style>

…and we’re all good, we have vertical checkboxes across several columns! viola

Hope you liked this.

James

http://xp-dev.com/

Unlimited developers and projects!!!
So far so good for my little project.

In other news, Zoodle a site made by the guys I work with has gone live today, so if you’re looking for property reports in New Zealand, Zoodle is the place to get them.

2 useful blog posts in 1 day eh!

I’ve been writing PHP for a while and am a big hater of people who do not check their arrays are arrays before doing a foreach, and have their error reporting settings so high that they don’t notice the warning it generates when it fails.

Having read though some of the Zend Framework code I came across a way to rid yourself of the is_array() and and if(count($myArray) > 0) checks before a foreach loop. It doesn’t totally solve the problem, but it will remove the “invalid arguments supplied for foreach loop” warning message we see.

Now if you’re sure you’ll be getting an array to deal with then there’s no real need for this. It’s more useable in the context of when you are unsure weather you will be getting a string or an array into your foreach loop.

Anyway, enough of this gay banter…here’s the code.

foreach ( (array) $returnColumns as $returnColumn) {
if (in_array($returnColumn, $availableColumns)) {
$returnObject->{$returnColumn} = $this->_resultRow[$returnColumn];
}
}

That’s from the Zend_Auth class. It’s so cool though. In this particular function it accepts a string or an array as an arguement, this way we ensure foreach always has an array to deal with! Supercool trick if you ask me, and just to illustrate it a little further here’s somethignI made earlier:

$mystring = "abcdefg";
$array = (array) $mystring;

print_r($array);

// outputs

// Array
// (
//     [0] => abcdefg
// )

Yeah I know its nothing groundbreaking but, you learn something new everyday!

The new year is getting off to a slow start, but here’s something that maybe of use to someone…We had a problem showing a PageRank bar on our site, something to do with IE bitching about non secure items, so to save an API call and bandwidth I made this. Now we just get the PageRank and display some div’s!

< ?php
$pagerank = rand(0,10);

?>

<style>
div.pagerank-holder
{
height:5px;
width:50px;
background-color:#f7f7f7;
border:1px #848484 solid;
float:left;
}

.rank
{
background-color:#009933;
height:5px;
float:left;
}

</style>
<p>Page rank: < ?php echo $pagerank;?> </p>
<div class="pagerank-holder">
<div class="rank" style="width:<?php echo ($pagerank/10)*100;?>%"></div>
</div>