The pulse of Alexander Interactive

The Font-Bot Project is something I started for a couple of reasons. The first reason was I wanted to design a site with new HTML 5 markup and CSS3 properties. The second was, as a designer turned full time Front-End-Engineer, I needed a creative outlet.

I didn’t really just want to markup a site for a fake company or a new design portfolio. I wanted to create something that people would enjoy, and visit and maybe even use. As the web is going through somewhat of a type renaissance with the adoption of @font-face, I have become increasingly interested in learning more about typography and how I could use it in my pages. I am also very interested in robots. I have no idea when this started but probably around the time of Transformers and Robotech.

This is where the idea was born – when I was in art school I remembered doing exercises where we would have to design things using only type. So I decided to make the world my classroom and ask my students to create robots out of type.

But what good are dangerous looking robots if they are just standing there?

I figured that since I couldn’t actually make the robots fight that a voting system with a damage bar would bars would be a great addition.  I built the site on WordPress and used one of the many polling plug-ins out there to create the damage system. I also added the comments section so people could talk about the robots they liked and why, or so they could just talk trash about the one they didn’t vote for.

For me Font-Bot is just an ever evolving personal project. I am constantly making small tweaks to it with the feedback I have received from other designers in the community as well as the participants.

It has given me a lot more than I ever thought it would. I get great emails from people who have visited the site and enjoy it. I just received one from a college student in Tennessee who said his entire typography class is making font-bots as a project. I have also been lucky enough to receive a pretty steady stream of submissions. I even get submissions from non-designers, which is great. Just recently I received a submission from a writer. It has also been linked to in several online publications, most notably the recent mention in Smashing Magazine.

I realized the importance of personal projects through this experience. The site was not only fun to build, but also a lesson in design and development for me. It was one of my first experiments with the Modular Scale by Tim Brown. (You can also read more about the scale and Tim Brown here) It was also the first site I ever built using HTML 5 markup, and it built completely on WordPress. Although it’s not the first site I have built on WordPress, each one ends up teaching me valuable lessons.

I encourage other designers to create something for themselves and give it to the world. Doing so keeps your skills sharp and keeps you on top of your craft.

Black Friday, Cyber Monday, and the following Thursday are just days away… Holidays are right around the corner. We’re not looking to change the world here at Ai, but we do want to play our part in making this upcoming year a safe, secure and profitable one. That being said, have a look at an article I recently wrote which was published in the B2C Marketing Insider.

12 Tips on Creating a Safe Online Customer Shopping Experience

“84% of polled Internet shoppers don’t think that online retailers are putting enough effort into protecting customers” (Forrester Research, Inc)

The E-commerce holiday shopping season is upon us and online retailers are busy implementing new shopping features, social campaigns, analyzing their test results, and redesigning their funnels from browsing to checkout.

The experts are out in force: Focus on usability! Optimize your product page! Come up with brilliant holiday promotions! Study the shopping trends! Yeah! Yeah?

No. Don’t waste your precious and ever-dwindling time focusing solely on usability and Ui improvements. Bottom line: If you don’t have your customers‘ trust and confidence, you won’t convert–regardless of all the improvements that your testing results indicated you should make.

This holiday season, make it a priority to ensure that your site is providing your customers with the sense of safety and security they are longing for in their shopping experience. Use our tips below to ensure your customers spend their precious time deciding which product to buy from your site, rather than then if they should even buy from you at all.

Prominent Contact Information

Contact information should be prominent and in a consistent place within your header and footer so that your customer knows where to go when they have questions or encounter issues. Display both phone number and email address so that your customers can contact you in the manner of their choosing.

Privacy Policy

Include links to your privacy policy on all transactional pages. The ubiquitous footer link is a good place to start, but too often overlooked. On transactional pages, make sure you have it prominently called out in the body of the page, above the fold. Spell out pieces of your policy as needed. For example, when asking for an email address, state your email usage policy right next to the field. Best Buy says this perfectly “Best Buy does not sell, rent, or trade your personal information to third parties”. Clear, blunt and to the point. As it should be.

Don’t Hide Costs

