A Contact Form

I recently got fed up of spam. Well, that happened a long time ago. What bothered me recently, enough to take action, was false positives, i.e. real email that fell into my spam folder. My primary email address, [email protected], gets about 3000 mails a day…so what goes in my spam folder, stays in my spam folder. There’s no way known I will ever fish it out.

People I know usually get through to me okay, but of course I also receive mails from people I don’t know – who found my mail from my blog, websites, writings, or offline meetings. For them, there’s a good chance of being marked as spam, especially if they use a subject line like “hello” which is a perfectly natural thing to do when you’re just checking in with someone you’ve met at a conference, for example, so you can keep each other’s contact details. (Incidentally, I still find it astonishing how many people maintain blogs – many of them meticulous, comprehensive, and full of goodness – but include zero contact info.)

So I finally bit the bullet and made a little PHP/Javascript contact form. It’s been working great for several months now. This kind of form is nothing new, of course. Mail forms were once ubiquitous in every book on CGI. But there were a few modern twists worth mentioning.

The form looks as follows:

The gnarly twists:

  • Captcha. Or, really, ReCaptcha. Actually, I prefer Captcha to ReCaptcha – I think the benefit of scanning books is great, but can’t justify the usability cost of having to enter two words instead of one (for no extra security benefit). Still, I wanted to try out ReCaptcha, and I also like the way its a popular, centralised, service, which means it should be better at detecting evil clients than a standalone library installation. The PHP plugin and instructions turned out to be incredibly easy to follow. A pleasant surprise that meant spam prevention took about 20 minutes to set up in total.
  • SMS option. Instead of email, you can send the message as SMS (text message to my phone). I need to improve the UI here a bit, ideally creating separate tabs for SMS and email. Anyway, the way this works is via everybody’s favourite micro-blogging service, Twitter. On the Twitter website, I set preferences so direct messages are routed to my phone as SMS messages. Ideally, I would then send a direct message to myself each time someone wants to SMS me. But unfortunately Twitter doesn’t let you send messages to yourself (silly!), so I created a secondary account (the venerable “mahemoff1”). Each time someone submits a SMS, I use the Twitter API to end a direct message from the secondary account to the primary account. This gets me a text message several seconds after the form is submitted. I also receive a copy in my Twitter account, as a bonus. (For all the talk about Twitter’s unreliability, its text messaging is lightning fast. It shows up on my phone long before it shows up on Air clients, which only poll once a minute or so. Ideally I’d upload a video if I had the time, to show how quick it is.)
  • A web chat facility. Everyone should have it, to avoid making people install AIM etc just to chat with you one time! I installed an open-source chat client so anyone can talk to me. In an ideal world, browsers would notify me when someone is trying to chat, but for now, it requires pre-arrangement. I would like to enhance the app so it uses the same SMS mechanism to tell me each time someone enters the chat room.

A Video Sharing Website based on Web 2.0 Patterns

We’ve done a little group exercise at the TOOLS web 2.0 patterns workshop. Designing a video website, with heavy emphasis on mashing up, e.g. show videos from youtube, grab recommendations from netflix, grab friend lists from Facebook, etc.

Here’s the full feature list (click for full image):

And the design:

We eventually identified features, at back end and front end, and listed similar sites where on might get inspiration for each feature. Interestingly, when you do this with web 2.0 sites, you end up realising you could actually implement the feature by actually using this service.

Dragos has transcribed the list we came up with (partly visible in the photo above):

Day 1: Design Exercise

Problems + Solutions (1) [MM - these were back-end features]
-Key-value store: Amazon Dynamo/S3, BigTable (Google)
-Streaming: Hulu, YouTube streaming (not Flash)
-Client time synchro service: NTP, MMORPG
-Social network integration services: Oauth, OpenID/Passport
-Mash-up engine: PopFly, Yahoo! pipes
-Monetization (social cash -> $, analytics, instrumentation): AdSense, witkey.com, SiteMeter, Elance

