Ever since I was introduced to the Semantic Web back in 2000, the idea was to help computers better understand connections and relationships between objects and data that were being presented on the Web.  The vision is to put data in context, relate it and organize it in ways that only humans can currently do, so computers can then inter-relate information from multiple sites and perform more useful functions in an automatic way.

In a world where all pages are semantically marked, if one website indicates that George Harrison is a member of the Beatles, and another quotes George Harrison mentioning that he learned to play sitar with Ravi Shankar, while yet another annotates the musical scales of Mr. Shankar and those used in Sgt. Pepper, then a semantic search engine might relate the music to the time, place, and style and even play passages from various related songs available for sale on the site.

Likewise, another semantic-search might map out crime data for a neighborhood and show that houses with a particular security system are safer (and for sale on the site). A semantic-based travel site might give you a budgeted and targeted range of options for a $3,000 vacation in Hawaii based on your favorite things to do as you expressed in your newsfeed on Facebook, and from data from various travel sites.

In the medium-term, some of the examples of the changes to come are in what I call product companioning sites.  These sites add value to a customers shopping experience by suggesting items that could be part of a set.  One such companioning site is Polyvore.com.  Polyvore provides users with the tools to generate clothing outfits from a range of retailers and share the ideas on a single site.  These new and innovative affiliate marketing sites give a huge amount of creative control to their community, create strong relationships with that community and sell product.

More structured, semantically-tagged data will enable even more new and innovative applications. So e-commerce sites that tag products semantically can benefit as new sites as innovative as Polyvore begin to emerge.

For ~ Vaga by ~Adorable~T “Birthday Dec 21″ featuring Ted Baker

That’s the medium term. In the short term, semantic tagging will pay off to retailers as major search engines channel more volume.  As more and more search engines  use semantic data to create more valuable search results, it will become a race for retail sites to boost their page rank and organic search click-through rate.

Written with Chris Bierbower

Google: Introducing Rich Snippets

When Naviscent applied its Social Media Merchandising Review methodology to evaluate the customer experience of twenty major retail sites, Polyvore led the pack in its ability to connect customers together in a passionate community that promotes the products of participating online retailers. Of the other sites we reviewed, all considered top e-commerce sites, we found many significant opportunities for improvement.

Top five sites according to the Naviscent Social Media Merchandising Checklist:

#1 Polyvore (score: 5.9)

#2 Shutterfly (score: 5.6)

#3 Amazon (score: 4.1)

#4 Vans (score: 2.7) tied with…

#4 Zappos (score: 2.7)

The full report details the key factors for building a Social Media Merchandising strategy, the criteria to use when engaging with an agency, and an epilogue forecasting future trends.

>>> Download a copy of the full report <<<

You may know haptic (the sense of touch) technology from playing home video games (of course you play!)  Since the advent of PlayStation DualShock controllers, we and millions of kids have enjoyed feeling the virtual road as we drive over bumps in car games because the controllers vibrate like we’re hitting those bumps.  This is called, in technology circles, haptics.  You may also be familiar with the BMW automobile user interface and the Volkswagen user interface, which use haptics to guide you through menus and provide visual and sensory cues to help you know when you have landed on a particular item in your car’s menu.

One recent device, heavily promoting its haptic interface, is this MP3 player:

Haptic technology emerged from the aerospace industry, a breeding ground for many advanced technologies.  When fly-by-wire was developed for airplanes, the pilots no longer had direct feedback from the controls to know when their aircraft might be about to stall.  Off-center weights on motors were added to the control set so that when fly-by-wire reaches a critical angle, these off-center weights afford feedback by vibrating the control stick, similar to the experience that direct controls afforded. Haptic interfaces in the medical field are being used to increase clinical proficiency and decrease medical errors and costs and to provide interactive medical image analysis.  Haptic feedback provides additional information that makes digital environments and interfaces more real, and therefore safer as a result of engaging more of our faculties.

