Friday, November 6, 2009

The Importance of Process

The culmination of a website is often the last step in a process for a team. A large project can entail numerous steps: initiating and funding a new project, documenting requirements, creating mockups or wireframes, deciding where the information/data will come from, designing the data structure, determining security and roles, determining governance around the site/application, who owns or is responsible for the content, who is the project approver, what is the ROI, and many, many more. All this process before the website or application is even built!

I hear all the time how grueling the IT process can be and I am questioned constantly on how to circumvent this process, by either breaking a project up into smaller projects, outsourcing, going open source, or some other means. All I can say is, if the project is truly a viable project that will bring value to either customers or employees, it will withstand the process and move forward.

Wikipedia describes the importance of process: “Process is a fundamental tool for carrying out community consensus, and for allowing a very large number of people to work together on a collaborative project. Process is also the mechanism by which users can trust that others are playing fair, that the rules do not suddenly change, nor are they different for some privileged editors. Poor process or no process ultimately harms the product.”

At my company, my team evolved from being a stand-alone group nearly excluded from IT processes, to moving more inline with the rest of IT. And I must say, it’s not an effort that has gone unnoticed by our customers. In fact, I think the growing pains have proven to be quite difficult in some groups where they had so much freedom in the past; it now seems the process is limiting their creative outlet. But I look at it a different way because I’ve seen the results of websites and applications that were thrown together on a whim as well as those clearly thought out with executive support. Websites that get thrown together quickly end up going through numerous hours of rework. On average, the sites I’ve worked on that were not clearly thought out by the project initiator as to their purpose, audience, and scope, were 3-4 times more costly in terms of hours spent reworking the site. Furthermore, it stands to reason that sites that get built with no foresight or strategy also lack follow-thru in that they rarely are maintained on a regular basis. Instead, they just take up space on the server and typically visitation drops off after its initial launch. Applications are worse, because lack of planning and due diligence affects not only our team, but possibly several other teams. Take my 3-4 times more hours and multiply that by seven other teams and you’ll see how much waste is involved in an unplanned project.

Process isn’t instilled to stifle creative output. It’s there to ensure only quality, top-notch creative output is presented to customers. Additionally, in the case of the web, process is there to protect you with highly available servers, proper security and firewall rules, well-defined database architecture and maintenance, and a 24x7 support staff ready to keep everything running smoothly. When you break the process, you run a risk of loosing one or all of these things and presenting poor workmanship to customers. I think people tend to take it personally when a project is scrutinized or deemed unrealistic, but realize this scrutiny empowers you to grow even better ideas, helps the company produce a higher quality product and builds long-lasting relationships with customers as they grow to trust in your workmanship.

Tuesday, October 6, 2009

Recession Driven Trends for the Web

Every year I write a report for my employer that outlines this year’s accomplishments as well as what to expect from us next year. It never ceases to amaze me how emerging trends of the web as a whole are reflected so accurately in this report. You’d expect that during a recession budgets would be reduced. This gives us an opportunity to innovate and analyze how we do business. To spend the money we do have much more wisely. It’s a chance to accelerate growth faster than our competitors. On the web, this translates into a focus on building relationships with users, targeting specific needs through various channels and then accurately measuring our progress. Doing this well, will position your company to come out of the slump looking like a star.

Communities
With increased unemployment, users are spending more time online. 67% of the global online population visit member communities (Nielson Online, March 2009). Simultaneously, for the frugal business, the more expensive “push marketing” tends to drop during a slowdown. Focus shifts to “direct marketing” and relationship-based strategies such as email marketing, lead nurturing, search marketing, and online communities. These are people who are already interested in your products and services, people you can build stronger relationships with.
Gone are the days of short-sighted, sales-driven marketing campaigns that catered to the impulsive buying of an affluent economy. The focus has turned to building your brand using long-term platforms that effortlessly delivers fresh, useful content, adding value and convenience for your customers on a daily basis. Companies are building or rebuilding personal relationships with their customers through one-on-one coversations and creating a sense of community through their web interactions.

