Princeton-CDH / geniza

version 4.x of the Princeton Geniza Project
https://geniza.princeton.edu
Apache License 2.0
11 stars 2 forks source link

Design mobile and tablet wireframes of document detail page to communicate the content structure, page layout, and content variations to the project team #88

Closed gissoo closed 3 years ago

gissoo commented 3 years ago

This issue tracks design work through the CDH design review workflow.

Here is a link to the mobile and tablet wireframes on figma – note: once the page opens zoom out on the Figma page to view everything

Description:

The designs are for the following pages (the revised sitemap is on this figma page as reference):

also covering variations with:

Updates: (most of the decisions here need usability testing) + (updates below are same as the ones on #91)

specific designs aspects covered in this issue:

How the proposal/idea can fail:

  1. I have proposed two ways of using the grid on tablet – one of them is narrower, which is more like the mobile version but I think it will make the page very long
  2. Depending on how the content will look like on Scholarship Records, External Resources may not make sense on its own – because this page is only about informing the user about what libraries/institutions hold info about this particular document – it's a bit more general than scholarship records (and I want to avoid nesting them) – but if it can be incorporated as part of Scholarship Records naturally with its content then we may not need that page.
  3. I propose that we navigate through images and transcriptions together – selecting to view image 2 will also show the user the transcription for image 2 – this idea is the most preferable usability-wise but it might fail if we can't support it

Questions:

  1. Does the idea and/or the design make sense to you? If not, please say why
  2. Within the context of this issue, is there anything that you expected to see and is missing?
  3. Please let me know what you think about the proposal for the grid on the tablet – including tablet as it might be helpful, but we don't have to focus on it if you don't need it now
  4. Can we do this?: for the user to select a line of text /area of text on the image (that is already outlined) which would visually focus/highlight the piece of transcription that corresponds to it?
  5. please view the question on the sitemap about "adding external sources" and let me know what you think.
  6. If we are filtering and sorting by input date, I think we'll need to also have it on the doc detail view, what do you think? Below the doc date field?
  7. just remembering that we might need a "notes" field on these pages, especially the "doc detail"?

Note:

  1. Because this issue and the issue for desktop got a little messy with our conversations on wireframing/fidelity and doing mobile first and uncertainties with how many pages/sections are included in "doc detail view" it's being divided in a messy way this time, the work in each issue will be more structured and appropriately scaled in the future.
  2. Since you're now both editors on Figma it should be easier to view the labels I have written for each frame (which should further help with understanding what each page is.
gissoo commented 3 years ago

@rlskoeser @thatbudakguy Please review the designs and answer the questions above.

thatbudakguy commented 3 years ago
  1. things that didn't make sense to me:
    • in "document details - without description", i expected to see the "suggest a description" button in the same place that the description is displayed on other screens, i.e. above the image instead of below it. i think the ordering should be consistent even if information is missing in some sections.
    • in general, if a document has no citations/external sources/shelf read/etc, I don't think we need to display the UI options for them, since it would just take users to the equivalent of an empty page.
    • i don't understand how the viz for scholarship records works. it seems to imply that a work can be e.g. "partially a translation", and that we can measure "how much of a translation" a work is. like the proposed viz for the document categories, i think this would be hard to implement.
    • i don't know what the difference between external sources and scholarship records is...but maybe this is just my bad? can't recall if we've talked about this and i'm just missing something. what would an example of an external source be?
    • pages other than the document detail page seem to be "about" (or, in the hierarchy, "underneath") a particular document's detail page, but there's no information on the page about which document you're currently viewing. for example, if i viewed the external sources for a particular document, i can't see the document's shelfmark or other info at the top of the page, so I don't know which document's sources I'm viewing.
  2. nope, i don't think anything is missing!
  3. if there is a link to "view entire fragment" from a document's page, the fragment page to me is not "under" document details. that page is for the fragment and all the documents that are listed on it, and it doesn't "belong" to any one of those individual documents. conversely, if you can navigate to the fragment's page via a different UI, like "explore fragments", there should still be a link to "view entire fragment" from each document that is on that fragment. I think both modes of access should be supported, and we don't want to privilege one way of getting to the page - just like how you can get to a book in s&co from a person's borrowing list or from the book search.
rlskoeser commented 3 years ago

Hi, @gissoo. As usual, Nick and I have a lot of overlap in our feedback.

  1. things that don't make sense to me

The biggest one is that I'm still confused by structure of the pages you're proposing. If you're not ready to put the pages you're proposing into the full sitemap, could you provide a partial/local sitemap for this section? Although I'm not sure I understand why they aren't in the full sitemap; it seems like the sitemap and the designs for this portion should match. (It occurs to me that it might be a good practice to provide a mini sitemap with designs by way of orientation, like a "you are here" map. Curious what you think.)

In particular, I think that "shelf read" should be at a higher level hierarchically than document detail, and "view entire fragment" would probably be parallel hierarchy, not underneath a single document, since it needs to be accessible from multiple documents. From these designs I can't tell how you're thinking about the relative hierarchy of those pages. (Also, have we discussed whether shelf read is in scope? That might be a later phase)

I also was unclear on the difference is between external sources and scholarship records. Do we really need both?

I like the idea of the viz for scholarship, but Nick is right that it doesn't quite make sense the way you have it. Perhaps we could instead provide an aggregate viz showing the total number of each type of scholarship record, to provide a quick way of conveying the shape of the documented scholarship for this document? FYI, the categories they came up with to track in the database are: Edition, Translation, Discussion

You have editor listed on the main page, but this is also part of the scholarship record. Is it important enough to list twice?

  1. I think I missed this on your previous iteration of designs: I see the cluster information, but are you listing all tags anywhere? (I just checked and I guess I also failed to notice this was missing on the sitemap content list; sorry 🤦‍♀️ )
  2. I like both options for navigating to the entire fragment; the first one is more appealing if we can do it, but I'm not sure how much effort it will be to make it work for all fragments and match your vision. I do wonder why you have this listed before the the document description, image and transcription; is it more important than that information? Should it not be further down the page, as a kind of supplemental reference?

Other comments:

I agree with Nick, I would prefer not to link to empty pages (e.g. documents with no scholarship records); we do this on S&co for the membership activity, and when I'm using the site I find it annoying. Can we either suppress the link or make it visibly disabled? Another option, could we include a number in the nav to give a sense of how many records are available?

I agree with you, I don't think the vertical side nav works as well (although the idea is still kind of appealing for some reason...).

I think designs for shelf read and view entire fragment should be out of scope for this issue, and I don't think shelf read is in scope; would you mark it as potentially out of scope / long term?

Regarding view entire fragment: your current design seems like it's privileging documents more than the fragment. I think you should make a separate issue for this design, but whenever you return to it, I'd be interested to see a design that privileges the fragment over the documents.

gissoo commented 3 years ago
1. things that didn't make sense to me:

* in "document details - without description", i expected to see the "suggest a description" button in the same place that the description is displayed on other screens, i.e. above the image instead of below it. i think the ordering should be consistent even if information is missing in some sections.
* in general, if a document has no citations/external sources/shelf read/etc, I don't think we need to display the UI options for them, since it would just take users to the equivalent of an empty page.
* i don't understand how the viz for scholarship records works. it seems to imply that a work can be e.g. "partially a translation", and that we can measure "how much of a translation" a work is. like the proposed viz for the document categories, i think this would be hard to implement.
* i don't know what the difference between external sources and scholarship records is...but maybe this is just my bad? can't recall if we've talked about this and i'm just missing something. what would an example of an external source be?
* pages other than the document detail page seem to be "about" (or, in the hierarchy, "underneath") a particular document's detail page, but there's no information on the page about which document you're currently viewing. for example, if i viewed the external sources for a particular document, i can't see the document's shelfmark or other info at the top of the page, so I don't know which document's sources I'm viewing.
1. nope, i don't think anything is missing!

2. if there is a link to "view entire fragment" from a document's page, the fragment page to me is not "under" document details. that page is for the fragment and all the documents that are listed on it, and it doesn't "belong" to any one of those individual documents. conversely, if you can navigate to the fragment's page via a different UI, like "explore fragments", there should still be a link to "view entire fragment" from each document that is on that fragment. I think both modes of access should be supported, and we don't want to privilege one way of getting to the page - just like how you can get to a book in s&co from a person's borrowing list or from the book search.
gissoo commented 3 years ago

Hi, @gissoo. As usual, Nick and I have a lot of overlap in our feedback.

1. things that don't make sense to me

The biggest one is that I'm still confused by structure of the pages you're proposing. If you're not ready to put the pages you're proposing into the full sitemap, could you provide a partial/local sitemap for this section? Although I'm not sure I understand why they aren't in the full sitemap; it seems like the sitemap and the designs for this portion should match. (It occurs to me that it might be a good practice to provide a mini sitemap with designs by way of orientation, like a "you are here" map. Curious what you think.)

In particular, I think that "shelf read" should be at a higher level hierarchically than document detail, and "view entire fragment" would probably be parallel hierarchy, not underneath a single document, since it needs to be accessible from multiple documents. From these designs I can't tell how you're thinking about the relative hierarchy of those pages. (Also, have we discussed whether shelf read is in scope? That might be a later phase)

I also was unclear on the difference is between external sources and scholarship records. Do we really need both?

I like the idea of the viz for scholarship, but Nick is right that it doesn't quite make sense the way you have it. Perhaps we could instead provide an aggregate viz showing the total number of each type of scholarship record, to provide a quick way of conveying the shape of the documented scholarship for this document? FYI, the categories they came up with to track in the database are: Edition, Translation, Discussion

You have editor listed on the main page, but this is also part of the scholarship record. Is it important enough to list twice?

1. I think I missed this on your previous iteration of designs: I see the cluster information, but are you listing all tags anywhere?  (I just checked and I guess I also failed to notice this was missing on the sitemap content list; sorry 🤦‍♀️ )
2. I like both options for navigating to the entire fragment; the first one is more appealing if we can do it, but I'm not sure how much effort it will be to make it work for all fragments and match your vision. I do wonder why you have this listed before the the document description, image and transcription; is it more important than that information? Should it not be further down the page, as a kind of supplemental reference?

Other comments:

I agree with Nick, I would prefer not to link to empty pages (e.g. documents with no scholarship records); we do this on S&co for the membership activity, and when I'm using the site I find it annoying. Can we either suppress the link or make it visibly disabled? Another option, could we include a number in the nav to give a sense of how many records are available?

I agree with you, I don't think the vertical side nav works as well (although the idea is still kind of appealing for some reason...).

I think designs for shelf read and view entire fragment should be out of scope for this issue, and I don't think shelf read is in scope; would you mark it as potentially out of scope / long term?

Regarding view entire fragment: your current design seems like it's privileging documents more than the fragment. I think you should make a separate issue for this design, but whenever you return to it, I'd be interested to see a design that privileges the fragment over the documents.

rlskoeser commented 3 years ago

Thanks for responding, @gissoo. Sounds like there are a lot of things you'll be able to resolve or refine further with usability testing, which is great.

Trying to respond to what seem like the most important things, please let me know if there's anything else you want me to address.

Regarding having a section for Fragments on the site — I think expanding the sitemap would help clarify this a lot. The functionality you're proposing implies to me that there needs to be fragments section in terms of the hierarchy of the pages on the site; after all, shelf read is kind of a limited/special fragment browse, right? (contextual browse? 😉) However, we don't necessarily have to advertise or emphasize that part of the site to users. Until/unless we build an interface to explore fragments, you would only be able to get to those pages through the documents — which seems fine to me. If and when we add that "explore fragments" part, then it would give a new entry point to those pages.

Regarding your last point — my comments were unclear, I apologize! I was referring to the wireframe labeled "View Entire Fragment", not talking about the link from the document detail page to the fragment. I agree that we have determined documents should be privileged overall in the site, but for a page that is intended to view a single fragment, isn't appropriate for it to be more fragment-centric? Right now it looks like a list of documents. Is there a way we could see the images for the fragment with the documents that occur on each part, without repeating the fragment images? (Although that will probably result in repeating the documents in some cases...)

rlskoeser commented 3 years ago

@gissoo one more variation you might want to be thinking about and including in your usability testing: multi-page documents. How to display the images and transcriptions?

gissoo commented 3 years ago

@thatbudakguy I have revised the entire description of this issue and have updated the link to Figma – please read and review the wireframes and let me know what you think or if something is missing. If you don't get to it today, no worries, I will be asking Marina and Rachel to review it for next week (I will be tagging RSK so she can also review it if she has the time/ or finds it necessary because this revision is mostly directly addressing your previous comments from last week)

thatbudakguy commented 3 years ago

okay, going in order of your questions first:

  1. still have questions about a few things:
    • I still feel strongly that we shouldn't reorder the sections of the detail page based on whether information is missing. If the "suggest a description" button is with the description when there's a description, but at the end of the page otherwise, we end up writing complex logic like "if A, B, and D are present, put it here, otherwise put it here" which is imo unnecessary complexity. if we do allow users to suggest/change content, the UI for doing that should be where the content would be, even if there's not content there to fill the space.
    • I also don't know what "suggest an edit" does vs. the other "suggest" buttons.
    • still don't know the difference between scholarship records and external sources. you mentioned you were still looking into this, can you explain more? maybe I missed it above.
    • for the info you added to the scholarship records/external sources pages so that the document can be identified, I don't know if we need so much information on these pages. i think we could do something more similar to a person or book detail page for s&co, where the title/name is displayed prominently at the top so you always know which item you're viewing, but the rest of the details are on a detail page. for example, the borrowing activity pages have the member's name at the top, but they don't include any more member details. i think we could do the same thing with shelfmark + pgpid, or some other unique identifier (I still think we need a visible unique identifier for documents, whatever that is).
  2. nothing else missing.
  3. i prefer the more relaxed grid on tablet. i think making tablet look like mobile is to some extent throwing away the benefits of a larger screen; let's use the space when we have it!
  4. i don't know if we'll be able to do highlighting of the image/transcription simultaneously; it might be a long time before we know that. it seems like a complex behavior and something that might not be in the alpha, or even later versions. but it doesn't seem impossible - just complicated.
  5. about allowing users to add more sources, this also seems like something we would build pretty far in the future, if we did it. less complicated than the highlighting thing, probably, but still further down the list.
  6. are we supporting filter/sorting by input date on the public search? i know we have it for the admin site, but not sure if regular users are interested in that info. if we are, then yes, definitely agree – it should be on this page.
  7. iirc the notes are only private for now, so we don't need to display them. I think any public notes would be part of the description?
rlskoeser commented 3 years ago

Thanks to @thatbudakguy for the great comments, you addressed most of this! To explicitly echo/emphasize a few things:

@gissoo I figured out why the external sources is bothering me. It's not just that I don't know what this is — I don't know if or how it's accounted for in our current database design. I don't know if we have this to show.

I also want to expand on Nick's concern about letting users add content — I think we need to be careful how much of this we add, because not only does it mean writing code to support and manage those data submissions; it also means creating workflows for the project team to review and accept submissions and edits. We should prioritize the data submissions they care more about most.

Agree that if any information used to filter/sort on the public search should be visible here. I think Marina was interested in that being available on the public site.

I remember we discussed public notes at some point, but I'm not sure how that's different from description. Would be better if we could stick to one field!

New thoughts from yesterday's meeting:

These don't need to be incorporated into the current designs! Maybe can be included in a later iteration if you think it makes sense.

gissoo commented 3 years ago

@thatbudakguy @rlskoeser thanks for the comments:

  1. I agree, I didn't before, but then more design principles came to my mind so I sought some advice and I agree with you now, thanks for bringing it up again
  2. I agree about the relaxed grid on tablet as well
  3. I have written some notes above about "external sources", I think this tells me that my descriptions are too long or overwhelming right now – I wrote: "Depending on how the content will look like on Scholarship Records, External Resources may not make sense on its own – because this page is only about informing the user about what libraries/institutions hold info about this particular document – it's a bit more general than scholarship records (and I want to avoid nesting them) – but if it can be incorporated as part of Scholarship Records naturally with its content then we may not need that page." – can check with the team about this as well and can let them know about what you mentioned regarding the database @rlskoeser
  4. I agree with only having the shelfmark on the other pages – but let's not use S&Co as an example here – in general, and visually especially since the site nav and the nav within doc detail are already looking different here
  5. The buttons right now are "suggest a new x" vs. suggest an edit to the existing format – we should discuss the wording and whether "new" and "edit" need to be different in the level of the button (because I'm trying to make it helpful for the team as well, where they can easily distinguish when the submission is an edit vs. a totally new suggestion)
  6. @thatbudakguy during our meeting when discussing sitemap we did agree on "input date" and the sitemap is only about the public interface.
  7. @rlskoeser it's great to know that public notes could be incorporated into the description
  8. @rlskoeser thanks for the new thoughts – love the credits page idea
  9. @rlskoeser highlighting image/transcription would be super useful and worth the effort - I am ok with starting from and testing with the constraints of a IIIF viewer.
gissoo commented 3 years ago

@richmanrachel @mrustow This issue is ready for you to review – please ignore all the descriptions above. I'll provide all the updated context here: Here are the designs on Figma

  1. The designs are for mobile and tablet covering: document details, external sources, and scholarship records (the revised sitemap is on this figma page as reference), also covering the designs for a variety of conditions, for when there is:

    • no image / one image / more than one image
    • no transcription / transcription for one image / transcription for more than one image
    • no description
    • no external resources
    • no scholarship records
  2. "External Sources" came up during the ux research phase, as a place where there is a list of the institutions that have the document in their database like FGP or CUDL – RSK has mentioned that we may not have this in the database. Is this possible to do? Or can it be incorporated into the "Scholarship Records" page as one of the sources? Or is it on a different level?

  3. Thinking of including a data visualization (that's simple to understand) on the "Scholarship Records" page, but for now I've listed the total number of record types at the top of the pageas a placeholder.

  4. We have taken the page on fragments and shelf read out of this issue and as potentially out of scope for now.

  5. What should the language be with suggesting a new transcription vs. an edit to an existing transcription? Does having two buttons make sense?

Please let me know your thoughts and if you have questions – my goal is to revise and close this issue this week. Note: these are wireframes, just covering the following aspects of the designs:

richmanrachel commented 3 years ago

Hi @gissoo - hopefully I'm reading these correctly (as this is a new genre for my eyes to adjust to)!

1) The main question that comes to mind for me is who is using the mobile site? Is it mainly curious interlopers or @Marina on the train to Princeton? This question was prompted by the placement of the clusters and editor information. If it's casual users, I think the current layout makes sense to have cluster information first. If it's mostly experts, then I might put it at the bottom?

2) "External Sources" does seem to be in the right place, though I think it's only useful for some collections right now. (We can't link to FGP, for example, b/c they require you to log-in to the site). It may be possible to integrate into "Scholarly Records" as an unpublished description/mention of the document.

