Advanced Page Management: Page Reflow Control

[Patrick Connor]

"Advanced Page Management" has been split into 4 New Feature threads (this is one of those 4). If you want to discuss a change to page management please check out each of these threads and choose the best one to discuss the change you are observing

1. Multiple Pages Feature
   • Add Pages: Flow Pages
   • Add Pages: Extend Spread
   • Add Pages: New Spread
   • Dragging to create/change layout
2. Page Migration Improvements
   • Page move options
   • Split Masters
   • Move Master Content
   • Reapply Masters
   • Anchor Toward Spine
3. Page Reflow Control (this thread)
   • New drag drop interactions
   • Reflow on a per-spread basis
   • New options where to add pages
4. General Improvements
   • Page Thumbnails
   • Master Tags
   • Bug Fixes / Improvements

====================================================================================

Page Reflow Control

Apps: Affinity Publisher
Platforms: All

IMPORTANT. PLEASE READ FIRST

The implementation of this feature (and the many associated improvements listed at the bottom of the post) involved a rewrite of much of the existing page, spread and master code, as such 2.6.0 cannot support backward compatibility to 2.5 for page operations. Any undo history saved with a document that was created in 2.5.5 or earlier, which involves page or spread manipulation, will be truncated. You won't be able to undo back past the last page operation you did. If your 2.5.x document was saved with history and it includes any page action you will be told when you open in 2.6.0 that the history has been truncated. Any changes made using 2.6 will save and load their history going forward, and this restriction only relates to page functions whose history was created in earlier versions. Additionally you should take particular care to backup your old documents when trying them out in the new beta in case there are bugs converting from the old file structure to the new.

---

New drag drop interactions in the pages panel to copy and rearrange pages with full manual control or automatic reflowing.

In the burger menu of the pages panel, there is now an option to disable or enable automatic reflowing of documents, called “Reflow Pages”.

New icons will appear when drag dropping pages to help demonstrate what will happen when a page is moved

(these icons changed during beta)

Added Fine control of reflow on a per-spread basis.

Spreads also have an option “Reflow through spread”, which will disable reflowing for that specific spread even if the document is set up to allow it via the Pages Panel

Options to add pages in the document flow, to a specific spread or as a new spread.

As mentioned in this thread, it’s now possible to add pages respecting the flow of the current document, or adding them outside of the flow

 

[Affinity Info Bot]

Known Issues in this feature
A list of unresolved issues for this feature, reported by users

Released Fixes
A list of issues for this feature, available in the current beta build

• AF-4775 - Page options not in Title Case
• AF-4776 - Mac is missing tools tips in Spread Properties
• AF-4874 - Spread with Page Reflow disabled cannot be extended to the right when drag-dropping a page

[MikeTO]

23 hours ago, Patrick Connor said:

In the burger menu of the pages panel, there is now an option to disable or enable automatic reflowing of documents, called “Page Reflow”.

Reflow Pages: Note that this page mistakenly names it Page Reflow instead of the actual name Reflow Pages.

Page move options: Should this be disabled in a non-facing pages document?

Page move options: This makes me think it's only for when I move pages, not for when they shuffle from side to side. Perhaps move Reflow Pages up to the main panel menu which would be a lot more convenient and keep these options in the submenu below it named "Reflow Page Options". It might make it more obvious that these are options related to when Reflow Pages is selected.

Capitalization: You normally use title case in panel menus but there is a lot of sentence case in this panel menu.

23 hours ago, Patrick Connor said:

Spreads also have an option “Reflow through spread”, which will disable reflowing for that specific spread even if the document is set up to allow it via the Pages Panel

Reflow through spread: I think it would be easier to understand if the checkbox was reversed and named “Do not Reflow Spread”.

Move following pages: This checkbox appears in Spread Properties when applied only to selected pages. What does this do?

23 hours ago, Patrick Connor said:

New icons will appear when drag dropping pages to help demonstrate what will happen when a page is moved

