In the previous section on user considerations, it was mentioned that an important disadvantage of having participants complete the web survey on their own computers was that some of the specifics of their computer setup might prevent your web form from displaying and operating correctly.
Here are some tricks for reducing the number of problems this will create. These are for intermediate to advanced users of Dreamweaver and the web, and can safely be skipped to go on to the next section for simpler applications.
1. SETTING WINDOW PROPERTIES
This "open browser window" a neat trick that can enhance
completion rates and can decrease the likelihood of unintended user errors.
In Dreamweaver, this is a "behavior" that can be attached to certain objects
on your web page. For instance, I can attach this behavior to this text
(to see it work, click on the link). Just close the window after it opens. Or
I can attach it to this button:
You should have seen a small Netscape browser window open in the upper left corner of your screen on top of this window, with the "getting started" page inside of it. Yes? OK.
So why is this useful? Because not only will this function allow you to open a new window, but it will allow you as the web page designer to control the features of that window.
To accomplish this, create a new "welcome" web page. Direct users to this page first. This page will be used to provide some overall instructions, maybe include an informed consent section, and open the actual "survey" page in a new window. You can determine the new "survey" window's size, location, and appearance (presence or absence of scrollbars, location bars, etc.)
Here's a diagram showing the relationship between the welcome page and the survey page:
Before moving on to describe how to control the new window's properties, let's consider a couple of additional benefits of having a separate "welcome page"
1. Determine the new window's size.
Did you notice how that window that popped up was smaller? That wasn't an accident,
but was programmed into the link above that created it (View source to see the
code, if you're interested).
<a href="#" onClick="MM_openBrWindow('sampleform.htm','sample',
'toolbar=yes,location=yes,status=yes,menubar=yes,scrollbars=yes,
resizable=yes,width=500,height=500')">- Which you will edit to read:
<a href="#" onClick="window.close(self);MM_openBrWindow('sampleform.htm','sample',
'toolbar=yes,location=yes,status=yes,menubar=yes,scrollbars=yes,
resizable=yes,width=500,height=500')">
2. Determine the new window's location on the user's screen. Did you notice how the window kept popping up in the upper left corner? That wasn't an accident, either. Usually you want it to open in just that place, the upper left corner, from where it will expand to fill as much of the screen as it needs to.
- If you want this to happen, you have to edit the underlying code to do it. Follow the steps for the window.close function above, but this time edit the code to read:
<a href="#"
onClick="MM_openBrWindow('sampleform.htm','sample','top=0,left=0,
toolbar=yes,location=yes,status=yes,menubar=yes,scrollbars=yes, resizable=yes, width=500,height=500')">
- You can, alternatively, make the window's upper left corner appear anywhere on the page. The numbers are pixels -- simply set the pixels to your desired location. For example, If I wanted the window to appear 100 pixels from the right of the screen, and 200 from the top of the screen, I would enter top=200,left=100,
3. Finally, you will probably like to edit the appearance of the new window. Specifically, I'd recommend removing all toolbars, location bars, menubars, leaving only scrollbars in the window. Click here to see what this would look like. There are a number of advantages to this:
- The user cannot easily determine the location of your survey form, and then mes with it later on, or resubmit data.
- The user is not distracted by unnecessary options (back, forward, refresh), or tempted to change answers, see later questions before early ones, etc.
- The viewable portion of the page is larger, allowing the user to see more of the questionnaire at one time.
Here's how: See all those extra settings in the open new window tag? Well, those can be tailored to your liking. You can select those features you want, and eliminate those you don't. Leaving an option out does means that option is not produced in the new window. Here are all your options, which can be selected by simply entering "yes" as above, or removed, by entering "no" (most can also be selected in checkboxes in the "Open Browser Window" behavior dialog box).
- toolbar= denotes if there will be a toolbar on the newly opened window. The toolbar is the line of buttons at the top of the browser window that contains the BACK, FORWARD, STOP, RELOAD, etc.
- menubar= denotes if there will be a menubar. The menubar is the line of items above labeled FILE, EDIT, VIEW, GO, etc.
- scrollbars= denotes if there will be scrollbars or not. I wouldn't make a new window that would need scrollbars anyway. I think it kills the effect.
- resizable= denotes if the user can change the size of the window by dragging or not.
- location= denotes if there will be a location bar on the newly opened window. The location bar is the space at the top of the browser window where the page URL is displayed.
- directories= denotes if there will be a directories bar on the new window. This is the bar at the top of the browser window that has the bookmarks and such.
- status= denotes if there will be a status bar.
2. CHECKING
BROWSER VERSION
Another thing to be conscious of is the browser with which your user will be completing the questionnaire. Different browsers (Netscape versus Explorer, as well as different versions of each) sometimes read html differently.
You can set up your web page to detect what browser the user is using to view your web page. Here's how: