Houdini UI Needs to Change

   16427   180   4
User Avatar
Member
357 posts
Joined: 6月 2013
Online
hMonkey
Really!? It's about layout and re-organisation, the colours are as always customisable, and somewhat irrelevant.

If that's the case why change the current colors? So standards are on the line, even if customizable. And we've gone from full shapes to an empty outline. So the proposed visual changes a lot of things.

hMonkey
Here's the quad node in action

Good one! Testing the theory! Will try it later in the day! Thanks
User Avatar
Member
112 posts
Joined: 10月 2018
Offline
probiner
And we've gone from full shapes to an empty outline. So the proposed visual changes a lot of things.

You mean ruffemotion's proposal? Anyway it's just a work in progress, I'm sure he'll fix it in the next version.

It's in everyone's best interest, especially SideFX's, to keep this thread open. Whether the feedback is positive or negative, it's still informative in many ways. Just sayin'
User Avatar
Member
103 posts
Joined: 1月 2018
Offline
@hMonkey

As for UI animation timeline, for D and E layers:




for E

instead of fixed "timeline control bar" layout i would preffer customizable toolbar, where you can drag and drop tools and dropdown list as you preffer. Personally instead of FPS i would chose animation layers dropdown. and so on. it would depend on animation task i am currently working on.

Having more than just one "timeline control bar" would be nice.




for D

id love to add as many keyframe bars as possible and chose how keyframes are represented/drawn (fe. as keyframe points or bazier curves or dope sheet and other non linear stuff with transitions layers betwean them) and stack them on top of each other.

and all those sets i could save as selection sets (fe. {Left Arm, Right Arm, Head} - set)
so i could stack animation elements iam currently working to reduce clicking and sorting elements out. id love to have something like this to work with:




also for each object theres animation layer/layers so.. its a lot of data to sort thru wich makes tons of clicks... thats why UI for animators must be very ergonomic and well design becouse its primary tool animators are using all the time.












.
Edited by oldteapot7 - 2024年9月8日 13:46:47

Attachments:
timeline.png (103.2 KB)
drag.gif (11.1 MB)
keyframes.jpg (21.9 KB)

User Avatar
Member
357 posts
Joined: 6月 2013
Online
hMonkey
probiner
And we've gone from full shapes to an empty outline. So the proposed visual changes a lot of things.

You mean ruffemotion's proposal?

Oh yes, I misunderstood what I answered too, I thought the mention of dark nodes on dark background was referencing his mockup still.

hMonkey
Here's the quad node in action

The horizontal split layout is one I suggested with a slight bias toward Display and Bypass, but from testing it out seems that might not work great when you're zoomed out, as you'll still be hitting that template flag often still... Hmm...

I did borrow some aspects from your shapes and tried to roll my own divisions and hierarchization of the flags area distribution. Attached in ZIP. I'll try some of these for a week to see how it goes.



On another subject, I know people that don't care about the flags, but I personally don't like to use row modifier keys (QWERT) for such a base case, of just roaming through nodes.

Another thing I've pointed out in another thread, is the fact there is no way to single click a node to both:
- Set the Display flag on it.
- Select it so its parameters show up in the Parameters tab. If you stick to the mouse it will always be a 2-click procedure. If you use the keyboard you can select the node with LMB and then press R; still two steps, but I guess muscle memory can help.



This is not always necessary, but when opening up scenes/setups/assets would greatly speed up stepping through the network to figure out what is going on.

Cheers
Edited by probiner - 2024年9月8日 16:30:15

Attachments:
NodeShapes.zip (4.1 KB)

User Avatar
Member
34 posts
Joined: 8月 2024
Offline
probiner
you should pay us for consultation you're going to waste

Why are you giving it away for free then? Wait until I pay you

But anyway, from what I’ve gathered so far, for a Houdini user, nodes are the main focus—everything else is secondary. In other words: you can tolerate a lot. By the way, I enjoyed the back-and-forth between you and hMonkey, and I’m definitely keeping an eye on it. I'll see if I can contribute anything to that later.

PHENOMDESIGN
Fake will know Real.

What a tease!

BrianHanke
can you share what you're using for your mockups? Specific colors, fonts, icons, etc.

The fonts are called Inter and JetBrains Mono. The colors you can pick with a color picker. The icons I can send you in DMs, just tell me which do you want. Though, are you sure you want to do anything before I come out with the V2 mockup?

hMonkey
It's in everyone's best interest, especially SideFX's, to keep this thread open. Whether the feedback is positive or negative, it's still informative in many ways. Just sayin'

That's exactly what I was thinking. We're just talking and, IMO, it's pretty interesting and potentially useful to someone at SideFX.

