Kris "Justise" Gray

Anti-Design-Patterns
I was choosing between three sessions to go to, and ended up in none of them. Very wise decision, the presenter was Bill Scott the Director of UI Engineering at Netflix and he talked about some user experience problems that he has seen in his work at mainly Yahoo, Netflix and randomly across the web. Here is another rough list though I want to go back over his slides and do a full post after the sessions are over.

• The Meandering Way anti-pattern. Signifies that a user has drift throughout the system / user interface to accomplish their intended action. Bill used screenshots of all the UI’s in the process and then overlayed some red arrows showing the path the user would take. This was very successful in showing that the user had to navigate in a trail simulating the HARD track of Project Goth am Racing.
• If your user experience is poor, people just won’t want to use your product. Having a great UX translates to people being more productive. If people are more productive… (the rest should be self exploratory)
• Usability testing is important, you need to catch your design issues early. Writing that it sounds obvious, but we’re not currently doing it. We don’t feel like a big enough company, yet that doesn’t seem like a good excuse after this session.
• Bill felt very comfortable dealing with contextual item issues. (Things like drop down action menus and on hover menus.) The major problems involved here are making your user hover over, then having to move the mouse outside the bounds of the item, yet inside the new hovered menu to perform your action. Imagine a picture of a full parking lot from above and you hover over the image of a car in the middle somewhere, a menu shows up, yet the menu is bigger then the car and so it opens up and you have to select the option to delete the car from the parking lot far to the right. This requires you to hover over a car, then move your mouse to the right, hover over another car and repeat the same annoying mouse move action. His argument was that its really pissing the user off having to keep move their mouse.  His advice was to put the core actions right over the car so that if you want to delete it, you know that you can put your hover focus on the trunk of the car and that’s where the delete button will be, regardless of how the rest of the window opens. This is an inelegant example that he showed, but that’s what ya get for staying home.
• Netflix found that a quarter second pause on mouse over of a movie before you popup the context window, if it popup up to quickly it was really annoying.
• Popups to circumvent good usability are called Idiot Boxes, as much as I’d like to assume it was because the designer was an idiot for dreaming up such a feature, its really about assuming your users are idiots. Which while people like to claim just isn’t true, they may seem like idiots when you design something really complicated and they don’t care to try to learn exactly how it works, but when you make something very intuitive and smart the user will just know how to use it, and its not a matter of smart or dumb.
• You need to be careful with Drag n Drop, especially with checkboxes. Don’t mess with the checkbox, its simple, its powerful and there’s no reason to go messing with how it works. He made a good point about this, but I kinda forgot it, sorry. Drag n Drop though, just make sure that if you implement it, you do it uniformly. If you can drag to add, can you drag to delete? Drag to re-arrange? If its only partially in there, users will get confused.
• There was some questions about Auto-save, its an action that kind of does something major without to much notification to whats going on. (Autosave like wordpress who saves your latest post without you requesting it so if your browser goes down you don’t lose your blog post that you didn’t remember to save). I think we basically agreed that it was good, but don’t remove the save button. I think as it becomes more commonplace in web apps, people will probably begin to expect it and soon be disappointed when they close their form and it wasn’t saved when they come back.
• Last thing, Use a grid of actions and elements to plot out the different states the elements are in during each action. So on drag, over header, highlight column.

Whew that was a good class, I hope to keep in touch with Bill a bit to pick his brain further, at-least for some advice on directing the UI tier.

I’m trying to keep a list of all the links that I see around that are pertinent to the TAE conference. They are in the left hand bar under Tae Resources. I’ll keep updating it as I find more, just need some time found I wasn’t focusing on what they were saying as I was blogging so I took a break.

Ajax Performance

Presentation by Ryan Breen, VP Technology at Gomez (think of it as, go! mez).

Firefox shows you the time elements are parsed, not the time it actually took to load it.
- Elements shouldn’t take longer and longer to load.
- Net visualization is nice, but certainly not good enough.

WebKitInspector
- Safari’s clone of FireBug, same issues though.

IBM Page Detailer
- The professional of the group, not browser specific and it hooks into the network stack (just like fiddler) to gather performance load times of files.
- Breaks it down into connect time, discussion time, and download time.
We’re talking about where we are spending our download time.
These are all freely available tools so far.

The server based profiling applications exist, he even listed a few, they own one, and Pingdome owns one, but they got the

attention of dung beetles so off to firebug.

JS Function call profiler in firebug, world class, IS the be all end all to js debugging in firefox.

jsLex instruments code to test it using an Ant task. Ryan wasn’t to familiar with jsLex, so we didn’t get into it, but if you have seen the video’s its very slick. Its starting to seem common that instrumentation is used to give something that many people want, yet we just don’t have hooks for. (Yo! Maybe we need some hooks!) JSCoverage being the other that I can think of.

