In the tech community, some folks have been talking about “augmented reality” for years. But only recently has it started to really catch the attention of a more mainstream crowd. What is this seemingly sci-fi catchphrase, and why should you be paying attention?

What IS Augmented Reality?

Augmented Reality (or AR) has been referred to as a way to “layer ‘virtual story worlds’ over the real world“.

Ever listen to an audio guide while traveling? You were augmenting your experience audibly. Augmented reality can allow you to do this visually as well.

How’s THAT possible?

Chris Grayson has created this simple video to explain how a combination of features on your cell phone can make mobile-aware AR possible:

And this is for real?

Yup! Owners of the iPhone 3GS users can get their first taste of AR googness in the new Yelp application. While there has been some controversy surrounding the inclusion of such a feature in the application, this doesn’t overshadow the significance of its inclusion at all.

The Yelp iPhone app has always offered an ability for users to find services based on their location, but Augmented Reality allows for an enhanced user experience. Looking through the “monocle”, you can see the street in front of you, but with Yelp results superimposed.

So what’s the controversy?

Developers had been asking for the ability to include Augmented Reality in their applications, and Apple had told them to wait until the next iPhone Operating System (3.1) upgrade. The Yelp developers tapped into some undocumented, private APIs to build out this functionality. The concern among developers is that this may further cause Apple to slow down the approval process on new applications to ensure they’re not violating the App Store rules. (Note: I seem to recall a Google App that did the same thing, without so much uproar).

Cool, sure. But where’s the applicability to my organization?

With AR just starting to seem viable and likely to have mass appeal, we’ve only started to consider where it may be used:

• historical recreations of places (i.e. tours)
• traffic updates
• how-to instructional guides
• home renovations/decorating

The iPhone is so cutting edge to support this!

Hm.. well, not really: the Android phone has supported Layar, an Augmented Reality browser, for several weeks now. And Augmented reality isn’t just a “mobile phone thing”, it is also showing up in the Entertainment industry in full force.

Below is a product demo of a new augmented reality game coming out from PlayStation in a few months:

For more about augmented reality, you can check out the Facebook page dedicated to such, or tagged articles on ReadWriteWeb.

Related posts:

1. Why I Switched from an iPhone to the Nexus One
2. It’s Just a Phone!
3. what’s the deal with…Agile Software Development

The web is a challenging platform to develop for: there are an incredible number of system and browser configurations to consider. Thankfully, the folks at Imulus have released a product for times when “the site doesn’t work on my computer” isn’t enough information.

Support Details is a simple site that determines various details about the visitor’s configuration, which can then be saved or emailed. Rather than having to explain to less-technical folks how to determine if they have Javascript enabled or not, they can simply be directed to supportdetails.com.

They say the best products are designed to solve problems. As Co-founder and Client Services Manager George Morris wrote in the blog post introducing Support Details, the “idea started as a way to save time…[w]e simply were losing too much time to explaining the “how to”.” They came up with a straight-forward solution (the website title cheekily refers to the site as “Tech support anger management”), and now are sharing it with others.

Simple. Useful. Smart.

Related posts:

1. Should you post an accessibility policy on your website?
2. What is Flash Support? (and Can Someone Tell Nintendo?)
3. Want effective online marketing? DON’T build a website.

No one talks about Web 2.0 anymore. This may be because we now talk about social media, and at first blush, we may assume the terms are interchangeable. Sure, Web 2.0 was a great term to use to describe the evolution of Websites: from ‘Web 1.0’, when we went online to read, and ‘Web 2.0’ where we had the ability to publish, comment and remix.

But social media isn’t about Web sites. It’s not about places, or sites, at all. My stock phrase: social media is about people using technology to communicate.

Web 2.0 described the relationship between people and online content. They could now publish, comment or edit. The relationship was about a person and … stuff. Social media describes the relationship between people, and technology is simply what makes that relationship easier, or possible at all.

I’ve never considered a Wiki “social media”. Yet it’s a fine example of Web 2.0 technology: anyone can easily create or modify content on the Internet. I actually tweeted this perception, and Chris Abraham of Abraham Harrison LLC asked how I would categorize Flickr or Youtube.

Beyond the fact that those are specific properties (and I much prefer to speak to concepts than specific services), I appreciated the question, as it helped me to refine my thoughts. Flickr and Youtube are great examples of the power of Web 2.0, as there may be value to using the services even without engagement with others. An individual may choose to store and categorize their own content on Flickr without ever engaging with others in a social fashion.

