UI UX Review

A Review of FRAPI's UI/UX

This document is intended to be a review of the current FRAPI user interface (UI) and user interaction (UX); with the goal of improving it in future versions.

General

Visual Elements

• Container (Fixed-width: 780px)
• Logo (Top-Left 3/4)
• Welcome Message/Sync Button (Top-Right 1/4)
• Top Menu Tabs (conditionally shown)
• Sub-menu (Left 1/4, context-aware)
• Body Content (Right 3/4)
• Footer w/Copyright (Bottom)

-------------------------------------------
|                               |         |
|          FRAPI Logo           | Welcome |
|            (3/4)              |  (1/4)  |
|                               |         |
-------------------------------------------
|             Top Menu Tabs               |
|             (conditional)               |
-------------------------------------------
|         |                               |
|         |                               |         
|         |                               |
| Sub-menu|         Body Content          |
|  (1/4)  |             (3/4)             |
|         |                               |
|         |                               |
-------------------------------------------
| Footer: Copyright                       |
-------------------------------------------

Observations

Overall, the design is simple and reasonably effective. It is starting to look dated, but the muted tones are pretty unique to FRAPI.

Issues

1. [UI] The constrained layout may limit future additions to the interface. Already the sub-nav is sometimes ommitted to provide more space (e.g. to display the editor for code or docs)
2. [UI] The Top-Menu tabs are limiting
3. [UX] Logo is a background image with no text for screen readers (e.g. <div id="header"><div class="left">FRAPI</div>) or should be an image with an alt attribute.
4. [OTHER] It should no longer have the "echolibre" name attached to it.

Login

Visual Elements

• Welcome Message (Top-Right 1/4)
• Login Form (Body Area)
  • Username (text input)
  • Password (text input)
  • Login Button
• Sub-menu (blank)

Observations

The login screen has good usability with the proper use of <label> tags with accurate for attributes.

Issues

1. [UX] There should be no sub-menu
2. [UX] The are no tab indexes on form elements

Dashboard

Visual Elements

• Welcome/Sync (Top-Right 1/4)
  • Sync Button
• Top-Menu Tabs (Dashboard active)
• Sub-menu (blank)
• Welcome Title

Issues

1. [UX] The logo does not link to the Dashboard
2. [UX] The Welcome title for the Top-Right 1/4 box is confusing
3. [UX] There should be no sub-menu
4. [UX] There are no tab indexes on the Top-Nav tabs
5. [UI] There should be more content on the page. There should at least be introductory text; at some point it should show stats/analytics/system info

Actions

Visual Elements

• Sub-menu
  • Add new Action
• Filter (text input)
• Table List (defaults to A-Z Name sorting)
  • Sortable via table headers
  • Name
  • Visibility
  • Enabled
  • Action
    • Edit (link)
    • Code (link)
    • Delete (link)