Smashing Magazine Feed

Collaging: Getting Answers To The Questions You Don’t Know To Ask

2012-02-08T10:25:53Z

When conducting user research, we all know that asking the right questions is just as important as how you ask them, but how do you know exactly what questions to ask? What if the discussion topic is very personal? How do you get a complete stranger to open up? There is a better way to conduct an in-depth interview, and it doesn’t involve a clipboard. Just imagine what you could discover if the participant’s answers weren’t limited to a predetermined set of questions. This is where collaging can help.

Collaging is a projective technique by which participants select images that represent how they feel about a particular topic. The participants then explain to the moderator the reason they chose each image. The collage becomes an instrument through which participants are able to express needs and feelings that they might not otherwise have been able to articulate. This information enables us to better understand the user’s world and how to design for it.

A Picture Is Worth A Thousand Words

So, you might be asking yourself, “Why should I have people make collages, rather than just ask them point-blank questions about their needs and feelings?” It’s a great question, and the answer is, sometimes the most valuable answer is not in response to a direct question, but one that’s elicited. An image can be a powerful stimulus that evokes a strong response, triggers a memory and draws out feelings that exist below a person’s own level of awareness.

Gerald Zaltman, author of How Customers Think, states that “95% of our thoughts and feelings are unconscious.” There is just so much that we carry around in thought but never share until something triggers it. When we ask a participant a set of pre-defined questions, we are predetermining the scope of the interview. Instead, by presenting a visual stimulus, we are letting the participant start the conversation and bring up topics that are meaningful to them.

There are also times when you don’t know the right question to ask. Sometimes you do, but you don’t know how to ask it. Depending on what you’re researching, participants might have difficulty opening up to you. The research topic might be too personal, controversial or sensitive for the participant to just open up and start discussing with a complete stranger. The collage becomes a catalyst for discussion, an ice-breaker.

What You Can Learn

Collaging is a method of building empathy with your users. You gain an emotional understanding of the user’s feelings, problems, state of mind and so on, which is imperative to know when designing for them. Collaging can also help you better understand the user’s needs, in turn helping you to address them in your product.

The wonderful thing about this method is that participants might reveal stories that prompt a line of questioning about a topic that you never expected to explore (as we’ll see in the examples below). You honestly don’t know what you will learn from each participant’s collage.

A Brief History Of Projective Techniques

Collaging is not new. The method has been well used to conduct qualitative marketing research for at least 40 years. Its use in marketing has mainly been to assess feelings towards brands and products. Other projective techniques — tests such as the Rorschach, word and sentence completion, draw-a-person, and thematic apperception — date back to the early 19th century. All of these methods are rooted in psychology, but their application has expanded to other fields such as advertising, management, sociology, anthropology and, more recently, user experience (UX), to name a few. Collaging as a user research method has yet to be widely adopted in our industry, but I’ve seen a steady increase in its use and popularity over the past few years.

Conducting A Collaging Exercise

Listed below are all the steps necessary to conduct your own collaging study. Let’s walk through them together.

1. Choose Your Topic of Interest

The collaging exercise should focus on a specific topic. You will be asking participants to choose pictures that reflect how they feel about this topic. For example, if I were redesigning a website, I might ask the participant,

“Select pictures that reflect how you would and would not want the new website to greet you.”

You could word this in a lot of different ways, such as,

“Create a story about how you would want the website to communicate with you. What qualities should it have? What qualities should it not have?”

Or, to learn more about a participant’s day-to-day struggle with a problem, you could simply say,

“Select pictures that reflect your experience with using [x].”

2. Create a Collage Board and Get Pictures

You will need a board or a large piece of paper to which the participant can tape their pictures. It doesn’t need to be fancy. In the past, I have just used 11 × 17-inch ledger paper. If I were asking the participant to create two separate collages, I would divide the paper by drawing a line down the middle. I’ve seen other people put a target on a collage board and ask participants to stick pictures on the board according to how closely they “hit home” for them. Feel free to be creative here, and find what works best for you.

Example of a completed collage.

Participants will need to be able to choose from a pool of about 150 to 200 pictures. The pool of pictures must be a mixture of random pictures. They should not have a running theme (i.e. no pictures of just animals or people or medical scenes or nature, etc). The pool should be a good mixture of all sorts of pictures. You can use stock photography or even pictures clipped from magazines. Here are some online sources of free images:

Print the pictures small enough (approximately 3 × 3 inches) for participants to have plenty of room to put as many as they want in their collage. You’ll also want multiple copies of pictures to replace the ones used by participants. In the past, I’ve printed pictures on stickers, which worked well but was a little more expensive.

3. Moderate the Study

Set up the room.
Lay out all of the pictures on a big long table. Make sure they do not overlap so that the participant can see them all. Put the collage board, some tape and a pen on another table.
Give the topic and instructions.
Instruct the participant to pick out at least four or five pictures that reflect how they feel about the given topic. Then ask them to tape those pictures to the collage board, and add a caption to each one explaining why they chose it.
Leave the room.
I prefer to leave the room for five to ten minutes to give the participant time to peruse the pictures without feeling any pressure. When I reenter the room, I tell them to take as long as they need and to let me know when they have completed the collage.
Discuss the collage.
The collage is finished. Now comes the fun part! Have the participant explain to you why they chose each picture. This is your opportunity to learn as much as you can about how the participant feels about the topic. Let the collage and the participant guide the interview. Be sure to follow up with questions and to probe deeper when needed and appropriate. Keep in mind that the experience can be very personal and revealing for some participants, depending on the sensitivity of the topic. The collage might make it easy for a participant to open a door that they don’t necessarily want to walk through. Be mindful of the participant’s comfort level when probing deeper into something personal.

4. Conduct Analysis

When conducting your analysis, keep in mind that what’s really important is not the pictures they chose, but why they chose them. The analysis and report should focus on what the collage reveals about the participant, not the collage itself. It would be interesting if multiple participants chose the same pictures, but even more interesting if they chose them for the same reasons.

When to Conduct a Collaging Exercise

Consider collaging during the early stages of product development, when user requirements are being gathered. The method is also helpful at any time in the product’s development if you feel the design team is having trouble understanding and identifying with the users. Sometimes designers need to step back and remember exactly who they are designing for.

As mentioned, this method can be most useful if the topic is sensitive, but it’s great for impassive topics, too. Collaging can be used if you just need a fun activity to put the participant at ease and break the ice before a formal interview. For example, I have conducted collaging exercises with cancer patients, with people dealing with chronic pain and even with women about their menstrual cycles and feelings about birth control. On the other hand, I’ve conducted collages to learn more about people’s daily commutes and how they feel about public transportation — much lighter topics.

Collage Examples

The examples below are from collage exercises that I’ve moderated. Each one shows how a picture can change the line of questioning in an interview. The topics, which were discussed because of these images, might never have been brought up in a traditional interview.

Picture from a collage done for research on people suffering from chronic pain.

The participant wrote the caption, “That’s my daughter consoling me when I’m in pain.” When discussing this picture, I was able to probe deeper into how the participant’s pain affects their family and how they deal with it. We were then able to discuss what role family plays in how they manage their pain.

Picture from a collage done for research on how people feel about their commute.

The participant wrote the caption, “Wish my commute was this enjoyable.” I was able to follow up with questions about what their ideal commute to work would be like and what they wished they could change about their current commute.

Picture from a collage done for research on cancer patients.

The participant wrote the caption, “Vomiting!” This led to a line of questioning about the side effects of the participant’s cancer treatments and their coping mechanisms.

Pitfalls To Avoid

Sometimes a stimulus can be too strong and can disrupt a participant’s train of thought and be a distraction. The example below resulted from two participants choosing the same image for the same study:

The participants wrote the captions “Disgusting” and “Gross.” Their captions and their reasons for choosing the image were similar, but in no way did they relate to the topic of interest, which was pain management. The participants couldn’t explain how the image related to what they felt about the topic, but they still chose it because they were drawn to it and it provoked a strong emotion. In this case, we decided to remove the image from the pool because it was obviously a distraction. When conducting a collaging exercise, remove any pictures that you find derail the participants.

Conclusion

Collaging is a great method for learning more about your end users. Depending on when the collaging study is conducted during the product’s development cycle, your findings could do any or all of the following:

Aid in persona development,
Be used in early ideation for creating new products,
Reveal how people feel about the experience of using an existing product,
Help to define new requirements or enhancements for features.

The method might not be right for every user research initiative, but try it if you feel something is lacking from your traditional interviews. You will be amazed at what you can learn when you throw away the clipboard and let participants direct the interview.

Resources

How Customers Think: Essential Insights Into the Mind of the Market, Gerald Zaltman
Customer Intimacy: Pick Your Partners, Shape Your Culture, Win Together, Fred Wiersema

(al) (il)

How To Use Custom Post Types To Organize Online Marketing Campaigns

2012-02-03T15:17:38Z

Custom post types add a level of flexibility to WordPress that makes this open-source Web development platform more useful on many levels. Whenever I have been faced with a Web-based task, especially one that involves organizing information, the first thing I do is examine WordPress to determine if it can handle the job. It usually can.

Image Source

As an Internet marketer and analyst, I need to be able to organize online marketing campaigns in a way that is trackable in Google Analytics. This is the perfect task for WordPress custom post types.

In this article, we’ll explain how to create a WordPress plugin that enables you to organize Internet marketing campaigns using trackable URLs, shortened versions of those URLs, and trackable QR codes that you can also use for offline marketing activities.

We’ll show you how to create this plugin in a way that maximizes ease of use and functionality. If you have other methods that you have found useful, please share them in the comments. Also, let’s remember that we are standing on the shoulders of WordPress developers who have laid the foundation for easier coding.

Here are the criteria for our custom post type plugin:

It must provide a form in which users can specify a landing page to be tracked, the anchor text or content, the term (if this link is a PPC ad), and any additional information about this link.
It must provide three custom taxonomy types, so that users can select the URL variables for source, medium and campaign name. This is a taxonomy type because they will be reusable across campaigns and posts.
It must be organizable in the admin area and be displayed in the user interface.
The output must include a Google Analytics campaign-trackable URL, the information about the URL in human-readable format, a shortened version of the URL using a URL shortener, and a QR code of the shortened URL.

The File Structure

This plugin will use three files. To set up the structure, create a plugin folder named campaign-tracker. Inside the campaign-tracker folder, create the following three PHP files:

campaign-tracker.php
ga-functions.php
campaign-template.php

After you have created the files, we are ready to start adding the code.

The Plugin File

