search

FreeUKGen / Systemwide

repository for issues that affect all systems within the Free UK Gen portfolio
0 stars 0 forks source link

Implement Footer design on FreeBMD2 (header is now systemwide #103) but this story contains decisions on header #112

Closed DeniseColbert closed 4 years ago

DeniseColbert commented 5 years ago

Aviel has created wireframes but these need signing off for use in development.

They are all in this folder: https://drive.google.com/drive/folders/1DFJKgyb7MdBmv1-v9v9PJEI4ijd70dWg?usp=sharing

I have made a new folder for specific files that the UX volunteers would like our feedback on. @avielbassalian-freeukgen could you place the wireframes related to header/footer and ads in this folder? (Files to be reviewed in UX folder)

needs FreeUKGen/FreeBMD2#61

DeniseColbert commented 5 years ago

@PatReynolds @richpomfret would you take a look and give feedback?

Inclusion of a banner ad in the header will affect this, so perhaps we should decide on ad placement sooner rather than later.

PatReynolds commented 5 years ago

Advert at top (and sides - see wireframe). Details of footer design now needed. Need to look at what is in FreeREG/FreeCEN, and what additions/changes are on their boards. @Captainkirkdawson to be asked to review list of footer contents once determined

richpomfret commented 5 years ago

@PatReynolds to sign off on current wireframe so Vino can move ahead and build it.

PatReynolds commented 5 years ago

A few changes needed (based on version 4).

Ad 'websites' to 'Other Free UK Genealogy' (something missing from all the websites). Im assuming the logos/links will be to FreeCEN and FreeREG :-)

