To provide some context for this article here are the images from my previous post that illustrate the change from whiteboard sketch to functional prototype. You can see how the sketch ideas are transformed into a more formal HTML description of layout and content.
Since the interface only displays navigation structures the question is how to integrate the actual contents. I.e. what should happen if the user clicks one of the links in the navigational interface, and how to get back from the content (e.g. blog article) to the navigation. Traditional websites reload the entire page every time a navigation link is clicked. My goal was to break this paradigm and introduce smoother transitions between displayed contents. However, there are many options to implement this requirement. In the following, two approaches are illustrated as YouTube videos.
In the left approach the top header bar stays visible all the time. Getting back to the navigation simply requires clicking this top bar for the navigation contents to be slided in again. One disadvantage I felt this approach has is that the top bar always takes up unnecessary space. Therefore I worked on a second concept shown in the video to the right. Here navigation and content are two screens that are arranged horizontally. However, only one of the screens is displayed at a time and transition between them is animated as a slide effect. Consequently, less navigation-related content is displayed on the screen when reading e.g. a blog article.
In future posts I’ll try to understand the usability aspects of either approach and push the interface forward to an ultimately fun, effective, and efficient experience that is beyond traditional web interfaces.