Linked In QnA Should Web Forms Be Designed To Look Like The Paper Form It Is Replacing

When the word “forms” shows up it can mean many different things especially when you take the medium into consideration. The 2 mediums in question for the purposes of this entry are paper and web. Initially, I saw little to no reason to make a web form look like the paper form even though the paper version of the form is the grand parent and has been used by users for years. My initial reasoning for this was that they were two very different mediums with different constraints and capabilities.

The professionals on Linked In had plenty of experience and advice for me that I found very helpful. This post will categorize and present those recomendations so that hopefully they become useful to you as well. To note unless I get an answer that is completely off topic and backwards I am usually very happy to rate it as a good answer because the person took time out of their day to respond to me. With this question I got twenty responses that really sent my head spinning with some of the insights and experiences. Lets get to it. To pick the best answer was tough so I picked the one that provided me with the most unexpected reasons and points that I did not consider.

Best Answer

• How the form looks is just one part of the overall experience of completing the form
• Most people are used to the web presenting things differently so user confusion is not much of a factor.
• The experience of filling out the form matters more than how it looks on initial inspection
• We should be designing web-based forms to make the most of the browser medium
• Legal reasons may require you to make the form look like the paper one
  • 1. If the actual form – and not just the policy it implements – is enshrined in legislation, then every version of that form has to be approved. Having a web form that looks different can mean a whole separate approval process (and therefore additional costs).2. In legal arguments around data, the design of the form that collected data in question – rather than just the data themselves – may be used. Therefore, having a web form that looks different from a paper form may muddy the waters in any legal argument that calls on the design of the data collection instrument.

The above points really show why this was the best answer to me because I never considered the chance of there being legal reasons that a form had to look like the paper version. For the rest of the answers that I received it was a split scattered bunch. Below are the major points that were given to me for making forms look like the paper version.

For The Paper

• People printing out the form, filling it in, and mailing it to the office rather than submit it online
• Users familiar with the form would not use the interview style, preferring the familiarity of their tried and true replicated form
• They’re trying to minimize is the cost of retraining the experienced staff
• At a minimum, the flow of the form (the order of the fields) should be preserved if the paper form has been in use for quite some time
• It will be easier (faster) for people to transfer information from one to the other
• Fewer mistakes will be made if the meanings and locations of the web form items match those on the paper.
• When someone goes back to reference the form, it will have a familiar layout

For Using Web Technologies

• Tightly packed forms that are designed for the constraints of paper can and will be improved by the spacing of a web interface
• The ability to provide on demand help as well as assistance text in places that it was not possible with the paper form.
• Paper reading and screen reading are different so the form should be adjusted for the screen
• The length and complexity of the form should factor into the decision to adjust it especially if completion rate will increase using web tools like auto populate.
• If web users are a different segment that paper users or don’t have a lot of interaction with the paper form redesign the web form.

For A Hybrid Approach

• Only adjust the form slightly where it can help then as users get used to the adjustments continue to ween them away from the paper form
• Start with the paper then roll out a web version along side it. This would provide both versions and keep all users happy.

From this interaction I have learned that the phrase “there is more than one way to skin a cat” truly applies to this scenario. There are definitely compelling reasons to consider when designing a web form based on an existing paper form. The top reason being the effect on the user population.

Tags the new disturbing web usability/readability trend

From what I have seen there is an emerging trend out there in the web world that should have readers and consumers of web content up in arms.  The problem lies between who the consumer of the content is.  However, the issue is not an old one just a different way of using and abusing web content to achieve the same goal.  Our culprit this time is not bold and underlined and linked text, or hidden blocks of keywords.  It’s worse, and has greater impacts on usability as well as readability.  The culprit is what I call the “Glutton Tag Cloud”.  It is a glutton for 2 reasons that both cause consumers problems.  First it eats up screen space with a bulging belly full of tags that in some cases reflect every word in the content as well as synonyms.  The content is left to a sliver of space looking like jack sprat in the corner and stretched out to cause plenty of scrolling.  One concession is that shorter lines do help scanning but excessively short lines also hurt reading.  Then of course there the second issue of becoming meaningless.  I would predict that if “Glutton Tag Clouds” continue to be out there Tags will soon go the way of the dinos.  Extinct as a manner of by which producers can categorize their creations for others so that consumers can find them. 

