The poster is incredibly rich with information.  It goes through analysis, field studies, creating user profiles, documenting requirements, designing, verifying with users, prototyping, implementation, heuristics, usability testing, and the rest of the steps.

The 11×17″ poster [PDF] is just as detailed as the full-sized one.

As found on mprove.de.

The Problem – It’s not uncommon for someone who does real work with the corporate intranet to have several tabs open within their web browser with data sources, and a webmail tab. Add to that desktop applications like Microsoft Excel, and an instant messaging client, and we have broken workflow in Alt-Tab.

This effect will become more pronounced as more and more applications that we use daily sneak into the web browser – unless we launch everything from Adobe Air or Gears shortcuts on the desktop. That is not the case, since I’m much more likely to get to Google Calendar by clicking an Add this GCal link, than I am to launch it from my desktop.

User Solution – If the user wants to correct this workflow problem, they can open all of their working tabs as new windows.  The major issue with that is pre-loading the cognition of the task.  Odds are the user navigated to their document in an exploratory way, and didn’t precede that activity with the thought “I better open this in a new window just in case I find something I need to task-switch to.”

Last I checked (Firefox 3.0.8), there is no easy way to turn a tab into a new window in Firefox.  At least not without the Tab Mix Plus! add-on (via How-To Geek).   Though I understand “tab tearing” will be included in Firefox 3.1, and is already a standard feature in Google Chrome and Safari 4 (video link).

Potential Solution - The major web browsers that support tabs already support quickly rotating through the tabs using Ctrl-Tab.   Integrating the tab switching functionality (including preview screenshots, tab titles, and all of that) into Alt-Tab would be good.   The specific details of how that would look, feel, and interact would make a  great little M.Sc. topic. :-)

As a side note: The default built-in Alt-Tab application in Windows XP is fine (Vista Flip is even nicer), but there are a handful of better free replacements: one from the Microsoft PowerToys team, and an even richer one from Alex Avdonin.

So step one was to recreate my new resume, with some help from my friends! Step two is to look for openings. So far that has been a challenge, but optimism ensues – emailed abotu ten firms in the last few days that had openings for people like myself. There really are a lot of HCI-focused firms in Toronto and Waterloo, not surprising considering the number of quality soft-dev firms and Comp Sci grad schools in the area.

I went to a TorCHI meeting last week, met some good people there, indicated my interest at getting hired at CIBC or IBM :) Even my housemate has been trying to help me out. She was out with some friends having a drink, and was approached by a nice man who handed her a business card. She realised that he’s into the same thing I’m into, so she gave me the card at home and told me to email the guy. Thanks Kirsti, appreciate the help.

If you know anyone who is hiring or looking for people like me, let me know!

If you’re interested in participating, take a look at my little recruitment page:

http://grabka.org/internet/flickrsearchtagging/

It’s a multi-step process that starts with you installing some software, and sending me an email with your Flickr username.  After that, it’s all simple :-)

Take a look at the study page if you are interested in participating.  I need about 50 people to do this.

It’s a little utility that enables a couple of things:

1. Let’s you to propose tags for images that don’t belong to you on Flickr. Contributing tags if you want to help describe the image is often not possible, unless: you’re the owner, you’re a contact of the owner, or the person has allowed very permissive tagging rights.
2. Keeps your search queries around the tagging area. Queries are valuable, because you as a user took the time to contribute that text at some point. Now you can leverage that same text when you want to tag an image.
3. Tag your images with the proposed tags, or delete the proposed tags.

If this sounds novel and useful, it is :) Or at least, that’s what I’m trying to prove in my thesis.

Installation

In order to do any of this, you need to:

1. Be using Firefox 1.5+, Flock, and any other browser that can run Greasemonkey 0.6+. This is an untested claim :-)
2. Install Greasemonkey in Firefox, if you don’t have it installed already.
3. Install my magical script: Flickr Search Tagging UserScripts.org

What happens to my contributed tags?

They get stored on a server (atthelib.com), attached to a timestamp, your Flickr account name, and the identifier of the photo you are tagging.