Rearrange and Copy pages into a spread: I expected that if I dragged a page into a multi-page spread that it wouldn't change "sides". e.g., If I dragged a right page in it would still be based on the right side of the master. Instead Publisher automatically changes the side based on the precise position between two pages of the spread. This feature doesn't work with masters of >2 pages though, if I drag the right-page of a 3-page spread based on a 3-page master, the cursor will indicate that it will use the right side but it actually uses page 2 of the master. There's obviously no way to support masters of 2+ pages with a drop zone of just 2 sides so IMO it would be better if the left/right drop was eliminated and inserting pages into a spread inserted whatever side the page already was. I might need to apply a different master after inserting the page so it would be better not to migrate its content automatically, let me handle it. Doing this would eliminate the need to hit the precise drop zone and make all of these cursors redundant.

  

Also note that in the description above you've used ID's Shuffle term here which you're not using elsewhere.

All drag and drop cursors: I wish I could turn off these cursors, I find them distracting and I don't understand them without referring to your chart. If you eliminated the "side" drop zone above, you could turn them all off and restore the previous Mac-standard green + cursor, I'd have understood it all more easily. Some notes on specific cursors:

Apply Master / Add Master / Copy pages: They both look like Add due to the large plus sign. The checkbox circle doesn't convey "apply" to me and the little plus circle is overshadowed by the big plus sign. I also can't tell the difference between Add Master and Copy Pages without thinking about it. I preferred how it worked in 2.5.

Create Spread From Master: I find the stacked pages cursor confusing, it looks like I'm using Bring to Front. I think the visual cue in 2.5 was sufficient.

Rearrange pages: If I'm dragging one page to move it, the 3-page stack makes me think I accidentally moved multiple pages and the big plus sign makes me think I'm adding pages and moving moving them. The little down arrow circle is confusing if I'm moving pages up.

Action not permitted: Normally when you can't drop on macOS, there's just no drop zone cue and not a cursor telling you can't drop. This feels Windows-y.

[fde101]

45 minutes ago, MikeTO said:

due to the large plus sign

The "large plus sign" is the actual cursor (standard crosshairs) and the other stuff is the indicator.  The problem is that at least on macOS such indicators usually appear below and to the right of the cursor, while these appear above and to the right of the cursor, in the wrong place.

Combining that with the fact that the white papers are much more visible than the crosshairs themselves, particularly with a dark interface, and it can be very confusing to interpret where the actual "hot spot" of the cursor is.

It would be much better if the extra stuff were simply moved underneath the cursor (below and to the right instead of above and to the right) and were a bit more muted so that it didn't distract from the crosshairs.  It took me quite a while playing with it to figure out why the pages were ending up where they were when I thought I was lining up the cursor with where I wanted to place them - I was aiming with the papers in the cursor instead of with the crosshairs.

[MikeTO]

5 minutes ago, fde101 said:

The "large plus sign" is the actual cursor (standard crosshairs) and the other stuff is the indicator.  The problem is that at least on macOS such indicators usually appear below and to the right of the cursor, while these appear above and to the right of the cursor, in the wrong place.

Oh that's what it is. In 2.5 we had an arrow pointer showing the mouse position and now we have a plus sign masquerading as crosshairs. As you pointed out, this is backward, the secondary icon in a mouse pinter must be to the bottom right, not to the upper right.

If it's going to be cross hairs instead of the 2.5 mouse pointer, it should be cross hairs and not a plus sign. But crosshairs is for drawing and not dragging - it should be an arrow like in 2.5. You don't get crosshairs when dragging files in Finder.

[Bryan Rieger]

So, my 2¢ is that the MASSIVE icons that appear when you interact with the page thumbnails (shown above) are really unintuitive, and I feel like I'll need to keep a desktop reference to decipher what on earth they're supposed to indicate. Why when I drag a page do I get an icon showing me dragging 3 pages? Would it be possible to display what action is being represented in the icon by also displaying a text description in the status bar?

Hiding functionality behind a plethora of keyboard shortcuts is great for power users, but there is ABSOLUTELY NO DISCOVERABILITY for more casual users, or folks coming to the apps fresh. This desperately needs to be made more intuitive, and user friendly.

They're also REALLY BIG, but still really indecipherable.

[Patrick Connor]

