Make it easy for people to learn about your product. Show them how it works. Don’t just tell them. Let them engage actively in the learning process and make it interesting. On the web especially, there are many ways to get people familiarized with the things you are offering them in more enjoyable ways than plain block text and a few static images. Resist including a lot explanatory copy when possible. Regardless of the amount of text needed to sell yourself, always make sure is high quality and relevant to the reader. Otherwise, as soon as it feels dull or pointless, they’ll be out of there and you’ve lost a conversion. Pretty graphics can be a step in the right direction, however they’re passive and therefore easy to gloss over.

People scan content on the web. But they’ll slow down and pay closer if there is content which actively engages them. Info-graphics, for example, begin to tell a story and give people more of a reason to begin participating. Video is another option, but make sure to offer people controls on the video player. If people have a certain amount of control over their experience it is less likely it will turn out poorly.

Product education doesn’t have to be visual necessarily, as long at it’s engaging. Some web sites include live chat with sales representatives. This involves just text, but it 100 times more dynamic than an old fashioned paragraph just sitting there for people to read. Personally I feel that offering more options for getting your message out rather than less is a good thing. The key word being ‘options.’ People like choice. The experience with your brand can go sour quickly as soon as you start forcing yourself on them.

These lessons should be common sense, but they bear repeating from time to time. All to often web pages are launched to show off a product or service and the user experience (UX) is absolutely terrible. Many times you get the feeling that Marketing, Sales, and Business teams had a heavy hand in the process and ‘design’ by committee was what resulted. This inevitably produces something that’s really good at satisfying internal company requirements and rarely pays attention to the details that make the message communicate effectively. Even if you don’t employ a UX Designer on your staff it is still critical to to remain user-centric when planning how to convert those people who become aware of your product into ones that believe in and chose to integrate it into their lives.

Further reading: Designing for the Social Web – by: Joshua Porter

But I feel compelled to address what might be considered the flip side to that position. That fact is that user-centric design usually includes many steps along the way that attempt to anticipate the user’s behavior and manipulate it a certain way. This is done for a variety of reasons but usually justified in the name of optimizing the experience on the user’s behalf. But as we all know this is not always the case. As designers, the user is not our only audience that needs satisfying. We also need to consider the client and their business goals. While there is nothing inherently wrong with this truth, there will come a time when the needs of both groups are polar opposite and one side will more than likely have to compromise as a result of the design decisions you make.

We’ve all probably been the victims of a software installer package that unleashes a few extra apps that we didn’t want. Oh sure, we could have unchecked the option in the Wizard but it was probably turned on by default, buried after a lengthy piece of fine print, and part of a multi-step process that we just want to speed through. By the time you realize what has happened it’s too late. Other times you might not even know that your experience (or at least a small part of it) has been ‘designed’ to elicit certain behavior. The website darkpatterns.org marvelously illustrates some of the more well known tricks out there as well as some of the less well known too.

The question that is raised is one of ethics. At what point does including subtle tactics of influence on the user become unacceptable? Remember, purposefully influencing behavior is not always a bad thing. In fact  it can be quite desirable. User’s for the most part look for familiar clues and conventions in designs to aid in the flow if their experience. In my opinion it comes down to how involved you are trying to be in the experience. Are you trying to tell the user what to do too often? The roll of ‘guide’ through the user’s experience is one that I personally like. While we could exercise a good deal of control through out design, ultimately it will be rebelled against. Your product should always remain subservient to the user.

The interface you design is a tool for you and your client to have a ‘conversation’ of sorts with the user. As with any conversation you ideally want it to be authentic. ‘Dark Patterns’ are a form of conversation which is not authentic. They may boost business metrics in the short term, but in the long run you will loose customers. People will exercise their option of choice and choose a different product to meet their needs.

For more on Authentic Conversations in design, read Joshua Porter’s book ‘Designing for the Social Web’

