Our UX Implementation

New UI Designs

For the first version, we want to clear up the web with a more organized UI. To acheive this, we first think about adding a navigation bar that allows users to access all links anywhere on the website. So after several discussions, we choose the collapsible side bar for the following reason.

1. The nav bar only occupies a small area of screen, leaving most space for contents.
2. Animations are cool.

Also, for a knowledge-based documentation web, background, color and other styles should serve the content instead of diverting attention from people. So after discussion and template comparison, light background and darker font color are applied. There is also other changes that serve a better reading experience for user.

The cutover results(VERSION 1.O):

Screenshot of the first UI Version


Build

To achieve our UI design, we have created two templates to be included in the web pages: subhead.txt and navbar.txt. subhead.txt contains javascripts and stylesheets for our website and navbar.txt holds the codes for the side navigation bar.


When creating a new page, copy the following template into your text editor:
<!DOCTYPE html>
<html>
 <head>
<!--include subhead.txt -->
  <title>
   <% YOUR TITLE HERE %>
  </title>
<!--include googleAnalyticsScript.txt -->
 </head>
 <body>
  <div class="wrapper">
<!--include navbar.txt -->
   <div id="content">
    <% YOUR CONTENT HERE %>
   </div>
  </div>
 </body>
</html>


Remember to give your page a new title and put it in <% YOUR TITLE HERE %>. Next, replace <% YOUR CONTENT HERE %> with your web page contents.


Menu Auto Generation

After the new UI is cut over, there is some new ideas come up. Since we use the include to avoid duplicate implementat, should we make a further steps for automatio?
So, professor and we talk about the possibility of generating the navigration bar menu that included into the web automatically so the new UI can be easily cut over to any other websites by simply providing customized menu content. After some discussion and test, we finally get this done functionally. With our script, users only need to provide a text file followed our sample input, a customized menu of navbar can be provided automatically.
Here is the sample input:
    0^Object-Oriented Programming^^OOP^
    1^Home^index.html^^glyphicon-home
    1^Course Topics^
    2^Introductory Material^
    3^The Basics^basics.html^
    3^Abstraction Mechanisms^abstraction_mech.html^
    3^Containers and Algorithms^containers_algo.html^
Introduction to the sample input:
As you can see, each line stands for an entry in the navigation bar. ^ is the delimeter chosen to divide the five fields which would be necessary in each entity
The first field, the number, stands for the level. If larger number follows a smaller number, the item with the larger number line should be the subtitle in the item with smaller number line.
The second is the title field which would be the display title of the entry.
The third filed is the URL field. Normally it is the filename or relative path of the target page. However if these menu is used in page files of different hierarchy, we recommend to use full URL on your server to ensure the menu's universality. Also entry with subtitles should not have a URL.
The fourth field is the shortcut title which would be the display title of the entry when the navigation bar collapsed.
The fifth field is the glyphicon which is the icon before the title.
If a field and its following fields are not necessary, all of them and their delimiter can be dumped. But if a field is empty, you cann't jump directly to its next one which is not empty and must put a delimiter there. For example, "1^Home^index.html^^glyphicon-home", it doesn't have a url but need a glyphicon, there must be a field with nothing between URL and glyphicon.
After the menu is provided following above sample, a navigation bar text and all relative files would be created automatically. It gonna rise a new web structure quickly and save tons of time of duplicate work.
The script has been tested with the DevOps and OOPs files so far and it works well, and we will keep improve it to cover more corner cases and fault tolerance which give users better experience.