Advertisement

The old adage, “a picture speaks a thousand words” captures what user interface prototyping is all about: using visuals to describe thousands of words’ worth of design and development specifications that detail how a system should behave and look. In an iterative approach to user interface design, rapid prototyping is the process of quickly mocking up the future state of a system, be it a website or application, and validating it with a broader team of users, stakeholders, developers and designers. Doing this rapidly and iteratively generates feedback early and often in the process, improving the final design and reducing the need for changes during development.

Prototypes range from rough paper sketches to interactive simulations that look and function like the final product. The keys to successful rapid prototyping are revising quickly based on feedback and using the appropriate prototyping approach. Rapid prototyping helps teams experiment with multiple approaches and ideas, it facilitates discussion through visuals instead of words, it ensures that everyone shares a common understanding, and it reduces risk and avoids missed requirements, leading to a better design faster.

[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]

The Rapid Prototyping Process

Rapid prototyping involves multiple iterations of a three-step process:

1. Prototype
   Convert the users’ description of the solution into mock-ups, factoring in user experience standards and best practices.
2. Review
   Share the prototype with users and evaluate whether it meets their needs and expectations.
3. Refine
   Based on feedback, identify areas that need to be refined or further defined and clarified.

The prototype usually starts small, with a few key areas mocked up, and grows in breadth and depth over multiple iterations as required areas are built out, until the prototype is finalized and handed off for development of the final product. The rapidness of the process is most evident in the iterations, which range from real-time changes to iteration cycles of a few days, depending on the scope of the prototype.

Scoping A Prototype

The word prototype often conjures images of a coded, fully functioning version of an application or interface. Rapid prototypes are not intended to evolve into fully functional solutions, but are meant to help users visualize and craft the user experience of the final product. With that in mind, when scoping a prototype, decide on a few key issues before beginning any prototyping work.

What Needs to Be Prototyped?

Good candidates for prototyping include complex interactions, new functionality and changes in workflow, technology or design. For example, prototyping search results is useful when you want to depart significantly from the standard search experience; say, to introduce faceted search or the ability to preview a document without leaving the search results.

How Much Should Be Prototyped?

A good rule of thumb is to focus on the 20% of the functionality that will be used 80% of the time; i.e. key functionality that will be used most often. Remember, the point of rapid prototyping is to showcase how something will work or, in later stages, what the design will look like, without prototyping the entire product.

Find the Story

After identifying the areas to be prototyped, weave them together into one or more scenarios: identify the coherent paths through the user experience that the prototype simulates. For a website that sells shoes, one scenario could be “Boring Joe” buying the exact same Nike running shoes that he bought six months ago, while another scenario could be “Exploring Sam” browsing through size 10s to find a pair of Oxfords and pair of loafers that interest him.

Plan Your Iterations

The entire prototype is usually not built in a single iteration but rather piece by piece. A good approach is to start prototyping broadly and widely and then dive deep into selected areas of the solution. For a website, this would mean building out the home page and landing pages for the main sections in the first iteration (sometimes referred to as a horizontal prototype) and then reviewing and revising that framework. Subsequent iterations could drill down into one or more sections of the website (a vertical prototype); for a media download website, this could be the steps a user would take to find a video and to download it, or how they would manage the media in their online library.

Choose the Appropriate Fidelity

Fidelity refers to how closely a prototype resembles the final solution. There are multiple dimensions of fidelity, and prototypes can lie anywhere on the spectrum for each of these dimensions. Depending on the stage of the design process and the goals of the prototype, select the appropriate fidelity for each of the following:

• Visual fidelity (sketched ↔ styled)
  Look and feel are the most noticeable dimension of a prototype’s fidelity and, if not properly selected, can sidetrack prototype reviews. Go hi-fi too soon and users will focus on visual design, which is not appropriate in early stages. From a visual standpoint, prototypes do not have to be pixel perfect but should be proportional; for example, if the left navigation area has to occupy one-fifth of a 1024-pixel screen, it does not need to be exactly 204 pixels wide, as long as it is proportionally depicted in the prototype. As prototyping progresses through the design cycle, increase visual fidelity as needed by introducing elements of style, color, branding and graphics.
• Functional fidelity (static ↔ interactive)
  Does the prototype reveal how the solution will work (static) or does it appear to be fully functional and respond to user input (interactive)? This dimension is less of a distraction to users, but adding interactivity in subsequent iterations increases functional fidelity and allows the prototype to be used for usability testing and training and communications.
• Content fidelity (lorem ipsum ↔ real content)
  Another dimension that often distracts users is the content that is displayed in the prototype. Squiggly lines and dummy text like lorem ipsum are useful to avoid in early stages of prototyping. But as the prototype is refined, evaluate the need to replace dummy text with real content to get a feel for how it affects the overall design.

The Prototyping Spectrum

Low Fidelity

The quickest way to start prototyping is also the easiest: putting pen(cil) to paper. Sketching on paper is a low-fidelity approach that anyone can do; no special tools or experience required. Most often used during the early stages of a design cycle, sketching is a quick way to create rough mock-ups of design approaches and concepts and to get feedback from users. Paper prototyping is ideal during brainstorming and conceptualization and can be done alone in a cubicle with a sketchbook or in a group with a flip chart (or whiteboard) and markers.

Lying at the low-fidelity end of the prototyping spectrum, paper prototypes are static and usually have low visual and content fidelity. This forces users to focus on how they will use the system instead of what it will look like, and it makes designers more open to changes based on user feedback.

Low-fidelity prototyping lends itself to rapid prototyping. It has no learning curve but lets you make changes easily and quickly.

Medium Fidelity