Many recent developments using technology to add haptics include manipulating objects in 3D environments and feeling the boundaries of a virtual environment.  This extends the purposes from haptic feedback in videogames and the added level of realism to the use of sensory feedback in other computer applications and in personal digital assistants (PDA), such as iPhones.  The iPhone console already uses a vibration generator to signal the arrival of a phone call, text message, or anything else the user chooses. That same off-center motor can be used to simulate a number of different tactile responses, despite the surface of the iPhone being completely smooth.  It’s actually possible, knowing where a person’s finger is relative to a button, to provide the sensation of activating a physical button when in fact the surface is flat.

Other areas of exploration might include sensing when a photo is out of focus, when a direction is deviating from the planned route, or when a compass point has shifted, all by combining many of the existing elements within the iPhone.  Although the technology is now just experimental, the popularity of the iPhone and the fact that it has a robust and heavily supported programmed interface makes it easy for interface designers to consider not just the visual cinematic and audio aspects of the interface, but also the sensory aspects of the interface.  Not all of this tactile feedback is understood, yet, but as evidenced by the research, these sensory feedback controls will soon be available out-of-the-box to programmers and designers.

This new range of interface possibilities raises the desirability of applications, and their ability to differentiate themselves by providing a truly integrated or lifelike experience.  Haptics integrates a more complete use of our sense of touch with the senses of seeing and hearing.  We can expect even wider ranges of delightful experience through our expanding multi-sensory experience of interfacing with devices and the rich environments these create as they connect through location-based data, visual input from cameras, and data available over the network.  When the device knows where you are, and can present visual, aural, and tactile feedback, the result is a rich interaction with the interface. The possibilities are broad for exploring an environment that is connected through three of our five senses.

Written with Mary-Anna Rae

Long the holy grail for smartphone developers and recipients of much fanfare and funds, location-based services (LBS) present a number of big design challenges when it comes to sharing location information. Some LBS applications provide useful utilities by reading the user’s current location and using that information to provide useful location-based information to the user, like Google Maps, the mapping and directions service; Yelp, yellow pages plus business ratings; Nike+, a log that keeps track of how far users run; GyPsii, a diary that stores text, location and images; and cool augmented reality applications like AcrossAir’s London Tube Finder.

However, some location services that share users’ location information on a network, including those built by venture-backed upstarts with funds to the tune of $20 million, actually share location information without users’ knowledge or understanding. These services offer answers to all-important questions like “which of my friends or colleagues are nearby?” and “Here’s a picture of my living room at 188 Chestnut Street, in San Francisco.” These applications often fail to address the interface and usage challenges as they tread on privacy, technology, or social network potholes.

Privacy Potholes
Privacy presents a challenge to LBS application design since people don’t always wish to disclose their location, and want to control to whom and under what conditions to disclose that information.  Applications typically do a bad job of informing users, and of reminding them, when this information is being shared and with whom.  Doing a search on Twitter for “location iPhone” will reveal that people are tweeting their location to everyone, and probably unwittingly.  Other examples include TwitPic, which tweets your exact latitude and longitude along with pictures, and some Flickr apps save their location, too.  That fact is often lost to users.  It is somewhat of a stalker’s dream to Google or search on Twitter for somebody, find their current location or images of their children or other loved ones, and know their location.  Think of a thief who sees pictures of the interior of your house on Flickr and knows where you live.  Is it possible he could just go shopping online from Flickr and come rob your house when you Tweet that you are on vacation? Application designers need to better inform users, and let users control what private details they are providing and to whom.

Technology Potholes
Friend-finding apps are trying to connect people to their close network of friends. But these iPhone apps suffer from the limitation that iPhones do not broadcast location once the application is no longer running.  This leaves one’s network in the dark for the vast majority of the time, since no one keeps an app open for very long.  Android applications can run in the background, but iPhone applications do not.  The consequences for the battery life on these devices, if they are always updating their location in the background, may become an issue, too.  Until these technology hurdles are overcome, we won’t truly know how useful it might be to always know where our friends are right now, or how creepy it might be to feel watched. The killer friend-finding application is yet to be designed.