All the current placement icons are placeholders and the feature should not be judged by them, thank you.

[Evaluation complete.]

4 hours ago, Patrick Connor said:

All the current placement icons are placeholders and the feature should not be judged by them, thank you.

Shutting the stable door after the horse has bolted? 🙂

[EmT]

Hi @MikeTO

Thanks for your feedback. 

19 hours ago, MikeTO said:

Page move options: Should this be disabled in a non-facing pages document?

This option can also affect behaviour in ambidextrous documents so it is correct that this is not disabled. 

19 hours ago, MikeTO said:

Capitalization: You normally use title case in panel menus but there is a lot of sentence case in this panel menu.

I've logged this up thank you. 

19 hours ago, MikeTO said:

Move following pages: This checkbox appears in Spread Properties when applied only to selected pages. What does this do?

It looks like this is missing the following tooltip on Mac, which I'll get logged up. "When changing page sizes move following pages on the spread to avoid gaps and overlaps".
 

[bbrother]

On 10/22/2024 at 6:15 PM, MikeTO said:

But crosshairs is for drawing and not dragging

I don't know where you got that information from, but your assumptions are wrong.

In UI/UX, the crosshair symbolizes precise pointing or manipulation. It is a signal to the user that the operation requires accuracy and precise positioning. It eliminates guesswork and increases precision, helping users focus on alignment and precise positioning. When reorganizing pages and layouts in the pages panel, I consider its use reasonable.

 

On 10/22/2024 at 7:58 PM, Bryan Rieger said:

So, my 2¢ is that the MASSIVE icons that appear when you interact with the page thumbnails (shown above) are really unintuitive

As for the icons, which are cues at possible actions in pages panel, after a day of testing the new page management system I have no problem recognizing their meaning, so I guess they are not that unintuitive. They're look refers to the new options for adding pages, they are very simple and you can tell that someone put some thought into them. The size or color is debatable, but the basic concept is moving in the right direction.

@Patrick Connor, is this the lead UI/UX designer in action and the first effects of his management? If so, I'm positively surprised.

[MikeTO]

Apply Master > Conform Pages > Size and Count: If I apply a 4-page master to get rid of a ghost page and in Apply Master, select "Size and Count" and to "Current Spread", nothing happens. I have to select "Size and Count" and to "Specified Pages 2-5" for the change to take effect. Why is there a difference in the outcome?

Mouse pointers: I suggested getting rid of the secondary cues in the mouse pointers and making it more like 2.5, but to do this you'd need another way to indicate which side of the spine a page was being added to. I think the drop cue could be tweaked to indicate the side and then the pointer could just be an arrow.

In this example, I have a 4-page spread with the spine between pages 4 and 5 (left screenshot). When I drag a page over the spine, the spine disappears and the cursor shows where the page will be dropped (middle screenshot). But why not indicate the side of the spine with the blue bar and a gap as you're already doing for spreads with Reflow turned on (right screenshot)? I could drag the page over the spine and Publisher would show the blue bar on the left or right side of the gap to indicate which side of the spine I'm dropping it on. This would eliminate the need for custom mouse pointers.

   

Moving the spine: Currently, moving a page from one side of the spine to another is trick. In this example, the spine is between 4 and 5 and I want it to be between 3 and 4 (left screenshot). If I drag page 4 to the right of the spine (middle), I end up with what is shown on the right.

It might be nice if users could just drag the spine - click the spine and it gets selected with a blue border and then drag it within the spread. Another option, select the spread and drag left to move the spine right and drag right to move the spine left. Either of these would save some mental gymnastics.

  

@bbrother On macOS, the pointer should be an arrow when dragging something to a new location and it should be a crosshair when defining a rectangular area or drawing something. Affinity uses the 4-way arrow cursor for dragging.

[fde101]

17 hours ago, bbrother said:

the crosshair symbolizes precise pointing or manipulation

The targets and the source objects are far too big to warrant the level of precision implied by the use of crosshairs.

The cursor could be a solid square that encompasses the normal mouse pointer and it would have enough precision for this operation.

 

17 hours ago, bbrother said:

I'm positively surprised.

At how badly they are placed and how poor the contrast is compared to the crosshairs that were misused for their presentation?

As placeholders I get it that the contrast against the actual hot zone might be a bit off for now, and the icons themselves are probably as good as anything as a concept (and yes, using distinctive icons to help recognize what is happening is not a bad thing, but most of it could just as easily have been integrated into the way the drop zone target shows up - much as @MikeTO suggested above - and that would be less obtrusive than the giant icons against the hard-to-see crosshair... but whatever...)

What doesn't really fit in with the whole "placeholder" thing though, is how do you flip the whole thing upside down like that?

In any case, so long as they are aware of the problems this is presenting, I will simply hope for now that they get those things fixed before the release.

 

10 hours ago, MikeTO said:

I think the drop cue could be tweaked to indicate the side and then the pointer could just be an arrow.

Agreed.  Just use the standard circled "+" to show when pages are being copied instead of moved.

For "shuffle" vs. "extend" just show the drop target separated from the spread when shuffling and attached to the existing spread when extending.

For applying/adding a master use an outline drop zone around the page being applied to, or a rectangle drop zone when creating a page from a master.

 

As to which side things are on, take a cue from the way video editors show which side of a cut is selected:

 

Resolve:

 

   Left side selected

  Right side selected

   Both sides selected

 

 

Lightworks:

   Left side selected

    Right side selected

  Both sides selected

 

You could similarly shape the way the drop targets are highlighted.

Doing it through the drop zone would provide a massive amount of feedback in context with a lot less room for misinterpretation and without needing a library of fancy new icons for people to memorize.

[fde101]

Something sort of like this:

[MikeTO]

There's a bug with extending spreads to the right. With two, facing-page spreads:

• If Reflow Through Spread is on for the first spread and I drag spread 2 before or after spread 1, there will be no drop zone to create a multi-page spread. Perhaps this is to avoid accidentally creating spreads so fair enough.
• If Reflow Through Spread is off for the first spread and I drag spread 2 before spread 1, I'll get the second of these two mouse pointers indicating that it will extend the spread left. This works properly.
• If I drag spread 2 after spread 2, I'll get the first of these two mouse pointers indicating that I will extend the spread right, but when I release the mouse button nothing happens. It should extend the spread if that's what the pointer is indicating.
• Only if If Reflow is off for the second spread, too, can the two spreads be joined together on the right side.

 

 

[MikeTO]

When you drag a page next to another spread to extend a spread, the target spread shifts when the source is over the extend zones, shifting the rather narrow extend zone and making it harder to hit the target. I often have to move the mouse a second time to find the target.

It's less of an issue with XL thumbnails but with medium thumbnails and the really large mouse pointers you can't see what you're doing or find the target. The XL thumbnails are too large for a laptop and the M and L ones are almost identical sizes if you add a 4-page spread to a document so I wish the zones would just stay put.

FWIW, I find the shifting spreads rather lovely even if I find that it makes it more difficult to hit the target. And maybe the drop zone isn't really shifting, but it feels finicky.

 

[Affinity Info Bot]

The issue "Page options not in Title Case " (REF: AF-4775) has been fixed by the developers in the latest beta build (2.6.0.2831). The fix is planned for inclusion in the next customer release.
Customer beta builds are announced here and you can participate by following these instructions.
If you still experience this problem once you are using that build version (or later) please reply to this thread including @Affinity Info Bot to notify us.

[Affinity Info Bot]

The issue "Mac is missing tools tips in Spread Properties" (REF: AF-4776) has been fixed by the developers in the latest beta build (2.6.0.2831). The fix is planned for inclusion in the next customer release.
Customer beta builds are announced here and you can participate by following these instructions.
If you still experience this problem once you are using that build version (or later) please reply to this thread including @Affinity Info Bot to notify us.

[Evaluation complete.]

On 10/22/2024 at 7:58 PM, Bryan Rieger said:

Would it be possible to display what action is being represented in the icon by also displaying a text description in the status bar?

