So how do we manage and implement the Web Design principles?
=> Abstract Design Patterns
Abstract site design patterns are a framework. They are particularly relevant as their abstract nature renders them broadly applicable since they are not dependent upon a particular technology. This high level abstraction is as necessary as the low level abstraction HTML and CSS separate information content from information format.
High level pattern abstraction is critically necessary for site design management as communication becomes more fluid and transparently converges into a common Internet and Web architecture (e.g. satellite, microwave, land lines, fiber optic, cable, pots).
Equally important, abstract design patterns and tenets provide the basis to classify and evaluate Web design facets allowing an organization to realize continuing improvements and profits.
Consistent with current best practices marketing tenets, these Web design patterns must be customer centered and focused on identifying and satisfying customer needs. Furthermore, I believe the increasingly automated functionality of the Web based on the Web 2.0 and RIA will facilitate the realization of the American Marketing Association’s (2008) following definition of Marketing:
“… an organizational function and a set of processes for creating, communicating, and delivering value to customers and for managing customer relationships in ways that benefit the organization and its stakeholders”.
It should be noted abstract site design patterns and their bases were developed through an empirical process.
These patterns and tenets include:
- (a) Search Engine Optimization (SEO)
- (b) home or landing page optimization
- (c) clear value statements
- (d) clear and conspicuous privacy statements
- (e) clear intuitive navigation and way-finding,
- (f) clear and informative process funnels,
- (g) a focus on accessibility that includes multiple platforms,
- (h) above the fold analysis,
- (i) inverted pyramid writing style (with active verbs)
- (i) Consistent grid based layouts throughout your site (i.e. consistent placement of navigation elements, privacy statements, etc.
From a Web Design team perspective, abstract site design patterns and tenets facilitate effective Web based communication by:
- (a) capturing the essence of problems
- (b) describing the problem in depth
- (c) providing rationale for a solution
- (d) empowering people by providing a shared language
These basic principles of site design patterns may be directly applied to emergent mobile computing as the core issues of trust, reliability, communication congruence, navigation and way-finding remain relevant independent of the platform.
Above content derived from:
Van Duyne, D. K., Landay, J. A., & Hong, J. I. (2007). The design of sites: Patterns for creating winning web sites (2nd ed.). Upper Saddle River, NJ USA: Prentice Hall
Continuing on: again please acknowledge the following steps must be performed iteratively on a continuing basis.
(1) Plan Your Site
Before turning on your computer, consider the layout, page structure and how users will move from one page to another (navigation and way-finding). Then, sketch out your site on paper and use storyboarding to develop use-case analysis. See the WDLC menu item for a more complete discussion on this.
2) Understand Your Audience
Knowing your audience will help set the tone for your content and layout, as you identify what visitors will be looking for on your site. Note this is the convergence of Marketing and IT/Web design introduced below. Note that knowing your audience includes understanding their platforms, Internet connectivity, and even their computing comfort (i.e. Technology Acceptance Model or TAM and Computer Self Efficacy or CSE).
It’s important to consider popular Web browsers, your visitor’s screen resolution size so that they see your site the way you intended; you can find this data in most site analytics tools (i.e. Web logs). Also, be very wary of multimedia as not all browser’s and platforms support all formats and the user may not have the necessary bandwidth. With respect to Web browsers you can take a heuristic approach and ensure your site is W3C compliant as the major browsers “should” be W3C compliant.
As introduced above, Marketing Management (MM) has moved into IT and in fact, its inseparable. Note that contemporary MM is based on tw0-way communications and analytics. Two-way communications is supported by Web 2.0 functionality as you must give your stakeholders a voice otherwise they are more likely to exit (Read about Voice and Exit by Hirschman 1970) and analytics are obtained from your Web logs (landing pages from the outside that illuminate your SEO and your process funnel click streams). Do not underestimate these factors.
BTW – If you’re not sure how wide to make your site, 960px is a great place to start.
3) Allow for Easy Navigation
Since people often read from left to right and top to bottom, the upper left-hand corner of your site is the first place your visitors will look. Place your navigation buttons here and keep them consistent (consistent grid-based presentation), along with font and color choices, for easy reading and fluid movement from page to page. The second statistic I provide is 80% of Web users will not go to a Web site’s second page if they do not see what they need. Of course this doesn’t apply to sites like Amazon and eBay where they know the items are there but what do Amazon and eBay users use -> search so single click navigation is built in.
There is a well known saying in application development – “If the user’s cannot find the functionality… it doesn’t exist” or in other words, it is entirely useless. Keep this in mind throughout your design.
4) Choose a Color Scheme
First, please note that color theory is an important consideration and this must be approached with the intended audience in mind. Color can evoke emotions and some cultures revere colors much more than we do. Consider that brides dress in white for weddings however the Japanese dress in white for funerals. Again know your audience but here is a nice color theory resource: http://www.qualitylogoproducts.com/lib/color-theory-for-web-design.htm
If you’re designing your site around an image, try uploading it to a color palette tool, like DeGraeve.com‘s, for complementary color suggestions. Be sure to remain consistent with your design patterns, and stick to no more than three font types and colors.
5) Photos/Images
In order to give your site a more professional appearance, all images should be clear and focused. Resolution (high vs. low) will depend on the site’s purpose and target audience (high resolution PCs vs. mobile phones, broadband access vs….). An alternative to taking your own photos is buying them from istockphoto.com at about five-dollars an image it’s an inexpensive way to visually take your website to the next level.
6) Test Your Site, Then Test Again
While you create or redesign your site, ask friends and family to test it for you. They may find things you’ve missed, or point out areas of confusion. This is Rapid Application Development (RAD) and Joint Application Development (JAD) based on use-case analysis.
7) Validate your Website
I now recommend Chrome for the best validator plugins and select ISO-8859-1
http://validator.w3.org/file-upload.html
8) In addition to Security, always think about Accessibility
First Resource: www.W3.org/wai
You should develop for all user agents (e.g. browsers, PDAs, etc.) using CSS: www.w3.org/Style/CSS
Colorblind Web Page Filter Mozilla Plug-in: www.colorfilter.wickline.org
Fangs – Mozilla plug-in that emulates screen reader: https://addons.mozilla.org/en-US/firefox/addon/fangs-screen-reader-emulator/
When designing, we are not in control of users resolution settings. Use www.AnyBrowser.com to open webpage at desired resolution to see what it looks like.
9) Optimize for Search
We must think about this throughout the planning, design, development and maintenance phases as someone in Thailand or Uganda is probably not typing your URL into their browser’s location bar. With this basis you must advertise your website through search engines noting that search engines use software to automatically crawl and index the web so we must design for Search Engine Optimization (SEO). To understand this please read how Google indexes the Web: http://www.google.com/support/webmasters/bin/topic.py?topic=8843 and Google’s new SE
While Google is the leader there are others so please be aware of search engine watch – www.searchenginewatch.com
Now for SEO tools, I use SEO for Chrome to assess a site’s SEO – https://chrome.google.com/webstore/detail/seo-for-chrome/oangcciaeihlfmhppegpdceadpfaoclj
Lastly, I recommend you use the following for a pictoral representation of links to and from your site (i.e. trackbacks) as these dramatically improve your SE ranking. Touch Graph http://www.touchgraph.com/TGGoogleBrowser.html
10) Landing Page Optimization and Process Funnels
Once you get users to your site, you must keep them engaged. This requires Landing Page Optimization and includes a clear value statement, clear first reads, conspicuous privacy statements, process funnels etc. Note that process funnels are not only for e-commerce encourage and lead to a purchase but in the instance of an informational site (e.g. government) they lead to the positive attainment of sought after information. A good Landing Page Optimization resource is located here: http://www.copyblogger.com/landing-pages/?gclid=CPzg9u6ciLMCFc2d4AodOm8AMA
11) Personalize your user’s experience
When paired with quality content, executing these tips appropriately will help retain first-time visitors and transform them into yourdomain.com regulars.
In summary, optimization of these Web processes requires: (a) recurrent integrated communication between all constituencies, (b) assessment from OB, marketing and IS perspectives, and (c) evaluation of Web and consumer use cases to identify, automate and streamline the business process approval, decision and transaction checkpoints necessary to effectively achieve accessible transparent Web based communications and e-commerce.
12) Minimize Errors
Above content derived from:
Van Duyne, D. K., Landay, J. A., & Hong, J. I. (2007). The design of sites: Patterns for creating winning web sites (2nd ed.). Upper Saddle River, NJ USA: Prentice Hall