Social Network Potholes
The location-based social networking services are like unconnected islands that require circles of friends to download and use the exact same application. Until a central repository, possibly provided by Facebook, Google, or Apple, allows everyone to share information more seamlessly, these location-sharing LBS applications will remain islands with few inhabitants and resources.  Getting one’s community to agree on which application/island to join, and getting them to use that application, is a big problem.  I predict none of these systems will take off until there is a shared repository that all the applications can utilize.

Written with Mary-Anna Rae.

Our research and design experiments for e-commerce clients show time and again that visual detail and emotive motion engage customers at an emotionally profound level. Fortunately, technological advances and intuitive interfaces are making deeper engagement possible.

Detailed visuals can be worth ten thousand words

Surprisingly, not many e-commerce sites present visuals well. Although the capability to present inline images has been available since the first Mosaic browser in 1993, and visual overlays since early 2000, not many companies have spent the time and effort to present their products in the rich detail that customers want and expect when considering a purchase online.

Some product sites have clearly differentiated themselves with added levels of visual detail in the shopping experience.  One noteworthy example is Zappos, which does a good job of showing photographs from many different angles, and also provides many levels of zoom to look at minute details that otherwise are lost in images on the Web.

Another clothing Web site succeeds by using a technology called RealZoom, from A Far Site Better, that provides an extra level of visual detail through an intuitive, quick interface.  Betsey Johnson uses RealZoom, and customers notice. The perceived performance of these rich images is important, and sites need to optimize their entire interface with this in mind. The Zappos site does a number of things well in terms of enabling people to filter by size, show all products, and make selections that speed the shopping process.

Dynamic images, customizable for each customer, also create a compelling level of visual detail. Some auto manufacturer sites provide a sense of the final product by visualizing custom cars configured by customers to their tastes.  One of the most expressive sites in this category is Mini USA, which visually displays accessories as they are added and shows how the resulting car will appear.  There are ten million configurable combinations, but the options are seamless to the customer.

A site that combines visual richness with self-expression, and does it among a community of passionate enthusiasts, is a social networking site dedicated to styling clothing, called Polyvore, which lets members customize visual “sets” of fashion items from different designers, and share their sets with their online peers. This visual detail and expressiveness creates a number of strong, positive emotional responses.

We recently reviewed TheFind, which does a very good job of aggregating product information.  In one interface, it provides product details from sites all over the Web, including detailed views, as well as retailer sales and discounts, and what they call “UpFront” trust-building information that reassures shoppers of the credibility and trustworthiness of retailers participating in the program. The visual richness of this shopping aggregator helps it stand apart from other players.

Motion builds emotion through stories
With increased bandwidth we are able now to watch videos of products being presented, as evidenced by technology from companies like TalkMarket, a company acquired by Amazon last year.  Founded by ex-QVC executives, the service provides quick-to-start and easy-to-use product demonstrations that weave a story, when done well.  The addition of motion and stories to product visuals gives customers the opportunity to add layers of emotional meaning and to imagine its use and how it might feel in their lives, making it more compelling.

Similar to the difference between meeting someone in person and seeing someone’s picture, oftentimes seeing a product video gives a much better sense of a product’s “personality” than viewing a static product shot. When presented well in motion, as a story, a product can be much more compelling than its still image counterpart.

By using visual detail and emotive motion, along with the design recommendations that I discuss in The Design of Sites, Clean Product Details (F2) pattern, customers immerse themselves more emotionally in their shopping experience.

Ref: 2dnt9camgy

Now, new augmented reality interfaces are possible given the opportunities smart phones open up by combining GPS, compass and camera with wireless data connectivity. By being able to know where someone is, in what direction they are looking, combining live video with powerful data, we enable whole new classes of applications.

While definitions vary, in general augmented reality means integrating images and data from computers into pictures of the real world as they happen in real time. Though not new in itself, augmented reality actually comes in many flavors, including the variety that superimpose 3D objects and animations into a user’s view, like this clever GE Eco-Imagination ad you can play with yourself, as well as educational applications like this interactive book.

