Mails

Forum discussion on this topic:

Description

Table of Contents 

• • # Current Document Footer
    • Like button
      • States
      • Visual Issues
      • Writing Issues
    • Tags
      • Modes
      • Functionality Issues
    • Author
  • # Revamped Document Footer
    • Like button changes
    • Tags changes
    • Creator changes
    • General changes

# Current Document Footer

Scenario 1: No like, no tags

Scenario 2: Likes and tags present

Like button

States

Visual Issues

The idea of a 2 state button is to have an "initial state" and a "completed state". This can be vizualized like:

• initial = not started = empty
• completed = finalized = full

If State 1 is the initial state, its button shouldn't feel like it's already filled. The full blue of State 1 gives that impression especially when you look at State 2.

It's almost like they should've been reversed.

But we can't just reverse them because we'd still have a problem with the coloring of the heart that actually respects what I've said. State 1 has an white heart (an empty heart) and state 2 has a black heart (full heart). In theory the icon respects the main rules of a 2 state button, but its background doesn't support it.

Writing Issues

While the tooltip explains quite well what the button does, I think we can improve it.

Tags

Modes

Functionality Issues

Tags could very much serve as subcategories in a big wiki and as basic project management statuses...

...yet they feel very unimportant at the end of the document without any emphasis on them.

I will make the assumption that many people might just overlook them and rely solely on the search bar to find their stuff when in reality it would be much easier to find stuff that has a certain subcategory (if you know its subcategory).

By this, I just say it's necessary for them to feel more important, maybe a bit more like buttons that bring a certain actionability with them. 

Moreover, the add button is barely visible and very small.

Author

• Does it matter who the author and when specifically that page was created if multiple people review, edit, copy, update it? 
• We should rather promote the collaboration and the humane part of knowledge.

# Revamped Document Footer

Like button changes

• No background, only outlined icon
• The icon is blue in all states so it feels clickable because of the primary color
• When clicked, the heart icon becomes full.
• Because it doesn't have a background, the icon can be bigger, so it's more visible
• Font as big as the body text
• Another idea: We can add the word "likes" after the number if it makes the button more clear.
• Tooltip improvements:
  • tooltip for state 1: Click to like this page. 10 other people already liked it!
    • I think it's shorter, it's got more personality, it invites the user to join the other 10 people.
    • This does require conditional rendering. For 1 or 0 people the message would sound weird so we change it to: Click to like this page. 1 person already liked it!
  • tooltip for state 2: Click to unlike this page. Current number of likes: 11.
    • slightly shorter, doesn't repeat words

Tags changes

• Tags have a hashtag symbol and the "+ Add tag" button before them, so they don't need the "Tags:" label before them
• We have a clear action button for tags, the "+ Add tag" button, big enough, explained and colored in the primary color
• Each tag seems like a button but does not ocupy as much space as a button
• We have a few default tags that the user can choose from, like:
  • #done - this tag would help put all done projects and tasks in the same subcategory. These would be the pages that would be most likely to get archived or deleted each few years, making the process of cleaning up much easier.
  • #in progress 
  • #to improve 
  • #to update - if anyone stumbles an outdated page, they can easily mark it for update
  • Because these tags are very close to the Comments section it makes feedback and progress tracking much easier for the reviewer.
• Each of these default tags should have special colors to be easy to spot. The colors would be based on the info, warning, success and error boxes' colors.
• The modal that appears when clicking on the Add tag button would:
  • have softer shadows
  • feature an x icon button to close the modal
  • suggest the default tags
  • have an Add button (primary color) in the interior of the input field (it works in the exterior too, I just think it seems more like a search bar when you put the button in the input field)
  • make the initial "+ Add tag" button (from above the modal) gray so the new button has all the attention

Creator changes

To make better use of the space we could have a line-up of:

• the first 5 people that documented this page
• the last 5 people that worked on this page

See the image above for the vizualization.

Of course, there may still be a lot of cases in which more than 5 people worked on a single page. That's why we add a linked "+ 5 people" which, when clicked, redirects to the History Page (or somewhere else if we have a more fitting space).

Documented by works much better than Created by because it enforces the idea of collaboration and knowledge.

Hovering on one of the images will tell you the name of the person

On this ocasion we could revamp avatar images, by making them round.

General changes

• To have a clear separation between the footer and the main content, we could multiply the white space between them by 1.5x - 2x 
• Have the font size equal to the body size