UX / UI Support

[justinvoorhees]

Hello - I am a Product Designer hopeful that is looking to offer UX support / redesign for the Settings / Statistics menus on spec. Without a way to send private messages I thought this would be the most appropriate place to start a conversation. Thoughts?

[Ishmaeel]

Sure, there's plenty room for improvement on the UI. I would gladly welcome any PRs and suggestions.

[justinvoorhees]

Great, I was able to make a decent amount of progress on the design this evening and I should have something worth presenting within the next few days. I this Issue page a good venue for updates? Perhaps there's another way you'd prefer to correspond?

[justinvoorhees]

UI redesign proposal:

Existing UI:

The redesign:

After some iterating here's what I have to present so far. This is by no means final and I am open to any suggestions you may have. The initial dropdown is fairly self explanatory, but notably I made all of the icons present - so there won't be any licensing issues there (the hamburger was fun). In an effort to improve usability on the Settings menu I've added more spacing to each section along with a single font and color theme to better unify the UI. You will also notice left-aligned inputs for a hopefully better user flow. This made the semantics a little confusing so I went ahead and added some tool tips (displayed below) along with all of the rewording. I was trying to keep it down to as few keywords as possible - "delay" and "junk website". Outside of this I did some brief exploring with alternatives to a few features - a junk list sub-menu, and a graphic range slider instead of the Schedule time inputs - I ended up choosing to keep the menu functionally the same in order to keep a potential update smooth and without forcing any back-end work. I don't currently have enough data to enable the statistics menu, so any work there will have to wait for now. Lastly, if we arrive at something you are satisfied with I would be happy to implement the design into HTML / CSS.

With all that being said I am looking forward to feedback on the design progress so far, and a thank you for the opportunity to work on this project.

[Ishmaeel]

Wonderful job. The redesign includes everything I would have wanted to do with the UI.

Alas, obligatory bikeshedding: I'm not a big fan of popups that are needlessly liberal with vertical space. I have been spending too much time with widescreen laptop screens with limited vertical resolutions (ex. 1366x768) where popup screens designed on larger screens simply do not fit the view. It's a frustrating experience everytime it happens. In that vein, I would keep the "day checkboxes" in a single line as it is now. Granted, the popup would still go into scrolling mode when the domain list grows big enough, but at least it won't look cramped right out the box if we do not waste so much space with the checkboxes.

Another thing: I generally try to avoid the term "click". I would replace every instance of the word with "visit". Not every visit is initiated by a click, and not everybody can click in the first place.

Thank you very much for the work. Looking forward to seeing it in the flesh HTML.

[justinvoorhees]

UI update:

Happy to hear you like it so far. With consideration towards your feedback I've done some more polishing, and barring any further revisions here's some final iterations:

01:

This one is the most straightforward, it simply addresses the feedback given and would be the easiest to implement.

02:

In 01 the horizontal length of the day checkboxes, while totally viable, was a bit bothersome to me. In this design I've condensed the day checkboxes into just one selection bar element, instead of 7 inputs. The main drawback here would be a bit more technical of an execution, but it could probably be done.

The default for the selection bar would be just like that of 01, where the user would "check" off each day. The interaction would go something like this:

03:

03 is an attempt to push the design into its fullest potential. Adding a range slider here would help efficiency by drastically reducing the number of interactions needed to set the times. While this would be a great thing to implement, giving respect to my time as a designer (and not an engineer), I am sadly not willing to have a go at implementing this element. This iteration is more of an exhibit than anything, but if you can find someone to implement this feature then by all means have at it.

Also, here's an updated Main Menu along with a reworded tool-tip: