More case studies for UX, please

oshtuhl  /  January 12, 2012, 2:22 pm

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!

Posted in Design, User Experience / No comments >

How to evaluate a redesign? Start with the facts.

Matt  /  December 12, 2011, 11:08 am

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?

Posted in User Experience / No comments >

Highlights from the HTML5 Weekly

Caleb  /  November 30, 2011, 5:00 am

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.

Posted in Development, Tips / 1 comment >

Front-end development bundle for Google Reader

Caleb  /  November 22, 2011, 12:40 pm

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.

Posted in Development, Links / No comments >

Code Cards: Christmas cards for your compiler

Caleb  /  November 16, 2011, 8:57 am

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.

Posted in Development, Humor, Links / No comments >

4 Problems with Instant Usability Assessments

Matt  /  November 14, 2011, 2:14 pm

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.

Posted in User Experience / 4 comments >

Pimp out your rvm profile

Caleb  /  November 10, 2011, 5:00 pm

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.

Posted in Development / Tagged , / No comments >

What is a modern web application?

Dan  /  November 9, 2011, 6:34 pm

On Sept. 10th I attended a presentation by two Developer Advocates at Google, Pete Lepage and Jan Kleinert. Pete was kind enough to share the slide show he used for the presentation on his website. I found it very informative and thought I’d share a summary.

The subject of the presentation was : What is a modern web application?

The overarching theme is : Use the cloud and provide native desktop richness.

Springpad and Gojee were mentioned as excellent of keeping with this philosophy. What these do right is look exactly like an application you’d install on your computer and use screen real estate effectively. Gojee presents the user with an uncluttered, straightforward interface and full screen images that make the food look amazing

Pete demoed a project called DJ BreakPoint, which is basically Turntable.fm done totally in HTML 5.

He listed some MVC frameworks like Sproutcore, Backbone.js, Ext JS 4 as well as CSS frameworks like Less, Sass

They talked about making it easy to jump right into using a web app. For example, with Springpad you can author a document without signing up, but you have to sign up to save. Users are more likely to sign up once they have test driven an apps features and have invested some of their time either playing with the app or creating content with it

Once the user commits to signing up, make the process super easy. Let them sign in with OpenID, Facebook, Google credentials so they don’t have to fill out a form with their personal information. The Google Identity Toolkit makes hooking these up easy.

Fit the medium: 

Test for screen size and resolution with media queries for stylesheets and/or css media queries in js with window.matchMedia() (demo here, resize the window to watch it try and auto detect the device)

Deep linking – He gave the example of how Netflix used to be designed. The URL would never change because the same page was just being rewritten with javascript. When you hit the back button as you were browsing through movies you would be sent back to the previous website you were looking at before Netflix instead of the Netflix movie listings page. Leviroutes (“a routes framework for JS that hooks into HTML5 history”) *Notice that even links to presentation the slideshow are appended with #[slidenumber].*

New ways of moving files (starts on slide 19)

In Webkit browsers only (Safari and Chrome) you can add the webkitdrectory tag to an <input /> to make file uploading simple.

Keeping with the concept of mimicking desktop applications :

  • You can drag and drop files with by adding ‘draggable=”true” to anchor tags (and setting a MIMEtype) (works on Chrome only)
  • This goes both ways, with the ability to drag files and images from your desktop into Chrome to upload them
  • The addition of local filesystems ups the local storage capacity from 5MB and the filesystem runs in a sandbox in Chrome so it’s secure.
  • Application Cache lets applications work offline if they lose internet connection and resynchronize when the connection comes back. This is already available in some apps such as Disqus. If you’re writing a comment and you reload the page or lose your connection the comment is reloaded from cache when you come back. ‘ (slide 23-24) Make this easy with LawnChair (persistent json objects)
  • Desktop notifications – Popup windows that can contain even contain multimedia (slide 26)

Voice control is the hottest thing nowadays, with Siri just being announced and Google recently enabling spoken-word searches (in Chrome only). Just add x-webkit-speech to an input and Google handles the rest on their end (in-the-cloud processing).

It’s cool that any device with an accelerometer (phones, as well as many laptops have them for fall detection) Device orientation demo 

Full 3D acceleration in Chrome with WebGL. Demo here

Native audio alalysis. Demo here

What good is all of this stuff if it only works in Chrome? Solution: Chromeframe

It doesn’t require superuser to install so even people with limited account access can install it!

 

Resources

Chromestatus.com

HTML5Rocks.com

What Makes A Great Web App?

Bootstrap

Golden Grid

Less

Sass

TheNextWeb.com

Pete LePage’s blog

CanIUse.com (list of HTML5 compatibility)

FormFactorJS.com

Leviroutes

Posted in Development, technology / No comments >

How to modify a Drupal 7 view query to order by two columns simultaneously

Nick Herro  /  November 3, 2011, 2:43 pm

I’m working on a site that uses Views to pull in lists of content.  One view pulls in a list of Blog posts, News Items, and Podcasts.  I need to sort the content by date, but there’s a problem…

The sorting field on News Items and Podcasts is a Date field named ‘Publication Date’, but this field doesn’t exist in the Blog posts.  I need our view to sort by node.created and our custom Publication Date field simultaneously.

MySQL COALESCE() and hook_views_query_alter() to the rescue!

Step 1: create and enable a custom module with this structure:

my_module
my_module/my_module.init
my_module/my_module.views.inc

Step 2: create your view.  I created a view called ‘Related Content’ with a display called ‘news_and_updates’.

Important make sure you add both fields to the SORT CRITERIA section of the view.  This will ensure that the query joins on the correct tables.

Step 3: add this to my_module.views.inc

/**
 * Implements hook_views_query_alter()
 */
function my_module_views_query_alter(&$view, &$query) {
  // this is the name of our View and Display
  if ($view->name == 'recent_content' && $view->current_display == 'news_and_press') {
    // dpm($query);

    // this is our custom field
    $field_name = 'field_publication_date';

    // override the ordering
    $query->orderby = array(
      array(
        'field' => 'COALESCE(UNIX_TIMESTAMP(field_data_' . $field_name . '.' . $field_name . '_value), node.created)',
        'direction' => 'DESC',
      )
    );
  }
}

and that should do it!

Two things to note here:

  1. We are overriding all of our view’s SORT CRITERIA.  Enable Devel and uncomment the // dpm($query); line above to see what other options you have.
  2. Using COALESCE() in ORDER BY may hinder performance because it doesn’t allow us to use indexes on our sorting fields.  An alternative solution could be to add an extra field to all of the content types we’re using in this view and sort by that field.  I thought this, but our content model is already pretty complicated and it seemed too cumbersome.  Our dataset is relatively small, and we’re caching everything, so I don’t think this is going to be too much of a performance hit.

Hope this helps someone out there!

Posted in Development / Tagged , , / No comments >

import a gzipped database backup

Nick Herro  /  October 16, 2011, 2:52 pm

I’ve been gunzipping my MySQL dumps before importing them.  This was always mildly annoying – especially when working on Drupal projects where the database seems to get passed around a lot.

Today I found a more concise approach: use gzcat to read the contents of the gzipped file directly into your database like this:

gzcat path/to/dump.gz | mysql -uroot -p database_name

* change the italicized text to the path to your backup file, MySQL user and database name, respectively.

Posted in Development / Tagged , , / No comments >

© 2012 blenderbox, inc. All rights reserved.