In terms of privacy and control of the tags: there is very little. This whole process is using the “Wikipedia approach”: everyone can contribute. The owner of the image can delete a contributed tag. A deleted, contributed tag cannot be re-added. There are some anti-spam measures, including limits to how many tags can be proposed at one time, in one day, from one location, and so on.

Anywho, this is an alpha release, so any and all feedback is most welcome (feel free to use the comment form below)! This is part of a Master’s thesis, so for now all rights and copyrights are strictly reserved.

Screenshot

I just want to preface this experience with the fact that I speak Polish quite well; it’s my first language, I lived in the country til the ripe age of 7, my parents continue to speak Polish to me on the phone. My technical term knowledge isn’t great, but I anticipated that would come quickly with exposure.

Signing Up and “Logging” Things

Anyways, so I’m signing up for this service, and I realise within seconds that I don’t recognise words. The whole thing feels foreign and uninviting, even though it is laid out quite well. I’m used to getting clues and cues about the state of things from the visual elements and words on a page. I’m missing the familiar combination of “password,” “forgot,” and “logout.” What the hell is a haslo? OK, haslo is password, good. Wyloguj. Is that Log In, or Log out. Wy-Loguj. Is “wy” the in- or out- modifier? I start wondering what it would be like if I was entirely new to the Internet and didn’t really understand what I was “logging” into or out of in the first place. What am I logging? Trees?

I’m already confused. No matter, keep on registering. I’m looking for “Canada” on the list of countries, no dice. Oh right, Kanada. I can imagine that being frustrating for someone from Deutschland, having to find Germany all the time. At least the Polish word for Poland starts with P. Moving on, there is no province field, and none of my home towns show up in the list of cities. I feel like I’m setting up a profil with an incomplete identity.

Terms I Don’t Understand

I’ve successfully registered! OK, next, onto site navigation. Once again, thank God I know roughly what the registration process entails .. me entering some stuff including some unique identifier that is not my actual identifier (name), a communication outlet like email, some details, press a button, that “registers” me, and takes me to a “home page” (or Strona Glowna) .. the Head-ish Page. I’m looking at the buttons across the top of the page. Some of them make sense: Fotki i Filmy, Pictures and Videos. Ogloszenia are Classifieds, just like in the newspaper. I feel more comfortable.

I see this term “w gronie” everywhere. I assume it has something to do with the name of the website, but I’m not entirely sure what the connotation is. A grono, as the logo of the website implies, is a grouping of things on a stalk .. winogrona means grapes. I’m assuming I’m a grape. Just goes to show how important the name of your website is in determining expected activity on the site. In frustration, a Polish blogged indicated that grono may also mean .. shit.

Now, what the hell are Grona i Fora? Didn’t I just establish that I was a winogrono/grape. I click it and recognise the familiar groups and forums setup. I’m not sure which are groups, which are forums, which are threads. What’s a thread anyways? Why do we call them threads? Like, a thread in a tapestry, that is a forum? I see these terms: Obserwowane, Moderowane, Fora. Observed, Moderated, Forums. Thank sweet lord that I spent years on TorontoCivics, Honda-Tech, and Stillepost .. otherwise the concept of a “moderated forum” would be foreign and confusing to me.

So I think I’ve found a forum (or is it a group?), and it has threads in it. The word temat (topic) shows up a lot, so does watek. Watek is the word for grape stalk in Polish … so … I’m getting a little tired of the grape analogy already. Especially once I figure out that “topic” and “thread”, or in this case temat and watek are actually the same thing, while grona (stalks) and fora (forums) are not. Then there are posty (posts). What really is a post? What makes it different from a message or a comment?

And now, first pr0st …

Like a good citizen, I’ve decided to read before posting too much. Needless to say, the language, lexicon, and etiquette are different than they would be in English-speaking North American forums. I don’t have good insight into it yet, other than knowing that I’d be the worst kind of n00b: barely-speaks-the-language-n00b. Luckily there are English-language groups and grona, and the majority of young Polish internet-savvy social networkers speak a little English.

