Tilix: Design improvements

Created on 8 Jun 2016  路  37Comments  路  Source: gnunn1/tilix

I really like the Terminix design in general - great job! There are a small number of changes that would be improvements in my opinion, though. Issues that I see:

  • The new session button uses the new tab icon, which is obviously confusing. I thought it was going to create a new terminal in the current session.
  • The counter in the session button overlaps the icon and looks a bit untidy.
  • To create a new terminal, you have to dig into a terminal's title and then "split". Creating a new terminal is one of the most common and important actions, so it should be prominent and easy to discover. Also, "split" doesn't seem like the right word to use here - you're not really splitting the terminal.
  • The terminal popover has a lot of submenus, which creates extra work for users, both to explore and find out what stuff does, but also to get to the settings and actions they want. Also, the "Terminal" submenu label is ambiguous.
  • Find is really useful, but it's a little buried!

Here are some suggestions for how to resolve some of these issues:

terminix-wireframes

The mockup makes adding terminals much more prominent and obvious, and also gives more attention to find. And it it flattens out the navigation in the terminal popover and reorganises it a bit.

enhancement

Most helpful comment

I've added the split/add buttons back to the context menu. If anyone has any issues about the UI just let me know, otherwise I'm pushing this out as a new version next week.

All 37 comments

@allanday Thanks very much for the input, it's greatly appreciated as my GUI design skills are somewhat limited. A couple of comments and questions on what you posted above:

  • One reason why the split buttons are in the terminal title bar is because they act on the terminal itself, i.e. the split is using that terminal as the root. I can certainly move this to the headerbar and I like that idea as I agree it cuts down on clicking and makes it more discoverable. However in this design it would be based on the currently focused terminal and I just need to confirm that my code is correctly considering the terminal focused when widgets other then the VTE itself is focused (i.e. find search box, popovers, etc)
  • The find button in the headerbar would act like your proposed add buttons, i.e. operate on the currently focused terminal since it is a per terminal feature. Are you intending for this to be a toggle in your design?
  • With respect to the session counter button, note that terminix is capable of using the Fedora patched VTE and reacting to notifications. When a notification is received it is also displayed on the sidebar button (purple circle on the left of the button) as per the image below, any thoughts on how to incorporate this in your design?

screenshot from 2016-06-08 14-50-28

  • I'm not in favour of the profile and encoding menu options being directly accessible rather then in sub-menus. These can potentially contain a long list of items and I need to keep the popover reasonably sized due to the X11 and popover issues where it can't exceed the window size. Also, you may not be aware of it but there is an option for the user to turn off the terminal titlebar completely. In this case the context menu gets all the options, including it's normal clipboard and link options, and becomes quite large.

One reason why the split buttons are in the terminal title bar is because they act on the terminal itself, i.e. the split is using that terminal as the root. I can certainly move this to the headerbar and I like that idea as I agree it cuts down on clicking and makes it more discoverable. However in this design it would be based on the currently focused terminal and I just need to confirm that my code is correctly considering the terminal focused when widgets other then the VTE itself is focused (i.e. find search box, popovers, etc)

That sounds good to me. I understand the logic behind the current UI, but such an important action really does need to be more visible.

The find button in the headerbar would act like your proposed add buttons, i.e. operate on the currently focused terminal since it is a per terminal feature. Are you intending for this to be a toggle in your design?

Ah yes, I hadn't thought of that. There are two options there, I suppose: 1. Have the find button in the header bar only act on the focused window (and have it toggle). 2. Put a find button in the terminal header, next to the minimize/maximize button.

With respect to the session counter button, note that terminix is capable of using the Fedora patched VTE and reacting to notifications. When a notification is received it is also displayed on the sidebar button (purple circle on the left of the button) as per the image below, any thoughts on how to incorporate this in your design?

Hmm, that's tricky. You could potentially change the colour of the button - subtly animate it to attract attention.

I'm not in favour of the profile and encoding menu options being directly accessible rather then in sub-menus. These can potentially contain a long list of items and I need to keep the popover reasonably sized due to the X11 and popover issues where it can't exceed the window size. Also, you may not be aware of it but there is an option for the user to turn off the terminal titlebar completely. In this case the context menu gets all the options, including it's normal clipboard and link options, and becomes quite large.

I thought you might say that about the profile and encoding submenus! That's certainly an issue. Just moving the items from the terminal submenu into the top level would be a good improvement.

That sounds good to me. I understand the logic behind the current UI, but such an important action really does need to be more visible.

What I dislike a bit about the proposed position is that it moves the buttons away from the place of action. Currently if I have two tiles, and I want to split one of them I just click into that tile (no matter if it is already focused or not) and select the action. If the buttons are always at the top I first have to check what my focused terminal is, maybe change focus intentionally and then click the button located somewhere completely else. I also might end up splitting the wrong terminal if I didn't realize it wasn't focused.

So yes, the change makes the actions more discoverable, which is good. But it also removes the connection to the tiles. And since I often work with around 5 tiles I can see myself getting confused by this.