As we start using computer-based tools such as Visio and Omnigraffle to prototype, the fidelity increases on most fronts, yielding medium-fidelity prototypes. Wireframes, task flows and scenarios that are created with these tools take more time and effort but look more formal and refined. While visual elements of branding, colors and style can be introduced, prototypers often stay away from them, focusing instead on demonstrating the behavior of the application. Interactivity can be simulated by linking pages or screens, but functional fidelity here is medium at best. These prototypes are best suited to determining whether user needs are met and whether the user experience is optimal.

There are two reasons why one might intentionally make a medium-fidelity prototype not look like a medium-fidelity prototype:

• The first is that, by using Balsamiq or sketchy Visio stencils to make the prototype look low fidelity, you force users to view it as a draft or work in progress, rather than a polished and finished product.
• The second is that, by giving the prototype a high visual fidelity (for instance, in a comprehensive layout done in Photoshop), you get the user to focus on the visual design and look and feel, including color, fonts, layout, logo and images.

The speed of medium-fidelity prototyping is achieved with templates, stencils and reusable widgets and elements. It gets faster as you become more proficient with your tools of choice.

High Fidelity

High-fidelity prototypes are the most realistic and are often mistaken for the final product, but they are usually time-intensive. A few years ago, the only way to create high-fidelity prototypes was to actually code using a programming language, which often required the designer and developer to work together. These days, however, application-simulation tools allow non-technical users to drag and drop UI widgets to create high-fidelity prototypes that simulate the functionality of the final product, even for business logic and database interactions. Axure and iRise are some examples of application-simulation tools that can be used to create high-fidelity prototypes.

These prototypes are appropriate when high visual and functional fidelity is required; for example, when introducing a new technology (say, when moving from a mainframe application—yes, they still exist!—to a Web-based solution. Most of these prototypes cannot be converted to usable code, but they serve as an excellent reference for developers. These are also useful for conducting usability testing and training users.

High-fidelity prototyping is relatively rapid, considering the level of interactivity and fidelity involved, and it can be accelerated by using drag-and-drop simulation tools. In addition, some of these tools facilitate the gathering of user feedback and documenting of requirements, further speeding up the design process. Even though you do not need to learn a new programming language, these tools do have a learning curve.

Selecting a Fidelity Level

In choosing the prototype fidelity, there is no one correct approach. Most designs of new products are best started with sketches, then moving to either medium- or high-fidelity prototypes, depending on the complexity of the system and the requirements of the dimensions of fidelity.

In working with one particular client in the pharmaceutical industry, we went from whiteboards to interactive prototypes that had high functional and content fidelity but low visual fidelity. They cared less about the look and feel than about adhering to corporate guidelines.

For another client, this one in retail, our interactive prototype had to have high visual and functional fidelity. The content fidelity did not matter because they would be reusing content and were already familiar with it. To them, the look and feel and interactive experience mattered more because this was their first implementation of SharePoint, and they wanted to make the portal look “non-SharePointy”!

Selecting Tools

Depending on your approach, you have a wide variety of tools to choose from. Dan Harrelson has compiled a list of popular prototyping tools on the Adaptive Path blog.

Each tool has its own feature set and strengths. Based on your needs and the requirements of the projects you work on, evaluate which tool would be most appropriate. Here are some questions to consider when evaluating tools:

• How easy is it to learn and use the tool?
• Is it flexible to support prototypes for Web, packaged and custom software applications, as well as desktop and mobile applications?
• Is there a repository of reusable stencils, templates or widgets available?
• How easy is it to share the prototype with others for review? Can their feedback be captured using the tool?
• How easy is it to make changes on the fly or to incorporate feedback?
• Does it have any collaboration features, such as allowing multiple people to work on it at the same time?
• What are the licensing terms and costs?

Do’s And Don’ts

As you get started, here are a few points about effective rapid prototyping to keep in mind:

Do…

• Work collaboratively with users, business and IT stakeholders while rapid prototyping. Apart from giving valuable feedback, they also gain a sense of ownership of the final product.
• Avoid “prototype creep” by setting expectations for the process, including ones affecting the purpose, fidelity, scope and duration. Remind everyone, including yourself, that rapid prototyping is a means to an end, not an end in itself.
• When creating interactive high-fidelity prototypes and simulations, build in realistic delays (for instance, for screen refreshing or moving through steps of a transaction), so that users do not expect instant response times from the final product.
• Reuse, reuse, reuse. For computer-based prototyping, this means saving reusable templates, stencils, patterns and widgets for future projects.
• Most importantly, begin every prototype review session with the disclaimer that this is just a prototype, a mock-up, not the actual solution. This reminds users that this is a work in progress, it encourages feedback, and in the case of high-fidelity prototypes, it prevents users from mistaking it for a working solution.

Don’t…

• Don’t prototype features or functionality that cannot be implemented—often an issue with software package implementations. When in doubt, confirm with developers before starting.
• Don’t take every change or request that comes out of a prototype review as a new requirement. Rapid prototyping helps capture missed requirements, but these new requirements should be evaluated carefully. Some may be implemented, while others are pushed to a future release.
• Don’t begin prototype review sessions without clear guidelines for feedback. Be very specific about the type of feedback you are looking for. (Are the steps logically arranged? Is the navigation clear and intuitive?) If not, be prepared for, “I don’t like the blue in the header,” or “Can’t we use this font instead?” or “Can you make this bigger, bolder, in red and flashing?”
• Don’t be a perfectionist. In most cases, rapid prototyping does not have to be 100% perfect, just good enough to give everyone a common understanding.
• Don’t prototype everything. Most of the time, you shouldn’t have to.

Further Resources

• If you need a nudge to start sketching, try Dan Roam’s book The Back of the Napkin.
• Learn more about paper prototyping in Carolyn Snyder’s book Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces.
• Sketchboarding, a technique for exploring and refining concepts.
• Need low-fidelity content? Generate Lorem Ipsum text for your prototype.
• Want to make your Visio prototypes look low fidelity? Use the sketchy stencil.
• Want to make your paper sketch look high fidelity? Try these Web, iPad and iPhone stencils.
• Sketching and Prototyping Tools for iPhone Apps
• Simple sketching and prototyping in Firefox with the Pencil add-on.
• Free Printable Sketching, Wireframing and Note-Taking PDF Templates
• 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

Would you like to see more related articles on Smashing?

Would you like to see more wireframing prototyping-related articles on Smashing Magazine?survey software

(al)

Advertisement

Sketching and wireframing are a specialized style of drawing, used for fleshing out preliminary complex ideas, group brain-storming, a lo-fi method for evaluating interaction concepts, and as a way of roughly perfecting a design technique.

Sketch and wireframe paper is essentially drawing paper that is designed specifically for this purpose. You could use it for web page design, web app design, architectural or structural design, graphic design, movie direction, animation… basically any type of design that needs a physical creative outlet or group collaboration.

Not all sketch and wireframe sheets are universal, most are specialized for a particular medium, such as storyboards and specialized grid paper (axonometric perspective templates).

Below you will find a concise collection of ready to print sketching, wireframing and note-taking templates. Most, as expected, are geared towards the design community, but there are also templates that could be used within any industry and for any purpose.

You may be interested in the following related posts:

• 35 Excellent Wireframing Resources
• 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]