The reason issue number 2 is so important is based on that very word “important”.  When consumers look for content they are looking for content that addresses particular importance to a few key subjects.  The “Glutton Tag Cloud” on the page sits there to say that everything in this page is important.  The result of that will be that nothing will be considered important.  So when nothing becomes important the ability to rank relevance of the content based on the important topics goes away.  Once that happens The tag cloud will go away and another method of identifying importance or subject matter of content will show up to be exploited I guess.

I would have to think that if your content was that interesting it would not need the Glutton Tag Clouds to get it noticed.  People would find it easily using the system that has been defined.  Don’t go from a content creator to an SEO optimized relayer of garbage.  Keep it real and keep it fresh please.

Best way to troubleshoot IE (6 & 7) CSS issues? Linked In

Troubleshooting CSS in IE is the question!!

A linked in user asked a bout a topic that can cause even the most experienced developers headaches. Differences between the ways browsers handle CSS. The tough part about this is that even with versions of the same browser there are issues. That being said lets look at some of the solutions the linked in pros came up with to help.

Most Popular:

The most popular recommendation came for using Firebug lite which provides a view of the site code as well as applied css classes and tags based on component. This way you can review what is being applied to your content to make it look the way it does. Multiple IE. Is also at the top of recommendations. It allows for snap shots of your page as it would be rendered in the different IE browsers. This is great so that there is no need to have them all installed on your PC. These applications are different in nature but both provide a very needed part of debugging.

Also Noted

I personally have used the IE Developer Toolbar and have found it very useful in debugging CSS issues. I also use Firebug for Firefox. There was only one suggestion to use the tool. Other tools mentioned were

• http://www.debugbar.com
• http://www.virtualbox.org
• http://www.parallels.com
• http://www.vmware.com
• http://www.litmusapp.com

I hope this helps out with your CSS debugging.

Linked In QnA, How functional must a prototype be if my goal is to get an investor or potential partner interested in the concept?

This question was asked by a gentleman looking to build something that he could start and wanted to start but would like to get help with finishing. This is the question for virtually everybody with an idea for a product. Essentially it is “How much of what I am thinking do I have to have built and have ready for show in order to attract people with capital to help me”. The Linked In Experts or at least people with experience and were not to scared or greedy to share weighed in and provided some good information.

There were 6 answers to this question total, of which 4 were chosen as good answers and 1 of the 4 was the best answer. Lets take a look as speaking points for the best answer in this case.

Best Answer

1. Convince them that the product could work
2. Mock up only trivial parts of the system but have enough wow parts working to keep interest
3. Allow investors to play if they would like
4. Research attendees and know your audience (If you have ever read “The 48 Laws of Power” this is of major importance for anyone looking to sell anything)
5. When demoing to developers make sure you show the challenge in the application

This is a nice set of rules to go by based on 2 preconditions of having the prototype ready; and having found people that would want to get on board with you. However, those issues to me seem to be of greater importance because you can’t really do any of what is stated here unless those conditions are met. So lets take a look at the other answers to see if someone piped up about ways to find those willing to help you.

Good Answers

1. Functioning product (2 Nods)
2. Get it used by actual users (2 Nods)
3. The other 1 that answered really just pitched their services and piggy-backed.

Answers Note Rated as Good

The strangest thing is that I think that both of these answers are actually much better than the answers of the 1 that was selling. Points from not good answers.

1. Know what your VC is looking for
2. Have a working scale at least
3. If it is a physical product have a working scale version
4. Make sure that it shines (people don’t get under the hood if the body is garbage)

