Phine Solutions web work notes

Dmitry from usabilitypost.com picked up this great usability tip. It compares the labels on buttons in Windows and Mac, and explains why it makes more sense to use the verb on the label in Mac.

In Windows dialog approach (Yes, no or cancel) but a user has to read the whole dialog to determine what to do next, versus a Mac user can just glance through the button labels and know what to do. The difference is small and subtle, yet it demonstrate in every single little detail, there is always room for better design.

I use reddit, digg a lot to get the latest news, watch funny stuff and you know, waste time. Besides those two, Mixx.com is another information aggregation site that I like. It has some really nice features like story tagging, drag and drop page editing and local news setup. However, it is just not one of the site that I don’t frequently go to even I like it.

I don’t really know the reason. Maybe reddit and digg has given me more than enough news and stories that I need on a daily basis. But I do think the design of the Mixx.com home page has something to do with my lack of using it and it should be improved.

Not allocating the prominent space to the stories

On Mixx home page, the logo and navigation menu take up most of space. Below it is the popular photos section. Frankly I think these small photos with no description or a headline is a waste of the space. The actual submitted stories are pushed down below in kind of in a “mix” which does not draw immediate attention. Reddit and digg, are doing much better on present the popular storied using the good part of the page and big font.

Not emphasize the stories

Social news site is about stories. Digg and Reddit, though have the totally different approch on designing their home page, both show that the stories and contents have the highest priority. Both show a lot of headlines, emphasize the titles (using the noticable font on the page), and made sure visitors can get tight into it from the home page. On the contrary, Mixx shows less and tuck them in below the fold. And the short titles are unattractive, at least to me. This may be related to the Mixx users who actually submit the story, but I think Mixx should encourage the submitters to put more content in the title like a lot of redditors do.

I am preparing to add WYSIWYG editor to one of my project and looking for some library code to use. The selections narrowed down to FCKEditor and TinyMCE. Both of them look great and perform nicely in the demo. Now comes to the question which one to pick. This article has a nice comparison between the two.

Just found out that default editor in Wordpress is also based on TinyMCE, which is quite an endorsement. I particularly like the capability to resize the editor’s size in TinyMCE.

Being a website builders, I constantly need the images for my sites. There are several ways that I have used to get the images. Some of them worked out well and some were quite disappointing.

Stock image sites - where you can buy

I use a couple of sites to buy images: stockxpert.com and istockphoto.com. You can get both jpeg or vector images from these sites. Stockxpert.com offers are a little bit cheaper. In my experience, istockphoto.com’s images have slightly better quality.

This has been my best method to aquire the vector images for icons and logos. If you know a little bit about Adobe Illustrator, you should be able to get some vectors files and use them in different places with some simple tweaks.

Use a local graphic designer

Originally I was looking to get some local talent to help me out but it never worked out. I once worked with a graphic designer who work on some design projects for fortune 500 companies on a logo design. Her draft work was just some pensil scribbles on a piece of paper and her rate will double as soon as she touches a computer. Plus she tried to get me to sign a contract so any future change has been done by her only. A friend told me the best way to go is to hire someone just out of school but I haven’t tried that myself.

Use ODesk to hire some designers

ODesk.com is a place to hire the freelancers. You can create your project and get people to bid on it. Since the people for hire are from all over the world often time you can find some talent with very cheap rate.

My ODesk experience was a mixed bag. I worked with someone who had tons of hours (total hiring hours by ODesk) but the work was at most mediocro. Sometimes it appeared he didn’t even read my requirements in the email. And he was never shy about asking for good ratings at the end of the project. Once he even IMed me to “request” better rating because it affects his ODesk rating history. Mind you I wasn’t even the one who gave him the one star that he probably deserves. He was FOR SURE blocked from my GTalk.

I also worked with some designers who made great work for one project but came up short on the other.

My advise on hiring on ODesk is to find someone who’s new or hasn’t many hours accumulated yet.

Get free images online

Although Google image search can find a lot of images, they are mostly copyrighted and it is illegal to directly use them on your websites. This site: yotophoto.com , can find the free-to-use images for you.

When a use visits a web page and enter some information into a form, he may intentionally or unintentionally leave the page without clicking on the submit button. It is a good usability effort to remind the user of the possible changes that have happened.

We can use a javascript to implement this.

/** checkChange.js **/ 

var alertLeavingPage = false; /* flag to turn on the alert */
var pageInputChanged = false; /* the flag of changes made */

// The onbeforeonload is called before the page is changed. It is not a standard
// method. But it is supported by IE and FF.
window.onbeforeunload = function(theEvent) {
   if (pageInputChanged == true && alertLeavingPage == true) {
      if (typeof theEvent == 'undefined') {
         theEvent = window.event;
      }
      if (theEvent) {
         theEvent.returnValue = "You have made some changes on this page, please click OK to discard the changes or Cancel to stay on the page.";
      }
   } else {
      return;
   }
}

/*
 * The method should be called on the page where the change needs to be tracked.
 * The form ID needs to be provided so the change event can be registered on certain form elements.
 */
function trackChange(formId) {
   var formElem = document.getElementById(formId);
   if (formElem) {
      for (var i=0; i<formElem.elements.length; i++) {
         var inputElem = formElem.elements[i];
         if (inputElem.type) {
            var inputType = inputElem.type.toLowerCase();
            if (inputType == 'text' || inputType == 'radio' ||
                inputType == 'checkbox' || inputType == 'select-one' || inputType == 'textarea') {
               inputElem.onchange = setChangedFlag;
            }
         }
      }
      // turn on the alert flag
      alertLeavingPage = true;
   }
}

/*
 * The method which is tied to a change event.
 */
function setChangedFlag(evt) {
   pageInputChanged = true;
}

Of course you will need to include this script to the web page. Besides that, you also need to call the trackChange() method to register the form elements that we want to track. So a form Id needs to be set in order to register. A sample html page look like following: 

<html>

<form id="the_form_id" action="" onsubmit="alertLeavingPage=false; /* no reminder for submission */"> 

</form> 

<script type="text/javascript">
<!– //
trackChange('the_form_id');

// –></script>

</html> 

Once they are added into the page, the user should see this prompt when they leave the page with un-submitted inputs. 

The method only detects whether there has been any change activity and it won't be able to tell whether there is change being made. For example, if someone checks a checkbox and unchecks it the script will think there has been change made.