Pointing the way forward. Or downward.

By

March 5, 2019

Screen Shot 2019-03-04 at 12.36.04 PM

Today we’re releasing a small change to the core WorkFlowy interface that we’ve been testing for some time.

Instead of plus and minus buttons to the left of each bullet, you’ll see little triangles, or as we call them, arrows. The arrows point to the right when an item is collapsed, and they smoothly turn to point down when the item is expanded.

This should hopefully look familiar and intuitive. The behavior for expanding and collapsing is exactly the same as before.

Why the change? When WorkFlowy was first designed, plus and minus for expand and collapse made a lot of sense. They were very common in other apps (like Windows Explorer), and… they made sense. What’s more logical than “plus” to show more and “minus” to show less?

Unfortunately, pluses and minuses can have many different meanings, and are more often associated with add and remove, which can be confusing. Plus, the world has moved forward on this since WorkFlowy was first designed.

macos9network-browser

Arrows in Mac OS 9 (1999)

Arrows have since become the standard across most apps. The transition started at least 20 years ago – with Mac OS 9 – and was pretty much completed 10 years ago, when even Windows Explorer adopted triangles in Windows 7. It is time for WorkFlowy to catch up.

2ex

Arrows in Windows 7 (2009)

We don’t make this kind of change lightly, because we know how much you rely on WorkFlowy, and distracting you with unexpected or unnecessary changes is the last thing we want.

However, new people who try WorkFlowy need all they help they can get to understand how this magical app works. This tiny change has turned out to be a significant improvement to help people understand how WorkFlowy works when they first try it.

Arrows also allow us to call out a unique situation that occurs when searching in WorkFlowy. Parents of matching items show in a half-open state, where only the children that match the search are visible. You can click the expand/collapse button to show or hide all children. An arrow that points half-way between open and closed is a great fit for this:Screen Shot 2019-03-05 at 1.10.11 PM.png

Sideways arrows to indicate half-open items.

For you old-timers, the arrows might take a little getting used to, but in time we think you’ll come to like them – as have most of the people who’ve tried them so far.

Ever forwards!

5 1 vote
Article Rating
Subscribe
Notify of
guest

34 Comments
Inline Feedbacks
View all comments
floorscheffer
4 years ago

Neither in the web-app, nor in the iOS app I can see the arrows, I still have + and –
Any ideas why and how to solve this?

Lee Granas
Lee Granas
4 years ago
Reply to  floorscheffer

We haven’t built arrows for mobile yet. On the lists!

George
George
4 years ago
Reply to  Lee Granas

Please DON’T. so much easier with the +/- on the right and easy to hit (and can persistently see what is expanded)

Arthur Vashurin
Arthur Vashurin
4 years ago

Arrows are awesome, like ’em, BUT what about big rocks?

It’s been what, four months since WF announced a big changes and all we got are arrows instead of pluses and a fonts tweaks?

What about dates? Reminders? Images?

Workflowy Fan
Workflowy Fan
4 years ago

Images come in the way of outlining. They take storage space as well. I don’t think images are happening (my personal opinion). You should move to notion / onenote / evernote if you need images.
Dates and reminders are a possibility but people have found workarounds that work better.

Bob
Bob
4 years ago
Reply to  Workflowy Fan

“Dates and reminders are a possibility but people have found workarounds that work better.” I would like to see examples of these “workarounds” for “reminders”.

davestewart
4 years ago

There’s something not quite right about this.

It looks too similar to the dot, just not visually different enough, and the rationale for arrows vs + / – feels like post-rationalisation. The fact that the arrows are at an angle really don’t add any value whatsoever.

Also, maybe add a 0.2s fade in – because when I move my mouse I’m just aware of these little black blobs stuttering across the page and it feels weird.

I think I agree that it’s too dark – it’s somehow distracting.

Not sure if they should show for all ancestors? As well?

The alignment is also very strange, with the arrow towards the bottom of the hover area (the blue is the parent hover area):

https://imgur.com/uQ88b0p

But the bottom line for me is that it feels like more tinkering and not enough meat on the bones of the big ticket items that need solving.

Workflowy Fan
Workflowy Fan
4 years ago
Reply to  davestewart

Prioritizing items has been an issue for the company trying to solve prioritization for its users.
Picking low hanging fruit is easy but not going to make a difference.

kingsinger
kingsinger
4 years ago

Noticed this yesterday. Been using WF for years now. Seems like a reasonable change. I like it. Agree with Bra above that dates and reminders are the core missing piece of the Workflowy puzzle. So hope that happens one of these days.

Yakin Bozek
4 years ago

Excellent decision. thanks for thinking in usability, new design standards and having common sense! 🙂

marcinignac
marcinignac
4 years ago
Reply to  Yakin Bozek

GLet me st art by saying that I appreciate the thinking and I understand the potential for confusion with +. I might be old school user and I also think + was of the thinks making WF recognisable. It’s those small things that make a product and tweaking them just diverges from original more and more over time..

Why missing +
– both + and – are symmetrical and pleasing
– they are thin and fall into background

Concerns:
– looking at the screenshots the arrow right looks almost same as dot at first sight
– in desktop I can see a difference between right and down arrows unless I lean forward (might be my high res screen)
– same between dark arrow and dark dot, almost same looking
– what about iOS/mobile? Plus is on the right. Will you switch to arrows on the left? What about hit targets and potential problems of having arrow and dot on the same side
– have fitt’s law been tested? (Hit target size vs how easy is to hit it from distance) The +/- hit targets were square even if not visible, triangles are often badly implemented (not here luckily) and need to be clicked precisely so they “appear” fiddly to me (as the perceived hit target is smaller)