Some examples of business communities:
  • Starbucks includes local events on their site along with a convenient application for mobile devices to easily find locations. Additionally, they have a dedicated portal for consumer idea submissions.
  • Intel hosts a community site for engineers to collaborate and learn from.
  • Bank of America started a small business online community for ideas, information, and collaboration among peers.
  • Nike’s runner community offers a place where runners can find motivation, get inspired and keep track of their personal stats.
All these initiatives enhance user experience on a daily basis. They make it easy to interact regularly with customers asking little or nothing from them in return. Ultimately these tools enable relationship to become established with consumers for less money than the cost of repetitive ad campaigns.

Social Media
10% of all Internet time is spent on social media sites. According to Neilsen Online, social networks and blogs became the fourth most popular online activity beating out personal email. Social media marketing has spread like wildfire because, simply put, it’s free. Consequently, businesses increasingly integrate social networking websites into their marketing strategy. Facebook, Twitter, and LinkedIn are ideal tools for generating sales leads, engaging prospects, and announcing new products, as well as sharing news, research and ideas.
Reusable content
There are so many avenues for users to reach your content spanning numerous sites and technologies. The emerging trend is to organize the content in such a way as to deliver a consistent message no matter where it is consumed or how it is skinned. Marketers are moving away from building expensive microsites and instead are focusing on tactical placement of pertinent content in places that meet individual user’s specific needs. Digital content is now designed to be syndicated so it can be entered in one place by a content owner and then reused across primary websites, partner sites, widgets, applications, social presences, blogs and mobile devices. A person can enjoy your content through their chosen method without ever visiting your primary branded website.

Analytics
The recession is forcing stakeholders to become more accountable spawning a high demand for measurements, analysis and optimization. In fact, the Online Measurement and Strategy Report 2009 (conducted by Econsultancy in combination with Lynchpin) reported the proportion of firms looking at social media metrics alone has doubled during the course of this year from 21% to 40%.

Demonstrating ROI through websites is not always easy to do. Follow these tips to help:
  • Build a monetization model by linking web activities to money.
  • Base your model on facts you already know.
  • Start simple and then elaborate as much as you can.
  • Most importantly, your model should be consistent and realistic.

Sources:

Monday, August 31, 2009

Code As Art

I read an article today that stated art can be applied to any field including scripting. I guess I knew this and obviously web design is steeped in art. That’s always been the artistic outlet of my job and although I take great care in placement of my code to make sure it is readable, efficient, and neat I never thought of it as art. That article went on to say how art in scripting is taking code that already exists and enhancing it with your own spin to make something new. But I think there’s more to it than that. That’s more innovation than art. I’d like to take a moment and look at the code itself as art, not just what the code displays as.

Wikipedia defines art as “the process or product of deliberately arranging elements in a way that appeals to the senses or emotions.” Wow, that is exactly what I do when I code, not just when I am creating visual layouts of a web page. I am deliberate in my tabs and spaces, the amount of space I consume on any given line. I place pieces of code on any given line not only for logical order, but for how it will be read. It’s like designing usability for developers in addition to designing usability for end-users. To call it two-dimensional gives the impression its flat, without depth. But certainly it is multi-dimensional in that it presents a new level of consciousness and reality that goes beyond the surface of how it will write out on a page.

So for fun, let’s translate code into a stereotypical piece of art. Here is a screenshot of some code I wrote and also of how it is displayed to the end-user. Both are functional - neat and tidy, easy to read.




Now I’m going to compartmenatlize my code into four basic components: 1. Commented code (tips or notes I wrote for other developers who may modify the code after me), 2. Conditional statements (the dynamic quality of the page), 3. Code that writes out and is displayed to end-users, and 4. Behind the scenes code that allows the correct data to show at the right time. Now if I take those componenents and abstract them into blocks of color I get the following pattern:



Now, let’s go one step further and turn this abstraction into art. I took the pattern above and in PhotoShop I applied a Motion Blur at an angle of -4 distance 274 pixels. Voila! A beautiful code masterpiece.



Now, if I put it on a black background, it gets really dramatic and coincidentally looks very similar to the piece “Sideways” by Michael Getlin I found on Abstractionista.com.



