84 Cultural Heritage Travel Routes Web Site - Map Requirements to UI
2 likes634 views
This document summarizes requirements that have been fulfilled for a cultural travel website. It describes key features on various pages of the site including: - A navigation bar that allows users to access all site areas and filters content. - Dynamic navigation panes that can be used to browse cultural routes and attractions by region, category, etc. - A map view that pins attractions and plots travel routes, with pop-up windows providing detailed information on locations. - Options to customize the screen view by hiding/showing navigation elements and controls.
84 Cultural Heritage Travel Routes Web Site - Map Requirements to UI
- 3. Requirements Fulfilled 018: Web Page Title • The Web Page Title should be intuitive and distinguish the site from other sites when the user has multiple tabs or windows open at the same time. 019: Logo • The logo to be used should be the site logo representing the 84 cultural travel routes Key Features Ministry of Culture Logo • The Ministry of Culture’s logo is displayed on the Landing Page in order to identify the site with the Ministry and to lend credibility to the site. The Ministry of Culture Logo The 84 Cultural Heritage Travel Routes Logo
- 4. 004: Language Requirements: • The Language Selector is accessible on every page. 006: Accessibility of Culture Project and Web Application Information. The About Us tab: • Connects the Ministry of Culture with the project • Explains the purpose of the project. Requirements Fulfilled Language Selector Bar The About Us Tab + Welcome page Navigation Buttons Key Features Navigation Buttons • Visitors can navigate the Landing Page content by either clicking on the Tabs or by clicking on the Navigation Buttons. Usability is increased because visitors have some control over their experience. Start Now
- 5. 006: Accessibility of Culture Project and Web Application Information: • Contact Information is accessible on every page. • On the Landing Page, it is available through the Contact Us link because the Main Menu Bar is not displayed on this page. • The goal of the Landing Page is to get visitors to enter the site, thus there is no page redirect to the Contact Us Page when the visitor clicks the Contact Us link. Requirements Fulfilled The Contact Us Link
- 6. 006: Accessibility of Culture Project and Web Application Information. The About the Site tab: • Extends the information In the About Us tab by explaining what the visitor can find on the site, directly connecting the site content with the project. Requirements Fulfilled The About the Site Tab
- 7. Requirements Fulfilled 006: Accessibility of Culture Project and Web Application Information. The Get Started Now Tab: • Provides help/guidance in a quick start style in order to allow visitors to get started quickly but with some guidance. 016: Search by Keyword (Optional): • Search is accessible on both the Landing Page and on the Interactive Map page. The Get Started Now Tab Key Features Filter (Optional) • Visitors can apply basic filters to help them find specific routes and attractions. View Routes Button • Acts as an “Enter Site” Button. Quick Search/Filter The View Routes Button
- 9. Requirements Fulfilled 002: Google Maps API • The underlying map capabilities will use the Google Map Application Programming interface (API). Google Map
- 10. The Main Menu Bar Requirements Fulfilled 005: No Scroll Access to the Thai Culture Categories Navigation/Filter • The Thai Culture Categories Navigation Pane is viewable at all time at the bottom of the page. 006: Accessibility of Culture Project and Web Application Information. The Main Menu Bar: • Provides access to all areas of the site. • The menu option corresponding to the Active Page is disabled for clarity. 016: Search by Keyword: • Search is accessible on both the Landing Page and on the Interactive Map page. The Search Bar The Thai Culture Categories Navigation Pane
- 11. Key Features Synchronize the Thai Culture Categories and Cultural Attractions Navigation Panes • The Cultural Attractions Navigation Pane can Be synchronized With whatever the user selects in the Thai Culture Categories Navigation Pane. The Synchronize With Cultural Attractions Option The Cultural Attractions Navigation Pane
- 12. The Regions Filter Box Requirements Fulfilled 007: Navigation/Filters • The cultural routes can be browsed and filtered based on a variety of criteria including: • Region • Cultural Heritage Groups (REQ-012) • Cultural Travel Routes (REQ-012) • Thai Culture Categories (REQ-014) • Cultural Attractions (REQ-013) 017: Dynamic Navigation/Filter Panes • The Regions Filter Box and the Navigation Panes are dynamic rather than hard-coded. This makes the application flexible to changes, which makes it faster and less expensive to make changes compared to having hard-coded navigators and filters. The Thai Culture Categories Navigation Pane The Cultural Heritage Categories/ Travel Routes Navigation Bar The Cultural Attractions Navigation Pane
- 13. Key Features The Navigation Control Bar • The Navigation Control Bar allows the user to hide or show the Regions Filter Box and any of the Navigation Panes. By hiding these components, the user can control how much screen space they have to view the routes and attractions on the map. (See next slide). The Navigation Control Bar 009: Display Attractions on the Map as Pins With Corresponding Icons • The cultural attractions are displayed on the map with icons that correspond to the Thai Culture Category in which they are organized. Requirements Fulfilled The Cultural Attractions as Map Pins With Thai Culture Category Icons
- 14. Key Features The Navigation Control Bar • Notice that when the navigation components are hidden there is much more screen space, this gives the user a clearer view of the routes and attractions on the map.
- 15. Key Features Hide The Navigation Control Bar • Hiding the Navigation Control Bar displays even more screen space for the user.
- 16. 008: Display the Travel Routes on the Map • . Requirements Fulfilled
- 18. 010: Detailed Information Popup Screen • The Detailed Information Popup Screen includes the following information. (See next four screens): • Attraction Name • Main Image • Additional Information and Media Icons • Contact Information • Details • Description • Additional Information and Media Requirements Fulfilled
- 19. 010: Detailed Information Popup Screen (Continued) • Additional Information Icons. (REQ-011) • Informs the user whether or not additional media (images and videos) exist for the currently loaded attraction. • If additional media is available then the icon corresponding to the available media will be enabled (in color); otherwise, it will be disabled (grayed out). • The star represents a highlight/recommended attraction. There will also be a band on the main image indicating that the attraction is recommended. Requirements Fulfilled Additional Information Icons
- 20. 010: Detailed Information Popup Screen (Continued) • Attraction Name (Always Visible). • Contact Information and Directions From Current Location. Requirements Fulfilled Contact Information And Directions From Current Location Attraction Name
- 21. 010: Detailed Information Popup Screen (Continued) • Attraction Details: • Cultural Heritage Group Name • Travel Route(s) • Thai Culture Category Requirements Fulfilled Attraction Details
- 22. 010: Detailed Information Popup Screen (Continued) • Detailed Description • References Requirements Fulfilled Detailed Description w/References
- 23. 010: Detailed Information Popup Screen (Continued) • Additional Media (REQ- 015): • Images • Videos Requirements Fulfilled Additional Media
- 24. 010: Detailed Information Popup Screen (Continued) • Videos Requirements Fulfilled Vertical Scrollbar • All of the information about the attraction is viewable in a single, scrollable, screen. • This will give the user freedom and flexibility to easily navigate up and down the screen to access information that they desire. • Images and videos are viewed/played in the main Image/Video component so there are no additional screens that will popup or to which the user will be redirected. This gives the user a simple screen to use. Key Features Additional Images and Videos Image Viewer/ Video Player Vertical Scrollbar
- 26. • 001: Database Requirements • 003: Popup Screen Performance