Upgrading to Lion

I just upgraded to Lion and ran into a few issues trying to compile Ruby via RVM.

Turns out you need to update Xcode and manually install the Command Line Tools.

Makes sense, but I got hung up for a few minutes trying to figure out why it didn’t “just work.”

UPDATE I also had to update my RVM installation by running this:

rvm get head

Direction aware hovers

Direction aware hovering effects are relatively new to the HTML/CSS/JS realm and codrops has just put out a really great tutorial detailing the philosophy and code behind them.

Direction Aware Hover
View it here

The demo is especially nice as it is an example of how it might be used in the real world. I highly recommend taking a look.

How to create a content model: an overview

For larger projects with complex content requirements, we use a deliverable called a content model to help us sort out the complexity.

Content models can be time-consuming and complicated, I won’t lie. In taking the effort, though, we tackle big questions head-on with our clients: who’s going to use this content? How is it created? Who will maintain it? The content model is one way we avoid the all-too-familiar "11th hour content sh*tstorm".

Let’s walk through how we create content models at Blenderbox, using a recent example from our re-design of AAAS Science NetLinks.

What is a content model?

A content model is a way of “atomizing” a client’s content into content types and fields. It might help to think of a content type as a “template”—press releases, event listings, blog posts… all are common examples of content types.

Fields are the parts of each of these content types. For example, an event listing has fields like Start Date, End Date, Event Name, and so on. It may help to think of fields from the standpoint of CMS design—what data do I need to collect in order to create this kind of content?

What’s it look like?

A big spreadsheet! No, really. There are probably prettier examples out there with boxes, arrows, and maybe even color, but in my experience that kind of abstraction actually makes the content model harder for the client to understand and less useful for our developers. So I’ve stuck with the trusty spreadsheet.

Content model created by Blenderbox for sciencenetlinks.com

Lesson content type in the Science NetLinks content model

How is it structured?

Our content models follow a few simple rules:

  • Each content type gets its own worksheet (see the tabs at the bottom of the spreadsheet).
    • On larger projects, there’s often a common set of metadata that applies to every content type. In these cases, we’ll make sure the first sheet in the workbook contains that metadata, with an explanation that it applies to every content type.
  • Each field gets its own row.
  • Columns in the content model explain how we expect each field to behave. We also provide sample content for each field to make it tangible for clients. These columns can be customized to fit your needs, but here are the ones I think are absolutely essential:
    • Field Name—you can’t talk about it if it doesn’t have a name.
    • Data Type—what kind of data are we expecting for this field? Plain text, rich text, select one, select multiple, and date are common options for us. Maybe it’s easier to think of this column in terms of which HTML element you’ll use in the CMS for this field: dropdown menu, checkboxes, text input field, textarea, TinyMCE, etc.
    • Bound Values—if there are multiple options to choose from, list those options here. This is a detail to get right early, as the options you decide on in the content model may be used by the UI for faceted search, tagging, etc.
    • Example—this is what clients will focus on, sample data that helps them understand how you’ve broken down the content type

What’s the value of a content model?

There are lots of reasons to invest the time and effort to create a content model. In my experience, content models:

  • Get everyone on the same page by establishing a common language about content types
  • Help designers address complex content sites head-on, instead of relying just on wireframes and visual designs to communicate the structural details of each content type
  • Trigger conversations about content creation and maintenance responsibilities. This might be the most valuable reason to do a content model. We talked about each content type in detail with the Science NetLinks team, to understand how it would be created and who was responsible for maintaining it. In these conversations, we learned about peer review processes for their content that we were able to bake into the CMS. By acknowledging that there were some areas where our eyes were bigger than our stomachs, so to speak, we were able to remove content types and avoid a last-minute content creation crunch.
  • Help developers begin planning the database and content management system

I hope this peek inside Blenderbox’s content strategy process is useful — comments or questions welcome!

Science NetLinks lesson

The finished product, a Science NetLinks lesson

More case studies for UX, please

Today UX Magazine launched their new reviews section, offering a look at a social weather app called Weathermob. In his review, Sachendra Yadav runs through the basic functionality before getting into gritty UX details like navigation interface and sign-in. It’s a quick runthrough, enough to entice you to download and dig deeper, or just skim for quick takeaways. And it’s something we could use more of.

There’s a drought of case studies in the UX writing community, and the scarcity is underscored by the large amount of academic writing on the topic. The academic inclination to catalog and define is to be expected in a nascent discipline like user experience, which is still finding its core tenets and, in some companies, still fighting for recognition as an important part of web design. This approach can be helpful in breaking new research and codifying best practices that are coalescing around the industry.