3) What do you mean by a "data visualization" for scholarly records? I do like that it includes a preview number - I would keep this regardless (because it helps me see at a glance how often others have touched it).

5) As for whether we have two buttons or not, I think that depends on how transcriptions will function on the backend. @rlskoeser - do we have a plan for whether they're staying on bitbucket? If descriptions and transcriptions live in different places, two buttons could make sense, but if everything comes to be located on "our backend" then it should be unified under a "Suggest an edit/description/transcription" button.

Two additional questions;

gissoo commented 3 years ago

Hi @gissoo - hopefully I'm reading these correctly (as this is a new genre for my eyes to adjust to)!

1. The main question that comes to mind for me is who is using the mobile site? Is it mainly curious interlopers or @marina on the train to Princeton? This question was prompted by the placement of the clusters and editor information. If it's casual users, I think the current layout makes sense to have cluster information first. If it's mostly experts, then I might put it at the bottom?
2. "External Sources" does seem to be in the right place, though I think it's only useful for some collections right now. (We can't link to FGP, for example, b/c they require you to log-in to the site). It may be possible to integrate into "Scholarly Records" as an unpublished description/mention of the document.
3. What do you mean by a "data visualization" for scholarly records? I do like that it includes a preview number - I would keep this regardless (because it helps me see at a glance how often others have touched it).
4. As for whether we have two buttons or not, I think that depends on how transcriptions will function on the backend. @rlskoeser - do we have a plan for whether they're staying on bitbucket? If descriptions and transcriptions live in different places, two buttons could make sense, but if everything comes to be located on "our backend" then it should be unified under a "Suggest an edit/description/transcription" button.