The main plugin file will be campaign-tracker.php. The content of this file will begin the standard way, by providing WordPress with the information that it needs to recognize it is as plugin. We then dive into setting up the CampaignTracker10 class and functions. We will set up our campaign custom post type and register the taxonomies that we will need. We will also initiate our admin interface.

   <?php
   /*
   Plugin Name: Campaign Tracking 1.0
   Plugin URI: http://www.convergeconsulting.org
   Description: Google Analytics Campaign Tracking system for WordPress 3.0 and above.
   Author: Joshua Dodson
   Version: 1.0
   Author URI: http://www.convergeconsulting.org
   */

   // Include the ga-functions.php helper functions
   include_once('ga-functions.php');

   if(!class_exists('CampaignTracker10'))
   {

      class CampaignTracker10 {

         var $meta_fields = array("gaca10-gaurl","gaca10-gaterm","gaca10-gacontent","gaca10-gadescription");

         // This function will create the custom post type. Thanks to Konstantin Kovshenin's example for additional examples of how to construct custom post types (http://kovshenin.com/2010/03/custom-post-types-in-wordpress-3-0-2089/), which inspired much of this.
         function __construct(){
            // Register custom post types
            register_post_type('campaign', array(
            'label' => _x('Campaigns','campaigns label'), // We're labeling the custom posts as Campaigns and also accounting for gettext appropriately
            'singular_label' => _x('Campaign','campaign singular label'), // Each post will be called a Campaign
            'public' => true, // These will be public
            'show_ui' => true, // Show the UI in admin panel
            '_builtin' => false, // This is a custom post type, not a built in post type
            '_edit_link' => 'post.php?post=%d',
            'capability_type' => 'post',
            'hierarchical' => false,
            'rewrite' => array("slug" => "campaign"), // This is for the permalinks
            'query_var' => "campaign", // This goes to the WP_Query schema
            'supports' => array('title'/* We only need the default title field, but we could use others such as 'author', 'excerpt', 'editor' ,'custom-fields'*/)
            ));

            add_filter("manage_edit-campaign_columns", array(&$this, "edit_columns"));
            add_action("manage_posts_custom_column", array(&$this, "custom_columns"));

            // Register custom taxonomies gasource (for the Campaign Source), gamedium (for the Campaign Medium), and ganame (for Campaign Name)
            // Campaign Source
            register_taxonomy("gasource", array("campaign"), array("hierarchical" => true, "label" => _x( 'Campaign Sources', 'campaign sources taxonomy label' ), "singular_label" => "Campaign Source", "rewrite" => true));
            // Campaign Medium
            register_taxonomy("gamedium", array("campaign"), array("hierarchical" => true, "label" => _x( 'Campaign Mediums', 'campaign mediums taxonomy label' ), "singular_label" => "Campaign Medium", "rewrite" => true));
            // Campaign Name
            register_taxonomy("ganame", array("campaign"), array("hierarchical" => true, "label" => _x( 'Campaign Names', 'campaign names taxonomy label' ), "singular_label" => "Campaign Name", "rewrite" => true));

            add_action("admin_init", array(&$this, "admin_init"));
            add_action("template_redirect", array(&$this, 'template_redirect'));

            add_action("wp_insert_post", array(&$this, "wp_insert_post"), 10, 2);

         }

Let’s give the columns on the admin screen some headings:

   function edit_columns($columns)
   {
      $columns = array(
      'cb' => '<input type="checkbox" />',
      'title' => _x('Campaign Title','campaign title label for edit columns'),
      'gaca10_ganame' => _x('Campaign Name','campaign name label for edit columns'),
      'gaca10_gasources' => _x('Campaign Source','campaign source label for edit columns'),
      'gaca10_gasmedium' => _x('Campaign Medium','campaign medium label for edit columns'),
      );
      return $columns;
   }

Let’s specify which columns we would like to show up on the admin screen for this custom post type. We’ll have columns for campaign source, medium and name, in addition to the post’s title.

   function custom_columns($column)
   {
      global $post;
      switch ($column)
      {
         // The campaign source
         case "gaca10_gasources":
         $gasources = get_the_terms(0, "gasource");
         if ( $gasources && ! is_wp_error( $gasources ) ) :
         $gasources_html = array();
         foreach ($gasources as $gasource)
         array_push($gasources_html, '<a href="' . get_term_link($gasource->slug, "gasource") . '">' . $gasource->name . '</a>');

         echo implode($gasources_html, ", ");
         endif;
         break;

         // The campaign medium
         case "gaca10_gasmedium":
         $gamediums = get_the_terms(0, "gamedium");
         if ( $gamediums && ! is_wp_error( $gamediums ) ) :
         $gamediums_html = array();
         foreach ($gamediums as $gamedium)
         array_push($gamediums_html, '<a href="' . get_term_link($gamedium->slug, "gamedium") . '">' . $gamedium->name . '</a>');

         echo implode($gamediums_html, ", ");
         endif;
         break;

         // The campaign name
         case "gaca10_ganame":
         $ganames = get_the_terms(0, "ganame");
         if ( $ganames && ! is_wp_error( $ganames ) ) :
         $ganames_html = array();
         foreach ($ganames as $ganame)
         array_push($ganames_html, '<a href="' . get_term_link($ganame->slug, "ganame") . '">' . $ganame->name . '</a>');

         echo implode($ganames_html, ", ");
         endif;
         break;
      }
   }

Once our columns are set up appropriately, we should see the following columns (note that this example is with one campaign already added):

The next section enables us to specify which template we would like to use to display this custom post type. We will be using the campaign-template.php template:

   function template_redirect()
   {
      global $wp;

      // If the post type is set and is campaign…
      if (isset($wp->query_vars["post_type"])) {
         if ($wp->query_vars["post_type"] == "campaign")
         {
            // Then use the campaign-template.php file from this plugin directory
            include WP_PLUGIN_DIR.'/campaign-tracker/campaign-template.php';
            die();
         }
      }
   }

If a post is inserted or updated, then loop through the array and update or add the post’s meta data.

   function wp_insert_post($post_id, $post = null)
   {
      if ($post->post_type == "campaign")
      {
         foreach ($this->meta_fields as $key)
         {
            $value = $_POST[$key];
            if (empty($value))
            {
               delete_post_meta($post_id, $key);
               continue;
            }

            if (!is_array($value))
            {
               if (!update_post_meta($post_id, $key, $value))
               {
                  add_post_meta($post_id, $key, $value);
               }
            }
            else
            {
               delete_post_meta($post_id, $key);

               foreach ($value as $entry){
                  add_post_meta($post_id, $key, $entry);
               }
            }
         }
      }
   }

With the following function, we can add custom meta boxes for the admin screen where we edit the campaign:

   function admin_init()
   {
      // Add custom meta boxes for the edit campaign screen
      add_meta_box("gaca10-meta", "Campaign Information", array(&$this, "meta_options"), "campaign", "normal", "core");
   }

The following function is for the admin post meta contents. This lets us create the form in which we specify some of the variables for our trackable URL (except for the taxonomies). It also provides a read-only field that shows the shortened URL after the URL variables have been saved.

   function meta_options()
   {
      global $post;
      $custom = get_post_custom($post->ID);
      if($custom["gaca10-gaurl"][0]){
         $gaurl = $custom["gaca10-gaurl"][0];
      }
      else{ $gaurl = ''; }
      if($custom["gaca10-gaterm"][0]) {
         $gaterm = $custom["gaca10-gaterm"][0];
      }
      else { $gaterm = ''; }
      if ($custom["gaca10-gacontent"][0]) {
         $gacontent = $custom["gaca10-gacontent"][0];
      }
      else { $gacontent = ''; }
      if ($custom["gaca10-gadescription"][0]) {
         $gadescription = $custom["gaca10-gadescription"][0];
      }
      else { $gadescription = ''; }

      $url = trackable_url();
      if ($custom["campaign_tinyurl"][0]) {
         if($gaurl == '') { $shortenedurl = ''; }
         else{ $shortenedurl = create_tiny_url($url); }
      }

      ?>
      <label><?php _ex('Website URL:','website url label'); ?></label><input name="gaca10-gaurl" value="<?php echo $gaurl; ?>" /><br />
      <em><?php _ex('(e.g., http://www.google.com)','website url example'); ?></em><br /><br />

      <label><?php _ex('Campaign Term:','campaign term label'); ?></label><input name="gaca10-gaterm" value="<?php echo $gaterm; ?>" /><br />
      <em><?php _ex('(identify the paid keywords)','campaign term information'); ?></em><br /><br />
      <label><?php _ex('Campaign Content:','campaign content label'); ?></label><input name="gaca10-gacontent" value="<?php echo $gacontent; ?>" /><br />
      <em><?php _ex('(use to differentiate ads)','campaign content information'); ?></em><br /><br />

      <label><?php _ex('Campaign Description:','campaign description label'); ?></label><input name="gaca10-gadescription" value="<?php echo $gadescription; ?>" /><br />
      <em><?php _ex('(use to remind yourself about this specific link)','campaign description information'); ?></em><br /><br />

      <label><?php _ex('Shortened URL:','shortened URL label'); ?></label><input name="gaca10-gashortened-url" value="<?php echo $shortenedurl; ?>" readonly="readonly" /><br />

      <?php
   }
}

}

Here is how the “Add/Edit Campaign” screen will appear:

If CampaignTracker10 exists, then we initiate the plugin:

   if(class_exists('CampaignTracker10')){

      // Initiate the plugin
      add_action("init", "CampaignTracker10Init");

      function CampaignTracker10Init() {
         global $gaca10;
         $gaca10 = new CampaignTracker10();

      }
   }

Combine these functions into the campaign-tracker.php file.

The following taxonomy examples should also be on the “Add/Edit Campaign” screen after everything has been added. Here is the “Campaign Names” taxonomy:

Here is the “Campaign Mediums” taxonomy:

Here is the “Campaign Sources” taxonomy:

Similar to how traditional post categories are set up, you can create new categories or select previous categories.

A note on usage: When you begin to use the system, try to select only one category each from name, source and medium. One category per taxonomy type will prove to be most useful in your actual analysis in Google Analytics. So, as a general rule: one name, one source and one medium per URL.

The Helpful Display Functions

Each of the functions in this section is part of the ga-functions.php file. The functions have been separated from the other functions in order to keep the display functions together.

Our file will begin with the formatted_utm_taxonomy_terms function, which will display a URL-friendly version of the taxonomy terms:

   <?php
   /* Some Helpful Display Functions */

   function formatted_utm_taxonomy_terms($the_term) {
      global $post;
      $post_terms = get_the_terms( $post->ID, $the_term );
      if ( $post_terms && ! is_wp_error( $post_terms ) ) :
      $encoded_terms = array();
      foreach ($post_terms as $term ) {
         if(!$encoded_terms[] = $term->slug){
            $encoded_terms[] = urlencode($term->name);
         }
      }
      $return_terms = implode('+',$encoded_terms);
      return $return_terms;
      endif;
   }

The trackable_url function generates the trackable URL from the fields on the admin screen as well as the taxonomies. This appends the appropriate tracking criteria to the URL so that Google Analytics can use the variables and provide information based on these specific variables. To do this, we will use the add_query_arg WordPress function.

   function trackable_url() {
      global $post;
      $custom = get_post_custom($post->ID);

      // the url
      if ($custom["gaca10-gaurl"][0]) {
         $gaurl = $custom["gaca10-gaurl"][0];
      }
      else { $gaurl = ''; }

      // the term(s)
      if ($gaterm = $custom["gaca10-gaterm"][0]) {
         $gaterm = $custom["gaca10-gaterm"][0];
         $gaterm = urlencode($gaterm);
      }
      else { $gaterm = ''; }

      // the content(s)
      if ($custom["gaca10-gacontent"][0]) {
         $gacontent = $custom["gaca10-gacontent"][0];
         $gacontent = urlencode($gacontent);
      }
      else { $gacontent = ''; }
      $arr_params = array ( 'utm_campaign' => formatted_utm_taxonomy_terms('ganame'), 'utm_source' => formatted_utm_taxonomy_terms('gasource'), 'utm_medium' => formatted_utm_taxonomy_terms('gamedium'), 'utm_term' => $gaterm, 'utm_content' => $gacontent);
      return add_query_arg( $arr_params, $gaurl );

   }

The following functions take the campaign-trackable URL and shortens it with TinyURL. This method uses wp_remote_get to generate the shortened URL. It then saves the shortened URL to the post’s meta data when a post is saved. The trackable_url_tiny function enables us to retrieve the shortened URL in the template.

   // Save the shortened trackable URL to the post meta
   function save_shortened_meta($post_ID) {
      $url = trackable_url();
      $shortened_url = create_tiny_url($url);
      update_post_meta($post_ID, "campaign_tinyurl", $shortened_url);
      return $post_ID;
   }

   // Add an action to save it when the post is saved.
   add_action('save_post', 'save_shortened_meta');

   // Retrieve the shortened URL from post meta
   function trackable_url_tiny($url = null, $post_ID) {
      global $post;
      $custom_fields = get_post_custom($post->ID);
      $campaign_tinyurl = $custom_fields['campaign_tinyurl'][0];
      return $campaign_tinyurl;

      return $post_ID;
   }

   // Create shortened trackable URL through the wp_remote_get function
   function create_tiny_url($strURL) {
      $tinyurl = wp_remote_get( 'http://tinyurl.com/api-create.php?url='.$strURL );
      if( is_wp_error( $response ) ) {
         return 'Something went wrong!';
      } else {
         return $tinyurl['body'];

      }
   }

The trackable_url_report function is what provides the human-readable version of the variables. These are broken out by each section. The landing page, campaign name, source, medium, terms and content are all separated and displayed individually if they exist.

   function trackable_url_report() {
      global $post;
      $custom = get_post_custom($post->ID);

      // get the url
      if ($custom["gaca10-gaurl"][0]) {
         $gaurl = $custom["gaca10-gaurl"][0];
      }
      else { $gaurl = ''; }
      // get the term(s)
      if ($gaterm = $custom["gaca10-gaterm"][0]) {
         $gaterm = $custom["gaca10-gaterm"][0];
      }
      else { $gaterm = ''; }

      // get the content(s)
      if ($custom["gaca10-gacontent"][0]) {
         $gacontent = $custom["gaca10-gacontent"][0];
      }
      else { $gacontent = ''; }

      // The Landing page
      $url_info ='';
      $url_info.= "<strong>". _x( 'Landing Page:','landing page label') . "</strong> ";
      $url_info.= $gaurl;
      $url_info.= "<br />";

      // The campaign name
      $url_info.= "<strong>". _x( 'Campaign:','campaign label') . "</strong> ";
      $url_info.= formatted_utm_taxonomy_terms('ganame');
      $url_info.= "<br />";

      // The Source
      $url_info.= "<strong>". _x( 'Source:','source label') . "</strong> ";
      $url_info.= formatted_utm_taxonomy_terms('gasource');
      $url_info.= "<br />";

      // The medium
      $url_info.= "<strong>". _x( 'Medium:','medium label') . "</strong> ";
      $url_info.= formatted_utm_taxonomy_terms('gamedium');
      $url_info.= "<br />";

      // The term
      $url_info.= "<strong>". _x( 'Term:','term label') . "</strong> ";
      $url_info.= $gaterm;
      $url_info.= "<br />";

      // The content
      $url_info.= "<strong>". _x( 'Content:','content label') . "</strong> ";
      $url_info.= $gacontent;
      $url_info.= "<br />";

      return $url_info;
   }

The display_description function displays the description of the URL. We’ve broken this part out here in order to keep all of the pieces that are specific to the URL together. This is also the last function in the ga-functions.php file.

   function display_description(){
      global $post;
      $custom = get_post_custom($post->ID);
      $description = $custom["gaca10-gadescription"][0];
      return $description;
   }

   ?>

Combine these functions into the ga-functions.php file, and then we can move onto creating the template file.

The Template File