Wireframing and Sketching Paper

Paper Browser – It's a browser, only in paper
This PDF can be used for creating a website’s wireframe. The entire PDF is proportionally scaled at a 1024×768 screen resolution, with guides for designs that use a 960px or 800px layout and with each grid sized at 32×32px. The PDFs are available in both A4 and A3.

Web Sketching Template – Single Page
This A4 template has been designed for sketching a website with a resolution of 1024×768.

iPhone Wireframe Templates for Sketching
These iPhone paper prototyping and design templates are available to download in two different styles: the basic iPhone design template and a more advanced one that also has the iPhone sketch template but leaves space for making notes. Both can be downloaded in a .zip-file which also contains the templates in Viso (VSD) format.

iPad Idea Sheet
This template has been designed for wireframing iPad apps. There are three templates within the zip-archive: The first template allows for full size iPad sketching (100%), the second has two iPad templates (at 70% of the normal size) and the last has four iPads sized at 50% of the regular size.

iPhone Idea Sheet
This iPhone idea sheet has been designed by the same people that released the iPad Idea Sheet above. The .zip-file contains 4 different printable templates: two templates are sized at 100% of the actual iPhone with a choice of horizontally or vertically aligned sheets and the other two sketching templates each have 9 iPhone designs (sized at 75% of the actual iPhone) and again with a choice of either horizontal or vertical orientation.

iPhone Application Sketch Template
This iPhone template has a grid with the grid squares sized at 10px; it is designed with tick marks to indicate the heights of the status bar, nav bar, keyboard, tab bar and toolbar. The download is a 300dpi A4 JPEG.

Android Wireframe Templates
This sketching set for Android contains templates for Nexus One, HTC Dream, HTC Hero, HTC Magic, HTC Tattoo and Motorola Droid.

Wireframe Print and Sketch Template

A4 & A3 Sketching Paper
This printable grid sketching paper can be useful for the initial stages of web design, concept designing. You can choose between the A4 size or A3.

Basic Wireframing Paper
This is a basic grid box which you can use for concept diagrams, sitemaps, spectrums, tables, and whatever else you may need to sketch.

Wireframe and Notes Paper
This is a wireframe grid divided into 24 columns with gutters between each column. The column units are numbered along the top of the grid. To the right of the grid there is a ruled column for adding labels and annotations.

Two-by-Two Wireframe Paper
This template is a two by two grid with 4 cells divided by an x-y axis.

Blank Grid and Graph Paper

ZURB Grid Paper
With this grid paper you can connect the dots to give your sketches a little more structure while exploring refined concepts on paper.

Graph Paper with Two Lines Per Inch – Letter-Sized
This basic letter-sized graph paper has two aqua blue lines per inch.

Four Dots Per Inch A4 Paper
This printable dot paper has four dots per inch and is in portrait (vertical) orientation on letter-sized paper.

Storyboard Templates

4 Cell Storyboard Paper
This is a basic storyboard sketching template with 4 cells with each cell having a simple grid.

MBTI Sketching Paper for Ideation
With this MBTI sketching paper for ideation sessions, you can describe a design challenge on every piece of sketching paper which represents the problem you want to solve. There’s also some space for annotations. You can download the PDF in A4 and A3.

ZURB Sketchsheets
A set of editable PDF sketchsheets ideal for rough ideas and presentation to clients. There are five slightly different templates in the .zip-download package.

Storyboard Template

Storyboard with Notes
A storyboard template with 4 cells, with the area space beneath each cell for notes.

Web Sketching Template – 6 Pages
An A4 web design sketching template with space for notes.

Scenario, Taskflow and Grid Sketchsheets
This all-in-one PDF download package contains scenario, task-flow and grid templates. All can be useful during the early stages of web development process. Here are the three templates:

Lined and Notepad Paper

A4 Narrow-Ruled
This letter-sized lined paper is narrow ruled in portrait (vertical) orientation.

8.25" x 11" Lined and Squared Paper
This lined and squared paper template is sized 8.25"x11", and available in both PDF and JPEG.

Speciality Paper

