Tag Archives: ux

  • Things I’ve been doing all weekend(s)

    1

    I’ve burned some serious midnight oil these past few months on a couple side projects I recently launched. I also went camping at Big Sur two weeks ago. That was fun. But back to the web projects.

    I created a philanthropic URL shortener to generate passive income for important organizations. It accepts Amazon.com URLs and appends the affiliate ID of a non-profit organization before shortening them. Anyone who follows the shortened link and buys something makes Amazon give ~ 4% of the order total to a non-profit org. The URL parser under the hood is super smart and fully ajaxed-out (while failing gracefully with javascript disabled). The goal of the site was to make it as simple and straightforward as possible to encourage people to use the service. It also generates Open Search browser plugins so Firefox and IE7+ users can replace their default Amazon search engine with a feel-good version.

    I’ve been helping a local art gallery increase their support base by building out a website. It sports a custom Drupal theme and is stupidly easy to update. They shouldn’t have a hard time keeping their content fresh. The artist boxes on the homepage load in a random order on each page refresh to prevent sibling rivalry. Unfortunately, it makes caching impossible. :/

    I spent all of half an hour setting up Gallery 2 at memedump.com. It helps me keep track of all the funny and profane things on the Internet. The website looks like crap and is loaded with crap. Thus, it makes total sense that it’s way more popular than my other projects and already reports 50,000+ page views. I later created memeaday.com for those people who want just one meme a day.

    There are a couple other things in the bucket including a video mash-up website but online video editing is, well, hellza problematic. So that one’s going to take a while.

    Lastly, my housemates and I had a blast acting out scene 330 of Star Wars: New Hope. Star Wars Uncut is a great project and you should sign up to film a scene right now. Let me know how it goes. Our shoot was a lot of fun.

    Posted in me me me, web dev and tagged , , on Oct 9, 2009 at 2:38 am #

  • If javascript affects your UI, load it ASAP

    0

    The javascript focus() method is often used to place a user’s cursor in the username field of a login form on page load. Twitter uses this technique. After everything is loaded, a blinking cursor appears in the username field and you can begin typing your login credentials. Viewing Twitter’s source code, you can see the jquery snippet that shifts the focus. It’s at the very bottom of the page and is loaded after several javascript libraries (why the hell do they use three separate javascript libraries?).

      jQuery(function($) {
    $('#username').focus();
  });

    It is advisable to place a script just before the closing tag </body> tag unless the script affects the user’s experience on load. The javascript focus() method affects ux. When I visit twitter from a shotty connection (like when my housemates are all bittorrenting at the same time), focus is shifted to the username field after I have already typed in my username and I’m halfway through the password field. I have to re-click the password field to finish what I started. It’s annoying. Load the script in the <head> or directly after the corresponding element. Or just don’t shift focus.

    Seriously, though, why does Twitter jQuery, Prototype and Scriptaculous? Old code? Or maybe they’re just really indecisive and like to keep their options open.

    Edit: They have since redesigned the homepage and now only use jQuery.

    Posted in web dev and tagged , on May 13, 2009 at 5:02 pm #

  • Don’t let keyboard shortcuts hijack user experience

    1

    One of the most frustrating aspects of myspace (and there a llloooottt of frustrating aspects) is the use of javascript keyboard shortcuts within their image viewing platform. When viewing an image from a user’s profile, hitting the left or right arrow on your keyboard will load the previous or following image, respectively.

    Here’s the problem: it prevents users’ from using their arrow keys for purposes other than browsing images. This is problematic because the thumb buttons on modern mice navigate backward and forward through browser history by emulating keystrokes (alt/cmd + arrow).

    Once a user clicks through to a myspace photo, attempts to traverse backward through browser history by clicking the ‘back’ thumb button prove fruitless. They have to manually click the ‘back’ arrow in their browser. This confuses the user and interrupts her experience.

    To make matters worse, some users (myself included) don’t have a ‘back’ arrow in their browser. I removed mine because I became so dependent on firefox’s keyboard shortcuts I found myself never using the ‘back’/'forward’ buttons. It allows more space for the location bar so I can read longer urls.

    The result is a blackhole. I navigate to a myspace photo album and can’t exit. I’m forced to open my browser history or right click > ‘back.’ It’s annoying and adds to the aggro myspace loves to evoke.

    All I ask for is an option to disable it. If you’re going to experiment with javascript keyboard shortcuts, please make them opt-out at the very least. Opt-in (a la gmail) is ideal, and whatever you do, do not require them. What is helpful to one person can be a pain in the ass to another.

    Posted in web dev and tagged , on May 2, 2009 at 11:28 am #