Update iconography and UI

Daniel Pettet 8 years ago updated by Bjorn Stabell 3 years ago 2
I'll focus on the main tab area (common functions) to keep things simple...

  • chrome window icon is actually chromium?
  • '-' and '+' is too small/micro
    Also, the hierarchical lines are not really needed because you have nice indentation... reduce the clutter!
  • I didn't realise the edge of the 'button tag' is also a button. It is also a very useful button once you find it. It allows for collapsing a root node in a tree. It is also a toggle so it's visual state should also update (which it doesn't). I suggest sticking to the '-+' concept in this case as it is a 1:1 version of clicking the same icon on the far left.
    Further, the placement is inconsistent. You are hiding button options depending on the state of various tabs/nodes. This slows down the user experience because you have to move the mouse left and right. A better solution would be to use a disabled button state and therefore keep consistent layout and spacing of the interactive elements.
  • A green cross is simply confusing. We are programmed to see a cross as delete and green to mean something good/safe. My brain has a micro flip out when I have to click that thing. It is hard to find something that fits though. I just played with it more and really what happens is the step before deleting that I would call "Disabled". So one disables and then deletes. Considering you no longer show the green X when a tab/window is disabled, why not simply leverage the trash icon better. The first click of the (gray) trash icon is to disable. The second click (on the now red trash icon) is to delete. This is common in iOS (2 step delete process). You don't have to avoid accidental deletions because you have 2 steps.
    An alternative might be to replace the green X with a checkbox. Checkboxes signal on/off states which is also a good fit.
I can see you've put a lot of time into various concepts and interface challenges. I hope I haven't offended you with these suggestions. I've had my fair share of UI stuff ups... I'm more of a programmer than a designer so some ideas suggested might be more computer friendly than human friendly. It's always good to get a second opinion if you can.
Well, after reading everything that you wrote i must say that i must agree with everything.

- The dot button is really somewhat "hidden"
- Mode without "wires" really reduce visual clutter (i tried this, it's looks really cool, and future version will contain such theme, but actual use WITH wires is more usable, as it is the drop target, maybe worth to make them just  less visible by default, or show only on drag)
- 2 steps delete process - interesting.....

Well, all of this feedback I really appreciate. Through what to do with all of this i meantime not very sure. There tons of such small tasks that must be done, and many of them have much higher priority and really critical.

Thank you anyway.

If you want more users, then I suggest perhaps improving the UI will attract a lot more people than adding more features; the extension already has a ton of features.  Here are my additions to the UI thread:

Since this is a Chrome extension, it would be great if it blended in better with Chrome by following more of Google's Material Design - colors, icons, etc - and for the UI elements to "blend in" so that the actual content, the tab names & icons could stand out more.
Here are some more specific UI suggestions:

1) Use colors & icons that fit with Material Design, so it fits in with the rest of Chrome.  The current theme screams “gamer" :)

2) It'd look nicer if the tab-qty-# was de-emphasized a lot and the titles were left-aligned instead of flowing after the tab-qty-#, perhaps putting the tab-qty-# after the title (see screenshot).

3) Perhaps hide the window scroll indicator if not needed.

4) Perhaps just use bolding of text to show active mode.

If it was possible to contribute themes, I'm sure someone would.

I’ve attached an example mockup.