isambard » web

Stop this UI Madness: Confirming visible fields

steven — Fri, 22 Oct 2010 22:52:30 +0000

Enough people. Please stop building forms where I’m asked to confirm a field I can see quite clearly. Like this example:

Or here’s another example. Which shows right and wrong use of duplicated fields and (horror or horrors) disables cut&paste.

The only requirement for a confirmation field is when entering a value that is not visible, i.e. a password. For anything else I can see the value I’ve typed and “confirm” it’s correct without retyping. Don’t make me repeat myself.

If worried about validity, beef up your error-checking. Don’t delay me with pointless re-typing (or more usually, cut&pasting).

And another thing. While making me repeat myself is bad enough, making me repeat myself and then disabling cut&paste in the repeated field gets you your own special corner of hell.

Quote of the week (21 December)

steven — Mon, 21 Dec 2009 04:50:44 +0000

From Robert Brault:

A blogger is an average person who happens to have a need to count his friends every half hour.

Bad usability calendar

steven — Thu, 26 Nov 2009 19:40:25 +0000

I’m a firm believer that one of the most effective ways to learn is to study mistakes, yours or other peoples. Which is why I used to live at Web pages that suck when first starting out in developing web content.

Just come across a similar, humoured, approach to usability in the Bad Usability Calendar. Highlights a different usability issue for each month. Which means it’s not much use as an actual calendar but very useful as a quick usability prompt.

Granted a bit late now to pick up the 2009 edition. But watch the space for the 2010 copy.

Quote of the week (21 September)

steven — Sun, 20 Sep 2009 21:53:24 +0000

From Carl Sagan:

All of the books in the world contain no more information than is broadcast as video in a single large American city in a single year. Not all bits have equal value.

CSS 101: Changing link appearance

steven — Thu, 10 Sep 2009 05:49:40 +0000

[Had a few people ask me about this. Easier to write it down....]

By default, links in HTML:

are underlined
are in the same font as the rest of the document
change colour depending on whether the link target has been visited or is yet to be visited in the current browser session.

Note this the last rule “link has been visited” is slightly different to the expected “link has been clicked”. Your links can therefore change their appearance to indicate a visit without ever being clicked. For example if you have two links to the same page, both will change colour when you click one of them and visit the target page.

To change any of these defaults you simply need to define an alternate style for the links.

A word of warning before we start

Be careful when updating the default styles for your links. Users are used to the defaults given above.

If you change them too dramatically some users may not be able to identify your links and not access your content. If changing the styles, ensure you provide some other method to identify the links as links. For example, position in an obvious-looking menu, use different colours/fonts, add an icon or image, use standard wording, etc.

Styling links based on their status

A link is added using the tag. However adding a style for this tag is slightly complicated because the link has four different statuses, called pseudo-classes, and styles can be set for each:

A:link – link that has not been used, and the mouse is not pointing at it
A:visited – link that has been used, and the mouse is not pointing at it
A:hover – link that has the mouse pointing at it (but not clicking it)
A:active – link (visited or not) that has the mouse clicking on it

There are some rules about the order to define the pseudo-classes:

a:hover MUST come after a:link and a:visited
a:active MUST come after a:hover

An example

For example, assume you want to remove the underline style for the link, but show the underline when the mouse hovers over it. Additionally you do not want visited links to show a different colour to unvisited links. A sample style definition would be:

A:link, A:visited {
        color: #0066ff;
        text-decoration: none;
}

A:hover, A:active {
        color: #0066ff;
        text-decoration: underline;
}

Note how the different pseudo-classes for the link tag are identified by “:name”. Eg A:hover defines the style for the hover status of the link, etc. Also note how the same definition can be used for multiple statuses simply by separating the names by commas.

Obviously you can do anything you want on those styles. For CSS text-decoration is the attribute that determines underlined or not.

using these styles in your page

To make use of these styles on your page you need to include your new style definition:

in the section (add a To link as a separate stylesheet, save the style settings in a text file (don’t include the tags) and then add the link to that file in the document head. For example: If you want to add comments/descriptions in your stylesheet file (you know you ought to!) use /* … */ to indicate those comments. Styling based on location on the page Only other point of interest is that you can also set styles for your links depending on where they appear in your HTML. For example we often use links in table headings to allow sorting (click on heading to set order, etc). Since headings have a different default style, we need different link styles just for headings: TH A:link, TH A:visited { color: #ffffff; text-decoration: none; } TH A:hover, TH A:active { color: #ffffff; text-decoration: underline; } Notice how this CSS just refers to links within the tag to allow me to finetune their appearance. more information Once you know the pseudo-classes for manipulating link appearance, you are obviously free to make any changes supported by CSS. All these pseudo-classes are part of CSS1 – the full CSS1 specification is on the W3C website.
A useful primer on using CSS and styles is provided by W3Schoools.



Quote of the week (27 July)
steven — Sun, 26 Jul 2009 20:12:18 +0000
From Dr. George Lundberg:
Information on the Internet is subject to the same rules and regulations as conversation at a bar.



Quote of the week (13 July)
steven — Sun, 12 Jul 2009 17:39:47 +0000
From Benjamin Pollack:
“There is a tremendous amount of spit and polish that goes into making a major website highly usable. A developer, asked how hard something will be to clone, simply does not think about the polish, because the polish is incidental to the implementation. ”
The quote was part of a response to a suggestion to duplicate Stack Overflow, and thus save subscription fees to the original.  You can read Benjamin’s entire rebuttal, or Jeff Attwood’s succint commentary for more details.  Jeff’s article in particular does a good job in summarising what “polish” entails, and by doing so makes it clear how such polish is integral, not incidental, to eventual success.



Sorting a PHP multi-column array
steven — Fri, 03 Jul 2009 00:57:50 +0000
PHP support for arrays is fantastic, particularly for those of us with a history using ASP. Sorting a single-column array is straightforward (there is a sort() function). But what about sorting a multi-column array? Well, there is a function (array_multisort()) that does it, but understanding how to use it is a challenge. This article hopefully provides a simpler explanation.

If you are using a multi-column array to store data from a database, it is much simpler and faster to get the data directly from the database in the order required (use the ORDER BY clause in your SELECT statement).  This function is best used for multi-column arrays that are generated locally, or only in part from a database.

How to
To sort a multi-column array:

determine which columns you want to sort by
for each column you want to sort by, copy its contents into a separate, single-column array
build your array_multisort() command:

add the new single-column array as a parameter
optionally follow the array with parameters for sort order and type
repeat above two steps for each column to be sorted on
complete command with name of multi-column array to be sorted


sort type and order
Sort type can be:

SORT_REGULAR – compare/sort normally (default)
SORT_NUMERIC – compare/sort as numbers
SORT_STRING – compare/sort as strings

Sort regular uses standard ASCII order (“ABa” is 3 characters in regular order). The other two options operate more logically (eg “aAB” is the same characters now in string order).
Sort order can be:

SORT_ASC – ascending order (default)
SORT_DESC – descending order

For example…
For example. here’s a 3-column array we want to sort:


Assume we want to sort this array by rank (ascending order). The first step is to store the rank column as a separate, single-column array. This is easy to do using the foreach command:



To sort by this column, use array_multisort and pass our newly created rank array as the first parameter:


To change the sort to descending order, add the required order parameter after the 1-column array:


To sort by more than one column (eg to sort by rank, then name), simply repeat the above steps for the subsequent column(s) and add the paramaters to the list.

more information
The official explanation of array_multisort can be found in the PHP manual.



Accessibility in a nutshell
steven — Fri, 15 May 2009 03:03:13 +0000
The term accessibility has quite specific connotations in the internet world.  It describes the capability of your site to support users with disabilities:

colour blindness
sight loss (up to and including complete blindness)
hearing loss (up to and including deafness)
reduced motor skills, etc.

Additionally the disability to be considered may not need to be one that is ‘part’ of the user but could be one imposed on the user by circumstances.  For example accessing your site via a mobile device, or in a bright environment.
Published guidelines
As is the way of the web, a series of guidelines have been developed (see http://www.w3.org/WAI/ for details) that provide tangible steps a site designer can take to address accessibility issues.  These are prioritised as 1,2,3 depending on to what extent your site is to meet accessibility needs.  From the guidelines:

A Web content developer must satisfy this checkpoint. Otherwise, one or more groups will find it impossible to access information in the document. Satisfying this checkpoint is a basic requirement for some groups to be able to use Web documents.
A Web content developer should satisfy this checkpoint. Otherwise, one or more groups will find it difficult to access information in the document. Satisfying this checkpoint will remove significant barriers to accessing Web documents.
A Web content developer may address this checkpoint. Otherwise, one or more groups will find it somewhat difficult to access information in the document. Satisfying this checkpoint will improve access to Web documents.

A site that meets all priority 1 requirements is given a conformance level of A, priority 2 = AA, priority 3 = AAA.  You’ll see some sites reporting this conformance level.
What guidelines do you need to meet?
Only government sites, or government sanctioned/supported sites may have mandated conformance requirements.  This is particularly the case in the US where federal laws determine the levels of accessibility to be supported.
For the rest of us the choice is private.  Grade A (meeting all level 1 items) can be considered the de-facto standard for any site, irrespective of audience or content.  It includes such straightforward requirements as providing ALT descriptions for all images (so text readers can describe them) and generally using HTML (and particularly CSS) correctly so different presentations can be created easily.
There is considerable work involved in conforming with the higher accessibility grades, particularly if reworking an existing site or content.   We may therefore choose only to go those levels if our particular audience requires it, or if particular elements in our site require it (eg online policies for disabled access would attract more users with accessibility issues and thus warrant higher conformance levels).
Testing compliance
The first step in considering accessibility is reviewing the guidelines and conducting a code review (and/or developing a coding standard depending on project status) which encompasses the core elements.
There are several online tools or services available to allow published sites to be tested easily (and regularly – important if content is changing).  The UK’s Royal Institute for the Blind maintains a comprehensive list of such testing services.  One of the most famous/useful testing sites was Bobby.  Unfortunately this appears unavailable at present.
Accessibility and SharePoint
SharePoint can be configured/developed to provide compliance with several accessibility guidelines.  And for sites requiring a higher level of conformance there is a downloadable Accessibility Kit for Microsoft Office SharePoint Server 2007.  This Sharepoint team post on accessibility explains approaches using both standard SharePoint and the accessibility kit.
Conclusion
As any other core business system, an intranet needs to comply with the firm’s directives for supporting staff with disabilities.  The W3C guidelines provide a clear and comprehensive method for assessing, ensuring and displaying that support.



Website copyright in a nutshell
steven — Tue, 26 Aug 2008 01:45:17 +0000
Copyright is simply the protection given to an author to allow them to enjoy the fruits of their labours. It is generated automatically and freely whenever anyone creates an original expression of an idea (be it a web page design, a sound clip, a paragraph in an article, etc). 

For anyone creating/administering a website, copyright therefore impacts you in two ways: 

copyright in your original content (eg protecting your site from others). 
copyright in non-original content that you are using, and honouring that copyright (eg protecting your site from yourselves) 

protecting your site from others
For your site, copyright in its content exists automatically once the content has been created.  That copyright continues, also automatically, until a significant period after the author’s death (in Australia its 50 years; other countries 50 or 70 years). You do not need to apply for copyright

or register in any way. 
Not all your content is/can be copyrighted. For example facts can not be copyrighted (you cannot sue someone else for repeating your statement that England won the 1966 World Cup). Also non-copyrighted are names, short phrases, or ideas. For example, if you have a great idea for a killer website, and mention that idea on your site, you have no recourse on anyone who actually builds that site. Your idea is not protected, only its expression. Hence to protect it, build it. 
To © or not to ©
If you look at most websites, you will find a copyright notice (with the special © character – added as ©). This is actually unnecessary as all countries that are signatories to the Bern Convention (which includes all those you’ve actually a legal chance of having your copyright honoured in) agree to respect your copyright without the symbol/notice. 
However adding the notice is recommended, not for legal purposes, but for a prompt to your users that you are serious about protecting your interests. Place it clearly on your home page and all other pages that might attract copying. If you have some content you are happy to be copied under certain conditions, link your copyright prompt to a statement of those terms and conditions. 
preventing copying
Obviously copyright does not stop the unscrupulous from copying your hard work. And in reality, there is little that can be done to prevent the determined thief. There are some ways of slowing them down (using secure PDFs, spreading content over multiple pages, etc), and there are lawyers to help when found out, but in reality the best defense against copying is encouraging the reader to view your content, in your context. Provide a reason why it is better to link to your content than copy it, and you may prevent one more copy. 
Additionally, it may be prudent to accept that some content will be copied, and provide terms/instructions by which it can be copied “on your terms”. Eg if you’ve written a useful piece of code, let others use it providing they include a reference/link to its origin. This way, whilst you’ve not prevented the copy, what you’ve actually done is convert it into an advertisement! 

If you are prepared to allow your content to be copied or developed on (within limits), consider Creative Commons licensing.  This alternative to normal copyright protection allows you to specify simply and quickly the terms under which your content can be used by others.  For example if you’re happy for your artwork to be used for not-for-profit work but not for commercial gain, then you can add a Creative Commons licence that provides exactly that right.

The Creative Commons movement is building a great deal of momentum worldwide.  It is well worth investigating if you feel the “all-or-nothing” approach to existing copyright is not the fairest way forward for your own efforts.


If you find an unauthorised copy
If you are unlucky enough to find a site that is copying your material against your wishes, then you have a variety of options available, best approached in the order shown: 

contact the infringing site


Mail/email the administrator of the infringing site, identifying which of their content is actually infringing your copyright, and detailing exactly what restitution you would like (eg remove it, mention your name, etc). When contacting them, do not immediately assume that the copying is malicious and deliberate. Sometimes the source of material cannot be identified, with even the best intentions. Try and keep it civil, at least at first! 
contact the infringing site’s host or service provider.


If you are unhappy with the response from the site administrator, consider contacting the site’s host or service provider. As a business, they are often more cogniscent of the rights of others, and thus more interested in protecting their own legal interests. 
contact a lawyer


If the copyright infringement is costing you serious money, then get a lawyer. And get a lawyer that specialises in copyright and/or online law. This will cost serious amounts of money, and thus only worthwhile if your reputation, or bottom-line, is being seriously impacted. 

Proving it’s a copy
As you can imagine, it’s often difficult to prove someone has copied your content. Obvious clues (like file dates) are easily modified. Therefore if you are significantly worried about copying, consider “seeding” your content. 
Seeding entails hiding identifying marks/symbols within your content. For example add a deliberate spelling mistake or two, use a peculiar piece of code, add some useless/unnecessary HTML tags, etc. The aim is to add something that anyone generating the page themselves would not have included; finding these in another site therefore provides strong evidence that they’ve copied your original. 
Protecting your site from yourselves
Often it’s not the risk of having to sue others that you need to consider on your site. You can also easily end up where someone is in a position to sue you. 
The best defense against unintentional copyright infringement is education. Make sure that all parties that contribute to your site are aware of its requirements. It is also suggested that your formal content publication process (you do have one?) includes a step/check of copyright status. 
Who owns your company’s copyrights?
Whilst copyright is normally vested in the author, for employees their standard employment terms usually specify copyright of anything produced whilst employed is vested in the employer. However you might need to check this. 
For others providing you with material (consultants, bureaus, contractors, etc) check the terms under which they have been employed. If needing to employ such a third party, ensure the issue of copyright is resolved in the contract. 
Remember that for your company documents, just because they have been published in one format, or to one audience, does not necessarily mean that they are free to be published on your website. For example, many annual reports contain stock photos or images. These may have been purchased from a bureau without online publication permission being included in the terms. 
If you’d like to copy something…
The purpose of copyright law is not to prevent copying, just to prevent unauthorised copying. Hence, if you find some content, online or otherwise, that you’d like to include on your site you may be able to. The steps to do so are quite simple. 

ask the author for permission to copy. If the content is online, this is easy, and often simply requires e-mailing the site owner/administrator.
When asking, make clear exactly how/where you wish to re-use their content. We won’t give permission to someone to “copy your site”, but if you want to take this article, we’d be more sympathetic. 

respect the response given. This can range from “not at all”, through “yes – but with conditions” to an unqualified “yes”.
Possible conditions can include to identify the origin of the material (with/without a link to it),

to not alter or modify the material (eg not to take one part deliberately out of context), or not defame or denigrate the original (we don’t all want to be listed on your “worst website of the week” page). As with these examples, they are not often onerous. Most authors will be flattered you want to use their work. 


Content not under your control
Your website may contain content that is not under your direct control. For example you may run a discussion forum that the public can contribute to. For such areas you need to demonstrate your own commitment to the law (by notices/terms for submitters) as well as, potentially, monitoring submissions for infringements. And if any are identified, by yourselves or another party, then they should be acted on swiftly. 
I don’t want to copy it, just link to it….
For all those who consider the internet a lawless land, the law of copyright applies quite simply and fairly to it. However it is when considering the legal role of hyperlinks that the issue becomes a little greyer. With hyperlinks, sites can ostensibly include content produced

by others, without taking a physical copy. The issue becomes even fuzzier when considering frames: using them it is possible to load an entire site ‘inside your own’ and hence imply ownership of it in all total. 
If your presentation of the link or content implies ownership, then you’re potentially up for double legal whammy. If the lawyers don’t pursue you for copyright infringement, then they could also pursue you for deceptive/misleading trading (in the same way as implying your homebrand PC is made by IBM by just sticking a logo on the front). 
Another potential risk situation is that called ‘deep-linking’. This is where you link to content deep within a site, not to imply ownership, but to circumvent other pages/details the owning site require its users to view beforehand. For example you could replicate a job posting from a site without reproducing some of the advertisement or owner information that they require to be displayed. If in doubt, always check with the author about what conditions, if any, they will accept your links. 
Conclusions
This article provides an introduction to the issue of online copyright and provides an outline of the various facets of it that may impact your organisation as it goes online. 
The key point to remember is that copyright law is built to enable and manage copying and the distribution of ideas, not to restrict it. Your aim therefore, should not necessarily be to prevent all copying, but to ensure that whatever copying is undertaken under terms you have dictated. 
More Information
A quick internet search will highlight a series of useful sites on which the issue of copyright can be further investigated. Some suggested starting points: 

Creative Commons


Main website for this flexible approach to copyright licensing.
Australian Copyright Council


An excellent starting point. This non-for-profit organisation provide a series of newsletters and seminars educating Australians in all aspects of copyright law. 
Commonwealth Department of Communications, Information Technology and the Arts


The Australian Government’s own intellectual property area.

isambard » web

Stop this UI Madness: Confirming visible fields

Quote of the week (21 December)

Bad usability calendar

Quote of the week (21 September)

CSS 101: Changing link appearance

A word of warning before we start

Styling links based on their status

An example

using these styles in your page

Styling based on location on the page

more information

Quote of the week (27 July)

Quote of the week (13 July)

Sorting a PHP multi-column array

How to

sort type and order

For example…

more information

Accessibility in a nutshell

Published guidelines

What guidelines do you need to meet?

Testing compliance

Accessibility and SharePoint

Conclusion

Website copyright in a nutshell

protecting your site from others

To © or not to ©

preventing copying

If you find an unauthorised copy

Proving it’s a copy

Protecting your site from yourselves

Who owns your company’s copyrights?

If you’d like to copy something…

Content not under your control

I don’t want to copy it, just link to it….

Conclusions

More Information