techno.blog("Dion")

I have a love hate relationship with autocorrect. When you type gibberish and it automatically converts to what you really meant you let out an “ahhhh”, but when you type something correctly and the system gets in your face and switches it over to something else you get mad. I find that I often know when this is going to happen. When “almaer” turns to “Almaer” in a case sensitive field I growl loadly.

Google acquired BlindType (video above), which is one example of dealing with this particular issue, and it is great to see technology in this space (e.g. Swype). I am sure we will see a lot of new technology come around to make life easier for those who want to quickly navigate around, or get a bunch of content into the device. Have you ever wanted to reply to an email while mobile with something of substance and be frustrated, knowing that you will have to hammer out the thing on a small keyboard? I have. Using voice input has been very mixed, to a point where I don’t try it.

I got thinking about how I would love to be able to use voice actions whilst typing. After all, we do that in other ways. Look at an Italian using his hands as he talks, or a radio DJ make changes as he raps. My particular urge was to say “set spellcheck off” as I typed something onto the device that I knew it would want to correct. Once I did this once, it kept coming to mind as I did other things. When in the browser opening new tabs, sometimes I want to open them up in the background, but other times I want to open them in a new tab but jump right to it. The browser could give me a slightly different key combo for that, or I could say something like “jump” as I complete the action in question.

Once you know that you don’t have something that you want, it is frustrating. I showed someone how they could hold down the home button on iOS and speak to the system “call Dion Almaer mobile” worked like a charm. They then tried “open Facebook”, but to no avail. It feels like it is only time for systems to open up voice as a first class citizen here. Any third party application should be able to add their own voice commands into the substrate.

Once again I feel like an ape at my computer. I can poke and ug (point and click), and I am starting to be able to do more touch, but let me speak and use other senses! SmelloKit where are you?!

I got my Mum an iPad. I wanted to get one for her more than me (even though I got one too of cos ;) as it seemed like a perfect tool for her to consume content. Finally, I get to hand her something that won’t just break. She doesn’t need to be scared to use the device. One button. So much simpler for her than a normal computer.

She has loved it. My Dad has told me that she is always on it. This week she flew in and stayed with us, and I got to watch her use it first hand, and it was fascinating.

I had my brother setup the device for her first time around. He installed a bunch of apps, and must have shown her how to add a bookmark to the home screen. I say this, because when I asked her whether she had the Foo app, and she said “Yup, here it is.” However, it wasn’t that app at all, but rather foo.com saved onto the home screen. She had no idea that there was a difference! Now, I personally believe that the world of URLs on the device vs. apps should entirely blur…. but it already had to her! I then had to show her the “App Store” and how to install apps.

This is when I learned how poor the UX is for downloading and installing apps. I have thought this before, but didn’t realise how bad it truly is until I watched my Mum.

She had NO idea how to install an app. She could find them, but couldn’t install them. It turns out that the UI for doing an install is incredibly poor. You have to know to tap on a small [FREE] or [$1.99] button which then turns into the [INSTALL] button. It is small, and not obvious at all. I wonder why Apple hasn’t noticed this and made a more obvious [TAP HERE TO INSTALL THE APP] flashing green button?

This is bad on the iPhone:

But with large real estate on the iPad, it is really hard to find:

It is also hilarious when you see someone struggling on what to do with a device that has ONE button. I love you Mum. Thanks for letting me see a UI through different eyes this week. I hope you continue to enjoy the iPad!

In my feeling touch-y post on some of the fun usability issues and opportunities, I touched on shortcut keys.

As I have continued to learn more about the webOS platform, one of the biggest changes for me has been knowing that a physical keyboard is available.

This is why we put in shortcut keys for the Facebook app. I can now very easily jump to an area of the application by touching the gesture area and pushing a key. I would love to see shortcuts available in many other webOS apps, and a “GreaseyPalm” (greasemonkey type system on webOS) would be awesome… enabling me to easily tie my own in… but that is another story :)

Other than shortcut keys though, I have found more and more applications using the “Just Type” metaphor. It turns out that many apps can be smart about what a user would want to do if they just type.

