The Farmville Bug

No joke, Firefox pushed an update on a single bug. Last release they introduced this great feature that times out Flash applications if they take longer than 10 seconds to start up, thinking that anything that takes longer than that is probably crashing. Reasonable!

But Farmville often takes longer than 10 seconds to start up. Oh shoot. Flash developers that do run-time debugging destroy the 10 second limit. Double shoot!

Use Real Data!

It’s a cut-and-dry example of why you should use real data to make calls on design decisions. It’s a variation of the Lorem Ipsum Sucks argument. The “10 second” decision seems arbitrary, and kudos to Mozilla for doing the right thing and releasing a fix right away. It’s probably not the correct fix, as adding a friendly user prompt would be preferable to a low, fixed timeout. But hey, baby steps.

Databases + Metadata = Unsolved Problem

Metadata in databases loses its context quickly.  Let’s say Jen uploads an image, titles it “My pet puppy.”  Jen’s friend Steve wants to use the image, selects it in the image library and wants to change the title to “Jen’s pet puppy.”  Where do you store that title now?  What happens when Jen renames her image?  What if you use a couple copies of the same image, with a different title?  It’s a bit of a mess, but usually the solution is store the metadata in context: keep the metadata with each use of the image, in that HTML page.  Problem is, images don’t have a title attribute.

The other issue is maintaining those goddamn references between the database, the HTML file, and the image file. Odds are you’ll be using some database file system of some kind so now you have to manage deletions, renames, and metadata edits in three different linked places.  Those links are fragile, so things fall out of sync. Especially if users have access to editing their HTML source code, offline editing, import/export, anything like that.  So make sure to keep one authoritative copy of that data.

Lastly is the issue of exporting/sharing this content.  The platform that I work on has a strict requirement for being exportable without ruining everything, in order to keep a very important ($$) industry certification.  So when we export that web page, we don’t want to lose all of that image metadata.  We will if it’s in the database, unless you do a lot of non-standard hackery.  And we’d want to avoid non-HTML shit just to pass data around (a standard solution).

Microformats: Metadata, Inline, Bam

Really, a good way to do this is just store metadata inline, in the HTML content.  The best solution we found for this setup is using microformats.  The ideas that you wrap your object (an image, an object, a text block, whatever) with span tags that represent each one of the pieces of metadata.  There’s a much more verbose explanation on the microformats.org site.  The hCalendar format is good place to look for examples of this concept embraced.

So for our image example above, the HTML would look something like this.

<span class="image">
<img src="puppies.png" width="500" height="169" />
<span class="imagetitle">The puppies are st00pid fly.</span>
<span class="author hidden">Jen</span>
</span>

It’s pretty ingenious. You have the semantic relationship between the image and the imagetitle, and you can easily extend to add other information like the author, and keep that specific item hidden, or whatever.

Best thing ever is that since it’s semantically sound, you can do some magic with the CSS and DOM manipulations.  You can make it look pretty, keep it accessible, hack it with JavaScript in a reliable way.  Anywho, sometimes, it’s better than putting things in a database.

I asked an Egyptian co-worker what the URL was for the Egyptian Ministry of Communication .. I didn’t even know how to search for it. Here it is:

http://وزارة-الاتصالات.مصر/. Apparently the fonts I have butcher the script.

The URL looks good when I copy/paste, but it gets turned into Punycode: http://xn--4gbrim.xn----rmckbbajlc6dj7bxne2c.xn--wgbh1c, which magically still works. Anyone else have some insight into how this works?

In hopes of one day running WordPress and MediaWiki well on IIS, I’ve been collecting links.  First off, the simple recommendation is to just get the Microsoft Web Platform, which hopes to automate almost 100% of the process of PHP on IIS, including installing the FastCGI libraries that you’d probably want.

In case you’re trying to learn more about what’s actually going on, Bill S wrote up an extensive how-to for installing PHP on IIS.  From the folks behind PHP, the documentation on php.net is pretty detailed, especially if you’re working with an older set of servers (like Windows XP + IIS 5).  A detailed IIS 6 walkthrough can be found on the IIS Admin Blog.

