Page MenuHomePhabricator

Minor UX improvements for header component on Refreshed skin
Open, Stalled, NormalPublic

Description

The header looks great, but I think the UX part could be improved by just changing some minor things. I would make a pull request but UX is subjective and is better when there's user feedback (because that's the point of UX) and discussion, so thus an issue has spawned!

  1. Search
    • The search box's placeholder text color is around `#eee`` while the background is `#fff`` (white), and not only that the typeface is very thin. The font weight should be bold and with a darker text color.
    • *possibly* minor issue: Since the search box is smaller compared to most of the other stuff on the other page and all the things on the header are white, it should contain a magnifying glass icon so it's more noticeable. Plus not all users know pressing enter is an option.
  1. Drop down menus
  2. Animations on the drop down menu aren't being used correctly. Instead of fading in on click and out, it should just be a slide from the top to bottom position, and bottom to top position when clicked out. Example: http://callmenick.com/post/slide-down-menu-with-jquery-and-css
  3. When clicking on button that triggers a drop down menu, the other drop down menus should close to avoid overlap and cluttering.
  4. The names "Brickipedia" and "Brickimedia" are too similar, and their logos are similar which can lead to a miss-click to the wrong site. Their logos are also very similar but...
    • The problem is: The logos and name have lasted for so long that they're ingrained into the user, so changing it would take time to rebuild recognition between the logo and the user.
    • Possible solution: Change position between "Brickipedia" and "Brickimedia" on the drop down list so they aren't as close to each other and will lead to less confusion.
  5. The text on the sub-items of the list are too squished together, which decreases readability and increases miss-clicks, so increase the margin between them
  6. Clicking on the drop down menu box is possible, but the sub-menu item boxes aren't clickable and only clickable via the text. They should be `displayed`` as `blocks` (`display:block;``)
  7. Close drop down menu after clicking outside of it (suggestion by George Barnick)

Original author: Codynguyen1116
Orginal date: January 11th, 2016
Original title: Improve header UX
Original ticket: https://github.com/Brickimedia/brickimedia/issues/434

Event Timeline

Restricted Application added a subscriber: Zppix. · View Herald TranscriptMay 29 2016, 7:32 PM
SamanthaNguyen triaged this task as Low priority.
SamanthaNguyen moved this task from Backlog to Feedback / Suggestions on the Refreshed board.
SamanthaNguyen moved this task from Backlog to Refreshed on the Brickimedia board.May 29 2016, 7:39 PM
MacFan4000 changed the task status from Open to Stalled.Jul 11 2016, 4:49 PM
MacFan4000 raised the priority of this task from Low to Normal.
MacFan4000 added a subscriber: MacFan4000.
MacFan4000 removed a subscriber: Zppix.Jul 11 2016, 5:50 PM
MacFan4000 updated the task description. (Show Details)Aug 13 2016, 5:21 PM
MacFan4000 updated the task description. (Show Details)

That task hasn't been done yet, please dont' close it yet, thank you. :)

SamanthaNguyen removed SamanthaNguyen as the assignee of this task.Jun 30 2018, 8:50 PM
SamanthaNguyen removed a subscriber: SamanthaNguyen.
MtMNC added a subscriber: MtMNC.Jul 15 2018, 2:55 AM

There's potential overlap with T134851 if we decide to completely re-design the dropdown menus without JS.