Notebook

About 10 years ago I participated in the daily indexing of news articles as part of my job designing a digital library. During graduate study for the MLS my concentration was actually on information retrieval and classification, so I was interested in doing the job and understanding the content in order to know how to make it useful to users. Customers would get this information via the web site, by email, and in newsletters. Every day I had a bunch of news articles from a load of database feeds queued up for me to skim and tag. A first pass of auto-indexing and clustering was done and we'd have to check the applied tags and add new tags for subject, company, product, etc. We had a person whose primary job it was to maintain these terms, with the cooperation of subject matter experts in the business, in separate controlled vocabularies.

That faceted approach to indexing and description has really informed a lot of what I've done as a blogger in the years that I've maintained sites at iaslash, urlgreyhot, and now here. You see the result of the faceted approach to tagging in the metadata for every entry, and in the navigation for things like Design Tags and Design Colors. But I've hidden some of that tagging until I had some time to add views for navigating via those facets. I've been operating this blog with the mantra, "... better to get it up fast and fix it later."

But now I've added a few more facets to the navigation. If you notice the subnav in the Interface, Design, and Notebooks sections, you will see that there are now options to browse by Companies in all of them, and additionally by Person in Notebook. So now you can view only Nike Interfaces or alternatively only Nike Designs, for instance. Also, in the entry metadata, the term Nike will appear in the pill shaped tag, and you can click that link to see all Nike tagged items across all sections of the site.

Just to give you an idea of how these tags get into each entry, have a look at the article editor below, and you'll see how granular I get with my tagging. I think it's probably much more than you'll find in a typical blog. Aside from the title, every field you see below is a taxonomy field expanded in the categories (ugh, I hate that they changed the label) area.

I believe over time this will provide a more complete picture around the experiences with each of the sites that I'm choosing to feature here. There are quite a few features in my roadmap for this site that just take time to implement. I will for instance find a way to segregate views by product rather than merely by company, so you can view only GMail UIs and not all Google UIs. Rest-assured, those tags are already baked in, but you won't be able to see them until later. Some of these and other useful features that made me want to create this site are forthcoming. Now that I've spent some months understanding what I like to do here, the volume may decrease slightly so I can focus on quality and providing more analysis. As always I welcome suggestions.

Drupal users may also expect that sometime in the future I'll expose more about the process used to put this site together, especially regarding how the taxonomy bits are being utilized. Thanks for continuing to stay with me as I explore these ideas.

"Cymbolism is a new website that attempts to quantify the association between colors and words, making it simple for designers to choose the best colors for the desired emotional effect."

Interaction-Patterns.org is the Stimmt AG - Uni Basel Pattern Catalogue. The Patterns page lists each design pattern name, a very brief description of the interaction, and a link to the page that describes the design pattern, e.g. YUI or Welie pages.

I recently noticed that I'm not the only one posting interface design and interaction videos on Vimeo. Here are 4 Vimeo users who are doing this now:

Know of any other UI and Interaction Design video bloggers? Let me know about them.

Diving deeply into problem analysis or early bottom up activity is not typical activity for experienced and successful designers. A more flexible approach and parallel thought processes and activities are more characteristic. That is the observation of Nigel Cross in an essay he writes in the Design Studies Journal.

Victor Lombardi sparks a great debate about design process on Noise Between Stations while discussing the differences in approach to process between expert and novice designers, as described by Nigel Cross and Henrik Gedenryd in their independent research on the topic. PDF documents may be downloaded for Cross' article, "Expertise in Design", and Section 3 of Gendenryd's PhD dissertation on "How Designers Work".

Some of what Cross observes about the differentiation in process and even in capability resonates with me. The following quotes encapsulate his article for me:

...[S]uccessful design behaviour is based not on extensive problem analysis, but on adequate 'problem scoping' and on a focused or directed approach to gathering problem information and prioritising criteria.

...

