Pointing the way forward. Or downward.

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!

31 thoughts on “Pointing the way forward. Or downward.

  1. 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^

    1. 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.

  2. 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.

  3. 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.

    1. 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”.

      1. 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

  4. 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.

    1. 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)

  5. 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.

  6. 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):

    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.

    1. 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.

  7. 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?

    1. 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.

      1. “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”.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s