At this point, there are entire fields dedicated to the study and practice of addressing every step of the design process. Jesse James Garrett has famously illustrated a useful diagram which shows his idea of what the realm of User Experience Design encompasses. He describes each level in detail in his book The Elements of User Experience. The collective sum of this diagram’s parts, and how they tie together is what one might constitute as a ‘Designed’ UX.

More specifically though, if we’re not actually designing the experience for people, then what exactly are we after as UXers? For a person to master the UX discipline they would need to realize that there is a common ingredient all of it’s supporting practices share. In large part, success on any of the levels Jesse describes, means contributing to the user’s ability to engage in the phenomenon known as Flow. Mihály Csíkszentmihályi made this concept and term famous in his book entitled Flow. According to him:

…Flow is completely focused motivation. It is a single-minded immersion and represents perhaps the ultimate in harnessing the emotions in the service of performing and learning. In flow the emotions are not just contained and channeled, but positive, energized, and aligned with the task at hand. To be caught in the ennui of depression or the agitation of anxiety is to be barred from flow. The hallmark of flow is a feeling of spontaneous joy, even rapture, while performing a task…

At first it can be tough concept to grasp. But once it makes sense, your objectives as a designer can become much more clear. Designers can’t create Flow for users, but we can facilitate it. We can (and should) also minimize the chance of Flow being interrupted. In short, if a user easily achieves Flow while engaged in your system, you’ve probably succeeded as a UX Designer.

Let’s examine the following diagram from Csíkszentmihályi. It illustrates that to achieve Flow, a person must reach a balance between their skill level and the challenges being presented to them. The optimal range lies in relatively high challenges paired with relatively high skills to meet the challenges.

This can be incredibly subjective and vary greatly per user. It demonstrates how Design will never be an exact science. As you might imagine, it is easiest to cross over in to Flow from the adjacent feelings of either ‘Arousal’ or ‘Control.’ Likewise it is more difficult to achieve Flow the further away you are on the spectrum.

Suppose, for example, you were using a web site and things were going smoothly. You are in a state of Flow but suddenly you encounter a section that is very difficult to use and does not work like you were expecting. It makes no sense so your mood changes to a state of ‘Worry’ or ‘Anxiety.’ This scenario is one we can probably all relate to. Think back to how that experience likely changed your perception of the site you were using. Also, try to think about how it took extra effort to get back to the state of Flow each time you left it. It can be a hard state to achieve and an even harder state to design for. But nevertheless, it is a worthy goal because that is where  many of the best experiences lie.

Much has been written on the subject of Flow. I highly recommend reading the book and thinking about how the principle can apply to design if your job title relates to UX. I also recommend understanding the things that obstruct Flow. For more on that aspect, read the Marketing Experiments blog post which talks about the concept of a user encountering ‘Friction’ & ‘Anxiety’ and how it affects conversions.

We need tools like search engines to help organize and make sense of all the data we’re producing. In order for us to make sense of all this data it means making the right stuff ‘findable’ at any given time. This is where Search Engine Optimization (SEO) comes in. The search engines are doing their best to index your site’s relevant content, but there are things you can (and should) do to make sure they are successful. Search engines get better all the time, but they’re still just robots and can not reason the same as you and I. They scan your content and your markup and collect what they ‘think’ is valuable. Until some significant computing breakthrough’s occur, It’s your job to provide them with hard data that matches your concept of what the site actual is meant to embody. This will, in turn, make you more easily findable to human searchers.

SEO can be tricky. It is not comprised of a singular practice, but rather a collection of several practices that can vary from project to project. These practices carry different weight in effecting the search rankings and due to ever-changing search engine algorithms different practices can become more or less important over time.

Confused yet? What’s worse is the search engine companies don’t really even come out and tell everyone what the secret sauce is. Periodically they leak out bits of information on their algorithms, but they are closely guarded secrets for the most part.

So, what should you be doing to implement SEO into your site? Here’s a basic run down of essential techniques for Content, Markup, & Server-side SEO:

