[Libreoffice-bugs] [Bug 38093] Add an Outline View layout and editing mode to Writer

Sat May 2 20:59:45 UTC 2020

https://bugs.documentfoundation.org/show_bug.cgi?id=38093

--- Comment #67 from Francewhoa <francewhoa+bugs.documentfoundation.org at ubertus.ca> ---
Good morning Jim Raykowski, V Stuart Foote, and all contributors :) I agree
with both Jim and V Stuart about a more 'visual' indicator on the document
canvas. In addition to the handy Navigator.

The challenge is that the Navigator is very useful for advanced LO users. But
many newcomers or beginners are not yet familiar with this
advanced-blackbelt-ninja-Navigator.

Feel free to choose any design to your liking. The following are just
suggestions for your consideration.

In summary, how about adding small tapable/clickable triangles inside the
document canvas left side margin?

- - - - - - - - - - - - - - - - - - 

Below is the same suggestion as above. But with details. Including suggested
mockups and workflow I made to facilitate communications.

How about adding small gray triangles (gray carets) to the LibreOffice Document
canvas left side margin? Those triangles would allow those beginner users to
easily & quickly use the collapse and expand feature within the document
canvas? WIth folding symbols & hover over. Which Jim mentioned in his comment
60 above. 

- - - - - - - - - - - - - - - - - - 

Mockups Triangle Five Suggested States

State 1: Hidden
https://bugs.documentfoundation.org/attachment.cgi?id=160240

State 2: Expanded gray triangle
https://bugs.documentfoundation.org/attachment.cgi?id=160241

State 3: Expanded blue triangle
https://bugs.documentfoundation.org/attachment.cgi?id=160242

State 4: Collapse blue triangle & collapse heading content
https://bugs.documentfoundation.org/attachment.cgi?id=160243

State 5: Collapse gray triangle
https://bugs.documentfoundation.org/attachment.cgi?id=160244

- - - - - - - - - - - - - - - - - - 

Suggested Workflow

1. User opens a LO Writer .odt document. The number 1 in this mockup shows this
at https://bugs.documentfoundation.org/attachment.cgi?id=160240
Assumptions:
• Assumes the triangle is hidden by default. So that the canvas feels and looks
clean and uncluttered.

2. User moves the mouse over the Heading. In other words, a mouse over. In this
example a mouse over the heading titled "Uberschrift 62". A gray triangle is
display within the left side margin of the canvas. The number 1 in this mockup
shows this at https://bugs.documentfoundation.org/attachment.cgi?id=160241
Assumptions:
• Assumes the triangle is a light gray. HTML #d9d9d9. So that the triangle is
less visible than the heading and most other items within the canvas area.
• Assumes the triangle is pointing down. Which visually means expanded. Users
are familiar with this visual meaning. Which is the same as the meaning inside
the Navigator. So easier learning curve for users. Which means a more pleasant
user experience.
• Assumes if the user moves the mouse away from the heading "Uberschrift 62",
the triangle is automatically hidden. So that the canvas area looks and feel
uncluttered. 

3. User moves the mouse over the triangle, the triangle shift color from gray
to blue HTML #3daeea. The number 3 in this mockup shows this at
https://bugs.documentfoundation.org/attachment.cgi?id=160242
Assumptions:
• Assumes this blue color is the same blue as a selected heading row within the
Navigator window
• Assumes the blue color visually communicate to the user that this item is
clickable
• Assumes if the user moves the mouse away from the triangle, the triangle
color shift from blue to gray

4. User left clicks on the blue triangle. The triangle shift from pointing down
to pointing right. The number 4 in this mockup shows this at
https://bugs.documentfoundation.org/attachment.cgi?id=160243
At the same time, the heading collapse. In other words the heading content is
hidden. The number 5 in this mockup shows this at
https://https://bugs.documentfoundation.org/attachment.cgi?id=160243
Assumptions:
• Assumes the triangle is pointing right. Which visually means collapsed. Same
meaning as the other triangles in the Navigator.
• Assumes within the Navigator, the associated heading and its sub-heading(s),
if any, would automatically collapse. In other words, to collapse an heading,
the user could either left click on the blue triangle inside the canvas, or
right click on the heading inside the Navigator. Then navigate the menu to
"Expand/Collapse ---> Collapse Heading".
• Assumes if the heading has sub-heading(s), and the user clicks on the top
heading, then all associated sub-heading(s) are automatically collapsed. So
that it's easy and quick to collapse or expand multiple headings within a large
Writer document. In other words, this collapse & expand feature is able to
scale up. For example, if the user collapses this "Heading 1" below, then the
associated sub-headings ranging from "Sub-heading 1.1" to "Sub-heading 1.200"
are automatically both collapsed and hidden. Only the "Heading 1" remain
display with a permanently display gray arrow. Which is pointing right.

