Introduction
In this unit 21 assignment 2 design a website I aim to discuss and make 5 Page hierarchical site map produced in Word and linked to blog, Individually produce full site map produced in Word displaying Hierarchical Diagram & Matrix Navigation Diagram, Comparing & Evaluating all site maps produced within group and evidence of agreement of the final design, Final Site of Map produced in Visio and linked in blog and Description in blog describing and justifying the tools used in producing the navigation and purpose of site map, Description in blog describing and justifying the tools used in producing the navigation and purpose of site map. By doing I will have met the navigation part of the assignment.
1. 5 Page hierarchical site map produced in Word and linked to blog
Hierarchical Diagram
In this hierarchical diagram it displays the pages that I will be creating for our group website and how it will work out on our website. The index is the main page and the four “sub" pages I will be doing is the product information, checkout, terms and condition and shopping cart. From the diagram we can see that the that the four "subpages" are all linked to the index page which means the "sub" pages can be accessed through the index page. In the diagram I have put my checkout page underneath the registration as it shows the logical way of getting to that page on the website.
Matrix Navigation Diagram
In this matrix diagram it displays the pages that I will be creating for our group website and how it will work out on our website. The index is the main page and the four "sub" pages I will be doing is the product information, checkout, terms and condition and shopping cart. From the diagram we can see that the four "subpages" and index page are all linked together that will allow the user of the site to go from one page to another for example product information to terms and condition or any other combination such as shopping cart to index and etc. Users can be anywhere and still be able to go to a particular section of the site according to the diagram.
2. Individually produce full site map produced in Word, displaying Heirarchical Diagram & Matix Navigation Diagram
Combined Website Navigation Diagram
In this combined website navigation diagram it displays above all the pages that we will be creating as a group website and how it will work out on our website. The index is the main page and six "sub" pages these consists of product information (1, 2 and 3), Registration, customer service and help and shopping cart. Under the two of the main pages which are registration and customer service and help, there are further “sub” pages which give them a logical sequence that will take the user in a sensible chronological order to get through those pages. For example with the log in users would make an account and then be directed to a log in page where they would log in to get their account up and running and then checkout to finish off the transactions. I know this because how the diagram depict it meaning the orange boxes show they are related by the blue box via the orange lines.
Combined Matix Navigation Diagram
In this combined matrix navigation diagram it displays all the pages that we will be creating as a group website and how it will work out on our website. The index is the main page and thirteen "sub" pages these consists of product information (1, 2 and 3), Registration, shopping cart, contact us, delivery policy/information, terms & condition, FAQs, Customer Service Help, checkout, log in and registration. I know this because how the diagram depict it meaning the orange boxes show they are related by the blue box via the black lines. Also according to the diagram when on one page users can get to another page through the original page making it easier to navigation around the website to get to the correct position.
3. Comparing & evaluating all site maps produced within group and evidence of agreement of the final design
After individually completing our diagrams of how our navigation of our website is going to be like and diagrams of how each page is linked we all sat down together and discussed on which designs we should use for our website. After reviewing all our diagrams it was evident that we all had gone in a similar direction with our website navigation layout, however we has some differences in putting them down this was very helpful as we highlighted the problems with our diagrams and things we had over looked when designing them. For example with my diagrams the logical sequence from registration to log in to checkout transaction didn’t seem right in a logical sequence. As we had made our diagrams in different ways it provided help in identifying the difference between them making it easier to identify which diagram should be used so therefore making a final decision of which diagrams to use for our website.
From looking at my diagrams designs firstly at first glance we as a group all agreed together what the good points and the bad points were. At the first glance of my diagrams it was easy to under the information on the page, this is because the diagrams clearly displays the pages in a sensible order and also has different dependencies highlighted with different colours for example in the hierarchical diagram and combined navigation diagrams three levels were used and all levels are represented in three different colours. These highlighted the different dependencies displaying that they are different webpages and at different class so if used we know what will be the main page, subpages and sub underneath subpages. Also my diagrams were not annotated; they only had headers for the sections distinguish what section was what. This could also be a bad point as I could have used different fonts to distinguish which webpages each group member was doing in the combined navigation diagram. Additionally all boxes were lined by a line, this was a good point as it indicated how and what webpages are connected to each other for instance a line between the index page and product information displays there is a connection between the webpages. However though there are some good points about my diagrams there are some bad points are we noticed when reviewing it. In my hierarchical diagram and combined navigation diagrams there were some logical inaccuracies that made to the diagram seem not right. For instance one of the subpages was registration and the subpages for that were login then checkout, this seem not to be logically right as you won’t be asked to register to purchase product. Due to this I change my diagrams to show that you had to log in then be asked to register if no account is made and then finally checkout. With my matrix and combined matrix diagrams they lacked colours to depict dependencies which make it less clear of what was the main page and subpages.
From looking at Sam’s diagrams designs at first glance we as a group all agreed together what the good points and the bad points were. At the first glance of Sam’s diagrams likewise with my diagrams is it is easy to under the information on the page, this is because the diagrams clearly displays the pages that are going to be done in a sensible order which helps people who see it understand how the navigation is going to be. However though this is a good point it can be seen as a bad point as there is only one colour used rather than separate colours which could depict the different dependencies used in the navigation system. Compared to my diagrams, my diagrams had different colour which showed the different dependencies of the navigation clear which we could not have been said about Sam’s diagrams. On the other hand this point could similar to my matrix diagrams which lacked colour making the dependencies more unclear. Similarly to my diagrams Sam’s diagrams additionally had all boxes lined together by a line, this was a good point as it indicated how and what webpages are connected to each other for instance a line between the index page and product information displays there is a connection between the webpages. Another bad point that was identified was that the registration, checkout and log in were separate subpages of the main index page, this was identified as un logical by the group.
From looking at Rami’s diagrams designs at first glance we as a group all agreed together what the good points and the bad points were. At the first glance of Rami’s diagrams likewise with mine and Sam’s diagrams is it is easy to under the information on the page, this is because the diagrams clearly displays the pages that are going to be done in a sensible order which helps people who see it understand how the navigation is going to be. However though this is a good point it can be seen as a bad point as there is only one colour used rather than separate colours which could depict the different dependencies used in the navigation system. Compared to my diagrams, my diagrams had different colour which showed the different dependencies of the navigation clear which we could not have been said about Rami’s diagrams which is likewise with Sam’s diagrams. On the other hand this point could be similar to my matrix diagrams which lacked colour making the dependencies more unclear. Similarly to my diagrams and Sam’s diagrams additionally all boxes were lined together by a line, this was a good point as it indicated how and what webpages are connected to each other for instance a line between the index page and product information displays there is a connection between the webpages. Another bad point that was similar to my and Sam’s diagrams were that was identified was that the registration, checkout and log in were separate subpages of the main index page; this was identified as un logical by the group.
In the end we used Visio to gather our ideas and take the best points of each to create final diagrams which would work past the original problems we encountered.
4. Final Site of Map produced in Visio and linked in blog
5. Description in blog describing and justifying the tools used in producing the navigation and purpose of site map
To create our diagram we had used two tools to create our diagrams for our navigation of our website. These tools are Microsoft Word and Microsoft Visio. Microsoft Word is a word processing software tool that also has some drawing features to create basic diagrams with variety of limited shapes available for use. As these basic shapes can be constructed together to create diagrams or shapes they can consist of being able to create basic Hierarchical diagram, basic matrix diagrams, basic maps, new shapes, designs and etc. The reason why this tool was used in producing the navigation for the website and purpose of the site maps as it was easy and very quick to produce the necessary diagrams needed in a short period of time. The reason why Word was easy and very quick to produce diagrams was because all that was needed to be done was to select the shapes wanted and it automatically pasted the shapes on the sheet for the user (us) to be able to position and resize to our preferences. Due to this we were able to create four successful diagrams which consisted of two basic hierarchical diagrams, two basic matrix diagrams and combined website navigation diagram successfully without too much time taken. Also by Word being so easy to use and being quick it will have a positive effect on the project as a whole. In other word this means I didn't need to spend a long time creating the diagrams which resulted in me not falling behind and playing catching up which would have affected the timings of the project, meaning important tasks wouldn't be completed as result of me spending a lot of time in making the diagrams which shouldn't really take a lot of time. Also another reason why I used Word rather than any other program was due to the reason I was familiar with the program, this meant I knew how to use it meaning not a lot of time was needed to train myself in it to be familiar with it. Due to this I could get my diagrams completed much quicker without too much difficulty experienced.
Microsoft Visio is a diagramming software tool that mainly uses vector based drawing features to create higher end diagrams for commercial purposes with a variety of advanced shapes available for use. As these higher end shapes can be constructed together to create diagrams or shapes these can consist of being able to create basic Hierarchical diagram, basic matrix diagrams, basic maps, new shapes, designs and etc. The reason why this tool was used in producing the final navigation for the website and purpose of the site maps was it was easy and very quick likewise with Microsoft Word to produce the necessary diagrams needed in a short period of time. The reason why Visio was easy and very quick to produce diagrams was because all that was needed to be done was to drag and drop shapes wanted on to sheet for the user (us) to be able to position and resize to our preferences. Due to this we were able to create a combined website navigation diagram successfully without too much time taken. Also by Visio being so easy to use and being quick it likewise with Microsoft Word it will have a positive effect on the project as a whole. In other word this means I didn’t need to spend a long time creating the diagrams which resulted in me not falling behind and playing catching up which would have affected the timings of the project, meaning important tasks wouldn’t be completed as result of me spending a lot of time in making the diagrams which shouldn’t really take a lot of time. An addition reason why Visio was used was because of the more variety of shapes that could be used, by using this I was able to use more unique shapes that made it more obvious what things were what. For example a home icon shape was available to use and it made it more clear what the index page was which the home page was. An addition reason why Visio was used was because it could be saved as a picture format. This helped because it would help being viewed by everyone when uploaded on a blog. For example in my blog my diagrams are in a JPEG file format which can viewed by everyone on whatever device.
Conclusion
Overall taking everything into considerations after completing these various tasks I have ended up with a better understanding and established a firm foundation of how our site is going to navigation and how it will work out. This will have a further positive effect on the project as I will have a starting point of how I should approach in creating out sites navigation. For instance the navigation I have created will show me how it will operate for example from the home page users are able to go to the terms and condition page.
