Web 3.0 Has Already Begun!

Web 3.0 has begun and its not what you think.  I don’t think many people realized what Web 2.0 was until we were at the height of it, and already seeing the capabilities that had been set out years before it. But imagine if we had all realized in 2001 what was possible and all of the major social and technical shifts that would rise the an explosion of innovation and opportunity by 2006.

First let’s start by defining Web 2.0.   Depending on who you ask, you would get different answers.  A marketer would tell you it is about the User Generated Content (UGC).  A technologist would tell you it is all about AJAX and the API mashups that AJAX enabled.  A designer would tell you it was the new simplified aesthetic that focused on conversions and pragmatism.  They’re all correct, but let me distill this into a concise list:

  • Use Case:  Socialized content.
  • Technology:  AJAX (JavaScript) and Mashups
  • User Experience: Fewer page refreshes. Simplified design.

To say web 3.0 has begun, we’d need parallel impact on all these fronts, so let’s start there:

From the use case perspective, consider the semantic and meta tagging that are now a part of the HTML5 spec.  Semantic web promises to transform the web into an ultimately connected experience in which a machine has as much awareness of the content as a human.  Imagine your calendar warning you there is a conflict prior to booking a ticket on Expedia.  This is equally if not more significant to the social revolution of web 2.0.

As far as technology goes, HTML5 solves two major problems that will lead to a major revolution of web application architecture, moving in the same direction of Web 2.0.  First, no more limitations preventing cross-domain AJAX calls. That has huge implications for mashups!  Second, a robust local storage facility that can be used for JSON (serialized JavaScript objects) document storage locally on a device and will substantially help overcome the stateless persistence issues that have plagued web applications since the beginning. This is so significant in fact, that there is already a movement toward smaller event-driven server-side technologies such as Node.js and NOSQL document databases such as Couch and Mango, which are perfect for JavaScript object storage, in acknowledgement of the shift of dominance toward the client.  Think fat client applications written 100% in JavaScript.  The potential is already there and buzzing quietly under the surface. Node.js already has as many followers on GitHub as Rails (for Ruby)!

Finally, user experience.  This one can be summed up in two words – interactive media.  Finally with HTML5 and the proliferation of cheap bandwidth, it seems the pieces are in place for the much-anticipated online media revolution.  There are technologies already available and built upon HTML5 that enable bi-directional triggering and interaction between the HTML Document and the embedded media. Imagine you are a media content producer and you can embed triggers into your video that will instigate social interaction and information widgets at correct times in the media.  Simply amazing when you think about what might be possible here.

Putting it all together, the potential is there for a much larger wave of technological and cultural innovation now, than at the beginning of Web 2.0.  Not only is this significant enough to be compared to Web 2.0; its bigger!  And if you consider Roger’s Innovation Adoption Curve, NOW is the time for entrepreneurs and technologists to begin creating opportunities around these possibilities.  Don’t wait until we’re already 1/2 way through the innovation cycle and the retrospective innovation has become obvious.  By then, it is too late.

Usability Is Not a Function of Graphic Design!

The International Standards Organization (ISO) defines usability as “The extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency, and satisfaction in a specified context of use.”

Usability is essentially the study of user experience applied for the creation of a better user interface for software. And a well-designed user interface is one that is naturally intuitive and simple, requiring no explanation or extra steps in one’s workflow. So why do graphic designers own user experience in most agencies, when they have relatively little domain knowledge or awareness of the implicit worflows?

Perhaps because it gets thrown into the same bucket as ‘the interface’, or because they both involve the word ‘design’. But the graphic designer has an entirely different motive and skill set than is mandated for good user experience (UX) design, which marginalizes the UX prerogative in many cases. Designers are focused on fontography and layout. I’ve seen first hand that a graphic designer will override UX fundamentals in order to facilitate a better aesthetic flow.

Engineers are no better. I’ve used a few too many applications in the past that were clearly designed by the in-house engineer with an affinity for the user interface. Apparently learning a little JQuery entitles you to design the user experience in some software houses. But more often than not, it is painfully obvious when an engineer designed the system because the UI and workflow match the underlying database table design and the system makes perfect sense if you know the database structure, but often is completely lacking in understanding of the end-user’s workflow.

If I had to pick a role from the production chain to own user experience, it would be the product manager. That of course assumes a certain type and size of organizational structure, but usability should be driven by the person looking at the bigger picture of the product and who is working most directly with the end user. The user experience should be worked out as a series of wireframes based upon core UX heuristics, but in response to collaborative interviews with the end user. User experience needs to be driven by a deep domain knowledge and appreciation for those implicit workflows of the end user. To simply hand if off to the graphic designer ensures that the user experience with be a secondary priority in a design driven by form, not function.

 

Goodbye Flash, Hello Edge!

It is no secret that the iPhone does not support Flash.  Steve Jobs went as far as to explicitly rule out support of Flash by name, in his famous 2011 speech.  And now, Adobe has responded by announcing they will no longer support or further develop the Flash platform. Instead, Adobe is quietly releasing a new product called Edge, which outputs HTML5, CSS, and JavaScript, as presumed replacement for their popular animation authoring environment.