Printable Cornell Note Paper
This Cornell Notes paper is lined and additionally formatted with two large blank areas for a summary and a cue (on which to later note and review main ideas, ask questions, or draw diagrams).

Moleskine Writing Template by Rod Graves
This template is based on a medieval page layout principle described in Robert Bringhurst’s classic book on typography, The Elements of Typographic Style. The Large sized notebook’s dimensions are nearly equivalent to a Golden Section rectangle (1:1.61803…). The design of the template is related to the golden section / the Fibonacci sequence.

Penmanship Paper
You can use this dashed paper to practice penmanship. The PDF is in the size A4 and has twelve lines per page, in portrait (vertical) orientation.

Calendars

Weekly Printable Calendar
This calendar's overview format lets you prioritize tasks, schedule appointments, and jot down notes all on one page. Custom options include Letter and A4 printing sizes, start day of the week, time range, and multiple languages.

Monthly Printable Calendar
This template lets you create printable monthly calendars for letter and A4 paper sizes.

5-Day Monthly Calendar
Create and print a 5-day calendar with holidays and your choice of start day by using the generator.

Lined Weekly Printable Calendar
Create and print lined weekly calendars in horizontal or vertical format with your choice of start day.

Index card sized Printable Calendars
Choose from 4 different compact templates for printing directly to3×5 and 4×6 index cards (with the dates already filled in). Here are the download links: Monthly Calendar, Split Month Calendar, Yearly Calendar and 2-Year Calendar.

Music Sheets

Music Paper from the University of Virginia
There are many sites where you can download blank music sheets, but none are as a comprehensive and detailed as this resource. You can select PostScript or PDF formats for your templates; they are all sized 8^1/2 x 11 (portrait orientation). Overall, there are 37 templates available and they are split into the following categories: General (9 templates), Solo (3 templates), Ensemble (8 templates), Band (4 templates), Orchestra (4 templates) and finally templates for Choral (8 templates). Below you can see examples of the Basic template and the Full Orchestra templates:

Generators and Tools

Incompetech Grid and Graph Paper Generator
On this site you can generate basic graph templates in any size, color and even by grid spacing, you can also choose from the scores of different graph variations: Axonometric Perspective, Cross Grid, Inverted, Equilateral Triangle, Octagonal, Hexagonal, Semi-bisected Trapezoid and Tumbling Block – Trapezoid.

Notepad Generator
This tool allows you to customize a PDF notepad which you can then print it out on standard 8 1/2 x 11 paper.

Print Free Graph Paper
Here you can choose the size (Letter or A4), paper type (Cartesian, Polar, Isometric…), measuring units (Millimetres or Inches) and finally whether you want the paper formatted or un-formatted.

All work and no play PDFs

Downloadable Origami Templates
You know the saying “all work and no play…”. Well, not all printable PDFs are geared towards work. How about a fun stress reliever? This site offers a huge database of printable origami models that will keep you amused for hours. Best not to make these during collaboration and brainstorming meetings though!

Design Police – Bring bad design to justice
Fed up with the bad design choices of your colleagues? Design-Police.org has created, as they call it, “visual enforcement kit” for designers. Help bring bad design to justice!

Related Posts

You may be interested in the following related posts:

• 35 Excellent Wireframing Resources
• 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

What other goodies would you like us to collect?

Would you like us to collect other PDFs, files, download kits? Let us know what you need in the comments below and we will collect them and present them in one of our upcoming posts!

Monday, January 25, 2010 by Brian Shih

At Google we're always looking for ways to take advantage of work being done in other parts of the organization. So when a team approached us with a way to follow changes from websites without feeds, we jumped at the opportunity. Post by Liza Ma, Product Manager.

Feeds make it easy to follow updates to all kinds of webpages, from blogs to news sites to Craigslist queries, but unfortunately not all pages on the web have feeds. Today we're rolling out a change in Google Reader that lets you create a custom feed to track changes on pages that don't have their own feed.

These custom feeds are most useful if you want to be alerted whenever a specific page has been updated. For example, if you wanted to follow Google.org's latest products, just type "http://www.google.org/products.html" into Reader's "Add a subscription" field. Click "create a feed", and Reader will periodically visit the page and publish any significant changes it finds as items in a custom feed created just for that page.

Here are some more example feeds for sites without feeds that you could follow:

• Macy's - special offers [view in Reader]
• NYU Computer Science homepage [view in Reader]
• Zillow.com homepage [view in Reader]

We provide short snippets of page changes to help you quickly decide if the page is worth revisiting and we're working on improving the quality of these snippets. If you don't want Google to crawl or create feeds for a specific site, site owners can opt-out.

If you have a feed-less page you've been dying to follow, sign in to Google Reader and try it out for yourself. As always, if you have any feedback, please visit our official help forums or our Twitter account.

First YouTube, Now Vimeo: How HTML5 Could Finally Kill Flash Video

Flash powers almost all the video on the web nowadays, so it's obviously good enough. But is there a better way? YouTube, and now Vimeo, who're both giddily jumping into bed with HTML, sure seem to think so.

Vimeo's new HTML5 system is just like YouTube's, in both execution and technical details, in that it'll only work with a few browsers—Safari and Chrome, for now—and that it's compatible with most, but not all, of the company's video libraries. It's something that most people won't bother to try at this point, and if they do, they're probably be underwhelmed, since HTML5 video playback is almost indistinguishable from Flash video playback. (Moving pictures!)

But it's primed to be something that everyone ends up using, and that would be a Very Good Thing. Flash video performs terribly on Mac OS X and Linux, and on the few mobile devices that do support it, playback is uniformly terrible. And generally speaking, it's a plug-in. We whine about having to install Silverlight to use Bing Maps or watch some kinds of video, but it's a plugin the same way that Flash is.