These augmented reality applications sometimes require special materials or hardware to view, so are more complicated to set up and use.

However, simple, engaging and intuitive new applications are now within the reach of millions of smartphone customers. These tools and games can superimpose on a smartphone screen a real-time view of the world and some very powerful data visualization, like this augmented reality navigation system.

The use of augmented reality information has been experimented with since the helmet-mounted display  systems of the 1960s, when Honeywell pioneered the devices for military use to augment pilots’ information.  Popularized in movies such as Terminator and John Carpenter’s They Live, augmented reality is now seeing some practical applications that challenge interface designers to create compelling experiences for customers.

Some fun and compelling examples of heads up displays have been used in videogames for years, providing statistics on speed of race car, health of a character, score in a competition, options available.  These interfaces point the direction in which innovative companies and designers are taking augmented reality now that technology is providing some practical applications for their creation and distribution.

Written with Mary-Anna Rae.

Eye-tracking as an interface usability research technology to complement less expensive methods has been highly debated among professionals over the years, from Jared Spool’s comments in 2006, to numerous articles by Jakob Nielsen, to more recent results posted by Joe Goldberg and others.

The fact is, eye-tracking tools have evolved in recent years.  Systems such as Tobii now enable researchers to quickly calibrate participants, and no longer require head-stabilizers. And the analysis software now makes it much easier to dissect the data, as it relates to the particular interfaces being tested, the alternative designs being examined, and the ways that research participants self-report their impressions.

With a visual scanpath recorded, the circles indicate locations where the eye dwelled briefly. Larger circles show where the eye spent more time.

Our conclusion is that as a tool, eye-tracking provides additional information that can be useful in a number of cases.  It helps us better understand why certain design alternatives succeed in some situations with participants and fail in others.  This information can be invaluable in diagnosing and improving designs.

Eye-tracking is by no means the only tool or even the primary one in a researcher’s tool chest.  The  multivariate experimental design, error analysis, and task analysis are primary. These tools and methods all combine to help us understand, diagnose,  and interpret user attitudes, intentions, behavior, and performance to maximize the customer experience.

Written with Mary-Anna Rae.

This webinar is no longer archived. If you have interest in the topic and would like to discuss, please fill out this form.

Webinar Time: April 23, 2009 at 10 AM Pacific / 1 PM Eastern

According to all the latest CIO surveys, the recession is certainly impacting IT budgets; particularly with projects now being brought in front of the business. Unless there is a compelling 6 to 12 month ROI these projects are often dead on arrival. Tough times demand focused proposals, world-class design and the best implementation plans. Join us for a practical Web seminar that delivers a set of best practices for creating compelling business cases for your projects and proposals that will knock the socks off the business. Please click here to register.

The principals of Naviscent, best-selling author on design Douglas K. van Duyne and design finance expert George A. Papazian will walk through the business models you need to present your business case and a guide for designing the right product, the right way - the first time.

Everyone who registers will receive a free ROI calculator you can use to build proposals, along with a useful set of slides that can act as a model for your business case.

If you were not able to join us for this webinar, you can view it here:

Link to Secret Sauce for Software and Web Site Success

You’ve worked hard to develop Websites and software, investing in product planning and development time. If you didn’t meet all your goals, you’re not alone. Now, imagine you learn the secret sauce to know how to invest your money for maximum benefit, and achieve your business ambitions. Douglas van Duyne, thought-leader, best-selling author, and principal of Naviscent, will take you through some practical exercises from his book on mastering interface management. Click here to join us.

Rapid prototyping is a key principle of iterative design. With it, you create rough-and-ready mock-ups for your clients that enable them to provide you with useful feedback. The rapid prototypes of the design are quickly and easily revisable, in response to the changes that the clients require. In this entry, we describe how to implement the rapid prototyping process, starting with the various design artifacts you created during the iterative web site design phase.

Site Maps, Storyboards, and Schematics
Typically, you develop the following three types of design artifacts early in the design and prototyping phases:

• Site Map. A high-level diagram, similar to a flowchart or a table of contents, which shows the overall structure of a site. Its purpose is to plot out the organization, information structure, resources and, to a certain extent, the navigational flow of the web site. The site map should include labels for sections and subsections that will be simple and make sense to the target audience. Designers sometimes use a technique known as affinity diagramming to create site maps. In this technique, designers create site maps on walls, using pens, markers, papers, and Post-it notes. This type of large-scale mock-up empowers team members to brainstorm together and it creates an immersive display that is particularly useful when working on larger sites. When the site map is completed, you can copy it to paper or take photographs of the design.

• Storyboards. A visual depiction of a sequence of web pages, usually sketched, that demonstrates the steps a customer takes to accomplish specific tasks. Storyboards are meant to be simple and functional examples that you can change quickly if need be, not highly detailed works of art. They provide snapshots of the design at particular points so that clients can determine whether the design team is heading in the right direction. The sketches might include information about the types of images, colors, and typefaces you will employ on the web site. You can present the storyboards to the client along with a narrative about the tasks the customer is trying to perform.

• Schematics. A preliminary graphical representation of the layout and content of individual web pages. These are not completed web pages at this point, so they often include placeholders and generic typefaces instead of the actual images and fonts that will go into the final product. Cleaning things up too much at this point might actually be a bad thing, because it might lead reviewers to focus on details, such as fonts, colors, and alignment, rather than more important issues such as content and navigation.

Progressive Refinement, Low-Fidelity vs. High-Fidelity Prototyping
Your design team can use prototypes to elicit immediate feedback from your customers. Most designers use low-fidelity prototyping to accomplish this goal. Although we do not recommend it at this stage of development, others might use high-fidelity prototyping. But just what are low-fidelity and high-fidelity prototypes?

Low-Fidelity Prototyping
As we’ve just discussed, you can use paper, Post-it notes, markers, pens, or even whiteboards to create rough sketches of a web site. Additionally, designers often employ cut and paste techniques, using scissors, glue, and photocopying machines. All of these design techniques are forms of low-fidelity prototyping, as illustrated in the following figure. It should be obvious at this state of development that these sketches are far from the final design in both their visual and their interactive details. Your design team shouldn’t waste time developing a highly-detailed site that is not pleasing to the client.

Use the set of low-fidelity pages your team has developed to test the design with representative target customers. Place the sketches in front of them and then ask them how they would complete a particular task. Based on the customer’s response, flip to the associated sketch to show them the outcome of their choice. In this manner, you can receive immediate feedback on the design, which enables you to create refinements, even in this early stage of the design concepts. Using this technique, you can often work your way through an entire iterative design cycle in less than one day.

High-Fidelity Prototyping
High-fidelity prototyping is a method where the prototypes include a lot more functionality and detail, mimicking the actual interface as closely as possible. These prototypes look more polished and complete because you create them using the same computer-based tools, such as Adobe Dreamweaver, as the final product.

This method is obviously more expensive and more time-consuming, and it is also more subject to flaws in the early stages of development than low-fidelity prototyping. It also requires more skill than low-fidelity prototypes sketches. For these reasons, we believe that it is best not to spend inordinate amounts of time and effort on high-fidelity prototypes at this early stage of the design process, when customers are likely to want major revisions of elements such as fonts and alignment. High-fidelity prototyping is far more useful during the later stages of the design process, when you want to test and refine elements such as the functionality of system features, keyboard and mouse interaction capabilities, and aesthetic issues. An example of a high-fidelity prototype is shown in the following figure.

Although we do recognize a need for high-fidelity prototypes in the later stages of development, more important issues should be discussed at this early point, such as the organization and overall structure of the web site. This is better accomplished through the use of low-fidelity prototyping. Additionally, creating low-fidelity prototypes saves time and is more effective in the early stages than high-fidelity prototypes that might waste time and cause endless arguments about what the customers might want. Our experience at Naviscent is that it is ten to twenty times faster and easier to create low-fidelity than high-fidelity prototypes. Studies conducted by usability professionals showed no significant difference in participants’ usability issues between low-fidelity and high-fidelity prototyping in the early stages of development.

