📚 Planning

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.

#️⃣ 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

Is the author name necessary? I'm asking this in the context of large collaboration. 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
• We can add the word "likes" after the number if it makes the button more clear.

#️⃣ 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

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

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