HTML5 allows certain types of video to be rendered in the browser natively, like JPEGs or GIFs are now. It's an objectively simpler, more efficient solution, and disregarding the massive infrastructure built up around Flash video, it would be the obvious choice.

Luckily, YouTube accounts for a hefty chunk of said architecture, their catalog is rendered in HTML5-friendly h.264 format already—that's how you watch in on the iPhone and Android, by the way—and with help from smaller sites like Vimeo, they could actually get the ball rolling on, you know, murdering Flash video. In a world where everybody's browser fully supports h.264 HTML5 video—a world that's a few years away, at least—we wouldn't have to wait years for Flash support in our new phones, wouldn't have to settle of chugging video playback on near-new machines, and we wouldn't have to put up overladen, poorly-designed proprietary Flash players getting in the way of our content. We'd just have...video. [CNET]

Send an email to John Herrman, the author of this post, at jherrman@gizmodo.com.

Your version of Internet Explorer is not supported. Please upgrade to the most recent version in order to view comments.

Loading comments ...

Earlier discussions | Other discussions | Show all discussions | Show featured discussions only | Start a new discussion

In order to view comments on gizmodo.com you need to enable JavaScript.
If you are using Firefox and NoScript addon, please mark gizmodo.com as trusted.

Faster, Safer, Smarter, Better

Tired of your Social Network?

Liberate your newbie friends with a Web2.0 suicide! This machine lets you delete all your energy sucking social-networking profiles, kill your fake virtual friends, and completely do away with your Web2.0 alterego. The machine is just a metaphor for the website which moddr_ is hosting; the belly of the beast where the web2.0 suicide scripts are maintained. Our service currently runs with Facebook, Myspace, Twitter and LinkedIn! Commit NOW!

Feel free like a real bird again and untwitter yourself. Watch it here!

GPS-aware mobile devices have become commonplace, which means connecting the dots between what you’re doing and where you’re doing it is easier than ever.

In 2009, location-sharing applications finally emerged in user-friendly formats, altering the way we think about where we are and helping us understand more of the meaning behind the data in aggregate.

Technology early adopters showed a predilection towards mobile location-based games, discovering that check-ins could mean something and that being the mayor of a venue might earn them a free drink. Now that businesses are actively exploring the opportunities that these location-aware services provide, we’ll see location matter more than ever in 2010.

1. Facebook Status Updates Will Become Location-Aware

The writing is on the wall. Facebook is the world’s largest social network, and for the first time ever it was the most trafficked web site on Christmas day in the United States. If anyone is poised to make a big move in the location-space in the new year its Facebook.

Facebook is already encouraging members to be more open. They made a bold and controversial move to alter the default settings around status updates in the hopes of making more Facebook updates public and searchable.

In the same spirit of openness, Facebook would certainly profit by implementing opt-in location-aware status updates. Knowing where your Facebook friends are grabbing a cup of coffee or catching a flick is a just as important, if not more so, than knowing that they’re doing it. So in much the same way that Foursquare shows you check-ins from friends and people checked in at venues, Facebook could provide context around status updates in the wild, but on a much grander scale.

2. A Popular LBS App Will Be Acquired

Once considered merely novelty apps, location-based mobile applications and games have demonstrated clear value in 2009. Mobile and web users have finally demonstrated that they’re interested in sharing their locations (in the form of places or venues as opposed to lat/longs). With the right privacy settings or gaming incentives, services are catering to businesses who are now offering location-based deals, and aggregating data around where people congregate is becoming increasingly desirable.

When those factors are combined with the crop of applications who get location-sharing right, and an economy on the upswing, you get an environment ripe for acquisitions.

So, who looks good for acquisition? Loopt. While Loopt is still struggling to make up ground in the blogosphere after losing buzz to newcomers with a focus on gaming, like Foursquare and Gowalla, the company has made huge improvements to their iPhone app (and introduced BlackBerry and Android apps).

Loopt has even adopted a check-in model, added tips to place pages, and will explore additional gaming functionality as well. In fact, their recent acquisition of GraffitiGeo is what gave rise to the new Tips functionality. Since GraffitiGeo also includes badges and “Street Cred” to measure identity and encourage participation, you can certainly expect similar elements to make their way into Loopt in 2010. Clearly the Loopt of today is drastically different from the Loopt of years past.

What makes Loopt extremely attractive, however, is their massive user base which includes millions across more than 100 different mobile devices. Loopt dwarfs the competition in this arena.

And who will be in an aquiring mood? Two big companies come to mind: Google and Microsoft.

When looking at the events of the last year, Google has shown clear interest in location, especially with the introduction of Latitude, which bears a striking resemblance to previous iterations of Loopt (i.e., primarily map based, and not place-specific).

Unfortunately, Google is already way behind in the location space. Even with the addition of location history and friend alerts, Latitude is lackluster and still without a native iPhone app. But, Google has shown a propensity of late towards acquiring companies that give them a competitive advantage in a yet untapped space.

Whether or not Google buys Loopt, everything points towards Google taking big leaps on the location front in 2010. We know they were interested in buying Yelp, and we know that they’re more actively trying to expose their Place Pages product, even encouraging locales to use QR code window decals so patrons can look up information on that particular venue on the spot (and perhaps check-in at a later date?). It’s certainly not a stretch then to assume that Google is interested in further assimilating the Latitude and Place Pages products into a more full-fledged location and recommendation service centered around places. An acquisition like Loopt would help them connect the dots much faster.

Microsoft could also make a play to become recognizable in the location space. They’ve yet to make a splash, but they do have an excellent maps application (especially as a part of their Bing iPhone app), and they tend to try and compete with Google at every possible juncture.