So code is art, even as tranisient as it is. I think that's a beautiful thing. It's like you're living in the artistic moment every moment. It truly is Art for Art's sake.

Friday, July 24, 2009

Multi-Lingual Encoding

I have built many websites in many different spoken languages. But one site in particular has taught me a few valuable lessons when it comes to building a website with special encoding. That site was a Japanese website.

This site was built in classic ASP and includes are a common component in this code. An include is it's own page and used mainly for items that can be reused throughout the site, such as the header, navigation, or even functions. That page is then included on each page you use it on. It's extremely valuable and efficient for large sites.

Well in the past, I used to build all the
<head>
components into the include file. A typical include would contain the title tags and all meta tags as well as any encoding for language. The Japan site has taught me not to put the encoding in the include. I frequently get content that's written in Japan and when that content transfers to the US, it is all jumbled without the encoding. It is more valuable to have that encoding on each and every page so you get the characters to show correctly to the developer. Having it on the include ensures users can always see the site correctly in their browsers, so it's never a problem to users. But to developers it's a nightmare and if you add the encoding to the page after it's jumbled, the encoding makes sure it stays jumbed, even to the end user at this point. So you can't add it afterwards without messing everything up and therefore you are stuck working on a jumbled page forever.

The lesson learned is to break out the encoding on every page when you are designing a site. In Japan's case that code is
<meta equiv="Content-Type" content="text/html; charset=shift_jis">


As a side note, I now also put all the elements in the
<head>
on each indivivual page for better SEO. For SEO, it's helpful to have unique title tags, and meta tags for every page. You can still do this on an include by using variables, but I think you can achieve more meaningful meta data/descriptions by placing these tags on each page thereby making your search engine display more helpful to users and more accurately pinpointing their needs.

So leave the includes for navigation and functions and let the
<head>
have it's own space at the top of every page.

Wednesday, July 15, 2009

Table-Less Design

So this was the question of the week: What is table-less design and how do I do it?

Traditionally, web pages were designed using table tags in order to achieve the exact layout desired. It was easy to use and easy to control your look and feel, although quite difficult to navigate when using numerous nested tables. Another drawback is the need to touch every page of your website in order to do a redesign.

Those days are over. The new trend in web design is table-free using only CSS style sheets to control your layout. Personally, I prefer this method. I like keeping design separate for code. Some of the benefits are:
  • the code is easier to read
  • a major redesign no longer requires touching every page of the website
Additionally, if you use standard web tags such as h2, li, fieldset, etc. you not only are using tags that are easy to remember when coding, but you are also improving your SEO. In the case of a team working on a website, using these standard tags also helps maintain consistency despite numerous coders with unique habits. Classes are great, but if you can use a standard tag instead, go for it and you'll save yourself a lot of headaches in the long run and shorten the length of your CSS code as well.
I now mainly use table-less design. My goal has always been to make websites highly accessible and frankly, tables guarantee no matter what browser is used, the site looks exactly the same. Going table-free has a risk in that not all styles are translated the same across browsers. However, you can use extra styles to accommodate this. The key here is TEST, TEST, TEST. I hope to do more website table-free so that frequent and easy redesigns can be easily achieved saving time and money as well as opening up creative possibilities with no limitations.

Thursday, May 28, 2009

My Life In Web Design

So I’ve done some thinking and decided that I need to take a turn in my blog. You see, I write a blog for web design at my job also, and I thought I could just repurpose the content here too. Well, I’m beginning to think that not all the things I write about at work will be pertinent here. For work, I do a lot of research so that executives can better make decisions around the web space. Therefore, I have to find information that is reliable and from a trustworthy source, so I cite where I get all my information. Apparently, on this blog though, linking to too many outside sites triggers the spam flag. Geesh! So I’ve decided to turn this blog into a more “personal experience” in web design diary.

My background is a very corporate one. So my design and theories are more conservative and focus on end-user experience and professionalism. I think there are a lot of great designers out there, with seemingly limitless creativity. I’ve been designing for the corporate world for eight years now, so over time I have become less of a risk taker with a utilitarian approach to the web. I hope to offer a perspective into this corporate aspect. I think it’s a quieter and somewhat darker side of the web. The reality side where marketing dictates the amount of ethnicity that can be portrayed in photos, or trying to come up with a good way to place the same exact button to the same exact place in four different places on your home page because a VP wants it that way, or trying to find the exact shade of red another VP wants who changes his mind about it every other day. This is the extent of my adventures. This is my life in web design.