• Write copy that is naturally keyword rich (not stuffed). This means being honest. Don’t try to trick the search engines.
• Make content visible to the search engines. Currently, technologies such as Flash, Javascript, and Ajax can make content harder to index.
• Create an XML sitemap so the search engines can easily crawl and index your site. You can learn how to create one here.
• Name your files and folders in a descriptive manner. Use keywords whenever possible.
• Keep keyword density around 7-9%. Anymore than that is not going to have a natural tone and you could get penalized by the search engined for going too much over that. Several free online tools exist.
• Abundance of inbound/outbound links affect your page ranking. Search engines like sites that promote linking.
• Follow all best practices and web standards when marking up your pages. This will help ensure that the search engines don’t have trouble indexing your site and give your content hierarchy. Search engines take this into account when they run their algorithms. Head tags (<h1>, <h2>, <h3>…) are a good example of this.
• Make the most of your <title> tag. It weighs heavily in determining ranking. Keep it under 12 words (70 characters) and remember to keep the language natural. Don’t just stuff keywords in.
• Keep URLs clean and meaningful with keywords in them if possible
• META description tag – Like the Page title tag, it also weight heavily on the search results rankings. Utilize this tag for every page in your site if possible. Try to keep it to around 150 characters. It can be longer, but most search engine result pages will truncate your copy if it is.
• Anchor tags – The text labels for links are perceived as one of the most critical places to position relevant keywords.
• Alt tags. These help make content such as images visible to the robots. Using them is a standard accessibility practice as well.

Of course there are many more techniques you may want to consider depending on your goals and the site you are trying to optimize. As mentioned above, search algorithms change and sites like Google frequently experiment with ways to improve and keep up with the landscape of the web. Various content types such as images,video, and real-time data are starting to play a larger roll in how search results pages are populated and new ways of indexing this data are always emerging. At a certain point you may want to consider seeking the services of a professional if your site is complex or has some cutting edge features. At the very least, try and be pro-active in learning about the basics of SEO and keeping an ear to the ground concerning changes within the field.

Further reading:

Ambient Findability: by Peter Morville

Building Findable Websites: by Aaron Walter

1. Userzoom (Sunnyvale, CA) provided the technology. They offer UX pros the ability to run online, task-based studies with geographically dispersed participants.
2. KeyLime Interactive (Miami, FL) moderated the sessions. They specialize in online web-based usability testing as well as traditional lab-based testing.

A little background about the study before diving into the results. Each Hotel site tested (Hilton, Marriot, Intercontinental, Starwood, Hyatt) were randomly assigned 50 different users to perform 2 tasks seperatly. Tasks took roughly 10 min in length to complete. Users were selected regardless of their prior affiliation with any hotel rewards program or familiarity with the site.

Tasks:

1. Finding a room on a beach at a particular time of year, particular distance from a landmark, within a set budget of $250.
2. Finding a hotel that provided parking to it’s guests

The web sites were evaluated on several metrics based on the tasks which users attempted to cary out (Overall success, Ease of use, Ease of Navigation, Clear where to start, Satisfaction with Time) and then are given an overall score (KLI score) by the moderating agency (Keylime interactive)

Data gathered from open questioning and Task 1 Results overview:

• Marriot, Hilton had largest groups of rewards program participants – and considered ‘most popular’ by users as well
• Hilton ranks best from a search perspective
• Hyatt ranks worst from a search perspective
• Marriot and Hilton brands scored well on ease of use and accessibility
• Hilton & Marriot score highest on success rate, Ease of Use, and Satisfaction. Hyatt scored lowest
• User satisfaction related directly to the time it takes to complete tasks

Data gathered from open questioning and Task 2 Results overview:

• Marriot scored highest on search, but most users had a hard time figuring out where to start clicking
• Hyatt & Starwood rank consistently low in all categories of evaluation within the task result

The KLI results from the 2 tasks were the aggregated for an overall KLI score

Executive takeaways

