There was a problem. HTML structured the page but didn’t fill it with copy or images. Each time I learned one skill two more that needed learning popped up. Web development challenge in these early days centered on finding people willing to help for a reasonable amount of money or learning how to DIY (do it yourself). We’ve come a way since 1999, but some things don’t change. Anyone can have a website only a few will understand how to make money online.

You Get What You Pay For And Web Development Costs Are Going Up
In 1999 presence was the challenge. In 2012 presence is assumed. Once everyone has an Internet marketing presence competition moves from presence and engineering to the battle for hearts, minds and advocacy.

Fighting for hearts, minds and advocacy requires different skills. Internet marketing may be the most engineering-like marketing thanks to a sea of behavior and heuristic information, but cutting clutter to make strangers love your company, brand or product is as much business therapy as business.

As web development business therapist we see common mistakes such as:

• Search For Silver Bullets
• Know Thyself To Know Others
• Barking Dog Marketing
• Cathedral vs. Bazaar

Stop Silver Bullet Search
We believe in the quick fix even when life teaches otherwise. The search for silver bullets is distracting and bleeds our most valuable asset – TIME. Reject quick fixes and instant millions. People do win the lottery, but their winning never improves your odds. “Win the lottery” isn’t an effective Internet marketing plan. Anyone who tries to sell you a silver bullet or lottery ticket should be avoided. Creating greatness is HARD and requires sweat, tears and treasure.

Know Thyself To Know Others
Thinking Like An Internet Marketer values the web for what it can and can not accomplish. No web site makes a company’s communication more organized or clear. The web is a huge guassian blur making pointed and sharp ideas, potentially dull and confusing. How would you rate your knowledge of your company’s character on a ten point scale? If you answer anything below a 8 then you have introspective work to do. If your company, brand or product is blowing from pillar to post then, as Gertrude Stein famously said of Oakland, “There is no there, there.” Know yourself BEFORE you create any site, blog, social media or email campaign. Compare each effort in some meaningful and measurable way to your company’s core values.

Barking Dog Marketing
Do you walk toward or run away from a barking dog? Barking at visitors has the same impact. Greatness, transparency and honesty are more sustainable and profitable than any short term bark. Barking may improve sales or conversions for a short time, but damage to brand, positioning and long term profits and advocacy may be significant and long lasting. Every day and action matters in the battle for hearts, minds and advocacy. Read Dov Seidman’s great book HOW: Why we do anything means everything. Seidman explains why values and processes are the only things any business truly own.

Cathedrals vs. Bazaars
Internet marketers build sand castles. Whatever we create will be gone soon. Building sand castles requires different attributes than constructing Renaissance cathedrals meant to last a hundred years. Thinking like an Internet marketer means organizing work around:

• Speed
• Data
• Creative Use Of Convention (don’t recreate what visitors expect)
• Team
•  The Magic 11% (see 1:10:89 Rule)
• Listening and Leading

Speed, passion and wrecking what needs ruination means errors, bumps and mistakes happen. If mistakes drive you crazy don’t become an Internet marketer. Mistakes are a part of the cost of being relevant in a constantly shifting space such as Internet marketing. Perfection isn’t a sustainable Internet marketing strategy. Speed, being data-centric and listening more than you talk work better. Understanding the difference between creating sand castles and accepting input from the bazaar instead of laying stones to live for a hundred years is why “Thinking Like An Internet Marketer” requires a paradigm shift. Perfectionism is too expensive for sand castle builders working in the world’s largest bazaar dodging silver bullets and barking dogs.

@drewdiskin Drew Diskin, M.S. Digital Engagement Strategist, Inertia

Commentary:

I think Drew had a powerful story to tell, using this story of John Hopkins and showing more specific examples of HOW they turned around their results, HOW he got C-Level buy in would have made this a much more powerful story.  All in all a good presentation.

Notes:

How do you translate real world experiences into a digital one? Drew worked at Hopkins Hospital & Health System.  There was a culture that was beyond anything you could describe in some ways about how amazing they performed.  But they had severe digital woes.  They had a 62% bounce rate, 75,000 pages, 350+ websites.  The reality was that their brand sucked on-line.

The took on a smaller subset of pages and put them out in a few months and put it out there fast so they could figure out how they were doing.  Their CMS was an old Cold Fusion product that was inhibited fast turnaround.  How do you speak to people not at them when all the patient cares about is that their cough has been persistent for two years because they worked in coal mines?

Be present where your customers are at in their lifestyle and how to change to make it more relevant to them.

Obvious UX – Analytics can be used to get a baseline, UX Testing and Prototyping, Focus Groups, Online Surveys, Informal Conversations with Internal and External Customers are a MUST now, they are necessary to do business.  The challenge is convincing the C-Level executives that this is worth spending money on.

Not Obvious – Are people returning?  Are they sharing? Are they converting? Are they completing the tasks that you have? Can you access the site via mobile? Are you trending? Do you have a Facebook presence? Where else were your users before and after they were at your site?

Measure, Recource, Prototype, and Measure again – was part of the Hopkins rescue mission for UX.  Drew helped create a Digital Engagement Strategy that creates and experience for users not just a website.

Traffic findings were a success: Find a Doctor was up 187%, Apply to the School of Medicine was up 200%.

How to mitigate the performance risk of 3rd party web components

@compuware Dennis Gullotti, Senior Product Marketing Manager

Commentary:

The chief takeaway for me was as we add more and more service calls to our sites, make sure you monitor and load test all your 3rd party calls.  If you increase your load time by 2 seconds you will increase your abandonment rate by 8%. When testing capture your hard data so you can show you business people the impact of adding social media hook-ins to your sites.

Notes:

3rd part components can help you drive traffic like Twitter feeds, Facebook feeds, RSS all of this should be to drive traffic to your site and increase your conversions.  CDN’s can also be used to increase performance like EC2 storage, but outside of North America and Europe the performance isn’t great so add a CDN on top and it will scream.

Your performance because of 3rd party presents other challenges in getting speed because of size and customer satisfaction.  Anything above 8 seconds is not good.  Excellent load times need to be 2 seconds.  All of that testing should be done from user desktops because that is real.

Set your business and performance goals: Is my audience using it? Does the vendor guarantee performance? How much revenue is it generating?  Do some due diligence on the component provider?  How does it impact mobile?

Forrester research claims that in 2009 that a page should load in 2 seconds so think about how you are going to impact that load time when adding a 3rd party component.

Facebook publishes performance statistics for their APIs.

71% of mobile phone uses expect a site to load just as fast on their phone.  The takeaway here is to make sure you are limiting 3rd party content calls, limit the number of requests, keep sizes smalls and use a Content Delivery Network.

Make sure that you LOAD Test, especially if you have 3rd party calls.  When doing this type of testing try to do it from the end users point of view: mobile, outside the firewall, etc.

Half-Hearted User Adoption

@navigationarts Don Bruns – Director of Application Design, Navigation Arts

Commentary:

Don moved really fast through a lot of his notes.  He had some great content, the chief takeaway was to make sure you are creating experiences that accomplish their 10 most common tasks.  Overall this was a high level speed overview of how adoption is the only metric that matters.

Notes:

User adoption is not binary, it is the core success metric of your application.  Halfhearted adoption can kill your ROI.

Causes of this: No benefit to the end users, lack of business case, system doesn’t reflect how users behave, poor system performance, failure to manage change.

Change management is overcoming the points of resistance for your users, not “because I said so.”

What are the symptoms of half-hearted user adoption?  Do you find yourself bribing your employees to use the system or share information on-line? Are you penalizing non-use or even inventing reasons for use? Are you creating a scavenger hunt?  What you should be doing is creating a killer app that transforms the way that you work.

Get developers to take the User-Centered Design approach with everything you create to make sure you are creating applications that users really want to use.

Designing for Touch: Are We Ready?

