Acai Designs

This is an internal document

While making small fixes to this page like fixing typos and dead-links is encouraged, any changes which significantly modify the information of this page should be suggested on the discussion page instead, as this is an internal document.

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.

Skin

Motivation

Improve visibility of common navigation elements and reduce visibility of less common ones
Decrease clutter throughout
Increase visibility of search box

Approach 1

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)

Summary

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.

Navigation Tabs

Motivation

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

Approach 1

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

Summary

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.

Edit Toolbar

Motivation

Improve ease of interpretation of icons
Balance visibility of commands with frequency of use
Provide access to contextual help resources

Approach 1

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

Summary

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.

Approach 2

Showed basic and common commands in top section of toolbar
Added expandable toolbars where more advanced commands and help reside

Summary

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.

Search Results

Motivation

Improve users' comprehension of results
Align with users' expectations for results format
Improve navigation through results

Approach 1

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

Summary

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

Motivation

Increase clarity of what content relates to the edit link
Improve visibility of section edit links

Approach 1

Provide a visual indication of what will be editable when the user mouses over the section edit links

Summary

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.

Approach 2

Move section edit link next to section title
Show edit icon next to links

By moving the edit links over to be directly next to the titles it's more obvious which section they relate to. Additionally, the icon helps to increase the visibility of the links, helping resolve the issue of users not finding them at all, which we identified in many cases during testing. In some Wikipedia projects, custom JavaScript code is being used to transform the page in a way that results in section edit links directly following the title, however this design takes it a step further with the removal of the brackets and addition of the icon and would ideally be achieved by modifying the actual output of the parser.

Layout (Cleaning up the Clutter)

Motivation

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)

Approach

Overview

Slides from an internal overview of acai design mockups.