• All brands had varying strengths and weaknesses
• All brands have room for improvement
• All brands had a ‘negative’ score of with regards to the brand meeting end-users expectations (Hilton however was the ‘best’)
• No single brand or site should be picked on as being ‘bad’ in strict black and white terms. These results were simply the outcome of 2 tasks performed online. But it starts to paint a picture of the overall User Experience the various brands provide

What I will say is that a little more progressive thinking would help cut out a lot of the senseless number of versions required for some companies running rich media ads and also (potentially) increase your margin for success. So how did I come to this conclusion? Through recent conversation with some ad partners and also jumping through a technical hurdle or two.

We recently completed an XML fed rich media ad for a client. The ad featured a small content management system that allowed the client to update that XML feed and thus create a new ad “on the fly” for as long as they were running their ad unit.

So, why does this matter? It obviously doesn’t seem like a radical concept (or I would hope not ). It’s a process almost all designers have used when building a website. Make something the client can not only use but also maintain. Why? Because it ads value to both the client and the agency.

1.) It cuts down on versioning.
2.) It gives content control to the client.
3.) It removes back and forth (you know, the 45 email chains).
4.) It ads flexibility to their ad campaign.
5.) It ads longevity to the ad.
6.) It softens mistakes.

If you’re asking how? You’re in luck (descriptions below).

1.) It cuts down on versioning - If you’ve ever created a rich media ad, you’ll soon begin to notice that there sometimes are 26 versions of an ad that accomplish the same goal. You’ll probably sit in photoshop or flash at some point and say (or possibly scream) “why am I doing this!?” and with good reason. A dynamic solution allows a designer to create one universal flash ad that updates in real time and then leaves 1 simple static ad (in the event flash cannot be delivered) for each iteration. Instead of doing 26 ads, maybe you can cut it down to 13. In terms of efficiency, that’s obviously huge.

2.) It gives content control to the client - Making the client an active participant helps ads value to what you do. It also ads ownership and accountability to what is ultimately their product. More often than not, that leads to a richer experience all around (which is never a bad thing).

3.) It removes back and forth (you know, the 45 email chains) - I don’t think I’ll explain this one. Why ruin the fun for someone who has yet to experience one of life’s miracles. /sarcasm

4.) It ads flexibility to their ad campaign - So what happens if you’re 5 weeks in to a 10 week ad campaign and you realize what (or the way in which) you’re advertising could be improved. Different wording, a larger percent off, an “hourly discount”, etc. etc. etc. Or what if you sold something that absolutely flew off the shelves and you like to replace another so-so sale, later in the campaign, with that same discount?

How is that going to happen if you have 50 versions of an add that all need updated by a designer, reloaded in to an ad portal and then relaunched individually? The answer is, it’s not.

How about if you have an XML feed that populates those ad units instead? and all their ad sizes (728×90, 300×250, etc., etc., etc.). Update a single text file, hit submit and all your ads just changed in real time. No contacting the agency or the ad portal. Simply update your CMS and hit enter. So why isn’t this design strategy happening more? Maybe it makes too much sense?

5.) It ads longevity to the ad - An ad that updates via an XML document (and not a designer) is not only cheaper over time but it also stands to last infinitely longer than a static ad. Did your campaign change? Are you selling a different product? No problem. Just update the CMS, relaunch the ad and you have now been able to recycle something that typically would have been thrown away. There’s value in that for everyone involved (a superior product, happy customers and ultimately more business).

6.) It softens mistakes - So you spelled a word wrong? (unfortunately been there and done that). What next? Well, it obviously needs changed (my head is starting to hurt thinking about this) and ASAP. In a dynamic ad, 90+% of people are seeing the flash unit. Having the ability to immediately wipe out that mistake for nearly every user in about 60 seconds is HUGE. Log in to the CMS, update the XML and the spelling error is removed. You’ll obviously have to make changes to the single accompanying static ad (if the same error was made) but you’ll SIGNIFICANTLY reduce the pain of a small correction.

So my question is, why are people NOT making more ads that are dynamic, flexible and client friendly?

