I increase the font size of at least 1/3 of the web sites I visit.

You can joke about my declining eyesight all you want. But you can’t ignore this:

What 12px Text Used To Look Like

On a 14.1″ PowerBook G3 (Pismo)

What 12px Looks Like Now

On a 15.4″ MacBook Pro

Why?

Pretty shocking huh? Why is the text getting smaller? Because notebook screens are staying the same size (or getting smaller) while screen resolution gets sharper.

My beloved PowerBook G3 Pismo had a 14.1″ (diagonal) screen. It had a 4:3 aspect ratio and maxed out at 1024x768. The actual height and width of the screen was 8.44″ tall and 11.25″ wide.

My new MacBook Pro has a 15.6″ screen. It has a 16:9 aspect ratio and maxes out at 1440x900. The actual height and width of the screen is 8.16″ tall and 13.06″ wide.

So, the new MacBook is wider, but actually shorter (over a quarter of an inch shorter, in fact). Despite the screen being shorter, it still vertically displays 132 extra pixels. So…

The pixels are getting smaller.

12 pixels on the new MacBook Pro translates to 0.109 inches. On the Pismo, 12 pixels measured at 0.132 inches. Doesn’t sound like much, but when you start stacking line of text upon line of text, it adds up. And I start page zooming.

For more on this topic, visit the Large Font Coalition.

THE PROCRASTINATE BUTTON!

So, some background… on our Browse Contacts and Browse Communications pages, we allow you to select a bunch of each and perform batch actions (such as tagging, deleting, merging, etc.). Well, for quite a while I’ve been meaning to add batch actions to the To-Do List.

The obvious choices were “mark as done”, “tag them”, and “delete them”. But there was one more I wanted. I have a *lot* of To-Dos. It’s how I remember everything. We even allow you to email stuff to your To-Do List.

I basically record everything there and sift through it repeatedly. So, I’ll mark a ton of To-Dos as due Friday because I take time every Friday to go through the To-Dos, see what’s still relevant, turn some stuff into tickets, mock some stuff up, etc. I also move a bunch of due dates to the next Monday (if it is something I want to talk about at our weekly staff meeting), Wednesday (if it something for my weekly day with Michelle) or the next Friday (if it’s just not ready to be processed yet). I had to do all of these one at a time. And that was a bit of a bummer.

Not anymore!

Here it is in action:

Just select a few To-Dos, and hit that “procrastinate” button. You’ll get this:

The default is “Next Week” (gotta love natural language processing!), but you can enter whatever date you’d like. I love being able to type “Monday”, “Wednesday”, or “Friday” without even needing to think about the dates.

I could have named the button something like “change due date”, but really… that’s a snoozer. I have looked around and haven’t found a “procrastinate” button in any other web apps, so there. That’s my tiny contribution to the field of user interface design!

One of my favorite parts of my NewBCamp talk last month was something I had never really talked about (either in person or on this blog) but wanted to take the chance to share: The idea of the URL as UI. So, what is URL as UI?

Computer users have gotten so used to the graphical user interface (GUI) that it is easy to forget that computers basically operate via a series of commands. The web has not only brought the command line back to the surface (with the web browser’s address bar), it has exposed the concept to an entire generation of users that has never seen a command line.

When you access a web site, you are generally typing in a URL (unless, of course, you are selecting a bookmark or following a link from an email, IM, other site, etc.). The URL is essentially a command to go fetch that content. We take components of the URL such as “http://”, “www”, and “.com” for granted now, these are rather arcane expressions that would be nonsensical to non-web user. But since most sites we access start with an “http” (perhaps an “https”) and end with a “.com” (or “.net”, “.org”, etc.), we get used to these conventions.

Many developers take the time to learn the command line instead of using the graphical user interface because it can be faster and more efficient. For example, if I wanted to add a graphic called “button.png” to code base for BatchBook (the web-based contact organizer I’m working on for BatchBlue), I’d have two options. I could:

1. Open a Finder window.
2. Open the folder “svn” in my home folder.
3. Open the folder “batchbook”
4. Open the folder “public”
5. Open the folder “images”
6. Find the file “button.png”
7. Right click on “button.png” and choose “Add” from the contextual menu (I was using SCPlugin for Subversion)

Or, I could do it via the command line like this:

1. Open the Terminal
2. Type “svn add svn/batchbook/public/images/button.png”

Once I learned the conventions, it was an easy choice for me.

Similarly, navigating a web site simply by the URL can be much faster and more efficient than relying on the site’s information architecture and navigation menus.

Unusable URLs

If I visit Amazon.com and search for the album Rock Action by Mogwai, I am directed to a page with this URL (line break mine):

http://www.amazon.com/Rock-Action-Mogwai/dp/B00005AUBA/
ref=pd_bbs_sr_1?ie=UTF8&s=music&qid=1203311335&sr=8-1

My first question was “how much of this is needed to access the page and how much is session information Amazon is capturing?” Well, turns out that the URL really is:

http://amazon.com/Rock-Action-Mogwai/dp/B00005AUBA/

What’s good about this is that it has the artist and title of the album in the URL. What isn’t so nice is the extra stuff that means nothing to me, the user. I’m sure it means something to Amazon, but that doesn’t mean it needs to be exposed on the front end. If I want to look up a different CD or different artist, I need to rely on the search functions or Amazon’s site architecture, even though I already know exactly what I want.

Is this just Amazon? No. Here’s the URL that Barnes & Noble gives me (again, line break mine):

http://music.barnesandnoble.com/search/
product.asp?z=y&EAN=744861049029&itm=1

To me, this is far worse… there is no human readable component here at all.

URL as UI Done Right

So, what’s a good example of URL as UI? Last.fm, of course. Here is the URL for information about Rock Action:

http://last.fm/music/Mogwai/Rock+Action

Now, let’s compare the three showing human usable vs. machine usable data:

(click for larger version)

With Last.fm, if I want to look at the main Mogwai page, I can just delete the “/Rock+Action” part. If I want to look at a different artist page, I simply swap out the “Mogwai” with, say, “Orbit”. If I want to look at a particular Orbit album, I can just add it after the “/Orbit”, such as “/Orbit/Libido+Speedway”.

Notice that everywhere there would be a space, you use a “+”. Once you learn this simple convention, you can keep using it to speed up your interactions with the site.

Another example of a convention you need to learn is the individual track convention. It is possible for an artist to have the same song appear on many albums (such as the standard release, live album, greatest hits, etc.). Last.fm could track these separately but instead chooses to treat these all as one song. So, this is how you would access a single track’s page:

http://last.fm/music/Arcade+Fire/_/Intervention

Notice the “/_/” between the band name and the track name. The underscore in the directory where the album name would normally go signifies that we’re no longer looking at an album—we’re looking at individual tracks. If you were on the page for Arcade Fire’s “Intervention” and wanted to look at a different track by them, you’d have to hunt around the page and try to find a link to that track, or more likely go back to the main artist or album page and find it there. Using the URL, you can jump right to “/Ocean+Of+Noise”.

Of course, you can use this technique elsewhere on the site. For example, every artist has a wiki-based bio page, with a URL like http://www.last.fm/music/Mogwai/+wiki. If you wanted to read a few band bios, you’d have type the artist’s name into the search field, land on the artist’s page, and click the “Bio” tab to see each bio (and repeat the process for each artist). Why not just type the artist’s name and that’s it (via the URL)? Same thing goes with photo pages for each artist, video pages, etc.

Also, Last.fm is not the only site doing this right. Another example is Flickr. To see my photos, you go to this URL:

http://www.flickr.com/photos/darowskidotcom/

If you want to go switch to another user’s photos, as long as you know their username you can replace mine with theirs. It works well for tags, too. If you want to see all my photos I have tagged as “redsox”, you can go to:

http://www.flickr.com/photos/darowskidotcom/tags/redsox/

If you want to see someone else’s photos tagged “redsox”, simply swap in that user’s username. If you’d rather see everyone’s photos tagged “redsox”, just take out the username altogether.

If people use your site enough, they’ll want an even faster way to reach the content they want. They’re not browsing anymore. They are power users. They know what they want. Give them a nicely hackable URL to do this.

Update: A translation to Belorussian has been provided by fatcow.

| View | Upload your own

Today (a couple of hours ago, actually) I gave a presentation called “Introduction to Web Standards” at NewBCamp08, a new unconference in Providence. I’m pleasantly surprised by the turnout, considering it was a first time event with minimal marketing used to spread the word (Twitter played a hand, I bet).