Pure JS Solutions.
Dojo.Profile and Firebug Lite.
- Less data collected, only collected in specific areas.
- Cross browser! Only collected in specific areas!

Larest opportunity for optimization exists at the network layer.
The goal of performance optimization is to hide latency from the end user.

Fewer requests means less latency.
Make less requests as the initiation, and discussion is the most expensive cost of this area.

CSS Sprites, less web requests.

If your connection persistance is broken, fixing it will give you an automatic perf gain, possibly as large as 50%. This could be like removing removing one olive from the jar and saving your company thousands of dollars with one little idea. If this is happening, you could earn yourself a nice little bonus by getting it addressed.

Multiple connections per domain, browsers natively only download 2 items per server, with dns wildcards for sub domains you can up. Which means if you download 30 items, you’ll have to wait 15 times, but if you got 6 connections going, you only have to wait 5. The download times have matured quite a bit in the age of broadband, but the connections still cost as much to execute, invoke, and discuss with the server. This can break caching, because of the different urls. Its always 6 total for IE, so you can’t do this to just up it to 30, though if you did that, you run the risk of overloading your own web server with normal web traffic.

Flash, Flex, Applets, ActiveX, Silverlight just because you guys are plugins is no excuse for not profiling your performance.

Website of Note:
http://ajaxperformance.com/ (Nice)

No performance tools we know of that traces the hardware of the client, so you know an image took 2 seconds to download, and .5 seconds to load, but you don’t know that it pegged the users CPU/GPU. It sounds like a great opportunity for someone to write an extension to track CPU and Memory usage problems.

What about GZip latency? Does the user notice?  We used to need hardware (BigIP) just to do that extra work, but now CPU’s are strong enough that they do it themselves and the times are negligable.

This isn’t as clean as me fumbling around trying to remember a bunch of stuff, but I think its more informative, anyone want to give a shout to which they prefer? Please?

Off to anther keynote.

TTFN

This conference is sweet, all of you reading this should be here now to make you realize the awesomeness of Javascript.

Lets go backwards as thats how I’ll remember the events best.

Google Gears

A lot of uncertainty surrounding gears, in a room full of about 1/4 of the people at the conference only a small handfull had ever used gears before, so essentially everyone was copying me in trying to get a crash course.  Some of what I learned.

• Google doesn’t know all of the variables involved with Offline Applications at the moment so they are releasing it into the wild the same way XMLHTTP was and hoping people do innovative cool things with it.
• Its essentially a database on the client. With old web 1.0 applications you could just save all the content of the website and just browse between each page locally. Now once one of those pages makes an XMLHTTP request, your screwed. Now you use the database on the client, and have a syncing mechanism.
• People still aren’t getting it, especially security wise. There were about 10 minutes of questions and almost all of them were security based, with some back and forth discussion among the crowd.
• As a side note, I just got my food and its quite apparent that we are about as far from China yet still in the US as possible.
• As to why we need an offline solution. Simplified, “You just need it”, and Google needs it to be able to have their office suite to take on MS. Though I agree, the more cool things out there, the more thats possible from an innovation standpoint.
• Multiple Worker Pools. You can basically spawn threads to fire off some javascript (with some restrictions as to what the script can access) to do some logic asyncronously. This is nice, but its in gears, I just don’t see how I can ever count on that, or even say “But if you used gears its fast, just not in IE6″.
• I started wondering, why shouldn’t I just script into the flash plugin? Full Text Search quashed that idea, but still…

When would I use this? Maybe an offline Gantt chart? Offline item view?

I can tell you the ROI on this makes it pretty low on the list atleast based on my perceptions of the customer expectations and wants.

I’ll keep writing as I can catch up.

Sessions I’ve attended and still need to cover:  

Advanced Prototype

Anti-Design-Patterns

Open Keynote <- So good.

I am now in Boston, attending the Ajax Experience Conference by the Ajaxian guys.

As it is, I have zilch to report so far, I don’t know anyone who is supposed to be here (besides the daunting list on the speakers lineup). Yet I’m already guessing as to what the keynote speeches are about.  Based on the flavor of the last conference it will probably be more of the Offline Ajax craze.  Why this is so popular I have no idea, I don’t have any interest doing anything with a computer without internet, except the occasional game.

Tomorrow starts with a hard decision between two classes

The Future of JavaScript
John Resig

Performance Tune Your Ajax Application
Bob Buffone

Then
Beyond XHR: Taking Ajax Offline with Google Gears - To become less ignorant
Chris Schalk 

iPhone
Chris Williams

Comet for Highly Scalable Applications
Michael Carter

Ajax Performance Analysis: Employing the Latest Tools to Get the Job Done
Ryan Breen

I’ll keep everyone updated.