If you’re shouting “We are! We are!” then I might have just wasted your time……well, while validating your work. I hope you consider that an even trade.

If you’re shouting “Why aren’t we doing this!?” Well…….Why aren’t you? Ads need love too.

As I already mentioned, there are new mediums and devices coming out that are abstracting the web and displaying the content in other more unique forms. Instead of the typical user sitting down at his/her work station and loading up Generic Browser X to “surf the web”, they are opening their Twitter client, geo-locating friends in an iPhone app, and soon to be reading books on their iPad.

Without trying to sound to cliche, the internet – and the data that supports it – is infiltrating our lives and dictating how we communicate amongst ourselves. Maybe “dictate” and “infiltrating” are harsh words, but when thinking about it from a newspaper publishers point of view, those words don’t sound harsh enough. It’s no question that the internet has hurt traditional print media publishers and the primary reason many of these companies have gone out of business. But my question is what aspect of the internet actually led to the demise? The answer is not that mind-blowing, but is simply, the accessibility of information became so abundant we no longer needed to pay to see the same content elsewhere.

At this point you might be saying “Wow, great concept, Bryant… ‘Accessibility’ – welcome to 2010,” and I will also agree that this concept is rather outdated, but it is also the exact point I am trying to make. Instead of saying “welcome to 2010″ you should have been saying “welcome to 2006.” Accessibility of information is what has already shaped the internet and is what made it into this giant creation that we use today. The frontier that is now being conquered, and is the root of the “abstraction” process I have refereed to, is making the web more usable.

When you look at some of the first products that “abstracted” the internet, such as Rich Internet Applications (RIA), it’s very clear that they wanted to take the content of the web and make it a more enjoyable and usable experience. Why is the internet not a usable and enjoyable experience? Ha! Well that can be answered several ways (and also very sarcastically), but in short it is because of the infrastructure of the internet. At that point in time (which we are arguably still living in) HTML and web browsers were not advanced enough to handle some of the interactions and display patterns designers wanted to use to display content. Because of this technological limitation, developers created RIA, which can grab the content of the internet and harness the power of a localized application to deliver it to a user in a much more versatile, running environment.

As powerful as some RIAs are, the main drawback is that it was not running inside the browser, the main component of using the Internet. However, with the adoption and implementation of new web standards into modern web browsers, browsers would soon be able to handle all of the same interactions and display patterns that RIA currently did.

Flash forward to today (You didn’t know we were in a flashback mode, did you?) where most modern browsers support forms of HTML5 + CSS3, and paired up with the canvas element, there are javascript techniques out there that will rival Flash. What is the next step? Well, it’s taking the usability and accessibility of the web and delivering it in a product smaller, leaner and more tactile than looking at it on your desk monitor….wah-lah – the iPad!

Now, I don’t consider myself to be an Apple fanboy, though it may seem like I am one when I talk about the iPad. But what I am really trying to explain is the concept and execution of the iPad. I don’t think any company has nailed the tablet concept quite like Apple – although I do think other companies definitely have the capacity to do so. Anyway, the reason I believe the iPad to be so revolutionary, is that it takes the accessibility of the internet, adds in usability features found on modern web browsers and couples the whole thing in a nice, lean well-designed mobile product. It’s the type of product that you look at old 1980′s movies and see futuristic people with flying cars using, except the main difference is that it’s actually here. Does the iPad not have multiple applications running? No. Does it have Flash? No. Does it deliver its most important asset, the internet, in a new portable textile medium? YES! And it seems to deliver that extremely well.

I must say that I was very disappointed when I learned that the iPad didn’t have a forward-facing camera. Furthermore, I think the price structure of the various iPad units suggests a bait and switch approach ($499, yeah but who is going to buy this without 3G?). But when it’s all said and done ,I would be more than willing to pay $650-ish dollars for a device that delivered the Internet to me in a portable, book-sized container.

