Andy Li’s Blog - web usability design and engineering

Colorblink - An AIR app that simulates how color blind people see Flash and images

2010-02-19T20:55:00+08:00

Accessibility is a an important part of both web and game design. And for web and game design, one of the popular tool is Flash. That means very often you need to ensure accessibility in Flash. However there are still not many tools available even for simple things like color blind simulation… so I write my own:)

>> download installer (.air)

It’s a very simple AIR app. You open it, drop a swf file on its window, select the color blind type and that’s it.

The inner of Colorblink is using a Pixel Bender filter, applying to the whole application. The algorithm is just a color transform matrix, found in a Java Color-Blindness Simulators. That simulator have more simulation config, which I used only the simplest one.

This is also my first time using a git repo. So go to have a look, see if you can fork it for more features.

One thing is, there is problem loading Flex applications into Colorblink… I don’t know how to read the loaded app’s default width and height and then resize it… So, if you want to test your Flex app, get the filter and apply it to your app manually (can’t be easier).
Now you can load Flex swf or even html file! But the app wouldn’t resize automatically since the size cannot be determined. If Colorblink does not work for you, you can still always get the filter and apply it to your app manually (can’t be easier).

Oh, yes, there is a simulation of what a dog sees… So, design some game for your dogs in your free time…

Deep Linking for AJAX

2009-04-08T10:28:00+08:00

I have just made a independent study on “deep linking for AJAX” for the course Web 2.0 technology. Seems that most of the info on the web about deep linking implementation are for Flash web site but not AJAX’s, so I release my report and presentation slide here hoping can help somebody.

Deep Linking For Ajax Presentation from Andy Li

What is Deep Linking

Deep Linking is a URL that point to a specific resource like a web page or a file. User can access the resource directly through the URL without further navigation (i.e.. bypassing “home” or “portal” page).

Why is Deep Linking Important

Deep linking is originally a build-in function of the web, enabling the web pages to be interconnected, letting the users go to a specific resource easily by clicking on the links from any web page. Without deep linking, the web sites will become too separated and cannot be called as a “web”.

Moreover, deep linking is the basic requirement for bookmarking. Since bookmarking is keeping the URL of a specific web page (or any other resources), if the page itself do not have its own URL, there is no way to bookmark it.

Search engines, which index the web pages like we bookmark them, require heavily on deep linking too. Search engines find the links on a page and follow the links to index the pages. Texts or other resources that can only be triggered to shown by script will be ignored by (most of the) search engines. So deep linking has its value of SEO.

To conclude, it is the matter of usability. Wherever the deep links are presented, e.g.. bookmark menu, search results, they are more usable since they are more likely to satisfy users’ needs and nearly all web-related software works with deep links since it is the architecture of the web.

The Situation of AJAX

Since the contents of AJAX sites are loaded by script in client side, they do not own a URL by default. i.e.. There is no deep link to that loaded content. It is a product of what AJAX intended to do: to prevent reloading of the whole page.

What is worse is when the user click the back button in the browser, the page would not reload the previous content but go the page before visiting the site. It is because the back button is implemented to track the change of URL but not the change of content.

Most of the time it does not matter since the loaded content is very small and subtle, for example validation of forms or log in result or hot posts. They are not the main content of the page so no deep link is reasonable. But if there are some cases that the main content is loaded by AJAX, deep linking should be implemented.

How to Implement Deep Linking for AJAX

Low Level Concept

There is a trick that use ‘#’ in the URL. The ‘#’ is known as a hash, which is originally used for links that link to the same page. For example:

&lt;a href="#C4"&gt;See also Chapter 4.&lt;/a&gt;

The above link will link to the anchor tag with attribute ‘name’ equals to ‘C4’. When clicked, the page will scrolled to the element.

It is used for implementing deep linking for AJAX because the browser would not refresh the page when the link is clicked.

What we need to do is when the page loaded, check the URL to see if there is any hash value, do the loading if needed. After that, listen for the change of the hash in the navigation bar. When it is changed, get the value and do the according operation.

For the links, simply append some hash like ‘http://someURL/#info’ to let JavaScript to detect the values.

The above actions can be done trivially by using the following property:

window.location.hash

Use of Libraries

There are quite a few libraries for deep linking. They are already stable and widely used in commercial projects. We can use these libraries to avoid reinventing the wheel.