Compare this to Twitter, which really can’t be much fun at all if you’re the only one there (remember Pownce?). Twitter is a service based around connections between people. I can use Wiki software for myself simply because of the ease of publishing (and indeed, I did: all my masters thesis work is in a Wiki).

I admit, the lines may seem blurry, and for many, they don’t matter at all. But instead of assuming we need to incorporate “social” aspects into every online initiative we take on, it may be worth asking ourselves which benefits of the online realm we really wish to exploit. Is it the ease of engagement and manipulation of content, or is it about facilitating relationships between people?

Sometimes, old school Web 2.0 may be just what we need.

Related posts:

1. The difference between social media and social networking
2. Razorfish’s Patent on Measuring Social Media
3. Will social media render search engines obsolete?

For some of our projects at work, we use a content management system like Drupal, Joomla or WordPress to run our websites. This allows our clients to add or edit content more easily, and it also eliminates a lot of custom coding by a developer.

A CMS (to learn more about content management systems, check out Gary Moneysmith’s blog post 4 Things Non-Technical People Need to Know about Content Management Systems) generally comes with a default theme: you can install the CMS on your server and be off and running. Naturally, most folks want some level of customization, be it visual or functional.

As a developer, I am always quick to acknowledge that anything is possible, given the time and the effort. But if you are starting your project with a given CMS, ostensibly that means you are interested in leveraging what it offers. If you deviate and customize too much, (“Frankensteining”, as Gary terms it), are you really gaining the benefits from starting with the system?

Which brings me to the title of this blog post. Wireframing is often intended to communicate the overall design of a web application, denoting hierarchy and features. If you’re starting with a CMS and wanting to really leverage the power of the CMS to the greatest extent you can, do wireframes actually detract from this effort? Starting a web project from scratch, I’d expect a wireframe to drive the design and development (ok, arguably wireframing is part of design). Yet when you start with a CMS, you’re well down the path to development, and a wireframe that doesn’t follow the standard parameters of the CMS may necessitate extensive rework.

This is not to say that you can’t change anything when using a CMS. Each system has the option of installing pre-made or creating themes and plugins. As WordPress creator Matt Mullenweg stated at Wordcamp Denver last Fall – chances are very likely with all the possible customization options that no two WordPress installations are the same. (There are over 15 MILLION WordPress blogs out there)

How does your wireframing change if you’re using a CMS? Do you stick to the toolbox you have, or not hold yourself to such constraints?

Related posts:

1. UI and Magic!
2. what’s in a name… how should I know???
3. 4 WordPress Themes to Take your Blog to the Next Level

While at Resource Interactive, I took training in and worked on several products with the ATG product suite. ATG is at the core an e-commerce solutions provider, with a stated goal as follows:

Our goal: to power the world’s most engaging and rewarding online shopping experiences. We are our customers’ first stop in providing the solutions, services, and ongoing guidance needed to power a more relevant, personal e-commerce Web site; continually attract and captivate new prospects; convert them to buyers; and ensure their satisfaction so they become loyal, repeat, profitable customers.” (emphasis mine)

How can software ensure something is engaging, rewarding and personal? Well, by offering a more personalized experience, I suppose. When I was enrolled in ATG training last Spring, we spent a fair amount of time learning how to display relevant content based on explicit user-specified preferences and more subtle user behavior on the site. Increasingly, we come to expect that our experience on a web site will precisely meet our own needs. And indeed, with the plethora of resources online competing for our attention, web visitors have the luxury of looking elsewhere if a site is frustrating or in any way lacking.

Amazon.com and Pandora are two well-known services that make recommendations based on the users’ previous interactions with the site. In some way, this is the equivalent of the waitress remembering our “usual” and letting us know about something new on the menu they think we’ll enjoy; we are forming a relationship, and there are inherent benefits thereto.

Both of these services offer suggestions based on what we’ve done. But as the web becomes increasingly social, the notion of leveraging the wisdom of the crowds and the power of personal influence may come into play. You’ve likely seen this before, but did you pay attention? Again, Amazon lets you know what others purchased. Does this help sway your decision, or introduce other options?

Facebook taps more directly into your network. Friend suggestions may be based on your networks, your employment or school history, shared friends.. or other attributes. Recently several people have noted they are being suggested friends who share the same name as their existing friends. Unlike the Amazon and Pandora examples earlier, there is no link to see why these items are being suggested: Facebook is blatant in their name-dropping. The entire basis of their social ads (in all the incarnations, from beacon to sponsored ads with photos to friend recommendations) is to serve up “tailored ads” based on “actions your friends have taken on the site”. Whereas ATG stuck to providing an enriched experience based on an individual’s behavior, this extends to their trust network as well.

Recommendations are intended to offer a more engaging, personalized experience. Or to increase interaction and sell product or services. Recommendations may be subtle (showing contextually-relevant content), or explicit (“you may also like”). The rationale behind the suggestions may be disclosed or suppressed from the user, and lastly the recommendations may be made based on system rules, the behavior of the user or the behavior of the user’s network.

Are there certain situations where these different types of recommendations work well? Obviously for explicit recommendations based on the behaviors of friends, the site must be aware of such a network. But beyond those logistics, there must be merit to such a recommendation. I’m not necessarily going to select a paint color, a washer and dryer or a home based on the preferences or buying habits of my network. But offering me a complementary color palette based on a color I select provides a useful service. In contrast, the recommendation of something social like an event is likely to be much more effective if it comes from someone within a trusted network.

How do you think these different types of recommendations affect your purchase or engagement decisions? Are any more appealing than others?

Related posts:

1. what’s the deal with… personalization
2. Making RIAs Accessible
3. The Anatomy of Buzz Revisited – Book Review

Sometimes 140 characters just isn’t enough.. Mark Scholl just tweeted: “Google now making an OS. Strategy of taking on Microsoft by becoming Microsoft?”

That is absolutely the only information I have on the OS. But yes, I already have thoughts.

My immediate response (but I have plenty more thoughts I’ll have to return to later, particularly after reading about it some):

Not so. Microsoft built a product, back when we bought commodities. Google is selling a service. We’ve already seen the “intelligence” that comes from Google knowing way more about us than we may expect. The Google OS is going to be a personalized experience, not a product we can just pick up and buy.
It’s an interesting idea, to jump into the OS field. I *think* it will hurt Linux more than MS. I can’t imagine enterprises going this route, despite the fact that Gmail and other services are finally “enterprise-ready” (for the past how many hours?)
So what if I run the Google OS at home and at work? Will the experiences both be tied to my Google account?

Related posts:

1. More thoughts on Google FriendConnect
2. Google Friend Connect – first (premature) thoughts
3. Google “optimizing for mobile”

I’m not a web designer, by any means. Sure, I have a graphic design certificate, but my design skills pretty well peaked in 2003 when I completed the online program (although my portfolio is still featured on the sessions.edu site!)

But as someone who’s been taking amazing designs and making them functional for close to a decade, I have some ideas as to what makes design work for the web.

1. Anticipate changes