But on the other side of academic writing is the pressure to publish, establish yourself as an authoritative source, sell some books, and get a keynote slot at a conference. It’s totally understandable (and hey, agency blogs like this one are promotional too), but the stream of punditry is cluttering my RSS reader with overly broad feats of mental gymnastics: categorizing “competence” or defining “vision.”

Which is why we need more case studies.

Show Your Work

Think about a conference talk you liked. Was it a PowerPoint with slides, something like “The 4 Rs of Empathetic Design”? No, it was probably a case study, with a speaker presenting a site they built and walking you through their process from problem to solution.

Graphic design blogs show their work all the time, from wonkier sites like Design Observer to more mainstream ones like The Fox Is Black, and the result is online discourse that leads to a vibrant, educated community. It attracts and inspires new people to think about design, if not become designers themselves. If UX practitioners want their craft to be recognized, we should soul-search less and share more of our work with the world.

Yes, graphic design has a tangible product, whereas UX is often invisible. But our product is process, which heightens the importance of clear, thorough documentation and explanation by the people who made it. (Could you imagine a BOOOOOOOM! for UX? It’d be esoteric, to say the least.) If we want a recognition as a field, a stronger community of ideas, and excited would-be UX designers lining up at the door, we need to bolster our philosophies with real-life examples.

So to the folks at UX Magazine, I say: keep the reviews coming!

How to evaluate a redesign? Start with the facts.

Recent redesigns of Gmail and Google Reader have sparked a flurry of conversation, its timbre ranging from slow and methodical to instant. Now, we have Twitter’s new design, another big move that, like any interface so ingrained in its users’ daily habits, is eliciting strong emotional reactions.

#NewNewTwitter

Before I form an opinion about an interface, I find that the best thing to do is to simply step back and describe what I’m seeing:

What’s larger? What moved? Was anything added? What do they want me to do on this page?

Dan Frommer’s take on the new Twitter design is great in this regard. It’s a series of straightforward descriptions about what’s emphasized and de-emphasized in the design, which helps him make some keen insights into why Twitter designed the new interface they way they did. For example:

Twitter is trying to de-emphasize private messaging by moving it a layer deeper in the user interface. I’m guessing there are a bunch of reasons for this, not limited to: Simplicity, perhaps relatively low usage by most users, potentially confusing rules around DMing, and that more public content is probably better for Twitter’s product and advertising goals. Some long-time and hardcore Twitter users are probably going to be upset about this, but one of Twitter’s strengths has always been its willingness to design for its mainstream users at the expense of its geek users.

Frommer’s writeup is a refreshing bit of observation and insight in a sea of knee-jerk opinions about #NewNewTwitter, and it’s one we can learn from.

When I’m overwhelmed with a redesign, beginning with a set of objective observations makes it easier for me to form and defend my opinion and analysis later because I took some time to understand the changes. Then, I am more informed and qualified when it comes to addressing the big question: Why did they do it that way?

Highlights from the HTML5 Weekly

So, if you are not subscribed to the HTML5 Weekly newsletter, you might want to get with the program. For the uninitiated, the editors describe themselves as:

A free, once–weekly round-up of HTML5 and browser technology news and links.
CSS 3, Canvas, WebSockets, WebGL, Native Client, and more.

In addition to browser tech news, I’ve found that it’s been a good way to keep up with general trends in the industry. Some highlights from this week’s edition include:

Read more and subscribe at html5weekly.com.

Front-end development bundle for Google Reader

Paul Irish, one of our favorite front-end devs, put together a list of must-read blogs for front-end development. At a whopping 258 feeds, it’s a pretty heavy hitter. Luckily, one of the commenters of the original post culled it down to the essential blogs (the ones with posts in the last 6 months). That comment was later deleted, but not before I grabbed it and added a couple of my own! You can get it here.

I’m already a big fan of CSS-Tricks and Hakim.se that are on this list, so I’m looking forward to some other gems this might uncover. While there are a lot of good resources in this list. I’m a little wary of the amount of cross posting that must go on between that amount of blogs, but I’m going to keep an eye on it and remove any that really just re-post what others are saying.

Code Cards: Christmas cards for your compiler

When not solving problems in usability, our very own Matt Raw makes handmade letterpress Code Cards that can, among other things, help you express love in HTML. Now he and Campbell Raw Press have come up with a series of new compiler-friendly Christmas cards to send your favorite developer this holiday season:

Raw eggs, sugar, and copious amounts of alcohol. What web developer hasn’t known the rich pleasure that only this combination can provide? Especially when disguised in a coffee mug? At 11 AM?

This set of greeting cards features an egg nog recipe in four popular languages: Python, Ruby, PHP, and Javascript. Send them to a fellow web worker or keep them for yourself as a handy liquor cabinet reference.

It’s a bit of a team project, of course: our developers Caleb Brown and Damon Jablons contributed their code as well. Check out all the cards and order online at code-cards.com.

4 Problems with Instant Usability Assessments

Last week, ReadWriteWeb published “5 Problems with Gmail’s New Design,” a literal handful of complaints about Google’s new mail interface. The lede:

Gmail’s redesign may come with a bunch of spiffy new themes that look great in screenshots, but the actual usability of Gmail is in steep decline.

I’ll set aside the numerous issues I have with the article to focus on a broader point. It’s rarely a good idea to assess the “usability” of a new interface right after its release, as ReadWriteWeb has done. Here’s why.

4 Problems with “5 Problems With…” Posts

1. Where’s the data?

A very wise man once said about usability assessments, “Yeah, well, that’s just, like, your opinion, man.” Google collects vast amounts of data about the usability of their interface, both prior to launch and post-launch. Unless the author is a credentialed HCI type (and even then, treat skeptically), it’s unlikely that the author can offer much more than an “I don’t like this” opinion about a new interface. Sometimes, designs that seem like poor usability decisions actually turn out to be highly successful, like when Twitter added steps to its new user flow.

2. No context

Any conversation about a product’s usability must refer to the usability of a specific feature for a specific audience. RWW takes issue with the new Google UI styles, likening it to a Mondrian painting and claiming that “it isn’t actually that useful.” Not useful for what? Not useful for whom? In what context?

3. Long-term usage not accounted for

What looks like a usability issue at first might actually be a better way to operate over the long run. Users need time to acclimate to a new interface. My friend David Choi summarized the user research he did in support of GMail’s new design, specifically with regard to longitudinal studies (i.e., studies of usage over long periods of time). If designers have done their jobs, users will discover new and better ways to complete tasks which may not be obvious at first use.

4. Usability is not the same for everyone everywhere

“Usability” is not some single metric that improves or declines for everyone with each new release. Products like GMail serve many audiences, each with different needs and modes of use. Things I don’t like about the new GMail may well be things that help my mom use the interface. Usability rarely increases or decreases uniformly for all users of a system as vast as GMail.

In conclusion

So, while I share a couple of RWW’s concerns about the new GMail interface, I’m not about to claim that the usability of GMail is “in steep decline.” I don’t have anything but my own opinion to stand on to make that claim. What I don’t like about the new GMail may very well make email easier or simpler for someone else.

Pimp out your rvm profile

We’ve been using RVM for all our Rails projects here at Blenderbox for some time and we’ve made it a whole lot easier to use by adding this .rvmrc file to the root directory of all our projects.

#!/usr/bin/env bash

ruby_string="ruby-1.9.2"
gemset_name="gemset-for-project"

if rvm list strings | grep -q "${ruby_string}" ; then

  # Load or create the specified environment
  if [[ -d "${rvm_path:-$HOME/.rvm}/environments" \
    && -s "${rvm_path:-$HOME/.rvm}/environments/${ruby_string}@${gemset_name}" ]] ; then
    \. "${rvm_path:-$HOME/.rvm}/environments/${ruby_string}@${gemset_name}"
  else
    rvm --create  "${ruby_string}@${gemset_name}"
  fi

else

  # Notify the user to install the desired interpreter before proceeding.
  echo "${ruby_string} was not found, please run 'rvm install ${ruby_string}' and then cd back into the project directory."

fi
# Ensure that Bundler is installed, install it if it is not.
if ! command -v bundle ; then
	printf "The rubygem 'bundler' is not installed, installing it now.\n"
	gem install bundler
fi

What this little beauty does is looks for a ruby version and gemset that you set in the script and switches to it.  If it doesn’t exist but you have the ruby version installed, it will create a gemset for you and automatically switch to it.  If you don’t have that ruby version installed, it prompts you to install it before it creates the gemset.

It’s pretty awesome, so I hope you give it a try.  Once you do, you’ll never know how you lived with out it!  I’ve even used it for a few django projects to automatically switch to the right virtualenv and start up tmux.