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: 13

      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: 371

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

    • ValZho
      Participant
      Post count: 13

      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: 371

      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: 371

      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?

      • ValZho
        Participant
        Post count: 13

        That absolutely makes sense regarding the note, and it sounds like you made the right decision.

        Man … making that completed left-clickable makes SO much sense; I would love that!

        This totally isn’t a big deal, but maybe in that case consider switching it to a square instead of a circle since it is mimicking a checkbox and not a radio button in terms of functionality? Just an idea, but I think a case could be made for either.

        ———

        I hesitate to bring this up, but I will throw it out there for your consideration…

        This is just based off of how I use CalendarBudget (so it may not work for everyone), but to me, if something has been completed it should be disassociated from the series — just the same as if you were to change the amount on a single instance or drag an instance to another date. And if that’s the case, then the complete/incomplete and the recurring icons should occupy the same space. In other words, you have 3 mutually exclusive states: incomplete, incomplete recurring, and complete.

        I discovered in making the mock-up for this thread that, as it is right now, you can mark a recurring item as complete/incomplete, and it still remains in the series, but that just feels wrong to me (maybe it’s just me?). Once a recurring item has been completed, shouldn’t its values be “frozen”? You don’t want to “edit all instances” on a recurring event and have it change the amount on an item in the past that has been marked as completed — that seems like it would wreak all kinds of havoc from an accounting perspective.

        To summarize, IF you decided to make it so that completed items are removed from recurring series, then the icon for completed would reflect the recurring status as well, e.g., circle-arrow, empty circle/square, or check. In addition, if you also make the completed icon clickable, you would have to put some kind of pop-up warning on recurring items since it would be too easy (from a UX perspective) to accidentally disassociate them from the series, e.g., “Marking this item complete will remove it from the series; are you sure you want to do that?”

        Anyway — thanks for all the work that has gone into CalendarBudget over the years. I can’t imagine what I would do without it at this point (probably build something like it for myself, but who wants to or has the time to do that!).

      • ValZho
        Participant
        Post count: 13

        Oh … and speaking specifically of cursors for the title and the completed icon. I think you have 2 options here:

        1. You could change the title cursor to “cell” and then the icon cursor to “pointer” … :shrugs:

        2. Keep “pointer” for both, but do a css hover state on the icon… something like “opacity: 1; text-shadow: 0 0 3px;” … something like that.

        EDIT: there are really 2 other options…

        3. leave it the way it is (not ideal)

        4. do both 1 and 2

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