We implemented this on the Facebook app. If you are on the news feed and you start to type, assume that this is a status update, pull up that UI and put the content in there.

Bad Kitty and other Twitter clients do a similar thing for assuming that you want to Tweet something.

My favourite example is in the core launcher itself. I remember being incredibly frustrated with home screen layout on the iPhone, and on webOS at first. Having to move icons around on the phone is a pain. I was excited when they added the ability to manage apps in iTunes, but the UI manages to be just about as frustrating in there.

It took me awhile to realise that I don’t need to use the launcher in this way at all. I can just type, and it will find the app I want. Hmm, where have I seen this before? Quicksilver! Ubiquity! Those examples go even further and offer actions that are even pluggable and scriptable… which would be awesome on a mobile device too.

This is yet another item on my checklist when I build an app. If the user started to type right now, could I do something smart that just works?

Just Type. Check!

Implementing Keyboard Shortcuts

A few folks asked about keyboard shortcuts. To implement them a la Facebook, you simply use the shortcut attribute for actions in the

        var appMenuModel = {
            items: [Mojo.Menu.editItem, {
                label: $L("Preferences & Accounts"),
                command: Mojo.Menu.prefsCmd
            },
            {
                label: $L("Navigate to..."),
                items: [
                {
                    label: $L("News Feed"),
                    command: "gotoNewsFeed",
                    shortcut: 'h' // H = home
                },
                // ...
                ]
            }
         }

There have been a couple of things that have been really fun to see and work on in Bespin recently.

First up, is our new Pie Menu that Ben just posted on. The short reasons why I like the new look are:

• Giving as much area to your code as possible. Why show a command line all the time when you only need it when you run commands? Why have headers and subheaders?
• Pushing the boundaries on subtle animated effects that full screen change the bits “on the glass”

The implementation is interesting too. We took the nice animation and easing functions that Dojo already provides, but instead of it powering the DOM, we hook in and have it power our Canvas animations instead.

For example, to show an incoming animation we use a fadeIn effect with the backOut easing. In onAnimate we use the opacity setting that the animation provides to render our own animation:

var anim = dojo.fadeIn({
    node: { // fake it out for Dojo to think it is changing the style :)
        style: {}
    },
 
    duration: 500,
    easing: dojo.fx.easing.backOut,
 
    onAnimate: function(values) {
        var progress = values.opacity;
        renderPie(progress);
    }
}).play();

Here you can see it in action in video form:

Or, go to the live sample.

We are excited to pump up the “fun” in the UI (with options to tone it down of course). Once nice side effect is that the editor component will have this all baked in, so where ever you see a Bespin, you will be able to access the features you want.

Web Workers; Not having them do too much

Malte Ubl continues to do much appreciated interesting work for the Bespin project. His facade around Web Workers is good stuff.

Since we are trying to push the boundaries of the Web hard, and giving some sexy to the UI, we need to make sure that we keep responsiveness as the highest priority, else users will go nuts.

Web Workers give us the ability to do a lot more in Bespin, but outside of the main browser “thread”. For example, doing real-time analysis on the code itself (e.g. setsyntaxcheck all). The problem that we ran into as we started to use Workers for this type of thing, was making sure that we weren’t killing the poor CPU. It is all well and good to fire off work to a Worker, but how many are running crunching? Malte has done work to make sure that the CPU fan doesn’t go nuts if you are doing a lot of work, and this is something that people will have to generally work around as they start to do more and more in their Web applications. It may be nice in the future to have a richer API that you could use to time slice your background tasks in a better way, as there is a lot of work that fits into the “kick this out and run at your convenience” mould.

Malte recently posted on how added support for the Bespin event loop into the Workers themselves. This is really nice as a Bespin developer as you can use the same publish/subscribe event metaphor, and the Worker facade handles it all for you, so you can talk across the boundaries. This hugely changes the amount of code that you have to write.

He also added support to help the asynchronous issues around “Can you fire this, but make sure that it only fires after foo, bar, and baz are all fired”. We will probably need to cache certain published events so we don’t get into a situation where you run this code after a main initialization event has fired, and thus you will never see it again.

Building a Web application using the latest and greatest HTML5 features is a lot of fun, and we hope that developers will like it too.

Have you ever noticed how the odd subtle feature here or there has profound impact? You can either inspire the “wooah, I can’t believe this app just did this!” for good or ill.

When I try new Twitter clients for example, the lack of a certain feature that I am used to can be the game changer for me. One simple example is expanding short URLs. I don’t want to see http://tinyurl.com/aaaa. I want to see http://bbc.co.uk/..... The fact that Twitter has the URLs part of the space limitation is their issue, not mine. I have a greasemonkey script that auto expands through the 301 redirect stack. When I tried Tweetie for the Mac, I looked for that feature. It gets a passing grade as you can turn on a feature that onclick does a popup with the full URL and “sure you want to go here?” Not bad, but not what I really actually want. The same goes for writing a message. Let me put in the full URL and if the message is too long, at that point auto shorten for me.

So, subtle features can make or break my enjoyment of a tool. On paper, two competing tools can look the same, but you find that one user base loves it, and another doesn’t. We have run into that a little with Git and Mercurial. On the surface they are both very similar DVCS, but subtle usage differences have resorted in very different reactions from our community. Also, the fact that Github exists (even though Bitbucket is doing well too) makes a huge difference.

One common problem that I constantly find myself grappling with is that I sometimes try to do too much “automagically” for the user. Surely, if I do all of this stuff for a user, they will love me! That is what computers should be doing, make them do less.

Although this is very true, and comes up in the Twitter examples above, and also in the fact that Google does an amazing amount of work behind the search box, it is a tricky balance.

One case that everyone has experienced is auto correction. I remember when this feature first appeared in Word and it drove me batty. I always felt like I was fighting the machine. No! Don’t capitalize that for me! I actually get that feeling with the iPhone to this day. The only reason that I keep autocorrect on in the iPhone case is that the keyboard is so fat-finger-constant that you have too. Still, a day doesn’t go by when I don’t type something that puts a capital letter in and then I have to back up to it and then remember to un-select SHIFT. Ugh. This is the kind of thing that makes your blood pressure up every time you do it, and you curse the fact that computers are still so dumb.

Autocomplete

I made the same mistake myself with Bespin and the command line. Early on I thought to myself:

“since I know all of the possible commands that the user can run, if they have typed enough that there is only one choice, automatically fill it in!”

This seemed great. No need to even hit the tab key! In practice though it was silly indeed. I found myself at a command line with value such as “listst” (as it auto filled to “list” but I didn’t notice and kept typing the end). With years of command lines under my belt, this new functionality went against all of my training. Having to do a TAB myself turned out to be a feature. It gave me control. What I did do though was add a filtered list of commands above the command line which gives the user information on what is available, and when you are down to one you know that TAB will get you there.

This made me realise the subtle difference between autocorrection, and say Google results when they suggest “Did you mean ‘Hilly Mit’?” If Google just thought it was so much smarter than you and changed the terms automatically you would be as frustrated as Word autocomplete. This way, you get control, and when Google is right (90% of the time) you are one quick click away from your answers. Of course, Google is so good at searching that even if your term was a bit off, often the result is right there anyway so you don’t even need that click.

Another more subtle feature of the command line that tries to be smart, is the fact that if you have typed in a command that has no other options, and the command requires a parameter, a space is automatically added. This means that you skip a SPACE BAR hit and you get a visual cue. In reality it normally means two spaces in between the command and first argument (which is of course fine and is no different). It is still enough to bug people.

Of course, this all pales in comparison to the grand daddy of all, Clippy. Clippy offered no value, was wrong 90% of the time, and was incredibly in your face. All pain and no gain.

In conclusion, whenever I think about adding a feature that seems borderline too smart I stop and think:

• Is this too smart for its own good (like auto correct)
• Would it be better to subtly give the information to the user so they can act on it (like Google search “did you mean?” and Google Suggest)
• Should I make this a setting that the user can easily turn on and off (as in command line completion)

Have you noticed features like this?

Wordpress 2.7 is such a breath of fresh air. The admin interface feels great and they fixed so many small things that used to drive me nuts.

One of these items was the file uploader. Here is Wordpress 2.6:

My use case is that I use the full size image 99.99% of the time. I never want to link to the image itself in the hyperlink. However, the admin interface tries to force me down that path EVERY darn time. I would find myself hacking up the Wordpress code to give me what I want, and then when I upgrade I had to do it all over again. Grr.

Then I upgraded to Wordpress 2.7 and got:

It remembers. Imagine that! Kudos to the Wordpress team.

I am going to start posting some frustrating user experiences as I come across them. Them seem to have happened a lot recently. Maybe it is my mood :)