Here’s my talk about Web Standards, microformat goodness, and some URL as UI craziness. The talk seemed to be pretty well received and had a decent turnout with some excellent questions asked.

In this 2.0 world, it seems that 1.0 gets the short end of the stick. Well, not for me. At BatchBlue, our flagship product—BatchBook—went 1.0 yesterday. As in… no more beta. As in, the curtain has been pulled off. As in… a lot of hard work paying off.

Never before have I been so intimately involved in a product launch. This was very different from when we launched our beta at DEMOfall07. That was in sunny California with tons of press, bright lights, and on-stage demos. Yesterday’s release, as our President Pam eloquently put it in a blog post:

Oddly, it is a quiet event. It is happening in the wee hours of a cold New England night so that the uploading of new features does not disrupt any beta users’ work. It is happening at the remote sites of BatchBlue programmers, quality assurance contributors, design mavens, and communications savants as each one of us has a huge stake in the product we are sending out to the world.

As exciting as this is, 1.0 is simply a foundation. Now that we have a great baseline in place, we can turn to our users to see how we can make things better, more useful, more powerful. We have ideas for improvements. We have ideas for new features. But now we have more people to please than just ourselves. That is equal parts exciting and intimidating, but ultimately rewarding.

I just upped a post over at the BatchBlog called “Step Outside the Code: Be Your Own User.” Let me tease it a bit, then I’ll elaborate a bit more here about the process I followed.

As soon as I joined BatchBlue in May, I was thrown into the fire—we had a beta to get out, after all. There were lots of bugs to be fixed, display issues to be resolved, cranky browsers to accommodate, and architectures to learn. A lot of things initially impressed me about BatchBook, but it seemed like all I was doing was fixing issues. It becomes easy to lose a sense of the whole when you’re arm wrestling with tiny pieces of code day after day.

Then, a wonderful thing (on so many levels) happened—I took a couple weeks off to welcome our second child. For two weeks, I didn’t fix any bugs… I fixed makeshift dinners. I didn’t clean up code… I cleaned up belly button regions. I didn’t change class names, I changed diapers. Yet, I still used BatchBook. But I finally used it as a real live user.

It was very interesting finally jumping into BatchBook head first as a user. I had a lot of “hey, this works but if only it did this” moments. I jotted those down in a notebook. I kept the notebook open for the entire two weeks. Nolan has a knack for being wide awake between 11 pm and 2 am and requiring me to pace around the house with him, listening to music.

I brainstormed. A lot. Every time I passed the notebook, I would jot down the idea. I kept building my vision of how this thing should work. Then, the Sunday before I returned, I cranked out a bunch of mockups based on what I was thinking about. And hell if they weren’t some of the best work I’ve ever produced.

So, why is it that when I’m at my most tired, I’m feeling my most invigorated with my work? It could be a lot of things. I think one main reason is that since I didn’t design the first iteration of BatchBook, I felt very overwhelmed by the amount of areas I felted needed to be changed. Well, I’ve now mocked up a totally revamped Contacts section, which is really the backbone of the app. So, maybe it is because I can finally feel the application getting a sense of… me.

I honestly think another reason is that I just backed off of the development for two weeks and just used the thing. I organized my own contacts, made edits that weren’t just dummy data, and actually started recording new information in it as it came, leaving my other applications behind. I like the app, but I love what the app can be. And I think I’m just pumped because I finally have an idea of what that is.

Aza Raskin, Humanized

Son of Jef Raskin, “Father of the Macintosh”

Design towards human frailties and interface will work well.

Cognetics

• The ergonomics of the brain
• Tells you you can’t press two buttons ten feet apart at once
• Can’t hold 7 (¬±2) in your short term meory at once
• What people are capable of

Forgotten tools of Interface Design

• GOMS Modeling: Lets you take an interface and figure out how long it will take an average user to use it, a priori
  • Most UI designers don’t know it exists
  • When paper prototyping, can be used
  • Different than how easy, how efficient
• Information Efficiency (Developed by Jef)
  • GOMs doesn’t say what the best interface is
  • HOw much information do you need to put into a system vs. How much is absolutely minimally needed.
    • How efficeint you are being
  • Humanized blog, how to calculate efficiency

The Death of the Desktop is near