@scottgunterux Scott Gunter Vice President of User Experience, Usability Sciences

Summary/Commentary:

Not everyone is ready for touch screen devices, but if you are going to roll one out make sure you do meaningful testing.

Notes:

The iPhone and the iPad have changed the whole dynamic of how we create applications.  Are we ready for it because it has changed our behaviors?  Are consumers ready for more touch screen devices?

Good example of touch screen devices in our lives:  There are over 400,000 ATMs in the US – source Wired Magazine 2009.  This device was not accepted early, but over time has become a standard.  There are now 28,000 kiosk locations nationwide for Redbox – this simple design is a recipe for success.

More choices create more decisions and that typically is bad for a User Experience.  (author note, thinking of Windows Vista here)

Distracted driving accounts for 16% of all care fatalities in 2009, most of these experiences were because of in-car entertainment systems?

Many grocery stores are getting rid of self service checkout. Big Y Foods due to their research decided to bag self service checkout.

“The most valuable asset of a successful design team is the information they about their users.” – Jared Spool

One of the best ways you can do this is buy doing a field study of observing your users.  What do you want to learn?  What do you plan to do with the results?  List out your assumptions and validate them.  This will allow you rollup your data in a meaningful way.

One of the biggest mistakes you can make in research is rushing to conclusions before you complete your research.  Try to observe users in their natural environment.

Before you do your testing, conduct a pilot session, arrive early, then stay out of the way of your uses, don’t be afraid to adjust your plans on the fly, and capture all the data you can.

When you analyze your data make sure you test out your assumptions, go back to your objectives and leverage visuals, but above all let your data drive your analysis.

Nancy Jin, a co-worker of mine, and I attended the Start Up Weekend.  Over the weekend, participants met the challenge created by the Start Up Weekend committee and outputted prototype Facebook applications, Mobile applications and websites that encapsulated an idea that was created and pitched by a participant.

Here is a quick summarization of Nancy Jin’s experience at Start Up Weekend:

Friday night, out of over 100 participants (evangelists and hackers – basically marketing specialists and developers), 54 people each had 60 seconds to pitch an idea. We then voted and picked which ones we wanted to work on. I landed a team of 2 other designers, two ruby developers, and three marketing specialists, with an idea of urban farming. We were then up till midnight figuring out what our plan was the next day.

8:30am – 12pm Saturday was spent surveying real people, defining problems, coming up with a solution and a base model for the business. Wireframing started at 2:00pm. By 4:00pm we had a logo and by 6:00pm we had a homepage. By 8:00pm we had a working site where people could log in and sign up, and by 11:00pm the rest of the pages were designed, functioning, and the homepage sliced out. Then I went and got some sleep.

The website was completed at 1:00pm the next day, and we had 5 minutes to pitch the idea against 17 other teams in front of everyone including a panel of judges.

We won.

Here’s the site: yardsprout.heroku.com

We addressed that local food is important for economic, environmental, and health reasons. Urban farming is important because we are utilizing fertile spaces that are otherwisewasted. People can grow their own gardens but for most people the toughest part is getting started. We wanted to first establish a business model where novices can seek master farmers to help them plant something,  to eventually have the company provide people with gardening kits, which is where yardsprout could team up with brands like Lowes and Home Depot.

Some other cool stuff I got to do was working with github, some ruby on rails (it was like what? I think where I’m sticking my HTML makes sense), and a lot of SASS (my first time).

Here is a quick summarization of my experience at Start Up Weekend:

Friday – I did not plan on making a pitch but one of the hosts came by everyone’s tables and urged us to make a pitch, so I motivated myself to bounce ideas off of random people around me.  I decided to pow wow with two random students from NCSU about business concepts.  First one that we came up with was struck down by our very own Nancy Jin who saved me the embarassment of pitching a product that pretty much existed in the wild.

I considered the 5-10 minute pow wow over a great idea and being shown the thriving product by my coworker next to me my first “failure” of the night.

I considered the pitch my second “failure” of the night.

