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.

Website Design for Tablets and Mobile

Recently I went through a redesign, and as part of the effort, I reviewed how best to support tablets and mobile visitors. If you haven’t been researching this topic recently, no one could blame you for dismissing mobile/tablets as a novelty that won’t have much impact on your web presence. But if that’s where you’re at, consider this:

It was recently estimated (as of early 2012), that 10% of all Internet traffic is now coming from mobile devices and mobile traffic will be as high as 36% by 2016. And compared to this time last year, mobile traffic is up 131% … in a single year. We are clearly in a secular trend toward personal mobility in computing. Proliferation of mobile devices now is accelerating and sales of internet enabled mobile and tablet devices now exceeds that of traditional desktop devices; tablets alone will exceed desktop sales as early as next year!

So there is a compelling need to support mobile and tablet users with any new web design moving forward. But how do you do that? First let’s talk about our objectives and we can look at a couple possible strategies from there:

Objectives:

Consider the use pattern of these devices. When using a desktop computer, they’re typically at the office and either researching work-related information, or procrastinating between projects (yes, ahem, at work). Tablet users meanwhile are typically sitting on the couch in front of the television during evenings and weekends. Mobile users meanwhile are trying to squeeze in activity while waiting in the doctors office or at a red light in their car (sad to say).

So what is going to be a meaningful and satisfying user experience for these three users? The desktop and tablet users are going to be more receptive to alternative suggestions for content (upsell eCommerce and related posts links, etc). Tablet users will enjoy media and rich images more. And all of this rich user experience is actually an impediment for mobile users who are fighting against time constraints, a small screen, and slow load times. They just want to get to the critical information such as contact information as quickly as possible. So sticking with the traditional web design only, which is geared for the desktop user, is not going to well represent the other two new classes of users (table & mobile) that you need to start thinking about.

To facilitate these new users, there are a few options:

Native Application:

The first thing that comes to most people’s minds with mobile content, are the native applications for iOS and Android that you download and install on your mobile and tablet devices. These provide very rich user experiences but require that you develop a separate application for each device that you want to support. That can get expensive. And let’s be honest, how many websites are users going to want to take the effort to download an app for? So does all that extra expense justify developing for a use case that users likely won’t even engage? There are exceptions to this rule of course. If you’re a gaming company or you are a cloud software application that provides a productivity tool that the user will need to access on a regular basis, then a native app is certainly a possibility and probably even a superior user experience. For the majority for corporate and marketing websites though, this just isn’t a reasonable option, since a user is merely looking for some quick information about your site.

Separate Mobile Design:

The next reasonable consideration is creating a separate website to support tablets and mobile phones. This is relatively easy to accomplish. It is relatively straightforward to detect the device type (e.g. HTTPUserAgent) and redirect users to alternative content accordingly. If you use your phone to browse web content frequently, you’ve likely come across a few sites that will redirect you to a separate subdomain of their website. xyz.com for example might redirect you to m.xyz.com. And there you serve the simplified version of the website that better applies to mobile devices. But this gets complicated when you begin to consider all the various permutations. What about tablets for example that actually benefit from richer user experience?

Responsive Web Design:

There is a quiet movement in the design community that began with an article by Ethan Marcotte, describing the possibility of Responsive Web Design (RWD). The idea provides a technical framework for implementing a “mobile first” web design, in which you start by designing the constrained mobile experience and layer on the richer user experience based on capability from there. By working backwards, you ensure you’ve accounted for all the various permutations such as all the different screen sizes (media ports), landscape versus portrait layout, etc.

Responsive Web design is possible primarily because of the introduction of media queries with the new stylesheets standard in CSS3. Media queries enable the website author to encapsulate CSS classes within conditional statements that evaluate the media type of the user such as window size (viewport) and orientation. RWD also addresses use of flexible design grids and context-aware images that adapt the size and quality of the image also based upon device type.

A Hybrid Approach:

After evaluating these different options, I ultimately concluded a hybrid approach was in order. The philosophy of responsive web design is elegant, I naturally gravitate to it, and it worked wonders for optimizing the desktop version of the website for tablet devices. At the end of the day though, I did not feel it was appropriate for mobile devices. As mentioned earlier in this post, mobile users have fundamentally different goals and needs, and are simply not looking for a more elegant representation of my website; they want to get the information and get it quickly, period. I think about my mobile experiences and when I look up a business online, its typically because I just want to find their address or contact information. Thus, there is a lot of information on the primary website that does not belong there for the mobile version, and it really should be treated separately.

An Example:

If you check out Enlogica.com on your smart phone, you’ll see that there are only 5 pages and the first is the contact link. If you click on this, it is a very simple page with the address and three buttons that allow the user to: click to call, click to email, and click to get directions on their phone. That’s it. There are a few other pages below that for the sake of completeness (the blog section is accessible at the bottom), but I’m really trying to create a simplified user experience, based upon the assumed use pattern of the user. And this is fundamentally a different prerogative than Responsive web design, which is focused on adaptive aesthetics, not user experience.