• What’s an interface.
  • The way that you accomplish tasks with a product — what you do and how it responds — that’s the interface
• To the user, the interface is the product
  • If it can’t be used, it can’t be used.
• Shovel Analagy
  • Cutting piece gets all the R&D
  • Interface is wooden handle
• We spend an inordinate amount of time fiddling with our computer, when we should be getting tasks done
• Keep simple things simple
  • Analog vs. Digital watch
  • • Digital is more complex (cites Timex instructions)
  • Write a manual when you design an interface
• Other simple things that aren’t
  • Cell phones
  • Rounded corners
  • Adding an entry to Google Calendar
    • When an interface is simple, you usually don’t notice that there is an interface at all
  • Making a simple website mockup
• The Problem: Applications (Like Isolated Cities)
  • Word/Photoshop/Mathmatica
    • Each does the same things, but has a specialty in one
    • You have to go back & forth
    • Programmers are re-programming
    • This is why programs are bigger and bigger
    • And our hard drives have to be bigger and bigger
    • 7 different implementations of spell check with seven copies of the English language
  • Applications always try to step on each others toes, they want to horde their functionality

So, what does an interface do?

• Create content
• Navigate content
• Select content
• Transform content
• Question: What about sharing content? (He’ll have to come back to that)

Raskin’s Rules of Interfaces

• An interface shall not harm your conent or, through inaction, allow your content to some to harm.
  • Why does the computer not save by default?
• An interface shall not waste your time or require you to do more work than is strictly necessary.
  • Copying from one app to another
• An interface shall not allow itself to get into a state where it cannot manipulate the content.

Content is everything

• First and foremost
• Everything you do has to do with the content

What will doom the desktop?

• What work do you really get done on the desktop?
• Starting with a flawed metaphor—paper gets lost on your desk
• When you have a bigger monitor, productivity goes way up because your windows are not hiding each other

What does the desktop do?

• Lets you get the computer into a state where you can enter content
• Lets you categorize your content
• Lets you navigate your content

There are better, faster, more humane ways (The web is a tresure-trove of examples)

Language has untapped power (“Thhis is the futture”.)

• 30Boxes, Google Calendar, leverages power of language
• Type what you want. Have two numbers? Type “calculate”.

Again, what does the desktop do?

• Lets you get the computer into a state where you can enter content
  • Command Line interfaces
  • URL= Command Line that everyone can and does use
    • Imagine a dropdown of all 100,000,000 web sites
  • Spotlight/Google Desktop search
    • Another command line interface
  • Humanized’s Enso Launcher
• Lets you categorize your content
  • Categorization
    • Tags
      • Doesn’t force a hierarchy on to the user
      • Not an either/or choice
      • Desktop needs to learn this lesson
    • Search
      • If you have a good search, you really don’t need to categorize very much
      • Nobody uses the Yahoo categories anymore, searching works better
    • = The death of forced hierarhy
• Lets you navigate your content
  • Navigating: Don’t really know what you’re looking for
  • Let content be content
    • GUI touted as having direct manipulation
    • You’re moving around a graphical representation of that item (when moving a document)
  • Let search be search
  • Let 2D content be 2D content
    • Windows being 3D causes problems
    • Expos√© for Mac helps by making it all 2D again
    • Microsoft’s Rolodex goes the other way, making you sift through one at a time
  • Let the user’s structure be
    • Don’t force them into thinking about the content the way the developer thought of it

Zoom interface

• Everything on 2D plane, user zooms in.
• With smaller window: With no changes in interface, everything still works
• Aza’s Desktop of the Future

Maze/Web

• A maze is a series of interconnected rooms connected by doors — when you go in one, you can’t see where you came from
• The web is a series of interconnected pages connected by hyperlinks — when you visit one, you can’t see where you came from
• Snap is the first step towards fixing this
  • Show you where you are going before you go there

The Desktop is Doomed

• Why the Stagnation?
  • The Toolkit Straightjacket
• We have a unique opportunity
  • We must not return to the desktop
• How can we overcome this?
  • The solution:
    • Services
      • Make mashups possible
    • Universal Access interface
      • Type what you want to get and it comes up
    • • Current solutions are not scalable
      • URL bar is limited
      • Need a fast, semantic method

An example: Enso