Since this implementation uses CGI, and is still not as fast as the Apache+PHP stack, Ruslan has described how to make PHP faster on IIS using WinCache.  Performance seems to be a big concern, in general.

Somewhat unrelated, I found a place to get free IIS hosting for ASP (via this aspfree.com page).

Hopefully that helps someone!

I’ve also added a few SSIDs that are the hallmark of an unsecured network. I don’t put a password or try to hack anything, just hope to occasionally connect to a random unsecured network:

1. linksys
2. default
3. NETGEAR
4. Belkin54g
5. Wireless
6. dd-wrt

I based this list on the most popular SSIDs that wardrivers have found, as well as some local experience.

This has come in useful only once:  in the underground train station in Warsaw, where I had no data but some local restaurant had their WiFi open. :-)

So yeah, enjoy.

The presentation was about Sprint Zero: the lead-up work that is required before a team embarks on an Agile project, or any project that has an iterative nature with many stakeholders.

Bottom line was that in her experience, and in conversation she has had with designers at UPA, CHI:   Without the Sprint Zero and a Pre-Sprint, designers felt lost and products tended to “fail.”  Historically, Agile organisations have dismissed the need for a Sprint Zero.  In practice this has lead to designers that were disconnected from the final product.

For the rest of this summary, there are a few assumptions:

• Sprint One (first 2-3 weeks of development) typically doesn’t require much design.
• One project per designer. Any more than that, and it’s too much to deal with.
• All resources working on the project are full time on that project.  The definition of “project” was larger than at my workplace, but perhaps typical for industry:  ex. 5 devs, 3 designers, 3 QA, 2 documentation people, project manager, product manager.

Pre-Sprint Zero

Before Sprint Zero, there is actually a long pre-Spring Zero phase that that conceives of the project.  This is where the Executives, Sales, etc. get involved to offer insight, feedback, and direction.

• It lasts several months
• Anwsers marketing and sales need, defines the business scope.
• Creates the research that is used throughout the rest of the process, specifically identifies Personas.
• It includes the competitive investigation.

Sprint Zero

Sprint Zero itself is actually not very long, but focuses on an aggressive building of common ground and understanding amongs the stakeholders.  Without it, there’s a risk of no ”big picture” cohesiveness, early buy-in before complete understanding of the risks, and lots of  ”thrash.”

• Sprint Zero Lasts 1-2 weeks
• No coding, no designing: just big picture envisioning so that everyone understands.  Motto: “Maximise the amount of work not done.” – Create work, do not do any of it.
• Priorities are determined, though that they are difficult flush out in detail.
• Who is involved: PM, Design Lead, Dev Lead, Doc Lead, QA lead
• Get “just enough” that you have a “shared understanding” to begin design, development, test planning.

Steps in Sprint Zero

There are five steps to Sprint Zero.

1. Determine Shared Product Vision

If you haven’t done so yet, determine a vision for the whole product. This vision will not change throughout the life of the product. It helps keeps the project focused. TPM usually leads this, though external facilitation helps.

Do this by creating a “Vision Statement.”  The statement can have the following format:

For … <users>
Who … <do stuff>
NAME <name your product something useful>
Is a … <thing>
That … <does stuff>

Unlike … <competitor>
… <who does this>. (repeat)

2. Create a Project Objective Statement

Define an objective statement for this specific release. Used to make decsions against. Result of a 2 hour meeting, led by TPM.

“Remove the top obstacles that prevent people who download our product from purchasing it.”
“Kill 3DS Max.”

3. Flush out a Project Data Sheet

A product data sheet (of which there are many examples of online) create alignment between stakeholders  Answers the Who, What, Why?  Makes it easy to grasp fundamentals.  Unlike the previous steps, lead by the Development lead, with all stakeholders involved.

The PDS will include:

• Personas
• Object Statement
• Client benefits
• Tradeoff matrix:  Excel (perfect, immovable), Improve, Accept (flexible) vs. Features, Schedule, Resource, Stability
• Specific features defined as “able to ..” statements.   “Colour picker” is not a feature.  “Able to pick colours while drawing” is.
• Milestones and schedule.
• Prod architecture and performance considerations.
• Risks and risk management.

4. Define an Operational Model

