How would you like to create a quick and easy Web form? Well look no further. CoffeeCup’s Web Form builder makes creating web forms about as easy as it can be.
Check out this example made using Web Form Builder 8.2 from CoffeCup. Just click on the image to view the form.
This form allows the user to input their name, email address, upload documents and submit the information. All of this information is sent to me via email (feel free to send your letter, I promise that I won’t litter the ocean).
So the question that may be on your mind now is what does Web form builders have to do with HTML5, CSS3 and why should I care right? I knew it.
HTML5 and CSS3 which are very fell supported in many of the major browsers offer many new features via the new HTML5 markup and APIs. Many of the commonly used elements like creating navigation elements would change from something that looked like this:
<ul id="navigation">
<li id="youarehere"><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
to this in HTML5 using the navigation element.
<nav>
<a href="default.asp">Home</a>
<a href="tag_meter.asp">Previous</a>
<a href="tag_noscript.asp">Next</a>
</nav>
HTML5 brings a lot of functionality back to the browser and includes new elements
for better structure, drawing, media content, and better form handling.
Just like HTML5 extends HTML4, CSS3 extends CSS giving designers more capabilities in the browser.
One of the pioneers of the web J Cornelius from CoffeCup Software came to give a talk to University of Georgia Masters of Internet Technology students at the Lawrenceville campus last week. The topic of discussion was HTML5 and web forms about which Mr. Cornelius knows a lot. CoffeCup Software began in 1996 and was among the first HTML editors on the web. The CoffeCup HTML editor was created in just a few weeks because the founders Nicholas Longo and Kevin Jurica wanted to build a website for their coffee shop. The decided to put their HTML editor on the web for people to use and according to J, began receiving email from people wanting to know where to send their money. As the story goes, they began taking credit card payments and putting the receipts in the register and not paying too much attention to them. When they finally decided to tally up the receipts they had made over $20,000 in a matter of weeks from the sale of the software and CoffeCup was born. I guess that is must be hard to continue to sell coffee at that point. From CoffeCup (the 1996 version) which is credited as being the first HTML editor to support JavaScript to CoffeCup’s 2010 release, they still offer the split window allowing designers to edit the raw HTML and WYSYWYG editing.
Web Usability is about creating easy to use, useful websites that allow users to successfully accomplish their goals and enjoy doing so. If done right, web usability will be a top priority from the minute a new web site starts the design process. This is called user centered design. There are a variety of usability testing methods and I will discuss a few here today. Some usability tests involve people (I call these old school) and some involve web analytic (new school). The less technical approaches like heuristic evaluations, prototype testing, card sorting activities and usability testing can be the most affordable and provide very valuable information. Heuristic evaluation is about testing a website against established usability standards. For this type of testing think best practices. Prototype testing can be conducted before the website is completed. This kind of testing can be conducted with individuals or groups using wireframes, print outs of designs or even simple drawings of the potential site. Card sorting helps web designers figure out naming conventions and functionality of navigation. This is the process of using index cards to group and categorized the information that will be contained in the site and how the information will be accessed. These kinds of tests should ultimately conclude with a formal usability test which will include pre-session activities, session activities and post session activities. During the pre-session, web designers will identify stakeholders and develop a list of tasks or goals for the session. The session will have the participants attempt to complete the tasks and think “out loud” allowing their process to be observed and recorded. The finding from this kind of testing is invaluable to developers. After the test, transcribe the notes, create a list of issues and write a report summarizing the testing. All of the old school approaches involve people in a room actively performing tasks. The new school approach to usability testing is more passive and involves analytic tools that attempt to track users success rates as they navigate through a site. Companies like Crazy Egg offer paid analytic services that will evaluate your customers habits by creating heat maps. Heat maps are designed to show you who is clicking where on your site. Clicktale offers what they call behavioral analytics; they capture every mouse move, every click and every keystroke that happens during a user session. Other types of analytic or automated approaches may involve voluntary online surveys or opt in usability tests from companies like Five Second Test and Opinion lab (real time on-site feedback). Many of the automated tools are paid/subscription services but the data that can be obtained from them may be worth the price tag. Many of the pricing models were based on visits so early usability testing may affordable.
On his podcast called SpoolCast, Brian Sparks interviewed Luke Wroblewski former chief design architect at Yahoo, author of the book “Web Form Design and Sightseeing: A Visual Approach to Web Visibility” and one of the foremost authorities on web forms today. They had a great discussion about the future of forms on the web and a very interesting discussion about Google “instant” search. If you are not familiar with what Google instant search is, Google has changed the way that search results are returned from their servers from the old way of typing in a query, possibly choosing from some suggested options and hitting enter to immediately beginning to display results while the user is typing. According to Luke, Yahoo experimented with his exact technology way back in 2005 and had it working to a degree. The main reason that Yahoo did not take their “Live Search” product to market was because of the increased server load time. Each user search increases from one data base query to as many as ten db queries per search! Luke points out that obviously Google has figured out how to effectively handle the load. Back in 2005 according to Luke, there was a tremendous wow factor when the executives in Yahoo experimented with the Live Search prototype. Many of the executives equated the instantaneous results to “magic.” Even in 2010, when Google instant first launched there was a wow factor for me and many others on the web. To watch the results change with every keystroke in my opinion is pretty cool; especially when you consider the quantity of pages that are being sifted through by the algorithm. Google also believes that instant will shave 2-5 seconds off of each search and more effectively narrow or target the searches. Google instant is one example of how forms are becoming more “real time” on the web. This change in the way that results are returned can also be seen on Apple.com, Linked in & Facebook. So the point was made that today it is a wow factor but as we continue to use these kinds of features in our daily lives, they become the norm; they become the expectation not the exception. So what happens to sites that do not have this feature? What is the user experience on sites that cannot keep up with these kind of technological advances? I think the answer is obvious, the user experience is not up to par with what we expect from the web therefore these sites begin to disappoint users and loose traffic.
In a recent episode of my favorite NPR podcast This American Life, they did a show called Crybabies. Act three of the show titled “The Squeaky Wheelchair Gets the Grease” discussed a sort of industry that has formed in California as a result of the Americans with Disabilities act. Federal law requires that all public places meet minimum levels of accessibility or the business owners can be sued by anyone that complains for a sum of $4,000. Accessibility for these businesses involve things like wheelchair ramps, mirror height in the bathrooms, access to parking, and the like. Now the code for these business owners is not as obvious as you would think. Sometimes the business owners are aware that their business is not very accessible to handicapped individuals but more often they only find out after someone complains or they get sued. Parking lots and bathroom stalls have been around for a lot longer than the web but it raises an interesting point. Will there ever be a reasonable expectation for websites to follow certain guidelines for accessibility similar to what has evolved with brick and mortar stores? I am an avid user of the internet, and I can honestly say that until we discussed web accessibility in my graduate course last week I had not considered it. According to a census brief published in 1997, 1/5 of Americans have a disability. Today a significant amount of disabled people live in rural areas and access to broadband internet seem to be the first battlefront. In 2008 the thought was that at least 75% of disabled Americans would have access to broadband internet by 2010. Given all of that, “knowledge is responsibility” as the saying goes. There are two ways that you can look at this issue: There is tremendous opportunity in creating an accessible website or I will wait until someone complains about my website before I make any changes (there may be other ways but let’s just pretend that there are two for now). So what exactly are we talking about here? What kinds of accommodations do handicapped individuals need in order to use your website and potentially become a life long customer of yours? Well, the funny thing about web accessibility is that it is not nearly as difficult or expensive as building a wheelchair ramp or re-striping your parking lot. The hardest thing may be remembering the Accessibility Guidelines as laid out by the W3C. There are fourteen guidelines that the W3C recommend for websites.They ask designers to consider providing equivalent alternatives to auditory and visual content like text so that screen readers can access content. They ask that designers avoid table layouts because they are especially hard on screen readers. Instead of waiting for complaints and fines to bring about change on the web, I would encourage web developers to integrate the accessibility into their designs. Who knows, when there are thousands of websites out there selling widgets, I wouldn’t mind being the one that caters to people with disabilities. With over 11 million people disabled people in this country alone, can you afford not to?
Websites are meant to serve as visual communication tools. That is what visual web design is all about, effective communication. When it comes to web design, communication is guaranteed to happen; effective communication…..not so much. Anything that your eyes can make since of communicates visually. The idea is to combine visual elements, to organize them in such a way that they speak visually. There are many components to the “vocabulary” of the web that we have become accustomed to and maybe don’t really realize it. Things like links, buttons, hover over’s, etc. are the consonants and vowels of web communications. Symbols and navigation become obvious when you are fluent in the visual language of the web. Just this week, my boss who is 20 or so years older than I am was complaining because she couldn’t figure out how to log into her Pandora account on her iPad and have access to the playlists that she had created on her computer. I don’t have an iPad (yet) but I easily found the settings icon at the bottom of the screen (you know the one, it looks like a small gear) and helped her put in her information. Her 16 year old son had already been using the iPad with his personal log in and password. That tiny gear symbol is just one example of the vocabulary of the web. Some other visual design considerations are presentation to your audience, how your audience will interact with your design and how you will organize your site for ease of use. The design goal should be to educate and engage users and effectively convey your message in a clear and organized manner. Steve Krug in his book “Don’t Make Me Think: A Common Sense Approach to Web Usability” was quoted saying about how users use the web:
“Look around feverishly for anything that is interesting or vaguely resembles
what you are looking for, and is clickable.”
There are some well-known visual principles that web designers can employ in order to give readers what they are looking for. First is an understanding of perception. Our brains try to group information in one of four ways: proximity to other objects, using similarities in size and shape, continuance which is identifying patterns and closure which uses the space between elements to group them. In addition to understanding how the brain forming these types of relationships to make sense of visual information, visual designers should also be aware of the use of hierarchy to visually convey their message. Finally there is quite possibly the most important design element which is the look and feel or the personality of the design. This is where you consider colors (images and text), consistency of pages, contrast, style, use of white space, simplicity, etc. There are some interesting trends in the look and feel design categories that coincide with culture. Everything has rounded corners, sitting on a wet table with 3D glass buttons, very large type and a gigantic footer; all very web 2.0. Copy has become cleverer and less formal in order to be quickly absorbed. You don’t see to many websites that are all text that automatically start playing an annoying song the minute that you visit the site. In the end, visual web design is about communication. Since you can’t look over the shoulder of your users to see if they are happy with your design I guess you need to make it easy for them to leave comments & check your bounce rates from Google.
Web Standards Form
By 1860, the railroad companies were using seven different types of tracks or different gauges of track throughout America. The north did it one way and the south another. This lack of standards prevented the interconnections of the railroads and severely limited the potential of the network of trains that was possible. Over two days in 1886 the south converted over 11,000 miles of track to the then standard 4’81/2 gauge to match the tracks in the north whereby creating a network that could reach the entire country. This is one of the many famous standards battles that have been fought throughout history. Standards are important because they increase inter-connectivity and reduce extra work. A similar battle was fought in the 80′s over web standards. The lack of standards caused developers to have to write a different set of code for each browser. At least the railroads were able to fix their problem in 2 days. Imagine how frequently you would have to change your website’s code today with the quantity of updates and changes from just one of the popular browsers. Designing websites using the web standards can mean different things depending on who you ask. Some believe that it means designing without using tables while others believe that it is using valid code. According to Russ Weakley of maxdesign “a site built to web standards should ideally be lean, clean, CSS-based, accessible, usable and search engine friendly.” He has also compiled a great checklist that web designers can follow to ensure that they are designing using current web standards; complete with a host of tools that can be used for verification.
Website Mock up
The role of information architect is an emerging role in the world of web design. Information architects are asked to organize and label the information on the Web in such a way that it is intuitive and usable. Information architecture is defined by the Information Architecture Institute in three parts: the structural design of shared information environments; the art and science of organizing and labeling websites, intranets, online communities and software to support usability and findability; an emerging community of practice focused on bringing principles of design and architecture to the digital landscape. Simply put, information architects analyze, organize and label the information on websites so that regular people can easily find what they are looking for.
Information architects have several key deliverables during the website planning process. The deliverables include developing documentation for the following: Primary audience goals, personas, current content inventory, competitive analysis, content strategy statement, content outline, content gap analysis, site diagram, page description diagrams and wireframes.
Blogger Andrew Maier uses the image of a city planner to describe the role of the information architect. Information Architect’s must work with multiple departments and disciplines in order to create a unified vision for the completed website. According to Maier, if the IA moves away from this high level view of the functionality and flow of the website, they begin to move out of their discipline and into the more specialized roles like web designer, user experience designer, front end developer, etc. Maier also references many of the tools used by Information architects to produce their deliverables.
IA’s use tools like Visio and Omnigraffle to product wireframes, task flow diagrams, process charts and site mock ups. These visual tools enable the IA to share his thoughts on how the site should be architected. Other simpler tools like mind mapping tools or tables built in word or excel can be used for personas charts and content inventories.
In researching the subject I also found a great round up on a site called noupe.com that provides links to several websites and blogs that discuss the topic of information architecture and the budding profession. On thing that really stood out about these websites was that they were all very usable and demonstrated immaculate up front planning. I cant imagine what could be worse than a barely usable site discussing information architecture?
Writing for the web
Writing content for the web has challenges that are unique to the medium and combine many different skill sets. Writing web content requires an understanding of web design as well as writing skills. Web writers are required to wear many hats during the content creation process. They must be equal parts editor, journalist, creative writer, technical writer, marketing, advertising & sales, public relations, project manager, responsible for user experience and information scientist. Successful web writers will combine all of these skills into a website that gives online readers the information that facilitates the task or goal that they went to the website to complete. The task orientation of online readers requires web content to be presented in a way that can be easily scanned and acted upon. Good web writing is useful, usable, engaging and findable. The book “Interact With Web Standards” recommends the following 10 web writing tips: Write using the inverted pyramid by starting with your conclusion then providing support. Believe that less actually is more. Avoid sounding like an infomercial. Make your copy easy to scan. Write killer headings. Lead with active words or verbs whenever possible. Use simple sentences. Keep your promises by accurately labeling links & page titles. Set up a review process to get a second opinion and finally steal from good websites (sort of) by using what you see on the web that works.
Information Technology Infrastructure Library (ITIL) is recognized as the de facto standard for IT Service Management. This set of best practices originated from an 8 volume collection of books written by UK Government’s Central Computer and Telecommunications Agency (CCTA) in the 1980s. ITIL reflects a process-model based view of controlling and managing IT functions. The approach is credited to W. Edwards Deming and his plan-do-check-act (PDCA) cycle In 2009, the ITIL library consisted of the following 9 volumes:Service Support, Service Delivery, ICT Infrastructure Management, Security Management, The Business Perspective, Application Management, Software Asset Management, Planning to Implement Service Management & ITIL Small-Scale Implementation (which was added to the original 8 volumes.)Three Key Objectives of ITIL are to align IT services to meet the needs of business and customers, Improve quality of IT services delivered and reduce the long-term cost of service.
ITIL Service Management can be viewed as two distinct management sets Service Deliery and Service Support. 
Service Delivery deals concentrates on the proactive services the ICT (Information and Communication Technology) must deliver to provide adequate support to business users. This discipline treats the business as the customer of the ICT services.
The Service Support discipline focuses on the User of the ICT services and is primarily concerned with ensuring that they have access to the appropriate services to support the business functions. The process model for service support begins with customers and users requiring things what users need everyday. Examples would be asking for changes, updates, having difficulties, and the like. Service Desk act as the central point of contact between the User and IT Services Management. The Service Desk or Help Desk handle Incidents and Requests, and provide an interface for other activities such as Change, Release, Service Level, and IT Services Continuity Management ITIL. The Service Desk function can have various names, such as, Call Center, Help Desk and Service Desk. Service Desk can be local on site support, centralized in one location or virtual.
Propoint solutions is an example of a consulting and training company that specializes in IT Service Management. They offer seasoned, experienced, Certified ITIL Experts and consultants and believe that people, process and technology must all come together to achieve your IT business objectives. Propoint says that ITIL is an excellent resource for bringing this to fruition and once adopted, it enables everyone in your organization to speak a common language, streamlining internal processes while maximizing customer and employee satisfaction.
A key differentiator for Propoint is what they call The proprietary Propoint Advantage methodology which follows their proven, systematic and balanced approach to implementing ITIL through staff training and optimization of tools that deliver measurable and sustainable performance improvement. Their Certified ITIL Experts start by listening to your unique business needs in order to better understand your current situation and specific pain points. This is followed by a Process Maturity Assessment which determines the level of maturity for each ITIL process. Based on this analysis, they identify the gaps between your objectives and the reality of your current situation.
Next, they create a prioritized road map to help you achieve those short and long-term IT Service Management objectives best-suited to your culture and organization. Finally, they offer Experience-Based Guidance to assist you every step of the way, resulting in improved quality of services and lower costs of IT operations.
Some clients that have benefited from their services are Lockheed Martin, Children’s Hospital, Duke University, IBM, Sports Authority and the Department of Transportation just to name a few.
Ideally, Service Desk processes will become automated. There are several powerful tools that exist to help companies automate and optimize their Service Desk functions. TechExcel’s “ServiceWise” is the comprehensive help desk and IT service management solution to optimize every aspect of your service and support processes no matter how simple or complex your business processes may be. They profess that when you need the ultimate workflow power to enforce business process rules and coordinate teamwork activities from your help desk engineers, employees, management, and multi-department engineering teams, TechExcel ServiceWise is the ideal choice. The tool automates and streamlines IT services and help desk activities with configurable workflow, process management, email notification and knowledge base. It also facilitates self service with a powerful web portal that includes online incident submission, status checks, online conversations and intuitive knowledge base searches. TechExcel tranforms IT teams into a single, integrated solution: help desk incident management, problem escalation and analysis, IT change management, and optional holistic asset management and service level agreement modules.
They believe that by using their point-and-click interfaces that the tool can be easily configured and customized to suit any businesses needs. TechExcel believes that ServiceWise gives companies a truly affordable, configurable yet powerful help desk solution that will make employees happy while increasing their productivity. Some of the specific features of the tool include:
- Incident tracking and resolution – Track all incidents and problems with full audit trail throughout the resolution lifecycle. Each record contains the documents, knowledge-topics, links, email threads – and more – for a holistic view of your entire help desk lifecycle.
- Workflow-enabled email management – Automatically route employee email to appropriate support staff and track the entire correspondence history.
- Complete incident workflow – Automatically assign new issues to the most appropriate person based on their skills and workload, then trigger automatic notifications when issues are overdue. ServiceWise supports the ITIL framework by seamlessly integrating incident management processes with problem management and change management processes.© 2009, Business-Software.com. All Rights Reserved. Reproduction Prohibited.
- Built-in reports and analysis – Over 150 pre-defined, presentation-quality reports and graphs with the power to easily create additional custom reports with Crystal Reports™
- Integrated asset management – The integrated asset management capabilities of AssetWise helps optimize all asset-related processes during an assets lifetime, from purchasing through implementation to service upgrades and returns.
- The industry’s best Employee Web Portal – The easy-to-navigate personalized web portal gives employees a convenient way to communicate with your IT services and help desk department. The TechExcel Employee Web Portal improves employee satisfaction and your IT service desk efficiency and virtually eliminates the risk of data errors caused by manually transferring information from employees to support engineers.
- Fully customizable user interface – Fully customizable interface allows you to design your fields and forms to suit your specific business needs – without waiting for high-priced consultants to do the job.
- Knowledge management – Complete knowledge base management helps your support team reduce repetitive support tasks and empowers users to find answers by themselves.