• Harnesses power of language to access what you need
• Similar to QuickSilver on the Mac

Design The Big Picture

• Challenge: Can you think of other solutions?

Take Home Message

• Content
• Language
• Services
• Unification

Found these notes from another of Aza’s talks.

What a fantastic talk. I will be thinking about this and covering it more on The CogBlog.

Update: I was running low on battery during the Q&A session, but there was a lot of great stuff discussed. Chris Messina brought up how Zoom didn’t account for the social aspect of interface design. Aza said that developing the content comes first, sharing it is an add-on. Chris disagreed, saying that technology starts with connecting people first. I tend to think that both are correct, but they are different problems. Aza’s approach does need to account for social sharing, but we do need establish just what we are sharing, too. More to think about… I’ll write more at some point.

As a dedicated reader of Kathy’s blog, she talked about a lot I’ve read there. However, she did touch on something I haven’t heard/read her cover before—the WTF? button.

There has been tons of research over the years dedicated to recogizing facial expressions. It’s come a long way, but there is still a long way to go. Why not—instead of trying to automatically detect when a user is distraught—let the user tell YOU when they’re confused. The button doesn’t have to say WTF, but it certainly gets the point across. Once the user clicks on the WTF/AAAAARGH/HELP ME!/I’M CONFUSED! button, you can detect where they are in the system and provide some high level choices about what’s going on (I’m lost, I’m confused, I know what I want to do but can’t find it, etc.). From there, you can provide some more detailed questions for the user to answer. And from there, you can provide the way out of trouble.

Kathy put on a great show, and if you aren’t reading Creating Passionate Users, you’re missing out.

Update: Tons of folks writing about this one. Here are some of the early ones and good ones:

• David Panarelli
• Liz Henry
• Jeff Beckham
• 21apples
• Stuart Montgomery @ Throwspace
• Christine Herron
• Brian Fitzgerald
• SXSWDiary.com
• Cindy Royal

Design Panel

Spakers: Bryan Veloso (Moderator), Dan Cederholm, D. Keith Robinson, Mike Davidson

Every once in a while you go to a panel that is just … fantastic.

This panel was three web rock stars (Dan, Keith, and Mike) and a guy that looks like he’ll be part of the next generation very soon (Bryan). Bryan was nervous going into this (as stated on his blog), but he did very well as the moderator.

My battery was low for this one, so I scribbled down five pages of notes. here’s the transcription (if I can read them)…

What’s wrong with web design today:

• Internet Explorer
  • IE7 is better but still not where it needs to be
  • It’s not necessary to wait until IE6 is down to 0% usage before ignoring it.
  • Some site serve or more basic CSS for IE6 & below (make them want to upgrade!)
• Revenue being the bottom line in driving design decisions
  • Problems happen when short term revenue drives design decisions and not long term revenue.
  • You’re not an artist. Get over it.
    • Art provokes emotion.
    • Design provokes reaction.
• The disconnect between graphic design and web design.
  • Creativity bar is higher in graphic design.
  • David Carson would be a bad web designer (too abstract)
• Too much focus on technology, technique, and latest trends
  • Technology is means to an end
  • Talk about fundamentals
  • learn to design; solve the design problem with something like AJAX
  • CSS isn’t design, it’s a technique.
  • More focus on graphic desing & usability
  • There is such a small set of tools
    • Real creativity comes from constraints
• Browsers, HTML & CSS are moving along at a glacial pace
  • CSS3 will take a long time to become standard
  • The web exists for communication
    • Not for clean code nazis
    • Know when to break the rules
• There are ridiculous arguments about bad design actually being good
  • MySpace, Google, Craig’s List, etc.
• There isn’t enough focus on copy as a design element
• We need new heroes.
  • Every industry needs someone to look up to.

What’s right with web design today:

• Best practices are now part of web standards
• Designers are creating their own design products and companies
  • If you an’t convince them your idea is better, become their competitor.
  • Having someone focused on design at the top of the company is great, until you have to worry about really making money.
  • Freedom to make something as you would want to do it.
• People are learning the right way at an earlier age.
  • There weren’t classes for this when we were in school (I didn’t learn web design in college, even)
• Many different people from many different backgrounds are trying their hand in design
  • There is a lot you can learn from print design (white space, grid, typography, etc.)