Example
  Heading 1
     Sub-heading 1.1
     Sub-heading 1.2
     Sub-heading 1.3
     [etc]
     Sub-heading 1.200
   Heading 2
     Sub-heading 2.1
   Heading 3

Where "[etc]" above means that to facilitate communications, all other
sub-headings ranging from "Sub-heading 1.4" to Sub-heading 1.199" where not
include in this example

5. User move mouse away from the blue triangle. The triangle shift from blue to
gray. The number 6 in this mockup shows this at
https://bugs.documentfoundation.org/attachment.cgi?id=160244
Assumptions:
• Assumes that after the user move the mouse away from the gray triangle, the
triangle is permanently display
• Assumes the state of the triangles are persistent. Meaning if the user do use
any triangle(s) to collapsed heading(s), then after closing the Writer
document, then re-opening it, all triangle states remains. They are not lost.
• Assumes the gray triangle permanently display visually communicate to the
user the this heading is presently collapsed. This reminder is increasingly
useful and needed as time passes. For example, if the user does not use this
Writer document for more than one year. Then after that period re-open it. The
permanently display gray triangle visually reminds the user that this heading
is collapse. Without this gray triangle permanently display, there is a risk
that the user might misinterpret the hidden heading content as somehow deleted
content, or a bug with the content.

6. In the future, when the user needs to expand this heading "Uberschrift 62".
First the user moves the mouse over the gray triangle. The triangle shift from
gray to blue. The number 4 in this mockup show this at
https://bugs.documentfoundation.org/attachment.cgi?id=160243 
Then the user simply click on the blue arrow. Next the triangle shift from
pointing right to pointing down. At the same time the heading content is
display. The number 3 in this mockup show this at
https://bugs.documentfoundation.org/attachment.cgi?id=160242
Assumptions:
• Assumes after this step 6, optionally and if the user needs to do additional
operations, the user would go through the same workflow as above. For example,
starting with step 1 above to collapse a new heading.

- - - - - - - - - - - - - - - - - - 

Notes

• This 3 minutes video might be of interest for inspiration and improving on.
It shows the collapse and expand in MS Word 2016 at
https://youtu.be/aft_4mcaxHU?t=31
This video includes audio with more information.
This is the same full video with an introduction at
https://youtu.be/aft_4mcaxHU

Attribution to Professor Adam Morgan for this video above. This video shows the
relationships between the MS Word 2016 Navigation/Navigator operations and the
Canvas operations. I like most of the workflow in MS Word 2016 except one
thing. My vote goes for not using the 45 degree triangle state. Because this is
risky to be confusing for end-users. I mean there is little or no value for
this state. Or maybe I missed something about its value. By "45 degree triangle
state" I mean this weird looking triangle. Which in using an additional
triangle states with a triangle rotated at 45 degree. Or maybe I'm missing
somethign about the usefulness of this "45 degree triangle". The numbers 1 and
2 in this screenshot show this "45 degree triangle state" at
https://bugs.documentfoundation.org/attachment.cgi?id=160245

To resolve this challenge above I suggest to use the simplified & cleaner LO
"Suggested Workflow" above. Where the gray triangle is expanded & pointing
down. The number 2 in this mockup show this at
https://bugs.documentfoundation.org/attachment.cgi?id=160241

• About the Navigator and the naming of the menu items, this related
documentation from WS Word might be useful for inspiration at
https://archive.md/5R8UO#selection-1307.0-1329.61

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.freedesktop.org/archives/libreoffice-bugs/attachments/20200502/bda216cd/attachment.htm>