Successful, experienced and—especially—outstanding designers are found in various studies to be pro-active in problem framing, actively imposing their view of the problem and directing the search for solution conjectures.

He maintains that expertise is acquired, and the approach that is characteristic of expert designers is simultaneously top-down/broad and bottom-up/deep. Experts tend to use generative reasoning (a conceptual approach to problem solving) rather than exhaustively doing problem analysis. Cross observes that the expert's typical design process is a co-evolution of the problem and solution:

  • Name and describe features of the problem
  • Frame by recognizing partial solutions and use them to impose a coherence that guides subsequent design steps
  • Conceptualize partial solution structure and iterate over its form

This is a process of finding the possible solutions that the individual wants to address or feels might provide the best solution based on experience or some other externally acquired knowledge. The act of drawing and designing continually exposes further requirements and required inventions in the problem/solution space.

I also like what Cross describes as the "Opportunistic Behavior of Designers." The idea is that expert designers typically follow a set of principles and structures when they set out to tackle a design problem. But then the designer may abandon rigor when a partial solution arose that provided a direction or confident line of inquiry.

This is where I think the differentiators between expert and novice lie. The ability to know when to go deep is probably lost on less experienced designers, who may spend cycles on the wrong activities in favor of structure and rigor for their own sake, or because of lack of confidence in one's knowledge. Consequently a novice may go too deeply into problem analysis or may dive into a particular solution too early. I know what this is like, and have done that many times in my career.

I think the above point is more interesting an observation than the one Cross makes that expert designers spend less time generating alternative ideas or a large volume of ideas. I'm reminded of Buxton's description of the expanding and shrinking funnels in the generation and refinement of a design. Sketching, that ideation phase where a lot of ideas are generated until the "right" partial solution emerges, is likely different from person to person depending on expertise or simple design acuity.

What I take away in this observation of experts is that design, whether it's industrial design, architecture, or interface design, cannot be a rigorous process in terms of adherence to structure. Every activity can't be as measurable and rigid as you might guess from reading what theorists have to say. This is why I've been turned off by interviews in the past that require an interaction designer to be so heavily weighted on the research end. I know what I do when I design, and that's not it. Research might be part of what I do, but it's not the center.

I've never really listed the less tangible attributes of my own design process before. In my self-awareness as a designer the following attributes, culled from this article, describe the kind of designer I would try to be at the end of the day.

A good designer...

  • relies on principles and experience—uses first principles and the cumulative experience over her career or within the project to inform her process
  • is a multi-tasker—I don't really like that term, but it means she can work multiple activities and thought process, both broad and deep, in parallel
  • is flexible—knows when to abandon rigor in favor of action and decisiveness

I still have to read Gedenryd's section on "Design and congition as inquiry" to comment on that, but this is my reaction so far to Cross' excellent article on this topic and the comments generated in Victor's blog entry.

From the >Think>Draw>Make> about page:

"One of the big objectives of this site is to encourage Designers to participate by designing their own visualizations (in 550 by 450 pixels) to match their interpretation of what they think the design process should be."

Adaptive Path, as part of Mozilla Lab's concept video series, provides some suggestions for the possible future of the web experience with Aurora. This forward looking concept focuses on 4 high priority elements: context awareness, natural interaction, continuity, and multi-user applications.

The scenario laid out is one in which one user starts an audio chat and screen sharing sesion with another user and we begin to see how users can find information from their history and share it and remix it with others in the session.

Let's take a look at how they realized the experience hinging on those elements, in terms of the interface.

The radial menu

While browsing each object a radial menu can be summoned for acting on the object, e.g. getting the current version of a web page/object.

The spatial viewer

One of the ways they conceptualize contextual awareness is through browsing your history in the spatial viewer. This is a zoomable user interface in 3 dimensional space that presents the user's history in clustered objects, like galaxies in space. This is intended as an implicit clustering I assume, but could be based on explicit group since each cluster can also be explicitly labeled. The user may zoom back through history, with the z-index representing time.

