I love the no-UI approach! Here's a case for some UI. #246
Replies: 16 comments
-
|
your post touches on lots of feels i have and things i've reviewed many times. i really appreciate how much time you took to make this, your thoughts are excellently articulated, and i value your input and want you to help influence this tool! "panels" would be nice, i agree. it's a "standard" in design tools. BUT, i dont think those are simple, or elegant, and if i had built them into visbug, we'd have like 20% of the features we do now.. they're tons of baggage.. BUT (lol), i do want them eventually, at least in some form. a current thought i have is that panels would only show up contextually (worth investigating but i have doubts), because showing people "the world" with panels is not approachable by beginners either. showing webflow here (which i think is heading towards a nice type of product) but is already in panel hell:
also, i think panels would be best placed into the devtools area (see #205) where they'd sit with other panels. there's lots to explore here, and getting the UI's all synced up is no small feat. part of visbug's goal is to make "some stuff easy" not everything.. like, i've found, that the only way to make something simple is to do less. so, since it doesnt do everything yet that a designer might want, i'm hoping that since "some stuff" was easy in the DOM, maybe one could "check out the elements panel again and try some more advanced modifications." right, all the power is there if one is willing to ramp up.. so how much of that already existing functionality do we want to recreate in a more designer familiar way? i dunno? some, lots, all of it? needs explored technically and researched for UX. another, and one of the biggest, challenges of panels too is reflecting a multi-selection. VisBug can do operations on multiple selections, in a way that design tools don't (i actually hope what i did inspires some design tools, there's very interesting and powerful use cases for this pattern). here's a scenario to help paint the issue, as well as i'll point out a wack design choice that lives in visbug today:
That's because, my tool isnt ready to reflect the individual colors of the multi-selected elements. So, the design challenge with panels can be reduced to:
That make sense? love to hear thoughts 🤓 The design tab PR is probably the best place to put panels, but i want to think panels out more before hacking on them. i truly do see them as a really big effort. i also question the ROI on a panels feature... i def understand the value right, but front my current perspective, it's a lot of hours of work, for a potentially "nice to have" ux flow. i dunno, i'm not that pessimistic about it, but i do like challenging beliefs so it strengthens what i think i know! Here's another quick ux flow that's fun in visbug and not possible in traditional tools:
in a traditional tool, you can only pick a new font size, which is then mass applied to the selection. i believe that's due to the limiting nature of the panel. how could that same workflow be visual with panels? how could you show each selected elements font styles and offer mass apply panels and also contextual panels? i believe both use cases are needed, but right now in visbug, i'm leaning towards contextual manipulation as opposed to mass manipulation. i have more thoughts, and i'm glad you're starting the conversation! This is a design challenge woot! Who wants to join? |
Beta Was this translation helpful? Give feedback.
-
|
I totally hear you on UI panels being a massive time commitment. Code tools take waaay more time to abstract into easy UIs. Also, you make a good point that there's no super-obvious way to show multi-selection states. I've sketched out a quick idea that might be a helpful midpoint between learnability and maintaining simplicity. Of course, I could see there being deeper controls in a devtools panel, and that might be the real thing to drive towards. But, here's one possibility. Potential near fix to the "hard to learn controls" problemMy biggest problems boils down to wishing I could see my options, while I perform a task. Potentially, this would be solvable with a little "tooltip bar."
This could either have just action names (above), or possibly it could potentially also have style values (below)
It would persist until a user specifically escaped out of it. Ideally, it would show responses when a user inputs actions – because at first, it's hard to tell if my arrow keys are even being logged, if an item's color doesn't change quickly and I don't have a slider UI to see.
Handling different values on multi-selectIt's awesome that I can increment different values at the same time. If there were a slider / number input field, this could potentially just gray out, and show
Longer term, more-typical UI might still be helpful...but for me, something like this might solve the biggest problems, without any too majorly complicated. |
Beta Was this translation helpful? Give feedback.
-
|
nice, that's a very neat idea. it merges the feature requests for toasts and panels kinda into 1 subtle ui zone. def an idea to explore! nice job! |
Beta Was this translation helpful? Give feedback.
-
|
¯_(ツ)_/¯ Hope it's helpful! Obviously, there are other ways to address the problem, but I found myself wishing for something somewhat like that. |
Beta Was this translation helpful? Give feedback.
-
|
@thundernixon curious what you think or what you would do with the idea or space that #205 can unlock? |
Beta Was this translation helpful? Give feedback.
-
|
@thundernixon has some very neat ideas! |
Beta Was this translation helpful? Give feedback.
-
It's super exciting, but I haven't thought about it that much, just yet! Would you want feedback/comments in that PR, or in this issue thread? |
Beta Was this translation helpful? Give feedback.
-
|
i still think about this frequently! about your designs, about what folks need, about what's out there, etc. today, i stumbled upon a soon to be deprecated feature of safari, the visual styles editor.
what i want to ask this group/thread, is why do we feel this failed? it looks like sketch in the browser (very literally, which could be part of the problem?). it's all the panels we want in visbug, today, in safari. what about this turns you off so fast (if you're turned off by it)? very curious, cuz tons of work went into that, and it's going to be thrown away. |
Beta Was this translation helpful? Give feedback.
-
|
Woah! I had never heard of that. It appears to already be out of the version of Safari I have. If I had to guess, I think probably the reasons it failed are:
Of course, there are other design issues that aren't helping it:
I remember an early version of the app Coda having a similar panel for creating CSS styles, visually. This went out of favor, probably because many people found it simpler and more elegant to just code with actual CSS. There may be a blog post, somewhere, about why Panic software made the choice to move away from this approach. |
Beta Was this translation helpful? Give feedback.
-
|
lovely response!
then we gotta go look at webflow or any of the others coming out with panels now. and what are they trying to do so that it wont turn into these safari tools? most of them are honestly overwhelming when i glance. though, just like most tools like that, eventually the condensed utility can be nice? no design tool has really been able to "simplify" everything, but i really like your examples where they were specialty utils (color picker, font picker). maybe there's more here? maybe we make really interesting specialized panels/gui's for microinteractions? you comped out what i've assumed was the strongest strategy, leaning into it's modality. mimicking the keyboard. how could mouse get something that was more mouse convenient? i'd say sliders or dragging, but personally find them hard to be precise with and end up typing a value all the time. maybe a slider that was stepped based on margins/padding/whatever from the document? i'm going to keep thinking this out! watch what happens a little.. i may riff on something like what you have, but i also may riff more on the original 2nd screen idea too (see comps at #205). how could we make picking "space" more specialized? what has the color picker done to help make color picking easy, and can we port ideas to flexbox, margin, etc? 🤔 |
Beta Was this translation helpful? Give feedback.
-
This could be really interesting! There could possibly be some kind of global "unit" selection, and all sliders could step to that. So, the user could make everything go in 4, 8, 1, 16, etc. Probably, this would need a simple override, too.
A color picker is an exception UI pattern because it manages to fit something quite complex into a relatively straightforward selection tool. One thing excluded from my earlier comp and also from the safari panels is a visual indication of what margin vs padding are. There are tons of very specialized terms in CSS, and early on, it's pretty hard to instantly understand differences between margin concepts like and padding, and harder still to get how they interact with
|
Beta Was this translation helpful? Give feedback.
-
|
If you haven't seen it before, the Font Playground at play.typedetail.com/ has some amazing contextual typographic controls. Different fonts allow different variable axes to be controlled, and it's super cool to change an x-height by dragging it! Not all of the fonts have these special options, but try Dunbar for the x-height, and Fit for the widths!
|
Beta Was this translation helpful? Give feedback.
-
|
that is very inspiring! love it, and def love how much detail was spent giving power to the features without overwhelming them. plus, offering tangible controls, plus sliders, plus field for direct entry, they've got everyone covered! very good example of atomic, specialized and contextual controls for a single task. i made this demo for a css lib i made which writes the code when you use the pathfinder: https://argyleink.github.io/ragrid. i'm curious if we can make this better too. like, overlay flex alignment controls, merge the pathfinder with contextual controls. lastly, i'm not sure how multiselect would work with atomic specialized contextual controls. could be values just i'm hoping that visbug's modal mentality helps unlock some of the confusing or overwhelming scenarios. lots of design work to be done! |
Beta Was this translation helpful? Give feedback.
-
|
I just love kind whole-hearted humans 🤗 Very inspirational! Bravo to all |
Beta Was this translation helpful? Give feedback.
-
|
i have 2 prototypes i need to make to validate/invalidate some assumptions and hopes i have on this topic! will share when i have them, but i think they're going to be really cool/new/useful/familiar. |
Beta Was this translation helpful? Give feedback.
-
|
Check out this tweet for an interesting approach from figma https://twitter.com/paveluxd/status/1202960900031942656?s=19 |
Beta Was this translation helpful? Give feedback.
-
First off: VisBug is an amazing tool. Incredible work so far!
Second: in my personal opinion as a designer/developer, this would benefit from a more-familiar "design tool" UI approach. Why? What do I mean? Read on! (Sorry if this is an existing issue ... I couldn't find it).
The stated goal is to make this "simple." Right now it looks simple, but it's hard to learn.
On the readme, this states a goal which I think is awesome:
My first impressions of this tool is that it doesn't meet that goal yet (which is okay! and why I'm hoping to help by providing one perspective). For me, it's hard to learn, it requires a relatively deep amount of CSS understanding, and it's hard to feel like I know what I'm doing – even after reading the tooltips.
The no-UI interactions of visbug are really thoughtful, but I have to read instructions (hard) and remember instructions (harder!) to use whatever tool I just activated. Sometimes, the tools are so obvious, it's great – I can double-click to edit text! When it comes to using arrows and a modifier key to control something like hue, saturation, brightness, and opacity, it starts to take some time. Worse, I have to click open (or at least hover) the tooltip again to remind myself how to use it – I didn't realize until just now that I could activate a tool, click an object, then go back and hover the tool icon while pressing arrows, to try the commands as I read them. I end up finding that shifting colors with the available macOS color-picker is much faster, and allows me to get what I want more quickly.
Basically, it feels like you've created interactions for experts, but you haven't yet created interactions for newcomers.
A quick look at design tools
In Adobe design tools, basically every feature gets a control panel. They can be configured to hell and back, which admittedly makes them kind of hard to find and set up. But, you can drag around to select a color:
...and you can set font options in a font-picking panel:
Etcetera.
Sketch, to me (and I think most designers), is a much easier tool to learn. This is partly because it doesn't have as many features, but also partly because it does a better job of keeping you oriented with "where you are" in a document (with a very clear layers panel) and "what you can do" with control panels that reveal the options you have for whatever you have selected:
Taking a wider perspective, you could even consider Gmail a "design tool" for everyone. It tucks styling options into a panel, but gives options that a user can pick-and-choose.
Of course, as users repeat an action frequently (especially if they're efficiency-minded), they start to look for shortcuts and hotkeys. They learn to adjust object sizing, change font sizes, arrow around on options, and move around layers with hotkeys.
Developers tend to take this desire to make things efficient much further than most designers. Devs learn to quickly navigate around text without their mouse. They create scripts to automate things. Some even use Vim, which is a few steps beyond my tolerance for relying on key commands.
Right now, VisBug is a design tool that mostly uses a developer's interaction model. I think that to gain a wider audience, it will ultimately need to embrace some point-and-click interaction for newcomers, while also having the cool keyboard-only controls available for experts. I would love for there to be a "mini" mode that acts like the current version, but I also would really want a more "design tool" style of sidebar, for when users are first starting to edit webpages.
It's just my opinion. Hope there's something useful in there!
I heard @argyleink's interview on Toolsday, which is why I'm here. It's a super cool project, and I'm currently building something with some design friends, and I really hope to find a good use for this!
Probably, the interactive tutorials and videos mentioned in the interview will make this better for beginners. However, few things are more learnable than things that are familiar.
Beta Was this translation helpful? Give feedback.
All reactions