Create a way for readers to interact with image of the weaving piece through its annotations so that they can learn about it in more details

[gissoo]

todos based on 9/1 conversation with RSK

• Look into deep zoom alternatives
• explore ways of interacting/navigating through the weaving with zoom
• suggest how zoomed in the weaving image should be for different screens
• propose an overall page theme/dark mode for the short piece as deep zoom feature is dark
• look into openseadragon's features

decisions based on 9/1 conversation with RSK

• page numbers and references be the only information about the weaving shown on this short piece page (not including header info)
• visual reference indicators to appear on click on desktop and be shown by default on mobile
• preference is to use the contextual note style in grey as shown on Figma, – dependent on RSK's to-do list item to find out whether contextual note logic is doable in deep zoom

[gissoo]

@rlskoeser @thatbudakguy @gwijthoff Here are some revisions that represent how I'm thinking about the weaving image annotations

Notes:

• As shown on Figma, I am thinking about separating what each weaving type means and what the weaving type's name from what information each page consists of. (i.e. they would both have contextual notes)

• Please take a look at the nav versions (made up of the designs I prefer from the "Default" and "selected" versions)

• @rlskoeser please take a look at the mobile screen under the "Coordinates?" and let me know if this helps at all

[rlskoeser]

Hi @gissoo, thanks so much for your work on this. I'm really intrigued by the ways you're labeling the page segments on the weaving.

I'm sorry, but I'm having trouble understanding your notes.

• Can you explain more about separating weaving "type" from "name" ?
• I'm not sure what you feedback you want on the nav versions. If we're supposed to be looking at the page labels, I like how the version with the straight lines marks where the pages are.
• On the coordinates or mobile: I'm not sure we can be that fine-grained in our definition of the coordinates for each annotation region on the image. However, it did occur to me yesterday that we could try using the simple annotation server to draw the regions on the IIIF image and see if we can use those coordinates for the viewer — that supports polygons and maybe even freehand shapes, so we may be able to get a lot more accurate shapes than just calculating rectangles based on coordinates in the image.

There are some technical constraints with the way I was planning to implement this that I didn't make clear to you, I apologize — they were in my prototype, but we didn't discuss which things could be changed.

The biggest one is: I want to implement this in the SeaDragon deep zoom viewer so that we can get the really high-resolution images of the weaving without having to load an enormous image all at once. This means the background for the weaving will be black.

I would prefer to have the weaving horizontal instead of vertical because that seems more like reading and more like the way that we "read" and typically present the weaving to people in person. Did you consider making it horizontal? Did you reject this approach for some reason?

I wanted the modal display for the individual references to contain the information from the Derrida's Margins site. Here's a a screenshot of one of the references on the site:

I'm not sure how this content fits in a contextual note; if you think it does, in the next revision could you include designs for how the reference card content would be displayed?

[gissoo]

Hi @gissoo, thanks so much for your work on this. I'm really intrigued by the ways you're labeling the page segments on the weaving.

I'm sorry, but I'm having trouble understanding your notes.

* Can you explain more about separating weaving "type" from "name" ?

• I don't recall separating type from name – earlier I mentioned separating what each weaving type means and what the weaving type's name is from what information each page consists of – I was referring to what each page consists of vs. a general overview of what weaving type corresponds to what reference type – is this unclear?

* I'm not sure what you feedback you want on the nav versions. If we're supposed to be looking at the page labels, I like how the version with the straight lines marks where the pages are.

* On the coordinates or mobile: I'm not sure we can be that fine-grained in our definition of the coordinates for each annotation region on the image. However, it did occur to me yesterday that we could try using the simple annotation server to draw the regions on the IIIF image and see if we can use those coordinates for the viewer — that supports polygons and maybe even freehand shapes, so we may be able to get a lot more accurate shapes than just calculating rectangles based on coordinates in the image.

• great! The weaving is very crooked at certain areas, I first tried a simple rectangle but it won't be very useful.

There are some technical constraints with the way I was planning to implement this that I didn't make clear to you, I apologize — they were in my prototype, but we didn't discuss which things could be changed.

The biggest one is: I want to implement this in the SeaDragon deep zoom viewer so that we can get the really high-resolution images of the weaving without having to load an enormous image all at once. This means the background for the weaving will be black.

• It would be useful to take a look at your prototype first as I'm not sure what else would change from how I'm thinking about it, and I'm not sure how much of the designs and nav I'm proposing will work or I would prefer to be incorporated with the constraints. It would always be better to talk about the constraints first so the design outcomes would make sense for that context.

I would prefer to have the weaving horizontal instead of vertical because that seems more like reading and more like the way that we "read" and typically present the weaving to people in person. Did you consider making it horizontal? Did you reject this approach for some reason?

• I'm not a fan of the horizontal nav here and find it hard to follow, especially digitally. One of the main reasons is that the way the weaving was made is vertical, the workflow was all vertical. Reading the references vertically you can see them in rows which look like lines and overall like a scroll, which I think is fine. I think if a reader goes to learn about how the piece was made it will also be confusing because they make it vertically and have to view it horizontally. If I were to read it horizontally from the beginning I would have proposed to make the weaving much narrower it would have been easier to read it that way.

I wanted the modal display for the individual references to contain the information from the Derrida's Margins site. Here's a a screenshot of one of the references on the site:

I'm not sure how this content fits in a contextual note; if you think it does, in the next revision could you include designs for how the reference card content would be displayed?

• Thanks for bringing this up, meant to ask you that I feel something is missing here – should have asked you to help me write some requirements for this issue, as we kept discussing this on and off before finally getting to it.

I have revised it and written below about it, but would be worth to talk about what content should go on this page more specifically, I'm a bit confused now, because there can be so much, and some nav decisions also depend on what ends up being a footnote/if you want to include all sources as footnotes at the bottom.

@rlskoeser please look at the "Navigational Versions" and the newest revisions are next to it, under "Default view versions" and "Latest selected view version" here

[gissoo]

@rlskoeser I finally have some things to show:
Please look here – zoom out as it will probably be too zoomed in

In the designs, you can see:

• default view of the weaving image, including how zoomed in it should be. I prefer the ones that are already zoomed in, where page numbers and a polygon are already showing and ready to be interacted with, because that makes it easier to begin interaction. I would recommend we show polygons with 50% transparency on default view.

• selected view for desktop, tablet, and mobile with the contextual note container. I think as long as the note container appears at the bottom of the weaving it's fine, preferably in the center of the page.

• I have experimented with full-width vs. the standard image sizes (the dimensions we have already agreed on)

• some ways that aim to improve the experience of zooming in and out. I prefer "zooming - v3" – or what they are doing here (note: the first link is dead now, here is another place I found it) – I find it really easy to control. I would strongly suggest that we do not zoom in and out by clicking/tapping or scrolling on the image, it makes the experience very poor and unreliable. can we use a slide bar to zoom in and out instead of the + - buttons?

• experiments with image width. I'm thinking "what if we make the weaving image container full width here? I know it’s not consistent with our image styles, but this is different, the weaving image is the most important part of this page." – both versions are there

Another comment:

• moving through the weaving by dragging the image left and right as it is now is great.

Please let me know your thoughts.

[rlskoeser]

@gissoo thanks for your work on this, very exciting to see.

I like the dark gray background! Would these colors make sense as a dark mode generally, or would there be more work to get to a full set of styles for dark mode?