Lessons Learned

So as a web guy, it’s nice to get reminded of the few things that I take for granted when participating in or developing web communities:

• People use familiar text and images as cues for activity and context. This is hard to understand until the cues you’re used to go away … you know to look for login boxes and submit buttons, for example, but their meaning is thrown in doubt when the text labels change.
• The registration process is foreign to most people who don’t already use forums. Don’t assume people know what logging in, logging out, registering, and profiles are.
• Ads in the sweet spots centred, above-the-fold totally throw off initial orientation.
• Community terminology doesn’t have to follow the standard “forum”, “post”, “admin” line. New users may have a better understanding of “topic”, “message”, and “community moderator.”
• Be consistent with terminology, and careful about name-branding choices (grape, wth.)
• The language of web communities is something that’s difficult to pick up as foreign national. Dedicated foreigner-friendly forums can’t hurt.

Many people who deal with information on a regular basis tend to think that since you can only stack a chair in a single location, the virtual representation of that chair should be categorised in one place as well. It’s hard to explain why that’s a silly idea (and why it’s done often), but he does a very good job of doing just that.

He draws from a really neat reference: The Library of Babel by Jorge Luis Borges, and compares Wikipedia to Borges’ theoretical, infinite library (that, naturally, drives its librarian mad). That bit is in the Q&A period at the very end.

Thanks to Gil P. for this one.

video.google.com/videoplay?docid=2159021324062223592

Patterns are often employed in object oriented software development and engineering, much more so than user interface design. I believe that by applying patterns at the user interface layout and design level, employing a “top-down” approach, we can avoid some situations where deep-system code decisions impede usability of the resulting user interface.

More information on Patterns, and specifically in the context of software, check out Brad Appleton’s Essential Concepts and Terminology.

Really Good Pattern Libaries

These are my picks for sites to explore if you wish to develop your UI pattern vocabulary.

• Jenifer Tidwell’s Designing Interfaces.
• Sari A. Laakso’s User Interface Design Patterns.
• Yahoo!’s Design Pattern Library. There’s a really neat paper (PDF) that details the development of the Yahoo collection.

Van Welie + v.d. Veer does a good job elaborating on why a collection of patterns isn’t as useful as a full pattern language dedicated to a specific domain in this paper (PDF).

Specific Pattern Languages For Specific Domains

The following table lists some good pattern resources, organized by what problem domain they address.

UI Patterns In Print

• Jenifer Tidwell’s Designing Interfaces (2005), published by O’Reilly.
• Jan Borchers’ A Pattern Approach to Interaction Design (2001).

… or check out Hillside.net’s guide on writing your own patterns.

Good Reading

There are several academic papers on the subject of user interface patterns and their application in designing user interfaces. A Google Scholar search for user interface patterns is a good place to start, but here are some that are worth noting.

• Pattern Languages in Interaction Design: Structure and Organization (PDF), van Welie et al., 2003.
• Patterns for HCI and Cognitive Dimensions: two halves of the same story? (PDF) Fincher et al, 2002.
• A Pattern-Supported Approach to the User Interface Design Process (PDF) Granlund, et al., 2001.
  Fitting patterns into your software design process.
• Perspectives on HCI Patterns: Concepts and Tools (PDF), Fincher, Finlay, Greene et al, Molina, 2003.
  The extended abstract from the CHI 2003 workshop on HCI Patterns.
• A cookbook for using the model-view controller user interface paradigm in Smalltalk-80 (portal.acm.org), Krasner et al, 1988. One of the first academic publishings use of patterns in UI design.

… also check out the HCI pattern papers at CHI 2003.

At the 2004 CHI workshop, a markup language for pattern languages (PLML) was established. I love stuff that’s written in XML.

Pattern Conference

User Interface patterns are most likely to be workshopped and discussed at the following conferences:

• PLoP – Pattern Language of Programs conference. In 2006, in conjunction with OOPSLA.
• CHI – State-of-the-art patterns workshops 1997-2004.