One company that we probably won’t see get snatched up in 2010 is Foursquare. They’re currently riding high on buzz, building up a user base in populous metros, and looking to expand worldwide. While they may be ripe for acquisition, history tells us that Foursquare’s co-founders will want to stay independent. Their previous product, Dodgeball — a mobile location-based game ahead of its time — was acquired by Google and all but ignored until its final demise.

We have noticed that Foursquare and Twitter have become quite close, most likely because Jack Dorsey, Twitter’s creater, is an investor, so we do expect more synergies to develop between the two companies in the coming year.

3. Twitter Will Build Their Own LBS app

In 2009 Twitter beefed up their product. Deciding that some things shouldn’t be left to third-party developers, Twitter modified their simple yet powerful platform in a few unexpected ways. We’ve seen the addition of a formal standard for retweets, powerful new Twitter Lists functionality, and even a mobile client of their own. In 2010, we expect that Twitter will continue down this path and build a location app of their own.

Twitter’s already laid the foundation when it comes to location. In September Twitter became location-aware, with opt-in settings enabling Twitterers to tag their tweets with their location. Then in November, Twitter announced a Trends API, opening up trending data specific to locations (i.e., trending places) to developers.

Twitter’s recent acquisition of Mixer Labs is the most telling indication that they’re exploring building their own location-aware applications. Mixer Labs, who’s popular GeoAPI service does reverse geocoding to identify places, supports a places finder for the 16 million business-strong database, and includes media layers to add context — think Flickr photos, YouTube videos, even Foursquare check-ins — to neighborhoods.

Twitter will certainly pass along this souped-up geo offering to developers at a cost similar to GeoAPI’s pricing scheme, but they could also be planning to build their own app for even more lucrative opportunities.

One such application we envision would be a feature addition that is rolled up into Twitter’s business services. So as a paying business user of Twitter, your dashboard view could show you valuable context around location-aware tweets happening in or near your place of business.

4. Location Sharing Will Become Ubiquitous

In some ways location is already ubiquitous. It’s already built in to most of our favorite applications. When we use Yelp’s mobile app, we can find nearby restaurants. If we share our location with Flixster on our mobile devices, the app shows us movies and theaters that are within a certain radius. Even Evernote tags notes created on mobile devices with location metadata so that if you want to find notes you created in a certain place, you can.

Location is relevant in almost any equation, which means applications, web sites, and services will push to integrate even more location functionality. A Google search for something like “food” already returns local place results based on your IP address. Are we that far off from the same search returning both places as well as real-time tweets from people nearby on food? The answer to that question is a definite no.

As we move into 2010, the value of shared location data will only be as strong as the quantity of people sharing location-aware updates. Twitter, Foursquare, Loopt, Gowalla, Google and potentially Facebook will help contribute to the tide that pushes more people into the sea of location-sharing.

5. Location Will Be Both Media Darling and Cautionary Tale

Those of us who have been using Twitter for some time have followed the course of the micro medium’s macro coverage in the news. Before 2009, and even up through the first few months of the year, Twitter was gravely misunderstood by the mainstream media.

One thing was apparent: Twitter was changing the pace of news, becoming the platform for citizen journalism, usurping the entertainment media’s hold over celebrity news, and evolving into a medium for businesses to set up shop.

As such, the media came a calling, at first with extreme consternation and disdain. But as the stories continued to flood in, they started appearing as headline and front-page stories. Eventually the mainstream media changed their tone. Expect the same course of events to follow the location-based service and application space in 2010. Location will make headlines in 2010.

It’s the nature of the mainstream media to show up late to the party, so while Foursquare and Gowalla continue to make headlines in the blogosphere, those services aren’t getting the same coverage in newspapers or airplay on TV. This will change in 2010. We can expect location-sharing to be both mocked and celebrated in the new year. Stories of location-sharing gone wrong will be described as cautionary tales for those who live their lives too openly. Those stories will be followed by general interest pieces on the value of connecting through location, or success stories highlighting businesses able to capitalize on location-based services.

Image courtesy of iStockphoto, allsee

A baker's dozen of inspiring infographics

• Graphic Design
• Illustration
• Infographics

I've been working on a lot of infographics lately. More than one of the projects that I'm working on right now have me knee deep in trying to divine the best way to display copius amounts of information in ways that will not confuse or overwhelm the audience. Given that, it should come as no surprise that I have been scouring the web of late searching for the best infographics out there. But first, for those of you who may be confused as to the exact definitions of information and infographics, the following video should prove useful.

 

Okay, so now without further ado, 13 of my recent favorite infographics.

 

 

 

 

 

 

 

 

 

 

 

 

 

Hope that was as fun for you to read as it was for me to put together.

The Tool For Notes

 

Tinderbox Weekend Boston

March 13-14, 2010: Tinderbox for Law, Journalism, and Policy. From getting started with Tinderbox to exciting new techniques.

Tinderbox 5

It’s faster. It’s better. And it’s here. Tinderbox 5.0 !

Software event of the year” — S.F. Keydel

The Romero File

A new episodic Tinderbox tutorial explores Tinderbox in a legal investigation. Useful for novices and advanced Tinderbox users alike, with notes about research frontiers. New episodes weekly. Start with Episodes 0, and 1, or catch the latest: Agendas.

 

Tinderbox stores and organizes your notes, plans, and ideas. It can help you analyze and understand them. And Tinderbox helps you share ideas through Web journals and web logs.

VISUAL

Tinderbox maps your notes as you make them. Build relationships by arranging notes, organizing them with shape and color, linking them. Tinderbox lets you record ideas quickly and keep them where you'll find them again when you need them.

