Posts Tagged 'web development'

Designing for User Expectations: Changing Behavior on the Sly

Web designers have one audience in mind when beginning a new web project. No, I’m not talking about our clients (sorry, guys).

I mean the end user. The person who will sit on the “other side of the screen,” clicking through the information presented. It’s common sense that the end result should match up with the expectations that user has come to expect from the brand, experiences on similar websites, and experience with the web as a whole.

This does not mean that every website across the internet is expected to perform exactly the same. It is a statement, however, that every website that falls into a certain category (e-commerce, banking, forum, etc.) should function similarly to other sites within the same category. Users would not expect a banking site to behave as a forum, and vice-versa.

The best way to determine what users are expecting out of a website is to research. Research sites with a similar function, competitor sites, and the existing company’s site if the project is a relaunch.

But, what if what we WANT is to change user behavior on a website?

First and foremost, understand that there’s a delicate balance that needs to be achieved when changing user behaviors. Nothing is keeping your users from leaving the site if they become frustrated or don’t understand what actions are expected of them. With that said, it is possible to change user behavior provided there is sound reasoning, obvious visual clues and response mechanisms, and a sense of familiarity left intact.

My favorite go-to inspiration for changing user behavior while remaining sensitive to expectations is product design.

“Green” products are changing consumer behavior. Or, trying to.

There’s no denying that in this day and age, it’s hip to be green. It also goes without saying that “going green” is often associated with making personal sacrifices in daily habits and choices. What, give up my morning Starbucks in favor of making coffee at home? Suddenly, it’s a lot more appealing to leave “being hip” to the hipsters and tree-huggers.

Green-conscious product designers are rising to that challenge by designing reusable products that mimic their disposable counterparts in look and feel. The only differences lie in the materials used to make them (glass and porcelain vs. plastic and paper) and the fact that they don’t get chucked in the bin after only one use. Even better, these newer products are built for the dishwasher, unlike the hard plastic coffee mugs of yore (if you read them, most should be hand-washed for durability; but who does that?).

In other words, they’re putting the effort into the design to make switching to reusable, “greener” choices as easy for the consumer as getting a cup or bottle on the go.

Google made the submit button obsolete.

An on-screen example of a behavior shift is evident in Google’s 2010 redesign. The biggest, yet still subtle, difference the search company made was to remove the need to hit ‘Submit’ in order to show search results. Results are now live-updated as you type, actually eliminating a step previously needed to be performed by the user.

To be honest, I needed the change to be pointed out to me before I realized anything was different. This is exactly what you want in a behavior shift – for users to not even realize it’s happening. Users expect search results to arrive quickly, and the live-updating of results is a logical improvement in functionality.

Make it easy, make it obvious.

In the end, the key to changing user (or consumer) behavior is in making the difference obvious and convenient. Users are not going to change if it requires them to make the extra effort, or is noticeably different from what they are used to.

It is possible to change user behavior, while keeping them happy by meeting their expectations. It’s all about researching the audience and finding what works naturally.

Jennifer Soloway [follow me on Twitter] // Senior Art Director // Strategic Insights

Leading the Digital Charge

Over the past few weeks, the team here at Strategic Insights has been diligently putting our heads together and feverishly working on a new design for our agency’s website. After countless brainstorming sessions, sketches and wireframes, we have hit the ground running to develop a new site that’s not only visually appealing, but user-friendlier as well.

This process has made me start to look at fellow agency websites with a new perspective – not only as a fellow marketing professional, but also as a user. It made me wonder, on more than one occasion, how important is an agency’s web presence to its overall success?

It wasn’t THAT long ago that I was beginning my post-graduation job search in the Triangle, trying to find an agency that I felt represented what the public relations and marketing industries were doing; an agency that understood and embraced the upcoming digital age and was strongly practicing this “new media” (maybe it WAS that long ago…). I was surprised to see how many agencies in the area had websites that were, for lack of a better word, boring. There was nothing to lure me in, nothing to entice me to look any further, let alone apply for a job there; nothing new or exciting in their portfolios. No Twitter (did Twitter even exist then?), Facebook still only allowed college students to partake (ahhh, the good ol’ days…) and Skype wasn’t even a real word. Everything was traditional – nothing broke the mold. Compare my search four years ago to my search today, and it’s clear how much the game as changed.