First column all fine. Second column: I would prefer there to be 'Volunteer' in the header. We were talking on FreeREG/CEN about changing the word 'member' to an 'unlock' icon, which would cut down on the space needed. Third column: Blog should be News If you removed 'Donate' (should be bigger, and in the design of pages) then 'Statistics' could appear in column 3 (now the second column.

I like the icons group. - FB icon - should it go to the FreeBMDgroup or to the Free UK Genealogy group? Say to FreeBMD initially ...

Bottom section - again, assuming logo is to be free UK Genealogy.

Bottom stripe: text should be Data © Crown copyright. Published by permission of the Controller of HMSO and the Office for National Statistics. You must not copy on, transfer or reproduce significant portions of data without the prior permission of ONS. Our Search engine, layout and database Copyright © 1998-2018 Free UK Genealogy CIO, a charity registered in England and Wales, Number 1167484. We make no warranty whatsoever as to the accuracy or completeness of the FreeBMD data.

What do you think, @Captainkirkdawson

avielbassalian-freeukgen commented 5 years ago

@PatReynolds I've altered option 4 according to my understanding of your suggestions.

The logos under Other Free UK Genealogy websites should be FreeReg and FreeCen. Logo in the footer should be the Free UK Gen logo.

Re: using an icon instead of members - Use of an icon by itself is risky (icons can be ambiguous/unclear). Icons do tend to increase engagement. Best practice (from a UX perspective) is to use the icon alongside text, or to only use text.

PatReynolds commented 5 years ago

Thanks, @avielbassalian-freeukgen Looking good! The Members are our volunteers, so we can write to them individually and let them know what the icon means (if that helps!). We don't actually need it for the first iteration as it is not a feature for researchers. We will need to add in Volunteer at some point (probably before Members).

Captainkirkdawson commented 5 years ago

Reopened as I have yet to comment

Captainkirkdawson commented 5 years ago

@PatReynolds asked for my thoughts on on the proposed Header, Nav bar and Footer changes.

Firstly I cannot find the display version 4 that I am supposed to review. The link to the documents in the story description takes you to a folder with 3 sub folders. None of the documents in that folder are more recent than mid march so clearly @DeniseColbert there is another document somewhere. If a link can be provided then comments can be made.

Vino-S commented 5 years ago

Hi @Captainkirkdawson , Below is the link https://drive.google.com/open?id=1omxtCfNVypHN9wL0QXgZb2JjChOyWKjS

Captainkirkdawson commented 5 years ago

Ah found a link in a closed story. https://drive.google.com/file/d/1omxtCfNVypHN9wL0QXgZb2JjChOyWKjS/view

  1. The MyopicVicar page layout has 4 components. ALL our pages contain. Header, Nav bar, Content,and Footer. The only thing that changes from display to display is the Content. It can be the search page, the results page, the help pages. Our home page is a search page. 2.MyopicVicar determines what to place in those 4 components based on the application that is running. Be it FreeREG, FreeCEN, FreeBMD or any new application we wish to code.

Hence MyopicVicar would display the following home page for FreeBMD application
freebmd.JPG The search page is simply a place holder at this time until one is agreed and coded

The proposed changes are relatively small. The Header is now simply the advertisement The Nav bar now contains the application icon and name. QUESTION: IS THIS TO BE AN ACTIVE LINK as it is now. ie clicking it takes you to the home page. The footer changes appear to again be minor predominantly layout and additional links. Some of which duplicate those in the nav bar about which I have no opinion. The movement of the FreeUKGEN to the copyright seems odd. The Google + and Github icons should be removed

Bottom line these changes to the current layout are relatively minor. The biggest is the Nav bar with its split styling. Only question is the one above

There are no comments on the search page as that is not part of this story

Captainkirkdawson commented 5 years ago

I have completed a review of the layout code in MyopicVicar and believe that all parts of the Wireframe Version 4 can be accommodated easily with one exception. The movement of the Icon and logo into the navigation bar will be a major undertaking, I would estimate the movement of the icon/;logo would be size 20 to have it function with all screen sizes. The rest of the changes to update the footer and the social links would likely be a size 5.

I would suggest a review of the proposed change in icon/logo position from a cost benefit perspective.

PatReynolds commented 5 years ago

This is dependent on the implementation of Bootstrap or a lot of coding.

Decision on Bootstrap to be taken after @Vino-S has determined how to implement the drop down menus on search page.

richpomfret commented 5 years ago

We won't use bootstrap just yet - which means we need to work within the constraints of the current CSS code - this is with the view of getting a working version of the site up and running quicker. We can iterate and discuss adding bootstrap at a later date.

Captainkirkdawson commented 5 years ago

It should be noted that footer still contains 3 freebmd icons where reg, cen and gen should be used. I recall there was mention the wireframe had been updated but clearly not on this link.

Captainkirkdawson commented 5 years ago

Could we please confirm the social links to be included in the footer. In the wireframe there are 6; the first line of 3 are clear. But what are the first 2 in the second line? Should drop the Github link? We have on REG and CEN as it really is not a social link but a link to our repository.

DeniseColbert commented 5 years ago

Aviel has updated the logos in Figma but I don't think he's shared an updated version in the Drive just yet. @avielbassalian-freeukgen, could you provide this, and put the link into this story?

Social links on the second line are Instagram and Pinterest, which we have a presence on. The Github icon was removed from FreeREG as it was taking up prime real estate in the menu bar. I think it's OK down in the footer; not least because 6 icons looks better than 5. What do others think?

Captainkirkdawson commented 5 years ago

Thanks @DeniseColbert very helpful. It is essential that the agreed wireframes be kept up to date on gsuite and accessible here

Captainkirkdawson commented 5 years ago

@avielbassalian-freeukgen clarification is required please on the difference between the two help links in the footer and their relationship to the Help in the navigation bar. Do we need any in the footer? You should be aware that in REG and CEN the help provided by the help button is different between that provided to the researcher which relates to the search engine and its usage and that provided to the members. If they are transcribers the help is all about transcribing, if they are coordinators then the help deals with matters relevant to coordination but with a link to the transcriber help.

avielbassalian-freeukgen commented 5 years ago

@Captainkirkdawson @DeniseColbert https://www.figma.com/proto/VjJhKU9ayU62rwczFyaUX0mt/FreeBMD-search-form-prototype?node-id=260%3A0&viewport=-814%2C-478%2C0.428453654050827&scaling=scale-down-width

https://drive.google.com/open?id=1Oh3x7dNMFMb4mUGdudFVSPnHFLw3vE2b

The help buttons in the footer are unrelated to each other. Transcriber help is help for transcribers, the other help is general help for using the site/search (as in the header). Let me know if I've missed something.

Captainkirkdawson commented 5 years ago

Not sure why this was closed; we have yet to start implementation.

avielbassalian-freeukgen commented 5 years ago

Apologies, accidentally clicked close and comment instead of comment.

Captainkirkdawson commented 5 years ago

@avielbassalian-freeukgen based on your response to me question there are 2 follow ups.

  1. Why do we need to repeat the help in the footer when it is in the navigation bar and much more visible there?
  2. Why do we need a transcriber help page link that is accessible by all researchers etc? Transcribers have access to their help through the navigation bar when they log in
avielbassalian-freeukgen commented 5 years ago

@Captainkirkdawson 1) People will often look in the footer of a website when trying to locate the help page. Having it there as well minimises location time for them. 2) I wasn't aware of that, sorry. We probably don't then.