Paper Prototypes Work as Well as Software Prototypes

Avoid Computer-Based Tools in the Early Design Stages
When you use computer-based tools in the early design stages, test participants and clients do find usability issues, but will also tend to focus on the aesthetics of the high-fidelity prototype. You may hear comments such as “I don’t like the colors you are using.” Or maybe “Can you move those buttons higher on the page?”

Instead of computer-based tools, we recommend putting together the following low-fidelity prototyping kit:

• Lots of white and colored construction paper
• Lots of index cards
• Lots of Post-it notes
• Transparencies
• Scotch tape
• Scissors
• An X-ACTO knife
• Glue stick
• Lots of different colored markers
• Pens
• Rulers
• Duct tape

With low-fidelity prototyping, clients tend to focus more on the overall structure of the site and its interaction capabilities. We don’t usually recommend computer tools that support the progression from low-fidelity to high-fidelity prototyping because they are not widely available in the market. However, we at Naviscent have developed a tool we call DENIM that enables you to sketch low-fidelity prototypes on a computer. The following figure shows example screenshots from our design tool.

When You’re Ready, Switch to Computer-Based Tools
Once you have created low-fidelity prototypes on paper, the time to switch to computer-based tools is dependent on your client’s expectations and on your work practices. If you find that you are at the point where you must save designs in order to email them to others, you might be ready for digital tools. If your clients perceive low-fidelity prototypes as unprofessional, you might need to take the time to create high-fidelity mock-ups, although, as mentioned earlier, doing so might direct the discussion towards fine details too soon.

See some software prototyping tools:

• iRise
• Axure RP
• Visio
• Omnigraffle

An alternative solution to producing high-fidelity prototypes too soon is to use what we at Naviscent call medium-fidelity prototypes.  This type of prototype includes many more details about content, but does not distract clients or customers with colors, fonts, or images, which is why it is a good compromise when you need to present mock-ups to your clients. An example of a medium-fidelity prototype is shown in the following figure.

When your design team reaches the point at which most of the major structural and interaction issues are resolved and satisfactorily tested with customers, you’re ready to create high-fidelity prototypes that mimic the final design. Your team may create these high-fidelity prototypes with HTML-based tools such as Dreamweaver and graphic design tools such as Adobe Photoshop or Illustrator. At this point, you don’t have to present real data; just create sample images to give people the feel of the final site.

Horizontal and Vertical Prototypes
In the early stages of design, your team might need to create horizontal prototypes that show a broad range of what the final web site supports. This enables people to get a feel for the entire design, even though they cannot perform tasks. This type of prototype might show top-level pages with links to second-level pages whose features don’t yet exist. You use horizontal prototypes to ensure that the basic features of the site are present and organized logically.

In some cases, your team might also need to flesh out and test steps for a specific task that is more complex or that merits further exploration. In this case, you use a vertical prototype. This type of prototype implements only the key pages for completing a specific task, and not any links that connect to other tasks or other parts of the site.

There are instances where your team will need to combine these two prototypes, as illustrated in the following figure. For example, you might need to create a horizontal prototype for the entire top level of the site and a vertical prototype to focus on one particular feature, to illustrate that feature in detail.

Limits of Prototyping
Some of your clients might feel that creating prototypes wastes time that you can better spend building the actual site. Make sure that you take the time to explain the process and the value of creating and testing rapid prototypes to your clients.

When presenting medium- and high-fidelity prototypes to clients, be sure to explain that these are not a finished product, but that they only represent an early design stage, and that the elements are still open to any changes that they might desire. Don’t lead them to believe that the project is near completion when it isn’t.

Finally, while prototypes are useful for gathering information, such as usability issues, they are not useful tools for testing navigational limitations in detail, estimating download speeds, or testing the quality of customer service.