Transparency in shipping costs and delivery times is key – especially come holiday season. Be sure to provide all of the actual costs up front, including shipping, handling, and sales tax. These can have an enormous impact on the final price. According to OneUpWeb, 95% of customers want to know the exact cost of the order before proceeding into checkout. There is no better way to put the kibosh on a potential sale than to withhold additional costs until later in funnel.

When the user can expect to receive their package is enormously important as well, especially to shoppers cutting it tight during the holiday season. Show this information as early as possible as well. This is actually a deciding factor when it comes down to those final few days. Shoppers are willing to pay a premium as long as you can provide them with the security that it will arrive on time, as promised.

Return Policy and Shopping Guarantee

Shoppers want to know what their recourse is if their item arrives and is damaged, the wrong item, or just simply not what they wanted. Be sure to clearly spell out your return policy so there won’t be any surprises later. Do you have a shopper satisfaction guarantee? Nice! Again, place this prominently above the fold, and inspire your shoppers with confidence that they can’t make a wrong or irreversible decision.

Anticipate Their Concerns

Be mindful of the various sensitive touch points throughout the purchasing process.  Address concerns before they even arise. If you expect your customers to share private and personal information with you, you need to address the reasons why you need the information at the appropriate times.

• A “We 100% guarantee your safety” link right next to the checkout button, and in checkout header that leads to a DHTML popup with your 100% satisfaction guarantee inspires confidence and keeps the user in the funnel.
• “We will not share your email with anyone.” next to email field lets user know you aren’t going to sell their email address.
• “Shipping details” tied with product, in cart and checkout, makes user aware of costs and availability early and often.
• “You can always change your order later” when tied to a call-to-action removes some of the hesitation associated with doubts on whether to commit at that exact moment.
• Don’t be afraid to invite phone calls. A sale is a sale. Including “Prefer to checkout over the phone? No Problem. Call us at…” at the top of your checkout give shoppers a sense of security even if they don’t plan on calling you.

Apply the Human Touch

Ten other sites may sell the same product, at the same discounted price, and have the same safety features in place. Differentiate yourself by emphasizing a personal touch and telling your shoppers that you completely understand their concerns. Give them that warm and fuzzy feeling that they are in good hands by hitting the emotional aspects of shopping.

Using the right tone and personality makes a difference. It is comforting for a customer to see “Please don’t hesitate to call us with any concerns or questions. Your security is our sole priority.” compared to a simple link to the Help Section. Instill confidence in your customers by speaking to them like human beings, rather than unique visitors, throughout the shopping process.

Your “About Page” and Value Proposition

Part of converting the customer is making them feel confident that they are in good hands. The ‘about page” is an often overlooked part of creating a secure shopping experience.

Are you family owned? Are you quirky? Are you a huge company that started off with two people in a garage? Do you donate a certain portion of profits to charity? Don’t let “About Us” be one paragraph of fluff about commitment to selling great products. Shoppers will see right through this. Be yourself. Shoppers have a greater sense of confidence knowing that they are at a real store run by real people.

Make a Good First Impression

Visual design has a huge impact on new customers feeling safe. Shoppers will form an opinion of your company within five seconds of seeing your home page. Want them to feel safe, and not think you are a fly-by-night outfit? Invest in design. And it doesn’t necessarily need to be award-winning, gorgeous visual experience. The site’s design need to give an instant sense of credibility and trust to visitors. Even though customers may not be entirely conscious of it, good design inspires confidence.

Performance & Stability

A slowly loading page, a site that’s down, or obscure programming error messages can raise instant doubts in the shopper’s mind. It is likely they are in comparison shopping mode, so if they were to leave one site and arrive at a site that loads slowly, or not at all, then the experience comes to a quick end. If they see errors and messages they don’t recognize, they will doubt your professionalism and whether their information is safe on your site. A solid technical implementation is as important as a great design.

Badges, Tigers and Seals Oh My

Seals of approval from TRUSTe or Better Business Bureau Online are widely recognized, but remember that a seal is only a graphic; it can be counterfeited. To be sure, make sure you link to the certifying agency’s site that profiles the merchant information. Also, avoid the Times Square approach putting eight different seals on your site. It diminishes the effectiveness. If you really feel the need to bombard 8 seals on there, all I ask is that you use the animated graphics. At least your savvy visitors can get a laugh.