These days, almost every company, whether a marketing agency or otherwise, has gone “digital” to some degree – whether it’s with a dynamic website, an online store or social media applications such as Twitter, Facebook or Skype, business owners understand the impact the Internet can have on their business. In many cases, it makes or breaks consumer interest and loyalty. And with roughly 75% of all Americans actively online in 2010, the Internet reaches audiences many companies could never dream of reaching ten years ago with traditional media – at a price they can afford, that is.

 

The need for an engaging, interactive and robust web presence is, in my opinion, even more important for those of us in the communications industry. Just because we create these digital resources, doesn’t mean that we should neglect to utilize them for our own benefit. It should mean we go above and beyond what other industries are doing. We should be trendsetters and lead the charge, showing current and potential clients what we do, how well we do it and how we can apply that to their business.

By incorporating interactive media, social media and Internet marketing into a traditional marketing portfolio, your agency becomes more attractive to clients looking for more than the status quo – you make yourself unique in a market that is filled with agencies both large and small, ready and willing to take your place.

What do you think? Do you think an agency’s web presence is a key consideration for potential clients? What are some weaknesses you see in some agency websites that you’ve perused lately (let’s play nice and not name names)? Share your thoughts!

Stay tuned over the next month as the SI team rolls out our new website! Also, keep checking our blog and Twitter accounts – we promise to keep it updated as much as we can with new project announcements, portfolio pieces, news updates and general marketing musings from the entire SI family.

Is Your Web Designer a Jack-of-all-Trades?

There is one trait that all good web designers possess, and all would-be good web designers lack. This trait is “Jack-of-all-tradesness.” To put it in better terms, it is knowing and understanding the development process that comes after the design stage of a project. Good designers know in advance what it will take to make that design happen and design for that process, instead of in spite of it.

And what they don’t know, they ask before the first sketch is made.

This is a principle that is definitely not new, but for some reason it seems to not have yet translated to all designers when they are creating for the web. Web designers today fall into one of two categories:

  1. Designers who pass their designs off to a developer
  2. Designers who develop their own designs

In print, it is rare to see a designer who will personally mix ink colors and run the press on which the designs will be produced. Designers and printers have long needed each other in order to run their businesses, and have established a working relationship – and an understanding of each other’s part in the process – that allows them to be compatible.

Not to mention, print is a medium with a variety of static variables – that is, the designer can choose the exact environment the designs are going to live in. The designs do not need to fluctuate to account for possible circumstances that are less-than the ideal environment.

Online, designers and developers are often working for the same creative team (if they are not, in fact, the same person), yet the understanding between them tends not to be as complete as the printer-designer relationship. Often, designers who are accustomed to working in print understand good static design practices and try to apply these same principles to their online designs. In these cases, we see inflexible elements trying to live in a dynamic environment where several variables are outside the designer’s control.

What it boils down to is this: designers who are also web developers understand the limitations of the medium they are producing work for. In the process of wearing both hats designers in this category also tend to think as a developer early on in the planning stage. Adaptability is key on the web, and having the skill-set to know in advance what you may need to accommodate for is crucial for success.

Jennifer Soloway [follow me on Twitter]
Art Director
Strategic Insights

Goodbye Flash, hello jQuery

As someone who works on the web on a daily basis, I know I’m supposed to affect an aloof, jaded attitude towards the eye-candy aspect of the web.  A sort of “been there, done that” vibe.  I should probably be saying “Sure, that’s a nice example of a fully interactive user-defined multimedia interface – if you like that sort of thing.”  The sad fact is, more often I’m like an ADHD kid off his medication – easily distracted by quick movements or something shiny.  I still find myself fixated on even the simple aspects of online animation – repeatedly clicking on drop-down menu navigations while chanting softly “menu goes up, menu goes down…”

Surely there can not be a more quintessential example of a cheesy animated .gif than the infamous bouncing ball.

Surely there can not be a more quintessential example of a cheesy animated .gif than the infamous bouncing ball.

But because of this fascination with online animation, over the years, I have tried to keep up-to-date with the latest technologies and techniques for creating animations for the web.  Years ago, options were limited.  Of course there were animated .gif files, but as the digital equivalent of flip-books, they were inherently restrictive and not especially interactive.  Or you could work with java applets, but those involved an unfamiliar programming language to learn, the cpu requirements were often unrealistic (for the time), the viewer needed the correct version of java on their machine, etc.  The results for java were fairly hit or miss.