HTML5 is very powerful and a significant milestone in the evolution of web application interface architecture.  Its not just about animation and native support of audio and video.  In truth, HTML5 in conjunction with JavaScript can do just about everything that Flash could do. The name HTML5 in fact is perhaps a misnomer in this regard as it should be noted that HTML5 embodies the standards for a collection of technologies that facilitate audio, video, real-time rendering and animations, local persistence, and so much more.  But because it is all inherently a part of the HTML5 document model (not compiled binary code), accessibility and SEO are no longer the issues they have been in the past.  Finally, the design and technology prerogatives need not be in contradiction to one another!

So what exactly is Adobe Edge? The basic concept for developers is quite similar to Flash.  The differences  are minor, for example the timeline is based on elapsed time now rather than key frames, similar to Adobe’s After Effects video editing software.  Also notable is the use of non-destructive editing. Rather than over-writing the original HTML and JavaScript files you start with, it will create its own parallel file set to augment what you started with. Available binding events are also a little bit different and better reflect their HTML5 underpinnings. Overall though, you’d be surprised just how similar the tools are.

Adobe Edge

With Adobe making this change to embrace HTML5, it seems that just about everyone is on board now with HTML5 and JavaScript as the way forward for development of rich internet applications; Microsoft even announced recently that they are depreciating Silverlight.  That’s on the desktop anyway. Mobile is a more complex issue with so much momentum still with development of native applications (iOS, Android, etc). The cost of maintaining separate applications for various devices certainly isn’t ideal however and truthfully, 80% of those apps could be replicated using HTML5 and JavaScript without much negative impact on user experience, but at a substantially lower cost.  Its primarily the sophisticated game and media applications that might not port as well.

Adobe Edge seems well positioned to take become the default product for interactive and animation authoring for the web 3.0 applications of the future. The product has done a good job of playing off of the strengths and knowledge of the existing Flash platform and hopefully will not alienate the developer base.  They’ve satisfied UI architecture prerogatives by keeping the output artifacts aligned with HTML5 and the document object model, and they’re going to be the first significant tool to provide an easy authoring solution for what will inevitably be a major new wave of web application innovation.  I’m sure it was a painful decision for Adobe to kill their golden goose, but this move should be a positive for everyone and may actually help them in the long run.

Website Optimization Tips

Optimizing a site can mean many things.  If you’re an eCommerce site, probably means optimizing your landing page, hiding your navigation so as not to distract, and pushing visitors toward the goal of a transaction receipt page.  For small business and service professionals, it may mean getting someone to fill out a form.  Or if you’re a publishing site, it very well might mean something nearly opposite of those two focused goals – perhaps you actually do want visitors to traverse your navigation, discover and engage with your content or community.  No matter how you describe it though, these things all have one thought in common:  you’re looking to maximize the value of each visitor to your site.

Although this practice is typically referred to as Website Optimization, Landing Page Optimization (LPO) or Conversion Rate Optimization (CRO), it is part of much broader schools of thought.  Many universities now offer interdisciplinary programs called Human Computer Interaction (HCI) that combine the study of Psychology and Information Systems, to better understand how to create systems that do a better job of servicing and assisting the humans that the systems were built for.  Usability and User Experience are two more common terms now used in design circles, to describe how to improve a user’s interaction with a system or website.  In many ways, landing page optimization and conversion optimization are applied marketing concepts, as much as Usability and User Experience are applied design concepts; but they’re all drawing up HCI which simply seeks to create better interfaces that accomplish the goals of the system. For the purposes of this blog post, I’m focusing on the marketing prerogative, but many of these thoughts can be applied to overall system design and usability as well.

Improving Efficacy
So how does one maximize value from their visitor? For the purposes of this discussion, let’s assume we’re talking about the easy to understand and quantify, eCommerce model.  With eCommerce, there’s typically a large spend on PPC and that spend is usually in pursuit of directly-quantifiable direct sales; not long-term fuzzier metric brand building. So our goal in this case would be to get users to our site for $1 and get as many of those visitors to buy something as possible, to increase average profits above the dollar we spent to acquire their attention.

Website Optimization
We’ll ignore the efficacy of the ads themselves for this conversion and focus purely on what happens after they arrive at the site.  Onsite, there are really two things that matter:

  • Focusing attention in the direction we want them to go.
  • Reinforcing trust and removing doubt and fear.
  • Keep attention focused and directed at the goal line (the receipt page).

If we keep those strategic goals in mind, the tactical implementation is relatively straight forward at a high level.  Obvious optimizations would be:

  • Remove the navigation bar on the landing page
  • Use very large submit buttons that are hard to miss
  • Use simple bullet points for details, not long-form text
  • Don’t present too many choices; match exactly the one product they searched for.
  • Use a headline that excites the user.
  • Use trust signals such as testimonials or credential logos on landing and checkout pages.
  • Minimize extra steps that could be hurdles to checkout such as the always-favorite required membership signup.
  • Remove barriers such the form that goes blank and requires refill if one piece of required information is wrong.
  • Don’t ask for more information checkout than is absolutely necessary.
  • For God sake, do NOT use Captchas!

