Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Formatting toolbar: A formatting toolbar appears across the top of the main page screen whenever a user is editing some body text.  We made sure that the toolbar would remain across the top of the screen no matter where the user was scrolled on the page (absolute positioning).  We also made sure the buttons in the toolbar acted like buttons, and would have obvious activated (pressed down), deactivated, and mouseover effects.  After the heuristic evaluation, we took many of the suggestions on improving the formatting toolbar to meet the specifications of a robust toolbar.  The evaluator gave us helpful feedback about the buttons affording clickability, the effects being consistent, and making sure everything was implemented correctly.  We tried to bring everything up to all these specifications with our final design. Image Added
Above: the formatting toolbar. Image Added
Above: A pressed button in the formatting toolbar.

Implementation:

We used mostly JQuery and ContentEditable.  Other useful software tools we used were HTMLCanvas and Coffeescript.  We had a backend in Ruby on Rails but never really got into implementing much of the overhead required to use it; as a result, our image upload worked via entering an existing image URL rather than uploading an image to our servers, and users could not save or publish their posts.

...