Tuesday, May 26, 2009

The Home Page

The Home page of a web site is the most important page. Obviously it is the very first impression a user gets about your company as well as your site. Its look will determine your company’s level of professionalism and its organization will determine the usefulness of your site. There are three key items to consider when building your site’s home page:
  • Provide easy access to the home page
  • Treat your home page as a “buffet” of your site
  • Quality is key
Provide Easy Access to the Home Page
Many users return to the home page of a site over and over. It’s the one place a user knows they can start from if they get lost in your site or if they need to begin an entirely new task on your site. Therefore, it is important to enable users the ability to navigate back to the home page from any page on your site. Many organizations link the company logo to the home page and while most users are familiar with this solution, it is ultimately best to have a link labeled ‘Home’ back to the home page.

Treat Your Home Page as a “buffet” of your site
At a buffet, all your food options are available for your choosing. The same should go for your home page. All your major choices of content should be presented here in a neat and organized fashion so as not to force a user to dive deeper and deeper to discover the full breadth of your sites content. Be selective about what you put on the home page, but make sure to present all the most important options available to a user which are relevant to the goals you’ve outlined for the site.

Quality is Key
If the buffet bar you attend serves up old food on dirty plates and you can’t even tell what it is, you probably won’t eat there. Yuck! The only message that conveys is that you are most assuredly going to get sick. Your home page is the same. A study found that when judging the quality of a web site, half the time users used only the home page as the measuring stick of quality. If you present a quality home page with a clean look and well- organized content that readily conveys what you have to offer, your users will expect that you are serving them quality content from a reliable source and are more likely to return.

Wednesday, May 20, 2009

Optimize the User Experience

We have only moments to grasp the attention of visitors to our site. What we do with those precious moments may determine how that user feels about us for years to come. It’s the old “first impressions last a lifetime” cliché put to use. At the bare minimum of your site design, should be the desire to optimize the user experience. Time is valuable, probably the most precious commodity we have and we should treat it as such. Aside from the obvious importance of delivering engaging, useful content, it should be delivered as quickly and effieciently as possible.

There are a number of tried-and-true considerations outlined by numerous usablity resources. I’m going to focus on three in this article:

  1. Skip the annoying pop-ups
  2. Give your site creditibility
  3. Consistency is golden

Skip the annoying pop-ups
Pop-ups were novel in the beginning, but quickly grew as the top most annoying features of Web sites. Nothing is worse than reading an article on a page and getting interrupted by, “Learn how to increase your income now.” No thanks! It’s completely disrupting to the user’s focus. I don’t think this feature is helpful even on sites that are well intentioned. I recently visited dell.com and was immediately faced with a screen that grayed out and a box that asked if I wanted to chat to a live person. This box completely hindered my intentions of reading the page. If that’s what I wanted to do, I would have clicked on your link or even called. I mean, give me a chance to even look around first. I go to the Web to do research to make informed choices at my own pace and in my own way, don’t try to force something out of me I don’t want or I’ll go somewhere else. Not only do they annoy, but in my opinion, they seriously diminish a Web site’s credibility. They give a cheesy, sleezy impression. Like a pushy used-car salesman approach whose only interest is to sell you not to inform you.

Give your site creditibility
If you want to keep your users coming back for more, nothing is more affective than giving them timely, reliable information they can trust. Stanford has put together a top-ten list of creditibilty guidelines compiled over three years and based on 4,500 users input.

  • Make it easy to verify the accuracy of the information on your site.
  • Show that there's a real organization behind your site.
  • Highlight the expertise in your organization and in the content and services you provide.
  • Show that honest and trustworthy people stand behind your site.
  • Make it easy to contact you.
  • Design your site so it looks professional (or is appropriate for your purpose).
  • Make your site easy to use -- and useful.
  • Update your site's content often (at least show it's been reviewed recently).
  • Use restraint with any promotional content (e.g., ads, offers).
  • Avoid errors of all types, no matter how small they seem.