oldteapot7
instead of fixed "timeline control bar" layout i would preffer customizable toolbar, where you can drag and drop tools and dropdown list as you preffer.

Exactly, everything should be as customizable and intuitive as possible, easy, accessible, drag n droppable. By the way, nice to see another Affinity user.
Edited by ruffemotion - 2024年9月8日 23:31:18
User Avatar
Member
159 posts
Joined: 5月 2021
Offline
ruffemotion
What a tease!

The 'Fake know Real' is from a street art project I did. I also wore this on a shirt (one-of-one) as I presented my work in design critics in class. It is a long practice of standing on craft and knowing it overcomes the 'Fake'. The front reads 'I expect envy, not hate.'

I learned long ago how to be actually authentic. Not a knock-off. I do not know if they teach this? Maybe that is what data-driven design and research is about: Authenticity and Provenance.

For me, I analogize this a street art. There are some prolific "writers" here. Their tags are strong and their craft is evident. The street is this forum. The walls are where we grown knowledge for other to add to. To give space for styles and methods to grow.

CURRENT MOOD: https://on.soundcloud.com/VY8Ttaqig3GpY2pD8 [on.soundcloud.com] "In these Streets(Dream)" -- Jakim Jarel

Last time I designed a typeface it was all about being able to draw it in one stroke at once, and fast. Flow state.

Sometimes 'TOY' appears. 'TOY' It's originally an acronym for “tag over you” but it's essentially slang for someone doing graffiti who is inexperienced. Usually it implies them being overly cocky and have poor or mid graffiti skills.

The practice of using 'TOY' to go over insults is a long history of caring for the culture that is growing and a protective mechanism. I know that this community has grown a stronger understanding and stowed resources from this. That is Real knowing Fake.

The real I have brought, without disclosing IP, has been resources. The real others have brought are prototypes. The videos are about RealtalkOS. There was real discourse. I am using the TextureFeature SOP to make this real: https://www.sidefx.com/docs/houdini/nodes/sop/texturefeature.html [www.sidefx.com]

The fake..."speaks" for it's self, not Houdini users. Again, Fake will know Real, soon. The Real have already share a lot. Fake knows none of it...
Edited by PHENOMDESIGN - 2024年9月9日 03:17:09
Brave, Big-hearted Rebel
------
Design the Future, Now.
PHENOM DESIGN
------
Processing smarter, not harder on a M3 MAX 36GB
User Avatar
Member
112 posts
Joined: 10月 2018
Offline
Green: Toolbar/Panel dockable areas, viewport would differ as docked elements would have a bit of a hud-ish appearance and floating...
Magenta-ish: Toolbar & elements that should be turned into customizable and assignable per toolbar icons
Blue: possible relocations.

Toolbar & all the elements it could have, resizable in increments acessible via vertical burger on left of the toolbar via rmb, lmb docks/undocks and moves the toolbar. subpanels are tearable.

The placement and mechanics of pers/cam/cam lock, should really be better resolved imo.


Anyway, a rough sketch...

The more I mess with the node shapes the more I start to think that ether they are perfect as they are or there's some form of Stockholm syndrome going on...

Attachments:
Screenshot 29.png (2.4 MB)
Screenshot 30.png (137.4 KB)

User Avatar
Member
103 posts
Joined: 1月 2018
Offline
All icons, parameter pane elements like sliders, numeric fields and NEW animation bars with keyframes, bazier curves, and so on should be made using the same vector based technology as nodes are. As far as I know, they are currently bitmaps generated when Houdini is first launched.

Imagine the possibilities if icons were drawn as vector files (SVG) with hardware acceleration. It would not only improve speed and dynamic resizing but also offer far more visual feedback possibilities, such as animations or advanced highlights.

Imagine keyframe points behaving like NODES icons (the ones with flags, names, etc. donno how its called xd), where you could customize and set up your own shapes, bahave, and animations in certain states. That could be far more informative and ergonomic than just stiff bitmaps.

Imagine fast highlighting of rows and fields around individual keyframes so you don’t have to aim into small 3x3 pixel bitmap icons anymore xD. (larger hit targets)

You could do so much more with real vector icons and other UI elements than with hardcoded bitmaps like it is now. The UI could not only look better but also be more responsive, easier to customize, and easier to dynamically adjust and resize, and so on.

Just check community examples at: www.rive.app (or rive.app) As far as I understand, it's all based on vectors?

BTW, thanks to @PHENOMDESIGN for this link. I didn’t know about that Rive app and its possibilities, it is sooo cool!
Edited by oldteapot7 - 2024年9月9日 06:46:36

Attachments:
animations.gif (1.4 MB)

User Avatar
Member
357 posts
Joined: 6月 2013
Online
ruffemotion
Why are you giving it away for free then? Wait until I pay you

