360angles

We tell a lot of e-commerce clients that if you’re not going to A/B split test, at least copy Amazon… I have a similar stance on design. If you’re not going to hire an amazing web development and design agency (like us, amiright?) then there are roughly two things you should keep in mind:

• Keep it simple
• What is Apple doing? (I’m only half kidding; you’ll see why.)

So what is Apple doing? Let’s take a look at what I consider one of the best product pages online right now. The product page for the Macbook Air:

My favorite thing about this page is that the call to action (CTA). The little blue “Buy Now” button in the upper right sticks out like a sore thumb, but it doesn’t break the design language of the page in the process. They tastefully drew attention to it by making it the most extreme iteration of their design language.

The button is completely in line with the overall design language,  it’s just been turned up to eleven.

• It has the most drastic rounded corners.
• It’s the brightest and largest concentration of the page’s highlight color.
• It anchors the site navigation of this area on Apple.com by placing it last punctuating it with the bright blue button background gradient. (When you’re making a list and want something to stand out, always put it first or last.)
• It doesn’t look out of place, but there isn’t anything else on the page that looks like it, or more importantly, that competes with it. This is the big one – your CTA should be the most extreme example of your design language, but it shouldn’t look like it came from another site.

One great way to test your CTA’s visibility is the ten foot test. The literal version of this to step back from your monitor 10 feet and see what you can still deduce about the content of your page. Of course, the fake version is to just zoom out your browser a few steps:

You can still read the main title of the page, “The Macbook Air”. Great. You can’t make out much of the other text unless you’re eagle-eyed and even then the vast majority of it is still unintelligible, but that’s OK. One other thing above the fold (not that there’s a fold :) does still stick out, though. It’s that little bright blue button in the top right. You can’t tell what it says, but you still know it’s important.

And back to my earlier note about putting things at the front or back of lists when you think they’re the most important; you’ll notice the first item on that sub navigation list is Design. I’m shocked I tell you… just SHOCKED.

As usual, Apple’s page layouts are a master class in how to get the response you want from your audience. (Not that they never miss, they still can’t seem to make a mouse I care to use for more than about 20 minutes.)

I got frisky and built a new theme for our blog this weekend. It’s now much more “a part of” when it comes to VoltageCreative.com. It also loads faster, is more readable/scannable and incorporates a few new SEO tricks I’ve learned in the last few weeks.

Here’s the oldie for reference:

And, uh, you’re already looking at the new one, so here’s a peel-y sticker…

A lot of web designers are interested in typography, and rightly so. The two go hand in hand in that you can rarely get away from typography when designing for the web and there are many similarities between the disciplines, anyhow. (Seeing as a web designer and a typographer share the common goal of conveying information in an aesthetically pleasing way without detracting from or coloring it unintentionally.) So, where do you start?

The answer is right here: The Elements of Typographic Style by Robert Bringhurst. It is the typography bible, and while it is not as perfect as some typophiles like to go on and on about, it is certainly the most comprehensive place to start on the long road of learning about, and learning to love, Typography.

The Unnofficial Apple Weblog just launched a redesign today. They’re one of the longest running Mac blogs and have managed to turn themselves into more than just another mac fan site over the years. I like the new look, it finally mercy-kills their dated blue and green logo that I’ve always kind of wished didn’t exist. The new format is easy to use and read, but retains a lot of the flavor of the old site. Good stuff.

OpenMoko Train Wreck from Dave Fayram on Vimeo.

Might want to read up on some best practices of touch screen interface design…

Image via John Kratz

Adobe Flash technology has long been a wedge issue between Search Engine Optimizers and Designers. Designer’s and clients love it, because it gives them control. If you want to talk about elusive or downright mythical things online, control is a good place to start. Control over your brand, message or story on the wild west playing field of the internet is definitely more art than science. This leaves many a client and graphic designer pining away for Flash technology, aka control, so that their site speaks more to their agenda and less to their user’s agenda. (This is the very definition of bad web design, by the way.)

Search Engine Optimizers hate it, because all these Flash sites are 100% invisible to the search engines. It takes a lot of extra work and some hacker-ish work-arounds to get the search engines to list you at all. And findability online is kind of like your health is in the real world: if you don’t have it, you haven’t got anything.

So, it’s kind of a HUGE DEAL that Google said something on their blog yesterday, that a lot of people have been waiting to hear for a long time. Drum roll, please…

Google Learns to Crawl Flash
6/30/2008 09:26:00 PM
Posted by Ron Adler and Janis Stipins, Software Engineers

Google has been developing a new algorithm for indexing textual content in Flash files of all kinds, from Flash menus, buttons and banners, to self-contained Flash websites. Recently, we’ve improved the performance of this Flash indexing algorithm by integrating Adobe’s Flash Player technology.

In the past, web designers faced challenges if they chose to develop a site in Flash because the content they included was not indexable by search engines. They needed to make extra effort to ensure that their content was also presented in another way that search engines could find.

Now that we’ve launched our Flash indexing algorithm, web designers can expect improved visibility of their published Flash content, and you can expect to see better search results and snippets.

This is great news, but it raises myriad questions.

• How does the Google Bot treat text and anchor tags it indexes from SWF files?
• What’s their equivalent of an H tag inside a SWF?
• Or title tags?
• What’s the difference between text lifted out of Flash file and text lifted out of paragraph tags?
• Or is there any difference at all?
• And on and on…