davestewart
4 years ago
Reply to  marcinignac

I completely agree with all this.

Christoph Dollis (@ChristophDollis)

Wow … just, wow.

Cam
Cam
4 years ago

I realize now that I was subconsciously confused by the + sign for “add a sibling” and + sign for expand. I see the reasoning behind the change. I really like the change. I feel like overall, the design changes you’ve implemented lately are in the right direction.

leggett
leggett
4 years ago

Woohoo!! Arrows for the win!!! 😀

wf user
wf user
4 years ago

worst design choice of the late changes for me. understand the design history lesson you gave. but those pluses and minuses were at the very core of WF design.

about the betas. please don’t take usage statistics as positive feedback. many beta users are early adopters and use any change for the sake of it. you can put simple like dislike vote next to them to see the true reaction.

Cam
Cam
4 years ago
Reply to  wf user

wf user, I can see that the plus sign is probably a little more intuitive for expand than an arrow. One issue I see though is that a plus sign is used to create a sibling bullet (when the neighboring bullet above is indented). Having a plus sign that does two different things is probably not a great design choice. Triangles are a logical replacement.

I am sincerely curious what it is about triangles that makes it the “worst design choice”.

marcinignac
marcinignac
4 years ago
Reply to  Cam

For me
– too similar to dot
– right and down arrow to similar at small size
– fiddly look vs + which has “square” hit target
– the make sense on the left only and me lead to usability issues if moved there next to dot on mobile

Anonymous
Anonymous
4 years ago

Can I give me rights to translate and publish yours blog to? Russian ________________________________

Jason Hughston
Jason Hughston
4 years ago

Like the change. It improves the experience.

Marti Barletta
4 years ago

Thanks for always being so thoughtful and careful of your users when you make changes like this

Dane
4 years ago

Good stuff! As a designer, I appreciate all the little things 🙂

Bra
Bra
4 years ago

When are dates / notification coming?

John
John
4 years ago
Reply to  Bra

Probably never!

Bob
Bob
4 years ago

The other day I noticed that I had been using the arrows without noticing that there were no longer pluses and minuses in Android beta. After using them for several days I realized that I had been using them intuitively and had totally forgotten about the pluses and minuses.

Lee Granas
Lee Granas
4 years ago
Reply to  Bob

Great news!

Sage
Sage
4 years ago

I can totally understand and appreciate the change to arrows, but why did you also change it so that they are always visible now? Previously they were (on desktop at least) only visible on mouse-over, which worked since the bullet shading already efficiently indicates at a glance which nodes have children and are expandable; so the always-visible arrows therefore seem redundant to me. Worse, all the extra arrows definitely draw my eye every time I visually skim the list, but IMO do so entirely unnecessarily, which is sort of the definition of visual clutter- the absence of which was one of the main reasons I started using WorkFlowy and have used it for almost 5 years now. Maybe it’s just me but personally I would very much prefer them to remain invisible on desktop until expanded or moused over, for the above reasons (assuming an option to toggle their visibility settings would be too involved). That would hopefully retain the benefits of the arrow’s improved UX intuitiveness, without introducing visual clutter…? I love what you guys do and am infinitely thankful for WF, but I do hope you might consider this^

Lee Granas
Lee Granas
4 years ago
Reply to  Sage

It shouldn’t be always visible unless you have a new account, perhaps you’ve found a bug? Write to us at help@workflowy.com and we can troubleshoot with you.

Alex
Alex
4 years ago
Reply to  Sage

I feel you. I also think that arrows itself are alright but somehow because of their darker color and the fact that they show up even when you hover over text and not a bullet or arrow itself – they started to draw my attention a little bit too much.

So I’ve made a super simple code for Stylish (works in Chrome and Firefox probably)

/* ARROW HOVER OVER COLOR */
._12fvjqw:hover {
color: #dce0e2
}
._12fvjqw:active {
color: #b7bcbf
}
._12fvjqw {
color: #ffffff
}

It makes arrows only visible when you hover over an arrow itself plus the color of the arrows is lighter / more subtle.

GEORGE
GEORGE
4 years ago
Reply to  Sage

I kind of have the other problem. Yes, love the arrows. But on mobile, when I see the little + I know that there is somthing lurking underneath. When I see the little – I know that’s all there is. Now when I scan the desktop I’m not sure if there are sub-points or not. So then I have to take my mouse and hover over all of them, looking for the little right facing arrow to make sure I’m not missing something. Would there be a way to have this as an option or a way to clearly indicate if the bullet is fully expanded or hiding something?

Ann
Ann
4 years ago

Ditto! It looks more contemporary and is definitely more intuitive.

Lee Granas
Lee Granas
4 years ago
Reply to  Ann

We appreciate your comment! 🙂

Bev C
4 years ago

I’m an “old-timer” and I love this change! Kudos to the team.

Lee Granas
Lee Granas
4 years ago
Reply to  Bev C

Thanks for these kind words!

Subscribe to the newsletter

We'll send you a weekly roundup of the latest posts

Overwhelmed?

Workflowy replaces your notebooks, stickies and bloated apps with a simple, smooth digital notebook that makes it easy to get organized and be productive.