Because I’m using WordPress as the CMS framework for the site, I was able to easily setup a secondary mobile template that is only delivered to mobile devices, based upon the device type (HTTPuserAgent). This provided an elegant solution, since I was able to and optimize the content for mobile devices without having to create a separate mobile site to maintain.

In summary, I determined a hybrid approach to mobile accessibility that married the benefits of responsive web design with the practicality of a separately mobile theme was preferable. Responsive (RWD) techniques were used to adapt to a reasonable tablet experience, but mobile devices receive a separate theme, with limited navigation, and the content of those pages is also minimized. The mobile experience is greatly simplified and models the native device interface (using JQuery Mobile). This approach provides an optimal user experience on all three device classes (desktop, table, and mobile).

Article originally published at SitePoint:
Website Design for Tablet & Mobile

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.

Usability Heuristics

Usability Heuristics are an artifact of usability engineering and commonly studied in related fields such as Human Factors and Human Computer Interaction (HCI). The heuristics are a set of 10 fundamental principles that Jacob Neilson theorized every user interface should be subjected to in a usability inspection, prior to the usability design being handed off to the production line (graphic designers) for implementation.

Typically, a usability audit would be conducted at various stages of the process, but most importantly after the completion of the use cases and wireframes.  Tools such as Axure and Balsamiq provide excellent click-through wire frame modeling environments which are conducive to such audits and analysis.

Before beginning design of your next project, consider reviewing these principles with the core team and have a discussion about how the system can be better designed to reflect the end user.

1. Visibility of System Status – The user needs to have awareness of what is going on.  For example, showing a status wheel that something is loading instead of a blank screen.  Or better yet, showing what percent of load is completed.  This enables the user to make decisions and feel more in control of their experience.

2. Matching System and Real World – The system needs to match the concepts, language and messaging that are reflective of the end-user. This is often a problem in systems designed by engineers of graphic designers who are not aware of the workflow and who lack depth of specific domain knowledge, something I talk about in this article.

3. User Control and Freedom – This rule assumes that users frequently click the wrong button and thus need an easy way to get out of the new sequence they’ve just initiated.  I’m sure we’ve all experienced clicking the wrong button and feeling like we’ve been punished for our mistake as we wait for the system to finish whatever it must do next, or even start over, or lose data.  The goal here is once again to put the user in control of their experience.

4. Consistency of Standards – The system should be designed in a way that it is obvious and self-documented in nature.  This means using simple and consistent labeling, messaging, and visual clues.  It also helps that the visual clues  and labeling clues are selected carefully to help communicate the proper things.  Proper use of colors can also be helpful here (red for stop or error, green for go or success).

5. Error Prevention – A careful evaluation of use cases should be undertaken to look for opportunities for error in the use for the system and then to revise the design to remove or minimize the error.  Often times, messaging is not enough since people rarely read unless they are stuck and already experiencing the error. Instead look to minimize options and complexity and reconcile any conflicting messaging or clues.

6. Recognition Rather Than Recall – The system should be immediately obvious, then user should not have to learn how to use it.  If there is a steep learning curve, there is something fundamentally wrong. The one exception here might be if the user lacks the specific domain knowledge for which the workflows were designed. otherwise, there should not be the need to learn or remember how the interface works.

7. Flexibility and Efficiency of Use – When designed well, the system will provide shortcut options for power users who understand the system well and no longer need the thoroughly composed user interface to perform their activities.  For example, most modern desktop software will provide shortcut keys to print, saving, cut, and copy, reducing the steps needed to perform these actions.  Thus acting as accelerators to increase productivity. Note – This is more of an optimization rule for productivity software than anything else.

8. Aesthetic and Minimalist Design – From a usability perspective, the aesthetic should be simple and not add details that would either confuse the user or distract them from the meaningful elements.  I hint at this in another article where I rant about user experience commonly being the domain of graphic designers, and the inherent conflict of interest there.

9. Help Users Recognize, Diagnose and Recover From Errors – Hopefully you’ve avoided most errors by now but just as good measure, if and when an error occurs, it should be clearly written, easy to understand, and most importantly, you should provide thorough assistance to the user to get them back on track.  A good example of an opportunity for improvement is the all-too common 404 Error page on websites (page not found).  If this page was instead used as a “how can I help?” page with documentation and explanation, that would dramatically increase the user experience for those that encounter the page.

10. Help and Documentation – And finally, documentation for those who need to understand the system better. Hopefully you designed the system in such as way they don’t need to read about it, reduce errors as much as possible, and helped them recover when one did occur, but as a final catch all, you must assume your design is not perfect and the end-user may have less sophistication than you had hoped.  For these scenarios, it is important to provide detailed documentation to help them get up to speed.

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.