Who reads webpages anymore? People want content to be updated frequently. That means limit the custom typography or graphic headers (or at least consider how to use custom fonts on your site. Look at blogs: they are really text documents, perhaps with an image inserted. If the image isn’t there, the page is still available. If every page on your site requires a custom graphic before it’s published, you’re slowing down your time to release. Similarly, don’t build so rigid a design that the change of a word or phrase will throw off the entire page layout. Things change

2. Respect the medium

Unless you’re building an RIA (rich internet application), these are PAGES. They should read like a page, with a title and body copy. Think about your content as you would a text document: is it logical from a glance what the hierarchy of content is?

3. Be consistent

Unlike a print ad that may stand on its own, a website is a complete entity. Use the same conventions across the site, in terms of fonts and layout. If you deviate from it, make sure it is intentional and of benefit to the site visitor.

4. Anticipate people arriving on any page of your site

With Google indexing every page of your site and people being able to share pages with friends, you must anticipate that not everyone will visit your home page first. Does your site make sense to someone arriving on an interior page? Can they navigate elsewhere through the site?

5. Get an interaction designer to help

…yes, it’s a cop-out. But one key feature that web offers over print is the opportunity for interaction. There is no equivalent in a print design for error messaging, progressive disclosure, or user flows. I see the evolution from print to web design as both a widening (you are designing a series of pages that are related) and a refining (you are designing components or micro-interactions within a single larger design). Many will argue that an Interaction designer uses none of the same tools as a graphic designer, and I shouldn’t assume a straight-forward transition. Yet I’m not sure that every team can have both an interaction and a graphic designer, so at some point those skill sets need to merge.

As Jakob Neilsen stated back in 1999:

Anything that is a great print design is likely to be a lousy web design.There are so many differences between the two media that it is necessary to take different design approaches to utilize the strengths of each medium and minimize its weaknesses.

• Print design is based on letting the eyes walk over the information, selectively looking at information objects and using spatial juxtaposition to make page elements enhance and explain each other.
• Web design functions by letting the hands move the information (by scrolling or clicking); information relationships are expressed temporally as part of an interaction and user movement.

Related posts:

1. “I don’t really like images” – what not to say to a designer
2. HTML Templates
3. Designing the Moment Book Review

Have you ever wondered why most websites use the same handful of fonts? There are only a limited number of fonts that every computer ships with. These are known as “web-safe fonts“, and most developers stay within that selection to ensure a consistent experience for all site visitors.

So how do you get beyond Verdana and Times New Roman? There are three options:

1. Images
2. Flash
3. sIFR

Custom Images

The most straight-forward solution is to create an image of the text you want. This way you can have complete control over the size and spacing. This is both a good and a bad thing: some people need to increase the font size on their browser to be able to read the copy. When you use an image, you may be limiting the ease of use of your site.

Using images in place of text also means you need to put a new file up on your web server every time something changes. This can be time-consuming if you have a lot of copy to change, and there may be a slight lag on the user’s end while they are waiting for images to be displayed from the server.

Lastly, putting content into an image makes it illegible for machines. You will need to ensure your developer is adding “alt text” (“alternative”) to any images with text in them. This helps users of screen readers as well as search engine spiders to understand the content of your page. It may not be pretty, but it will ensure the content is available for those who aren’t looking at your interface.

Flash

Building a site (or even just a portion of a site) in Flash means you are not limited by what fonts the user has on his system. Flash runs in its own player and all the necessary files (fonts, images, etc) are included within the movie itself. Note there may still be slight differences between a Flash movie made on a Mac and one made on a PC.

The biggest challenge to building in Flash is having a Flash developer create it. A Flash movie can be created with all the assets incorporated directly into the .swf itself, in which case the file itself must be changed and “republished” any time there is a change. Alternatively, a .swf can read from an external data source, so changes made in a database, an XML file or elsewhere can simply drive what’s being displayed in Flash.

Google is steadily getting better at indexing Flash, so there are fewer concerns that your content is being blocked from search engines or users of assistive technology. However, Flash doesn’t run on the iPhone, so you do risk preventing some visitors from accessing your content.

sIFR

Another technique is sIFR (Scalable Inman Flash Replacement). sIFR replaces text written to the page with a small Flash piece. This overcomes some of the limitations listed above: content is written to the page so it is indexable, and there is no need for a developer to create new Flash pieces when things change.

Making sIFR look good takes some work: generally the text is seen on the page for a moment before it is replaced, so effort must be made to ensure it is not too distracting a ‘swap’.

sIFR was used to get the custom font in the tagline. The first image shows what the site looks like before the Flash loads (or if you had Flash disabled), the second is the desired effect.

The best option?

There is no single best option for using custom fonts, and it’s perfectly okay to mix and match the options. On the People’s Choice Awards site (from which all the examples I’ve displayed were taken), we used all three:

We used images for the navigation. These were unlikely to change frequently. For headers, we used sIFR, and for more interactive pieces we created Flash modules. These read from an external data source so that we could update the content via an admin interface and simply have it displayed within the Flash piece.

So while there are a suite of standard web fonts to use for body copy, there are certainly options for including custom fonts as well. It’s simply a matter of balancing the ease of update and use with the esthetic benefits. Knowing these options and the implications can help with such decisions.

Related posts:

1. 5 suggestions for print designers moving to web
2. Headers and Images – Alt Text and the Weight Factor
3. “I don’t really like images” – what not to say to a designer

Whether or not they’re familiar with the term, most Internet users have encountered a CAPTCHA. The contrived acronym stands for “Completely Automated Public Turing test to tell Computers and Humans Apart,” and the most common incarnation is an obscured series of letters and numbers that the site visitor must visually decipher and type in. The idea is that a human may do this, while a sightless bot cannot. However, this also has some obvious challenges with regards to accessibility, and programs are getting increasingly sophisticated and can now crack many of these barriers. So moving beyond simple character recognition, the next generation of CAPTCHA seems to tap more into human cognition and spatial manipulation.

In one of those great examples of an idea whose time is nigh, it appears that about the same time Marcos Boyington and his brother at YUNiTi.com implemented something on their site, blogger Taylor Hayward wrote about such an idea. Poor Michael G. Kaplan actually developed a model for a 3-D CAPTCHA this idea back in 2004 or 2005, but it never caught on. (His page describing the model claims “patents pending” – who knows what specifically he was hoping to patent, and what the status of that is).

The idea behind these recent 3D CAPTCHA designs is that a human can recognize an object and manipulate it spatially in his mind. This is a step beyond character recognition/repetition and involves an additional level of cognition and understanding. In Hayward’s model he specifically mentions the use of animals, as he claims that humans are “currently able to identify animals faster than any computer given a changing selection of images.”

credit: Taylor Hayward

I’ve never been a big fan of CAPTCHAs from an accessibility standpoint, so I won’t belabor the point here. A blind user is not going to be able to use a 3D CAPTCHA. But what of people with dyslexia: will these tests be easier for them? Or are there other conditions that will find this task particularly hard? It’s been several years since my Neuroscience class, but I am not sure that people with difficulties with depth perception or other cognitive difficulties would be able to pass this CAPTCHA. I’ll admit that the second picture on the YUNiTi CAPTCHA event has me stumped: that’s a pen, isn’t it? I don’t see that as an option…

I love the fact that as technology gets more sophisticated, we are compelled to create experiences that are more closely tied into traits and talents that are uniquely human. We are forced to learn more about our own minds, actions and behaviors so as to distinguish ourselves from our creations.

(Original post from CNET: 3D-based Captchas become reality)

Related posts:

1. Designing the Next Generation of Web Apps (@Media Notes)

I’ve been using WordPress for this blog for several years, and have never paid much attention to all the themes available. But if content is king, aesthetics/ease of use is queen, and we all know which is most important in chess.

A few months ago I invested in the thesis theme-slash-framework, which provides a way to create custom functions that don’t require editing of the core WordPress code. This makes upgrades trivial, and it is easy to debug errors. Beyond the development benefits, the Thesis layout is attractive, and can be seen only slightly modified on many WordPress blogs.

Over the weekend I attended Denver WordCamp, and was introduced to a few more impressive themes. Matt Mullenweg pointed out the beautiful Monotone theme. Ideal for photoblogs (and geeks with no eye for design), Monotone modifies the color scheme of each blog post based on the first image of the post. Every single post therefore has a unique look. I don’t even have a camera, but this theme has me wanting to set up a photoblog just from the sheer elegance of it.

Matt also mentioned the Twitter-inspired Prologue theme. Evidently the folks at Automattic use a password-protected version of a blog run on Prologue to keep track of their tasks and activities. Who needs yammer? It seems to me that this theme is best used for a multi-author blog, so I’m wracking my brain for a project I can use it on. The theme certainly seems best suited to short (twitter-like) posts, so I wouldn’t necessarily want to advocate it as the sole blog theme for an organization. But what if a prologue-themed blog were to serve as an aggregator of posts everywhere, potentially with shortened URLs (similar to a tumblog)? I think there is certainly a possibility there…

And I would be remiss not to mention the amazing Carrington ‘CMS Theme Framework’ by Alex King and the guys at Crowd Favorite. Carrington isn’t a typical theme that you simply drop into your WordPress install. Rather than botching an explanation of my own about what makes Carrington special, I’ll refer to the docs:

Carrington is an attempt to better abstract WordPress theme organization, and simplify commonly needed theme functionality.

Theme functionality is broken up into thoughtfully crafted abstractions to enable customizations at different levels (the loop, the post/page content, comments, etc.) and a context-aware hierarchical template override system that chooses which template to be used for each segment of the theme.

While the thesis theme has a single “Custom Functions” file to add special functions and override default WordPress behavior, Carrington introduces a templating approach with an amazing level of granularity, allowing for a robust (and easily portable) system. There was one question in the presentation about ease of upgrade and backwards compatibility with wordpress, and Alex did recommend some testing to ensure compatibility before performing upgrades. This is something that Thesis appears to handle very well, since it is much closer to the original WordPress code.

Another sign that this is not just a WordPress theme is the recent release of Carrington JAM, where JAM stands for Just Add Markup. The core of Carrington is the way the files are structured and elements are externalized, not how the data is actually presented. As the documentation states, the intended audience is for developers only!

It is estimated that 25% of all Internet users visited a WordPress blog in the past month. With hundreds of possible themes, do you not owe it to yourself and your readers to provide them with something beyond the standard layout? If you expect a visitor to invest some time reading your site, should you not also invest in giving them something special?

Related posts:

1. what makes good code?
2. Do you need wireframes if you’re using a CMS?
3. Code repository