I was at the United Red Carpet club and a nice lady couldn’t work out why she couldn’t login to the (now) free WiFi. She put in her mileage plus number, and this came up:

The solution didn’t take long. I scrolled down the page, which then showed a “Terms and Conditions” area that you had to check. This was awful as the flow is all wrong. You see the area you need to fill in (mileage plus number) and then you see the other option, the complimentary access that doesn’t apply to you. You stop, and you submit the form.

Since you can only submit one of the areas, you could do several things such as:

• Put the damn terms on top
• As you fill in one of the forms, the terms popup close by

Here is the full form that makes it obvious:

As I was watching “24 hour party people” on DVD, I heard the main character talk about the ebbs and flows of the music business. He is talking about the scene in Manchester at the end of the 70’s, and into the eighties. Moving from Joy Division to Happy Mondays and New Order.

I think that we are in a new chapter for the web, and as is often the case, the wheel of time is repeating history for us.

There are a few dimensions to the current war though. They are on the client side (DHTML Ajax vs. simple HTML vs. Flash/PDF vs. XAML) and on the server side (Rails vs. Java vs. PHP vs. .NET).

Let’s start at the beginning.

Perl: Birth of CGI

Do you remember how the web changed as it moved from static HTML connected content to dynamic websites? That came about due to CGI, and how our nice web server would now fork off our programs to generate the HTML.

