Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Icons for hoist and dehoist? #90

Open
scripting opened this Issue Jul 31, 2018 · 19 comments

Comments

Projects
None yet
10 participants
@scripting
Copy link
Owner

scripting commented Jul 31, 2018

Looking for icons for Hoist and Dehoist.

For a refresher on what hoisting is, watch this short video.

The range of possible icons is what's in Font-Awesome. Here's the cheatsheet.

Please post any ideas you have here. Thanks! ;-)

@lbukys

This comment has been minimized.

Copy link

lbukys commented Jul 31, 2018

arrow-alt-circle-right. And it should appear in the breadcrumb trail instead of '>' at the boundary between the "inaccessible" and "accessible" breadcrumbs.

runner-up: angle-double-right

@kevinctofel

This comment has been minimized.

Copy link

kevinctofel commented Jul 31, 2018

I like the icons of the hands pointing right and left. (Or you could use the up / down hands) Makes it seem personal. :)

@ttepasse

This comment has been minimized.

Copy link

ttepasse commented Jul 31, 2018

Although there is prior art, I don't like the name hoisting for that feature. It doesn't change the underlying data structure as I would assume with that word, it just provides a different view of the structure. Hoist is a rather unintuitive word, maybe because I speak English as a second language.

I did take a look what other software names comparable feature. OmniOutliner calls it "focus". As a concept that makes sense for me. Putting all that other stuff aside so that I can concentrate and focus on that, what's important to me in that moment. And other productivity software in other fields also have "focus modes", iA Writer or Word come to mind.

By renaming the concept the space opens for a metapher in the optical sense. The classic magnifying glass for zooming would be an option. Or, my preference, an eye for taking a closer look, eye and eye-slash in Font-Awesome's terms.


As an (longer) aside:

While watching the video I was somewhat confused by the breadcrump trail. In unhoisted mode it gives the parent element of the currently highlighted or worked upon element, I assume. When hoisted the trail loses the breadcrump of the hoisted element, while still displaying the anscestor trail of the elements outside the hoist. At a glance the user doesn't know if the view of the outline is hoisted or if they have an inkling that it ist hoisted, they don't know where in the breadcrump the hoist is taking place. The element "Nevada" is missing.

Two ideas:

Before the hoist the breadcrump looks like this:

United States → Far West → Nevada

Then the user hoists "Nevada". One possibility could be to highlight the hoisted breadcrump in the trail, perhaps by bolding it. Whereever the user navigates in the hoisted outline, the full trail is always there but doesn't hide the hoisted element.

United States → Far West → Nevada → Las Vegas → The Strip

Another possibility would be clipping the breadcrump trail at the hoisted element. In that case the breadcrump trail would look like the presented outline, no more mismatch. But of course you'll need a way to display that the current outline is hoisted and a way to get back to the main document. Maybe with a big black arrow?

⬅︎ Nevada → Las Vegas → The Strip

Or eye-slash, I really like Focus.

@scripting

This comment has been minimized.

Copy link
Owner Author

scripting commented Jul 31, 2018

@sabre23t

This comment has been minimized.

Copy link

sabre23t commented Aug 1, 2018

Checkvist.com uses "icon-pushpin" to denote hoisted mode of its outlines.
The nearest to that icon in Font Awesome would be "thumbtack".
I can live with that.

@danmactough

This comment has been minimized.

Copy link

danmactough commented Aug 1, 2018

image

@Robert-Black

This comment has been minimized.

Copy link

Robert-Black commented Aug 1, 2018

Font Awesome uses CSS to offer rotated variants, so I propose using the “sitemap” icon rotated 90° clockwise for hoist, and 90° counter-clockwise for de-hoist.

@scripting

This comment has been minimized.

Copy link
Owner Author

scripting commented Aug 1, 2018

@Robert-Black -- that's a very good point. I use CSS with Font-Awesome, a lot. That's one of the reasons its icons are so useful in user interfaces of apps.

I like thumbtack, because it's got prior art. If I use it, now two apps use the same icon, and we're on our way to creating new language.