For easy web animations, Macromedia Flash (later bought by Adobe) was pretty much the only game in town. Used primarily for simple animations based on motion tweens, Flash was easy to learn, didn’t require a heavy-duty processor and was widely supported even in its early days.  Flash enjoyed quite a heydey as the default for online animation and quickly and continually expanded its capabilities to become an object-oriented programming environment capable of complex animations, pulling dynamic content from external sources, video and audio playback, 3D animation, etc.  For a while, there was a trend for building out entire websites completely in Flash, full of motion and interaction and shiny bits and baubles.  Needless to say, I fell in love with it and used Flash at every opportunity for several years.

Then came the advent of three little letters which caused me to question my Flash fixation – SEO.  Google and other search engines came on strong and suddenly everyone was concerned about Search Engine Optimization – where does my site rank?  Flash is strong in many areas, but a core weakness has always been that the content inside flash apps is largely inaccessible to Search Engine Robots.  So, with few exceptions, the entire body of content on full Flash websites is basically invisible to Search Engines.

Now, there had been an alternative to Flash that had been quietly simmering in the background that suddenly seemed a lot more appealing – javascript animation (not to be confused with java applets – I never understood why the two were named so similarly when they had nothing in common).  Several competing and cooperative javascript libraries appeared on the scene, which allowed web developers to take standard SEO accessible HTML content and animate it using client-side javascript code.  Some of the early javascript libraries were MooTools, Scriptaculous, and Prototype.  I used each of these for various projects without favoring any of them.  There were some cross-browser issues, but for the most part, I was able to achieve simple animation effects with relative ease and without sacrificing SEO.

Then I happened upon jQuery and fell in love all over again.  The jquery javascript framework was lightweight and easy to code for.  It has an ungodly amount of developers providing open source examples and tutorials and more extensibility plug-ins than you can shake a stick at.  I was up and running and animating within a matter of minutes – all while maintaining SEO friendly site content.  jQuery has become my defacto javascript animation tool – I use it for accordions and tabs for better organization of page content, slideshows for product galleries, drawers for hiding and showing page elements, navigation dropdowns, etc.  And these applications just scratch the surface of its capabilities.