PatReynolds commented 5 years ago

@avielbassalian-freeukgen "Volunteer" should be on the bar, not on the footer (other wise all my earlier requests have been implimented). There is no need for "Help with Transcribing" as that is covered by 'Volunteer" I agree no need for Transcriber Help in the footer.

PatReynolds commented 5 years ago

ToDo on the footer (the red, white and black panels at the bottom of each page). a) change text in red part to reflect FreeBMD and requirements of the GRO: Data © Crown copyright. Published by permission of the Controller of HMSO and the Office for National Statistics (ONS). You must not copy on, transfer or reproduce significant portions of data without the prior permission of the ONS. Our Search engine, layout and database Copyright © 1998-2019 Free UK Genealogy CIO, a charity registered in England and Wales, Number 1167484. We make no warranty whatsoever as to the accuracy or completeness of the FreeBMD data. (nb above text will probably change after current discussions with the GRO) b) Add extra social media (etc.) icons, group to right with 'Follow us' above (as on wireframe) https://drive.google.com/file/d/1omxtCfNVypHN9wL0QXgZb2JjChOyWKjS/view c) Add second column of links i.e. Help, Contact, Statistics, News. d) Add additional links as specified by discussion being started on FreeUKGen/FreeBMD2#83, if any.

richpomfret commented 5 years ago

Can I request that we introduce the rule of opening a new tab for any link that takes the user to a different website e.g. for donations/policies etc? There may be an accessibility reason for not opening a new tab, but I think we ideally wish to keep users on the site rather than send them off to a different one. @AlOneill what are your thoughts?

AlOneill commented 5 years ago

@richpomfret We can't open a link in a new tab without a warning that is accessible to all visitors: for instance, we can't bury the (only) warning in a title attribute (which would be visible on hover) because a keyboard-only user would not see it.

A warning that is visible on focus and on hover might be enough for the main menu bar. A visitor using a pointing device has to linger over the link to see the contents of a title attribute and this might not be good enough — I don't know, but will endeavour to find out.

BTW, is responsiveness to different window/screen widths being considered here (other than a mobile view)?

richpomfret commented 5 years ago

Ready for testing on TEST2.

Captainkirkdawson commented 5 years ago

Would prefer to see all links implemented; social links are incomplete. Partially responsive but mobile level menu does not work. Responsive navigation is quite different

richpomfret commented 5 years ago

@DeniseColbert to give @Vino-S links for Pterest and IG.

richpomfret commented 5 years ago

Decided also to put in the word 'menu' next to the hamburger option on the responsive/mobile version.

PatReynolds commented 5 years ago

@Captainkirkdawson to take a look at Vino's issue in deploying this

Captainkirkdawson commented 5 years ago

@vino has reported there is no longer an issue and test2 has the latest version so no further action on my part is needed wrt to access

Captainkirkdawson commented 5 years ago