I coded two minimal demos for the two libraries (which are different from below), which can be viewed at here.

SWFAddress (http://www.asual.com/swfaddress/)

It is originally made for Flash, since Flash is facing the same deep linking problem. The library is supporting both Flash and AJAX, sharing the same core JavaScript to detect and change hash values.

The most simple example is first link the library in head:

&lt;script type="text/javascript" src="swfaddress/swfaddress.js"&gt;&lt;/script&gt;

And then declare a function to handle the change of hash value and add the listener.

&lt;script type="text/javascript"&gt;
function handleChange(evt){
    if (evt.pathNames[0] == 'info'){
        //load info page
    } else if (evt.pathNames[0] == 'contact') {
        //load contact page
    } else {
        //load default page
    }
}

SWFAddress.addEventListener(SWFAddressEvent.CHANGE, handleChange);
&lt;/script&gt;

More examples can be found on http://www.asual.com/swfaddress/samples/.

History, JQuery plug-in (http://plugins.jquery.com/project/history)

This is a the plug-ins written for jQuery.

To use it, similar to SWFAddress, first link to the JavaScript file after jQuery:

&lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="jquery.history.js"&gt;&lt;/script&gt;

And then declare a function to handle the change of hash value. This plug-in unlike SWFAddress, it do not auto listen the change of URL. So we need to set up our own function to do so or as below bind the function to the anchor tags.

&lt;script type="text/javascript"&gt;
function pageload(hash) {
    if(hash) {
        //load some page
    } else {
        //load default page
    }
}

$(document).ready(function(){
    // Initialize history plugin.
    $.history.init(pageload);

    $("a").live("click",function(){
        if ($(this).attr("href").charAt(0) == '#'){
            var hash = $(this).attr("href");
            hash = hash.replace(/^.*#/, '');
            $.history.load(hash);
            return false;
        } else {
            return true;
        }
    })
});
&lt;/script&gt;

Limitation

Note that although using the above technique, the user can now bookmark the deep link and using the ‘back button’ as normal, SEO problem is still not solved. It is because the technique require use of JavaScript, which is ignored by most of the search engines.

The workaround is making a non-AJAX version of the web site. Not only it can solve the SEO problem, it can provide a fall-back when JavaScript is disabled.

Reference

“Deep Linking” in the World Wide Web, W3C
http://www.w3.org/2001/tag/doc/deeplinking.html
Deep Linking is Good Linking, useit.com
http://www.useit.com/alertbox/20020303.html
Deep Linking in Flash and AJAX Applications, Christian Cantrell
http://weblogs.macromedia.com/cantrell/archives/2005/06/deep_linking_in.html
Unique URLs - Ajax Patterns
http://ajaxpatterns.org/Unique_URLs
SWFAddress, Asual
http://www.asual.com/swfaddress/
History, JQuery Plug-in
http://plugins.jquery.com/project/history
Deep Linking, Wikipedia
http://en.wikipedia.org/wiki/Deep_linking

Meanings behind the fancy transition effects

2009-03-02T22:59:00+08:00

It is quite popular that websites have more and more “AJAX animation effects”(which should be JavaScript animation effects actually…). Many AJAX learners are obsessed with adding fancy animated effects on there web page, and sometimes, adding it without thinking the particular effect’s meaning, will actually confuse or disturb the end users.

In the following, I will follow script.aculo.us‘s effect naming. You may see the live effects in its wiki.

There are quite a few animation effects that are common, like fade in/out, blind up/down, slide up/down. They can be seen easily over the web and their meanings are obvious: to bring things in or out. But there is still some different among them.

For fade, the transition is much smoother then the others since there is no moving part. It should be applied on things that do not need much attention, like changing top banner’s background image, just let the users focus on what they are reading.

For blinding/sliding, the sense of changing is stronger. One of their special usages is to resize things, like panels. Since resizing panels often leads to change of layout, if there is no transition, the user may not be able to catch up with the movement of the page elements.

Some less popular effects like puff, shake are more easily to be used wrong.

For puff, since the animation ends with zero alpha, some developers may use it as disappearing effect, but that’s wrong. Since Mac OSX is using puff for a visual effect on opening files/programs, many Mac user may be confused if you use it on removing elements.

For shake, some developers may think that it can draw user’s attention effectively. Really, but we should use it carefully since shaking will cause the user not able to see the elements inside the shaking area easily. So, it takes time to let the shake stop and refocus on the element’s details and it may disturb the user’s work.

Some research on JavaScript benchmark

2009-02-16T14:02:00+08:00

Since I am going to make a benchmark for ActionScript performance across different browser/platform, I take a look into the JavaScript benchmark to see if I can simply port one to be used in ActionScript.

The most famous ones should be Apple’s SunSpider, Google’s V8 Benchmark Suite, Mozilla’s Dromaeo. All the benchmarks are compose of several test areas, basically including some basic JavaScript operation test like Array manipulations, some more practical based test like regular expression, ray-tracing etc.

V8 Benchmark Suite consist 6 tests which has the least tests among the three. But when I take a look into the source code, the testes are very long. It even overrides Math.random() to a seeded random generator.

SunSpider’s structure seems to be more simple and the tests inside are more easy to read (although less documented compares to V8’s). I think it should be not that hard to port to AS.

I still do not have time to look into Dromaeo’s source but it has quite a lot of tests. And some of the tests includes DOM and use of library like jQuery and Prototype, which is not quite appropriate to be ported.

My target should be porting SunSpider. But there is still some things to be considered like whether to use AS’s build-in library, coverage of Graphic manipulation etc. More researches are needed ;-) .

Some free tools for usability/accessibility testing

2008-11-15T01:15:00+08:00

Web usability/accessibility testing is always a troublesome work for web designers/developers. But with good tools, testing can be made much faster, easier and cheaper. Here below are some tools I found useful:

HTML VALIDATOR (Firefox add-on)

Homepage: http://users.skynet.be/mgueury/mozilla/

It can let you validate your website (and any pages you browse) at the time Firefox loads it. Since the validation engines are built into the add-on, there is close to no delay in validation. Also, when you double click its icon, all the errors and warnings (optional accessibility issues too!) are shown up with html source. It is real handy!

Note that there are two available validation engines in HTML Validator, Tiny and OpenSP. OpenSP is the one running behind W3C Validation Service.

ATRC Web Accessibility Checker

URL: http://checker.atrc.utoronto.ca/

Actually there are many online accessibility checkers. You may easily find one by searching “accessibility checker”. I have not test them all but I found this one is quite good since it let you select which accessibility guideline you want you site to check against.

Firefox accessibility extension

URL: http://firefox.cita.uiuc.edu/

It is developed for people with disabilities, but web developer should find this very useful. Despite of trying to navigate your web site as people with disabilities, the quick links on the toolbar can let you validate/check your site’s accessibility issues easily.

Firefox Web developer Toolbar

URL: http://chrispederick.com/work/web-developer/

Here is yet another Firefox extension. Actually this toolbar is a must-have for web developers. The functions are too many, I try to name a few: button to resize your window to 800*600 (or any other presets), button for W3C validation service, disable cache, disable JavaScript etc.

CityU’s Usability Testing Lab

2008-11-08T23:01:00+08:00

Just a few days ago, I went to CityU’s brand new Usability Testing Lab to do usability testing for my assignment. It is located in InnoCentre (Kowloon Tong), on the 5th floor, inside Department of Media and Communication. I searched around InnoCentre for so long since Dr. Andy Chun (Yup, another Andy) forgot to say which room the lab is located…

For the lab, I am a little bit disappointed, since it is actually only a little room. But the Department of Media and Communication is great. There are many other special rooms (or labs) for recording, broadcasting etc. And the technician who guided me through using the equipment is really nice.

The special computer used for usability testing:

My site has been tested two times while I also help testing another group’s web site. What we have got were some heatmaps, eye-tracking videos, and some simple software analysis (interesting areas on pages etc.). I think it seems to be too little data for me, but there were no time and people left to do more testing.

Actually what I am interested is booking the lab for testing games… There was already a XBox 360 located in the room and the technician kept asking us to play… It will be good to let me try testing my forthcoming games, but may be I will never have a chance to come back since the lab is not opened for students normally…

SEO, a path to web 3.0: helping machines to understand us

2008-10-11T02:51:00+08:00

In these few weeks I keep reading articles on search engine optimization (SEO) and the development of the Internet (mostly Google related, but Google’s is a big part of the Internet right?). More I read SEO, more I realize the similarities between web 3.0 and the concept of SEO.

One of the proposed key concept of web 3.0 is machines will understand our web contents, or let say our contents will be formatted to be understood by machines. Nowadays there is a technology “semantic web” that introduces similar ideas. The idea is like improving usability of our web contents, not only to humans but to machines too. And that is what we are doing for SEO propose: one of the reasons we use div and CSS instead of table to build navigation menus, is to make sure Google understand which is menu and which is content.

Maybe this will become one more reason why we should learn SEO.

The heat of layout redesign

2008-10-06T21:40:00+08:00

In the past year, web designers/developers seem busy with web layout redesign. Here were several popular web site that were redesigned to be named: Yahoo Mail (and Yahoo’s homepage is in progress), Xanga, Facebook, Wordpress (in progress) etc.

It is interesting to me that I really found some of them are using methods/techniques I learned from class. For example, Wordpress is using wire-frames (here).

Redesign is a important process which web designer/developer should handle it carefully. Redesign can make web sites stay competitive and meeting requirements of continuously updating user profiles/scenarios. But if the website has already lots of old visitors, redesign may make them unfamiliar with the web site and cause problems. For instance, Facebook had token a lot of efforts to make users comfortable with the new design like its new design FAQ, but still, there are drawbacks brought by the new design like devaluing some type of Facebook app (blogged by Dare Obasanjo here).

Actually I am working on redesigning a web site too. But you know, student’s life is always filled with homework and projects. Hope I can finish it fast and show it to you soon.

Why paper is still being used in paper prototyping?!

2008-09-25T02:31:00+08:00

In the last two weeks, from both the lessons of “Web usability design and engineering” and “Multimodel interface design”, I learnt about paper prototyping. It is a technique that used to test a interface design before building the interface out. It is widely used in the industry because it do not cause much and easy to do. If you have no idea what paper prototype is, here is a video demonstrating it:

I was surprised when I first know what they are… Testing cyber things in such a old-school way (and still be widely used) is just unbelievable… It make me think of why there do not exist a better, more “cyber” way to do this.

We do not directly use computer software to make prototypes just because the interface of computer has its limitations. With mouse cursor we can only interact directly with one object in a time while we have two hands,ten fingers and use to interact with multiple objects simultaneously.

Maybe the rise of multitouch will solve this problem. Just like we move the paper in paper prototypes, we can move the virtual papers with our fingers when multi-touch is used. This is also the point why multitouch is so welcomed by end-users.

Furthermore, if you are still not satisfied, a 3D presentation of the virtual paper may help. I am not talking about those HMD things, but something like windows flip. We can get a specific paper easily without accidentally selecting other paper on top.

To conclude, it seems it is a fundamental interface problem of computers. Maybe we should redesign the interface of computer before we redesign the interface of websites…

Usability, accessibility and SEO of Flash-only website

2008-09-16T03:08:00+08:00

I wanna blog about this because I always use Flash and building websites.

Usability, accessibility and SEO of a website are becoming a great concern these days while Flash/Flex technology is becoming a big big part of the web. Flash contents are always said to be bad for usability, accessibility and SEO, e.g. not search engine friendly, can’t be easily read by other programs that even making a lot of browser functions dead, large file size… But wait, are all of these still be true NOW?

Here are some misunderstanding or not-updated thoughts on Flash content (especially Flash-only website):

Flash contents cannot be crawled and indexed by search engines

Wrong! Google has already announced that they can now index Flash contents (including those dynamic text fields!).
Ref: Official Google Webmaster Central Blog: http://googlewebmastercentral.blogspot.com/2008/06/improved-flash-indexing.html

Flash-only websites make browser’s back button not usable

The back buttons (also history and bookmark) are still alive on Flash-only websites as the website use SWFAddress - using a technique called deep-linking (also can be used in AJAX).
Ref: SWFAddress official website: http://www.asual.com/swfaddress/

Flash contents are having large file size

The large file size is mostly cause by embedding images or other media files, not the swf itself. If you use many images in your html site, it still needs plenty of time to load. Actually, comparing to JavaScript, the file size of the scripting part may be even smaller and load/run faster when we use AS3, since they are all complied.