I remember my first CGI programs were written in C, and Scheme. I quickly moved on though, and found the beauty, and craziness of Perl.

I spent quite some time with Perl, trying to get by without writing too much NSAPI and ISAPI code (oops, I guess that core dump hurts the entire server?).

I really enjoyed the community at that time. #perl was interesting (some of the time), and CPAN became the holy grail. As soon as you thought you needed something, someone had kindly put that functionality up into CPAN. I even have some of my own modules hanging out there, and helped with others.

Over a short time period, we had developed some fairly rich web modules. We didn’t have to work with $ENV{’SOME_CGI_ENVIRONMENT’}, or STDIN or the like. Our framework abstracted all of that for us, and gave us a simple model. We lauched at the folks who generated html via methods such as b("whee") and we stuck close to HTML itself, allowing our design teams to simply open the html files and see what their stuff looked like. We even had the notion of components, and special tags that you could create. <$mytag name=”…” /> was nice because the name of the tag was the key for the framework to dynamically discover that functionality. No config files, or interfaces, in the strict sense. The coupling was based on a name.

In retrospect, life was pretty simple for web development, a lot simpler than some of the frameworks we have today!

But, we moved from Perl. CGI was not the nicest for our high load servers. It was crazy to think that we would fork a process for every little request that came in, and that a Perl interpreter would start up, load the program, do the work and then die off.

We naturally moved to solutions such as mod_perl, and that helped. It was so new though that it was buggy and we had a lot of problems. Some of the problems had nothing to do with mod_perl itself, but due to laziness and side-effects.

When you work in an environment like CGI you can be a very bad man indeed. If you don’t close something correctly, or don’t play totally nice with resources, baaaah who cares? The server is going to kill me in 2 seconds anyway, so I will get my job done and have him kill me. In mod_perl world though, these programs start to live longer, and they get fat and oily.

Java: No more stinking processes!

Remember the beginning of Java (Oak!). We were building applets, and feeling the pain very early on.

Servlets were the big thing though. We ported our Perl based framework over, and were able to see significant performance improvements at the time. Some of the team loved the change, others hated the verboseness and static typing.

