Final Redesign
We've refined our initial ideas and created new solutions to the issues we discovered throughout the previous stages of the project. Listed below are the most pertinent fixes that either repair broken user experiences or incorporate features that users expects in a text editor.
Our final page and menu layout. We organized our menu items using a tabbed ribbon that consists of four tabs: "Text Format," "Body Format," "Import Tools," and "Help." Individual menu buttons are not shown here. We decided the most efficient way to convey each menu item's function was by grouping them into tabs. Most desktop text editors already do this, so implementing tabs here will create consistency across platforms for the user.
The Text Format tab. This tab includes all of the character styling options as well as the link and anchor functions. We've added short descriptions next to each heading level, because the current editor only includes a description for H1.
The Body Format tab. This tab includes the Inline Style and Block Format options, as well as the left, right, and center-align options.
The Import Tools and Help Menu tabs. The Import Tools tab includes options for inserting images, tables, special characters, and block quotes; the help tab includes the toggle source option as well as the keyboard shortcuts and help menu sections.
The guideline help feature. This window will update dynamically depending on what the user is interacting with. We took inspiration from FAFSA and other applications that implement a help menu this way. The help menu also links the user to relevant WCAG and ARIA guidelines based on what they are doing, making it easy to read further about web accessibility without being intrusive. After adding this feature we decided to remove the Check Accessibility menu option. This dynamic help menu will fulfill that need without requiring any user input.
This image also shows that we've implemented a spellcheck. The current version of the editor does not include a spellcheck feature.
The Image Upload screen. We've added the option to import an image from a file on the user's computer, rather than only allowing an image URL like the editor currently does. We also added a short description under the "Alternate Text" text entry box so the user has a general idea of what they should write there. We also added an image preview, represented by the "Image Preview" text in the preview box. This replaces the current Lorem Ipsum text, which confused our users during testing.
​
​
​
​
