» tagged pages
» logout

sorted by: recent | see : popular
Content Tagged with User:marc + design

Website Design Gone Horribly, Horribly Wrong

There are lots of ways in which a website can be annoying. Favourite methods include: rotating and blinking animated GIFs (or worse, Flash), popup advertising windows, unexpected background music files, or just plain all around atrociously ugly page design. (I’ve been quite guilty of this in the past!)

But until you’ve lived in China, or at least spent some time browsing around websites here on the mainland, there’s probably one way to annoy the living bejeezus out of people that you’ve never thought of.

To demonstrate, simply visit any Chinese website, such as the Bank of China or something else such as Chinaren. Don’t worry if you can’t see the characters, they’re not important for this experiment. (Windows XP users can add them by going to Control Panel /International and installing the Asian Font Pack, while Vista and Mac users will have all these fonts installed already).

Once you have one of these pages up in your browser window, click on a link or two. Click on some more links on those pages. Try to get back to where you came from. Within minutes, you’ll have at least a dozen browser windows littering your desktop, or at best, for those Firefox users with the correct settings, dozens of tabs.

You could be forgiven for thinking that this was specific to a few sites with particularly bad design. And you’d be totally wrong. This is completely endemic here in local website design, and is how the locals think that the “Internets” should work. Indeed, there is almost no concept of forward or back button usage any more, and it is not uncommon to see users with well over twenty browser windows littering their desktop at any given time. While Windows users can at least expect the Task Bar to group similar windows, Mac users just end up using the mouse to move the windows out of the way until needed later, or until they just close the browser application completely.

Ultimately, the problem becomes such that, if you want to fix the site design to not do things this way, you will confuse your user. When they click to go to a new page, and they then subsequently finish visiting it, they will close the browser window and proceed to go looking through their other browser windows until they find the one from whence (they hope) they came.

The only thing I can say? At least blatent ripoffs of other sites on the internet don’t seem to have felt compelled to introduce this behaviour into their clones. For everybody else, it’s going to take a while to change this design.

User:marc: Chipmunk Ninja Technical Articles

URLs as APIs

On a recent contract, I was the lead developer on a web application to help gather information about open source projects called Swik (If you haven’t checked it out yet, do so and send feedback on it). The project is written using PHP and MySQL, and one of the key things about which the designer of the site, Alex, was adamant was in how the URLs looked.

The original URL scheme in the prototype had URLs along the lines of:

http://swik.net?project=554323&list=325244&edit=true

While this worked just fine and in no way affected the basic usability of the application, the argument was made that there is a class of web applications that actually benefit from more structured URL design. I found this the most ludicrous thing I had ever heard and implemented the new scheme largely because I was paid to. In the new scheme, the above link would translate into something roughly as follows:

http://swik.net/edit/project/FreeBSD/About

We would continue to trade jibes over this for some time, with me calling him a “URL Freak”, and he calling me a dim-witted clod (well, in all fairness, he’s much nicer than that, and just calmly argued that I was wrong).

So it is with some mild amount of chagrin that I must admit that he’s probably more right on this one than wrong. As I look around at sites that I use on a regular basis, I realise that, as a more technical person, I do use well designed URL systems whenever possible. As a fast typer, the ability to enter more robust URLs ultimately helps me navigate to my final destination much quicker than I could otherwise with the mouse and multiple page reloads.

The example of a website that uses URLs to do its work that most quickly comes to mind is del.icio.us. Many users do not even realise it, but this site can be entirely manipulated from the address bar.

For those not familiar with the site, it is often described as a “social bookmarking” application: instead of using your web browser’s bookmark feature, you store bookmarks in del.icio.us, tagging them with keywords or other descriptive comments when you add them. This has a couple of key advantages:

First, if you are a multi-computer/mulit-browser user, then all of your bookmarks are stored in one place for you to come back and look at later. Since this place is public, however, this probably means that you should keep your fetish dungeon pr0n links stored somewhere else, unless you do not mind others knowing that you are a big fan.

The far more useful and powerful feature of del.icio.us is that you can use the tags that you (and others) associate with links to see what others are associating or storing with the same “subject”.

For example, to see all the links that people have associated with the tag ajax, you can enter:


http://del.icio.us/tag/ajax

Similarly, to see all those links associated with the word Lamborghini, you type:

http://del.icio.us/tag/lamborghini

And then things get crazy. You can actually search for cross-sections of multiple tags. To see all those links people have added with all three of PHP, MySQL, and Apache, you can type in the address bar:


http://del.icio.us/tag/php+mysql+apache

Want to learn about everything that only I have tagged with php ?


http://del.icio.us/marcwan/php

To get an RSS feed for any of these, you just insert “rss” as the first parameter to the URL string:


http://del.icio.us/rss/marcwan/php

This last innovation lets us see the use of URL schemes as an API (Application Programming Interface) for websites. If I am building an application, and want to use information from sites such as del.icio.us (within polite limits or with the permission of the site author(s)), I can use more structured output such as RSS feeds to get these data:


<?php

  $tag = rawurlencode($tagName);
  $url = "http://del.icio.us/rss/tag/$tag";
  $feed = file_get_contents($url);

  // pass this to an RSS reader, the XML DOM, or otherwise
  // parse through it by hand.

?>

Look more closely, and you will see other web applications that do similar things. Flickr is built in a very similar way. You can obviously use the well designed user interface to browse your way through the application, but the URLs are also sufficiently well designed that you can quickly find all photos of Sendai, Japan by entering the following:


http://www.flickr.com/photos/tags/sendai

To see all the photos that the user samantha has tagged with girl, you can type:


http://www.flickr.com/photos/samantha/girl

Even chipmunkninja.com is designed with simple to use URLs in mind. All articles are given a short name when stored, and can easily be viewed with something similar to the following:


http://www.chipmunkninja.com/article/osxamp

There is indeed some extra work required to make such a URL system work, but for some reason, it is significantly more pleasant to look at when browsing to a site.

Even less “geeky” sites, such as BBC News often let you narrow your search down somewhat. Changing the 2 to a 1 in the URL news.bbc.co.uk/2/hi.html takes you from the worldwide home page to the page more tailored for local UK readers. Similarly, to see those articles about Africa or the weather, you can enter:


http://news.bbc.co.uk/2/weather

Of course, beyond that, the URLs become less workable, and you are back to more traditional navigation schemes.

Am I arguing that all sites should be designed in such a way? Not at all. For most sites, most users do not care and often do not even look in the address bar (which is why so many phishing attacks appear to work so well). Whether their URLs are neat and compact or hideous monstrosities such as any URL you will see on Amazon.com completely uninteresting.

It must also be noted that URL “prettiness” should probably have its limits. If you are actively dropping features or contorting your web application to silly extremes just to keep URLs looking nice, you are probably doing yourself and your users a disservice. By looking at the most common user scenarios or “high value” URLs, you can probably find the appropriate balance between usability and application complexity.

While not necessarily appropriate for all users and all web applications, implementing a robust URL scheme in our web applications can be one of many ways in which we help people them and interact more dynamically with them.

User:marc: Chipmunk Ninja Technical Articles