• Web designers are maturing, beginning to develop good fundamental basis
• Complexity of design is increasing in proportion with average bandwidth
  • Nobody cares about dialup anymore
• Flexible platforms make design more leverageable (WordPress, etc.)

The most important design elements:

• Clear and defined purpose
• Solid concept well executed
• Solid architecture
• Balance
• Answers “who?”, “what?”, and “why?”
• Easy for beginners, but still good for advanced users
• Easy navigation from one area to another
• Personality and memorability: standing out in the crowd
  • Learn how to write!

Breaking it down (what’s good):

• JeffCroft.com — creative comments
• thebignoob.com — great photos
• 31three.com — laptop image
• Technorati — clean URLs
  • URLs are interface design
  • no subdomains effects your search results positively
  • good structure helps your rankings
• veerle.duoh.com — art & illustration
• dustindiaz.com — style switcher
• muledesign.com — creative fine print
  • (scroll to bottom)
• uxmag.com — widget front page
• tatteredfly.com — flybox
• nytimes.com — typography
• digg.com — comment ratings
• digitalmash.com — dynamic head
• bearskinrug.co.uk — interactive bear
  • (on the right side of screen)
• nymetro.com — typography

Reassembly:

• Take elements of design and apply them to projects
• Do what fits
• Little details can make the most impact, but don’t spend 99% of time on it
  • Concept first
  • Details later

Spin it to make it your own:

• Nothing is new, just spun differently
• Every designer develops a style eventually
• Better to be good than original (on the web)
• Don’t steal: use nodes of design inspiration
• Mix up your process (comp first, css first, etc.)

I attended a snoozer of a seminar in the middle here… the only dud. I won’t comment on that one… This next one was another good one, though.

Social Metadata and the Relevance Revolution

Speaker: Gene Smith

• Harness what users are doing to make your site more relevant
• Emergent Information Architecture
  • Became Collective Intelligence
  • Social Information Architecture
• Takeaways
  • Better understanding of social systems we are so engrossed in today
  • Think about feedback and how to incorporate it into the design process
• IA: Structural Design of shared informaton environments
• Shared design of semi-structured information environments
  • Users are co-creators
• Social IA: User actions create some or all of the structure of an information environment
  • Using the wisdom of crowds to solve the problems of IA
• Amazon: Granddaddy of social IA
• Wikipedia: without the contributions of users it would be empty
• Flickr & tagging
• Augmentation vs. Co-creation: Levels of contribution from users
• The web is now part of our social structure
  • Go on to have fun, too.
  • Shouldn’t ESPN know that he ALWAYS clicks on the NHL button?
• Three ingredients of SIA
  • Capture user actions
    • Things people do online that we can track
    • Building blocks
      • Popularity
      • Community
      • Reputation
    • Ignore higher goals and motivations
  • Aggregate and display
    • Brining together user actions in a relevant way
    • Displaying them
    • Rules
    • Kinds:
      • Listing
      • Ranking
      • Clustering
      • Collaborative Filtering
      • Other algorithms
  • Feedback
    • Places to intervene
      • Introduce delays (comment moderation on blogs)
      • Modify the strength of feedback loops
      • Who has access to what informaton?
      • Adjust incentives and punishments
      • Change the system
• Challenges
  • Spam
  • Gaming the system
  • Balance
  • Relevance
  • Unintended consequences
• Design Principles (for Social IA)
  • Allow for different levels of engagement
  • Monitor and tweak feedback loops
  • Participate in larger ecosystem
    • YouTube is viral
  • Design new actions, aggregators, display
• genesmith@atomiq.org

Keynote: The Dawning of the Age of Experience

Speaker: Jared Spool

This keynote was done by Jared Spool of Boston-based User Interface Engineering. I’m actually more familiar with Jared’s colleague Joshua Porter for his writing on Bokardo. Jared was very entertaining, though. A few notes:

• Successful user experience integrates the user AND the business.
• Successful experience design is learned, but is not available to introspection.
  • (Chicken sexing example)
• Successful experience design is invisible.
  • (Think air conditioning — if it’s just right, nobody notices it)
• Successful experience design is multidisciplinary.
• Successful experience design is cultural.
• Redesign is dead — embrace incremental change.

More Notes:

• Ryan’s Notes
• Brian’s Notes (on the Design Panel)