Beyond those basics, there are a number of more subtle opportunities for optimization that simply require a “feel for the art” of it all, and proper domain knowledge, to match the culture of your users.  Catching their attention is key but authenticity and trust are also very important and cannot be sacrificed for a cheap thrill, or they’re not going to give you their credit card number.

Tactics that might work well would include using a larger checkout button with appropriate messaging.  Perhaps something exciting such as “Check it Out!” works for an entertainment product but a move conservative “Get Started” is more appropriate for insurance or financial institutions.  Color choices, images and titles work the same way.  Focus on finding a way to grab attention and infuse emotional excite, without compromising authenticity or trust.

Testing Methodology
As with any advice, there are many half truths in optimization.  What works well for many sites may not work for yours.  A lot of this comes down to culture and the issues f authenticity and trust I mentioned above.  For this reason, you may start with certain known principles as described above and broader usability heuristics, but the only way to truly know what works best for your own audience, is to test.

Testing in fact, is at the basis of most sophisticated online marketing operations today. We should start with a humility that we never absolutely know truth, we can only approximate it, and should always seek to evaluate truth through objective and empirical evaluation.  As such, most online markets today user an iterative approach to their online marketing and optimization strategies.  Continual testing and revision is baked into the on-going process.

To test your overall conversion funnel, you just need to setup goals and funnels in your analytics tools to be able to track and observe where bottlenecks are and results of changes. The efficacy of a specific landing page however, is better instrumented with a tool specifically designed to track changes of that one page, and track the goals against those changes.  There are tools such as Unbounce, Optimizely, and the free Google Website Optimizer (WSO) for that; WSO optimizer in particular is handy due to its one-click Google Analytics integration.

There are two types of tests that you might consider running for landing page optimization – an A/B test, or a Multivariate test.  An A/B test compares two or more separate pages, to determine which is more effective. This is a simple test to setup, requires less traffic, and is great for comparing entirely different versions of page layout.  If you instead want to focus on testing more subtle changes within a page such as title messaging, or button color, or featured image, a multivariate test would be appropriate.

A/B Testing
Using a tool such as Google Website Optimizer (WSO), you’d either setup redirection for the randomly served variants of yourA/B test, or you’d embed a few JavaScript hooks so that you can manage your variations from the WSO tool, if running a multivariate test.  Once setup, just wait for enough sample data to collect and let WSO do its thing.  Over time, you’ll see a percent-likely determination for which page is more successful. For example, “This page is 95% likely to outperform”.  Once you reach around 90-95%, WSO will determine the variant to be a “highly significant” improvement.  From there, you’ve confirmed which variant is more effective and can make your changes, as well as consider the next round of tests based on your findings.  This process can be repeated enlogica as you focus more and more on exactly what works.

For anyone new to optimization, I cannot stress enough, how important these methods are; you’re likely leaving a substantial amount of money on the table.  If you’ve never thought about optimization before, its quite likely that you can increase your Return on Ad Spend (ROAS) by 100% or more. I personally have had experiences in which small changes such as making a checkout but big, green and changing the messaging on it, with a single test, increased conversions by almost 40%.  So, while this form of methodical and detail-oriented optimization may not be the most sexy part of running your online business, it could easily be one of your most important!

Usability Is Not a Function of Graphic Design!

The International Standards Organization (ISO) defines usability as “The extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency, and satisfaction in a specified context of use.”

Usability is essentially the study of user experience applied for the creation of a better  user interface for software.  And a well-designed user interface is one that is naturally intuitive and simple, requiring no explanation or extra steps in one’s workflow.  So why  do graphic designers own user experience in most agencies, when they have relatively little domain knowledge or awareness of the implicit worflows?

Perhaps because it gets thrown into the same bucket as ‘the interface’, or because they both involve the word ‘design’.  But the graphic designer has an entirely different motive and skill set than is mandated for good user experience (UX) design, which marginalizes the UX prerogative in many cases.  Designers are focused on fontography and layout.  I’ve seen first hand that a graphic designer will override UX fundamentals in order to facilitate a better aesthetic flow.

Engineers are no better.  I’ve used a few too many applications in the past that were clearly designed by the in-house engineer with an affinity for the user interface.  Apparently learning a little JQuery entitles you to design the user experience in some software houses.  But more often than not, it is painfully obvious when an engineer designed the system because the UI and workflow match the underlying database table design and the system makes perfect sense if you know the database structure, but often is completely lacking in understanding of the end-user’s workflow.

If I had to pick a role from the production chain to own user experience, it would be the product manager. That of course assumes a certain type and size of organizational structure, but usability should be driven by the person looking at the bigger picture of the product and who is working most directly with the end user.  The user experience should be worked out as a  series of wireframes based upon core UX heuristics, but in response to collaborative interviews with the end user.  User experience needs to be driven by a deep domain knowledge and appreciation for those implicit workflows of the end user.  To simply hand if off to the graphic designer ensures that the user experience with be a secondary priority in a design driven by form, not function.