probiner
And people have limited good faith to provide, even if the topic interests them.

----
hMonkey
The more I mess with the node shapes the more I start to think that ether they are perfect as they are or there's some form of Stockholm syndrome going on...

Yes, it's easy to get into absurdity the more you go

But I think I found a functional solution to my annoyance with Display / Template flag common misclicks. Might not be pretty though... but, the Freeze flag is never activated on LMB, it requires Ctrl+RMB, more over, its seldom used, so it can just be next to the display, small, with no issue and the other side reserved fully for the Bypass and Template.

With this disposition I think it's unlikely one will click template when going for Display or click Display when setting up multiple templates. Or click anything else really when going for Display.



Made versions with the display on the left side to pay along with your idea of having the info on the right side.



And here a zoomed out comparison with the default shape for box:



Your suggestion to extend the hit areas a bit from the node still makes sense!

Cheers
Edited by probiner - 2024年9月9日 07:16:13

Attachments:
NodeShapesB.zip (4.0 KB)

User Avatar
Member
4623 posts
Joined: 2月 2012
Offline
I personally prefer the tri-flag round nodes I have been using since the introduction of custom node shapes


For me the freeze flag is unnecessary. I prefer to use the stash node that's a lot more versatile.
Senior FX TD @ Industrial Light & Magic
Get to the NEXT level in Houdini & VEX with Pragmatic VEX! [www.pragmatic-vfx.com]

youtube.com/@pragmaticvfx | patreon.com/animatrix | pragmaticvfx.gumroad.com
User Avatar
Member
357 posts
Joined: 6月 2013
Online
animatrix_
I personally prefer the tri-flag round nodes I have been using since the introduction of custom node shapes


For me the freeze flag is unnecessary. I prefer to use the stash node that's a lot more versatile.

Although the hit areas seem somewhat thin still, to me, your assessment goes along with what hMonke mentioned and for a tri setup your disposition makes total sense.

I do have to ask, how do you recognize someone froze a node if you receive the setup from someone else? (I know prolly rare)

But I guess even if you were to add it, it wouldn't be hard or a problem:


Aren't you forced to have more vertical space for the same amount of nodes? Other than that I see how it solves some of the points raised and looks overall balanced, visually.

Cheers
Edited by probiner - 2024年9月9日 08:56:47
User Avatar
Member
4623 posts
Joined: 2月 2012
Offline
probiner
Although the hit areas seem somewhat thin still, to me, your assessment goes along with what hMonke mentioned and for a tri setup your disposition makes total sense.

I do have to ask, how do you recognize someone froze a node if you receive the setup from someone else? (I know prolly rare)


When a node is locked, Houdini shows a badge for this state:


To me this is better than wasting a flag for this rarely used feature.

probiner
Aren't you forced to have more vertical space for the same amount of nodes? Other than that I see how it solves some of the points raised and looks overall balanced, visually.

Cheers

I guess you are right, that never bothered me though. I just find it pleasing overall so I guess it makes up for it

Reminds me of Naiad:

Senior FX TD @ Industrial Light & Magic
Get to the NEXT level in Houdini & VEX with Pragmatic VEX! [www.pragmatic-vfx.com]

youtube.com/@pragmaticvfx | patreon.com/animatrix | pragmaticvfx.gumroad.com
User Avatar
Member
325 posts
Joined: 11月 2013
Offline
Re the comments about the hit regions on the node buttons being easy to miss - I would really recommend using this script to get display/bypass/template buttons onto hot keys

https://youtu.be/jKVH3WaI9Rc?si=S--BZkr-tDRQHmuv [youtu.be]

It’s unfortunate that the above isn’t built in imo as it’s way more practical than holding a key and clicking. Simply getting the cursor “close enough” to a node and requiring no mouse clicks saves a lot of effort. It also makes the pop up radial menu redundant too (assuming node info window is also on a hot key).
Edited by antc - 2024年9月9日 15:17:07
User Avatar
Member
8 posts
Joined: 1月 2017
Offline
You can get much of this in Houdini already, especially the viewport stuff, thanks to Python viewer states.

I've been prototyping on a "Modo" modeling node that does just that—it's literally Modo's UI/interaction style, but implemented internally with Houdini node networks (mostly via the Compiled Block Invoke SOP).
User Avatar
Member
446 posts
Joined: 4月 2018
Offline
ruffemotion
Though, are you sure you want to do anything before I come out with the V2 mockup?

I'll wait!
Subscribe to my Patreon for the best CG tips, tricks and tutorials! https://patreon.com/bhgc [patreon.com]

