Itineraries rework

[NWatson212]

There are a number of bugs and technical debt on Itineraries as well as UX testing recommendations and accessibility issues. In addition to this the map component should be updated to use the new one.

Summary panel

Layout and spacing of the summary panel to be improved across mobile devices Ensure information is read out in screenreaders

Note: on current map the full screen button acts as toggle to list view. Ensure this is resolved.

Pins

• In desktop, hovering over a pin displays the number and title of the stop
• Clicking a pin displays the name of the stop

In mobile clicking a pin displays the number and title of the stop. Then clicking list view takes the user to that item on the itinerary TBC

See UX recommendation VS-4429 https://github.com/visitscotland/dot-com-brxm/issues/117

End of Itinerary

Create an "end of itinerary" notice after the last day

Design issues in 320px size

• size of grey box for 'highlights' - too large in height

style of subheading below an image - missing style?TBC

• opening time text - (once reintroduced) It was previously noted that width of text area too narrow, this could be much wider so it's easy to read
• stop location heading - when it's a long place name, it's overlapping the edge of the container. Need to allow for text hyphenation, if it's a long word/place name. Alternatively, overflow to left, reduce font size which is not ideal. See screen prints in https://jira.visitscotland.com/browse/VS-2914
  • In mobile the accordion arrow should be next to 'Day' and not 'title'

Other Design Issues Desktop

• Add right padding to the address so that the text isn't so close to the vertical line. Address is next to Map pin icon.

Mobile and Tablet

• HR under ‘Highlights’ and ‘Areas covered’ should stop at the margins

• Similarly, they should have letter spacing (H4 heading style)

• Map View button should be higher up - increase padding. Alternatively see VS-4427 recommendation to add map view button on each stop.

• Tablet only - medium size images should toggle instead of being under image. The same breakpoint for displaying/not displaying map should be used.

• HR under ‘Day’ should span 8 columns

Desktop and Mobile

• Grey vertical line connecting the days should reach from the 'nearby places to stay' button and touch the black dividing line.
• ‘Key Facilities’ should be bold - this should be updated in the component and be consistent across Listicles & Itineraries
• Connecting grey line between days is missing (may only wish this when distance between stops is added?)
• Centring of facilities at all screen sizes

Tooltip Buttons Itinerary tooltip buttons are out of date - update Itinerary tooltips to use new button icon-only styles following https://dev-designsystem.visitscotland.com/#/Elements/Button in itinerary-main.ftl.

See UX findings & recommendations VSD-531

Using a solid fill colour instead of an outline for the 'Nearby places to stay/eat' buttons should help draw users attention to them. Resizing the box and making the icons larger may also make them stand out better and ensure users do not miss them. Inserting another block with these CTA buttons with a related title, such as 'Day 1 amenities' will also make users more aware of the CTA buttons.

CTA CTA link should be below 'Time to explore'. I currently sits above

Accessibility

• Stops on map don't read the name of the stop
• Double clicking on a stop number zooms the map in - no other function and no screen announcement
• entering and exiting full screen repeats the phrase 'alert, alert, alert'
• 'press ESC to exit full screen' could be improved to 'Press escape to exit full screen'
• Screen reader does not announce if a link is internal or external

Flagged by Zounoo during user testing

• Users were confused between the day number and location number - numbers are the same colour. Recommendation to make the colours different to help users differentiate.
• on the page for the island-hopping tour the days on mobile appear as expanded elements that can be collapsed. The feedback for a speech user is “pop up button, menu pop up” which is not correct. In the menu, on mobile the same description is used for subcategories in the collapsed menus. Its highly desirable for items that can be collapsed or expanded the feedback should make it clear what the state of the element is.

Original Itinerary designs https://xd.adobe.com/view/332d4f1a-9787-4c58-43ea-a0549c2d8630-451c/?x_product=xd-jiraserver%2F1.0

https://xd.adobe.com/view/b0d5b4d8-3566-4641-68d5-fcc079a0f9f7-c6e4/

https://xd.adobe.com/view/7c8da272-9829-4db5-a9f6-b904bce60402-29de/?x_product=xd-jiraserver%2F1.0

Bugs

An icon is missing for ‘Level access to dining room, café or restaurant’ on day 1, stop 1 of the South West Scotland for Families Itinerary.

Page URL: https://www.visitscotland.com/inspiration/family/7-days-south-west-scotland

Acceptance Criteria: The level access logo appears on the itinerary and is aligned with the other key facilities logos. Old ticket: https://jira.visitscotland.com/browse/VSD-129

List of Jira tickets VS-3976 - Capitalise the word 'Meilen' VS-3353 - Distance in miles and KM is not visible VS-3528 - Itinerary snap to item VS-4011 - Update Itineraries to use main map component VS-949 - Show map popups on click as well as hover VS-3530 - Improvement to data and icons in yellow box VS-2914 - Update design issues with Itineraries VS-4198 - Long stop names VS-2862 - End of Itinerary VS-2966 - Itinerary accordion icon misaligned VS-4083 - Itinerary tooltips VS-3766 - Review designs for itinerary maps VS-3018 - Reposition itineraries stop CTA link VS-2530 - Itinerary design review issues VSD-251 Accessibility in Itineraries VSD-532 User Testing Recommendations EPIC Miro board https://miro.com/app/board/uXjVPBCue1w=/?moveToWidget=3458764542506354146&cot=14

Other related tickets not included above VS-2985 Fix use of description list within itinerary VS-3198 FED - Update Pattern component docs with new template (Form to Itinerary) VS-2861 Itinerary - video VS-967 Move unstyled list into itinerary component VS-2079 Itinerary search module VS-2080 Itinerary list module VS-2081 Itineraries landing page VS-2631 Create mock time for Itinerary opening hours unit test VS-2786 Allow itinerary map controls to use labels for alt text (applies to all maps) VS-794 Design - lightbox for itineraries hero image VS-4431 Add itinerary related items to the OTYML section VS-4433 Link itineraries to car hire page VS-4434 Hero image obscured by text on different devices VS-4441 Reduce scroll on page VS-4444 Display travel information more clearly VS-4445 Insert distances between stops VS2-143 Travel distance required between the days/stops VS2-148 Map requires 'Day X' button VS2-144 Total travel distance required for each day VS2-145 Add stops to favourites VS2-146 Ability to save itinerary VS2-147 Ability to print an itinerary VS2-87 Itinerary CTAs VS2-97 Spacing issues on Ultimate Scotland Itinerary VS-4427 Make 'Map View' CTA clearer for users to see

[NWatson212]

To address the issues in general map component before moving itineraries over to the new map component