Design
 Completed
 
 

Description

Requirement

 Implement an option to display action name under icons

 Make wheel and 3dots menu more coherent 

Need

  • O: Icons are floating in the air, not explicit for newbies that don't understand where to click. 
  • O: The user doesn't know what kind of action he will find and the difference of the items under wheel and tree dots menus. 
  • O: Proposal
  • O: Fine on the Search and top navbar icons. Needed adjustment only on content menu
  • O: users don't always understand the meaning of icons (and what the icon designer wanted to mean) + all studies lead to the same conclusion about labels
  • O: user doesn't know what category of items are contained in the 2 menus
  • The content menu is floating in the air
  • Problematic wiki concept since people don't know pages can be edited and they are not invited to do it. Adding text to the icon could make them less cryptic and invite users to use them
  • Some users might not know where to find some actions (between the 2 menus)
  • Edit mode could adjust the menu and use other/no actions
  • Edit needs a label
  • O: Search could be expanded. Survey beginner and advanced users about this

Notes

  • Older versions had the labeled actions, see screenshots. The change was done in 7.2+ in the try to simplify and modernise the UI.
  • Investigate what are the usability reasons to delay tooltips

Improvements

  • Improve the labels for "Actions" to "Page Actions"

Solutions

Solution 1

  • Revert the icon-buttons and use labels. Rollback XWIKI-12189
    • - Inconsistencies with the navbar icons (except if we plan to revert those too)
    • - Loses the skin modern styling

Solution 2

  • Make configurable the display of buttons
    • - Harder to test

Solution 3

  • Replace the HTML hints done with the "title" attribute with BS JS tooltips (example Watchlist)
    • - Increase loading times for the JS
    • + Faster response time to display hints

Solution 3.1

  • JS that looks at all the title attributes and displays them with the BS JS tooltips (Suggested by Enygma)

Proposals

Current

before.png

Proposal 1: JS Tooltips

  • The current HTML "title" attributes have a delay that is browser dependant
  • If we want to make the tooltip appear faster we can use the Bootstrap Tooltips

Proposal 2: Labeled actions

  • Provide label for the critical actions "Edit" and "Create"
  • Combine "Page actions" and "More actions", but make them more explicit by providing categories description

Proposal 3: Use Labels instead of Icons

Proposal 4: Icons with background

Voting

We held a multiple channels voting for this issue: 

  1. Devs Mailinglist (6 votes)
    P2: 3 votes (50%)
    P4: 3 votes (50%)

  2. Users Mailinglist (8 votes)
    P2: 3 votes (37.5%)
    P4: 5 votes (62.5%)

  3. Open Source Designers (9 votes)
    P2: 8 votes (88.9%)
    P4: 1 vote (11.1%)

  4. XWiki SAS (19 votes)
    P2: 15 votes (83.3%)
    P4: 3 votes (16.7%)

  5. Total (42 votes)
    P2: 65%
    P4: 35%


 

Tags:
Created by Ecaterina Moraru (Valica) on 2017/03/30 09:42
    

Get Connected