“Pivoting” is when you change a fundamental part of the business model. It can be as simple as recognizing that your product was priced incorrectly. It can be more complex if you find the your target customer or users need to change or the feature set is wrong or you need to “repackage” a monolithic product into a family of products or you chose the wrong sales channel or your customer acquisition programs were ineffective.

(source: http://venturebeat.com/2010/04/14/business-plan-not-working-time-to-pivot/)

Therefore, I considered not winning my third “failure” of the night.

What I learned and did over the weekend:

• Deals along the way (think Groupon deals for long point to point trips)
• Concert and Sporting Events (which led to more focused growth strategies by my teammates)

• Work with TicketMaster, StubHub & Political Campaign managers to push individuals to Carpool to events.

This most recent study comes on the back of an earlier survey E&Y carried out between between August and October 2010 found that 76 per cent of UK businesses questioned believe urgent and decisive action is needed or the UK will fall behind other countries that are prioritising cleantech as a sector of national strategic importance.

(source: http://www.newenergyworldnetwork.com/alternative-energy-analysis/by-technology-kb/energy-efficiency-kb/confidence-in-uk-cleantech-policy-ebbs.html)

The survey I created was this:

It was definitely a memorable weekend and I plan on attending this event again next year.

1. Users Have No Patience

Regardless of what the product is, users will get frustrated easily if they have to wait a long time for a response to an action. Nobody likes a loading screen in a video game. While loading screens can be minimized in multiple ways, it is hard to eliminate them altogether since they use disc-based media. Developers try to keep the user entertained by playing background music, customizing the loading icon/progress bar, or displaying information such as history or facts during the load time. EA Sports FIFA 09′s loading screen has the user play against the goalie in a practice environment while the game loads.

For Web usability, this means that new pages must display within 1 second for users to feel like they’re navigating freely; any slower and they feel held back by the computer and don’t click as readily.

Jakob Nielsen – Alertbox, October 5, 2009

On the web, loading screens are most associated with Flash. Flash applications almost always have loading screens. If something takes more than 1 second to react, most users will get frustrated and leave. Even the simplest of things such as a hover element should not have a delay. Bandwidth is becoming less of an issue these days and websites should be able to make the user feel as if they are in total control.

2. It’s All About the Experience

Even the elderly could not resist the Nintendo Wii (source: BBC)

Why do people play video games? Simple: They want to have fun and enjoy the action, however that is defined. Modern games increasingly try to engage the user by making the games contain a strong storyline and mirror elements you would find in the cinema, such as recent popular games like Grand Theft Auto 4 and Uncharted 2. Since these games are attempting to be more realistic, it is no surprise that the video game industry is overtaking the movie industry. Instead of watching great movies, you get to feel like you are in one, with full control of the characters. The creative interaction is the key rather than just eye candy. The Nintendo Wii became popular among traditional and non-traditional gamers due to its unique interaction, even though its graphics were inferior to other gaming consoles.

On the web, the experience is what keeps users coming back. E-commerce websites are particularly focused on the experience because they want potential customers to feel like they are shopping safely and securely. Users browse the web for information. It is how the website presents this information and, more importantly, how it gets the user to that information that makes the experience worthwhile. Amazon and eBay have been pioneers in the e-commerce world and their strong returning customer base proves that they know what they are doing.

3. Progressive Enhancement is Good

This generation of video games are now available with HD audio and video. If you own a system capable of high definition like Xbox 360 and Playstation 3, you can take advantage of high quality graphics and sound. Not only can games look more crisp and realistic with vibrant colors, they can also produce uncompressed multiple channel audio that makes you feel like you are in the game – literally! For those who don’t have an HDTV or a modern surround sound system these systems will simply downgrade those features and play the game as normal. The games will always function the same and sound the same – it’ll just be in a lower resolution and with only 2 channels of audio. No harm done to them. Progressive enhancement in action.

Websites are starting to show progressive enhancement as well with the use of CSS. Web designers try to reward users who browse with modern browsers (i.e. Firefox and Safari) with a beneficial experience that users of IE cannot have, without detracting from the functionality. Designers are using RGBa values, which allow them to include an added alpha channel to the element. This is a powerful tool to have in your designer toolbox because it allows you flexibility and control in overlaying graphic elements and to incorporate opacity variances into the design.

CSS Document
.element {
     color: #fff;
     color: rgba(255,255,255,.5) /* for modern browsers */
}

The example above declares a standard CSS rule for the text color. Older browsers who do not support CSS 3 will only recognize the first line and ignore the rest. The more modern browsers, however, will read the second rule and therefore ignore the first rule. The same concept applies to the CSS 3 border radius property and the CSS 3 opacity property (alpha channel on the entire box element). Andy Clarke uses transitioning properties on his website that are only functional in Safari. These properties, which make the DVD and disc animate on hover, can provide some unique design interactions. Taking these concepts and applying them into websites gives users a unique experience and at the same time doesn’t take away the essence of the design entirely for those who use, well… IE.

4. Minimize Learning Curve by Including Tutorials

Instruction booklets are becoming less used these days for video games. Developers are now putting tutorials into the game and having the user learn as they progress. Most typical games will have the first level or so of the game be the learning grounds for the rest of the game. This is becoming a de facto standard in the industry. During this time, users will be prompted with basic controls and developers will design the level to make sure the the controls are used properly before permitting users to continue the game. These learning tools help minimize frustration and also get the user prepared. What better way to learn than to actually try. Reading instructions is not as effective.

Websites need to be careful about introducing new objects or applications to the user. If you suspect a user will have to think about how to use a particular part of your website, you will have a problem. Users will need assistance with it – whether it is simple instructions or a video tutorial.

5. Keep the Interface as Simple as Possible

In-game menu. Better watch your back! (source: Game Trailers)

Interfaces are extremely important in grabbing the user’s attention. Video games are coming up with some creative ways of designing their interface. While being creative, they still function the same and are easy to navigate. Nobody wants to be confused about where they are or how to get out of the location they are in. Navigation should be carefully thought out. Dead Space uses an intuitive in-game menu where your menu pops up in front of you while you are playing the game. There is no interruption from action as you still have control of your character. Madden NFL 10 uses a simple menu system that zooms to different parts of the stadium in the background based on the navigation section you have chosen.

Websites must remain simple to use, or users will get frustrated and leave. The UI needs to make sense and be engaging at all times. Breadcrumbs are important for sites that are large, preventing users from feeling lost.

The ability to simplify means to eliminate the unnecessary so that the necessary may speak.

Hans Hofmann

6. Don’t Rely on Graphics Alone

Great graphics, but unusable controls, make this game hard to recommend

Those who remember Grand Theft Auto 3 can agree that it was not the most beautiful looking game around at the time of it’s launch. That said, they will also agree that it was the best game to play at the time and it was a huge hit. Graphics can’t do it alone. The experience also needs to be great. GTA3 was impressive because it had an engaging storyline, incredible controls, and was a blast to play. A game with pure eye candy and no functionality will not last long in this industry.

On the web, functionality needs to be priority over design. Once a site functions properly, then you can apply the interface to it. Just like a chair, it needs to function before it looks great, otherwise it is useless. Plan out your websites carefully and make sure that you are considering all aspects exhaustively. Just like video games, a website can be popular if it functions and is enjoyable but will be useless if it’s just eye candy.

So, what are your thoughts on video games and web usability? Do you have any other comparisons? We’d like to hear from you!

Luckily a solution exists, and best of all it isn’t all that difficult to implement. The solution is built around the idea that child pages can access their master page, as well as any publicly exposed properties on the master. For example, in the Page_Load method of a child page, you can write:

MyMasterPage masterPage = Master as MyMasterPage;
masterPage.Property = “property value”;

This is not ideal though, because we are now committed to never changing our child’s master page; if we do, it will break our build. The correct implementation of this concept is to create an interface that all of our master pages will implement, then use that in our child pages’ Page_Load method:

IMasterPage masterPage = Master as IMasterPage;
masterPage.Property = “property value”;

We can still set our property this way, only now we can later change what master page we use, as long as the new one still implements the same interface. Good stuff. So good, that it puts us most of the way there towards dynamic body ids and classes.

To get these, we need a couple of properties on our interface:

public interface IMasterPage
{
     String BodyId { get; set; }
     String BodyClass { get; set; }
} 

Then, in the code-behind file for our actual master page:

public partial class MasterPagesDefault : MasterPage, IMasterPage
{

    private string _bodyId;
    private string _bodyClass;

    public string BodyId
    {
        get { return _bodyId; }
        set { _bodyId = value; }
    }

    public string BodyClass
    {
        get { return _bodyClass; }
        set { _bodyClass = value;}
    }
} 

Finally, in the master page’s body tag:

<body id="<%= BodyId %>" class="<%= BodyClass %>">

Now, to set these dynamically, use the child page’s Page_Load method just like before:

IMasterPage masterPage = Master as IMasterPage;
if (masterPage != null)
{
    masterPage.BodyId = “index”;
    masterPage.BodyClass = “index two-col”;
} 

By using publicly accessible properties, we give child pages the ability to set values on their master page. With this, it is easy to create dynamic body classes and ids in .NET.

Web Accessibility in General

Accessibility is an incredibly important aspect of web design. A company, organization, or individual who wants to have a website needs to consider having accessible content. In some fields like government and education to name a couple, they are required by law to have accessible websites.

So what does it mean to be accessible? Accessible to what? Accessibility is about making your content independent on a person’s abilities or disabilities. Regardless of a person’s physical or mental condition, they should be able to access your sites content.

Disabilities are categorized into four main areas:

• Visual
• Hearing
• Motor
• Cognitive

Accessibility Tool for Designers

WebAIM offers a tool called WAVE that evaluates a web page for accessibility issues. Not only do I use this tool personally on all of my projects, but I highly recommend it to others who have a concern for making their sites web accessible.

You can evaluate your website with WAVE one of two ways:

1. Download and install the Firefox WAVE toolbar.
2. Go to WAVE’s website

WAVE offers you a lot of tools to use at your disposal. You can check for errors, look at the structure and order of your site, see a text-only version, disable styles, and much more.

What is nice about checking for errors is that it visually shows you where the errors (if any) are coming from. This can make your design and development process much more efficient as you can pinpoint particular areas of concern.

There is not a greater feeling than to see WAVE give you the thumbs up and the green light on your design. Designers and developers should always be thinking about accessibility in their projects.

I encourage you to try this tool and avoid eliminating a valuable audience.

Apple understands usability better than most companies. If you review Apple’s product catalog you will find one thread of consistency – simplicity. Take a look at Apple’s iPod, their core colors are black and white, no obtrusive buttons or screws. One would wonder how it was even manufactured, seems as though the iPod was born that way. You are left with a colorful lcd screen and compass-style navigation wheel which you can control with one hand. Apple’s method to their madness is not to charge for what you don’t have but give you what you paid for – a simple way to navigate and listen to your music collection.

“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.” — Antoine de Saint-Exupery

The main challenge between designer and client when the topic of usability comes up is education. There is a lot to consider when the melding of minds between design and client occurs – project requirements, likes and dislikes, site goals, conversions, call to actions, etc. All this must be accomplished while still maintaining the integrity of good design and ease of use. This is the real challenge, it’s not like trying to fit a square peg into a round hole, but it’s pretty darn close. Here is how designers are separated from the pack. Give them what they want while still keeping people coming back.

Eric Burke, stuffthathappens.com, created a satiric image that I feel really illustrates this concept of “less is more” approach.

Consider the model that Apple and Google have taken. Create simple products so you don’t overwhelm your target audience. Or do as most sites do, add options and features that no one looks at so the only percentage that goes up is your bounce rate.