This is an honest assessment of the online tutorial found at https://timeline.knightlab.com/, the TimelineJS website. TimelineJS is an open-source tool that users can create interactive timelines with by utilizing a Google spreadsheet. TimelineJS provides a basic tutorial for how to use their tool which includes video, text, and images.
Effective Components
The TimelineJS homepage includes a brief explanation of their tool, a helpful “Tips & tricks” section, and a video with instructions for “How to Use TimelineJS”, which are the first things that a visitor will see on the page. The explanation of the tool gives the reader a clear understanding of what they can use the tool for and how it will work. The “How to Use TimelineJS” video also provides clear verbal and visual instructions to the user. After scrolling past these initial sections there is a section full of timeline examples and a short tutorial with text and images. The tutorial effectively guides the reader through each step by including large numbers to catch the readers attention. Each step includes a short paragraph explaining how to use the tool. The instructions also include quotes around any words that the reader will need to select on a certain element in the Google spreadsheet. This makes it easy to follow along with the instructions.
Ineffective Components
The “Tips & tricks” section at the beginning of the webpage does not complement the explanation of the tool or the “How to Use TimelineJS” video. The webpage layout includes these components together, although the “Tips & tricks” does not focus on how to use the website like the other two sections do. This seems out of place and might mislead the reader since they are receiving tips that should be implemented once they understand how to use the tool, not before. The “How to Use TimelineJS” video is also not up to date. When the narrator creates the Google spreadsheet, she shows the viewer how to copy the spreadsheet template so it can be used. The most recent version of this tool includes a blue “Make a copy” button on the page that appears once the template is opened, instead of the user needing to click the “Use this template” button like in the video. The tutorial further down the webpage lacks important details in some of the steps. For example, step one does not provide adequate instructions for how to edit the Google spreadsheet. Instead, the instructions link to another page. Since the reader may not click this link, it would be more effective to include a couple sentences explaining how to edit the timeline and then linking the second page for additional information. Step three also automatically hides the “Optional settings” and the button to show the settings is not obvious. The user could easily miss this and not be able to edit further.
Suggested Improvements
The “Tips & tricks” section at the beginning of the webpage would be more effective if moved to the end where the tutorial is finished. The “How to Use TimelineJS” video should also be updated to provide users with the most recent information on how to use the tool. The main tutorial found lower on the webpage would be more effective if additional details are given. For example, providing additional instructions for how to edit the Google spreadsheet in step number one. In order to prevent the user from missing the “Optional settings”, this button should be made more obvious and the settings should be automatically shown.