The final file that we will use to generate the view of the trackable URL is campaign-template.php. You will remember from the campaign-tracker.php file that we have a call in the template_redirect() function to redirect users to this template when viewing the custom post type of campaigns.

For display purposes, we will use the single.php file from the current default WordPress theme, TwentyEleven. You can, of course, use another theme and different styles.

First, we include the ga-functions.php file so that we can use some of our display functions. The campaign template also uses the Google Charts API to generate the QR code.

The following code will do all of the heavy lifting to display our campaign-trackable URL, the information about the URL, the shortened URL and the QR code. It will also allow us to edit the post if we need to change a variable. Simply drop this code into the loop.

   <h1 class="entry-title"><?php the_title() ?></h1><br />

   <?php
   echo "<strong>". _x( 'Description:','description label') . "</strong> ";
   echo display_description();
   echo "<br />";
   echo trackable_url_report();
   echo "<br />";
   echo "<strong>". _x('Trackable URL:','trackable URL label') . "</strong> ";
   echo "<a href=".trackable_url()." target='_blank'>".trackable_url()."</a><br />";

   echo "<strong>" . _x('Shortened Trackable URL:','shortened trackable URL label') . "</strong> ";
   echo "<a href=".trackable_url_tiny()." target='_blank'>".trackable_url_tiny()."</a><br />";
   ?>

   <br />
   <img src="https://chart.googleapis.com/chart?chs=150x150&amp;cht=qr&amp;chl=<?php trackable_url_tiny(); ?>" /><br />
   <?php edit_post_link( __( 'Edit', 'twentyeleven' ), '<span class="edit-link">', '</span>' ); ?>

