http://tc.eserver.org/dir/Articles/Web-Design/Forms A listing of the most recently indexed works about Articles and Web Design and Forms in the field of technical communication. en-us Copyright (c) 2005-08 by the EServer. All rights reserved. tclib-editorial@eserver.org (TC Library Editorial Board) webmaster@eserver.org (Geoffrey Sauer) http://tc.eserver.org/images/newlogo.gif http://tc.eserver.org/dir/Articles/Web-Design/Forms http://tc.eserver.org/35705.html http://tc.eserver.org/35705.html Be it web-based applications or online services, they are taking the Internet by storm. Many websites introducing these services are created and launched to get users to sign up and use the software (hopefully for a long-term). The question is: How do we get users from the unfamiliar zone into the interested zone and subsequently becoming a first time use? http://tc.eserver.org/35397.html http://tc.eserver.org/35397.html Next time you consider adding a reset button to a form, think it through very carefully first. Does the user really benefit from being able to reset the form? Is being able to reset the form to its initial state so valuable that it is worth the risk of the user losing the data they have entered? Probably not. http://tc.eserver.org/35168.html http://tc.eserver.org/35168.html Inline validation gives people several types of real-time feedback: It can confirm an appropriate answer, suggest valid answers, and provide regular updates to help people stay within necessary limits. These bits of feedback can be presented before, during and / or after users provide answers. http://tc.eserver.org/34001.html http://tc.eserver.org/34001.html Forms are often the most tricky aspect of web development for beginners to get their head around, largely because it means stepping out of the comfort zone of one-way information - no longer are you simply presenting information at the person viewing your site, now you are asking for input, for feedback that you have to process in some way. And just as it may be difficult for HTML beginners to understand just how they handle form data, so is it difficult to understand some of the issues relating to accessibility. http://tc.eserver.org/33381.html http://tc.eserver.org/33381.html Over at Smiley Cat Web Design they’ve put together a showcase of many different login and registration forms. While you’re there, take a look at some of the other showcases listed in the sidebar. They have sets for calendars and date pickers, footers, search boxes, and many more. http://tc.eserver.org/33123.html http://tc.eserver.org/33123.html What do you really need to know in your form process? Be brutal. Don't include stuff that your sales team would like. Completing a form is rarely (if ever) the goal in and of itself. The goal is to entice the user into a deeper relationship (of some sort) with your web site. Notice that I didn't say that the goal was to complete a transaction or make a sale. That is evidence of the deeper relationship, not the vehicle by which you persuade your users. http://tc.eserver.org/33124.html http://tc.eserver.org/33124.html Websites have become less accessible and more complex over time according to recent studies. Learn how to buck the trend by creating fast, accessible CSS forms that work with modern browsers and gracefully degrade. http://tc.eserver.org/33131.html http://tc.eserver.org/33131.html This document is concerned with what the user of a Website form "sees" and interacts with. It outlines how you can create forms for the Web that are more accessible and describes the appropriate use of. http://tc.eserver.org/33132.html http://tc.eserver.org/33132.html Ask anyone who has had to fix a Website that's littered with accessibility howlers, and top-most in their list of problems encountered will be forms, closely followed by tables. These two topics always seem to present the most difficulties, but they needn't be a problem. For the most part, forms are a problem because the extra accessibility tags are simply not known to the Web designer -- after all, it looks right, it seems to work... what's the problem? Only by switching off the monitor and using a screen-reader can our oblivious Web developer understand the issues. http://tc.eserver.org/33133.html http://tc.eserver.org/33133.html You are writing captions or labels for fields in forms, for example 'Name' or 'Date of birth'. Should they be finished with a colon, or not? http://tc.eserver.org/33134.html http://tc.eserver.org/33134.html Effective form design is a great way to boost conversion rates. Jason Fried and Matthew Linderman share with us the secret of how to create attractive and functional forms. http://tc.eserver.org/33135.html http://tc.eserver.org/33135.html Urgh – it’s what we all think when presented with a form to complete, whether printed or online. What is it about forms that make us feel this way? Maybe, the history of being officious and complicated, a drain on our time, and they often make us feel stressed. As forms represent a business or an organisation, all these feelings are subsequently associated with that organisation – not good for customer relations or reputation! http://tc.eserver.org/32751.html http://tc.eserver.org/32751.html You may not realize it, but there are times when each variant of form layout can have a positive or negative impact on how the form (and your site) is used or perceived. And applying the right variant at the right time is one of the simplest things you can do to improve your user’s experiences. http://tc.eserver.org/32660.html http://tc.eserver.org/32660.html Forms. Is there any other word that strikes as much fear into the hearts of grown web designers? There's also an improperly held belief that the only way you can guarantee that a form displays properly is by using tables. All of the code reproduced here for forms is standards-based, semantic markup, so you've got no excuse for relying on tables now! http://tc.eserver.org/32551.html http://tc.eserver.org/32551.html HTML hasn't really been updated since HTML version 4 was released back in 1998. However, the WHATWG community has been working on HTML since 2004 and this will hopefully result in some much needed improvements. This article shows some of the new functionality of the proposed form chapter of HTML5: Web Forms 2. http://tc.eserver.org/32498.html http://tc.eserver.org/32498.html Explains some of the technical reasons for form controls being so hard to style consistently across platforms with CSS. Also asks a lot of good questions related to how various CSS properties should affect form controls if browsers would let them. http://tc.eserver.org/32425.html http://tc.eserver.org/32425.html Just about every website needs some forms. Sometimes there are many of them, sometimes just a single contact form. Regardless of their number, they need to be usable and accessible, which can sometimes be a little more work than it would be if theory and practice aligned a little better. http://tc.eserver.org/32453.html http://tc.eserver.org/32453.html There are plenty of articles and tutorials that describe how to create accessible HTML forms out there. Despite that it is common to come across forms that do not use a single label element and forms that use label elements but do so incorrectly. http://tc.eserver.org/32460.html http://tc.eserver.org/32460.html Few people will argue against the need to explain to users what they are supposed to enter into text input fields. One common workaround when no label can be displayed is to put some placeholder text in the text field and let that act as the label.This approach works reasonably well, but it burdens the user with having to clear the input before entering their own text, which can lead to frustration and mistakes. An approach that avoids that is using JavaScript to clear the input when it receives focus. Since that won’t work when JavaScript support is missing, JavaScript should be used to insert the placeholder text as well. http://tc.eserver.org/32473.html http://tc.eserver.org/32473.html Very few designers appreciate the aesthetic of a text input field, and styling form fields cross-browser on any Web site can be a tedious and frustrating experience. The compromise typically involves applying a simple colored border and background to the fields. I think this is the right approach for Web sites and applications that are form field intensive, but the search box plays a special role in the design, and it deserves a little more attention. http://tc.eserver.org/32379.html http://tc.eserver.org/32379.html There are a million websites out there. There are a million email service providers out there. How do you ensure that you gain the right audience to join your service? What are those factors that will help users move ahead and become your loyal customer? Part of the answer has to do with the first step: Registration! http://tc.eserver.org/32076.html http://tc.eserver.org/32076.html So you’ve been to about a million websites at this point in your cyber life. There’s a little bit of everything in the online jungle, with every different imaginable style, color, and layout. Everyone is trying to be different, trying to separate themselves from the pack. So why is it that nearly every website, from the coolest of the cool to the worst of the worst, seem to still be using the same, ugly form fields that are default. Well, that’s about to change, at least on your website. I’m going to give you some quick and easy tips to spice up your form fields and set your website apart from the rest. http://tc.eserver.org/31955.html http://tc.eserver.org/31955.html “Advanced forms” are rarely that. A more fitting name would be “Overwhelming and confusing forms”. But with Jason Long’s clever approach to streamlining a screen full of checkboxes, you might just be able to once again look fondly on your forms. http://tc.eserver.org/31829.html http://tc.eserver.org/31829.html What is likely to win the most converts is the joy Wroblewski takes in designing. This impression becomes clear as you page through the book. He isn’t just an ardent evangelizer, following the rituals of going to conferences selling snake oil. He’s been there in the trenches, just like you; he’s done this a hundred, maybe a thousand times. He’s tested these ideas and provides a framework for you to use from day one. Half the battle in good form design is defending your decisions to stakeholders. http://tc.eserver.org/31072.html http://tc.eserver.org/31072.html You load a new web service, eager to dive in and start engaging, and what's the first thing that greets you? A sign-up form. We can do better, says Luke Wroblewski, author of Web Form Design: Filling in the Blanks. Via a technique of "gradual engagment," we can get people using and caring about our web services instead of frustrating them (or sending them to a competitor's site) by forcing them to fill out a sign-up form first. http://tc.eserver.org/28659.html http://tc.eserver.org/28659.html Successful Web applications tend to grow--both in terms of capability and complexity. And this increasing complexity is often passed on to and absorbed by a Web application's forms. In addition to needing more input fields, labels, and Help text, forms with a growing number of options may also require selection-dependent inputs. http://tc.eserver.org/27482.html http://tc.eserver.org/27482.html To demonstrate an example of some accessibility issues in HTML Forms, the following content intentionally has accessibility errors. http://tc.eserver.org/26634.html http://tc.eserver.org/26634.html Once an online form goes beyond two screenfulls, it's often a sign that the underlying functionality is better supported by an application, which offers a more interactive user experience. http://tc.eserver.org/26330.html http://tc.eserver.org/26330.html This article describes a technique that takes input from a form text field and uses it to bring matching options to the top in a dropdown list. http://tc.eserver.org/24552.html http://tc.eserver.org/24552.html Prevent major user annoyance by checking all your web forms: feedback, comment posting, product orders, newsletter sign-up, newsletter opt-in, unsubscribe option, site registration, etc. When a form won't submit, or otherwise fails, after user inputs lots of data, it causes extreme ill will toward your web site, and may be legal violation (UCE laws). http://tc.eserver.org/20643.html http://tc.eserver.org/20643.html Creating an online form can present developers with many challenges. This case study reviews how a paper-based form was taken through the usability engineering process to develop a functional online version. We discuss the steps in planning and research, prototype development, test design, and the usability test results.