Category Archives: Usability

Dreamweaver Extension – SWFObject Insertions

SWFObject Dreamweaver Extension
As I use more and more the SWFObject, I took some time to create a Dreamweaver extension that insert the SWFObject Script and the Div with most of the options I ever need with it.
I just tested it on DW CS3, and it worked well as long as you are in design or split mode. It’s not always working in code view for a reason I didn’t understand yet. The resources about building extension on Internet are really rare so it’s hard to code it exactly as I wanted. For example how to use appendChild to create different Tag in different places of the document??

Please test SWFObject Dreamweaver Extension and tell me if it works or not and what I’ve forgot to embed.


Update 0.1.1: Have corrected some minors bug. This version seems to work nicely with DW8 win & mac and DWCS3 win & mac.

Ahmet

Markup Validation Service Beta 0.8.0

W3C
The W3C offer to test the new beta of the W3C html/Xhtml validator services (checks the markup validity of Web documents in HTML, XHTML, etc.)

There are a number of
cosmetic and UI changes, but the biggest difference is under the
hood: the new validator is using a new library as a wrapper around
its main parser, resulting in drastic speed improvements, and a lot
of interesting new possibilities.

Users of the validator are probably familiar with the note stating
“The Validator XML support has some limitations”. Be prepared to say
good bye to such a familiar sight: while the 0.8.0 validator is still
using the same base parser for validation (the excellent and
venerable opensp), it now has an XML sidekick making sure XML-ill-
formedness won’t go unnoticed.

W3C validator beta 0.8.0
List of changes

Ahmet

19 things not to do when building a website

Josiah Cole has compiled a not so small list of fundamentals rules that webmasters must learn. It’s almost the same as we hear every time : avoid boring your visitors with some useless scripts and design. Nevertheless this list can be useful, just to remember the basis of webmastering to you or your co-worker. And for once it doesn’t criticize to much Flash.

If your are wondering about more web design error you can also go check the “father” of usability: top ten mistakes in Web Design . By the way, his page URL terminate with a number, which is also one of the top ten error in search engines optimization :) So please Jakob update your web site!

You can also check if your web site suck

Ahmet

FOTB Note List

metah logoNo time for me to assist to FOTB, but I’ve found some resources about it on the web. The first I wanted to share is the note presentation of Francis Bourre about “Everything you always wanted to know about a game development but were afraid to ask”. Full of information and links, an useful reading.
Geoff Stearns presentation note are also online : “Flash in a Web 2.0 world“, or how to integrate Flash project in web dev, a topic that always interested me.

I’ll post more links here as soon as I found them, if you got some please share ;)


Links:
Game Development (F. Bourre)
Flash in web 2.0 ( G. Stearns)


Ahmet

User Expectations of Web Objects

Expectation home linkUsability News, it’s a comparison about the expectations of Users in the localization of Web Objects (Site Search Engine , Home Link , Internal Links , About Us Link, Advertisements) in 2001 versus a 2005 study.

Users expected :

  • To find the “About Us” link in the footer area or the left side of the web page.
  • Advertisements to be located either at the center top or the right side of the web page.
  • The “Site Search Engine” to be located in the upper right corner of the web page or near the upper left corner.
  • The “Internal Links” to be located on the left side of the web page
  • “Back to Home” link to be in the upper left corner of the web page

Read it

Flash pre-deployment pattern

Flash Developement Pattern

Here’s a little pattern I made for«homework» about the integration of usability in a website. Now that I’m nearly on holiday I found the time to transform it for Flash only.
This pattern is more developer oriented (but can overlap the designer work).
Also these are the kind of thing « a bit boring » you don’t want to do at the end of a project (in my point of view).
I’ve cut the pattern in four entities:

  • Technical (about user system)
  • Accessibility (about user handicap)
  • Usability (user friendliness)
  • Refercing (about findability)
  • Technical
    First we want to know what kind of system is visiting us. We cannot show the swf to a user who doesn’t have Javascript or Flash plugin (need to think about the Flash version you’ll use). The user will be redirect to a part of our site working perfectly for him.
    What the size of the window where the browser is display? You don’t want a part of your site to be unseen. The content size must be adaptable until a reasonable limit.
    The download speed of the user is important in the way you don’t want to publish high quality content to a 56 kb/s instead you give him a low quality (letting him the opportunity to change is a good usability point).
    Accessibility
    All this accessibility part must be taken seriously as it’s unethical that people with handicap can’t access information and soon illegal. Flash as some accessibility function, don’t forget to use them.
    The eyes compatibility is to test that your user will see nearly the same thing (color change).
    The size of the text must be resizable, small text are for some people unreadable.
    You site needs to be readable by screen reader application, or it won’t be accessible to some people.
    Usability
    Heuristic has to be defined in the early development as some function has to be integrated in code).
    User friendly means to not make people avoid to ask themselves « how do I what I want to do » it shall be obvious.
    Backward and forward navigation is important to manage or people risk to be feeling uncomfortable on your website.
    Referencing
    Html documents needs to be well meta-tagged and descripted.
    Swf documents needs as well to be meta-tagged and descripted.
    Important text can be over/under a swf. So search robots still can index your content (beware with Google politics about that).

    A lot of thing could be added but I estimated that that was the main guideline to be follow for the user. Unfortunately all these things take energy, time and money but if not done, it really can kill your website.

    Internet Explorer 7 : Quick Tabs

    It’s not often that I speak happily from Internet Explorer (IE) because of all the time they make me loose … But this time they have made a nice update to IE (only for Internet Explorer 7), the QuickTabs (Ctrl + Q) button will, once clicked, show you all the tabs you have opened in IE within this windows.

    QuickTabs exemple


    For an everyday work it’s not very useful I guess, but for a presentation using webpages it can be useful and even has a good look and feel.

    Usability Resources List

    In no particular order here are some link to usability resources, don’t hesitate to complete it ;)
    Flash Usability
    Alertbox: Jakob Nielsen’s Newsletter
    Heuristic Evaluation
    Usability News
    Usability News 2/
    Usability News 3/
    Adaptive path » user experience publications
    Web Pages That Suck
    Web Design from Scratch
    InfoDesign
    Guidelines for Accessible and Usable Web Sites
    Usability Research Lab
    WebWord
    Usability Views
    Webcredible
    Isys Information Architects
    Universal Usability in Practice
    Guild of Accessible Web Designers
    Usability and user centred design resources to practitioners
    IBM Usability and design
    I’ll try to keep updating this list as long as possible but you can also directly connect to my del.icio.us on usability.

    Internet Explorer 7 really don’t like Swf

    Update:(July 26 2007)To avoid this behavior you need to load your Flash via Javascript. For this you can use the SWFObject, I made an extension for Dreamweaver to ease the use of it.


    In IE7 there is one more thing that they add that I find completely useless and unusable.
    There is now a little info box telling you:

    Click to activate and use this control

    When you rollOver() a flash animation. It do load and play your animation but every first time you want to click on your Flash (on a button for exemple), the first click is to active the control and then you got to make a second click to interact with the Flash…
    So I went to the Microsoft site where they use a very nice (lol) flash animation.

    You can check their ie7Flash.js file that they use.

    And so everything work without the info box !