Also note that the issue of giving focus first, then doing the split is also somewhat present when using keyboard shortcuts. But there is completely different, as my eyes can follow the focused terminal, and once I have focused the correct terminal I hit the keys. But using the mouse I first have to move to the terminal in question, then look for the buttons at a position completely out of context.

Maybe add the buttons to the top as proposed, but also keep them in the terminal menu? Or is that too confusing?

@phw Thanks for the reply to this, I was sort of getting at the same thing in my original reply but you expressed it much more eloquently.

The other potential option would be to pull them out of the terminal menu and put it directly into the terminal titlebar but I really want to avoid sticking buttons on the terminal titlebar if at all possible. I've played around with this previously and aesthetically it just makes things look way too busy once you get more then a few terminals going.

Maybe add the buttons to the top as proposed, but also keep them in the terminal menu? Or is that too confusing?

I agree that I think this is too confusing, I'm not a fan of having the UI replicate the same command in multiple places though I'm sure I've been guilty of doing this in some cases.

Thus from my perspective there's really only the two options, to summarize:

  • HeaderBar. Makes it more discoverable and cuts down a bit on always digging into the menu for splitting. Aesthetically I also like the look of it. The other pro is it reduces the size of the popover menu which allows the terminal menu to be pulled up as per @allanday design. The con is as you noted, it's not as clear where the split is going to occur. Enabling the option to dim unfocused terminals could help with this but I don't want to enable that by default.
  • Status Quo. Very clear what it is operating on but less discoverable. Aesthetically not quite as pleasing either IMHO.

I'm probably not going to be doing anything about this for a couple of weeks as I'm in the middle of working on some other features, however I'd be interested in hearing from users of Terminix on @allanday proposed design.

It is possible to add the buttons in the terminal titlebar and make them "focus sensitive", i.e. show them only if the terminal has keyboard focus or is under the pointer.

Another suggestion for dealing with the issue of the "new sessions" button, change the icon to a single "+" and apply the "linked" class together with the "show sidebar" icon. That way it would be more clear that it is about sessions.

@dsboger I like your idea for the add new session button, I'm already using the linked class in the find revealer and it gives a nice look. I'm not sure about the showing/hiding the buttons in the terminal on focus in/out. When I get to working on this I might POC some different approaches and see how it goes.

@allanday Can you send me those icons you are using in your design for add vertical/horizontal when you get a chance? I'm planning on doing some work on this over the upcoming weekend.

Oh, a design thread. Please consider adding text variant to cut-copy-paste context menus, as an addition or replacement for icons.

@allanday Can you send me those icons you are using in your design for add vertical/horizontal when you get a chance?

Sure! Where do you want me to send them?

@allanday I sent an e-mail tom your redhat address, just reply to that when you get a chance, thanks.

I've checked in some POC level code to enable to play around with @allanday design and see how it works for you. To try it, you need to enable the USE_ALTERNATE_UI flag in constants.d to true. My general opinion in my brief usage is that I do like it better then the previous design. Here is a screenshot showing what it looks like with that flag set:

screenshot from 2016-06-26 13-20-51

One thing to note in the image is that I haven't adjusted all of the UI (notably the terminal menu) yet to conform to the proposed design as I want to get some feedback first and make a decision about which way to go before I start undertaking more of these changes. Also, I'll update the icons once I get them from Allan.

Also, I'm not sure about the new session button, it's very convenient but visually awkward, I'm thinking about moving it into the hamburger menu.

Finally It's pretty obvious I can't make the proposed design an optional thing, supporting two UI styles would result in a lot of extra development overhead so it really needs to be one or the other. I'm definitely leaning towards implementing it fully but opinions always appreciated.

@whitebyte Thanks, I'll keep it in mind.

I'm trying the new design right now and I mostly like it. However, as the split and lookup buttons apply to the focused terminal, I think it is really necessary now to highlight more prominently what is the terminal with keyboard focus (like a "selected color" border, or something). Also, the "+" button could use the "list-add-symbolic" icon.

@dsboger I'm not sure a border would be very feasible due to the need to reserve space for it but let me think about ideas here. Also, have you tried enabling the Dim unfocused terminals option, it would give you the visual differentiation you are looking for.

I'll have a look at that icon shortly.

@gnunn1 I'm using the dimming option, but I enabled that myself. Maybe add dimming in the default profile?

I though of another possible way to give a hint as to what is gonna happen in the case of splitting: it could use a similar mechanism as the drag'n'drop visual hint, i.e. when hovering/focusing one of the split buttons, highlight the half of the currently focused terminal that will become the new terminal. A problem with this approach is it shares the same limitation of tooltips, i.e. the hover/focus action is not always available.

@dsboger I really like your hover idea, while I could re-use the drawing code from dragging to do this I might try a thin rectangle in the selection color to visually differentiate it from dragging

Another idea for adding new terminals: user "drags" a new terminal from the new terminal button and drops it wherever they wants. This can reuse most of the drag'n'drop code. The problem is that action can be a bit hard to discover.