SMART

Tinderbox gives you maps, charts, outlines, and more -- and you can have many views open at once.

Tinderbox notes can have prototypes, saving you time and keeping your work organized. A note is just like its prototype -- except when you've said it's different. Change the prototype, and the change is inherited instantly.

ATTENTIVE

Tinderbox agents scan your notes continuously, searching for notes that meet your criteria. Agents can look for tasks that are overdue, or notes you need to complete, or topics that you find especially interesting. Tinderbox can even automatically update notes and RSS feeds from the internet.

SWIFT

Tinderbox is fast. Want to make a note? Just type! Want to edit a note? Just click. Need to search? Tinderbox starts looking for the answer as soon as you start typing, and often finds your answer before you finish.

STANDARD

With Tinderbox, your data is yours. Tinderbox files are XML, and Tinderbox shares notes with HTML, xHTML, XML, RSS, and OPML.

Tinderbox works beautifully with Web standards. The presentation assistant helps build attractive presentations for lectures and for use on the Web. The new Flint weblog assistant helps you design and build sophisticated weblogs using the latest web services.

Everything is stored on your own computer: you aren't dependent on a distant server. Write anytime: on airplanes, in cafs, at home or away. If you share notes on the Web, every aspect of your Web site is up to you. Your site looks the way you want. You can host it anywhere you please.

ACTIVE

Tinderbox is a deep program with an active and friendly user community. The Tinderbox Wiki hosts ongoing discussions and tutorials. Tinderbox weekends -- held throughout the US and Europe -- give Tinderbox users a chance to get together to share ideas and to explore Tinderbox with the Tinderbox developers in person. The Tinderbox Public File Exchange hosts a range of templates, assistants, and samples. You can arrange private Tinderbox training for you and your team.

PERSONAL

Tinderbox is personal. It works the way you want, and adapts gracefully as your needs change. It's small and agile, so you can get started right away, but it's got the power you'll need to handle all your notes.

Your Tinderbox agents work constantly to keep things organized. A rich portfolio of views -- maps, charts, outlines, and more -- keeps you in touch with your information. Work the way you want.

Cool application but spendy. I have used freemind which is open source and does a fine job mind mapping. It always good to know that there is software out there to help organize my mind.

Visuals are an important part of advertising, so it’s not surprising that so many companies have jumped on the augmented reality bandwagon, offering tools that visualize their products in a magical and memorable way.

Here we take a look at some pretty amazing promotional uses of this new tech that work with common webcams, giving everyone a chance to experience augmented reality — a trend that will be big in 2010.

1. BMW Z4

This BMW interpretation ties in with a TV ad that sees artist Robin Rhode using the Z4 as a giant paintbrush (think big-scale finger-painting with the car’s tyres). Downloading the software, printing out the 3D symbol and holding it up to your webcam will allow you to see your own miniature Z4 on your screen, which you can then drive around using keyboard commands, creating your own Rhode-esque car painting.

2. TOPPS 3D LIVE Trading Cards

Taking the trading card into the 21st century, the Topps “3D LIVE” range offers baseball (and now also football) stars that leap from the special cards onto your desk, as viewed via webcam. As well as creating miniature holographic representations of the players — a neat enough trick that would impress most kids — the concept is taken a step further with the angle that you can control the player’s signature moves via your keyboard.

3. Transformers: Revenge of the Fallen

As well as augmented reality, this example uses clever face-tracking technology to stick the original 3D CGI head of Optimus Prime atop your own visage. The campaign to promote “Transformers: Revenge of the Fallen” also includes a hidden holographic message from Bumblebee, again developed using the original 3D model of the robot that appeared in the movie, suggesting CGI films may be ripe for more AR apps in the future.

4. Doritos Sweet Chilli Chips

What we like about Doritos’ take on the tech for the Brazilian market is that the webcam code is printed on the back of the chip packet, adding value to something normally disposable. Perhaps this also means less chip bags littering the streets. Holding up the code on the Sweet Chilli chips packets initiates the appearance of a little cartoon character, which can then be used in an extended online game.

5. USPS Priority Mail Virtual Box Simulator

Erring on the functional side of promotion, the USPS Priority Mail Virtual Box Simulator is a wickedly clever use of the tech that lets users compare the size of an item they need sent to the size of boxes available from the postal service, by seeing how well their item fits inside a transparent box. Although not particularly high octane excitement, it does illustrate the practical use of AR which is yet to be fully explored.

6. Star Trek

These kind of applications work particularly well with a techie audience, or in this instance a Trekkie one. The front cover of certain versions of the Star Trek movie on DVD and BluBlu

-ray doubles as a webcam code to initiate the “cadet orientation” program. It offers a holographic tour around the USS Enterprise (that appears as a hovering apparition on your screen), incorporating a look at the bridge, and best of all, a trigger to fire the ship’s weapons, complete with sound effects.

7. Wrigley’s 5 Gum

Created for the launch of Wrigley’s “5″ chewing gum in France (although the site is also available in English) this interactive example of AR sees five symbols (each representing one of the five gum flavors) becoming a different track that only plays when the webcam can “see” it. The desktop DJ experience is probably best explained by watching the demo video above, populated appropriately by masticating teens.

8. Ray-Ban

Although many items of apparel can be bought online, sunglasses are one of those tricky products that you really need to try on to ensure you look more chic than geek. Ray-Ban’s Virtual Mirror (ably demonstrated here by YouTuber NickHearne) lets you virtually try on glasses (after a quick bit of face-mapping). The software lets you move your head around to see how the shades look from different angles. Depending on the opacity of the glass, you can even see your eyes through some of the shades. Seeing this app in action makes us think this could be where the real commercial future of AR lies.

