I am pleased to announce some updates to the interface for moving around bullets in WorkFlowy.
Web and Desktop Apps
We bid farewell to the moving gray horizontal line and introduce a more modern drag-and-drop experience. You can now drag bullets around visually and place them exactly where you want them to go (provided that the new location is a valid destination). Try out these amazing new capabilities:
Drag a bullet one position to the right to indent it.
Drag a bullet directly under another bullet that has no children.
We also upgraded the behavior of some keyboard shortcuts related to moving.
We tweaked the behavior of the keyboard shortcuts to move a bullet up or down ( cmd/alt-shift-up and cmd/alt-shift-down).
We hope that you will find that the new behavior is more powerful and intuitive. If you feel otherwise please let us know!
Mobile Apps
The interface for moving still looks the same for now (the moving gray horizontal line lives on!)
Mobile is going to be a big focus for the rest of the year so expect to see continual improvements throughout the rest of 2017.
Update (10/11/17): Taking account of further feedback we undid some of the outdent changes. shift-tab now works the way it did before. Blog post title has changed to reflect the smaller scope of the changes.
Update (10/2/17): We got a lot of great feedback over the last few days and have taken your suggestions into consideration to improve the user experience. I hope that you find the new version we are releasing today to be snappier and more straightforward!
The behavior on the Chrome app is not the same as the Web and the Mac desktop app. The Chrome app does not have the gray bar so its behavior is different. Please update the Chrome so it is consistent with the other apps.
Thanks.
As of this morning, the grey bar is back again? Did I miss something?
Yep… looks like the gray bar is back again… much more intuitive visualizing where you’re moving stuff around –because other items don’t shift up and down as you drag your item to be re-positioned. Also, the duplicate/ copy function is working normally again. And the new drag powers are still there… so it’s all good.
Brilliant! The original solution was the best.
If it ain’t broke, don’t fix it 😀
Indeed! We did keep the ability to indent under items that have no children.
I was thinking while use the drop into feature, that it would nice to have a simple way to open up a bullet in case you need to burrow down into one to drop. Perhaps something as simple as hitting the plus or minus key while moving would do the trick. Just a thought. Love the new feature though.
I like this idea. In Mac’s Finder app, you can drag a file onto a folder, and if you hold it there for long enough, it opens the folder so you can either place it inside or burrow down further into another folder. Something like that would be useful, although I’d definitely make sure there’s a delay so that nodes don’t open just because you’ve dragged a node under it and hesitate for a moment as you think to yourself whether, yes, this is where I want to drop it. It’d be a fine line, but I think it’d be great.
The Android “cleanup” function of a moved bullet point into a parent as the first item on the list without opening the list, does not seem to be functioning since the last Android update. I greatly miss it. I
“I’m LOVING the little animation when you drag and drop a list into another 🙂” I am with Frank on this. It appears that the Android version has reverted back to the original way of handling the moving of bullet points. After getting used to the previous new functioning, now that it has been changed back, I miss the “clean up” effect as Frank described it. Either way,. WorkFlowy is great.
I have to say after working with the new draggable nodes, even with the new ghosting option, I don’t like the interaction with the existing nodes as much as the old system.
In case anyone can’t remember, the old move functionality made a small target ghost line as you drag, but *crucially* doesn’t “remove” the child nodes of the node you’re dragging:
https://www.youtube.com/watch?v=imUVGWglArQ
The new functionality has two effects which feel quite jarring:
1. the dragged node’s child nodes vanish
2. the following nodes (which could be one or many lines away) appear out of nowhere to “close the gap”
On a single item move, of course it’s not noticeable, but on larger nodes it’s disconcerting.
I could happily go back to the old way, but in the interest of moving the discussion forwards, perhaps this could be solved by some subtle animation to “close the gap”, in the same way that the zoom-in / zoom-out function works.
We greatly appreciate your insightful comments, Dave! Going to think about this one some more and see what we can come up with. One possibility is showing multiple lines instead of shrinking down to one. Another is the animation that you suggest. Whatever we do, it will go through more user feedback (including yours hopefully) before being released
What’s frustrating to me is that almost always in any app, when you start dragging an item, you don’t have to commit to its replacement until you drop it. Consistent with this model, there is usually (1) a visual cue of some kind that remains in the item’s previous/start-of-drag location (eg, a grayed-out version of the file icon) and (2) a visual cue of some kind to indicate where the item will be placed once you release it (eg, a dotted or gray box). Both of these cues are crucial because they give you peace of mind: if you decide not to move the item after all, you can easily find its original location; and if you are given a clear visual cue of what you are about to commit to (ie, its new location). These are pretty basic principles of the drag-and-drop (or item movement of any kind) micro-interaction.
I’d study other UIs before moving forward: Trello does a great job (note: they do #2 above but not #1 and that’s ok for them because their UI can never be as monstrously complex as WorkFlowy’s can (eg, you might be moving an item up 4 parents and down into that parent’s second child, so it’s extra important that you have a good idea of where you’re dragging your item from and to).
My humble suggestion is the following:
1) Click an item’s bullet point and move it to begin dragging (current behavior). When you do this, two things happen: (1) the item grays out significantly, and (2) another visual copy of the entire item appears to float above the outline (much like the bullet point currently does, but it’s the full item with an opaque background).
2) As you move the floating item around the outline, a gray box appears between existing items, indicating that if you release the mouse right now, this is where the item will drop. You can hover the item between items and the gray box will appear between them; or you can hover the item beneath an item (whether it has children or not, and whether it is expanded or not) and the gray box will appear indented underneath it, indicating that if you drop it there it will become a child of the item above it. Note: there are now three visual elements (where before step 1 there was only one): the current location of the item (grayed out), the dragged item (floating along with your cursor as you drag it around), and the gray box (indicating where the item will go once you drop it).
Bonus: if you move the item underneath a collapsed item, and you hold it there for a moment, the item will expand, allowing you to place the dragged item more precisely inside it.
3) You release your mouse, and three things happen: (1) the dragged item goes to where the gray box was at the time you released the mouse, (2) the gray box disappears, and (3) the grayed-out item (representing its original location) disappears. If you dropped the item inside a collapsed parent item, the dragged item also disappears (with a little animation indicating this, which is the current behavior).
I’m a UX designer, so I think hard about this kind of thing. 🙂 I know it can be super annoying to receive specific solution suggestions from users, so thanks for indulging this suggestion (if anything, I had fun thinking through it). But I hope that first paragraph was helpful as you think through this tough little micro-interaction. I think you guys will do a great job! I love WorkFlowy and love the work you all do!
jamiekimmitt, you say that “Either Jacob aka Jessi slipped this is unnoticed, or he just completely missed it, which is scary to think about.” I’m not quite sure what you mean by “slipped this is unnoticed”.
Oh, now that I think about it, you probably just made a mistake while attending to detail in your writing. I guess even the best of us make those once in a while. No worries.
I’m LOVING the little animation when you drag and drop a list into another 🙂
I love all the animations in Workflowy 🙂 like the exploding tags!
Don’t be lazy Matt. If you want to know what the problem is, just go try it out for yourself. Otherwise don’t worry about it. And I guess the vote stands 1:1 for the moment.
I stand with developer also. Cntrl plus x is cut operation and it should be used always with care. Anyhow i understand you have lost some data that will be recoverable i think in some backup so you will hopefully get back if you contact suppport.
I am dev my self and even i applied for the same job where this dev was hired. I can assure jessi has taken one of the great dev. I was reject even then i support him. None of product is perfect.
Anyways i have already suggested something like workflowy beta where features should be test before i wish jessi and his team goodluck for all efforts they are making.
Wasim, you were rejected most likely because you have no attention to detail. You should at least know the generally used CTRL-C CTRL-V etc shortcuts if you want to call yourself a developer. I can only imagine what your code must look like. And I’m not sure who Jessi is? I thought we were talking about Jacob? Attention to detail my friend. And you say that lost data “will be recoverable i think in some backup”. That.
Is. Hilarious.
Matt, I agree with your basic assessment, but clearly you haven’t thought through the potential problems. No offense, but I can’t take your opinion very seriously when you have so many unknown unknowns. And Jacob unfortunately is in the same situation you are. Were they not able to find a dev that had actually used WorkFlowy before? Maybe you guys should play around with the system a little more until you start bumping into its limitations. Then you’ll understand why this is such a potentially big problem for some people. It’s always nice to have a handle on the current feature set before messing with it.
And no one has even mentioned this new “feature”. It just silently slipped in, unnoticed by all, ready to destroy data. Some might hope it’s “maybe recoverable by a backup thing I think”. Others know that won’t be possible in all cases. Either Jacob aka Jessi slipped this is unnoticed, or he just completely missed it, which is scary to think about.
And it is a vote. Everything is a vote. People can vote with their money.
Anyway, you guys have fun with your misadventures. I’m on to something more reliable. Good luck.
(1) I did try it and it worked as expected, with a restore action.
(2) It’s ridiculous to say “too lazy” when you didn’t bother to describe the problem in the first place.
(3) I clearly do want to know what the problem is, since I asked.
(4) It’s not a vote.
(5) It if it vote, the majority is standing with the developer.
Please try to be constructive.
Jamie, No one has asked for your approval. Anyways. I am a pretty good developer. I was typing from my mobile so some typing errors did happen. Jessi Patel is a co-founder of Workflowy. He has hired Jacob.
By the way, you are welcome to see my work on workflowy as extension
Here is how my code looks like.
https://github.com/wasimmalik88/Workflowy-Plus
and
If you want to try my extension you are more then welcome here is link
https://chrome.google.com/webstore/detail/workflowy-plus/mabckbaobddmnafhfkaciemiimfmifhh
I would like to start an official petition to have Jacob removed from the dev team immediately, before he can make any more mistakes with our data. This update is still half-baked after multiple attempts and it’s clearly causing trouble for people. More importantly, many of us use our WorkFlowy for business purposes, so having a now-broken product we can’t trust is not acceptable.
Jacob, breaking WorkFlowy your first day on the job is not a good sign at all. Any good dev would have tested the update fully before rolling it out. Please leave the team, and possibly consider a different career.
WorkFlowy is not broken you say? I’d like everyone to try out this little test…
Go to your “main” WorkFlowy page (not in any sub-bullet).
Press CTRL-A to select all. It should select a single line, as usual.
Press CTRL-A again. This should select / highlight the entire page, as usual.
Now press CTRL-X.
Please report your results here.
Making such a massive change to a long-standing protective feature, especially without consulting your users, is unforgivable. I’m guessing everyone will have the same concerns I do. I LOVED WorkFlowy, but now I’m afraid to use it. And I’m afraid of what other disastrous “improvements” Jacob might have in store for us.
I now consider my WorkFlowy broken and not to be trusted. I’m betting everyone that tries this little test will agree.
Jamie.
That’s not helpful Jamie! I’d suggest explaining what the problem is with the Ctrl-X behaviour so that it can be fixed.
Jacob – please know that you’re super welcome and there’s a lot of excitement in the community for the talent that you clearly bring to the table!
Shift-Tab used to simply and reliably move a node (and its children) “up a level”.
It no longer does this, and I sorely miss this fundamental feature which was there from the start!
Now it does different things depending on the context:
– If the target node has siblings under the same parent, it makes those later siblings be its children, doesn’t change the siblings above it, and moves the node up a level.
– If the target node is the last sibling, Shift-Tab moves it up a level.
– If the target node is not the last sibling, and it has its own children, Shift-Tab does nothing at all.
Quite often, when my simple intention is to move a large node “up a level” (which I do very often), I either need to stop and think about what the new behaviour will do based on the nodes around my target node, or reach for the mouse.
Could we please have some shortcut (even if it’s not Shift-Tab) that just means “move the node up a level, below the current parent”, matching the old behaviour?
I concur with Matt on this, outdenting no longer works as expected.
Came here to strongly +1 Matt, especially the third point (“If the target node is not the last sibling, and it has its own children, Shift-Tab does nothing at all”).
Thank you for your feedback! We have returned Shift-Tab to its original behavior as of today.
Hey Jacob,
Just want to make sure you saw my comment from a while ago (not sure how notifications work on here). I dearly dearly miss the brief heaven that was the modified outdent functionality. Is there a way this could be made into a toggleable setting?
Thanks so much,
Dylan
Thank you! This was my only issue with the recent updates; all the other stuff is great. 🙂
What about those of us who greatly, grealy appreciated the changed behavior? Or at least allow it when dragging? I constantly find myself wanting to make a node the parent of its below-siblings (“younger siblings”?), so this feature was a godsend.Only now it’s gone 🙁
Could it maybe be a setting?
> Could it maybe be a setting?
I’ve been saying for a long time that Workflowy should have preferences!
As a developer, I try to write flexible code, and where possible supply a proper settings page in the apps I write. It’s not all milk and honey though; you can certainly add complexity, and box yourself into a corner, especially where different functionality – for example – might require something to be built in a different way.
But for something like Workflowy, and the additional functionality that seems to be being planned, I think it would be a logical move.
Hi,
It seems like you guys have been changing a lot in the past few days. Can you make an option for the people that don’t want things to change everyday? It’s very annoying and I’m considering unsubscribing if it continues.
Thanks
You bring up a very valid point Mike. I can see how this would be frustrating if not desired.
I (respectfully) am one who enjoys seeing new features as soon as they are developed. It sounds like some bugs need to be worked out though. I do like what microsoft webmail did recently, where a new “improvement” essentially had an on/off beta switch. They informed the user of the change, then allowed the user to opt in to the beta test and try it out and give feedback. Something like that may be useful here. Give people that want to try a new feature out time to test it with a “turn on new bullets beta” switch(or whatever new feature it is). It may give you time to fine tune a feature without frustrating users before the feature is polished. I’m no developer, so you probably have terms for this kind of development process already within your computery world. I guess “beta testing opt in/out” is my name for it.
Yeah, we are going to have a design channel where we get feedback on new stuff (and new ideas) form users before we put them into wide release. This will help with issues like this.
Jesse, where would this design channel be taking place? On the blog? Thanks!
Hello,
I absolutely LOVE workflowy – my life would honestly not be the same without it. It is the digital reflection of everything I’ve thought about for the past few years, and I hope many years into the future. I attribute more of my success to this software tool than any other I use.
However, this last update (which I didn’t realize had actually happened until I googled “Workflowy Blog” in the hopes I’d discover some information) was a step backward. The lines that were included before when dragging were great for usability, because you could see exactly where the dragged bullet would end up. In the gifs above, the dragged item seems to preview where it is going to be dropped by snapping into it’s future place (shown with a grey background). This is NOT my experience on the web app. My dragged item does not snap from place to place as it is being dragged, and neither does a grey box indicating where it will end up.
Also, the ability to drag an item into an unopened list seems really, really bad to me. Probably about 10% to 20% of the time I drag an item, it ends up nested in another list on accident and disappearing altogether because the new parent list doesn’t even open!
I’m happy to post a screen capture of how this update is actually functioning for me if that would be helpful.
To me, this UI change is a step way back in function, with questionable value in terms of form as well.
My main concern is that this type of confusing behavior will make Workflowy more frustrating for new users to understand, so adoption rates for Workflowy may go down. I’d hate to see this because I’m very invested in Workflowy and I hope it continues to live on for many, many, years into the future.
Sincerely,
Brock
P.S. I am, however, very impressed at how engaged with the community Jesse and the other developers seem to be on this blog. Thanks for building something so amazing!
Ok wow. After all that suddenly my account is showing the snap-in-place as I drag bullet functionality, and even a little animation that appears when you intentionally or accidentally drag a bullet into another unopened bullet list.
With those changes, pretty much all of my concerns have been answered!
I guess maybe there was an in-between version between the old functionality with the horizontal lines and the ones shown in the gifs above that I was stuck on for a while.
Is there a way to see the version of the app that is loaded in the browser?
You can open the Chrome developer console and look at the SOURCE_VERSION javascript variable. That will give you a timestamp for when the version you are running was deployed. For example, I see 20171003221047 which means my version was deployed on 10/3/2017. There may be a timezone discrepancy so the hour could be off but will give you a general idea.
Trying to move bullets is incredibly frustrating now. It’s bad enough in general, but even worse if you search for bullets containing a particular tag and then try to move tagged bullets within the confines of the resulting list. I keep having to search for bullets that I was trying to move to figure out where they were dropped (somewhere between where they were and where I was try to move them to). This happens almost every single time, regardless of how slowly I move them (especially when looking at tagged results).
So sorry about the frustration Jessica. It does seem that dragging when in a searched list is now not working well. We will look into that asap.
Okay, we’ve fixed this issue, thanks for reporting the issue. New verison of web app with the fixes is already deployed, desktop app is coming asap.
This update badly missed the mark for me:
1) The update hit a lot of us completely unaware. Any time a major UI/UX is made, subscribers should know well in advance of the change being rolled out live in order to avoid blind-siding subscribers. Some users might have had their workflow negatively impacted due to not understanding the new feature set, or not knowing how to use it.
2) While the need to innovate is well understood, I personally wish the resources used on this project had instead been directed towards solving long-standing usability issues– for instance, even some Workflowy staff agree there can be issues with Workflowy’s search feature at times, as well as chronic speed/response issues for those who have larger sets of notes in Workflowy.
3) Workflowy’s mobile feature set lags significantly behind the laptop/desktop feature set. While it’s understood some features might be difficult to fully implement in mobile due to lack of computing power, other features are missing for no easily understood reason, such as being able to star a node. As it stands, I use the mobile app primarily to read/view Workflowy notes and try to find a laptop/desktop to add or edit notes because doing so with the app is quite difficult due to the poor mobile experience. As someone who truly loves Workflowy, I hope the team will continue to develop the mobile version and work toward implementing more core features that already exist on the laptop/desktop platform. Currently, I would give the desktop/laptop version of Workflowy an easy 5 stars and recommend it widely (and have done exactly that) while I would give the app 2.5 to 3.0 stars and recommend it only with caution and caveats.
Making mobile profoundly better is going to be our main focus for Q4 2017, so we definitely hear you!
The problems this moving change attempted to address were actually based on watching a lot of people use the app and being confused with how moving works. We obviously should have done more usability testing with this feature before launching it, though.
Dragging points by mouse is more powerful and intuitive, thank you.
Unfortunately, my way of using workflowy has been to rely as much as possible on keyboard shortcuts to move bullets in and out of various parents lists. Now, I have to drag with the mouse to do that or I take all the bullets on the same level with me. It slows me down a good bit.
Is there a way you could set it so that as long as I’m holding down the keys to move a bullet point around, it’s free to move without locking in all the bullet points under it? It would be cool if it locked them in as soon as I let go of the keys. But not while I’m trying to move it to a new parent list.
this is an interesting issue, and a good point. basically you are pulling together a bunch of things underneath the bullet you were just trying to move out. we will contemplate
I’m having trouble with the shift-tab shortcut. On some bullet, the shortcut seems to be working as intended, and other others it seems like the shortcut does nothing. I can’t seem to identify what determines whether a bullet can be moved or not. Is anyone else having this issue?
There are some limitations around outdenting items that have children to prevent accidentally changing structures in unintended ways. We agree though that it is confusing and are brainstorming on ways to make the behavior more explicit. Thanks for the feedback!
This new update is nice. Very quick response to the request. Thanks
I’m not a fan of this update. Now I have to be a lot more explicit about lining up the bullet point itself with where I want it to go, and if i’m slightly off, the item just disappears and that’s scary. Before, as long as I had the vertical position correct, the gray line told me where it would end up.
I see the benefits of being able to move items around more fluidly, but there needs to at least be some sort of indication of where the item will end up rather than just guessing.
And honestly, it wasn’t that hard to move things around before. It’s just changed from two straightforward steps to one difficult step.
Thanks for the honest feedback! We just pushed a new version, please let us know if this addresses your concerns
Hi Jacob,
I actually love the new version! The animation is both visually awesome and very clear. You guys found a great balance of being easily to drag things anywhere without making it too easy to drag something into no-man’s land.
It’s great that you all listen to user feedback. I continue to recommend Workflowy to everyone I know.
Cheers!
Best,
Steve
This update has made it really difficult to move things accurately. Before you could see where things went. Now items can just disappear without any warning. Is there a way to go back to the previous version?
Thanks for the feedback! We just pushed a new version that I hope makes it more clear where things are going. Please let us know what you think
Will this new behavior be made available for the Chromebook app?
Nevermind. There seems to be an issue with the chrome app auto-update mechanism. I forced an update and now have the latest version of the app with the recent changes.
Neat! There’s a typo re: the keyboard shortcut to outdent. It’s shift-tab, not cmd/ctrl-tab.
Thanks! Typo fixed
Whow! This is great! I noticed it is now also possible to drop bullets into a new parent without the parent bullet opening and showing all its child bullets. Perfect! I was waiting for this 😉 Is there an official way to let you guys know about feature requests? I would like the ‘completed:visible’ function to have the option to refresh. Translated into my workflow: I’d like all the things I complete today to stay visible until I refresh. That way I can feel good about all the things that I already did.
I find it useful that the items that are dropped into an unexpended list appear at the top. I wonder if there is a central location for feature requests so that they are not duplicated. Two that are important to me right now are notifications on my phone and notifications of changes in collaborative lists
I must agree with this. I very wellcome the added features but the removal of horizontal line makes the job harder.
Could you add reading-only feature to mobile app?
This would be pretty slick. It’s not the easiest thing to scroll long-winded bullets on mobile.
So glad to see refreshed vigor for mobile! I often use a mouse and keyboard on the mobile app, and recently I became unable to click anything besides tags and the top menu / search bar. But that’s just a minor issue right now.
I’m excited because Workflowy has no real competition, at least in the Android sphere. I have looked. You have done well, and there is an elegance to the app that is hard to beat. Not quite the elegance of the desktop interface, but I am excited to see what you have in store to improve the mobile experience.
Well, there is Dynalist which is basically a Workflowy clone (devs say it openly), but it is overloaded with features
Yes. Tried Dynalist. Looked promising but it was too cluttered with features that could be useful but took too much time to build in on a day to day level.
Also, I couldn’t live without zoomable lists….
We are working on rolling that out as we speak” I took “rolling it out as we speak” to mean it was being released “as we speak” Thanks for your quick response to my “help” email Jacob.
Hello Jacob,
Just heard about you from Jesse in the post. You sound amazing developer. Here you are with the feature that is fantastic.
It is a big time for long-term workflow users.
I wish you good luck for all the future work.
Regards,
Wasim
Duh. Sorry Jacob; it does work as you explained with the web version. All I had to do was exit and reload; I’m loving it.
Would be good to see some kind of snapping. It feel really weird to just be able to drag in anywhere. That’s why the old marker line was cool
http://jqueryui.com/sortable/#placeholder
I agree. I see the merit of the update, but is it possible to bring back some sort of snapping preview or guide as you drag? I really miss the horizontal line.
Thanks for the great feedback. We pushed a new version with better snapping. Let us know if it works better for you!
this is now implemented
Yep, works great! Thanks guys 😀
Is this in the desktop version, or what; I tried and it doesn’t seem to work?
On Thu, Sep 28, 2017 at 6:10 PM, WorkFlowy Blog wrote:
> Jacob Green posted: “I am pleased to announce a new and improved interface > for moving around bullets in WorkFlowy. Web and Desktop Apps We bid > farewell to the moving gray horizontal line and introduce a more modern > drag-and-drop experience. You can now drag bullets around vis” >
Good point. The Desktop Version is a separate release. We are working on rolling that out as we speak
Nice that the kbs mirror the draggable changes :-). Still need to use Alt+Shift+Up/Down to move lists up/ down (on Windows)… but either way it’s all good.
This is terrific! Especially dragging to a node and making it a child of that node. Well done!
Right out the gate… Nice work!