The nice threading model that Java gave us was huge though, even with the poor JVMs back then (Microsofts was by far the best remember!).

This is when we moved from the world of Perl to having Java start to take over. That isn’t to say that there wasn’t competition. In the waters we saw the lurkers of ColdFusion, ASP, and the beginning of the PHP revolution. Java came up with JSP to compete with these tag based approaches, but it was the advent of the rich MVC style frameworks that really spurred everyone on.

In my opinion Java is still in the hot-seat, especially in the corporate world.

Preparing for the server war

The troops are being gathered. Strategies are being worked out. We are currently getting ready for a new battle on the server side.

What’s happening?

• Ruby on Rails: Whatever you think about Rails, it has lit a fire under the server side web development community. Many have jumped on the bandwagon, claiming real productivity improvements. Some of the PHP converts enjoy a richer language, which is still nice and dynamic, with a framework that enforces clean MVC techniques. Some of the Java community are frankly a little bored of Java, and enjoy the new challenge. They also love the freedom of the language, and the fact that they now have just ONE stack to worry about. Will the Rails buzz keep growing? Will it be the Perl of Web 2.0?
• Java: Java isn’t going down without a fight. Some argue that the problem with web development in Java is that it has been too complicated and heavy for much usage. I have personally called for the need of a common stack for Java, and people have stepped up to the plate. On one side we have companies that will certify a set of technologies (JavaServer Faces + Spring + Hibernate). Then we get frameworks taking on simplicity themselves (WebWork now embedding Spring). Finally we have initiatives like JBoss Seam, which is trying to combine the component models of JavaServer Faces and the backend. Seam aims to give you the power of the Java tier, but also giving you a simple productive environment. So, Java frameworks are rising to the challenge of Rails, and we will soon see how much of the success of Rails is Ruby, and how much can be duplicated in other platforms.
• PHP: We can’t discount PHP. A lot of “serious engineers” (read: anyone who isn’t a PHP developer thinks they are serious) poo poo the PHP world. Yet, by all accounts, there is a LOT of PHP development going on out there. PHP has the advantage of being something written JUST for the web. Take a look at how Wordpress came along (PHP based blogging software) and in no time at all there were thousands and thousands of plugins that you could simply drop into your Wordpress system. Literally, you drop in a file and you are done. There are numerous PHP frameworks that are aiming to mimic, and compete with Rails, so we can’t forget about these guys. The question with the PHP community is: will it grow more into the enterprise, or will it be for script-kiddies.
• .NET: Never discount Microsoft. ASP.NET keeps getting more productive, and it is hard to compete with their end to end story, which includes fantastic tooling in their latest Visual Studio. And, we get Avalon and XAML along for the ride, as well as the futures of C# 3.0 which takes a lot of ideas from the dynamic languages and puts them into a static structure (such as: var foo = new Bar(); and the relational/xml integration)

It is going to be an interesting couple of years, as all of these platforms mature, and take eachother on, trying to get mindshare!

Client Side: JavaScript is cool again

But what about Ajax? The battle for the client side is going to be just as hot as on the server. And they will even intertwine with eachother.

Firstly we have the big debate of how far Ajax is going to go. Is it a one hit wonder? or will it become a standard part of our toolbox and even just be called dhtml again?

As an Ajaxian, I obviously have my thoughts on this matter. But there is a lot of competition inside and outside of Ajax:

• Flash/PDF: Adobe/Macromedia are a definitely force to be reckoned with. Flash is almost ubiquitous, and PDF is used everywhere. Now the companies are combined, what do they have in store for us?
• Avalon/WPF/E/XAML: Microsoft announced WPF/E, which is a subset of XAML that will be ported on various platforms and available in many browsers. This means that you can build your rich application in the .NET set of tools, and have it run in Safari on Mac OSX. Impressive. When are we actually going to see this in a form that we can deploy to the real world?
• HTML: How much do we want to work in the open (ish) world of HTML. A large group of developers do not want to jump into any monopoly, and will therefore want to stick to a more open environment. But, another set will just want to use the best tool to add business value. What will the split be?