I’m no Flash guru (this is directly proportionate to the fact that I’m an SEO guy, or it was until now) but you can be certain that there are Flash gurus out there with this on their minds for the next few months. Then we’ll start seeing some trial and error results trickling out across the web and we’ll get a better handle on some of these questions. Until then, I’ll be treating Flash itself as one more weapon in my arsenal to get Google to take note of the things I want it to.

If I’m targeting a keyword I want it in h-tags, anchor tags, title tags, bold tags and in normal text. Well, now, I also want it in a Flash file.

Oobject has a killer gallery up that shows 16 Formula 1 cars’ control schemes. (Everything but the pedals, anyway.) This isn’t too difficult to show because they cram all of the controls, and often times the actual information display, on the wheel itself.

They have an interesting take on this phenomenon: That all the F-1 teams reached this very similar layout independently, and that they’ve all independently made the same mistake…

The complexity is ubiquitous, all 11 Formula 1 teams produce cars with more or less the same multi button design allowing adjustment and tweaks of traction and aerodynamics from the wheel itself. Unlike a road car, space and focus constraints mean that the entire dashboard is on the steering wheel. This is something that will no doubt be copied, unnecessarily, in consumer cars in future, but would that be a UI improvement?

Given that all 11 F1 teams have converged on a remarkably similar UI, independently, you would think that dashboard steering wheel style was a rational design, however its complexity possibly caused Lewis Hamilton the 2007 F1 championship, when he accidentally pressed the neutral button (top left of the 2007 McLaren Mercedes wheel).

We have gathered together as many of the modern style wheel designs that we could find and put a date to, to demonstrate the UI pattern. What is clear is that there is no clear accentuation of features (color, size) by how often the are used, merely by position. Even if drivers like Hamilton are experts and fully familiar with the UI, there is a tiny percentage chance of error. Our guess is that this trend in car UI would be a mistake if it filters through to everyday cars, and that F1 cars will revert to a more simple UI over time.

I think they’re off-base, here. The likely-hood of these teams all making the same progressive mistake(s) independently of each other is almost nil. It’s much more likely that the teams have either made a mistake by copying each other’s control schemes or that they’ve weighed the odds of mistaken button-presses against having to take fractionally more focus away from the road (say to look down and to the left at a warning light) and decided the former was less risky.

Either way, this is a study in user interface design that’s not to be missed. Read the full article and check out the excellent gallery over at Oobject.com.

BONUS: I’ll leave you with this Renault F1 driver putting one of these UI’s through it’s paces via cockpit camera…

Touch screen interface design is a tricky thing for some people who’ve been designing for a mouse-bound audience. But with the coming of the iPhone and a host of other touch-screen equipped smart phones at attractive price points (Like the Palm Centro and HTC Touch) I’m thinking about touch screen interfaces more and more. Maybe you should be, too…

1. Response speed should be of utmost importance. (I know, I know… making response speed a priority is a staple of user interface programmers and designers, but it’s even more important in touch screen world.) The speed and ease with which a human can interact is increased within the touch screen interface environment. Therefore, the interface’s responsiveness must increase as well. If your hardware/software’s response time is slow, you’ll find your user’s aggravation increasing proportionally faster than it would if they were using a less intuitive system, such as a mouse or trackball. (It’s not as if a using a mouse makes us all plodding computer operators, but no matter how seasoned you are with the click-able rodent, it will never come as naturally as reaching out and touching something to interact with it.) So be lightweight.
2. More space comes in at a close second to speed. A cursor is small and a stylus may be even smaller. However, it’s a good idea to design your interface with fat fingers in mind, even if a stylus is expected to be present some of the time. This will increase the overall usability and flexibility of your system. When designing Poptakeout.com (An iPhone/iPod Touch social news aggregator) I made all the buttons 106px by 110px. Considering the Mobile Safari platform is displayed (exclusively, as far as I know) on iPhones and iPod Touches, whose displays pack 160dpi, I ended up with buttons almost 1/2″ square: plenty of room for an accurate poke.
3. Intuitiveness of your design also becomes a heightened concern. This is the same situation as number one, in the touch screen environment non-intuitive information architecture will be even more frustrating to your users. When all they have to do to is reach out and touch something, it becomes a larger source of frustration when this simple action does not deliver as expected.
4. Ambidextrous design must come into consideration in the touch screen world. Both lefties and righties will be using your interface, so plan accordingly. Delivering the same experience to all users means either vertically symmetrical navigation or an option to flip your layout. I prefer the former, it will take less development time (in general) and simplifies your interface.
5. Bright background colors or patterns can hide glare and reduce fingerprints. Solid black is the worst possible choice. (I’m looking at you, iPhone)
6. Touch screen interfaces are more suited to information retrieval than data entry.
7. Be aware of screen coverage. Flyout or rollover menus become much less useful. You may want to consider placing navigation at the bottom of your touch screen area, with results/display at the top. (Thanks, Sanj)
8. Problems with eye-finger and eye-stylus parallaxes lend even more credence to the argument for big, fat areas to press with plenty of space between them.
9. Best to worst operations: Point, select > Position, orient (rotate), define path > Enter values > Enter text. So, basically, touch screen interface’s are great for data retrieval, pretty good for data manipulation, and are kinda awful for data entry.

Further reading of interest on this subject:

• ALA – Put your Content in My Pocket Part I and Part II.
• SAP Design Guild – Interaction Design for Touch Screen Application
• Department of the Army Weapon Systems: Human Computer Interface Style Guide
• Target Size Study for One-Handed Thumb Use On Small Touchscreen Devices (PDF) (Thanks, Nirmal)

[Pic via Gizmodo]