for not rated as good answers these 2 guys actually provided some good insights. For instance number 4, where the the statement is ” Your GUI must rock..” is very true. I have seen many products where the part that the customer, investor, user sees is not appealing and the product fails because they can’t get past the look. So when you go looking for investors make sure they can get past the first impression so that you can sell them on the real meat of the thing. The other points of the not good answers all mimic what had been said before just with different examples.

Well I hope this was a nice little look into this Linked In question and answer. Will have another one next week.

Link to the actual post:

Fine Tuning Table Styles in JSF and Richfaces with CSS

Richfaces is a nice JSF component library packed with very stylish looks and skinning capabilities. The rich:dataTable control is one of the flag ship controls of the entire package because it allows developers to get nice attributes such as roll over highlighting and alternate line shading done easily with an minimal amount of work. However, some times the data would require that the developer either nest a table or get right down to the actual cell for styling purposes. For many developers just starting to work with JSF and Richfaces, this could be a very time consuming task that produces much frustration. We will look at one way of getting to the cells that you want using css.

<*:column> means the <h:column>, <t:column>, <rich:column> items for tables.

JSF table styling and scope is as follows

styleClass – Table level styling and potentially row level styling if in a <*:column> tag
headerClass – Table header level styling
columnClasses – Table column level styling (common area of misconception)
rowClasses- Table row level styling (normally used for backgrounds, selection indicators and roll over shading)

With all of the above tag attributes they turn into class definitions for the table. Using these to define things like header rows or columns; provide column alignment, with and style; table size, borders and fonts works very well. The issue is how do you get down to a single cell and adjust things differently than they normally are in the table. Say you have one cell that had a different border requirement because of emphasis on that data, or a cell that has different font and background needs than the rest of the table.

HTML users would say go and place an ID on the cell and style based on the ID. However, there is no cell definition in the layout of table controls in JSF. Table Cells are generated for you automatically based on the combination of the amount of columns you define in the eg a two column table would have (columns=”2″), and the list of column and element tags you have nested inside of the panelGrid, dataTable, subTable tag. So there is no direct access to a <td> to put an ID on.

To get around this what I did was use a CSS class which I could add to either my rowClasses definition or styleClass definition of a specific <*:column>


for the column
<t:column styleClass="myStyle">
contents that need to be styled in the TD
</t:column>

The style definition for this would then be
.mystyle td{ border:1px solid red;}

What this achieved is placing a red border around the TD or TDs contained in that column tag.  For fine tuning of your tables this method allows you to get to the cell level.  However, it is still not as good as being able to directly place an ID on the cell you want to manipulate and styling that item individually and directly.

Linked In QnA about Annoying Ads on weather.com

Weather.com has to have some of the most intrusive and annoying ads on the web. Seriously being a web and marketing lover I think done correctly the web has the potential to be the perfect marriage of targeting and convenience. However, I recently got fed up with the bold in your face continuous annoyance of the dancing, moving, jiggling, content covering, bigger than the content ads. I decided to poll the linked in community to get a sense of what others have found as replacements to the annoying advertisement ladened weather site. I promptly received 12 responses to my query from web users that have had it with weather.com. Below are the recommendations of the answerers.

1. Fire Fox with Adblock https://addons.mozilla.org/en-US/firefox/addon/4042 this tool got much praise and for good reason. Currently has over 200,000 downloads and that number is growing by the second.
2. http://www.wunderground.com/ got plenty of nods as well. There are ads there but not the jiggling kind.
3. weather.mobi the mobile solution from weather.com got a few nods as a suitable solution for those that are on the go or would rather use their phone to check the weather. It gets specific and removes flashy stuff.
4. http://www.weather.gov has no ads and has a lot of functionality.
5. http://www.accuweather.com got a nod but it also has ads in a few places

Interesting enough no one mentioned weather bug. I am thankful to all who helped me on linked in with this question and now I pose the same question to you. Please let the rest of us know about your low ad profile weather solution.

Hello unsuspecting world!

We are links and buttons because that is what we deal with day in and day out.  How does it link and how do you get there.  All things web is our domain but mainly focusing on information and knowledge gained from linked in users who are usually professionals with varying experiences and views on the question.

Enjoy.