The main ideas stay the same as in old BTT. You select an app and configure triggers for it.
There can now be a maximum of three columns to configure these. The first column shows top level gestures and can contain groups. If a group is selected, the second column shows the triggers that have been added to that group.
The third column shows the actions assigned to the selected trigger.
The right side-bar shows the configuration options for the selected trigger or the selected action.
It's a very early stage concept. Currently done:
Implemented basic layouting system
Implemented display of apps and triggers
Implemented display of actions assigned to triggers
Started implementation of the right side-bar (this is the most complex task because it will be able to adapt to all actions and trigger settings)
Feedback always very welcome!
I plan to release a first beta by the end of the month. The new UI will be optional for a while.
However I’d like to mention:
Your mockup seems quite “spaced out” and groups aren’t clearly marked...
1: Reduce paddings here and there? Ultimatley try aim for finder’s column view as I’m very comfortable with that.
2: Note that in finder, Folders have a triangle-arrow on the left side of their cell to denote that it can be expanded. It’s hard to see Groups here! Also, can it handle groups within groups?
3: Maybe add a list view toggle or an advanced mode for us users as dragging and copying various toggles doesn’t seem efficient in this view as you can’t have two groups open at once.
4: In your right hand column, I suggest tabs that switch it between Action/Format, andd maybe both for advanced users, if putting Actions at the top and Format under (like a paragraph) will be too cramped. I suggest this to always show (not show only if a trigger is selected). It would also be great to have a list view with this side column too!
Take a look at Tumult Hype Pro’s sidebar layout, as it’s a great example of a “Pro” sidebar thing. They also have similar goals such as formatting and scripting of elements which this sidebar handles, so it’s worth to take a look.
5: (extra objective )
Allow handling, selection and editing of multiple items
Anyway, I like UI design and I’ve been doing it for a while now as a hobby, so this is just some feedback for you!
If you do include a list view toggle, I’d love it if you included that thing in my thread before:
Thanks for the feedback!
Yes 1&2 will definitely changed - these are currently just placeholder cells to show the basic concept. There won't be group inside of groups though.
) There won't be any list views. They are just too complicated, too much work and I think only very few users would ever use them. You will be able to select / copy / drag multiple items though :-).
) The right view will show the trigger config if a trigger is selected and the action configuration if an action is selected. If nothing is selected it may show some general tips & tricks. The Tumult Hype Pro side bar looks very much like how I envision the new BTT sidebar!
) it will be possible to select /copy /drag multiple items, but editing them will probably not be possible due to some constraints about how BTT works at the moment. (This may change in the future but will be even more work than creating a new UI :-))
I prefer the current list view + format column as I can see more information at a glance.
I mainly work in the touchbar section, and copying/pasting exact same buttons into groups so that they persist within the group would be a pain with a column view... I think.
Wait on second thought, it should be fine... But maybe keep the current list view as a switchable option, like finder's "switch view" segmented control for those who prefer it.
I'm confused as to how configurable actions will show up while trigger settings are shown. How would you configure actions?
I have a suggestion, but It's quite late so I can't mock it up and send it to you.
Great! I understand the implementation is a secondary focus, but it would be great if you got at least touchbar colour, padding, width and round corners working with multiple selections after you've done the main implementation..
Will there be groups inside groups for TouchBar settings? i will cry if there aren't...
I'd love to mockup some things in my free time (it's my hobby after all) including layouts for the format column (let's call it that because iWork does so) and maybe some new input icons as those seem old. Tell me if you want to design anything!
The old preferences will still be available for a while, but eventually will go away completely, including the old list view ;-).
However it will be possible to open the preferences window multiple times and it will allow drag & drop between them.
The third column shows all the actions that are assigned to a selected trigger. If you click on one of the actions it will show the configuration for that action. It's pretty simple and seems to work quite well so far
In the first version the Touch Bar setup will stay the same like currently, so no groups inside of groups. This may however change later when everything is stable
You need to be aware that 99,9% of users don't use any such advanced features. The current UI is too complicated for many of these users. Most users just use a few keyboard shortcuts, or gestures, some use a few Touch Bar customizations.
Ah, I see the actions column now. I think that design needs to change a bit since it looks like another 'trigger group' and is confusing. Maybe change it to a lighter shade of the format column, or add a speech bubble 'indent' from the actions to the trigger. Mockup soon if you want to see.
BTT currently accepts touchbar groups inside a touchbar group. It doesn't handle them very well, but it is an option. I use it quite a lot so I would be pretty upset if these disappear!
E.g. iTunes Main Group > Sync > Checkbox Clicker > [array of buttons]
Yes, I'm aware that this is the case. That's why I suggest switches that switch between these advanced modes v.s. the simple mode. I guess it's hard to imagine without a mockup.
The design looks much better with added action icons, better paddings etc. will post a new screenshot soon!
It's not hard to imagine an advanced mode, but it's a lot of work to implement and I really want to get away from having a simple and an advanced UI mode. I want a UI that works for all users (everything else is not really feasible because it's just too much work for me to maintain two UIs)
Ah damn, I thought I had disabled dragging groups inside of other groups. This was never intended to work . I'll think about that, I think I can display nested groups in the first column, but I don't want to add more than 3 columns in total.
(not sure what info is, it's a pretty old and dusty mockup. I think an edit menu would be good too, it would contain the add/delete functions seen currently in BTT's menubar.)
It would declutter the main BTT window but still be convenient since these actions aren't referred to as often.
Edit: i think info may contain stuff like release notes, but then again this would be under BetterTouchTool... See native OS X apps as examples
Yes, the menubar will be used much more with the new UI
I think this is good because the menubar is easily searchable using the macOS Help => Search feature.
The Finder column mode is nice, but I'm always thinking about the coding effort it needs to get something liks this working nicely (Apple has many people working on Finder and I think this is one of the most complicated UI features it has)
Apple has actually exposed a control to build something like Finder's column mode (NSBrowser) but unfortunately it hasn't been updated for years and still uses very old techniques ;-(
Well that's unfortunate.. I understand your strain.
Maybe, keep the current UI for a longer time till you can figure it out, however adding new widgets/triggers might be a double for a bit. I seriously need groups in groups, so well, yeh.
Thinking of building some apps myself, but i'm not that strong with code and highschool is busy so, maybe not just yet. I do understand that coding is quite annoying though, so i'm with you!
Good luck on the updates, and keep the great work up!
Hope to give you some ideas through mockups soon.
Yup I definitely recommend anybody interested in UX/UI design to try to implement a UI by yourself. It makes a lot of sense to understand the inner workings behind some UI concepts.
The old UI will definitely stay until everything that worked before also works in the new UI
Edit: I've actually done so, but only baby tasks such as codeless websites. I make themes osu, a rhythm game and they seem pretty hot. some 25,600+ downloads x2 (different themes)
Here's where the other half of my hobby time goes: https://osu.ppy.sh/forum/t/504196/
Not sure if you understand it all, but it's basically 'redesigning the game'. Check out the review under the 'screenshots' box if you have some free time and you're interested
Update: making good progress, still a lot of work . I hope I can keep my end of October deadline for a first alpha.
The basic frame now works correctly. I'm now starting to implement the actual functionality and design. The first two columns already work more or less Column 3-5 are still only mock ups but I'll get to them in the coming days.
Great work! Looks good, but I suggest you add translucency to the sidebar (as normal) instead of the toolbar at the top. It's a kind of jarring change from system windows (finder, preview, safari etc) so, either remove (because the app icons may become an issue) or make that opaque instead of transparent.
Talking about transparency placement, It would be nice if the bottom "action bar" was transparent through to the scrollable content but not the desktop. Apply the same with the toolbar.
I feel like the columns should have some kind of title, like the original mockup. Nice change to the actions column, though.
My other ideas are best described visually through my own mockups (coming soon)...
Anyway, I guess aesthetics come after 'main function', but it's good to consider since rewriting code after a design change is annoying.
I tried translucent side bars but it didn't look good. They give too little contrast to the middle columns. I think that's the reason why many third party apps now use blue / dark side bars when using a light theme (e.g 1password, spark)
Good point.
There is a dark-translucency, otherwise replace the top translucency with one that's translucent through to the scrollable containers but not through to the desktop (like safari).
It's just more 'inline' with the system and feels "less awkward"
)
. I'll think about that, I think I can display nested groups in the first column, but I don't want to add more than 3 columns in total.
