Home Forums Feature Wish List Icon layout is a mess … here are some easy fixes

Viewing 4 reply threads
  • Author
    Posts
    • ValZho
      Participant
      Post count: 8

      CalendarBudget Icon Fixes

      As you can see in the linked image, the placement of the icons makes readability a nightmare — or at least annoying; it’s the alignment of the text that makes everything such a pain to read/parse/scan.

      Here are some pretty easy steps you can do to make the layout MUCH better.

      • Move the recurring icon over to the div containing the amount … i.e., prefix the amount with the recurring symbol
      • ALL items should have a complete/incomplete icon — use far fa-circle for incomplete items. This will insure that the name of each item aligns properly. Alternately, you could use a blank spacer the exact width of the check-circle.
      • Move the notes icon to after the item name, change it from far to fas so that it stands out from the text better, and be sure to move the margin from the right to the left.
      • Set the opacity on all of the icons to 0.8 — still legible, but it makes sure the text stands out just a little bit more. On unselected category items (black text on white), the icon opacity should be set to 0.3.
    • Eric Poulin
      Keymaster
      Post count: 372

      Love the suggestions. We made some updates based on this feedback.
      Thanks!

    • ValZho
      Participant
      Post count: 8

      I’m SUPER happy with the improvements you guys have made, but I would follow up with two points:

      1. The notes icon should be associated with the label (it’s a descriptor) not the amount. Really, notes are just a continuation of the title so having the icon appear at the END of the title (instead of in front of the amount) makes WAY more sense. I had a hard time finding where you guys had put it once I realized these changes were in place (since I don’t have that many items with notes).

      2. The incomplete icon should NOT be a check mark grayed out or otherwise — this is unclear, mixed-message interface. Either leave it as an empty spacer, or better yet, switch to the empty circle icon as I recommended. I didn’t even notice the change until I tried to remove the completed icon on an item and ended up adding and removing it several times thinking there was a glitch/bug before realizing you guys had implemented some of my suggestions. I imagine there will be plenty of other users out there with the same annoyance, and the text (icon) is just too small in this instance for such a subtle difference to register effectively.

    • Eric Poulin
      Keymaster
      Post count: 372

      Good call on the empty circle, I missed that. We’ll do that. We tried a space, but on days where nothing is marked as complete, it just looks like an error.
      As for the note being prepended to the amount, we tried a number of scenarios. While you’re right that semantically it makes more sense with the title, the usability experience is awful that way. When the title of the transaction is longer than the available space for the day cell, the notes icon would then be hidden. Even if you have the auto-expand on mouseover turned on, you still don’t know there’s a not there until you mouseover.
      Also since the lengths of transactions vary wildly, it not an ideal user experience to need to move the mouse from left to right so much to find the notes icon at the end of the title.
      With the note in a much less variable position, prepended to the amount, it’s much easier to see and use at a glance.

    • Eric Poulin
      Keymaster
      Post count: 372

      Now that’s it’s there and I’m using it, I think I also want to make the mark as complete clickable with left-mouse, rather than always requiring to right-click. I could change the cursor slightly to indicate there is a difference.
      Thoughts?

Viewing 4 reply threads
  • You must be logged in to reply to this topic.