9. Lost Valentinos

John Mayer, Eminem and Julian Perretta are three other musicians that have dabbled with AR as a way of making their music videos more compelling, but this effort from the Lost Valentinos — with each printable code representing a member of the band to be arranged as you see fit — is a great example of how to keep it tight. In addition, the band’s site doubles as a video gallery for fans to share how they interacted with the AR by uploaded webcam video clips.

10. Always Infinity

This time round we’ve saved the worst for last. How best to promote feminine hygiene products? With an augmented reality white bunny of course. We think the world can do without this irrelevant foray into the AR arena that assumes a female audience will be blown away by an incredibly basic application of the tech.

Using Visual Card Sorting for Digital Asset Management Taxonomy

by Stephanie Lemieux (December 07, 2009 - 8:05 GMT)

Card sorting is a popular technique for getting at users' understanding of content structure, relationships and terminology. I often will break out a card sorting exercise early on in a taxonomy project using terms extracted from the client's content or pre-existing taxonomies to get a sense of what kind of organizing principles are important to the users. I also find it to be a great way of socializing the project and educating people in taxonomy and information architecture.

Recently, I've been doing a lot of digital asset management (DAM) projects, where our taxonomy is meant to help organize and give access to a collection of images or other visual assets, usually through faceted search. While the typical card sorting activity is still relevant, given that we'll be using words/labels to create the taxonomy for the assets, I've found it to lack a certain something in this context.

So during my current project with a global pharmaceutical company, I decided to try a different approach: a visual card sort.

The same rules apply here as they do with traditional card sorting: you can do an open card sort (no pre-defined categories given), or a closed card sort (established set of primary categories). The only real difference being you do it with pictures, not words. And it tends to be a bit easier and fun, as many people are inherently visual.

The Test Run

I tried it out during an educational working session on taxonomy that was part of a larger gathering of marketing managers from around the globe. It was an excellent opportunity to not only teach taxonomy and DAM concepts, but also gather input on cross-cultural issues and differing mental models. To reinforce some of the concepts, I split the room into 6 groups and had half of them do a traditional text card sort, and the other half the visual version (I'll refer to this as the text/image combo) so that I could use their feedback to compare and contrast organizing text vs. images.

What you'll need:

• Post-its (or other blank cards) for creating group labels
• Markers
• Color-print outs of images, either specific to the context or totally different 

If you decide to do the text/image combo, you'll need a set of terms printed out and cut up into individual labels that address the same subject matter as the images.

Important note on selecting content: choose some images that are challenging – ambiguous or strange – as well as more straightforward selections. If you are going to do a closed or thematic sort (see below), make sure you select enough images that fit the options you’ll be suggesting. You need enough similarity for groups to form, while challenging users with oddball images that are hard to slot and will make them think.

For my exercise, I wanted to avoid people getting caught up in the minutiae of their own content, so I decided to bring everyone out of the pharmaceutical domain and into something simpler and common to all: shopping. More specifically, shopping at IKEA. I printed out color images of products from IKEA, and labels from their site navigation (including some good red herrings).

The directions:

You’ve got a couple of options as to how you want to direct the visual sorting, depending on your purpose.

Open sorting (info gathering): Let participants know that they have free reign as to how they want to organize and group the images – no holds barred. If they want to do color, fine. If they want to do style, fine. Whatever they agree to as a group. Use this approach when you are at the outset of a project and you want to gather user data for your taxonomy framework.

Thematic sorting (education or testing): Assign each group a different theme around which to organize the images. Optionally, you can assign the themes so that each group is unaware of what theme other groups are following. An interesting post-sort activity is then to ask groups to walk around the room and guess the overarching themes of the other groups. Use this approach when you want to educate users on faceted classification of images, subjectivity of tagging, or when you want to test an existing taxonomy framework to see if it holds up with sample images. (You can additionally provide top-level categories within a theme if you are doing a closed sort for testing.)

If you are doing the text/image combo, divide your groups so that half of them are doing the text card sort and the other half do the images. You can use the open or thematic sorting options for text as well. In the IKEA example, I opted for the thematic sorting, as it was more of an educational activity. I assigned each group a different theme (some were specific to images): product type, room of the house, style, mood, etc.

The Results:

Once folks are done sorting, invite each group to talk about their results.

If you opted for the open sort, have the group explain why they chose their grouping principle, and what kind of use case it supports. Ask them what was easy or difficult about the exercise.
If you opted for the thematic sort, ask them to describe the process they followed to define the theme (if it was a bit vague, like “style”) and what was easy or difficult.

If you opted for the text/image combo, do the same thing with the text groups but take some time to compare and contrast the two approaches. For example, with our multinational group doing the IKEA exercise, the visual groups described how it was very challenging to agree on where the images should be classified for subjective themes like “style” or “mood” – “what’s modern for me is not necessarily modern for you.” The group names were a great source of laughs too: "frugal", "boring", "wild", "sexy"...  The textual groups described linguistic challenges they faced with some of the labels: e.g. “hutch” means a credenza where you keep dishes in the US, but it means dog kennel in the UK.

I could easily make parallels to their own content and the difficulties inherent in describing and defining pharmaceutical marketing assets, like a picture of an elderly woman smiling and hugging her daughter – what does this image signify? Health? Happiness? Family? Cardiovascular disease?

All and all, I’ve found this exercise to be an excellent way to introduce the importance of taxonomy in digital asset management, namely the ambiguity of language and subjectivity of images, and the challenges of tagging. It’s simple and fun for participants, and can be an invaluable tool for socializing concepts or gathering initial data for your taxonomy project.