Sweat the Small Stuff

Be sure your site has been thoroughly reviewed and that there are no misspellings or grammatical mistakes. They may seem tiny, but they will immediately cast your professionalism in doubt.

Security Through Social Validation

Social validation is a proven factor in influencing how people purchase products, and it’s no different when it comes to influencing why they should shop at your site for these products. Customer dialogue, reviews and interactions (regardless of what is being discussed) brings instant credibility to your site. People want to know that other people shop at your store. They want to see activity and not just take your word for it.

Now more than ever, privacy is a huge customer concern. Between Facebook privacy issues, Google ego-searching, and countless ads aggressively targeting hackers and screaming identity theft shoppers are only getting increasingly more sensitive and aware of the how, why, and when their sensitive personal information is used.

As online retailers, it is our responsibility to provide a safe and comfortable shopping environment for the customer, both online or off. The most successful businesses are able to instill confidence in their customers, and adding a relatable human touch. They develop a trusting, ongoing relationship with their customers to ensure repeat purchases and loyalty.Look folks, lets not forget – it’s the holidays! Do your customer and your bottom line a favor by letting them focus on giving rather than worrying. So you better be good for goodness sake.

PSFK has published a report (disconcerting, damning or riotous, depending on your station) showing that many top luxury brand websites don’t function on the iPad. (That image above is the Prada home page.) Given that Apple buyers are often luxury product consumers, this is a glaring omission for some of the world’s strongest brands.

The iPad is a reminder that the web is now rapidly moving away from the “build a website, let it run” strategy. A growing diversity of web-enabled devices is going to force companies to build websites that make usability the prime directive. The direct problem is the use of Flash, but the real issue is the lack of universal accessibility.

The growth in broadband mobile networks has led to rapid adoption of web access by consumers. Smartphones are nearing 20% of the American cellular marketplace and are expected to reach 30% soon. Ai clients saw growth in mobile traffic as high as 600% over 2009 alone.

The iPad is the latest and most profound bellwether in this usage shift. Contemplating how to service users with 1.5″ BlackBerry screens was one thing; dealing with iPad users, with their 1024×768 screens and just-like-a-laptop-only-better expectations, is entirely another. And while the iPad may be just a first step in an evolution, a million unit sales in a month suggests someone found the keys to the steamroller.

Computers are not going away; manufacturers shipped 68 million of them in 2008 alone. More important is the fragmentation of the marketplace, which, years after homogenizing almost entirely in Internet Explorer for Windows, is now an open landscape. Four different browsers have substantial (greater than 3%) market share. And dozens of devices are now displaying web pages in displays ranging from 320 to 1920 pixels in width, both with and without Flash.

The requirement for 2010, then, is to adapt to the fragments. Good websites need to actively identify visitors’ platforms and deliver user-centric results–not just the Amazons and Facebooks of the web, but the many small- and medium-size sites that encourage exploration and engagement. As platforms continue to diversify, creating flexible, accessible sites is a must.

In my back-at-home SXSW Interactive rehash, I’m enjoying the slides from Chris Fahey’s talk on sketching and UX innovation. The big takeaway for me isn’t on forging creativity but encouraging pragmatism. Chris preaches a lot of what we practice at Ai: thinking about personas and uses to create clever solutions to design problems. It’s a smart mindset for any web project.

Chris’s slides give a nice insight into just how thorough the design process can be. A well-thought-out initiative considers everything from individual end users to the tone of the site’s calls to action. Most importantly, Chris admonishes UX folks to try. Try things, see what works, and ultimately strike the balance between concept and execution. Indeed.

Today’s item is a guest post by Ai fender Skottey Forden.

The visual components of a website are, quite obviously, the primary impact on a user’s impression of that site. Ai takes pride in creating visually compelling sites while taking an immense amount of care with the gears grinding behind the scenes. One aspect of the visualization that is often overlooked is the shortcut/favorite icon, more simply referred to as the favicon.