• I prefer the zoomed in versions. Displaying numbers and polygons from the outset makes sense to me, suggested transparency sounds good.
• On desktop is it ok for the contextual note to point to the anchor link ? I think this is how it will work if I don't do anything, and would prefer not to override if we don't have to. (Although if it's a set location, then overriding might not be too hard.)
• I prefer the full-width version. The weaving image is smaller than I'd like on mobile, even at full-width. Can we go larger or will it cause problems? Does the larger version not give enough context / number of pages at once?
• Is it important to allow zooming in and out? My initial thought was to only allow scrolling/panning through the image, to concentrate on the close up view.

In terms of deep zoom controls and navigator, I will have to experiment more to see what I can do – I think I can do something like what you've designed for the navigator, but I don't know how much we can customize it.

I'm not sure how much this impacts your designs, but I don't think this piece will have a DOI or a PDF version (it doesn't work as PDF). I also think we need at least a short paragraph introducing the piece and linking to the full DBV essay, which I do wonder about in terms of layout.

We discussed displaying the footnotes at the end like we do on regular articles, although thinking about it again I'm not sure how helpful they are. If we didn't care about displaying them, could the weaving image be given more space?

[rlskoeser]

On the contextual note, what does the red 1 indicate?

[gissoo]

@gissoo thanks for your work on this, very exciting to see.

I like the dark gray background! Would these colors make sense as a dark mode generally, or would there be more work to get to a full set of styles for dark mode?

• Yes, these colors would make sense as a dark mode generally – my original intention was to make it generalizable. I can look into a logic for it though and its purpose and scope – but what you see works for this page ...

* I prefer the zoomed in versions. Displaying numbers and polygons from the outset makes sense to me, suggested transparency sounds good.

• great!

* On desktop is it ok for the contextual note to point to the anchor link ? I think this is how it will work if I don't do anything, and would prefer not to override if we don't have to. (Although if it's a set location, then overriding might not be too hard.)

• where are the anchor links? on the polygons? As long as the containers don't cover the weaving image then it should be ok. But please let me know where the anchor links are.

* I prefer the full-width version. The weaving image is smaller than I'd like on mobile, even at full-width. Can we go larger or will it cause problems? Does the larger version not give enough context / number of pages at once?

• I increased the zoom, but also increased the overall height of the black container because we need space for the metadata and other things on top of the image in the black container: Please see here, I think this is better, but I wouldn't go more than this.

* Is it important to allow zooming in and out? My initial thought was to only allow scrolling/panning through the image, to concentrate on the close up view.

• I think it would be nice to have it if we can. I find it important here.

In terms of deep zoom controls and navigator, I will have to experiment more to see what I can do – I think I can do something like what you've designed for the navigator, but I don't know how much we can customize it.

• thank you, Rebecca!!!

I'm not sure how much this impacts your designs, but I don't think this piece will have a DOI or a PDF version (it doesn't work as PDF). I also think we need at least a short paragraph introducing the piece and linking to the full DBV essay, which I do wonder about in terms of layout.

• I think it's fine! I can add dark mode body text styles – let me think about how impacts the contextual notes, it shouldn't really.

We discussed displaying the footnotes at the end like we do on regular articles, although thinking about it again I'm not sure how helpful they are. If we didn't care about displaying them, could the weaving image be given more space?

• it would be better to display them! How can we make this page accessible? Will a screen reader read through the notes?

[gissoo]

On the contextual note, what does the red 1 indicate?

• please ignore that, I'll fix it

[gissoo]

@rlskoeser also I made page numbers to start from 15 ...is this ok? I didn't apply it on all versions yet. I think it might be less confusing that way, not sure.

[rlskoeser]

@gissoo yes, agree with using actual page numbers

[rlskoeser]

@gissoo I'm making progress on the implementation!

Some questions:

• I'm having trouble figuring out from Figma what height the deep zoom container should be on the different size screens. Can you advise?
• Can you spell out in more detail (maybe annotate in Figma?) what content you think should be included in the contextual note? It looks like you have reference type, title (underlined), author, anchor text, citation, and image. On the site we include publication year and page number, did you intentionally omit these? I was also wondering what you thought about dropping the "cited in dlg page xx'; we have that information in the weaving, do we need in the note also?

I'm not sure what the right zoom levels are, but I'm hoping I can figure it out relative to the container size for different screens once I have that.

Updated to add another question:

• if you want to include the endnote version of the notes, please provide designs for how they should look. My main question right now is, where does the reference type go? (Everything else might be standard)

[gissoo]

@gissoo I'm making progress on the implementation!

Some questions:

* I'm having trouble figuring out from Figma what height the deep zoom container should be on the different size screens. Can you advise?

• My intention for the height, approximately is fine too, on desktop: 604px, on tablet: 454px, on mobile: 230px – this is only if we go by the "Full width – increased zoom" version, which I preferred. Is this also what you preferred?

* Can you spell out in more detail (maybe annotate in Figma?) what content you think should be included in the contextual note? It looks like you have reference type, title (underlined), author, anchor text, citation, and image. On the site we include publication year and page number, did you intentionally omit these? I was also wondering what you thought about dropping the "cited in dlg page xx'; we have that information in the weaving, do we need in the note also?

• I think it would be better if we make this part more collaborative, you have more context about the content. I think publication year and page number would also make sense! Regarding the cited part, the only thing that comes to mind is accessibility, does this matter? I had a question earlier above (maybe we should chat if it's easier to get some answers to my question) about accessibility. If the user with impaired vision navigates the weaving annotation (via keyboard-is this possible for deep zoom?) do they hear something like "this is a citation on page 11 of ..."?

I'm not sure what the right zoom levels are, but I'm hoping I can figure it out relative to the container size for different screens once I have that.

• I think my intention for the default view at least is for it to be visually very close to what I have proposed in the designs, for instance if we go with the "Full width – increased zoom" version then the default zoom/starting point would be very close to that - please let me know how I can help - would it be worth at all if I try to mock up different zoom levels?

Updated to add another question:

* if you want to include the endnote version of the notes, please provide designs for how they should look. My main question right now is, where does the reference type go? (Everything else might be standard)

• Sure! thanks for reminding me about this one. I'll add to the designs.

[gissoo]

@rlskoeser I have revised this page

• now includes the tag in the article – I tested it with small caps and caps, and it looks very imbalanced with the rest of the content in the header, is it ok if we just do it this way? Can we do it this way in the single issue page as well?
• now includes styles for the end notes and I revised the contextual note shown on the other pages to the exact reference detail – please let me know if the end notes make sense to you. I did omit the reference type and page number in the contextual note, but included it in the end note in light purple as a way to indicate what we are referring to. If this is still not super clear we can number the annotations? Because this style is different from the other endnotes in our other essays since saying "Epigraph, p. 15", other than "p.15" nothing in the end note really helps the user identify where they should click on to find the contextual note (if that matters at all). If it doesn't matter I prefer the way it is now.
• Is the formatting of the end note ok? Do we want to follow how the info is laid out on Derrida's site? Or should we follow a more formal citation format?

[gissoo]

Also: @rlskoeser

• should the contextual note cover the end note? Or will the end note be pushed down when there is an open contextual note on the page? I assume covering it is fine.
• are we embedding images from the references (from Derrida's site) into the contextual note and end notes? I have included an image placeholder just in case.

[rlskoeser]

• I like what you've done for the tags (I'd been having second thoughts about the caps myself). Do the tags on the issue page need to be changed to match this?
• End notes look really good. A few comments:
  • I'd prefer to do title (year) for titles that have years instead of adding the "publication date:" line
  • The page number bothers me for some reason. Is there a way to attach it to the quote, maybe?
  • I'm not sure "Epigraph, p.15" is enough context, but I think you're on the right track; what if we keep the old format (cited in dlg page xx) but only display it in the end note and not the contextual note
• Contextual notes and end notes can never be viewed at the same time (they're the same thing and can't be in two places at once). I'm trying to make sure end notes are pushed down below the page to solve that. (It's harder here where there isn't text content at the bottom to help.
• Yes, I'd like to include images in the contextual notes for books that have them. Thanks for including.

[gissoo]

* I like what you've done for the tags (I'd been having second thoughts about the caps myself). Do the tags on the issue page need to be changed to match this?

• great! Yes!

* End notes look really good. A few comments:
  
  * I'd prefer to do _title_ (year) for titles that have years instead of adding the "publication date:" line
  * The page number bothers me for some reason. Is there a way to attach it to the quote, maybe?
  * I'm not sure "Epigraph, p.15" is enough context, but I think you're on the right track; what if we keep the old format (cited in dlg page xx) but only display it in the end note and not the contextual note

• I felt exactly the same about the page number, ok please check out the revised version here
• regarding the "Epigraph, p.15", I still rather keep it as is, but add the number as shown in the design – I totally agree about the old format but to "only display it in the end note and not the contextual note" as you have mentioned, yes!! – BUT it's better if we don't do the superscript version if possible, because I think it lacks the visual focus on this page, and I would rather that there is some visual connection between what the user sees on the annotated image and the end note, especially because there are too many numbers involved on this page.

* Contextual notes and end notes can never be viewed at the same time (they're the same thing and can't be in two places at once). I'm trying to make sure end notes are pushed down below the page to solve that. (It's harder here where there isn't text content at the bottom to help.

• great! Thanks

* Yes, I'd like to include images in the contextual notes for books that have them. Thanks for including.

[rlskoeser]

@gissoo I think your design work for this piece is done! 🎉 Should we close?

[gissoo]

@rlskoeser should Grant review anything before we close?

[rlskoeser]

@gissoo I don't know!

@gwijthoff do you want to review the designs for our experimental piece? Do you have time?

[gwijthoff]

@rlskoeser @gissoo @thatbudakguy I think it's safe to close and then we can send to Camey for copyediting. Not sure I'll have enough time to give it a thorough review at this point, but that's okay