image

The one I'm using as a placeholder is the flag. Because the verb hoist in the English language is generally applied to flags. Unfortunately the English language does not have a word for dehoisting.

image

Also, why I'm not open to using different terminology, that issued was settled in the 80s. I coined the term hoisting for the functionality I'm implementing now, in early Living Videotext outliners, ThinkTank, Ready and MORE. The naming carries through to Frontier that has verbs for hoisting and dehoisting in its scripting language. Trying to change the name now would be very un-Dave-like. :-)

@scripting

This comment has been minimized.

Copy link
Owner Author

scripting commented Aug 1, 2018

Now, @Robert-Black, the sitemap icon, which is interesting -- looks like --

image

This is what it looks like rotated 90 degrees clockwise (just checking this is what you mean).

image

And this is what it looks like rotated 90 degrees counter-clockwise --

image

@Robert-Black

This comment has been minimized.

Copy link

Robert-Black commented Aug 1, 2018

Yep, that’s what I was thinking. For me it symbolises, moving left to right, going from many elements to one (hoist), or from one to many (de-hoist). YMMV.

@scripting

This comment has been minimized.

Copy link
Owner Author

scripting commented Aug 1, 2018

I tried it -- this is what it looks like.

image

@scripting

This comment has been minimized.

Copy link
Owner Author

scripting commented Aug 1, 2018

Here's the same thing with thumbtack.

image

@am1t

This comment has been minimized.

Copy link

am1t commented Aug 1, 2018

I think caret-square-down and caret-square-up should work too. For me, they represent somewhat clearly what's being achieved.

@scripting

This comment has been minimized.

Copy link
Owner Author

scripting commented Aug 1, 2018

I think thumbtacks aka pushpins are the way to go.

Carets and things that represent navigation are problems because these concepts show up in so many other contexts in outliners. For example, carets are the way we express the expansion state of a node, very important.

Also, not shown in screen shots:

  1. The hoist/dehoist icons will not receive this prominence. Linking and attribute editing are going to stay in the second and third slot. My brain has become accustomed to them being there.

  2. The icons enable and disable depending on whether or not you can hoist or dehoist.

  3. There are tool tips that appear when you hover over the icons that say what their names are.

@davmillar

This comment has been minimized.

Copy link

davmillar commented Aug 1, 2018

I like the sitemap icon concept mentioned above, but my first thought that I also still want to share is sign-in-alt and sign-out-alt rotated 180 degrees.

Here's a bootleg mockup:
image

@scripting

This comment has been minimized.

Copy link
Owner Author

scripting commented Aug 1, 2018

Again, the problem is it looks like so many other things you do in outlines

What those icons say to me is promote and demote, or reorg-left and reorg-right.

The keystrokes for promote and demote are ] and [ respectively, which are elements in those icons.

@am1t

This comment has been minimized.

Copy link

am1t commented Aug 1, 2018

I think thumbtacks represent a very specific object (pin) which has gained a meaning on web. I have seen it used very often for bookmarks or add for read later. May be not the experience for all.

@arthole

This comment has been minimized.

Copy link

arthole commented Aug 1, 2018

I would suggest map (dehoist) and map-marked (hoist)

hoist behaves like a zoom-in at a particular point of the outline. hence, marking where you are while 'hoisted". The hoist is one page of the map. when you have the full (dehoist) view of the outline, it's like an unfolded map.

also, if possible, I would make the icon a toggle. when you click an outline element, the map-mark icon appears allowing you to hoist. While hoisted the icon becomes a map icon you can click to dehoist- returning to the full map/outline. When scrolling through the outline, with nothing selected, the map icon is invisible or is perhaps map: f279 (the non-solid one) or is greyed out.

map :f279
map-marked: f59f

@scripting

This comment has been minimized.

Copy link
Owner Author

scripting commented Aug 2, 2018

A long-winded demo of how the new version of LO2 is coming along.

https://www.youtube.com/watch?v=YGNo11OD_RI

Dave

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.