Notebook

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.

I'm psyched to see that Squared Eye has launched a veritable smorgasbord of interface and visual design inspiration with the user-generated screenshot gallery on Pattern Tap. Get your Tap on!

The $11,000 Clover Coffee Maker brews one cup of coffee at a time using a method similar to a French Press, but with the ability to customize water volume and temperature per cup. The machine is programmable and has a network connection, so the machine can use brewing parameters for specific roasts. Check the video below for the Clover in action.

According to Wired Magazine, Howard Schultz, the founder of Starbucks described the coffee by saying, "In my 25 years at Starbucks, the Clover machine unquestionably delivers the best cup of brewed coffee I have ever tasted." Schultz tried his first cup after seeing a line formed outside of Cafe Grumpy in Chelsea. The company later bought out the Coffee Equipment Company, which makes the Clover, and will be testing them in Starbucks coffee shops. Shultz, who has retaken the position of CEO is hoping to restore the original idea of Starbucks, and support the the heritage of coffee at their shops. They will be making changes like grinding beans in store, and getting rid of the breakfast sandwiches.

The Clover seems to have an almost cult-like following. What I like most about this story is the history and back story of the Coffee Equipment Company. The company was started by Zander Nosler, a former product designer at IDEO, with the purpose of perfecting the single-brew coffee machine, based on research he did designing a commercial machine while at IDEO. This single idea led to the realization of a machine that produced unmatched quality in a cup of coffee that no other machine had, by focusing on delivering one cup at a time with very controlled customization of the brewing process. That attention to this process produced this $11,000 machine that indie shops and wealthy coffee connoisseurs were apparently happily paying for to make the perfect cup.

The Clover is no longer for sale to indie shops and individuals. It will be manufactured for Starbucks only in the future. For more about the Clover Coffee Machine, check out the August issue of Wired.

I recently talked to someone about the graph/grid paper books I've acquired over the years which have become a central part of my process. This is a listing of those pads, and a telling of their virtues.

Rhodia

This is my workhorse. At first I didn't get why so many designers carried these around, until I got my hands on one. To me the Rhodias are an all-around notepad for in office or outside use. They're well constructed and durable. They have the nicest covers of all the notepads, so portability/carry-ability is what this notepad is about. The cover is hefty and scored so you can fold it back and out of the way. I sometimes dislike the violet hue of the gridlines and paper.

A5 is my basic sketch pad. I do thumbnail sketches on it before doing a detailed version on my letter-sized graph paper. It's reasonably priced considering the quality.

A7 is always with me. I carry the one you see above with the black leather cover in my back pocket. I abolutely love this notepad. It has even doubled as a wallet when I want to go out with nothing else with me but my Rhodia and a mechanical pencil.

Load up on Rhodia at better stationery and art stores or online at Exalair.

Moleskine

Like many UX people, I have loved Moleskine for years. But I stopped carrying around the lined and sketch books because they were bulky. I have so many of these laying around now because I've picked up quite a few from event swag bags.

The beige Cahier is another story altogether. I love the warm color of the paper and the fact that leaves are perforated. The weight is right for sketches, almost analogous to using newsprint or butcher sheets when warming up. It got a little costly for me to keep buying these though. I used to go through a Cahier pretty quickly. Maybe because the texture of the paper reminded me of newsprint and I used it for jotting down everything on it. I keep a few around the house because I love them so for their multi-purpose qualities.

You can get your hands on a Moleskine Cahier at stationery and art stores in every civilized city on the planet or via the Moleskine store.

Behance dot grid

Behance makes cool business-oriented notepads for their "Action Method" concept, which seems sort of like a lightweight GTD for creatives, or more specifically for design meetings.

I got my first Behance Action Method notepad from a design director who had no use for it. I use the back side of an action pad for its dot grid. I love the design of both sides and the colors used. The design is thoughtful and elegant. Sometimes I love the dots. Other times I feel like lines work better for me when I'm doing more rigid drawing. It's great for sketching and the weight is nice. You can buy a gummed edge notepad drilled for 3 hole binders or a spiral with perforations.

The spiral Dot Grid book also looks good. It's got a rigid cover, a squarish shape at 9 x 10.5", and is perforated.

You can acquire Behance goodness at the Behance Outfitter.

Tufte Graph

After I went to Tufte's seminar in 2000, I snatched up a bunch of letter and tabloid notepads. My Tufte paper ran out years ago, except for a single tabloid pad I use on special occassions. I loved the color and weight of the grid lines, and the weight of the paper.

Get your Tufte on here by scrolling down to the bottom of the posters page. Guess they couldn't be bothered giving the pads their own page. ;)

That's the list of past and present loved notepads and notebooks. Would love to hear what you use now, what you've used in the past, and what you loved or hated about using them in your daily UX work.

In Twitter's blog entry describing how Summize will be rolled into Twitter, they included a neat little sketch to illustrate.

Kotaku reports on the New Xbox Experience, which does away with the Blade interface, and replaces with a remote-control type UI with cover-flow-like browsability. We'll have to see what the reception will be for this. Xbox are integrating Netflix soon, and may be hoping to simplify the experience for a wider audience. I found the Blade UI to be pretty interesting the few times I got to use it.

I made some color modifications to the graph paper, bumping the cyan of the non-photo lines up slightly. I was noticing that when I print these in grayscale on a black and white laser printer, that the blues were a bit too pale to print clearly. This version works very well when printed. Color printer users will still be able to knock out the blue.