Webtop UX Overhaul

Owned by Geoff Bowers
Last updated: Mar 05, 2013Version comment
1 min read
The administrative webtop will be redeveloped, focusing on usability and editor productivity.

Key Objectives

  • clean, minimalist and chunky design
  • make use of media queries to provide assistive UI for both small and larger viewport sizes
  • make the webtop touch screen friendly
  • remove framesets
  • isolate webtop and front end styles for formtools, and edit handlers
  • based on the Bootstrap HTML5 framework
  • retain webtop XML customisation, and related security features

Prototypes

Early Webtop Mockups

Visuals

  1. Refreshed visual design while retaining the FarCry brand
    1. Important: existing users should still "feel at home"
    2. Customisable client logo
    3. Customisable colour schemes (define simple primary/secondary colour palette)
    4. Customisable "environment" label (e.g. "Staging" text/colour/image in header)
  2. Improve the site tree
    1. Optionally show different filtered views of the site tree, such as all objects in draft
  3. Webtop Overview / Edit views still need to be designed to work in front-end dialogs

Usability

  1. Optimise the navigation path to performing common tasks (less clicks = win)
  2. Mobile / tablet friendly where feasible (uploads, drag-drop could be blockers)

Architecture

  1. Retain compatibility with existing webtop XML structure
  2. Replace ad-hoc .cfm files with type-based webskins
  3. New registered id's for webtop (built-in) CSS and JS
  4. Upgrade to jQuery 1.9.x

New Features / Notes

  1. Quick links / favourites (5-10 max?) in the webtop
  2. In-line editing in the front-end
  3. Create draft, click cancel, no changes? DELETE THE DRAFT!
  4. Auto-saving content objects?
  5. Does archiving work? Is a fix needed for auto-saving to not be destructive?
  6. System info page (linked from header farcry logo?)
    1. - Including "check for new version?"
  7. Tree
    1. - include a timer to check if the tree has changed?
    2. after clicking edit, set a callback to check if the edited item has changed and update the data in the table
  8. JS optimisation
    1. skin:footerJS tag for loading JS at the bottom of the document