If I were Serif, I would display the result of the action dynamically in the status bar as you drag the page icon around, something like “Move page 11 after page 14,” so that the outcome of the action you’re performing is predictable and entirely clear for everyone. I find it a bit odd not to use the status bar actively for this in general.

[bbrother]

No one should have a dilemma now with the new interaction icons.
Good change, I wouldn't change them anymore.
The only word that comes to my mind when I see them is "Bullseye" 🏹🎯

[fde101]

Yes, the mouse pointers are significantly better than the placeholders were.

The panel still seems to leave excessive empty space around the spreads, however.  Not horrible, but could easily be improved.

It would also be nice to have a modifier key that bypassed the whole "reflow pages" thing without having to open the properties box and uncheck the box.

[Evaluation complete.]

If I were an examiner in UX, and a UX designer suggested a pointer icon that changes to a down arrow when dragging a page thumbnail upward to move it from page 10 to page 2, my assessment would likely be critical. I would give a low score because such a design choice conflicts with established user expectations around directional indicators. Arrows are widely understood as cues for direction, and swapping to a downward arrow when performing an upward action introduces unnecessary cognitive friction and can lead to confusion. I would emphasize the importance of consistency and clarity in UX design, especially with directional indicators that guide user interaction intuitively.

[fde101]

23 minutes ago, Ingelise said:

Arrows are widely understood as cues for direction

The symbol used to indicate you should press down on the shift key is an arrow that points up.

In this case I took it to mean you had picked up a page and were putting it down where the highlight is located.

Not ideal, not really necessary as the action in that particular case should be rather obvious anyway, but massively better than the old indicator.

[Evaluation complete.]

If the arrow is supposed to suggest “Put the page DOWN here,” then the symbol should convey that visually and not look like a road sign. You’d need to picture lifting the page to move it, but that idea seems to exist only in Serif’s minds, as if we all have that image. I’m moving my mouse flat across the table, looking at page numbers as I go up or down in a sequence. I navigate the screen by numbers and thumbnails, moving up, down, right, and left. I’m not automatically imagining a physical paper analogy where I’m rearranging sheets in three dimensions and that I now have a piece of paper in my hand that needs to be placed down.

This icon from InDesign won’t win any aesthetics awards, but at least it doesn’t point in the wrong direction. And if you like child-like drawings, you could probably quickly associate it with your hand moving a piece of paper. 🙂

The symbol for the Shift key, an upward arrow (⇧), originates from the typewriter era. On mechanical typewriters, the Shift key was used to switch between lowercase and uppercase letters by raising the type head, which changed the text position. The upward arrow symbolizes this "upward" shift in text size. Although you physically press the key down, the arrow represents the functional change to uppercase letters or alternative characters. Therefore, it is a symbol that has established itself over time, but it does NOT mean press down. It literally means up in size (And some might even think of raising the type head, back in. the day, which is also quite fitting). Today, one would probably choose something based on "Aa" symbolism if we weren't standing on the shoulders of history.

[fde101]

3 hours ago, Ingelise said:

this "upward" shift in text size

Actually, I believe it symbolizes the movement of the mechanism itself (which may or may not be a "head" depending on the specific typewriter technology; the first shift key was on a typewriter that moved the paper relative to the type mechanism instead of the other way around).  Some lowercase letters are as tall as the uppercase ones... not that it really matters in the end.

[matisso]

On 10/22/2024 at 5:15 PM, MikeTO said:

Reflow through spread: I think it would be easier to understand if the checkbox was reversed and named “Do not Reflow Spread”.

Good heavens, no. A selected checkbox indicates a confirmation, something that is set to “on”. Bad practice to complicate that. This idea is like placing a sign upside down and telling people ‘just bend over backwards and you’ll read this easily.’ You simply don’t use negative labels like this and confuse users.

Fun related fact: one product in the company I worked for used a similarly worded label and, adding insult to injury (actually, doubling the injury seems more fitting), someone had a “clever” idea to use a toggle without on / off states, only coloured red and green instead. Good luck figuring out whether this was red because the parameter it controlled was effectively disabled, or perhaps actual disabling it (per the label) was …turned off? The product manager said he had a mind***k every time he saw that, lol.