[STCOR-226] HTML Page Title Display Rules Created: 04/Jan/18  Updated: 22/Jan/24  Resolved: 10/Jul/18

Status: Closed
Project: stripes-core
Components: None
Affects versions: None
Fix versions: 2.11.0

Type: Story Priority: P3
Reporter: Khalilah Gambrell Assignee: md331 (Inactive)
Resolution: Done Votes: 0
Labels: a11y, accessibility, demo41, sprint40, sprint41
Remaining Estimate: Not Specified
Time Spent: 1 hour
Original estimate: Not Specified

Attachments: PNG File Screen Shot 2018-01-05 at 15.41.33.png    
Issue links:
Relates
relates to STCOR-228 Enable i18n of module names/descripti... Closed
relates to FOLIO-3956 UX Consistency > Search and Browse Re... Open
relates to UIF-501 Finance - UX Consistency > Search and... Open
relates to UINV-523 Invoices - UX Consistency > Search an... Open
relates to UIOR-1200 Orders - UX Consistency > Search and ... Open
relates to UIORGS-421 Organizations - UX Consistency > Sear... Open
relates to STCOR-11 Ability to customize the page title Closed
Sprint:
Analysis Estimate: Small < 3 days
Analysis Estimator: Khalilah Gambrell
Front End Estimate: Small < 3 days
Front End Estimator: John Coburn

 Description   

If user has clicked on an app then HTML Page Title Display Rules will be:
<<App Title>> - <<Record title>> - FOLIO
e.g. Users - Doe, John - FOLIO

If user has not clicked on an app then HTML Page Title Display Rules will be:
<<Logical title of page>> - FOLIO
e.g. Log in - FOLIO



 Comments   
Comment by Filip Jakobsen [ 04/Jan/18 ]

Hi John Coburn — I've assigned this issue to you. If it's not an issue for you, just reassign or assign it back to me. Thanks!

Comment by Filip Jakobsen [ 04/Jan/18 ]

In regards to shortening titles with an "..." or otherwise, Khalilah Gambrell and I have discussed whether we ought to shorten some of the long Record Titles, but have agreed that there is a good chance the browsers will handle it best. If it turns out to be an issue, we should look into it later.

Comment by John Coburn [ 04/Jan/18 ]

Thanks for pinging me about this - Not sure who might end up implementing this - I'd like to poll some ideas from Mike Taylor, Zak Burke, Michal Kuklis about how we could set this up effectively, and open the invitation for anyone who's got a good idea to take a stab at it.

Comment by Mike Taylor [ 05/Jan/18 ]

Since the record-title comes at the start of the composite title string, we clearly can't trust the browser to shorten it. So our choices are:

  • Just let it be full length, and if we lose app title or institution title, so be it. (Who wants their institution title in the browser bar anyway?)
  • Truncate it ourselves to some arbitrary length – 40 characters, say.
  • Add some kind of logic to guess what the best truncation length is based on browser window width and suchlike. I think that would be doomed, as you never know how browsers are going to display things anyway.