Problems + Solutions (2) [MM - these were front-end features]
-Video: Vimeo, Nicovideo.jp, Jaman.com
-Mood: Musicovery, Yahoo! IM, Nabaztag.com
-Friend states: Twitter
IM: Facebook/MySpace, Twitter, Shoutbox
-Recommendations: Tuneglue, Netflix, Facebook

Some Emerging Themes
-Taxonomy of social networks
-Social profile aggregation: InfoCard
-Integration of services transparent from user
(Tim O'Reilly’s innovation by assembly)
-Privacy (who sees what)
-Biggest pile wins
-Cooler than thou 

Visualising version history

I’m a redundancy fanboy. In visualisation, different formats suit different personalities and different tasks. With version control, the usual format is just a text log. This is good if you’re scanning for specific terms, but pretty ordinary for other activities – e.g. to get a feel for general trends that have arisen, the pace of change, or the rise and fall of specific contributors.

It’s encouraging, then, to see demos like the following, which shows the evolution of the Python language project (via Dion’s tweet).


code_swarm – Python from Michael Ogawa on Vimeo.

It reminds me of one of the first screencasts by Jon Udell, a fascinating walkthrough of the evolution of a wikipedia page over a year or so. The page he chose for this demo is as memorable as the message of the video itself.

These visualisations are cool as tasters for what might be, but they are “here’s one we made earlier”. Where are the tools to automate all this? I have no doubt such tools have been created in academic research projects, but let’s see them in action. I’d love to see the source code hosts – sourceforge, google code, github, et al – integrate this technology to produce visualisations on the fly.

Firefox 3: The Changes…Firefox 4: The Wishlist

Firefox 3.0 ticker tape parade

Today is Firefox 3.0 landing day. Maybe tomorrow as the servers have been down for many hours now. Funny how Twitter is up, but Mozilla is down…it feels like today is the Juneth of 18. Anyway, this is great news as you could wile away a few lazy hours tweeting and plurking about the irony and how you’re chomping at the bit for FF 3.0, and watching other people say the same thing but with different yet equally charming emoticons. But anyway, FF 3.0 is pretty much here. Yay!

Firefox 3.0 is faster, more stable, and standards-based, and that’s no mean technical feat, but the upgrade is not so obvious from a consumer’s perspective. And my own ADD mindset craves more visible changes that will impact on usability and utility.

The modern browser is the application billions of users spend the most time in, many hours a day, and the trend is set to continue as desktop migrates to web. And Firefox is used by 18% of users (Net Applications via wikipedia, Q2 2008) – that’s 18% of some billions of users. A very big number indeed, and even more remarkable in certain markets, where Firefox dominates share, and even in the entire population of certain countries, where it appears to be neck-and-neck with IE. Furthermore, as a major player, the features of Firefox are clearly going to influence those in competing browsers. What’s in Firefox matters a lot. So, by deludedly illogical inference, the present article must also mean a lot to the future of our green planet. Here I will outline UI changes in FF3, then present my wishlist for FF4.

But first, what’s in 3.0 then?

This is a wishlist for the next version of Firefox, FF 4.0. But first, let’s review Firefox 3.0, ignoring those important but not too tasty “-ility” updates, and instead focusing on what users will actually see. I had to think about this. After several months of using both versions alongside each other (on different boxes), I really don’t notice much difference at all. as noted by wikipedia, are pretty trivial. (I noticed a better list here, though there are no other major features mentioned.)

  • More native look and feel. Nice, but a small change.
  • Redesigned download manager, can search for downloads Same.
  • Redesigned add-on managerIt’s integrated with the main distro site This is by far the most important new feature. I’ll elaborate later, but FF is all about plugins and the plugin process has been pretty silly up to now. In the book, Art and Science of Javascript, my chapter on Firebug included a section on installing the Firebug extension. And I can tell you, looking at it step by step, you can see how complicated the whole thing is.
  • Microformats are supported. Cool, we like microformats and it leads the way to the so-called “Web 3.0”!
  • Introduced Places for bookmarks. Yes, this is the most obvious new feature, but the thing is, years of rudimentary bookmarking support, combined with Google’s almightiness and Delicious et al, has weaned me, and I suspect many others, off bookmarking in general. I don’t know, how many people are really going to tag their bookmarks? What I do like is the new smarter address bar with history auto-completion and better display. It has leap-frogged IE here, which has searched by title for some time. Handy little feature.
  • OSX version supports Growl, spell check, and Aqua. Well, Growl is nice and it’s available to Add-on developers…but it should also be available to all websites, perhaps using a whitelist setup. (Similar to the Add-On trust system now – a notification panel that says “this application wishes to notify you of critical events via Growl. Do you agree?”.)
  • Default icons change Cool but fairly basic again.

These are all changes you might expect in a point release – it would be hard to justify going 3.0 in the absence of all the other improvements to stability, etc. That’s why I’m not trying to take anything away from the overall FF3 effort … there’s a lot of changes outside the UI. But when you look at these UI changes, they’re very basic. I’m hoping FF4 is more focused on seriously evolving the browser, and that means taking some chances and making some bold improvements to the shiny Fox machine.

And now … The Firefox 4.0 Wishlist!

Shipping with Add-Ons

As I’ve said before, Firefox needs to ship with a proper suite of pre-installed extensions. The “thin kernel model with optional extensions” is architecturally sound, and of course many applications now incorporate a plugin style architecture. The highly successful Linux and Apache web server projects are based on this model too. However, Mozilla misses a trick by shipping without key extensions. The attitude seems to be “if users want it, they can ^@!#$ install it themselves! The Mozilla people are in general extremely concerned with usability and the human factor, but in this case, the attitude reeks of Comic Book Guy geekery. Leaving out basic tab functionality, for example, yields unecessary advantages to Opera and Safari. Yes, it’s available in TabMix if you care to download it, but if it’s that important, then ship FF with TabMix!!!

There should be a standard distro with 5 or 6 popular plugins, all chosen for utility, simplicity, security, and compatibility with each other. This should be the one you get when you click the big, fat, super-easy-to-use, Download button (which I have always admired and has since been copied by many other websites). A bit deeper in the recesses of the Firefox distro site, you could also download the minimal edition as well as specialised editions. Alternatively, you might select your distro the first time you run a new Firefox profile. I could imagine a wizard that (a) asks you which distro (mapped to a set of add-ons), and then (b) lets you customise the list. This is much better than the current situation for creating a new profile, where you have to go and (re-)add all your typical add-ons manually, then restart.

It would be cool to see specialised editions for developers, students of different ages, gamers.

Apart from usability, this would be a boon for security, which is arguably Mozilla’s primary concern and greatest source of pride when comparing Firefox to IE. Relieving most users from the need to install add-ons reduces the chance of a screw-up involving installation of a malicious plugin, or some unanticipated interaction between plugins that creates a hole. The default stack would be designed and tested for security, and any alerts involving an add-on in that stack will be highly visible.

Make it easier, much easier, to write Add-Ons

This was supposed to be an enhancement for FF3 iirc, but may have been dropped (?). Anyway, writing extensions in Firefox is a complicated business. You have to know XUL and deal with the whole packaging structure. It should be just as simple as writing Greasemonkey scripts IMO. I’d like to be able to say something like $("addressBar").style.backgroundColor = "red" for example. These things could be made possible with enhancements to Greasemonkey, but of course Greasemonkey isn’t built in. What I’m looking for here must work with the raw version of Firefox. This will lead to a proliferation of cool new add-ons. It will also increase the risk of security violations as there will be more plugins around and it will be harder for Mozilla to vet them all, but relying on a difficult API to slow down add-on … that’s not the way to ensure security.

Installation of Add-Ons, Themes, Search

Installing search modules should work the same way as the new way to install add-ons and themes, ie all inside the client instead of bumping you to a website. Installing themes is half integrated but still requires you to go to a website. Even Add-Ons requires you to go to a website to explore fully. I think this should be unnecessary.

There is also confusion of terminology, with references to both “Add-Ons” and “Extensions”. On the official add-on website, “Search” and “Themes” are combined with 10 other category of Add-On (Appearance, Bookmarks, etc.), whereas they are in fact special types of add-on. So in some cases, they are kept distinct, and in other cases, they are lumped together.

Improve Profile Management

I like the idea of profiles – as a developer, it would be nice to switch between a developer profile and a user profile. And also between multiple dummy user profiles while testing. But switching profiles requires a restart. Not only a restart, but you have to run Firefox with the “-p” flag, and the installer doesn’t come with a launcher for profile-switch mode. For that reason, I bet most users probably don’t even know this feature exists.

The simplest improvement would be for the installer to add a launcher for profile-switch mode to the Start menu (in windows at least), just like there is one for Safe Mode. Moreover, just integrate profile switching into the actual interface…just include a dropdown in the Advanced Preferences or add a new menu item somewhere which expands to show each profile ID. Easy! True, you’d still need a FF reboot. I don’t see that constraint changing anytime soon …

Tab-Mania! Sugoi yo ^o^

I wrote this up in Taking Browser Tabs Seriously. There’s a ton that could and should be done to ease the multiple tab experience – notifying, searching, grouping, sorting, etc etc etc. This is HUGE! ‘Nuff said, see the link for details.

Retain all viewed content (or at least index it for searching)

Come on, you know you want it! Instead of bookmarks, it’s time to finally bite the bullet and let users search through every page they’ve visited (if not forever, then at least for the last X days). How many times do you have to search for something on Google that you’ve already seen before. The browser could take care of it. Just as Google search slams Yahoo taxonomies, so too does full-page history search obliterates bookmarking. I don’t know how much capacity you’d need to do it, but I bet if you asked in 1994, “will we be able to do that in 2010, with 16 years = 1000x (ie 2^(16/1.5)) improvement in hardware stuff”, you would answer a resounding yes. With the right optimisations, I’m fairly certain this is possible. BTW I realise you can effectively achieve all this now with Google, but there are a lot of reasons why it should be built into the browser (intranet and hidden content; privacy and corporate security concerns; possibility of offline browsing old content).

Improve history

With or without the previous enhancement, Firefox history has always been a bit wanting. For starters, search needs improvement – you should be able to search history the same way you search through a page. ie instead of filtering, it should just highlight matches and scroll to them. This way, you could see which other pages you were looking at around the same time. Sometimes, I’m searching for one term, but only because I know I was looking at another page at the same time, and I can’t locate the other page via search. (Although I could do so if the previous enhancement was available!)

Search should also work without having to hit Enter – it should be updated on each keystroke just like page search.

Furthermore, it’s excruciating trying to work out what time and date you viewed something. You get the “View by Date” which sorts by date, but doesn’t let you search in this mode. And in any event, it still doesn’t show you time of day. And if you view in other ways (by site or last/most visited), you don’t get any time or date at all.

That Sidebar

I never get why there’s only one sidebar when there are several possible contents (bookmarks, history, add-on-specific features). And it’s also odd that you can only control that sidebar from the menu rather than the sidebar itself. You should be able to have multiple sidebars, or at least one accordian style sidebar containing all possible contents. Similar to the All-In-One Sidebar add-on.

I could imagine Firefox achieving flexible UI with an elastic docked window style UI like Eclipse (or indeed Firebug in some respects), but I think that would be too complicated for mainstream users.

Render Non-HTML Content

I realise a browser’s fundamental job is to show web pages and it’s rarely good when applications over-step their boundary, but in this case, I feel there is a case for putting in at least some effort on non-core activities. I’m talking about how Firefox (and every other mainstream browser) deals with non-HTML content. For example, this came up on Twitter today, where my colleague mentioned the problems we have viewing JSON in the browser. It requires a download basically and then manually opening and viewing in your editor, and that’s not very satisfactory. Even with XML, which is rendered by FF, how about some intelligent interpretation. If it’s RSS or Atom, for example, provide a suitable default stylesheet explaining what it’s good for and how to subscribe.

Better File System Navigation

When you visit a local directory using file://path-to-directory, what you are greeted with is an interface that hasn’t changed since the mid ’90s. Arguably, it’s doing enough already, so why complicate it? But I think that exploring the filesystem is a rather useful feature for the browser, given its sovereign posture which means it could be used as the primary control centre for managing your local file system.

It’s also impossible to visit the root of your filesystem using file:/// on certain OS’s, at least on my Mac. This is obviously fundamental behaviour that’s missing, and the bug was logged in 1999! On my Mac, I also can’t open up /Volumes/Macintosh HD due to the space. When I click on it from /Volumes, it changes to file:///Volumes/Macintosh%20HD and that URL breaks. Doh!

Just like Explorer or Finder, files should be shown in various possible formats – tabular (with sorting), thumbnail, etc. And it should use thumbnails to show file types.

Better Keyboard Binding Support

I like those programs like IntelliJ Idea which let you control keyboard bindings for pretty much anything, and also let you save and load configurations. Firefox should do the same. A lot of the shortcuts are hidden anyway and should be available somewhere in the interface, e.g. a keyboard preferences area.

Mouse Gestures

This was one of the awesome things about Opera when I first started using it and it made browsing fun and more subconscious, one step closer to the haptically brilliant Minority Report hand control scenario. I used it all the time, but on Firefox, the main add-on didn’t work so well and I never got into it. Gestures should be built in so they are available to all users and available to all add-on developers. It would be even better if they were available to web apps as well, using some kind of whitelist if necessary (as I explained earlier wrt Growl).

Comment on the Coop

Incidentally, there is also The Coop. This was intended to ship with FF3, but dropped at some point. It’s an attempt to embed social networking and stumbleupon-type functionality. To me, this is exactly the sort of thing that really is too far removed and should remain an optional add-on. It’s actually tied to a single server run by Mozilla, which doesn’t seem right for an open-source product. It might make more sense if it was generic platform/API, with the communication protocol published and the server software also open sourced.

Fin

Firefox is by far the best browser today, already has some great UI improvements from 2.0 days, and I am pleased that v3.0 is now more stable and performant than ever. Now I’m looking forward to usability improvements and looking forward to seeing other people’s wishlists!

Music As She’s Developed

I made a little music mashup you might enjoy using.

A Little Music

As I was playing around with the new layout of this blog, I added a Last.FM widget to the sidebar. It looks like this:

(May not render if you’re reading this from a feed reader.)

Great. Now I can listen to trance from the blog. Trance is good for coding. So that’s ace. But I couldn’t stop there, could I?

Widgets, Widgets, Everywhere!

I made this page with 30+ gadgets in all sorts of genres. This is good for those times when I’m not coding and want to listen to something else. Being in the cloud, it means I can easily listen to whatever I feel like when I’m in an internet cafe or the such like. So even more ace.

Make Your Own Jukebox

In the spirit of sharing, you can easily make a page containing your own favourite music. The URL for the default music page resolves to something with a ridiculously long list of genres:

  1. http://softwareas.com/music?tags=trance,ambient,meditation,triphop,funk,randb,rap,hiphop,metalrap,latin,salsa,reggaeton,rock,pop,retro,alternative,metal,punk,aussie,britpop,europop,world,bhangra,arabic,70s,80s,90s,house,techno,electro,acid,garage,psychedelic,jazz,swing,lindyhop,classical,instrumental,orchestral
… which means you can hack the URL and make your own jukebox with your own genres and bookmark it and it will work and live on in the cloud and you too will be able to listen to your favourite music anywhere you go.

For example, you might be a more passionate fan of contemporary Japanese music than myself, in which case you would concoct the following URL and save it to your delicious bookmark manager to enjoy many years of musical gratification:

http://softwareas.com/music?tags=j-ska,j-pop,j-punk,j-hop,j-rap,anime

Add A Player on the Fly

One other feature is that you can add a new player on the fly. This again is great for travelling around as it will let me easily listen to any genre I care for without even having to edit the URL.

(Unamusing trivia: I actually caused a bug at first by using “gray” as the colour name here. I’m used to working with American spelling for programming of course, but then last.fm is a UK company and the name you want is actually British spelling, i.e. “grey”.)

Obligatory Wishlist I’ll Not Really Get Around to Implementing But it’s Cathartic to Braindump it Anyway

If I was going to do more work on this, I would:

  • Make it into a widget-like portal which lets you add/remove/layout etc and save settings within a hackable URL (using Unique URL. You could argue the whole thing is useless as you could achieve the same thing in iGoogle/Shindig, but sometimes a specialised interface, tucked neatly inside a separate tab, works best.
  • Provide more flexibility on layout
  • Add support for bands, not just tags
  • Run it on a separate page without the blog layout
  • Keep the loldog

Dogfooding considered solipsistic

Jeff Attwood encourages developers to eat their own dogfood:

I’ve found that much of the best software is the best because the programmers are the users, too. It is UsWare. It behooves software developers to understand users, to walk a mile in their shoes. If we can bridge the gap between users and ourselves– even if only a little– we start slowly converting our mediocre ThemWare into vastly superior UsWare. To really care about the software you’re writing, you have to become a user, at least in spirit.

This is good if you’re writing an IDE, not so good if you’re writing a word processor and actually kind of plain wrong if you’re writing a medical or trading app where developers lack the knowledge and experience of typical users. As Jeff himself has noted elsewhere, “If the application you’re writing isn’t intended for expert users, having the developers dogfood it won’t necessarily buy you much, because developers are highly unrepresentative of typical users. Beyond fixing critical bugs, it could even hurt the application: developers tend to add advanced, complicated features that are useful to them.”

At this point, I’m supposed to launch into a tirade about how the inmates are running the asylum, but I actually think that’s a pretty condescending attitude, albeit one that has includes some arguments to be aware of. It’s also somewhat of a self-fulfilling prophecy. Professional software developers have an important role to play in working towards usability, especially in the very real situation where usability professionals are simply not available.

How do you improve usability when you can’t eat your own dogfood? The solution is to become an anthopologist and watch actual users eat your dogfood. There are a lot of variants of this:

  • Paper prototyping. For early design feedback. Incidentally, paper prototyping is a lot more than just lo-fi, hand-drawn, sketches. “Real” paper prototypes are interactive, like a board game, with a little real-time prodding from the researcher and possibly an assistant domain expert.
  • Contextual analysis. This goes by several names, but the idea is to sit in the real-world environment of users and see how they interact with the system, as well as other systems, other people, and the general environment. The only problem with this approach is that you can’t do it with an in-progress system; it either has to be the old, extant, system, or the new, almost-complete, system.
  • Interviews and walkthroughs. The user sits in a “usability lab” (but probably just an office) and runs a test version of the system, discussing it with the researcher. It may also be that there’s no system involved, just a qualitative discussion.
  • Automated monitoring. A fan favourite of privacy advocates everywhere 😉 – so please inform users what you’re monitoring, let them opt out, etc. This involves logging and monitoring of user actions for later monitoring. Thanks to the magic of Ajax, there are now some very powerful tools that will track all activity in the browser and play it back for later analysis. For example, Scrutinizer, written by the talented Nitobi team. Scrutinizer is cool because it actually blurs everywhere outside the mouse pointer area, so is an okay approximation for a full-blown eye tracking system. I haven’t heard of biological testing – especially PET scans – but with growing inteterest in Neuroeconomics, I’m sure it’s coming.

A related problem of dogfooding is that software developers tend to enjoy writing systems for themselves, i.e. those where they really will be eating their own dogfood. This is why we have: a proliferation of IDEs and clones of the veritable Unix “make” utility; quite an unreasonable number of applications about Klingon and juggling; but far fewer about quilt making and the art of kite surfing.

All this goes a long way to explaining why the greatest usability is often seen in software related products. I rate IntelliJ Idea, Firebug, and the general Unix philosophy among the best exemplars of software usability ever created, in any domain. Mainstream business and scientific applications will never be as good as those applications through the application of dogfooding.