Our UX Implementation
New UI Designs
For the first version, we want to clear up the web with a
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):
When creating a new page, copy the following template into
your text editor:
<!--include subhead.txt -->
<% YOUR TITLE HERE %>
<!--include googleAnalyticsScript.txt -->
<!--include navbar.txt -->
<% YOUR CONTENT HERE %>
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:
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.