Two additional questions;

* What are the orange boxes?
  • the orange boxes signify what is different on each screen.

    • Is it possible to use a different font, by chance? I'm having a hard time reading this one.
mrustow commented 3 years ago
  1. "External Sources" came up during the ux research phase, as a place where there is a list of the institutions that have the document in their database like FGP or CUDL – RSK has mentioned that we may not have this in the database. Is this possible to do? Or can it be incorporated into the "Scholarship Records" page as one of the sources? Or is it on a different level?

True that we don't have this in the database currently. It might be either very easy or very difficult to provide the information depending on how granular we want to get, but in most scenarios it will be very easy. There are a few issues here:

  1. Thinking of including a data visualization (that's simple to understand) on the "Scholarship Records" page, but for now I've listed the total number of record types at the top of the pageas a placeholder.
  2. We have taken the page on fragments and shelf read out of this issue and as potentially out of scope for now.
  3. What should the language be with suggesting a new transcription vs. an edit to an existing transcription? Does having two buttons make sense?

Definitely. "Add a new transcription" or "Suggest an edit to an existing transcription" — or less wordy depending on context

I'll write more later.

gissoo commented 3 years ago

@mrustow thanks for writing! This is helpful!

richmanrachel commented 3 years ago

Hi @gissoo - here are the comments Marina and I have from working together:

gissoo commented 3 years ago

Hi @gissoo - here are the comments Marina and I have from working together:

* For documents that have transcriptions already, we don't need "suggest transcription" as a button.
  • great!

    • In thinking ahead to adding people, we would love named entities to be bolded and linked in the description.
  • I'll ask you about this at our meeting.

    • We're concerned about "Cluster Name" - does this mean we're privileging one cluster over another? How do we determine what counts as a cluster? This is obviously a big can of worms that we probably need to discuss in depth at a meeting. We might even need to include the Geniza Advisory Board to figure out how tagging/cluster search should work.
* MR prefers separate buttons for suggesting descriptions vs transcriptions so they stay contextual. But could we change the language to "Suggest a Description/Edit" and "Suggest a Transcription/Edit"
* We would like "Suggest a Tag" to be added.
* Could we also have "Suggest an Image URL" too?
* We love "View Entire Fragment"

* As for External Sources, MR wants to talk through the contingencies at a meeting.
gissoo commented 3 years ago

Conclusions from the Geniza meeting on April 1:

This issue is ready to be closed.