Twitter: https://twitter.com/brianhanke [twitter.com]
Behance: https://www.behance.net/brianhanke/projects [www.behance.net]
User Avatar
Member
76 posts
Joined: 11月 2023
Offline
erichocean
I've been prototyping on a "Modo" modeling node that does just that—it's literally Modo's UI/interaction style, but implemented internally with Houdini node networks (mostly via the Compiled Block Invoke SOP).
Can we take a look at the result of your experiments?
User Avatar
Member
103 posts
Joined: 1月 2018
Offline
btw. when you select node blue circle shows around, also smaller magenta/pink one inside. I though thats for showing reference node flag, but when you select reference node flag another magenta/pink ring shows around!

So... is there any reason why 2 color ring shows when you select node?
Edited by oldteapot7 - 2024年9月9日 15:53:22

Attachments:
a.png (15.5 KB)

User Avatar
Member
357 posts
Joined: 6月 2013
Online
oldteapot7
btw. when you select node blue circle shows around, also smaller magenta/pink one inside. I though thats for showing reference node flag, but when you select reference node flag another magenta/pink ring shows around!

So... is there any reason why 2 color ring shows when you select node?


Display flag is actually 2 in one. Display and Render. If you Ctrl+click it in another node it becomes clear.
User Avatar
Member
112 posts
Joined: 10月 2018
Offline
oldteapot7
Imagine the possibilities if icons were drawn as vector files (SVG) with hardware acceleration. It would not only improve speed and dynamic resizing but also offer far more visual feedback possibilities, such as animations or advanced highlights.

Houdini is already using SVG, and you can customize each and almost every icon.
The only place where you should see animation in Houdini is in the viewport, not UI, it would be distracting and inefficient.

animatrix_
I personally prefer the tri-flag round nodes I have been using since the introduction of custom node shapes
I'm aware of those, and supercharged ui, however as you said latter it reminds you of Naiad, I think we should "evolve" the Houdini design elements, so for me it's too much ADSK "inspired" :/

antc
Re the comments about the hit regions on the node buttons being easy to miss - I would really recommend using this script to get display/bypass/template buttons onto hot keys

All we need now is a kiss-like function for nodes... SuperchargedUI does this, I think, and no the irony is not lost on me... But it's about mechanics vs visuals, mechanics yes, visuals no.
Another thing that this workarounds suggests is that few more things need to be resolved around working with nodes, even though Houdini's node system sits head and shoulders above the rest...
erichocean
You can get much of this in Houdini already, especially the viewport stuff, thanks to Python viewer states.

I've been prototyping on a "Modo" modeling node that does just that—it's literally Modo's UI/interaction style, but implemented internally with Houdini node networks (mostly via the Compiled Block Invoke SOP).
I guess we'll be finally getting upgraded LW mechanics into Houdini... Sry, couldn't resist
Mind posting more?

BrianHanke
ruffemotion
Though, are you sure you want to do anything before I come out with the V2 mockup?

I'll wait!
@ruffemotion
Keep in mind that the fonts to be used should be opensource/redistributable, the choice there is narrow for good UI fully resolved fonts, Houdini already switched font use a couple of times in recent years, I think.

animatrix_
When a node is locked, Houdini shows a badge for this state:

Now if we could improve readability and order of those (clear hierarchy of elements)... Node -> State -> Name -> Misc Info


All this is sort of pointing towards evolving houdini's ui/ux and making it similar if not exactly like USD, which it is already to some extent. So clear definition files, and hierarchy, both internally and on $HFS (currently it's all too messy). This way the community could pickup the slack regarding ui/ux and it would sit well with the open ended, modular, procedural, nature of Houdini. (hopefully that's all the buzz words)
Edited by hMonkey - 2024年9月10日 04:11:36
User Avatar
Member
112 posts
Joined: 10月 2018
Offline
It'd be interesting to unpack this, since it is the future ui and ux of houdini.


Here are some thoughts on this:

1. There's no clear hierarchy of elements it's just noise, no padding, no separation, etc... terrible readability.
2. Color coding does not work.
3. The colour scheme is quite hideous, why use coloured bacground!? We are working with colour, it should be neutral grey, but customisable.
4. Superfluous animations really contribute nothing.
5. Now for the biggest issue... toggle button! Why!? why show both states!? The readability is already screwed up by previous points, this just takes it over the top. What's wrong with regular ol' checkbox!? I clearly and uniformly shows one state, and there's a clear differentiation between what's on and off with one glance, now you have to pause orient yourself then find what you need then determine the state...

And that's why this thread must exist and will popup in one form or another from time to time.

If that's the future of houdini ui.. it's bleak. Info panel went from sensible to ridiculous.

Before anyone says you can customise it and turn off animations etc, I cant customise bad design and mechanics.


Anyway, just a few thoughts
Edited by hMonkey - 2024年9月10日 02:26:58

Attachments:
Screenshot 32.png (109.3 KB)

  • Quick Links