This tiny 16×16-pixel icon shows up in the address bar of nearly all modern web browsers, and is generally also visible in tabs when using tabbed browsing. One might notice a favicon, but chances are good that users never dwell on it or consider it to be of much use.

When a website does not make use of a favicon, it is potentially decreasing usability and a branding opportunity. That little 16×16 symbol adds value. It is a branding element and a visual component to which a user can associate a favorite website. This holds true especially when a user opts to bookmark that site. When applied to an e-commerce website, a favicon is a crucial element.

Online businesses want customers to access a site with as little effort as possible. If a favicon has not been set, the site it will show up in lists and browsers with a generic icon, or none at all. If a user has multiple sites with a generic favicon in the list of personal bookmarks, a site will fall into a pile of other “generic” sites. This may seem mundane, but it can limit accessibility as well as brand.

Over the past month I have performed a spot-check of Ai’s client sites to validate if a favicon has been implemented. If one existed, I checked to see how up-to-date it was, based on the most recent design of the website itself. If it needed an overhaul, it got one. If there was no favicon present at all, I created one. It is not a difficult process (and it’s fun!), but one must also consider that a favicon essentially sets a brand for a website, so it’s not a trivial item, even within the confines of that tiny square.

To date, a large percentage of Ai’s client sites, as well as our own internal sites and browser-based applications, have favicons. All future Ai sites will have a favicon implemented before the launch date.

This morning we gave a first-round design presentation to a client. In order to accommodate all participants and scenarios, we used three computers, four screens, one projector, and a GoToMeeting remote setup, all to show a series of visuals.

Unsurprisingly, every screen looked different. The projector washed out lighter colors and gradients; the widescreen LCD’s robust color was dwarfed by the projected image; the folks watching via remote had a smaller screen area with a too-high “fold.”

All of which serves as a reminder that visual web design remains an incredibly difficult medium. Colors wash, screens change length, text rendering shifts, scripts and cookies disable: any number of challenges stand between a designer and the effective presentation of designs.

Ai’s developers pride themselves on pixel-perfect page outputs that stay true to our visual comps. But even perfect execution does not eliminate the vagaries of millions of users’ screen resolutions, color depths, and personal settings. The level of user control that we celebrate online also creates an incredible set of scenarios that, despite 15 years of advancement, still requires clever compromise and broad acceptance.

The nascent mobile revolution will only add to the complications surrounding online presentation. It’s a tough job, but fortunately a fascinating one.

Many members of our team love 1024-pixel designs. So do many of our clients. And why shouldn’t they: the real estate is vast, giving room for airy designs that fit lots of information above the fold. The results support their desires, too; our websites are uniformly handsome and easy to use.

Unfortunately, the average user doesn’t have the same 30″ cinema display as our creative director. (Alas, neither do I. But I digress.) Visitors to Ai’s sites are mostly in the 1024×768 camp, but narrow displays appear on a regular basis.

It can be easy to disregard these folks, to say, “Ah, well, the guy in Jersey with his screen set at 800×600 because he doesn’t like to squint, he can scroll to the right, lots of other sites make him do it.” What’s not so easy is to imagine the financial pain that could come from ignoring them. This forces us to be even more creative with our designs.

Thus our information architecture and graphic design teams ensure that all essential functions of the website appear within that 800px window, from major navigation links to add-to-cart and checkout buttons. Imagine the chaos, not to mention the customer service inquiries, if those smaller screens had to scroll right to hit “continue.” At Ai usability and accessibility are of prime importance.

In my days as design director at Economist.com, we set a tiny three percent limit on browser compliance. (This was back in the Netscape-versus-Internet Explorer days, as we debated dropping Navigator from our QA routine.) As I liked to cite to our tech and ad teams: “Three percent sounds like a small number. But 3% of a million is a pretty big number.”

These variables are what make web design difficult, and fascinating. Accommodating myriad screen widths, several popular browsers (currently IE, Firefox and Safari), two major operating systems, and layering on mobile constraints–consistency is nearly impossible. What’s important is a solid, confusion-free user experience that works regardless of a visitor’s variables.

One of my small contributions to Ai is championing the minority. Our websites already reflect the core values of universal user experience. The challenge is in pushing ourselves farther into universality with every site we make.