JavaScript will play a big role in this war. JavaScript 2.0 offers big improvements, that many people will cheer for. Also, the same people who poo-poo’d JavaScript in the past have come to realise that it really is a great language. It may not be what they are used too (it uses prototype-based OO vs. class-based OO), but it is powerful and robust. There are some features missing, and a big question around libraries. JSAN and others are trying to build a CPAN for JavaScript. We also worry about the black box of the JavaScript VM in the browsers, and cross-browser bugs are truly real painful. Fortunately, frameworks like Dojo and Prototype are trying to help us out on that front.

We are also seeing that we need to take JavaScript from the former:

“That is just crappy code that the web dood View-Source’s and pastes into the web pages”

to the future:

“JavaScript also needs to be engineered, and is a first class citizen”

Thus we finally see more unit testing of JavaScript code, and professional ways of creating modules and namespaces for our code. We also see great advantages with features like E4X where XML becomes a native type.

JavaScripts increased popularity, thanks to Ajax (and Flash/ActionScript) has also drawn it into the server side. Mozilla Rhino gives you a quality Java-based approach, so why not use a cool dynamic scripting language for certain tasks on the server side? You don’t have to use JavaScript for everything, but it has its place, and that place is growing.

The Battles Join

This is where the battles are joining. We have JavaScript bleeding across the layers, and we have the need for server-side frameworks to support the new Web. It isn’t enough to generate simple HTML and be done with it.

Today’s frameworks need to be able to help us build Ajaxian components, and help us write this applications quickly and cleanly.

There are various directions that frameworks are going in here.

• JavaScript Code Gen: Why not give you a simple macro that splits out the ugly JavaScript that you would have to write?
• JavaScript Framework Code Gen: Spitting out low-level JavaScript is too much work. Many frameworks are writing on top of a higher level JavaScript framework like Dojo or Prototype. Now the code-gen is less, and you get the benefits of the rich functionality, browser compatibility, and visual effects available from these frameworks.
• Tools and Widgets: Should developers even care if a piece of their page is Ajax or not? Some frameworks give you drag and drop editors that let you setup widgets or components. Some happen to be ajaxian. Some are not. Who cares?
• Markup based: A lot of frameworks are giving us markup based solutions. That is one of the strengths of Microsoft Atlas, not the fact that they added support for $() etc. Are we going to want to build using markup or via programatic APIs?

Conclusion

It is hard to predict the winners of the new battles, and the losers will not die off totally, but it is an exciting time to be watching web development. The dynamic languages of Ruby, JavaScript, and PHP are making a big run, and people are realising that they aren’t just cheesy scripting languages that can’t be used. It’s time to take them serious.

We are going to start really working out what makes sense for usability on the web with rich interfaces. And, at the same time we will get simpler and simpler backend tools to make the generation of rich web experiences easier and easier.

I am looking forward to seeing this battle!

NewsGator updated their Outlook Edition. One of the many changes, is that now your email client view of your feeds sync’s up with the web view. This is good, as you get your feeds with you simply in your email client (especially offline), yet if you are on another computer somewhere (say, at a conference), you can simply check-in to your normal world.

One of the problems is that now if you rename a folder in Outlook, NewsGator is sending data back to the service to tell it to change its metadata on that entry. This hangs outlook. The user is never told that a simple rename, which we are trained to think of as a simple local operation, is an expensive one.

Feedback in the UI is good.

Ben and I have been talking about tweaking our Ajaxian RSS Reader to be a SVG application. The problem has always been that SVG is plugin based, and just isn’t hugely used.

I think that will change with the announcement that:

But perhaps more interesting than that is the possibility of mixing SVG graphic elements directly into the markup of regular XHTML pages, freeing vector graphics from the small rectangle of a browser plugin and opening up a host of exciting new possibilities for web developers. This is enabled by the integration of SVG directly into the Gecko rendering engine, instead of as a browser plugin.

Now we just need the IE team to put SVG support into IE 7 (come on guys!), and we will be rolling!

The IE team could map SVG to XAML and be done :)