(My own preferred option would be always use *App title - Record title - Institution title" and let the ashes fall where they may. (App title first, because it's always short, and gives context to the record title.) But if the UX people have decided otherwise, I guess we go with that.)

Comment by Khalilah Gambrell [ 05/Jan/18 ]

Mike Taylor Thanks for the feedback. I agree with much of it. I did some additional research. Below are my thoughts. + Julian Ladisch since I know he is an expert in accessibility. And + Filip Jakobsen

1. We should not include - Institution Title. It does not convey the system/platform that is being used. And from an accessibility standpoint it will not be helpful when using a screenreader. I recommend we just say FOLIO if anything at all.
2. The title must describe at minimum the content on the page to comply with WCAG 2.0 Check out requirements and examples here: https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G88 AND I also think it supports a good UX for folks that like to have multiple tabs open too.
3. I do not think we should truncate. We should just let the browsers handle.
4. I agree that displaying App title first would be a great way to provide context.
5. Question, let's say you are on the eHoldings app and go to the Package Detail Record. Is the expectation that the Record Title is the title of the Package? Or should it be the title of the Package + some indication that user is on the package detail record?

6. Here's a list of options for HTML Page Title – all feedback welcome.
A. <<Record title>>| <<App title>>| FOLIO
B. <<App Title>>|<<Record title>>|FOLIO
C. <<App title>>|<<Record title>>
D. <<Record title>>| <<App title>>
E. <<App title>>by FOLIO|<<Record title>>

Comment by Mike Taylor [ 05/Jan/18 ]

I vote B:

  • "FOLIO" never changes so is unimportant in most contexts. So on the end is fine.
  • App Title is always short, so we'll see some of the Record Title as well; whereas many Record Titles are long, so we'd moss out on the App Title completely.
Comment by Filip Jakobsen [ 05/Jan/18 ]

To me, the most important thing right now is just that we have any one of these, instead of "FOLIO" on all pages. Then we can tweak it as we go along.

Comment by Filip Jakobsen [ 05/Jan/18 ]

Khalilah Gambrell

1. We should not include - Institution Title. It does not convey the system/platform that is being used. And from an accessibility standpoint it will not be helpful when using a screenreader. I recommend we just say FOLIO if anything at all.

I think it is important to have the institution title in there. The title "Log in - Opentown Libraries" is quite evocative to me. On the other hand, I do not understand why most people would have an interest in seeing the name of the technical platform being used ("FOLIO")?

Comment by Mike Taylor [ 05/Jan/18 ]

The problem here is that HTML title is used in so many different contexts. In a list of bookmarks, or browser history, for example, it's useful to see at a glimpse which entries are from FOLIO. When looking at the top-bar of one's browser, it's less interesting.

Comment by Filip Jakobsen [ 05/Jan/18 ]

Mike Taylor

Ok. Might we just provide the institution with a field in which they can add an alternative institution title for use only in the HTML title (and SEO)? Then people can call it "Opentown Libraries FOLIO" or "Opentown Libraries System" or "Opentown Intranet" or whatever they want. How might that work?

Comment by Mike Taylor [ 05/Jan/18 ]

I don't feel strongly enough about any of this want to prolong the discussion if you, the UX expert have different ideas. I'll just leave this here, then bow out: for me (maybe not for everyone) the single most important role of the HTML title is that when I pull down the back-button menu I want to be able to see where the various old pages will take me – like the one I just uploaded from GMail. At present, in FOLIO, all the entries say "FOLIO". So if we fix that, I'll be happy.

Comment by Mike Taylor [ 05/Jan/18 ]

So with that in mind, page titles like

  • FOLIO Users: Mae Norris Lang
  • FOLIO Items: The Lord of the Rings
  • FOLIO Settings: Software Versions
  • FOLIO Settings: Developer > Configuration

would suit me just fine.

Comment by Filip Jakobsen [ 05/Jan/18 ]

ok. It is relevant to point out that in your example, the thing that says FOLIO, is really a JIRA setup. So if we don't let people add their own title, half of those would say "JIRA - FOLIO" or simply "JIRA". Which would be fine if you only ever used one JIRA setup, but often more than one JIRA setup is used, making it nice with a unique identifying title for this particular JIRA setup, to my mind.

Comment by Filip Jakobsen [ 05/Jan/18 ]

Mike Taylor Were you saying that it is confusing that everything says FOLIO in your back-button screenshot?

Comment by Khalilah Gambrell [ 05/Jan/18 ]

@Filip - I see your point from a SEO and a bookmarking perspective. How about the following
<<App Title>>|<<Record title>>|<<Institution Title>> FOLIO

Yes longer but it addresses all concerns.

Comment by Mike Taylor [ 05/Jan/18 ]

My back-button screenshot is from GMail, and was supposed to be an example of doing it right. From that list, I can pick the specific recent page that I want to revisit, whereas the back-button menu of FOLIO is presently useless.

Jira is not relevant here; it comes into the screenshots only because the subject-line of some of the emails I had visited includes "[FOLIO-ISSUES]".

Comment by Filip Jakobsen [ 05/Jan/18 ]

Khalilah Gambrell Something along the lines of what you suggest is ok with me. I think long term the customization option might be optimal, but for now, I think something like that sounds good.

Mike Taylor Ok, thanks for the clarification and for the example!

Comment by Khalilah Gambrell [ 27/Feb/18 ]

Possible approach (per John C.) - Add a prop to paneset for Page Title AND create an utility function

Comment by Mike Taylor [ 27/Feb/18 ]

Jason Skomorowski pointed us to this relevant library: react-helmet.

Comment by md331 (Inactive) [ 18/Jun/18 ]

https://github.com/folio-org/stripes-core/pull/324 adds the infrastructure for this and page information to the title. Record info will require this to get merged and then separate commits in any ui-xxx module that wants to put record info in the title.

Generated at Thu Feb 08 23:10:12 UTC 2024 using Jira 1001.0.0-SNAPSHOT#100246-sha1:7a5c50119eb0633d306e14180817ddef5e80c75d.