Commenting solely on the header /footer aspects. Comments on the search form itself will be made in story FreeUKGen/FreeBMD2#82. Comments are based on the option4 home page wireframe

  1. I know that the wireframe has been accepted but I am going to argue for a change. I would like to see a) the ad appear BELOW the navigation bar and b) that the navigation bar be LOCKED to the top so that as one scrolls down the navigation bar is ALWAYS visible. This will benefit navigation and allow a larger ad should we wish. An example of the is https://www.cnn.com/
  2. In the magenta footer. I strongly urge a smaller text font (likely the same as used below)
  3. We repeat exactly the same text in the last footer box. We do NOT need in both places. In fact I could argue for the elimination of the magenta box in total unless it contains text similar to that used in reg and cen. There is nothing similar on BMD1. CEN/REG use The FreeCEN database is just a finding tool. It should not be considered to be proof that such information was recorded. Always confirm its content with the actual census record at a County Record Office, local Family History Society or LDS Family History Centre.
  4. Lets cut the white box down to at least 50% of its current space.
  5. Should it not say "Other FreeUKGenealogy Projects"
  6. I do not understand why we are using the FreeBMD logo in the final box. Should it not be the FreeUKGenealogy logo?
  7. I believe the FreeUKGenealogy logo should be in the penultimate box not with the copyright
  8. The responsive hamburger does not have Menu
AlOneill commented 5 years ago

May I suggest a little more white space around the BMD logo in the header? It looks (uncomfortably) jammed in. Will have to dig deeper into markup and CSS to figure out exactly what is going on there.

richpomfret commented 5 years ago

Agreed with Alison re: logo at the top. In the original design there is more space. Note that the footer logo is also incorrect. Shall move this back into sprint backlog for next iteration.

AlOneill commented 5 years ago

Digging around in the source code, I note that the nav bar menu items are no longer a list but a group of divs inside another div. Why the change, especially as we are urged to use semantic markup wherever possible?

The list markup is very useful to a screen-reader user: for example, the number of items is announced, helping them to decide whether to listen to the list or move on.

Also noticed a problem with the demo on test2: the project logo and the menu items act like they are glued to somewhere near the edges of the screen. The wireframe suggests that they should stay put, fixed to their respective edge of the content area. I think the outer-most flex box is the problem: I have made a start on some local testing and will share my findings as soon as I have something worth sharing.

Captainkirkdawson commented 5 years ago

The problems that @AlOneill are noting are I believe the result of moving too far away from the MyopicVicar base code. @AlOneill should no feel constrained by the code on test2 as that code base does not meet the actual design.

AlOneill commented 5 years ago

I have the beginnings of a working prototype for the header that is based around the MyopicVicar base markup and styles — with a little shuffling and tweaking. The longest (widest) menu currently in use will fit on a screen/window wider than about 800px.

I have used flex styles for the menu as a simple replacement for the media queries.

Once the hamburger menu is in play (below 800px), what should a user see when they select that menu? The current (i.e. on CEN and REG now, designed for mobile phones) vertical menu? Or what?

Captainkirkdawson commented 4 years ago

The point that @AlOneill makes above about the responsiveness (of lack thereoff) of the new style of Navigation bar is an important one.

It reaches across all projects hence could be address under a systemwide story but since most of the discussion of changes to the header/software originated under this story it is likely best left here.

The old navigation bar was fully responsive down to 570 px width where it switched to a mobile menu button. This was achieved reducing font sizes at 720 px and 600 px (and losing Help between 800 and 720!!) The "active" part of the bar is slightly larger in CEN than REG due to the use of Database Coverage instead of Transcriptions cenwide.JPG regwide.JPG The wording proposed for BMD is the same as CEN but now includes the logo BMDwide.JPG

The inclusion of the logo means that even with font_size reductions and logo size reductions we will be hard pressed to get the menu transition back to 570 px.

Some benefits could be obtained by reducing the number of characters in the menu items eg adopt the REG usage of Transcriptions instead of database coverage or something similar.

Consider dropping Donate or Volunteer. (We do push donation in many other places)

Or accept that the mobile menu style will appear at a wider screen point than at present.

