As Nikki and I finish up the final touches on the Mapping Morton Village site, I focused on user interaction and navigation. One aspect of our site that we knew we wanted to include was an automatic (on page-load) popup modal to give an introduction to our site, see image below.
Introduction Modal
However there were several problems that needed to be overcome to accomplish this. As I added the code for the page-load modal, it conflicted with another modal already on our site, and it caused both modals to stop appearing. To fix this issue, each modal need to be given a different identification. Next, we wanted our introduction modal to give the option for users to choose to not show the popup again when they load the interactive map. To figure this out, I turned to the Digital Atlas of Egyptian Archaeology, the site that I based our page-load modal on. Using ‘Inspect Element’ I was able to find the html and corresponding CSS to accomplish this!
User Navigation:
In our interactive map, we have highlighted several aspects of archaeology in which the user has the option to ‘read more’ bring them to a detailed description page. For these descriptive pages, we wanted our visitors to have to option to pursue them outside of the map. I created an ‘Archaeology’ tab on the header of our site, to bring the user to a page where they may select what topic they would like to read more about. To assist in navigating through these pages, I added breadcrumbs or a breadcrumb trail. The term breadcrumb comes from the fairy tale Hansel and Gretel fairy in which the two title children drop breadcrumbs to form a trail back to their home. Our site’s breadcrumbs are located in the top left corner of each page, it shows the user where they are, and gives a way back to the main pages. For example, if a visitor is in the Zooarchaeology page (see second image below), they are able to click back onto the main archaeology topics page, or all the way back to the interactive map!
User Navigation
Navigational Breadcrumbs
If anyone has any questions or comments we would love to hear from you!
Recent Comments