Additionally, government usability research states “the most important Web site-related actions that organizations can do to help ensure high Web site credibility are to:

  • Provide a useful set of frequently asked questions (FAQ) and answers;
  • Ensure the Web site is arranged in a logical way;
  • Provide articles containing citations and references;
  • Show author’s credentials;
  • Ensure the site looks professionally designed;
  • Provide an archive of past content (where appropriate);
  • Ensure the site is as up-to-date as possible;
  • Provide links to outside sources and materials; and
  • Ensure the site is frequently linked to by other credible sites.”*

Consistency is Golden
A site is easily learned when the actions required by a user are consistent throughout the site. For instance, it is vital to place the navigation in the same place throughout the site so a user can easily navigate from place to place. Also, it is particularly helpful to follow standard practices that users have become accustomed to such as top and left navigation panes. Shopping cart processes also have a flow that users are familiar with. Straying from the norm will only frustrate users and drive their business away.

Further, large sites typically offer different applications with unique functionalities. Valuable time is wasted if the user is forced to re-learn every application he chooses to learn. The more applications a user is forced to re-learn, the less a user desires to venture into new applications. However, if the applications have a consistent interface, a user can easily adapt between them, making for a seemingly transparent transistion as far as the user is concerned. This familiarity results in more willingness to examine additional offerings.

Conclusion
Web sites should faciliate user interactions by encouraging efficiency, credibility, and consistency in order to reach top-notch content. Keeping these key optimization techniques in the forefront of any site plan is a great start to successful Web design.

Sources:
*http://www.usability.gov/pdfs/chapter2.pdf http://credibility.stanford.edu/guidelines/index.html

Design Process and Evaluation

The priority of a Web site is to inform your users and convince them to user your services and keep them coming back for more. At a high level, there are some key items to consider before even starting the design of a website.
  1. Provide engaging and relevant content to an appropriate audience.
  2. Understand your users’ requirements.
  3. Ensure your content is organized according to your users’ expectations.
  4. Guarantee completeness and accuracy of user requirements by involving the user.
  5. Set goals of the Web site before beginning the design process.
Provide content that is engaging, relevant, and appropriate to the audience
Content is the information provided on a Web site. Studies have found that content is the most critical element of a Web site and that content is more important than navigation, visual design, functionality, and interactivity. Afterall, that is why a user is visiting your site, not to look at pretty pictures, but to learn about your company, what you do, and how you can help them succeed. Do not waste resources driving users to content that does not meet their needs. Do so can annoy the user and drive them away from your site entirely.

Understand your users’ requirements
The more we communicate with our end users, the more we can understand their needs and the needs of potential users thereby increasing the probablility of a successful Web site. Communication can be carried out through customer support lines (Help Desk), surveys, and interviews as well as through, sales people, focus/user groups, and tradeshows. There is no shortage of opinion when it comes to Web design and successful Web sites utilize information gathered from a minumum of four different sources. The information gathered can then be used to build “use cases” for the company providing a valuable reference to users changing needs over time which may extend beyond just web-related needs and into product desires.

Ensure your content is organized according to your users’ expectations
Usability is defined as the users’ perception of how consistent, efficient, productive, organized, easy to use, intuitive, and straightforward it is to accomplish tasks within a system. It is important to fully develop an understanding of user expectation through analysis and research. Users often react to sites based on their past experiences and studies have shown users act on their own expectations even when on-screen directions counter them.

Familiar formats and navigation layout makes it easier for a user to learn your site. Generally, visitors don’t often return to your site unless the content is frequently updated and sought after for regular consumption. So the reoccurance of users visiting your site is limited in number, a familiar design scheme allows for first-time users to learn your site efficiently.

Guarantee completeness and accuracy of user requirements by involving the user
A basic principle of effective web design is to keep the design focused on your user’s needs. User studies have become a widely accepted method in the development of usable sites and is the most valuable resource when trying to improve completeness and accuracy of site requirements. Not only can it help in development of new features, but it can help to eliminate unused features.
User involvement may help to determine the content and tools offered on a web site, but generally has been shown to be an ineffective resource in actual design decisions. Therefore, users tests are helpful in determining what to put on your site, but not how to display it.

