Front-End Documentation

Sections

XHTML/CSS

As far as the XHTML and CSS go, the actual coding of the user interface was pretty trivial (that is not to say that it wasn't time-consuming). I used XHTML 1.0 transitional and CSS2. All the pages use table-less layouts and are contained within a general div structure:

General Div Structure

Container (div id="...-container") - contains all nested elements within a single column fixed-width centered layout

Top Rounded Corners (div id="box-top") - the image with the rounded corners is a background image specified in the CSS file with a fixed height and width
Side Navigation Tabs (div id="tabs") - the tabs for the side navigation are shifted to the left using the CSS margin property.
Content (div id="...-content") - contains the main body content of the white, boxed layout

Header with Logo (div id="header") - this div includes the logo and the upper right-hand corner user/sign in/log out information/links
Content Container (div id="...-content-container) - this div contains all the content

Bottom Rounded Corners (div id="box-bottom") - the image with the rounded corners is a background image specified in the CSS file with a fixed height and width
Footer (div id="footer") - this div simply holds the copyright information at the bottom of the page, below the white, boxed layout

The page for the Snippity workspace would have been more easily coded in a table due to the fluid width of one of the columns, but I counter-intuitively coded that page using div tags that used CSS display values to emulate tables.

Snippity Workspace Div Structure

Container

Table (div id="table")

Row (div class="row")

Blank
Top Left Corner (div id="a")
Top (div id="t")
Top Right Corner (div id="c")

Row (div class="row")

Tabs (div id="tabs")
Left Side (div id="l")
Main Content (div id="content-cell")

Header (div id="header")
Content Container (div id="content-container")

Side Bar (div id="sidebar")

Control Panel (div id="control-panel")
Tags (div id="tags") - we eventually removed these

Workspace Content (div id="content")

Right Side (div id="r")

Row (div class="row")

Blank
Bottom Left Corner (div id="d")
Bottom (div id="b")
Bottom Right Corner (div id="e")

Footer (div id="footer")

Using these div structures as a guide will help one unfamiliar with my code make sense of the structure. It'll also help one navigate through the CSS, since it relies heavily upon the XHTML structure. My stylesheet is divided into several sections, separated by commented labels. There are sections for Global Styles, Tabs, Homepage Styles, Workspace Styles, Registration ETC. Page Styles and About Section Styles.

The Design

I should have mentioned earlier that coding the XHTML and CSS were trivial only once I knew what the layout would look like. Here is a short evolution of the layout through pictures:

Earliest Sketches

More Defined Wireframe

Logos

Final Layout Options

Design Choices

In designing the user interface I saw an opportunity to put to work all the things I learned in the various HCI-related classes I've taken (COGS 120, COGS 187A, PSYC 161). Therefore, my group and I took care in considering the user's experience with Snippity during this step of the project. Below are some of the design choices we made and our reasoning for them:

animated state changes

When one clicks on the "Minimize/Maximize" snipp control button, the body of the snipp slides up or down to reveal itself. When the "Delete" button is clicked, the snipp collapses downward. These animated effects make the transition between states easy to comprehend. Rather than jumping from one state to another, leaving room for possible confusion on the part of the user, these transitions don't leave room for ambiguity. The user can see exactly how the end state originated from the beginning state, thus guiding them through the cognitive leap necessary to understand the situation.

drag and drop snipps

The drag and drop functionality allows the user to directly engage in the interface. If the user wanted to move a snipp from one workspace to another, they would simply drag the snipp by its "move" button and drop it over the target workspace. This action is simple for the user to understand—there is directness of engagement and distance. The burden of interpretation is placed upon the system rather than the human user, such that a natural drag and drop action is converted via JavaScript and PHP into what the user expects from the application, shortening the semantic distance. Not yet fully implemented

snipp control buttons

These buttons are afforded to be clicked, meaning they simply look like they're clickable. Also, they are marked with recognizable symbols, making their function clear (e.g. "move" has a 'move cursor' and "delete" is marked with a red 'X'). Their physical design thus serves their purpose well. Additionally, they are placed in the upper right hand corner—the same place where window control options are in the Windows operating system. In this way, the snipp control buttons follow set conventions, increasing their legibility.

icons for items in control panel

Instead of using buttons for the items in the control panel, Snippity uses icons. This is because the active area is bigger than just an icon. If we used a button, the user would think that only the button is active and disregard the surrounding area that is also active. Icons are not enclosed, and thus open up one's interpretation of the space. Thus, the whole line will correctly be interpreted as active rather than just a selected portion.

800x600+ screen resolution

In order to please as many users as possible, I designed Snippity to fit in a 800x600 browser window. Though most people have higher screen resolutions than that, there are some who choose to keep their web-browsers at a width of 800 pixels in order to make the most of their screen space. Additionally, the Snippity workspace has a fluid width, so it will expand to fit wider browser windows in case 800 pixels is too small for the data entered into a snipp.

forcing function with editing snipps

Due to the nature of our code, input into any of the fields when adding (or editing) a snipp cannot contain a line break or else it will cause Snippity to break. In order to discourage users from inserting line breaks, we have made all of our input fields single-lined. Single-line input fields lack the affordance to handle multiple lines, so it will deeply discourage users from trying to do so.

navigation tabs on side

This design decision was purely on the metaphorical side. My aim was to make the layout look like a bookmarked notepad, reflecting the scrapbook-like nature of Snippity. I realize the drawbacks of unconventionality and less legibility, so I used a large font whose color has high luminance contrast with the background. I also used colors that don't appear on any of the pages (except the homepage) in order to make them pop-out.