And now, finally, back to the publishing industry. It would seem that with all this technology they are destined to go the way of the Dodo Bird, but if you take a closer look (at least at the iPad) you can see the iTunes store paradigm fitting in perfectly. iTunes itself has grown to be the world’s largest music retailer, and an argument can be made that people only download music that is easy to get, no matter if it’s free or .99 cents. Bringing this sales approach to the magazine and newspaper publishing industry would be a win-win….win. Publishers will still be able to provide their premium content to virtual subscribers and not have to worry about printing physical copies. Users will be able to access rich “print” media on new user-friendly devices that enhance the reading experience. And device manufactures will be able to create these new devices and push the bounds of technology even further.

Whew… that was a lot of writing, and maybe my conclusion is a little optimistic. But in the face of seeing a major industry collapse on itself, it is refreshing to see an outlook change and be reinvigorated by the advent of a new cutting edge piece of technology.

Among his many relevant points was the notion he referred to as ‘the dominance of search.’ Matt’s focus for the evening was specifically on sites that serve up social commerce, but I think the search issue is something any site needs to consider seriously. What Matt was referring to was his claim was that 50-80% of traffic across the web comes from search. This was a profound, yet not to surprising statistic when I heard it. However, in my experience, clients are not very proactive in doing everything they can to make their sites findable. As web designers we should take more responsibility in educating our clients on the importance of being findable. Traditional means of SEO such as embedding tags in code, writing bot friendly copy, etc. are still a great start, however the effectiveness of user generated comments/reviews of your service should not be overlooked.

Matt remarked that a quality review can, and will, bring in roughly 50 people to your site. At which point. if you do a reasonable job of converting those 50 people to buy (say 3 or 4%), one could argue that the person who wrote the review for you actually played a more valuable roll while they were on your site than if they had actually made a purchase! This view may be a little subjective, but the key takeaway is that the people who are using your software and are actually taking their time to participate in the social sphere are extremely valuable users. They’ll give you credibility, get others involved, and help you create meaningful content. They are valuable for many reasons, but if for nothing else, they’ll bring other people to your site.

“Will my users be able to find me through search?” is a question Matt proposed everyone who wanted to have a successful presence on the web, should be asking up front. In other words, get your clients on board with SEO right out of the gate! There’s no way around the fact that there’s an overwhelming amount of content online. Having a site that is cutting edge, cool, innovative, clever, refined, well planned, etc. will not make your software successful based on these factors alone. You have to be findable. For more on findability you can check out findability.org or Peter Morville’s book called Ambient Findability.

“A simplified view of what content will appear on each screen of the final product, usually devoid of color, typographical styles, and images…”

Wireframes can technically be generated by just about anybody. However it is painfully apparent when someone with little or no experience takes it upon themselves to do so. The classic example is when a client has some ideas they think are great and feels the need to express them. More often than not those ideas could be communicated through words via email or on the phone and it would be best to avoid wireframing on their part. A person without the training and skills required for effective wireframing is liable to produce incomplete or inaccurate documents that can harm the overall process if not fixed later by someone who is more experienced. Sometimes wireframe documents can look quite simple, but that does not mean that their purpose or the information they contain should be taken lightly. The information found (or not found) within has profound implications. Inappropriate page elements documented at early steps can produce results which reverberate throughout a project all the way through to launch.

Wireframes exist, in part, to communicate the various ideas that will make up the page. But they also are tasked with communicating the intended user’s experience (UX). The UX is like a big collective idea made up of all the individual ideas. Whenever the individual ideas are manipulated, the collective idea is affected. While it is desirable for many individuals to contribute to the individual ideas, it takes a trained professional to shape them all into the big idea. A project is delicate early on and I think there should generally be a single Information Architect (IA) to produce wireframes and their subsequent iterations to preserve the integrity of the UX.  The advantage of having a single purveyor of wireframes is that good information tends to get discovered and refined, while bad information is removed more efficiently. If the project is large enough to have additional IAs or the client insists on being directly involved then some standards should be put in place to avoid miscommunication and extra work. It may be a good idea to create a framework template as well as a basic elements library for all parties to share.

Good wireframes should embody an organized aesthetic, which is visually pleasing, yet neutral in emotional expression. This will help to communicate what is truly important: the ideas. Although wireframes are basic it still takes many years for an IA to develop their style. There is a methodology to creating these documents we all develop over time and seldom do we ever do it the same way as our peers. I would be interested to hear about instances from other UX designers who are responsible for producing wireframes  and hear weather or not they prefer to work solo or collaborate with their co-workers to produce final deliverables. Additionally, I would like to hear how other UXers feel about clients being involved as co-creators of wireframes speciffically. Perhaps some organizations have a sophisticated system in place which allows for and encourages this. To date, I have yet to see an organization with such a structure. Much of this article is based on opinions I’ve gathered from my personal experiences and those of my close pewers. Every designer and organization however is going to use a slightly different approach. I hope that there are others out there that can shed light on this topic for everyone to consider as well.

Some examples of  good wireframes with varying styles:

1. A splash page to allow the user to choose the HTML Site or the Flash Site.
2. A separate directory for the HTML Site to live that only Google would see.
3. A flash detection that would redirect the user to the HTML site if it didn’t have Flash, Google included.

None of these options were ideal. A splash page is a usability nightmare and putting the HTML site in a separate directory would still hurt users coming from Google results as the search engines would most definitely just send them to the HTML site, which defeats the purpose of having a Flash site in the first place. So instead we took some inspiration from Damien Bianchi at Adobe.com and put the HTML and Flash in the same directory using tricks to serve up the appropriate Flash content that cooresponded to each HTML page.

1. A splash page to allow the user to choose the HTML Site or the Flash Site.
2. A separate directory for the HTML Site to live that only Google would see.
3. A flash detection that would redirect the user to the HTML site if it didn’t have Flash, Google included.
4. Flash detection to serve up the SWF or the HTML in the same page.

Creating the HTML Site.

There were two goals in creating the HTML site.

1. Improve SEO Results
2. Have a Good User Experience Fallback for Users Without Flash

For the first goal it was just a matter of adding an HTML page to correspond to each “page” in the Flash version of the site. The HTML uses all static content, rather than pulling the content from the XML files the Flash version uses, so search engines won’t have any trouble reading it. We also took care to use the best practices for SEO HTML markup. That is, we used the appropriate heading tags, alt tags on images, etc.

The second goal was a little trickier. Flash is a great platform for smooth animations and unorthodox layouts. Thus, replicating its strenghts with HTML/CSS/Javascript can be a bit tricky. We put to use jQuery, a javascript framework, to make it a bit easier and reduce the heavy lifting of coding the advanced animations and DOM manipulation ourselves. We added in some various jQuery plugins like JScrollPane, jQuery Color Animations, and some other smaller ones to allow us to really replicate some of the cool things the Flash site did. Once it was all said and done we had a pretty good replica that forces you to look twice and even caught some people around the office here off guard at determining if the site if Flash or not. Once we knew it was hard to tell we figured we had created a pretty comparable user experience in HTML.

Adding the Flash SWF to the HTML Site.

Once the HTML Site was completed we had to add the SWF of the Flash Site to each HTML page. We wanted the site to have the HTML be static and the flash to replace it if the user had it installed. So we used SWFobject 2.0 to detect if the appropriate Flash version was installed and SWFobject replaced the container div of the HTML with the SWF file. Voila, we have all the benefits of HTML SEO with all the benefits of Flash. Now all we had to do was get the SWF to load the appropriate “page” depending on which HTML page it was on.

Adding FlashVars to Load the Appropriate Page and SWF Address

Since the Flash SWF loads on the homepage by default we had to find a way to tell the SWF that it wasn’t on the index.html page, but it was, for example, on the contact.html page. We added some simple FlashVars to each page with SWFobject to communicate with the SWF what page it was on. They looked something like this,

