Well that was a busy week and this journal entry has been a while in the making. [caption id="" align=“alignnone” width=“911”]
Nav test 1[/caption] While I was still thinking about months. I also tried placing the months at the top of the page. You will notice that I added mock-up navigation for the future pages on the top-right as well. Although I have shifted my thinking on the items in the navigation - About is the same as the Patient; the patient is a fictional device to explain the project. About should actually be Team as we need to introduce the more about the team and the goals for the project. Devices can stay as-is as this will be used to describe potential device types and physiological measurements/sensors per device. [caption id="" align=“alignnone” width=“1072”]
Nav test 2[/caption] I kept the next buttons with the top navigation, as you can see from the screenshot below. However, after thinking on it, it really seemed like the next buttons were the most useful. Especially as they could offer more scope for styling later on and they allowed the user to progress through the timeline or steps of the patient story in a sequential way. Also in IE, if these buttons are hidden because the function is unavailable then the page will still have logical navigation based on either scrolling or using the arrow keys. [caption id="" align=“alignnone” width=“1070”]
Nav test 2.5[/caption] In the end I liked the next buttons as shown below (at 100% width) and then some kind of floating page navigation on the top-right. I shall have to look at some design patterns and have a think about the best way of doing that. [caption id="" align=“alignnone” width=“911”]
Nav test 3[/caption] Then after the first Next button is clicked here is how the next section of the prototype looks (see Nav test 3.5 below). There is a nice amount of area for information. [caption id="" align=“alignnone” width=“913”]
Nav test 3.5[/caption] The next step is to create a CSS grid system to ensure that alignment is accurate (as you can see above the text is not placed correctly). I found this post about grid setup and will refer to it and the Implementing Responsive Design book (Kadlec, 2013).