At this point, you can get the team ready to go.  Physical planning is very important. Whiteboards, decisions on what remote software to use, determine what software for note taking. Physical environment is often neglected in planning.  Determine roles and procedures for the project.

• Led by Dev Lead.
• Determines meeting times and format (stand-up, scrums, formal, etc.)
• Good time to review “lessons learned” from last release: well, didn’t go well, surprises, expectations, etc.
• Who fills the customer role?

5. Have an Initial Planning Meeting

The first planning meeting is pretty intense.  It results in a speculative high-level schedule with sprints laid out.  It establishes priorities and accepted timeframes.  The “Able To” statements are broken down into chunks, which results in a planning board with story cards: Estimations, ”Able to” chunks, timeboxed.  List out employee vacation.

Once you have a first run of the schedule laid out, expect things to be more mutable as you move left to right.

The pieces on this schedule are called Story Cards and Feature Cards

• Tight estimates in “Feature Points.”  FPs are kinda like a “person day” but adjustable to the role, person, etc. Takes care of things like overhead, quantifiable to figure out your “velocity.”
• Story card is higher level, feature card is subset of story card.
• Each card is associated with a developer.
• Each card has an acceptance criteria from all the stakeholders: Docs, QA, Dev, Design.
• User Story cards can be used to illustrate strategy and tactics, but with loose estimates. There are things that are a bit too big or in the future to even break down. Usually things that can’t be estimated are user stories.
• Risk cards are used to identify specific risks.  Make these red. You can have specific risk cards, such as design risk cards, external dependency card, engineering/dev risk card.

These cards are place on the schedule in a timeline. Watch for janitorial staff re-prioritisations (ie. take pictures). The physical cards are moved to prioritise:

- Product requirement: must to nice
- Workflow: essential to additional
- Development Risk: high to low
- Dependencies: many depending on it to none
- Design risk: high to low

… and that’s it.  At this point, you’re in Sprint One and you’re following your Agile method with a shared understanding and lots of decision-making material.

Best Practices for Design in Iterative Environments

There were a few best-practices that could be taken away by designers, irrespective of the SDLC.

Design is always being done for the next cycle, before the developers ask for it. Special attention is paid to future high risk items.  This gives you time, and reduces pressure.

You have to pre-plan all your client visits, preferably during Pre-Sprint Zero.  Assume that you’re going to use them. Customers don’t mind seeing you over and over if you show them progress every time you see them.

Always go on site with at least two people: a project manager to see purchaser/client, and another UX person to get end-user access.  Those needs are different, and impact your design in different ways.

Every once in a while offer a more public larger release, such as a free preview, feature complete alpha, etc.  This may be hard to do, but is very worthwhile in holding trust and engagement from the customer.

Rather than offering an extensive review, I wanted to share some first thoughts.

Arrival

I was extremely happy to find out that the packaging it was shipped in was both secure and minimal: very few things came in the box, and the box itself was small enough to hold with one hand.  The Mini 10v doesn’t have a DVD drive, but it came with a copy of Windows XP and the restore disks anyways.  Hurray!  That fact got a few chuckles in the office.

The AC adapter is not a brick, but instead, looks like my Nokia cell phone charger!  Very nice.  Those brick monsters with two cords make portable laptops oxymoronic.

First Boot

The Mini 10v I ordered came with Windows XP SP3.   I use XP at home and at the office, so it’s cool, but I’m wondering what happened to Vista.  Where is my voucher for Windows 7?  This is an eight (8!!) year old Operating System.   I will be looking into the Ubuntu 9 Netbook Remix very shortly.

The netbook doesn’t come with Microsoft Office unless you’ve installed it, but I’m very glad to have Microsoft Works with the Office 2007 compatibility pack installed by default.  But this is insane: Internet Explorer 6.  IE6 is the default browser – the broken one circa August 2001.  I honestly feel like I’ve been cheated, and need to speak to someone at Dell about it.

More immediately, some fixable things were show-stoppers:

• The “function keys”, (Fn-F7 to mute, for example) were not installed.  This took me a while to figure out, I just thought they weren’t responding or something.   After navigating the Dell website, I found the utility (or via FTP) and installed it.  Very bad form, Dell.
• Windows is installed with 120dpi fonts by default on the Mini 10v.  I love this font setting on my big LCD monitor at home or at work, but on the 1024×576  screen, this is bad news.  Most notably many dialogs cut off on the bottom.  In the Dell Wireless utility I could not press “Apply”, “OK”, “Cancel” without blindly pressing Tab and Enter.  So after changing the font size to 96dpi, and restarting, the dialogs became useful again.
• The preference for “Large  Icons” out of the box is … questionable given the small screen. Cranking down the icon size is available in the Display Properties.

Hardware

Out of the box, the hardware looks and feels way slicker than I expected it to.  It doesn’t suffer from the same “hollow rattle” as some of the old Dell laptops I’ve owned or used; it feels solid and well put-together. The screen hinges particularly stand out as being hard-effing-core.  Having three USB ports is pretty great.

My only concerns are about the touchpad and the screen glare.  The screen is shiny.  I mean SHINY.  I’m sitting here between two other laptops and my LCD, and the Mini 10v is a mirror compared to the other devices.  Hopefully this subsides over time and fingerprints.

More seriously, clicking touchpad buttons is straight up frustrating.  The touchpad looks great, and the material is nice.  Akin to the Apple touchpad, there are no segregated buttons,  and clickable areas are in the bottom right and bottom left.  This sounds great, but the execution is poor (and perhaps can be improved with some driver tuning).   Once you move your finger over to the bottom left to “click” you inevitably end up moving the cursor about a third of the time.   If I do the tasks seperately, it works fine .. but when navigating normally, it’s a constant bother.

Performance

One small note about performance: coming from full-powered dual core machines, going to netbooks is an adjustment.  One recommendation I ignored is splurging for the 2GB upgrade.  I immediately regret that decision.  Do it: buy the 2GB of RAM.

The wireless performance with the Interl (802.11n) adapter is really great, and better (in terms of -db readings) than with my 2 year old, full size Dell Inspiron.

If you do have 2GB of RAM, turn off the page file.    I’ve noticed this is particularly great on laptops that crawl if the 5400RPM mini-drive trird to page a few hundred megabytes of stuff.  I turned off the page file on my 1GB Mini.  It’s noticably more responsive when switching between applications (Firefox, Messenger, and Microsoft Works, for now), but this puts an aggressive cap on the work that you can do simultaneously.

More to come!

Feedly: A great news aggregator

Like most people I find myself going to the same six or so places on the Internet for news every day:   Digg, Yahoo Sports, IHT, CSMonitor, Globe and Mail, and so on (BAM,  roasted Sarah Palin)   All of them have RSS feeds (the little orange icon ).  Rather than having to visit page individually to decide if I want to read the articles, I can aggregate their newsfeeds to a single place.  As far as what that “single place” is, there has been a LOT of competition:  My Yahoo!, Google Reader, Sage, etc.

Of all of these tools, my favourite by far is Feedly.  It’s an add-on for Firefox (sorry Internet Explorer users, you have other options I’m sure).   It allows you to (with a single click within Firefox) to add a feed to your own custom little magazine landing page.  Usually RSS readers make your landing page look like an email inbox.  The layout makes it very readable, and the simple category support is easy to use.  From their website:

Feedly weaves your favorite content into a magazine-like start page. Based on Google Reader, Twitter and Firefox. Insanely Well Integrated.

Feedly Screenshot

As a side note, I love when developers of software have really interesting developer blogs, especially with posts about use cases and new features.

Twitter Music

I’ve been twittering up a storm, kinda.  On Monday, some people participate in #Musicmonday, which means they twitter about a song they would like to share with the world.  This is great, but in order to listen to the song you’d have to track it down.  So as a courtesy, the good people at twt.fm have built a web app to tweet your #musicmonday song with a link to either the complete track or a preview (whichever is available on imeem).  There are alternatives to this setup, some much more established.