Hey everyone, it’s Ryan ….I secretly hacked in to Steve’s account and am posting in his newest blog. I’m kidding, as was the case with our Flash / HTML website integration, we’re gonna tag team this blog post like the Legion of Doom. I’ll help to shed some light on how we got our flash and HTML to play nicely together.

As Steve mentioned, we  used flashVars to pass in a page value (or string if you want to be exact). What we were really trying to accomplish was coming up with a universal link, that could be used outisde of the website, to funnel people in (regardless of what technology they may or may not have). We simply check the users machine for flash with swfObject and then serve them the best available technology (flash or HTML).  If it was flash, we used the flashVars string to help flag the correct page to  be displayed. I’m sure you’re sitting there thinking, how? Well it’s your lucky day, I’m about to explain how we went about accomplishing that.

For those familiar with swfAddress, this code should look familiar to you…..

*****just as a note, the code plug in we’re working with isn’t friends with the ampersand. &amp;&amp; should simply be ‘&&’. I’m sure most of you caught it but I just wanted to point it out to avoid any confusion. It should be ……. if (_currentframe == 2 && value == ”).

If the current frame = 2 and the swfAddress JS is suppying a blank value, it just forwards you on to the next frame (which is the homepage). If it’s value is defined, it skips to that page. Easy enough right? Well, the dilemma was how could we get this to flag what page we wanted with a flashVars value without disrupting how the function would work throughout the site? If you haven’t noticed already, that SWFAddress.onChange function only appears once in your flash code and the flash platform allows you to “re-use” it by simply making a basic call to it ….like:

The function on frame 2 sends the ‘about’ value through the onChange function and spits the user out on to the about page. If we wanted to modify that main function, we could be doing (and did on several occasions ) some unforeseen damage to how the swfAddress will / would be able to function (beyond the home page). Obviously, we didn’t want that to be the solution for our end product. This really became one of those situations where it was just inevitable that we would really over think it before coming to a final conclusion. After a few random trial experiments, we unscrunched our foreheads, started laughing and realized how insanely simple this actually was to accomplish. So what was the solution?

We added a new key frame to the timeline (inbetween the swfAddress.onChange function and the home page). Well, it wasn’t THAT simple. Instead of just forwarding the site on to the home page after it went through that conditional check (if it had a blank value), we just ran it through a sifter so to speak. If it had a blank value, I wrote a switch statement that would match the HTML page’s flashVars value to it’s intended page inside the flash movie. When it flagged a match, it changed the swf address value and forwarded it on to the desired page (i.e. if the flashVars value was ‘contact’, we forwarded it to the contact page). Here’s an example of what I’m talking about…..

The reason this works is that there’s only one occasion where the functions if / else statement forwards on to the next frame? Anyone have a guess? When the page is initially loaded (aka doesn’t have a swfAddress value). Any other time it bumps down in to the else portion of the conditional, drops it’s page value off at the coat check and gets forwarded on to that specific page inside the flash movie by swfAddress (like it would if someone pressed a button inside the movie). The only time our function will ever be triggered is when the page is loaded and that’s exactly how we wanted it to be. Any other time the frame is skipped over by the function on the previous key frame.

Hopefully that all made sense. Here’s the listed steps if you got lost:

1.) Express a flashVars value in your HTML. In our case, we used a string of letters.
2.) Use swfObject to check for flash.
3.) Use swfAddress to generate unique deep links.
4.) Add in a new keyframe between the sfwAddress value check function keyframe and the homepage keyframe.
5.) Write a switch statement on your new keyframe that takes the flashVars value and matches it to it’s existing page in the flash movie.
6.) Test, test, test.

Aside from the listed steps / examples, one place I would guess people will get hung up on is getting the added function / switch statement to move on to the home page (if that’s the desired effect). There are several ways you can accomplish it, so don’t over think it. I chose to just make the default state in the switch statement a play(); command.

Easy enough right? You could also supply the index.html page with a flashVars value of “home” or “index” and check for it specifically. Either way works, so use which ever one you prefer.

If you have any specific questions, post them in a comment and we’ll try to get back to you. As always happy flashing!