The hand pointer and frame

The hand pointer is used to emphasize natural behaviors such as moving and touching things. The user can use the hand cursor to grab and drop objects around the spatial viewer to the outer edges of the interface. In the edges of the spatial interface is "The Frame." The Frame presents a shelf with shortcuts to history in these locations:

  • Top, shelf = frequently used objects
  • Left, history stack = recently used objects (reverse chron)
  • Right, user stack = temporary storage (reverse chron)
  • Bottom, wheel = objects I'm connected to right now

The wheel

The wheel is like the Mac Dock, but it's a rotating carousel with a fish eye lens focus. As you move through the wheel, related objects are highlighted in the spatial viewer.

Clusters

One of the biggest opportunities to extend the browsing experience, in my opinion, is to get the application to understand more about me and my behaviors and usage social patterns and give me feedback based on this. The spatial viewer attempts to address this.

The idea of monitoring behavior for implicit patterns and preferences is an area being tapped in discrete contexts, for example via recommendation engines on video, music sites, and in social spaces. I see this as suggestive of getting the application and service to take the ephemeral as well as the more deeply carved out patterns of my behavior, and use it all to remind me or to suggest to me those things that I am likely to have an interest in. It should do it based on all kinds of implicit attributes, like where I'm presently geographically located, what I've looked at, who I've connected with, as well as using those criteria I have explicitly described as important.

More to come...

The ideas here point to a promising evolution of our experience interacting with information. I'm looking forward to where else they see the browser going.

Hidden Pixels recently rounded up the available CSS frameworks into a list. I happen to be evaluating CSS frameworks as well to find a flexible system to provide on a CMS I'm working on. The Hidden Pixels list isn't very descriptive of the specific usage or value each framework has to offer, so I've provided a summary of each to make this a useful reference when evaluating the list.

The CSS presentation frameworks listed below provide the underlying CSS structure for typical web site needs. The idea behind most of these is that they provide rules for the kinds of markup and layout web designers do repeatedly. They may supply grid systems and typography support, but not all of these provide both. Most provide at minimum an Eric Meyer style CSS reset. I've divided the lists into separate the frameworks providing support for grid-based customizable layouts from the other types of systems.

Frameworks supporting grid-based customizable layout

  • 960 Grid System
    Similar to Blueprint, but provides 12 and 16 column grids at 960px wide. 12 column grid is divided into portions that are 60 pixels wide. The 16 column grid consists of 40 pixel increments. Each column has 10 pixels of margin on the left and right, which create 20 pixel wide gutters between columns.
  • Blueprint
    Provides a 950px wide grid, with 24 columns spanning 30px, and a 10px margin between columns. Also provides a typography stylesheet with a baseline of 18px, allowing for alignment if every element uses a multiple of 18px.
  • BlueTrip
    Combines the grid system from Blueprint with the typography from Tripoli.
  • CleverCSS
    A Python script that allows you to use a sort of CSS shorthand to write your rules quickly without all of the characters required by CSS syntax. The script then converts your shorthand into valid CSS.
  • Emastic
    A flexible framework, similar in concept to Blueprint, that uses ems for elastic layout. Allows you to achieve fixed pixel or fluid grids using ems, pixels, or percentages for column widths.
  • ESWAT
    File system framework for a simple site, including directories for the types of files you might want to use. Does not include grid or typography systems.
  • Logic
    A collection of CSS files and PHP utilities to generate layouts. Flexible framework providing support for elastic, em-based typography, and grids with ems, pixels, or percentages.
  • That Standards Guy
    Starts out as an apporach to call single style sheet within a Microsoft CMS. Pulls together various CSS libraries and hacks including YUI Grids.
  • Typogridphy
    Framework that uses the 960 Grid System for fixed or fluid layout, and provides typographic style rules for ‘creating vertical rhythm’, whereby all adjacent lines of text line up horizontally, regardless of line breaks and new paragraphs.
  • YUI Grids
    Yahoo's CSS Grids framework provides fixed and fluid layouts. Layouts are source-order independent, so your columns can be output in any order, regardless of the order in presentation. Grid accommodates IAB Ad Unit guidelines.