When we combine the code, the campaign template will be as follows:

   <?php
   /**
   * The Template for displaying all single posts.
   *
   * @package WordPress
   * @subpackage Twenty_Eleven
   * @since Twenty Eleven 1.0
   */

   // Include the ga-functions.php file so that we can easily display the results
   include_once('ga-functions.php');

   get_header(); ?>

   <div id="primary">
   <div id="content" role="main">

   <?php while ( have_posts() ) : the_post(); ?>

   <nav id="nav-single">
   <h3 class="assistive-text"><?php _e( 'Post navigation', 'twentyeleven' ); ?></h3>
   <span class="nav-previous"><?php previous_post_link( '%link', __( '<span class="meta-nav">&larr;</span> Previous', 'twentyeleven' ) ); ?></span>
   <span class="nav-next"><?php next_post_link( '%link', __( 'Next <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) ); ?></span>
   </nav><!-- #nav-single -->

   <h1 class="entry-title"><?php the_title() ?></h1><br />

   <?php
   echo "<strong>". _x( 'Description:','description label') . "</strong> ";
   echo display_description();
   echo "<br />";
   echo trackable_url_report();
   echo "<br />";
   echo "<strong>". _x('Trackable URL:','trackable URL label') . "</strong> ";
   echo "<a href=".trackable_url()." target='_blank'>".trackable_url()."</a><br />";

   echo "<strong>" . _x('Shortened Trackable URL:','shortened trackable URL label') . "</strong> ";
   echo "<a href=".trackable_url_tiny()." target='_blank'>".trackable_url_tiny()."</a><br />";
   ?>

   <br />
   <img src="https://chart.googleapis.com/chart?chs=150x150&amp;cht=qr&amp;chl=<?php trackable_url_tiny(); ?>" /><br />
   <?php edit_post_link( __( 'Edit', 'twentyeleven' ), '<span class="edit-link">', '</span>' ); ?>

   <?php comments_template( '', true ); ?>

   <?php endwhile; // end of the loop. ?>

   </div><!-- #content -->
   </div><!-- #primary -->

   <?php get_footer(); ?>

When the template is set up and a campaign has been added, then it should display the following page:

In Conclusion

By using WordPress custom post types in the method described, it is possible to organize marketing campaigns with the relevant Google Analytics campaign-tracking URL, shortened URL and QR code. This makes organizing marketing campaigns much simpler and more effective.

Custom post types make it very easy to set up a system by which to organize content. And we can get creative in how we use custom post types. They can be very useful when organizing content outside of the normal structure of WordPress and other content management systems (i.e. posts, pages, etc.).

Other possible uses of custom post types include the following:

Manage client contacts,
Create an employee directory,
Keep an inventory of items,
Organize other data.

Resources

You may be interested in the following resources and articles:

“Custom Post Types in WordPress 3.0,” Konstantin Kovshenin
“Custom Post Types in WordPress,” Justin Tadlock
“Creating a TinyURL With TinyURL’s API,” Richard Castera
“Getting Started With Infographics” (QR Codes with the Google Charts API), Google Code
“Post Types,” WordPress Codex
URL Builder tool Google Analytics
“IQ Lessons,” Google Analytics

(al)

Freebie: St. Valentine’s Day Icon Set (10 PNG/PSD Icons)

2012-02-06T16:42:41Z

Every now and then, we release useful freebies for all of our highly valued readers. Today, it is our pleasure to present to you Cuberto‘s fantastic St. Valentine’s icon set — exclusively designed for Smashing Magazine and its loyal readers. The icons presented are available in transparent PNGs as well as Photoshop PSDs (128×128 px) and are perfect for any projects you have coming up for St. Valentine’s Day. Enjoy!

Download the Set for free!

This icon set is completely free to use for commercial or personal applications without any restrictions. Please link to this article if you want to spread the word.

large preview
download the .zip-package (.zip, 2 Mb)

Initial sketches of Cuberto’s St. Valentine’s icon set.

Quick preview of the icons in the set.

Behind the Design

As always, here are some insights from the designers:

“Our goal was not only to create nice icons but also a functional set that can be used in navigation elements as well as gifts throughout social networks on the upcoming sweet Valentine’s day. Please link to this article if you want to spread the word.”
— Peace and Love

Thanks Cuberto, we sincerely appreciate your time and your intentions!

(il)

Ten Things To Think About When Designing Your iPad App

2012-02-03T15:06:44Z

Like most well-designed things, the magic of an iPad app comes from a union of usefulness, usability and meaning. Games aside, the app must be useful by solving a problem that people actually have through the right set of functionality at the right time. It must be easy to use and, just as importantly, easy to get started using, without a lot of pesky setup and learning steps. And it must hold meaning for the user through visual beauty, an emotional connection, personal insights, etc. In this article, we won’t outline the entire design process for creating an iPad app, but we will explore 10 of the key things to think about when designing your app (and planning the design process).

We’ve excluded tips that have already been mentioned in every single iPad design article ever written (such as, “Invite users to touch by presenting real-world metaphors in a skeuomorphic interface” —look it up!). Instead, we’ll focus on what to really think about when doing design work. By reviewing these considerations in the context of your own application, you can assess whether you’re making good decisions about your design.

Take A Goal-Oriented Approach To Simplify Functionality.

Good iPad apps are about simplicity and doing a few things well. This means you have to be selective about the functionality you include and not throw in the kitchen sink. Consider following a goal-oriented approach to figure out what functionality you need. List all of the high-level goals a user might have when using your app (better yet, watch users doing things that you hope your app will help with in order to get a full picture of what the user’s goals are — but that’s an article for another time). What would someone be trying to get done? Then, brainstorm all of the functionality that someone might want in order to accomplish that task. Look at that big list, and start pruning, with an eye for the minimum that is needed to help the user succeed. And then select a few magical, delightful features to complete the package.

For example, Epicurious does an excellent job of giving the multi-tasking cook exactly what they need. When viewing a recipe in landscape format, users can easily scan ingredients on the left while keeping track of the next instruction on the right, with a bright placeholder that can be dragged with the finger to the current spot. Reviews and additional tips for the recipe are easily accessible via tabs, but the main screen is kept clean and uncluttered, with just the basics.

Epicurious provides a clean interface for recipes, with an orange marker to keep your place.

By contrast, the Whole Foods app starts off being helpful by letting you add recipe ingredients to a shopping list. Unfortunately, it neglects to combine repeated ingredients, so items are listed multiple times. In the screenshot below, bananas appear three times, once for each recipe that requires them, instead of being combined into one entry.

Whole Foods should enhance its app by merging duplicate list items.

Also, don’t provide a button for every control the user might need to accomplish their goal. Think about what the user can infer about the UI through gesture. For example, Apple’s Notes app doesn’t have an “editing” mode; instead, you simply touch the screen to bring up the keyboard, and it auto-saves when you’re done. Basic editing controls such as cut, copy and paste also appear only in response to gestures as needed (and undo is accomplished by shaking).

The Notes app limits on-screen buttons and presents controls only if it detects they are needed.

Leverage What You Know To Create A Fully Personalized Experience.

No one wants to spend a lot of time setting up a $1.99 app. Leverage as much of what the iPad and other websites know about your users as possible (with their permission, of course). Could you use the user’s location, calendar, Twitter feed or contacts list to make the app smarter and more personalized?

Zite is a fabulous RSS reader for iPad that doesn’t wait for you to add sources, but rather connects to your Google Reader, Twitter or Delicious account and then presents articles based on what it has learned about your interests. I connected it with Delicious (where I store all of my bookmarks), and in five seconds it created a personalized magazine for me to explore new and interesting content! And just like Pandora, the more you use it, the more relevant and personalized the content becomes. So far, even though some argue that Flipboard’s UI is more elegant, engaging with Zite is easier because it’s all set up.

Zite sets things up immediately by connecting to an existing account.

Zite created my own personal magazine by learning about my interests through my Delicious account.

Think About The Place Of Use.

Assume that your user will be out and about when using your app — in a restaurant, in the car, in the kitchen, on a sofa, etc. How does that change the list of goals you’ve put together? For a user browsing recipes, are their needs different on the sofa than in the kitchen, or in a restaurant?

Open Table’s Web app for reserving tables displays a list of restaurants as the default view for search results (i.e. without a map). On the iPad, the default view is a large map with a list of restaurants on the right, along with an option to search your vicinity. This accommodates the common use case of someone trying to find a place to eat when they are out and about.

When you’re out and about with the iPad, Open Table shows you what is near.

Awesome Note opens with a set of default categories that reflect the various places that people might take notes on an iPad.

Awesome Note complements traditional categories like “My idea” and “To-do list” with out-and-about categories like “Travel diary” and “Shopping.”

GroceryIQ is a shopping list that organizes items by aisle to speed up shopping. It also allows filtering by store, which is handy.

GroceryIQ offers functionality to make your shopping trip more efficient.

Consider Multi-User And Multi-Device Cases.

Assume that multiple members of a family will be sharing an iPad or viewing the device at once. Unlike a personal computer, the iPad is not necessarily a personal device but could be treated more like a coffee-table book or magazine that multiple residents share. In addition to allowing users to switch accounts, indicating who is currently logged in is also important. An added benefit of accounts is that they facilitate syncing between devices (for example, an iPad and a smartphone).

Flipboard is a great example of shared use through multiple accounts. When you sign in, your name is displayed on the home page.

Flipboard makes clear that it knows who you are.

Like Flipboard, FedEx displays the name of the logged-in user (although the app’s heavy grayscale appearance is odd).

eBay, on the other hand, supports accounts but provides no indication of who is signed in until you touch the “My eBay” button in the corner.

eBay doesn’t make clear who is logged in until you touch “My eBay” in the corner.

Don’t Do Crazy Navigation Unless It’s A Game Or One-Hit Wonder.

Crazy, spinny, eye-catching interactions are fine for one-hit wonders and games. But stick with standard navigation for frequently used apps, such as news readers. If you do want to do something innovative, make sure it supports the task at hand and is extremely usable.

Martha Stewart Living, which is built on the well-designed Adobe Digital Publishing Suite, uses horizontal and vertical scrolling in a novel way by reserving horizontal scrolling for navigating between articles and vertical scrolling for navigating pages of an article. This is paired with a clever pane that visually shows how scrolling works, plus an overview of the current issue for even quicker navigation. With all that and a clickable table of contents, the whole experience is quite lovely.

Martha Stewart Living’s overview pane shows the clever horizontal and vertical scrolling scheme for content created with the Adobe Digital Publishing Suite.

The best thing you could do is actually use an iPad constantly for all kinds of things, and see what works for you. You’ll quickly discover inconsistencies and annoyances all over the app world, and you’ll figure out where to be consistent and where to branch out.

Here are three different methods that news readers follow to enable users to exit articles:

Huffington Post: top right.

New York Times: bottom left.

Zite: top left.

People tend to rest their thumb near the top left when holding an iPad, so putting the button there is easiest because then people wouldn’t have to change their grip. Also, Zite enables you to click anywhere on the screen outside of the article to close it, which makes for a nice flexible gesture. Similarly, the New York Times enables you to pinch an article to close it and return to the home page, which is even better, especially because the controls disappear once an article has been open for a few seconds — although a one-finger gesture closer to the top left would have worked better, because the two-finger gesture would probably require the user to change their grip.

Be mindful of how you yourself use features, and notice when something is usable and when you have to move your hand awkwardly or do something that disrupts your flow. Look around to find apps that do what you’re trying to do, assess their usability, and decide whether being consistent or doing something different would make more sense. iPad apps are still a new frontier, so now is not the time to buckle down and set conventions — but we should assess whether a new idea really adds something useful or is just novel for the sake of novelty.

Provide A Home Page.

People are used to home pages that orient them to what’s available and that give them a base of operations. Without one, discovering and browsing content can be disorienting and frustrating. Take the NASA news app, which has no home page. Upon launching the app, users are dropped directly into a news article. To view other articles, they would use the carousel arrows on the left and right, or press the tiny list icon in the bottom-left corner of the screen. The list view allows users to browse content in a small scrolling pop-over window that has only enough room for thumbnails and short headlines. The navigation is generally unwieldy and disorienting.

NASA does not provide a home page, but rather drops you into an article with vague pop-over navigation.

Pulse, on the other hand, is a great news app that uses a home page to quickly orient users and to introduce the navigation scheme, which is consistent throughout the app. From the home page, users can easily browse content, having plenty of space to view the large thumbnails and article descriptions to see what interests them. Drilling down into an article will collapse the navigation to the side so that you don’t lose context.

Pulse presents a horizontal scrolling list of articles on the home page.

Opening an article will collapse the navigation to a side panel in landscape view.

In portrait view, Pulse displays the navigation for one content source at the bottom, with easy access to the next page.

Beware Of Awkward Pop-Overs.

iPad offers the nifty interaction of a pop-over to help users retrieve content and navigation in context. But the interaction can also make for a jerky flow, cramming a lot of information into a tiny peephole. Given the limited width and height of a pop-over, avoid stuffing too much in it. Awesome Note tries to cram the interaction for editing a list of folders into a small pop-over, presumably to maintain context. Instead, we get a confusing interaction, with tabs duplicated on the screen and not enough room to get things done.

Awesome Note has a somewhat confusing pop-over that duplicates the information on the screen in a cramped space.

NASA’s complex navigation, which we saw in the preceding point, is a similar example of a bad pop-over.

Consider when opening a new page would make more sense than opening a pop-over. Unless context is critical, don’t be afraid to take users to a full-screen view to give the content some room to breathe.

Or consider using split views in clever ways:

Houzz has secondary navigation for each category in a convenient split view.

Martha Stewart Living displays the table of contents for an issue as a full-length pop-over, opening up space for images and descriptive headlines.

Flipboard favors a slide-out panel to give the navigation enough room to do its job.

Avoid Gratuitous Splash Screens.

Remember when the Web had splash screen, and then everyone got annoyed and left? They are even more annoying on the iPad because you’re usually trying to access content while someone is waiting for either you or the iPad. If you need a splash screen because something has to load, display it for the minimum amount of time possible. Better yet, display useful content while the rest of the app loads to give users a head start on the interaction.

Zite piques your interest by loading the first few photos on the home page while the rest of the app loads. When the app is ready, those initial photos animate into place, making for a delightful little welcome interaction.

Zite draws you in on the splash screen, with thumbnails of articles that will be ready once the full app loads.

Use Gestures In Clever Ways, But Don’t Overdo It.

Cool, useful gestures are a mainstay of iPad use. But the line between effective gestures and gesture overload is fine. For example, don’t provide a swipeable carousel and then also allow a generic swipe gesture on the same screen, because this would put competing swipe gestures at odds with each other.

And if a gesture is not obvious, give users a hint.

Zite indicates more content with a cute little “swipe” text at the bottom.

Discovr, a music-discovery application, integrates information about gesture controls right into the UI. The red circle in the screenshot below says “Tap me,” leading to information on how to expand nodes.

Discovr educates users with a red dot explaining the gesture options for the current screen.

Once basic information has been provided, another red node appears saying “Tap and hold me,” informing users how to access more content with a new gesture. With this information baked into the app experience itself, users learn about powerful features of the UI without having to be psychic.

Make Clear What’s Touchable, And Make It BIG.

Many apps suffer from what Jakob Nielsen calls “read-tap asymmetry,” whereby the font may be legible in size, but the tappable areas are so small that users are prone to missing the targets or are unsure whether the areas are even tappable. In the advertisement below, from the Martha Stewart Living app, the arrowed questions in the middle of the screen are tappable, but you wouldn’t know it because they have no affordance. If you’re going to go through the trouble of making more content available, then make it clear where to tap, and make the tappable area nice and big.

It’s not obvious where you would tap in this ad to get more information.

It turns out that tapping the light-gray boxes in the middle shows more information.

The image areas at the top of the Cool Hunting application are actually swipeable galleries, but we get no hint of it. What if there was some kind of affordance, such as dimensionality or a peek at another image to indicate there was more to the right?

Cool Hunting does not indicate that swiping the top image would reveal more images, which makes this functionality hard to discover.

In iOS itself, double-tapping the home key and then swiping left in the multitasking bar reveals a bunch of controls for sound and music, yet this functionality is pretty well hidden. Why not provide some affordance of what is available?

Double-tapping home and then swiping left on an iPad reveals hidden functionality.

What Else?

These are just 10 of the many things to consider when designing your iPad app, but it’s a good place to start. We’d love to hear your top considerations and examples in the comments. We especially lack a strong repository on the Web of examples of good and bad iPad app design. Please share examples of the different ways that apps treat the same functionality (such as exiting articles), and explain why certain solutions are better than others. Have you discovered other techniques through your own design work that you think everyone should put on their list of do’s and don’ts? Let us know.

Desktop Wallpaper Calendar: February 2012

2012-02-06T16:47:38Z

We always try our best to challenge your artistic abilities and produce some interesting, beautiful and creative artwork. And as designers we usually turn to different sources of inspiration. As a matter of fact, we’ve discovered the best one — desktop wallpapers that are a little more distinctive than the usual crowd. This creativity mission has been going on for over two years now, and we are very thankful to all designers who have contributed and are still diligently contributing each month.

We continue to nourish you with a monthly spoon of inspiration. This post features free desktop wallpapers created by artists across the globe for January 2012. Both versions with a calendar and without a calendar can be downloaded for free. It’s time to freshen up your wallpaper!

Please note that:

All images can be clicked on and lead to the preview of the wallpaper,
You can feature your work in our magazine by taking part in our Desktop Wallpaper Calendar series. We are regularly looking for creative designers and artists to be featured on Smashing Magazine. Are you one of them?

Colored Edge

"For February, the month of spring, love and 29 days." Designed by Rahul.s from India.

preview
with calendar: 1024×768, 1024×1024, 1280×960, 1440×900, 1440×1050, 1600×1200, 1680×1050, 1920×1080, 1920×1200, 1920×1440
without calendar: 800×600, 1680×1200, 1920×1200

Hungry Owl

"February, just one more cold month.. :)." Designed by Katerina Bobkova from Ukraine.

preview
with calendar: 320×480, 1024×768, 1024×1024, 1280×800, 1440×900, 1680×1050, 1920×1080
without calendar: 320×480, 1024×768, 1024×1024, 1280×800, 1440×900, 1680×1050, 1920×1080

Hot Drinks

"Which drink will you choose to make you feel better during the cold season?" Designed by Agathe Altwegg from France.

preview
with calendar: 320×480, 1024×768, 1280×800, 1440×900, 1680×1200
without calendar: 320×480, 1024×768, 1280×800, 1440×900, 1680×1200

Bold

preview
with calendar: 320×480, 1024×768, 1024×1024, 1280×800, 1280×1024, 1366×768, 1440×900, 1680×1050, 1920×1080
without calendar: 320×480, 1024×768, 1024×1024, 1280×800, 1280×1024, 1366×768, 1440×900, 1680×1050, 1920×1080, 1920×1200

February Prison Break

"We suggest – do not mess with February." Designed by Marek Guziсski From Rio Creativo from Poland.

preview
with calendar: 1280×720, 1280×800, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2540×1440
without calendar: 1280×720, 1280×800, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2540×1440

All You Need Is Love

"Love is all you need." Designed by Kaspars Dedzis from Latvia.

preview
with calendar: 1280×800, 1280×1024, 1366×768, 1680×1050, 1920×1200, 2560×1440
without calendar: 1280×800, 1280×1024, 1366×768, 1680×1050, 1920×1200, 2560×1440

February Splashes

preview
with calendar: 1280×720, 1280×800, 1440×900, 1680×1050, 1920×1200

Penguin Hockey

"No coward plays hockey!" Designed by Cheloveche.ru from Russia.

preview
with calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200
without calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200

Mr. & Ms. Nice

preview
with calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440
without calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440

Jealous Much?

"Calendar for February 2012." Designed by Annabelle Bay from USA.

preview
with calendar: 320×240, 1024×768, 1024×1024, 1280×800, 1280×1024, 1680×1050, 1920×1200
without calendar: 320×240, 1024×768, 1024×1024, 1280×800, 1280×1024, 1680×1050, 1920×1200

Heartbroken

"Illustrated wallpaper for february on the theme of heartbreak.1920 x 1200." Designed by Danae Botha from South Africa.

preview
with calendar: 320×480, 800×480, 800×600, 1024×768, 1024×1024, 1152×864, 1280×720, 1280×800, 1280×1024, 1440×900, 1440×1050, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440
without calendar: 320×480, 800×480, 800×600, 1024×768, 1024×1024, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1440×900, 1440×1050, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440

The Shortest Month

preview
with calendar: 1024×1024, 1280×800, 1400×1050, 1440×900, 1680×1050, 1920×1080
without calendar: 1024×1024, 1280×800, 1400×1050, 1440×900, 1680×1050, 1920×1080

Kids And Dragon

"My drawings are mostly black-and-white and the year of the Black Dragon inspired me to start drawing another picture. Let the Dragon this year be friendly and playful ;)." Designed by Jelena Tљekulajeva from Estonia.

preview
with calendar: 1280×800, 1280×1024, 1366×768, 1440×900, 1680×1050, 1920×1080
without calendar: 1280×800, 1280×1024, 1366×768, 1440×900, 1680×1050, 1920×1080

Heart On A String

"For hopeless romantics that let others play with their heart." Designed by Jacob Giesler from USA.

preview
with calendar: 1280×800, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440
without calendar: 1280×800, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440

A Shadow’s Chance

"A nod at Groundhog Day! The artwork provided with a calendar has a winter color, because the groundhog sees his shadow which means six more weeks of winter. And the other (Green) has no calendar and no shadow which denotes anearly spring." Designed by Joseph Brooks from United States.

preview
with calendar: 1024×1024, 1280×800, 1280×1024, 1920×1080, 2560×1440
without calendar: 1024×1024, 1280×800, 1280×1024, 1920×1080, 2560×1440

Be Mine

"A cutsie calendar theme." Designed by Sandi | Pop Up Factory.com from Toronto, ON, Canada.

preview
with calendar: 1024×768, 1280×800, 1366×768, 1440×900, 1680×1050
without calendar: 1024×768, 1280×800, 1366×768, 1440×900, 1680×1050

It’s The Love Signal

"Let’s beam our love to the universe!" Designed by Lew Su-ann from Brunei Darussalam.

preview
with calendar: 800×600, 1024×768, 1152×864, 1280×800, 1280×960, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1920×1200
without calendar: 800×600, 1024×768, 1152×864, 1280×800, 1280×960, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1920×1200

Winter Church

preview
with calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200
without calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200

Lock Your Love

"February is the month of couples and love, so if you do have that one special person in your life! Then this would be the prefect month to show how much you love her or him :)." Designed by Rihards Gromuls from Latvia.

preview
with calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200
without calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200

Cyclops Encounter

"I am a big fan of the Odyssey. Cyclopses are awesome." Designed by Glorm from Canada.

preview
with calendar: 1024×1024, 1280×800, 1400×900, 1680×1050, 1920×1200
without calendar: 1024×1024, 1280×800, 1400×900, 1680×1050, 1920×1200

Gloomy Light

"Sometimes we ever feel’s like useless, moody, gloomy, that’s so sadly. Maybe it just like an old gloomy paper effect on my calendar template. But, we can change it with give it colors, this year our life will be not far from heaviness like our years before, just bright it up and make a colors in your moody days!" Designed by Dwi Prastika from Indonesia.

preview
with calendar: 1024×768, 1024×1024, 1280×800, 1440×900, 1680×1050, 2560×1440
without calendar: 1024×768, 1024×1024, 1280×800, 1440×900, 1680×1050, 2560×1440

Chillout

"Once upon a time, in a land far, far away, where you will not be online…" Designed by Chilid Interactive Agency from Poland.

preview
with calendar: 1280×800, 1366×768, 1440×900, 1680×1050, 2560×1440
without calendar: 1280×800, 1366×768, 1440×900, 1680×1050, 2560×1440

All You Need Is Love

"The Beatles said it best! Love is all you need." Designed by Allison Brown from Canada.

preview
with calendar: 1024×768, 1024×1024, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1080
without calendar: 1024×768, 1024×1024, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1080

Fight For You

"This valentine we should fight for the ones we love." Designed by Tonie Tannous from Lebanon.

preview
with calendar: 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440
without calendar: 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440

Ice Melted

"Ice melted is coming back soon." Designed by Yank from France.

preview
with calendar: 640×480, 800×600, 1024×768, 1280×1024, 1600×1200, 1920×1200
without calendar: 640×480, 800×600, 1024×768, 1280×1024, 1600×1200, 1920×1200

Load Time

"What Scott Adams means about load time." Designed by Fredrik Jensen from Norway.

preview
with calendar: 320×480, 640×480, 800×480, 800×600, 1024×768, 1152×864, 1280×720, 1280×800, 1280×960, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440
without calendar: 320×480, 640×480, 800×480, 800×600, 1024×768, 1152×864, 1280×720, 1280×800, 1280×960, 1440×900, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440

Love Is In The Air

preview
with calendar: 1024×1024, 1280×720, 1680×1050, 1920×1080, 1920×1200
without calendar: 1024×1024, 1280×720, 1680×1050, 1920×1080, 1920×1200

Join In Next Month!

Please note that we respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience throughout their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us, but rather designed from scratch by the artists themselves.

A big thank you to all designers for their participation. Join in next month!

What’s Your Favourite?

What’s your favorite theme or wallpaper for this month? Please let us know in the comment section below! We are looking forward to your submissions next month!

(il) (vf)

The Future Of Screen Typography Is In Your Hands

2012-01-30T11:46:15Z

We do more reading on the screen today than we did even a year ago. If we are ever to have a golden age of reading on the screen, this might be the start of it.

Tablets, Nooks and Kindles make buying a book or magazine for the screen almost unavoidable. With smartphones, we carry our reading material with us and enjoy instant Web access, enabling the reading experience to flow smoothly from one device to another. And those devices probably have stunning HD reader-friendly screens. Throw in companion services like Readmill and 24symbols, which allow us to share our reading experiences, and we have perfect screen-based access to all aspects of the written word.

So, why isn’t Web and screen typography keeping up?

Good Typography Cannot Be Handcrafted Anymore

In the past, typography was viewed as living only when it reached paper. Once a publication was edited, typeset and printed, it was done. Nothing changed after that. Good typography and readability were the result of skilled typesetters and designers.

Today, typography exists not only on paper but on a multitude of screens. It is subject to many unknown and fluctuating parameters, such as operating system, system fonts, the device and screen itself, the viewport and more. Our experience of typography today changes based on how the page is rendered, because typesetting happens in the browser.

In all of this, the browser is probably the most important part of the screen typography equation. Ironically, the lack of support in modern browsers is the single biggest hurdle to good Web typography.

Type-as-service providers are offering an alternative, with an increasing number of fonts that are fairly cheap and easy for us designers to use when typesetting text. But they, too, want better support of Web typography.

Identifying What’s Missing

Let’s look at some of the basic things that are missing from most, if not all, screen-reading experiences. When we say basic, we mean the things that you read and benefit from whenever you look at a book or magazine on paper or screen.

Kerning and spacing of individual characters;
Basic ligatures (fi, fl)
Other ligatures (fj, ffi, ffl, ffj and more);
Lining and old-style numerals;
True small-caps;
Replacing uppercase with small-caps for abbreviations;
Superscripted symbols such as © and ™;
Language-based quotation marks;
Correct replacement of en and em dashes, and the spacing around them;
Spacing of ! ( ) [ ] / ; :.

Doesn’t seem like much. Except that it is. The elements in this list are some of the things that help us read, process and understand information. They represent in many ways the difference between how a soulless machine would relate to text and how thinking, organic humans do it.

Those of you who were around during the desktop publishing boom might see similarities. In 1999, QuarkXPress did not support OpenType, InDesign was just born, and you had to use “expert” cuts of fonts to be able to work with small-caps and old-style numerals. So, we had to create workarounds for micro-typography — such as Apple-Script frameworks for QuarkXPress, where the script traversed documents and isolated hyphens, dashes, ligatures and small-caps abbreviations, replacing them with the correct typographical equivalents.

In many ways, 2012 is the new 1999. We have the freedom to work with any font we like via the @font-face selector. But our main tool, the browser, does not have any OpenType features to speak of. We have to create workarounds.

Can we use the same type of solution that we used back in the old days of print?

We say yes.

Time to Fix the Problem

We researched existing JavaScript libraries and found a ton of great stuff. But none focused on micro-typography as a whole. When we started the project, we laid out five clear goals:

Correct micro-typography, including as many of the elements in the list above as possible;
Degrades so that devices without @font-face or JavaScript support are not negatively affected;
OS independence;
Browser independence;
Correct markup;

We named the project OpenTypography, and we named the solution Typesetter.js.

JavaScript and @font-face and styles disabled.

JavaScript disabled.

JavaScript enabled and @font-face-enhanced Web typography.

Typesetter.js

Typesetter.js has two ingredients: a JavaScript and a custom font file

The JavaScript traverses the DOM, finding and replacing things like quotation marks, ligatures, en and em dashes, ellipses and more. It also finds ©, ®, ™ and wraps them in sup tags.

Most importantly, it finds uppercase abbreviations and wraps them in abbr tags, giving us true small-caps. This is possible thanks to a bit of CSS and the services of font-on-demand houses such as Fontdeck and Typekit.

Finding, replacing and wrapping.

Here is a rundown of how Typesetter.js works.

1. The JavaScript

The code is divided into two parts, giving you the option to use the small-caps replacement. But let’s start by looking at how the small-caps replacement works.

Here is the sample HTML that we will use to explain what the script actually does:

<p class="typo">The fine details of screen typography can be improved with JS-scripts and CSS.</p>

<p class="typo">That is the goal of "Typesetter.js" — an open-source solution by Andreas Carlsson and Jaan Orvet © 2011</p>

Our sample text rendered with Georgia and browser-native typographic features.

In this text, we want to find all-uppercase words.

The code starts by getting all elements of a user-chosen class, in this case .typo. These elements are stored in an array.

mainArray[0] = 'The fine details of screen typography can be improved with JS-scripts and CSS.';
mainArray[1] = 'That is the goal of "Typesetter.js" — an open-source solution by Andreas Carlsson and Jaan Orvet © 2011';

Each array element is then looped one at a time and split into a sub-array containing each word as a string.

subArray[0] = 'The';
subArray[1] = 'fine';
subArray[2] = 'details';
subArray[3] = 'of';
subArray[4] = 'screen';
subArray[5] = 'typography';
subArray[6] = 'can';
subArray[7] = 'be';
subArray[8] = 'improved';
subArray[9] = 'with';
subArray[10] = 'JS-scripts';
subArray[11] = 'and';
subArray[12] = 'CSS.';

Each item in the sub-array is tested to see whether the character count of the word and the count of the uppercase letters (ASCII values between 65 and 90) are equal. If so, the word is treated as an uppercase abbreviation.

The test actually checks the first and last character of the sub-array item. If they are uppercase, then it is fair to assume that the whole word is an uppercase abbreviation, and then we would run a more specific test. Here is what the script returns from our sample text:

“The” = false (do not run specific test)
“details” = false (do not run specific test)
“Andreas” = false (do not run specific test)
“CSS.” = true (run specific test)
“JS-scripts” = true (run specific test)

As you can see, the test also spots uppercase words when they are used with a hyphen or have an trailing period.

Our special uppercase test creates an index array that holds the indexes of the uppercase words (i.e. it identifies where in the full sentence they occur). After the whole sub-array is tested, we would have the sub-array and the index array containing the all-uppercase indexes.

indexArray[0] = '10';
indexArray[1] = '12';

Now that we know where all of the uppercase words are in the string (i.e. sentence), we can prepare them for small-caps replacement.

Small-caps replacement is done by extracting the word, converting the letters to lowercase, wrapping the whole word in an abbr tag and inserting it into the sub-array again.

subArray[0] = 'The';
subArray[1] = 'fine';
subArray[2] = 'details';
subArray[3] = 'of';
subArray[4] = 'screen';
subArray[5] = 'typography';
subArray[6] = 'can';
subArray[7] = 'be';
subArray[8] = 'improved';
subArray[9] = 'with';
subArray[10] = 'js-scripts';
subArray[11] = 'and';
subArray[12] = 'css.';

Now we only need to convert that array into a string and replace the original HTML element with the new small-caps-ified HTML element.

Before:

<p class="typo">The fine details of screen typography can be improved with JS-scripts and CSS.</p>

<p class="typo">That is the goal of "Typesetter.js" — an open-source solution by Andreas Carlsson and Jaan Orvet © 2011</p>

After:

<p class="typo">The fine details of screen typography can be improved with js-scripts and css.</p>

<p class="typo">That is the goal of "Typesetter.js" — an open-source solution by Andreas Carlsson and Jaan Orvet © 2011</p>

Our sample text set with Tanger Serif from Typolar, using the @font-face rule. Uppercase words are now wrapped in abbr tags.

Nice and neat. Now for the second part of the script, the one that replaces quotation marks, ligatures, en and em dashes, and ellipses; renders characters such as © in superscript; and converts numerals to old style by wrapping them in a user-defined class.

The code is fairly self-explanatory:

var charReplacements = function() {

/* Quotationmarks
‹ = ‹
› = ›
« = «
» = »
‘ = ‘
’ = ’
“ = “
” = ”
*/

var quoteCharClose = "»";
var quoteCharOpen = "«";
var triggerID = "#display";
var smallcapsClass = "old-style"

$(triggerID).each(function() {
$(this).find('*').each(function() {
	if (($(this).html()) != 0) {
		if (($(this).find('img').length) === 0) {
		// Performs replaces on any element that is not an

	  	$(this).html( $(this).html().replace(/(\.\.\.(\.)?)|(\.\s\.\s(\.\s)?|(\.\.(\.)?))/g, "…"));
		// Finds and replaces .. | ... | .... with an elipsis

		$(this).html( $(this).html().replace(/fl/g, "ﬂ"));
		// Replaces fl with ligature

		$(this).html( $(this).html().replace(/fi/g, "ﬁ"));
		// Replaces fi with ligature

		$(this).html( $(this).html().replace(/\s-\s/g, " ‒ "));
		// Replaces | space en-dash space | with: | space em-dash space |

    		$(this).html( $(this).html().replace(/"([\s\.\,])/g, quoteCharClose + "$1"));
		// Replaces | " space | with | » space |

		$(this).html( $(this).html().replace(/\s"/g, " " +  quoteCharOpen));
		// Replaces | space " | with | space « |

		$(this).html( $(this).html().replace(/(\d+)(?=((?!).)*(-tag with the .old-style-class but ignores digits within a a-tag. Read full explanation here http://www.phpbuilder.com/board/archive/index.php/t-10221442.html

		if ( (($(this).children().length) === 0) || ($('this:contains("u00a9")')) ) {

			$(this).html( $(this).html().replace(/\u00a9/g, "

^©

") );
			// Superscripts (c)

			$(this).html( $(this).html().replace(/\u00ae/g, "

^®

") );
			// Superscripts (R)
		};
	};
   };

});
});
};

Most of the typographic details in the script are declared in the variables at the beginning. This is the beginning of a “settings” type of solution that we are working towards building.

”Settings” is a pretty important feature because typographic rules change depending on the language; for example, quotation marks and the spacing of em dashes. English, French and German each use different quotation marks, so the designer needs to be able to easily change the typographic settings.

Now we have pretty decent typography in our example:

<p class="typo">The fine details of screen typography can be improved with js-scripts and css.</p>

<p class="typo">That is the goal of «Typesetter.js» — an open-source solution by Andreas Carlsson and Jaan Orvet

^©

 2011</p>

Our sample text with much better micro-typography than what the browser supports natively.

We have covered a lot, but the most important part is still to come!

2. The Custom Font File

Let’s move on to the font file itself.

Putting Small-Caps and Old-Style Numerals in Place

Our text is now wrapped in classes; we can use CSS to set it in small-caps and old-style numerals. Since no browser supports OpenType, we cannot use the regular font-variant: small-caps rule, because this would only shrink the uppercase letters, resulting in thinner and lighter characters.

The font-variant: small-caps rule merely shrinks uppercase letters, resulting in thinner and lighter characters. To get real small-caps, we have to use our custom subsetted font file.

The font file we need is a subset of the regular cut; in it, the uppercase characters have been replaced with small-caps characters, and the lining numerals have been replaced with old-style numerals. (Remember the days of “expert set fonts”? It’s a bit like that. If you don’t remember, you’re better off for it.)

We can now specify in our CSS files to use the subset for abbr tags. This will give us true small-caps on the Web and allow us to choose between old-style and lining numerals in our text.

abbr {
   font-family: "Tanger Serif Expert", Cambria, Georgia, serif;
   letter-spacing: 0.15em;
   text-transform: lowercase;
   font-variant: small-caps;
   font-weight: 650;
}

Get the Font File

Fontdeck supports the OpenTypography project by kindly serving subsetted fonts in addition to its main fonts.

Other type services and foundries make subsets available as well. We keep an updated list with examples at OpenTypography.

Create Your Own Font File

If you have experience working with fonts, then creating your own subsetted font files is fairly straightforward.

Open the regular cut in your favorite font editor. Copy the small-caps glyphs, and paste them where the uppercase and lowercase glyphs are. Copy the old-style numerals to where the lining numerals are. Once this is done, you only have to generate a new font file and convert it to all the required Web font formats: TTF, OTF, WOFF, EOT, SVG.

You can easily create your own subsetted custom font file. Just replace uppercase and lowercase glyphs with the small-caps versions and the lining numerals with the old-style ones.

Now you have your own custom Web font ready to be used with Typesetter.js

But be sure to check the license to make sure you are permitted to adjust the font file and to embed it via the @font-face selector.

Get Involved In The Future Of Typesetter.js

We are currently testing Typesetter.js in our Dropbox- and Markdown-based CMS, Skrivr, but Typesetter.js is at a very early stage and needs more development in order to work seamlessly with all of the great things that the Web and digital-screen community is creating.

Mainly, we want it to be faster. Another question we’re facing is whether to use RegEx or not. Also, how do we create a better solution for targeting parts of the DOM and isolating those that shouldn’t be replaced?

You’ll find all the latest information, examples, code and more at OpenTypography, which is also the best place to get in touch and let us know if you are interested in bringing better typography to the screens around us.

(al)

Limiting The Visibility Of WordPress Posts Via Usernames

2012-01-27T15:54:46Z

Controlling who is able to view a post is a simple task once the system is established. Limiting access to certain users has several applications, such as enabling a design studio to distribute artwork to its various clients, or enabling a small school to arrange for homework to be posted online using a cheap and easy solution.

The easiest method to get this system working is to make the recipients of the information “subscribers” (since they need not be able to post) and the distributors of information “authors” (since they should only be able to edit their own posts). This system eliminates several headaches for the webmaster by managing who has access to particular posts. The username would be used to identify who is allowed to view certain posts, since it is unique and, for the most part, constant.

The Basics

What Will You Need?

WordPress 3.1 or later
Members of various roles
The ability to modify your theme’s files
Basic knowledge of PHP and MySQL

What Is a Username?

In general, a username is a means by which to identify and verify a user. It is not the only way to identify a user, but remembering a username is easier for the person logging in than having to remember a random user ID. A username can be made unique to an individual, unlike a person’s name or email address (family members may share the same name, or even the same email address). This ease of use and uniqueness is why usernames are used on most websites that require people to sign up in order to access the website or certain of its features.

To WordPress, a username is means of identifying a user. Paired with a password, a username enables someone to access their profile and, depending on their permissions within WordPress, to access to the administrative pages of the website. A username can be used for many functions in the operation and management of a website, such as karma, prestige, user roles and expulsion.

A WordPress username is unique and impossible for the average user to change. Thus, the system is a potentially reliable means of identifying individuals. This reliability is important for a system in which a post must be visible to only a few people. The permissions of a post should not alter merely because someone has changed their name or email address.

The user page in a WordPress installation. Note that “Usernames cannot be changed.”

Setting Up The Back End

In order for an author to be able to set permissions for visibility, a method of selecting users must be set up on the post editing page. We could accomplish this by one of several methods, one of the easiest and most efficient of which is to create a meta box (or widget) in the post editing page that allows the author to add custom information, as required by a theme or plugin. This information enables us to tell the theme which members should have viewing rights to particular posts.

A Basic Custom Meta Box

Justin Tadlock’s article “How to Create Custom Post Meta Boxes in WordPress” explains how to create meta boxes, and we’ll reuse that code here.

Let’s assume we’re dealing with a website for a music school named “Smashing Magazine’s Fancy Flautists.” We will use the name smashing_flautist_access in the code for the back end to distinguish it from other custom functions. Justin’s code is a great starting point for this project, but it needs a little customization for our purpose. Place the following code in your theme’s functions.php, and modify the various labels according to your project.

/* Fire our meta box setup function on the post editor screen. */
add_action( 'load-post.php', 'smashing_post_meta_boxes_setup' );
add_action( 'load-post-new.php', 'smashing_post_meta_boxes_setup' );

/* Meta box setup function. */
function smashing_post_meta_boxes_setup() {

	/* Add meta boxes on the 'add_meta_boxes' hook. */
	add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );

	/* Save post meta on the 'save_post' hook. */
	add_action( 'save_post', 'smashing_flautist_access_save_meta', 10, 2 );
}

/* Create one or more meta boxes to be displayed on the post editor screen. */
function smashing_add_post_meta_boxes() {

	add_meta_box(
		'smashing-flautist-access',			// Unique ID
		esc_html__( 'Post Viewing Permission', 'smashing_flautist' ),		// Title
		'smashing_flautist_access_meta_box',		// Callback function
		'post',					// Admin page (or post type)
		'normal',					// Context
		'default'					// Priority
	);
}

/* Display the post meta box. */
function smashing_flautist_access_meta_box( $object, $box ) { ?>

	<?php wp_nonce_field( basename( __FILE__ ), 'smashing_flautist_access_nonce' ); ?>

	<p>
		<label for="smashing-flautist-access"><?php _e( "Enter the username of the subscriber that you want to view this content.", 'smashing_flautist' ); ?></label>
		<br />
		<input class="widefat" type="text" name="smashing-flautist-access" id="smashing-flautist-access" value="<?php echo esc_attr( get_post_meta( $object->ID, 'smashing_flautist_access', true ) ); ?>" size="30" />
	</p>
<?php }

With Justin’s code, modified for this project, we should have a custom meta box that looks like this:

A basic meta box positioned below the post editing box.

Adding Ease to the Selection

This box can be used as is, and the author would simply input the members who they want to allow to view a post. This would work well if each author had very few usernames to remember; but if the author has long list of usernames to choose from, then a list of members would have to be displayed, and there would have to be a system that allows the authors to choose members from the list. Add the following code to the area just below the original box, just after the closing paragraph tag, to display a list of users with their names, along with radio buttons to grant one of the users access to the current post.

<table class="smashing-flautist-access">
<tr align="left">
<th>Username</th>
<th>    </th>
<th>Visiblity</th>
<th>    </th>
<th>Name</th>
</tr>
<?php
global $post;
	$users = get_users('role=subscriber');
	foreach ($users as $user) {
			$user_info = get_userdata( $user->ID );
			if(get_post_meta( $object->ID, 'smashing_flautist_access', true ) == $user->user_login) $ifchecked = 'checked="checked" ';
			echo "<tr>";
			echo "<td>$user->user_login</td><td>    </td>";
			echo "<td align=\"center\"><input type=\"radio\" name=\"smashing-flautist-access\" id=\"smashing-flautist-access\" value=\"$user->user_login\" " . $ifchecked ."/></td><td>    </td>";
			echo "<td>$user_info->last_name, $user_info->first_name</td><td>    </td>";
			echo "</tr>";
			unset($ifchecked);

	} ?></table>

If everything goes well, you should end up with a box underneath the post editor that looks similar to the image below. The form containing the radio buttons gets a list of users that are listed as subscribers and makes the selection of the student with viewing permissions easy, all without the post’s author having to remember any usernames.

A meta box that contains a method to select the particular name and information of each user.

Saving the List

Now that we have generated a list that makes it easy for the authors to pick which members they want to be able to view particular posts, we have to create a system to add the list to WordPress’ MySQL database so that we can retrieve it later. We also need a way to tell WordPress to update this list of usernames in case the author decides later to add or remove someone from a particular post’s list of authorized viewers. The code provided by Justin does excellent work; place his code below in your theme’s functions.php, just after the function that sets up the custom meta box.

/* Save post meta on the 'save_post' hook. */
add_action( 'save_post', 'smashing_flautist_access_save_meta', 10, 2 );

/* Save the meta box's post metadata. */
function smashing_flautist_access_save_meta( $post_id, $post ) {

	/* Make all $wpdb references within this function refer to this variable */
	global $wpdb;

	/* Verify the nonce before proceeding. */
	if ( !isset( $_POST['smashing_flautist_access_nonce'] ) || !wp_verify_nonce( $_POST['smashing_flautist_access_nonce'], basename( __FILE__ ) ) )
		return $post_id;

	/* Get the post type object. */
	$post_type = get_post_type_object( $post->post_type );

	/* Check if the current user has permission to edit the post. */
	if ( !current_user_can( $post_type->cap->edit_post, $post_id ) )
		return $post_id;

	/* Get the posted data and sanitize it for use as an HTML class. */
	$new_meta_value = ( isset( $_POST['smashing-flautist-access'] ) ? sanitize_html_class( $_POST['smashing-flautist-access'] ) : '' );

	/* Get the meta key. */
	$meta_key = 'smashing_flautist_access';

	/* Get the meta value of the custom field key. */
	$meta_value = get_post_meta( $post_id, $meta_key, true );

	/* If a new meta value was added and there was no previous value, add it. */
	if ( $new_meta_value && '' == $meta_value )
		{
		add_post_meta( $post_id, $meta_key, $new_meta_value, true );
		$wpdb->query($wpdb->prepare("UPDATE $wpdb->posts SET post_status = 'private' WHERE ID = ".$post_id." AND post_type ='post'"));
		}
	/* If the new meta value does not match the old value, update it. */
	elseif ( $new_meta_value && $new_meta_value != $meta_value )
		{
		update_post_meta( $post_id, $meta_key, $new_meta_value );
		$wpdb->query($wpdb->prepare("UPDATE $wpdb->posts SET post_status = 'private' WHERE ID = ".$post_id." AND post_type ='post'"));
		}
	/* If there is no new meta value but an old value exists, delete it. */
	elseif ( '' == $new_meta_value && $meta_value )
		{
		delete_post_meta( $post_id, $meta_key, $meta_value );
		$wpdb->query($wpdb->prepare("UPDATE $wpdb->posts SET post_status = 'public' WHERE ID = ".$post_id." AND post_type ='post'"));
		}
}

The three MySQL queries are in place to prevent unauthorized users from viewing protected posts and to hide the posts from the RSS feeds. The first query runs only when new data populates the previously empty custom field, while the second query runs only when the data in the custom field has changed. The third query runs only if the custom field is emptied, and it sets the post’s visibility back to “Public.” All three are protected from SQL injection attacks by using $wpdb->prepare() to validate the data entered into the username form field.

If you don’t like that WordPress precedes the post’s title with the word “Private,” then add the following code to your theme’s functions.php file. This custom function is called when your theme would display a post’s title; it finds any instance of the words “Protected” or “Private” at the beginning of the title and removes them. In the core of WordPress’ programming, the function get_the_title() adds those words if a post’s visibility is restricted and the person viewing is not an administrator. What the following code does is send a message to the action that get_the_title() hooks into, telling it to remove the terms “Protected: ” and “Private: ” from the title. So, you can set a post’s title to begin with either term, and the title will not be altered; this code only affects WordPress’ ability to add to your title.

function smashing_title_trim($title) {
	$title = attribute_escape($title);
	$needles = array(__('Protected: '),__('Private: '));
	$title = str_replace($needles,'',$title);
	return $title;
}
add_filter('protected_title_format','smashing_title_trim');
add_filter('private_title_format','smashing_title_trim');

To allow users at the subscriber level to see private posts, you have to give them that capability. As it happens, some of the code we’ll be using later frees us from having to worry about users at the subscriber level seeing the posts of others.

$subRole = get_role( 'subscriber' );
$subRole->add_cap( 'read_private_posts' );

You can also grant users at the subscriber level permission to view private pages, in case you want a dedicated page of information that subscribers should know.

$subRole->add_cap( 'read_private_pages' );

Setting Up The Front End

Now that we have a way to add members to the list of people who can view a particular post, we have to modify our theme to use this data, and to actually control the visibility of each post based on this list. First, we need a way to get the username of the person who can view a post. Secondly, we would compare the username of the member with viewing permissions to the user who is currently logged in. Finally, we would make the theme display either the post in the loop or an error message (or perhaps nothing at all).

Place this code just after The Loop starts. It goes in single.php, category.php and index.php if you will be displaying posts on the home page.

<?php
/* Get the post's acceptable viewer. */
		$flautist_access = get_post_meta($post->ID, 'smashing_flautist_access', true );
/* Get the post's current viewer, if he or she is logged in. */
		if(is_user_logged_in()) {$current_flautist = $current_user->user_login;}
/* See if the acceptable viewer and the current viewer are the same */
		if($flautist_access == $current_flautist || current_user_can('author') || current_user_can('editor') || current_user_can('administrator'))
			{echo ''; ?>

Place this code just before the loop ends. Here is where you can show an error message telling the user that they may not view this post. Or you could leave this code as is to make it appear as though the current visitor is not missing anything.

<?php } else { echo ''; } ?>

This is what a hidden post looks like to the public or to a user who is not logged in. They would see what appears to be an error message and are redirected away from the post.

If a person is not logged in and tries to view a restricted post, they would get an error message.

If a user is logged in but not allowed to view a restricted post, they would see either nothing or an error message specific to members.

If a member is logged in and authorized to view a protected post, then they would see the post itself.

Conclusion

Being able to control who can view individual posts is a useful feature with a wide variety of applications. Third-party software can natively do this, but WordPress is widely supported and documented, which means that any security holes that might allow unauthorized users to view restricted posts would be shut in a future update. Plus, it allows you to run an actual blog next to posts with limited visibility. This system could be used by administrators to distribute personalized content, by professionals to send files to clients, or by bloggers to restrict the visibility of certain posts to certain members.

Enabling an author to control who can view their posts can help them tailor the blog’s content to the needs or tastes of certain users. Ultimately, you will have to factor in the purpose and content of your website when deciding whether to use this method. It’s not for everyone, but it suit the needs of owners of small websites who want to deliver certain content to certain people.

Resources

“Function Reference/add meta box,” WordPress Codex
“Function Reference/get users,” WordPress Codex
“Roles and Capabilities,” WordPress Codex
“Class Reference/wpdb,” WordPress Codex
“How To Create Custom Post Meta Boxes In WordPress,” Justin Tadlock

(al)

The UX Research Plan That Stakeholders Love

2012-01-26T15:45:51Z

UX practitioners, both consultants and in house, sometimes conduct research. Be it usability testing or user research with a generative goal, research requires planning. To make sure product managers, developers, marketers and executives (let’s call them stakeholders) act on UX research results, planning must be crystal clear, collaborative, fast and digestible. Long plans or no plans don’t work for people. You must be able to boil a UX research plan down to one page. If you can’t or won’t, then you won’t get buy-in for the research and its results.

This article addresses one key aspect of planning UX research: the one-page plan document. Before we get to that, we’ll briefly discuss the benefits of research planning and identify the audience of a research planning document.

(Image: Patrick Hoesly)

A word about stakeholders. A stakeholder in the UX world is a code name for the people who UX practitioners work with. These are our clients, whether internal or external to our organization. These are people who need to believe in what we do, act on research results, and fund and sponsor future research. We all have a stake in product development. They have a stake in UX research.

The Benefits Of Research Planning

Very generally speaking, UX research can answer two types of questions:

What’s useful?
What do people need? Who is the target audience?
What’s usable?
Does the design work for people, and how it can be improved?

Dozens of research methodologies could be implemented to answer these and more specific questions, and it is up to designers, researchers and their teams to decide what works best for them and when is the right time to answer their questions.

Here are the benefits of planning UX research:

Get a better feel of stakeholders.
A written plan helps you identify what works and doesn’t work for people, and what questions they are trying to answer.
Engage stakeholders.
A study plan ensures they are properly involved with the study and its results. If there’s no written plan, then there’s a greater chance that stakeholders won’t feel engaged.
Writing things down helps you.
When you put things in writing, they look very different than how you imagined them when they were just thoughts in your head. Always have a written study plan, even if you don’t share it with anyone else.

Now, let’s quickly identify the target audience for the research planning document.

Who Are You Planning For? Who Are The Stakeholders?

As with every product or service, the best offering comes from carefully identifying the target audience, their needs and their wants. Different UX research stakeholders are interested in different aspects of a research plan:

Product managers and software engineers are mostly interested in the study’s goal, research questions and schedule. In some cases, they are also interested in the criteria for participants. These stakeholders are usually interested in goals and questions because these determine the content of the study and its focus. They are interested in the schedule to make sure it enables them to make timely design, business and development decisions. Criteria for participants interest them when the product targets a very specific demographic and they want to make sure participants are representative of that demographic.
Managers and executives are probably interested in the study’s goal and the overall cost of the study, because they are likely sponsoring the study. Usually, their bandwidth does not allow them more than that.
You! The plan is mostly for you. As soon as you put your thoughts in writing, something happens, and you find holes in them. These holes help you improve the plan. A written plan also helps you focus and better prepare for the study. The fact of the matter is that if you can’t boil your plan down to a page, you probably don’t really understand it.

Now that we’ve discussed why a planning document is important and who it is for, let’s get to the nitty gritty of the document.

The Plan That Stakeholders Love: The One-Pager

The users of a research plan love brevity and appreciate succinct definitions of what will happen, why, when and with whom. Here are the sections that go in a one-page research plan:

Title
The title should combine the thing you’re studying and the methodology; for example, “Monster.com field study” or “XYZ Phone data-entry usability test.” Sometimes mentioning the target audience of the study is also appropriate; for example, “Whitehouse.com news page interviews with senior citizens.”
Author and stakeholders
State your full name, title and email address on one line. After you get the stakeholders’ buy-in for the plan, add their details as well — the research belongs to everyone now.
Date
Update it whenever the plan is updated.
Background
Describe what led to this study. Discuss the recent history of the project. Be brief, no more than five lines.
Goals
Briefly state the high-level reason (or reasons) for conducting this study. Try to phrase it in one sentence. If that wouldn’t make sense, create a numbered list of very short goal statements. If you have more than three to four goals, you are either aiming too high (meaning you have too many goals) or repeating yourself.
Research questions
These are the specifics, the core of your plan. Provide a numbered list of questions that you plan to answer during the study. It is extremely important that your stakeholders understand that you will not necessarily be asking the study participants these questions. As a rule of thumb, have no more than seven to ten questions, preferably around five. Later on, you will construct your study script to answer these questions. An effective way to think about research questions is to imagine that they are the headings in the study’s summary.
Methodology
In an academic environment, this section has one primary goal: to provide as many details as other researchers need in order to repeat the exact same study. In practice, the goal of the methodology section is to briefly inform the stakeholders of what will happen, for how long and where.
Participants
Provide a list of the primary characteristics of the people you will be recruiting to participate in the study. Have a good reason for each and every characteristic. If you have two participant groups, describe both groups’ characteristics in lists or in a table. Append a draft form that you’ll use to screen participants.
Schedule
Inform stakeholders of at least three important dates: when recruiting starts, when the study will take place, and when they can expect results. Large research projects require more scheduling details. For example, if the study involves travel to another city or country, more dates might be required for on-site preparation and meetings or for analysis workshops.
Script placeholder
When a full study script is ready, it will appear under this title. Until then, all you need is a heading with a “TBD” indication.

A Sample UX Research Plan

XYZ Phone Data-Entry Usability Test

By John Smith-Kline, Usability Researcher, jskline@example.com

Stakeholders: Wanda Verdi (PM), Sam Crouch (Lead Engineer)

Last updated: 13 January 2012

Background
Since January 2009, when the XYZ Phone was introduced to the world, particularly after its market release, journalists, bloggers, industry experts, other stakeholders and customers have privately and publicly expressed negative opinions about the XYZ Phone’s keyboard. These views suggest that the keyboard is hard to use and that it imposes a poor experience on customers. Some have claimed this as the main reason why the XYZ Phone will not succeed among business users. Over the years, several improvements have been made to data entry (such as using horizontal keyboards for most features), to no avail.

Goals
Identify the strengths and weaknesses of data entry on the XYZ Phone, and provide opportunities for improvement.

Research questions

How do people enter data on the XYZ Phone?

What is the learning curve of new XYZ Phone users when they enter data?

What are the most common errors users make when entering data?

Methodology
A usability study will be held in our lab with 20 participants. Each participant session will last 60 minutes and will include a short briefing, an interview, a task performance with an XYZ Phone and a debriefing. Among the tasks: enter an email subject heading, compose a long email, check news updates on CNN’s website, create a calendar event and more.

Participants
These are the primary characteristics of the study’s participants:

Business user,

Age 22 to 55,

Never used an XYZ Phone,

Expressed interest in learning more about or purchasing an XYZ Phone,

Uses the Web at least 10 hours a week.

[Link to a draft screener]

Schedule

Recruiting: begins on November 12

Study day: November 22

Results delivery: December 2

Script
TBD

Recap

A short plan that you and your stakeholders prepare together is key to a successful start of a UX research project.

Boil down your collective knowledge, agreements and understanding of what will happen, why, with whom and when.
Set the right expectations among stakeholders.
Try to keep the plan to one page.
Secure buy-in for the UX research by making it a team effort.
The core of the plan is the list of questions you are trying to answer. Choose the right ones.

Happy planning!

(al) (fi) (il)

How To Deliver Exceptional Client Service

2012-01-26T12:13:51Z

We often hear companies, including Web agencies, boast about how they provide exceptional client service. But how do they define exceptional?

Consider this scenario. You are hired to design and develop a new website for a retail client. The client loves the design, and the pages you develop use the latest in HTML5, CSS3 and responsive design, resulting in a website that works wonderfully across browsers and devices. The e-commerce features of the new website help the client significantly increase their online sales, and the entire project is delivered on time and on budget. Now, is this “exceptional” client service? I don’t think it is.

When the client hired you, they expected that you would design and develop a great website. They also expected it would be done according to the timeline and budget set during the planning stages of the project. As successful as this project may have been for both you and the client, in the end, you did exactly what you were hired to do. You did your job.

Just Doing Your Job Vs. Delivering Exceptional Service

Nothing is wrong with “just doing your job.” In many cases, that alone is a tall order. So, while doing what you were hired to do is nothing to be ashamed of, it is also not exceptional — nor will it set you apart. There will always be other agencies or designers that will be able to do the work as well as you can — and there will certainly be someone willing to do it cheaper! The service you provide is how you can truly differentiate yourself.

Exceptional client service is about going beyond what is realistically expected of you. It is about surprising, and often delighting, customers, turning them into enthusiastic referral sources and lifelong clients who stick with you not only because you do great work at a fair price, but because the value you bring to them goes far beyond just your products.

In this article, I’ll detail a few of the ways that I have tried to take my own client service to the next level and deliver a better experience, starting with the most important aspect: the relationships that you establish with the clients who hire you.

There is a difference between doing what you were hired to do and delivering a superheroic level of service. (Image: JD Hancock)

Creating Real Relationships

Here’s a quick exercise. Write down your five most important clients (how you define “important” is up to you). Then, write down as many things you know about those clients that have nothing to do with their business or the work you have done for them. What are their hobbies or passions? How many kids do they have? How old are those kids, and what are their names? Where do they like to vacation? Things like that.

So, how long is your list? If you’re like most people I speak with, probably not very long at all. We learn everything we can about a client’s business, but we often fail to discover anything substantial about our clients as people. If we do not engage with our clients in a real, personal way, then we are just another vendor — and vendors are easily replaceable with better cheaper options. However, clients are much less likely to consider replacing people with whom they have real relationships.

So, how do you start learning more about your clients? Simple: ask them questions about themselves and their lives, not just about their business.

Asking Real Questions

When I give this advice to others, it is often met with some apprehension. Asking someone about their business goals is easy. Asking them about their life outside of the office is harder. We often avoid getting personal for fear of offending the person or saying the wrong thing; but by being overly cautious, we miss the chance to create a real relationship.

Whenever I get nervous about getting too personal with a client, I remind myself of a story. A few years ago, I had the privilege to work on the website for the Tori Lynn Andreozzi Foundation. This non-profit foundation was named after a young girl who, walking home from school one afternoon, was struck by a drunk driver. Tori survived but was forever changed. Today, she is in a minimally conscious state, unable to walk, speak or eat.

In one of my first meetings with this client, I sat down with the head of the foundation, Tori’s mother, Cathy. I began the conversation simply by asking her, “How is Tori doing today?”

Cathy smiled and answered that Tori was doing well. We had our meeting and discussed the website and the project. As we were wrapping up, Cathy thanked me for asking her about Tori. She explained that so many people avoid asking about her daughter, fearing the news would be bad or that Cathy would be upset by the question. The truth is that, even though Tori has bad days, Cathy always enjoys talking about her daughter and was very happy to be asked about her. By asking Cathy how her daughter was doing, I showed her that I cared about more than just the project.

The website for the Tori Lynn Andreozzi Foundation

Today, Cathy is one of my favorite people to speak with, and we begin every conversation by asking how each other’s children are doing. We have much more than a great client-vendor relationship, all because I asked a real question, honestly cared about the answer, and created a real, human connection in the process. Had I been too afraid to ask that question, I might never have been able to build the relationship that I have now.

Don’t be afraid to ask your clients real questions. If they don’t want to answer you, they won’t. But for those who do (and you will find that most, if not all, of your clients will be happy to have a real conversation that has nothing to do with business), you will be well on your way to building real relationships.

Participate In More Than Just Projects

Another way to build a relationship with a client that goes beyond the project is to participate in their events. If the client runs a non-profit organization, they might have fundraisers or similar events that offer you an opportunity to support their cause and nurture the relationship. Go to these events and participate. As a bonus, you will also be helping a worthwhile cause.

Not all of your clients will have fundraising events, but they might invite you to holiday parties and other gatherings. Take advantage of these opportunities to interact with your clients outside of a normal business setting. It will go a long way to reinforcing those real relationships that you are trying to create and show that you are more than just another vendor.

Similarly, consider inviting clients to some of your events to show that you view them as more than just a source of business. When they arrive, greet them warmly and enjoy their company, leaving business talk for another day.

Help Them With Services That You Do Not Provide

Clients may hire you to design and develop a Web presence for them, but in the course of the project you will often discover that they need other services that you do not provide. By listening to their needs, you might learn that they have issues with their payroll company or their accountants or some other aspect of their business.

Look to your own business and the vendors you use. There may be a service or company that you have had success with that you could recommend. Also look to your other clients to see whether they offer services that fit. If appropriate, set up a lunch meeting between you, the client with the need and the client that might be able to fill that need. Not only will you be taking two clients out for lunch, you will hopefully be helping them both by making a valuable connection between the two companies.

When a client can say, “I hired this company to design our website and they ended up helping us revamp our entire payroll system!” you position yourself as much more than just their “Web team” — you show that you are a valued business resource and a trusted advisor.

Pick Up The Phone

Good communication is key to any relationship. Still, judging from the number of clients I speak with who are unhappy with their current Web team — not because they do a poor job, but because they are unresponsive — quality communication is not always a given.

Regularly updating your clients by email is important, but also pick up the phone every now and then, so that you become more than just that distant person behind those electronic updates. By hearing your voice, clients will feel more connected to you and the project. It also shows them that you value them enough to take the time to make a personal call, and it gives you a chance to talk about something other than business.

Regular phone calls allow you to have real conversations with clients, communicating at a personal level that email and other electronic updates do not allow for. (Image: opensourceway)

Face The Bad Times Head On

Have you ever had to share bad news with a client, but rather than pick up the phone to discuss the issue, you waited and sent an email at 5:15 pm on a Friday? By doing this, you may have bought yourself a few more days before having to face the client’s worried questions, but you also damage the relationship by hiding behind an email. It also means that the client will read the bad news first thing on Monday morning; definitely not a good start to their week, and definitely not the way to treat a valued relationship.

Here’s a secret: clients do not expect you to be perfect. They do, however, expect you to be honest. When something goes wrong, let them know quickly so that they are not blindsided by the issue later on. And never deliver bad news by email. Picking up the phone to discuss the news lets you reassure the client and answer any questions they may have. An after-hours email certainly won’t do that for them.

If the matter is handled correctly, the client will not remember that something went wrong. They will remember that you were honest and kept them apprised of the state of the project, even when it did not go according to plan.

Be Thankful And Show Appreciation

When was the last time you thanked a client for working with you? How did you do it? Did you send a basket of cookies or chocolate with a generic “thank you” message, or did you do something more personal?

Too often, we fail to even thank our clients for their business. We are so keen to finish a project and move on to the next one that we forget to properly show our appreciation.

While a basket of sweets and a generic message is better than nothing, consider sending a personal, handwritten thank-you note.

Handwritten letters have become all but extinct these days. With the rise of electronic communication such as email, social networks and text messaging, so few people take the time and effort to actually write a letter. The gesture of a personal letter will delight and surprise your client, not only because you have thanked them, but because the way you did so was personal, memorable and the perfect cap to a successful project.

A thankful, personal handwritten card is a great way to cap off a successful project. (Image: irrezolut)

How About You? Do You Deliver Exceptional Client Service?

I hope this article starts a conversation. How do you deliver exceptional client service? What tips can you share so that others can delight their own clients and offer them value beyond just products?

In this industry, we are always eager to share the latest tips and tricks on CSS, HTML, JavaScript, PHP or some other Web technology. Let’s also start to share tips on how to deliver exceptional client service, because success in this industry is about much more than developing great websites — it’s about developing great relationships.

(al)

What Successful Products Teach Us About Web Design

2012-01-24T15:17:54Z

Web design is a craft that is constantly evolving and yet also sometimes sabotaged. The moment a design is released, a new version is born. In the beginning, like a baby, it seems vulnerable and weak, but in time it grows up and becomes self-sufficient. Redesigning a website for its own sake doesn’t prove anything; quite the contrary, it reveals a lack of effectiveness on the part of the designer.

Product design is a craft in which new versions come to life with increasing difficulty. We can learn a thing or two from it when designing for the Web. First, let’s look at some examples.

How many designs for the iPhone has Apple released since 2007? The answer is one, with only two tweaks. How many Motorola phones for Android can you find on the market right now? Thirteen, not counting the old models.
How many designs of the Mini Cooper do you know of? Just that one brave design that has continually evolved since 1959! How many Toyota Corolla models can you count since 1967? Nineteen.
Zippo lighters have retained their appeal since 1933!

Forget marketing, technical specs and hardware. Products such as the iPhone, the Mini Cooper and the Zippo lighter have become wildly successful because of their outstanding design. Such massive success springs from three sources: the designer, sticking to the scope and iteration. These aspects can help us in Web design, too. In this article, we’ll look at what we can learn from successful product design.

The Ability Of The Designer

Zippo lighters have remained elegant and reliable through time. (Image: cell105)

Do you trust your instincts? You should! Because when you see a design, you judge its attractiveness in less than a second. We all know what we like, even if we can’t always explain it. It’s about aesthetics. Aesthetics is a child of harmony, and harmony is not magic. It can be achieved when the designer embraces certain principles, such as balance, contrast and dominance. Becoming a fantastic designer, though, requires more than pure technique. It requires that you see the context and make decisions accordingly.

A couple of comments by Karim Rashid, featured in the documentary Objectified are fascinating and revealing. First, Rashid talks about a stereo that he loved as a teenager:

It was a white kind of bubble stereo with these two bubble white speakers. And it was probably very inexpensive — it was a real democratic product, and it had a turntable and the whole thing built in. It was a beautiful thing. Looking back and thinking why it was a beautiful thing, it was very self-contained, and the message was very strong and very simple, and at the same time it was very human. There was a quality about it.

See? A democratic, self-contained, human, simple thing with a strong message.

Here is Rashid again on thinking outside the box:

Why do we feel like we need to keep revisiting the archetype over and over and over again? Digital cameras, for example, [whose] format, proportion, the fact that they’re a horizontal rectangle, are a model of the original silver film camera. So, in turn it’s the film that defined the shape of the camera. All of a sudden, our digital cameras have no film. So, why on earth do we have the same shape we have?

How is it that Karim Rashid extracts such clear conclusions? What hinders us from doing the same? And not just in theory. Let’s do it for real. The next time you are about to make an important design decision, stop and ask yourself, What would I do if I were Dieter Rams or Jonathan Ive or — since you’re a Web designer — Douglas Bowman?

Asking this kind of question briefly expands our skills of judgment and makes us ultra-alert. Doing it regularly can drastically heighten our perception, values and actions as designers. Is this enough? No, but it is the beginning of a beautiful relationship with design.

And the Zippo lighter? It looks both friendly and solid, a comrade that needs your attention in order to keep working. Ιt has its own scent; it’s windproof; and above all, the sound when you flip open the lid is distinctive. And if you’ve owned a Zippo for a while, you must have noticed that it learns how you touch it when you light it.

All together, a Zippo is a product of craft — just as our designs for the Web should be. This is as simple and as hard as it sounds.

Focusing On The Scope

Once a Mini, always a Mini. (Image: Shelley Gibb)

Let’s go back to cars for a moment.

As noted earlier, the Corolla models of Toyota are nothing spectacular in their design. But what is a Toyota car known for? It’s a reliable, relatively cheap family car. Is Toyota successful? You bet!

What’s a Mini Cooper? It’s a beautiful small car that appeals mostly to young people. Is it successful? Of course, it is.

Cars are complicated machines. They do more than transport people. If a Toyota were as fancy as the Mini, then it wouldn’t be affordable. If a Mini were reimagined as a family car, then it would lose some of its charm. Oversimplification? Perhaps. But you get the point.

There’s a scope behind each product. As long as the scope is met, the product will be effective and remain on the market. The same happens in Web design.

Consider a metaphor. The closest physical product to a website is a periodical. Take Wired magazine (the physical magazine, that is, not the website or iPad app, which have slightly different characteristics). I’ve been reading it for more than 10 years, and if I had to describe it succinctly I would say “forward-thinking and cool.” Wired reinvents itself every once in a while and persistently fine-tunes the design, but the scope remains the same. Excellent design and illustration, superbly written long articles and a ton of clever short ones serve the main purpose: to introduce its audience to a new era. Audiences change over time, and new eras dawn, but Wired remains. Why? Because it has always respected a higher purpose. Sure, many magazines are well designed, and enough of them have great content. But you rarely find one with a unique identity, an identity that can’t be easily copied.

Your probably less complicated Web project needs to perform similarly. You must define the objectives. The design must promote them. Good content should prevail. You know the rules; make sure to follow them. Moreover, know where to stop. If it’s a new idea with vague potential or yet another feature or a last-minute change, just say no.

Websites are like breathing organisms. They evolve; new features are added and others are dropped, but they never stay still. Or at least they shouldn’t. Thus, while a promising fresh idea shouldn’t be discarded, it should be held until the next major update.

Big, ambitious, well-funded websites often seem to lose focus. Their owners try to satisfy all requests. This is a recipe for disaster, because it creates unnecessary friction between everyone working on the project. It dulls the impact of the best features and, above all, the scope. Tension fills the air. The worst days are ahead.

Such practices have led to the infamous concept of design by committee. Simply put, if everything is important, then nothing is important.

Iterations

Is what Apple does magic? I think not. (Image: Jon Rawlinson)

Let’s talk Apple. Apple’s iconic design and its founder’s exceptional way of thinking have been overanalyzed lately.

No matter how many words we write about Steve Jobs, we still seem to explain away his success as being a kind of magic. But that’s plainly wrong. People are inclined towards the least complicated, least demanding explanation to a conundrum. It is written in our genes. We think more deeply only when there’s a serious reason to do so. (But I digress.)

So, let’s do away with what Adrian Slywotzky refers to as the “Eureka” myth:

Apple would love us to believe it’s all “Eureka.” But Apple produces 10 pixel-perfect prototypes for each feature. They compete — and are winnowed down to three, then one, resulting in a highly evolved winner. Because Apple knows the more you compete inside, the less you’ll have to compete outside.

If Apple iterates so painstakingly, why shouldn’t we?

Inspiration for a great design roars when it comes. And implementing the idea brings a rush of enthusiasm. And our eyes sparkle when we anticipate outstanding success. And yet it rarely works that way.

Why? Because ideas and their execution are seldom free from flaws. You know the old cliché, “There is always room for improvement.” It still stands. There is always room for improvement, and accepting that your idea is the one that needs improvement takes courage. Demolishing your next great product in order to make it better takes nerve and self-discipline. But it also makes you wiser, and can dramatically improve the product.

Iterating extensively and in detail doesn’t depend on a certain type of project or a certain budget. It’s a tricky thing, because it forces us to confront our imperfect nature as human beings. To embrace our inner flaws is to walk the road of truth and maturity, silently, without making a show that we’re doing it.

This weight might feel a little heavy on our shoulders. If it does or if you dismiss Apple’s success, consider what Oliver Reichenstein, head of Information Architects, says about the iterations that his team makes in each development phase (this quote appears in the comments section):

It’s often almost impossible to explain easily why things look like they do, because we went through so many iterations, that it feels like explaining a chess game with all the ifs and whats.

The same goes when designing for the Web: there’s no excuse to avoid making as many iterations as we can.

Final Thoughts

When successful designers are asked where they seek inspiration, they often say something like, “Everywhere — I go for a walk and observe the world around me.” And it’s true. But what they don’t often say is that they also know what to observe and how to ignore the noise of the world.

There are many beautiful well-functioning products around us. Each has a story to tell, a story that is strongly attached to its design, its scope and the iterations that the designer took before releasing it to the world.

Take the Dyson vacuum cleaner. Its design is at least impressive, and its scope is clear (to suck dirt better than other cleaners and, thus, to make your environment healthier), and it took hundreds of prototypes for the designers to figure out how to make it work without a bag. The first Dyson vacuum cleaner was sold in 1970! To explore further and find similar products, just search for our three key words: “design scope iteration.”

Creating a lasting website is no easier than creating a lasting vacuum cleaner. But neither is it impossible. It requires a holistic approach, focus and maturity, just like the products we’ve looked at here. Not to mention, it requires a paradigm shift.

(al)

Smashing Magazine Feed

Collaging: Getting Answers To The Questions You Don’t Know To Ask

A Picture Is Worth A Thousand Words

What You Can Learn

A Brief History Of Projective Techniques

Conducting A Collaging Exercise

1. Choose Your Topic of Interest

2. Create a Collage Board and Get Pictures

3. Moderate the Study

4. Conduct Analysis

When to Conduct a Collaging Exercise

Collage Examples

Pitfalls To Avoid

Conclusion

Resources

How To Use Custom Post Types To Organize Online Marketing Campaigns

The File Structure

The Plugin File

The Helpful Display Functions

The Template File

In Conclusion

Resources

Freebie: St. Valentine’s Day Icon Set (10 PNG/PSD Icons)

Download the Set for free!

Behind the Design

Ten Things To Think About When Designing Your iPad App

Take A Goal-Oriented Approach To Simplify Functionality.

Leverage What You Know To Create A Fully Personalized Experience.

Think About The Place Of Use.

Consider Multi-User And Multi-Device Cases.

Don’t Do Crazy Navigation Unless It’s A Game Or One-Hit Wonder.

Provide A Home Page.

Beware Of Awkward Pop-Overs.

Avoid Gratuitous Splash Screens.

Use Gestures In Clever Ways, But Don’t Overdo It.

Make Clear What’s Touchable, And Make It BIG.

What Else?

Further Reading

Desktop Wallpaper Calendar: February 2012

Colored Edge

Hungry Owl

Hot Drinks

Bold

February Prison Break

All You Need Is Love

February Splashes

Penguin Hockey

Mr. & Ms. Nice

Jealous Much?

Heartbroken

The Shortest Month

Kids And Dragon

Heart On A String

A Shadow’s Chance

Be Mine

It’s The Love Signal

Winter Church

Lock Your Love

Cyclops Encounter

Gloomy Light

Chillout

All You Need Is Love

Fight For You

Ice Melted

Load Time

Love Is In The Air

Join In Next Month!

What’s Your Favourite?

The Future Of Screen Typography Is In Your Hands

Good Typography Cannot Be Handcrafted Anymore

Identifying What’s Missing

Time to Fix the Problem

Typesetter.js

1. The JavaScript

2. The Custom Font File

Putting Small-Caps and Old-Style Numerals in Place

Get the Font File

Create Your Own Font File

Get Involved In The Future Of Typesetter.js

Limiting The Visibility Of WordPress Posts Via Usernames