Set goals of the Web site before beginning the design process
Setting the primary goals of your Web site is vital before starting design work. Whether it is to educate, inform, entertain, sell, etc. will affectively dictate your design. A good set of goals will determine the audience, content, and function, as well as the site’s unique look and feel. It is a also good idea to communicate the goals to, and develop consensus for the site goals from, management as well as those working on the Web site.

Sources:
http://www.usability.gov
http://www.w3.org/TR/WCAG20/ http://www.mckillen.net/Usability_Testing_Quick_Reference/Step16/Extra%20reading/Usability%20standards%20for%20website%20development.doc

Tuesday, May 19, 2009

Engage Your Customer through the Newest Trends in Marketing and Web Development

There are a number of trends growing in marketing and web development. The overall theme of which is: Tell a Story.

The key is not just to tell the story, however. It is to involve the user in your story – make them feel they play an active role in the story’s development as though they are driving your content and helping it to evolve.There are numerous ways of accomplishing this user involvment that companies have had great success with.


CEO Blogs
A number of CEOs are starting to blog. People instinctively trust successful corporate leaders and value their guidance on business advice. CEOs are viewed as authoritative. Additionally, customers visiting the blog feel a personal experience through which brand loyalty is spawned.

Check out http://corporateleadersblogs.com for a listing of popular blogs by CEOs.

Twitter
Twitter is becoming a more effective and free way for marketers to reach customers. With Twitter, users sign up to “listen” to the people they want to follow. If the Tweets are interesting and informative they will have more consumers thereby reaching a larger audience that is targeted to your industry. Effective use of Twitter for B2Bs will drive thought leadership and push technology through an extensive knowledge in order to build your brand. B2Cs have success with giveaways to those that respond.

Skittles (http://www.skittles.com) has taken a huge leap of faith in creating their website through social media. Their home pages consits of feed consumption of anything with their name in it from Twitter, Facebook, and MySpace. They have had to apply filters however, in order to limit negative content.

Widgets
Affective widgets are those that can be reused by consumers. The content is ever-changing and fresh providing content that users want direct access to and want to tell others about. A radio widget might have various songs or podcasts deployed daily. A user can then post your widget on their website, blog, Facebook, etc in order to spread the word.

3D
3D technology is reaching the web and beyond. Papervision 3D and Away 3D are two products facilitating this trend and 3D navigation is a captivating way to engage users to explore your site.Think of the iPod experience of scrolling through albums and you’ll get the idea.

Websites are using 3D to allow interaction with their product for a simulated hands-on experience with product. Other effective uses include 3D games and augmented reality. Some 3D experiences are also infiltrating tradeshows through 3D Immersion and multi-touch interactive displays where the future of digital interaction lies.

Mobile Technologies
Mobile technology is a fast growing trend. The iPhone is the fastest growing mobile device available and are expected to grow 164%* by 2010. 67% of mobile internet traffic is coming from iPhones and 75% of mobile users watch online videos through their device. Multi-player online gaming is also becoming increasingly popular through mobile technology. Also imagine mobile meetings in the future.

Furthermore, other mobile media is steadily growing such as PDAs, music players, and home gaming systems able to connect to the internet. A projected 190 million households by 2012 will connect to a website through these systems displaying and interacting with content through their TV monitors effectively turning passive TV watching into an interactive experience.

Desktop Marketing
Desktop marketing leverages exsisting web technologies for more engaging interactivity – bringing the web to the desktop and delivering the latest information at any given moment. Internal use may include marketing communications and sales so that no matter the location of a user, they are up-to-date with the latest information.

Integrated Campaigns
The final piece is integrating all these interactive technologies as well as conventional marketing techniques together to tell your story. Starting with flyers, posters, magazine and newspaper ads and then moving your story online through social media, widgets, and interactive media accessible anywhere, anytime. An effective campaign has a viral affect; growing by new storytellers unravelling the story and bringing more people to hear it unfold.

*http://blogs.zdnet.com/Greenfield/?p=230