Related frameworks
These frameworks may provide either element support without layout rules or pre-configured layout options.

  • Boilerplate
    Based on Blueprint, but strips out Grid framework, so you'll have to write your own rules for columns.
  • Content With Style
    A quick-start framework, providing common names for div elements (e.g. header, content, main, sub, local, nav) and provides 6 different layouts.
  • Elements
    File system framework for a simple site, including directories for the types of files you might want to use. Includes specific prototype/scriptaculous and lightbox. Does not include grid or typography systems.
  • Schema
    Provides support for a 2 column layout with right sidebar. Layout options are minimal, but provides styles for standard HTML elements.
  • Tripoli
    Provides a base for creating dynamic layouts without interfering with typographic measurements. Includes rules for most commonly used HTML elements, and via a Layout plugin provides canned layout options.
  • WYMstyle
    Framework using layout modules. You import modules into a main stylesheet to achieve one of the core layouts provided in the library.
  • Yet Another Multicolumn Layout (YAML)
    Provides a fixed width and several multi-column layout options.

Silverback launches to provide UX pros with Macintoshes a simple, inexpensive tool for recording usability test sessions, so you won't have to ever touch another Windows box if you don't want to. (I'm kidding. I'm sure you will at some point in your life.)

Silverback provides most of the functionality you need for discount usability. People wanting a full featured tool like Morae won't find their solution here, but if all you want is to organize test sessions, capture audio/video of screen interactions and participants face and voice, then Silverback might be for you.

The process is pretty simple.

  1. You set up projects and individual test sessions in the tool.
  2. When you're ready to start a session, click the "Start Session" button and Silverback hides, leaving only a menubar icon for when you're ready to stop.
  3. During recording you can use your Apple Remote to drop in chapter markers by pressing the + button. Use this for start of each task or to log errors or questions, for instance.
  4. When you're finished with the sesion, click stop from the menubar icon or by pressing Command Option S to open pause/stop dialog.
  5. Afterwards you may export the session as a QuickTime file.

This application is a bit like using the screen capture tool ScreenFlow, but provides a few nice functionalities that make sense for usability testing. I admit to not doing a lot of time on task reporting in Morae, since my focus has mostly been on qualitative research, but that's one thing you might miss. I also like the post-test surveys built into Morae, but you can easily create a SurveyMonkey survey or something and have the user fill that out.

The other thing that you won't find are simple video editing tools so you can cut pieces out for your highlight reel when presenting your findings--if you do that sort of thing. You can easily do that in QuickTime though and stitch together your clips.

I think this tool has the right functionality you'd need to do discount testing on the Mac right now. All of the features you need to go the extra mile to make clips presentable are pretty much at your disposal if you have QuickTime Pro or iMovie. For me as a discount usability tester, the best part of this is, I won't have to worry about needing a separate PC to do simple testing. If you bundle this with screensharing tools like those built into iChat or using VNC, you have the makings of a decent Mac UX toolkit.

Purchase price is only $49.95 and Clearleft are donating 10% of all profits to The Dian Fossey Gorilla Fund. That's two reasons too feel good about making this purchase.

emastic is an interesting looking CSS Framework that is designed for both fixed and fluid layout. It looks like a nice alternative to fluid layouts than YUI Grids, with simpler and more flexible column structuring and class naming.

* Lightweight (compressed weight less then 4kb)
* Personalized width of the page in (em,px,%)
* Use of fixed and fluid columns in the grid.
* Elastic Layout with "em"s

Blueprint is going to have to catch up and produce a version for fluid layouts.

Jeroen "JW" Wijering, developer who brought us the JW FLV Media Player has launched the LongTail Video venture. The company provides a the Video Player with ad serving pre-roll, post-roll, and mid-roll options.