AlOneill commented 4 years ago

Expanding on what @Captainkirkdawson said above, the only way to keep all our current menu items on screen down to 570px would be to "re-size" the logo at smaller screen widths. And by re-size, I think we are looking at a clipped logo: either a pretty small "FreeXXX" by itself, or just the icon part at its current size.

This is because (at just above 570px width) we are left with a bare 100px after the menu items are given the space they need and the full logo would be very small (not even as tall as the menu bar itself) at that width. Even "FreeXXX" would not be as tall as the menu bar. As noted in the para above, only the icon part could be displayed at full height.

The media queries needed to implement the styling (across the whole responsive range above mobile width) would be somewhat complex and rather fragile: i.e. a small change in the wording of the menu items, say from "About" to "About us" could/would break the layout.

PatReynolds commented 4 years ago

Remove "Donate" Change "Database coverage" to "Coverage" (while we think of something better). Switch between "Transcription" and "Search" - with "Transcription" only visible on the Search page, and "Ssearch" visible on all other pages (as per FreeREG). Use Icon rather than Logo at the point where Logo would be too small to look good.

Captainkirkdawson commented 4 years ago

@richpomfret @PatReynolds I need your review of test2 for bmd, cen and reg navigation. All are running the same multimodal code. DO NOT attempt searches on reg or cen as the bmd search code has yet to be back ported into them. Everything else should work. I have attempted to respond to all comments and suggestions made in this story and others. I have taken the liberty to expand one word links into something meaningful. The maroon text varies according to the app. The copyright is different for BMD A section on searches done yesterday is included BUT no code exists to fill in a number. There ARE 2 LINKS FOR WHICH we have no prior content. Terms and Conditions and Usage Policy. Do we have such documents. (Note reg is showing a formatting error on the social links)

PatReynolds commented 4 years ago

FreeBMD2 test: 'About' page seems to be missing the 'news' text I'd added to the 'About' page Iis this bar in search performance meant to be yellow: image.png Link to System docs needs changing to https://drive.google.com/open?id=1sG0mLapIVnODLniI9DJmXO-rV7MXVLu0 Additional 'e' on costs at "Make a donation to cover our operating costs" otherwise all good. "

PatReynolds commented 4 years ago

FreeREG: Volonteer link leads to 'page not found' error. I cannot log in to test member's features.

PatReynolds commented 4 years ago

FreeCEN2: Update of profile worked fine, here. Link to FreeUKGenealogy policies broken. Otherwise all good.

Captainkirkdawson commented 4 years ago

@PatReynolds I should have explicitly noted that since these tests are running on test2 the refinery content of both REG and CEN is extremely old and in many cases missing. Unable to comment on BMD2 refinery comment what is that is what is there. This work has made no changes to refinery content. The yellow on that display heading is on old test; should be changed. That action had very limited access. Will fix the e on costs. vervet is currently unhappy so cannot fix access for you to REG until it comes back

PatReynolds commented 4 years ago

Thanks, @Captainkirkdawson I should have remembered refinery content is not updated on test2 for CEN and REG.

I've updated the link to system docs on FreeBMD2.

Captainkirkdawson commented 4 years ago

All formatting changes now in multimodal. TY for acceptance of font awesome @PatReynolds We need to resolve 2 LINKS FOR WHICH we have no prior content. Terms and Conditions and Usage Policy. Do we have such documents? If not we should pull before deployment

PatReynolds commented 4 years ago

FreeBMD1 has https://www.freebmd.org.uk/terms.html and https://www.freebmd.org.uk/UsageInfo.html FreeBMD2 usage policy is in the FreeBMD footer, e.g. creative commons licence.

Terms can be the same for all websites (the terms for FreeBMD1 need updating - e.g. the GRO has given permission for snippets. see https://test.freebmd.org.uk/trac/ticket/603

I suggest I work with all projects and Trustees on agreeing what (if any) terms are needed, and Useage is available as part of the 'About' suite, with the usage appropriate to each project. The textual part of the footer seems to be the right place for copyright-type useage information.