twt.fm (it's a little prettier now ..)

WP Caching (after 2005)

Now something for those of you who run your own blogs on your own servers. WordPress has been a wonderful blogging platform, especially since they added automatic downloading and installing of plugins!  One of the plugins I’ve battled with in the past has been WP-Cache.  No new version since 2005.

Nobody told me, but now there is WP-Super-Cache, and it fixes much of the disagreements I had with WP-Cache. From the authors blog:

WP Super Cache version 0.9.1 is now available. WP Super Cache is a page caching plugin for WordPress that will significantly speed up your website. Major changes under the hood in this release, and many bugfixes.

I’d like to share some of the notes from his talk, as I have a feeling I’ll be going back to them in a few years when I’m an open source superstar.

Listening to People

When you have an open source project, your developers aren’t your work friends and users aren’t people you can call.  Thus there have to be very well defined and implemented listening channels.  Examples of which are (from lowest fidelity to highest):  crash reports, form-based feedback, bug-trackers, wiki’s, forums, IRC. All are important.

Ideas on voting:  in open source projects, voting (“+1!”) works as a great pacifier. It can be used to measure impact, severity, and interest, but should not steer what is of primary importance (or really used to make any important decisions on things).

Designing by/for People

Despite the fears and chaos, design-by-community has rarely steered Mozilla wrong.  Though it may be chaotic, the community has very strong and hierarchical leadership. Through effective leadership, good design ideas rise to the top.  More on that later.

Design-by-community is very different from, say, what Apple does.  Apple has one persona: Steve Jobs.  That’s great as long as Steve doesn’t miss any ideas (which he will), and if he doesn’t love things that aren’t all that super-great (Cover Flow).  Apple doesn’t have a succession plan for Steve.

Gave great example of the development of the UI features involving closing tabs in Firefox. Ultimately he admitted that Google Chrome got it right, Mozilla got 80% of the way there, as per normal :-)

Organising the Chaos

Expect chaos in open source.  Managing chaos begins with managing the design, rather than the code itself.   In any design decisions, opposite camps form very quickly – especially spurred on by half-finished designs being released as Alpha products.

To manage this chaos, you have to infuse some order.  First point of order is having a public and well defined road-map or a cheat-sheet of where the product is going.  Then build the product in layers, and introduce every major change as an Add-On first.  Educate contributors about “why” things are happening.

Discussions should be supported by research and data (possible cross-over with academia here, especially for people looking for small M.Sc. projects).

Disagreements ultimately end in negotiation, but never forget BATNA .. what’s the worst that will happen (typically “Screw you guys, I’m going to Opera”).  No you won’t.  And if you really disagree with the design change, write an add-on to correct it (yey!).

Leadership and Playtime

You need to identify and elevate in importance people who are “good” contributors – reward them with ownership of small modules in their expertise domain. Form small teams with well defined scopes of responsibility.  The leadership of these teams can be concentrated around these good contributors.

The modules of code are led and owned in a heirarchical manner. Ultimately, someone is the sole owner of the whole thing.  In the case of Mozilla, it’s Mike Connor (youtube) from Toronto, who is kinda hilarious.

Give your contributors complete and absolute freedom to explore the system.  They will reward you with neat things like add-ons to inject random stanzas of poetry into web pages, and localised versions of your product.

Localisation as more than Translation

This came out of the discussion portion, but he spent a great deal of time discussion on the localisation challenges involved with marketing Firefox in China.  He wrote extensively about it on his blog.

The bottom line is that localisation has to be more than translation: it involves studying the interaction of the people with the product, and changing the design of the browser.  Not the technical core of the browser – you should be able to adjust all necessary behaviours and design via add-ons. Discussed how Maxthon benefitted by being included on a very popular pirate build of Windows.

Lesson here is that customisation via add-on’s is ultimately key to solving many design problems.

There’s obviously a need here that needs to be filled: begging strangers for invitations to web beta’s. I’ve found a few places to share invitations, but by far the most beautiful and appealing is InviteShare.com. What a gorgeous, well-thought-out design.

Invite Share

And please, if you have a grono.net invitation, please share it with me.

Discovery

An interesting thing about services like InviteShare is that they promote upcoming projects, aiding in discovery of new and interesting things.

I’m taking a look through Yahoo! Mash right now. It took about 15 minutes after posting on InviteShare before someone offered me an invitation. Mash looks like it has tremendous promise: a social networking service with the chaotic aesthetic of MySpace, but the coherent usability of Facebook.

(Via a SurfLizard post)