I've updated the icons based on Allan's design with some help from Lapo in #gnome-design to convert it to symbolic. It currently looks as follows:

screenshot from 2016-06-29 10-46-17

@dsboger Dragging is an interesting concept, however I think it might be a bit too radical for now.

Unless anyone has any major issues to discuss, I'm going to remove that USE_ALTERNATE_UI flag and convert everything over to the Allan's design this weekend.

@gnunn1 minor suggestion for the icons: it would be more consistent to "flip" the vertical split icon, as the plus sign is in the wrong end, i.e. the new terminal is added in the lower part.

@dsboger I fixed the icon, thanks for the suggestion

I'm starting to work through this now so a couple more comments on this. First note that the git master will probably be somewhat unstable over the next few days as I don't have any doubt I'll probably break a few things along the way.

Changes that I'm planning on making are as follows:

  • The terminal split actions will be renamed to add actions and moved up to the session level (i.e. session-add-horizontal and session-add-vertical instead of terminal-split-horizontal and terminal-split-vertical)
  • I'll still draw the notification badge on the session button as per before, but it needs some fixing for the change in button size
  • Instead of drawing a shaded square to show where a terminal will snap to when dragging I'm going to change this a rectangle outline draw in the selection color. Depending on time I'll look at hooking this into the hover action for the add buttons as per @dsboger suggestion
  • I'm probably going to drop the icons for copy, paste and select all in the context menu and revert it back to text. Without the split buttons it looks a bit odd and I never warned up to them much. I think @whitebyte has the same sentiment but other opinions always welcome.

I'm probably going to drop the icons for copy, paste and select all in the context menu and revert it back to text. Without the split buttons it looks a bit odd and I never warned up to them much.

That gets a :+1: from me, to me I always had to take a second to think what action each button actually did.

It would be good to have the split buttons back in the context menu though (text or icons, I don't mind) as splitting when the cursor is at the bottom right of a large maximised window is a pain, moving all the way to the top left. Alternately I should just learn the keyboard shortcuts :smile:

One (very) minor issue I noticed on Ubuntu was that the top bar of the initial window looks cramped with the title because of the extra buttons.
terminix default_001
More of an Ubuntu theme issue than Terminix but thought I'd mention it.

@alexwhitman Unfortunately I don't think there isn't much I can do about the look in Ubuntu and Ambiance but if you have suggestions that work within the context of the new design let me know. Personally, I don't find it too bade myself though once the window size increases and the title moves towards the middle.

As for the context menu, no plans to add the split functions back into it due to the re-organization in the code. I moved the split capability out of the terminal (i.e. terminal.d) and into the session (session.d) and it really cleaned things up code wise IMHO. As a result, I'm loath to bring it back and re-introduce the events I used to have in terminal.d to request a split.

Just as an FYI for everyone, the work to implement the design is basically done other then @dsboger suggestion to preview highlight the split area when hovering over the buttons. I'll have a look at that next weekend. Here's a screenshot of the current look:

screenshot from 2016-07-03 09-38-03

@gnunn1 I tried the changes and sadly are awful. The removal of split terminals from context menu, makes you to either go all the way up to headerbar to open a new one (and I use Terminix always on max mode, so it is a long distance), or use shortcuts.

Not to mention that if you enable focus on hover, you cannot split a terminal where you want.

EDIT: I just mean the removal of extra options from context menu.

@alex285 Good point about the follow on focus option, I forgot about that one. I guess that's two votes for adding the split/ add options back to the context menu. I'll have a look at adjusting it this weekend.

Thanks as always for the feedback.

Just a note to myself, I'll need to add the find option back to the menus as well to fix follow on focus.

Wow, what a change! I love the session counter on the top-left. However, I preferred the splitter in the right-click menu because now, if I want to split a tile, I have to select it first and then to move the mouse to the top-left corner. A lot of actions added.

I've added the split/add buttons back to the context menu. If anyone has any issues about the UI just let me know, otherwise I'm pushing this out as a new version next week.

@gnunn1 Awesome! A small proposal is to remove the "Add" subtitle, because:

  1. It is redundant
  2. It feels like a menu item
  3. In lots of themes this title gives bugs, like being invisible

Another one is to somehow give some more width (bigger click area) on splitters buttons and perhaps make them just flat buttons. Not like super important, but it isn't pretty how it is now.

@alex285 I've removed the Add subtitle, screenshot example shown below. I can't do anything about the other requests though as that is controlled by GTK and the active theme.

screenshot from 2016-07-11 18-56-47

I'm closing this now as I think things are in a good place.

Thanks again everyone for the feedback and @allanday for the initial design work.

is that bash with the nice purple color for the layout?

or you are using something else?

@kunamashina That nice looking prompt is generated by powerline, not terminix.

https://github.com/powerline/powerline

Was this page helpful?
0 / 5 - 0 ratings

Related issues

alex285 picture alex285  路  3Comments

viniciusban picture viniciusban  路  4Comments

sliddjur picture sliddjur  路  3Comments

zsrinivas picture zsrinivas  路  4Comments

alalfakawma picture alalfakawma  路  4Comments