Acknowledgements

Much of this content from stemmed from Tom Erickson’s The Interaction Design Patterns Page, which a really excellent resource.

AJAX is a new term, but it referes to a collection of technologies that have been complete since around 2004. It’s use has been popularized through the groundbreaking work of Microsoft, Google, and smaller firms such as AdaptivePath, who coined the term. AJAX adds the capability of getting new data from a server once a web page has been generated, in hopes of reducing screen refresh, lowering bandwidth utilization; additionally, developers hope to increase user interactivity of web based applications to the level of a regular desktop application. All of this has come at a cost though, including increased complexity, reduced accessibility, and new security threats.

Literature on AJAX

Little academic literature that focuses on AJAX exists, as most of its components have been the result of previous academic and industry work. Much of the literature that exists is in the form of white papers, recommendations, and industry practitioner guidelines. One of the first such guidelines comes from Microsoft, where they discuss using ASP to do server callbacks after the web page has been generated[1]. Microsoft did not coin the usage of the term AJAX; that was done well by Garrett et al. at Adaptive Path, who wrote the root article that contributed to common understanding of how AJAX applications are to be structured, and how they differ from regular web applications[2]. If you’re interested in determining whether AJAX is in fact a model you should be pursuing in developing your own application, there is no shortage of expert opinion on the pros and cons of the technology [3].

Specifically in terms of security concerns, which are always heightened when developing web-accessible applications, there are a whole new set of things to think about [4]. Good industry examples are abound. A great collection of these examples is Ajaxian[5], a website run by seasoned web developers. The components that make up AJAX are not anything that web developers have not used before. The Wikipedia entry on AJAX programming [6] defines these components, and gives context to their use: JavaScript, XMLHttpRequest Class in JavaSctipt, XML as a data transport, and the Document Object Model (DOM) for manipulation of the static web page. Historical information on how AJAX got to the point it did points to an evolution from DHTML, as well as Microsoft’s work in Remote Scripting [6].

For guidance on implementing AJAX within your own work, Apple’s Developer Connection entries [7] are thorough and explore issues related to browser incompatibility. Though, in order to stay on top of all of the browser related issues, a developer can rely on a variety of frameworks and libraries that are kept up to date with functionality and security updates:

• Dojo. An open-source framework being supported by IBM and Sun.
  http://dojotoolkit.org/
• Atlas. The Microsoft AJAX framework that employs ASP.
  http://ajax.asp.net/Default.aspx
• Google Web Toolkit. Googles official AJAX toolkit (as seen in Google Mail and Google Maps).
  http://code.google.com/webtoolkit/
• Prototype. A decidedly simpler library than any of the above.
  http://prototype.conio.net/

You can download my presentation here: Presentation: Ajax – A new hero for the Web?. Some images used in the presentation are sourced from [2].

References

1. Esposito, D. “Cutting Edge: Script Callbacks in ASP.NET.” MSDN Magazine. (August 2004).
   http://msdn.microsoft.com/msdnmag/issues/04/08/CuttingEdge/
2. Garrett, JJ. “Ajax: A New Approach to Web Applications.” Adaptive Path, LLC. (February 2005).
   http://www.adaptivepath.com/publications/essays/archives/000385.php
3. Downes J, Walker J. “Pros and Cons of using Ajax in a CMS.” CMS Watch. (February 2006).
   http://www.cmswatch.com/Feature/143-Direct-Web-Remoting
4. Twynham, S. “AJAX Security.” IT-Observer. (February 2006).
   http://www.it-observer.com/articles/1062/ajax_security
5. Ajaxian. (October 2006) http://ajaxian.com/
6. Wikipedia contributors, “Ajax (programming),” Wikipedia, The Free Encyclopedia. (November 1, 2006). http://en.wikipedia.org/wiki/Ajax_%28programming%29
7. Apple Computer, Inc. “Dynamic HTML and XML: The XMLHttpRequest Object.” Apple Developer Connection. (June 2005).
   http://developer.apple.com/internet/webcontent/xmlhttpreq.html