Journal 10: Reflection on homepage improvement in holiday

    In my holiday, my priority is to develop the homepage interactive functionality.

The biggest problem is that the slide show in the center at home page purely is an animation without any interactive function. Many testers get confuse here.

    

    According to feedbacks, I need to improve this slide show. The most obvious reason is to eliminate misunderstanding and confusion. It is because some testers reported that this animation is keeping shift five slides once a little while. When the slide changes to the next slide, the color of circle point the year laber (from 1914 to 1918) will also change. Based on their experience of using web page, they think it is clickable and link to other pages. However, when they click on the slide, there is no responses. It may mislead them. Therefore, I want to make this slide show clikeable and interactive.  

    So, I added  a dot on each point above the timeline. I use CSS to adjust the position of dot to mark sure the dot can cover the area of circle point. 

Another aspect needed to be fixed is that the interactivity can be enhanced. In original homepage, the animation plays automatically in order. Users can not select a specific year on timeline. For example, if the slide shift to 1916 slide but the user want it to go back 1915 slide, there is no alternative unless he waits to it playing to 1916 again. It is no convenient. Thus, I want to change that. I want to make each circle point can be clicked and allow them to choose the year they excepted.

    In order to do that, I search some information from web, like W3Scools. I  use the JavaScript.  When people click on dot, It will shift the image of slideshow.

I also change the JS to implement the slideshow. 

    Thirdly, we want to reduce the path in order to improve efficiency. For origin path, people need to click (Start button => turn to map page => circle point on timeline => events will be displayed) to select the event. Compared with that, this improvement can simplify the paths process. Now, users only need to click (circle point on timeline => image on slideshow), it will turn to the map page and show all events on this year directly.  In this case, users can retrieve the events they needed in two steps, which is faster than before. 

    Users can click the point on the timeline to select a year. The image will shift with their hover and clicking.

    Users can click the point on the timeline to select a year. The image will shift with their hover and clicking.

In sum, I finished the homepage improvement before final deadline.