Now, to be fair, there are a number of things that jQuery – or any javascript library –  isn’t great at and Flash still takes the prize.  Javascript animation is generally fairly simple in nature and is more often used for User Interface elements rather than complex, image heavy animations.  There are definitely instances when one technology is a better fit than the other.  Still, there are areas of overlap that used to be dominated by flash animation and now can be handled rather easily by jQuery.  Check out the following comparisons as offered by DLL at LogicPool (http://logicpool.com/archives/30).

The Pros & Cons of using Flash vs Javascript:

Flash Pros Flash Cons
  • Extensive features
  • 3D Capabilities
  • Consistent appearance in supported browsers
  • Supports vector artwork
  • Built-in UI & other features
  • Many free and Commercial tools available
  • More font options
  • Not compatible with all browsers including iPhone, cells phones, PS3, PSP, PDA’s
  • Moderate learning curve to use
  • Cost of purchasing Flash software
  • Possible problems with users that have older versions of the Flash Player
  • Potentially large file size
  • Possible security issues with Flash Player
  • Tracking stats for Flash elements is limited
Javascript Pros Javascript Cons
  • Small size
  • Using jQuery or other libraries reduces the learning curve
  • Hundreds of free professional quality programs
  • Can add interactivity to web page elements and tags
  • Skinnable Form Components UI
  • Compatible with more browsers than Flash including iPhone, cell phones, PS3, PSP
  • Features not as extensive as Flash
  • Complex features may not perform as quickly as flash
  • 3D features are limited
  • Users can disable Javascript support
  • Source Code Not Protected

When to use Flash vs Javascript:

Application Flash Javascript
Slide Show X
Form Validation X
Dropdown Menus X
Tabbed Panels X
Popups & Tooltips X
Expandable/Collapsible Elements X
Video/Audio Player X
Complex Animation X
3D X
Complex Multimedia X

The available applications for  jQuery are growing daily and I look at it as in being in an adolescent stage of development, much as Flash was when it was primarily used for tweening animations.  Given another year or two, jQuery will certainly gain more ground and expand its capabilities.  Flash will likely always have its place, but even now there are jQuery scripts being used to control flash apps. (Has the student become the master?)

Designers, developers, end-users – what do you think?  Has Flash had it’s time in the sun? Are the growing capabilities of javascript animation the better alternative and will they eventually be advanced enough to overthrow Flash as the dominating force in online animation?  Or should we relegate javascript animation to niche User Interface elements and stick to Flash for the major eye-candy?

I’ll be eagerly awaiting your response.  In the meantime… (menu goes up, menu goes down, menu goes up…)

Chris Griffin
Assoc Creative Director
Strategic Insights

Combating SPAM Without the CAPTCHA

Website contact forms are a convenient, quick means of potential clients and existing customers to get in touch with your company. The only downside is they are also a convenient, quick means of SPAM robots to peddle their (usually) virus-infected “products” to you as well.

The latter is a headache my dear dad called me recently to gripe about. The contact form on his website was unfinished, leaving the door open for SPAM robots to waltz through, cluttering up his office’s inbox with promises of getting them ranked first on Google.

Commonly, designers and front-end developers turn to a plug-in known as CAPTCHA to dead-bolt that door and keep SPAM robots out in the cold. The plug-in (for those unfamiliar) create a required field at the end of your form where the user must input two words that are displayed in a distorted image before the form will be submitted. I’m sure we’ve all encountered these bad boys in our travels:

captcha

The downsides to this approach, however, are that both aesthetics and usability can be compromised in an effort to keep the robots at bay. An article was posted a few weeks ago, chronicling the results of one curious developer’s research into the effectiveness of these clunky, seemingly impossible to read boxes.

The results compare the same websites with and without a CAPTCHA installed on their web forms, and showed that—overall—more conversions were dropped with the use of a CAPTCHA than SPAM messages that were sent through the form without it. In other words, while the distorted letters kept some of the robots locked out, more of the websites’ actual users were also locked out. (Read the full article here >>)

I don’t know about you, but for me dropped conversions of relevant leads would mean that this method is a no-go.

Luckily, we have a method of our very own for dealing with SPAM robots. We’ve found that, while robots read through the HTML that make up your web form, they are blind to any Javascript used on the site. Using that to our advantage, we simply make key elements inside our form tags “invisible” by loading them through Javascript when the page is called up by the browser.

To the visitor, it is as seamless as if the form was written directly on the page. To the robot looking to send us SPAM, there is no means of submitting what looks like an incomplete form.

And to Dad? It’s just one less thing he needs to worry about when reading his email.

Jennifer Hoy [follow me on Twitter]
Art Director
Strategic Insights

Does Your Company Still Need to Support IE6?

pie chart breaking down the percentage of browser usage, as of June 2009

A breakdown of browser usage statistics from w3schools.com for June 2009.

Microsoft’s Internet Explorer 6. To web developers, it is an outdated browser whose support requires extra time and effort when developing a new website or service. To the IT department of large companies, it is the only browser in which the Intranet they’ve developed will render and behave properly. To the end user, it may be either the only choice they have to get online and browse websites, or the only choice they think they have.

Fact is, the browser does not mean the same to everyone. And the support of, or decision to no longer provide support, this one browser when planning your next web project or update is not as cut and dry as whether or not you personally use it.

Social Media sites across the web are a-buzz this week with users who, for the most part, are rejoicing the decision by two major online companies – Digg and YouTube – to discontinue support for IE6.

They’re not the first, and they certainly won’t be the last. Is this, as many believe, a sign that all companies will soon be dropping support of the browser? Certainly not.

As Digg illustrated in their blog, the decision to stop support for IE6 on their website was not made simply because “it is outdated” and they were tired of supporting it. Reviewing the statistics of visitors coming to their site and what functions they perform revealed that the efforts they were making to ensure users browsing with IE6 could have full functionality were disproportionate to the amount of users actually doing so.

Online project management developers 37Signals revealed similar information in their announcement to drop support last year.

According to statistics by w3chools.com, IE6 still accounts for almost 15% of the web’s internet traffic—a mere 3.8% less than IE7—as of June of this year. What if a portion of that 14.9% make up the majority of your target audience?

What it comes down to is this: IE6 is only outdated if the vast majority of your visitors are not using it to browse your website. The best and only way to determine whether or not it is say “goodbye” to IE6 support is to review your own visitors’ browsing habits first.

Though I will say this is a trend that we will only see steamroll in the years to come.

Jennifer Hoy [follow me on Twitter]
Art Director
Strategic Insights



Follow

Get every new post delivered to your Inbox.

Join 923 other followers