These designs are either preliminary mock-ups of prototypes which may be built or screenshots of prototypes which have been built but are still under development. Some of the ideas in these mock-ups are creative and experimental, while others are more practical and proven approaches.
- Improve visibility of common navigation elements and reduce visibility of less common ones
- Decrease clutter throughout
- Increase visibility of search box
- Reduce unneeded boxes and lines
- Spread out items in cluttered areas
- Move search box to the top-right
- Separate tabs into namespaces, views and actions (in a drop down)
Vector is a new skin which uses a similar layout to MonoBook but reduces the superfluous use of lines and boxes. In practice this skin also reduces the download size of skin related information to 50% of the size of MonoBook, and requires a fraction of the CSS code.
- Improve communication of where user is and where they can go
- Increase visibility of alternative views of information, especially editing
- Decrease clutter in head of page
- Display navigation in a more structured way using sections, views and actions
- Proportion visibility of elements to frequency of use and increase overall size
- Visually differentiate sections, views and actions
- Collapse less commonly used elements into on-mouse-over drop-down menus
This design is superseded by the Vector skin, but laid the initial groundwork for tab reorganization. The downside to this design was the movement of tabs which occurred when switching namespaces, while the upside was it's clearer representation of structure between what tabs were namespaces, views, and actions.
- Improve ease of interpretation of icons
- Balance visibility of commands with frequency of use
- Provide access to contextual help resources
- Implementation of the icons from the Tango Desktop Project
- Removed many advanced commands (may reintroduce them in an advanced mode)
- Added connection to help panel
- Merged some commands into content generation wizard launching points
By reducing the number of icons down to only the most commonly (and successfully) used ones as per our user research study, the toolbar now requires less attention to comprehend its capabilities. Selective text labels help to explain less identifiable icons, and formatting types are grouped into a unified drop-down menu. This design requires the presence of content generation dialogs to provide additional interaction when inserting media and links.
- Showed basic and common commands in top section of toolbar
- Added expandable toolbars where more advanced commands and help reside
By adding an expandable/collapsible secondary toolbar area the primary toolbar can be simplified while still providing access to additional items. This design is more transition-friendly as it provides a way to improve the layout of the toolbar without modifying the functionality of the actual buttons. The icons represented in this mockup are for illustration purposes only and will be replaced with duo-tone (full color on mouseover) versions of icons from or based on the Tango Desktop Project.
- Improve users' comprehension of results
- Align with users' expectations for results format
- Improve navigation through results
- Increased visibility of titles of results
- Implemented icons from the Tango Desktop Project for paging navigation
- Reduced visibility of infrequently needed information
- Visually structured search page to meet users' expectations
By analyzing the user experience of popular internet search engines many common and useful features have been identified which present solutions to issues found while researching user interaction with search results. One key feature of this design is that it keeps as many of the search results as visible as possible. Other elements such as a list of common search configurations provide quick access to different search results using the same search terms. Overall, reducing clutter and visually encapsulating ancillary information contributes to improving the visibility of the search results.
Section Edit Links
- Increase clarity of what content relates to the edit link
- Improve visibility of section edit links
- Provide a visual indication of what will be editable when the user mouses over the section edit links
Our research showed that many of the times which people did find the section edit link, they incorrectly connected the link with the content above it rather than below. By highlighting the affected content when the user mouses over the section edit link, the user is presented with an illustration of which portion of content relates to the link. This approach has technical limitations however, as the current approach to parsing text does not encapsulate sections or even structure the resulting HTML code reliably in relation to the section outline. An example of a case in which this approach breaks is when a div tag is opened in one section and closed in another - which is valid and common on Main Page articles but would break the section highlighting functionality.
- Move section edit link next to section title
- Show edit icon next to links
Layout (Cleaning up the Clutter)
- Organize and group links, messages intuitively
- Consolidate redundant links, messages
- Remove duplicate links and messages where applicable
- Collapse information that tends visually overwhelm (templates use, hidden categories)
- Slides from an internal overview of acai design mockups.