Hello all, the final individual blog assessment task for this course is to design a small to medium sized website of a subject of choice. This website must contain a minimum of ten pages, and must be of a professional/educational nature.
In order to meet these criteria above, I have chosen to design a website called:
WiFi Node Observation Deck
The website objective is to provide various software that allows monitoring and visualization of a wireless network device statistical information. The website will also offer services to map wireless mesh network nodes and viewing the network topology’s of such.
The target audiences of this website includes:-
- Network Administrators – will be the primary audience of the visualization software (typically of age 21+)
- Network Owners – will be the primary audience of the node mapping services (creation, initialization, management)
- Network Users / Support Staff – should a network owner register an account for a node mapping service, the users of respective network will be the secondary audience
- Interested Public – will be able to view information of public networks
In order to effectively target the appropriate audience, design of website home-page and navigation will divide the website logically depending on the user desired outcome. For instance; all content relating to the offered software will be grouped in a container with quick access to critical information (features, screenshots, guides and pricing/purchase). Likewise, the network mapping service will also be logically grouped in a container, however, this container will also be split into three sub-categories which aim at the remaining audiences; a section for new network submission (Network Owners), a section to directly access an existing network map (Network Users) and finally a section to browse publicly listed networks (Interested Public).
A quick recap of website categories above :
- Available software information
- Software description / features
- Software installation guides and hardware compatibility
- Software pricing / license information / terms and conditions
- Software purchasing / on-line store
- Network mapping service information
- Service description / features
- Service preparation / setup guide
- Service account creation / administration
- Service privacy information and configuration / terms and conditions
Network Users / Support Staff
- Network mapping service access
- General service information
- Guides on use / access
- Request to join existing network
- View joined network information
As the identified website target audiences have a high chance of exclusively belonging within the adult age demographic, the website will be designed using a simplistic and aesthetically pleasing color scheme that avoids user fatigue whilst reading presented information. It is also assumed that the majority of website users will have moderate technical knowledge as the website content will primarily deliver technical information. However, effort will be made into converting as much of this information into a user-friendly visualization which will hopefully allow users with lesser technical knowledge to still benefit from the contents.
Included below are some screenshots of existing similar website of which the above schemes will be derived from:
A scheme similar to the above will be used to represent and promote the available network monitoring software after it’s section has been accessed via the dashboard page or navigation system.
This page reflects the layout of the Node Mapping service, (specifically the view of a registered network user, looking at available network nodes) which includes clickable hyperlinks to individual devices of interest, but also access to the various sections that contain the other node diagrams, charts and information via the navigation.
Finally, this screenshot represents a closer representation of the desired node mapping service dashboard page and navigation system of a logged in network owner or user. This page would be directly accessible from the home page or navigation system. The final design of the node mapping system will be a derivation of a combination of the two previous images.
The proposed navigation system will remain consistent throughout every page of the website, with direct access to any category available through the navigation bar or the default home page. Should a category be activated (clicked) within the navigation bar, a list of respective sub-categories (if required) will be displayed as a series of indented sub-items. This will ensure that the entirety of website content is accessible from every page, though remains in a non-confusing and easy to read fashion.
The blueprint diagram below highlights the general website flow and user interaction of website components (click picture to open full-size version):
The navigation scheme of the website can be seen clearly within the above blueprint, the main navigation labels are in bold, and can be seen by all users (and will only change based on decisions indicated by diamond shapes). All sub-category (child) menus are also listed under their parent, and information flows between information/processing pages and database systems have also been highlighted.
It can also be safely assumed that the navigation design of the website is of a hierarchical structure, this can be seen through the use of inheritance and the parent/child relationship of navigational categories and sub-categories. By splitting the website into logical sections assists with providing the correct content to the correct target audiences whilst minimizing unnecessary options/content and preventing users from getting lost.
The primary navigation menu will be affixed at the top of the webpage. When a particular tab is activated, contents below the top navigation bar will dynamically adjust itself respectively. The majority of categories will invoke a main content section that includes the top navigation bar (this is included globally within the site, and is never not shown) and section below divided into a fixed-left navigation bar containing all of the parent category’s sub-categories, and the remaining space to be dedicated to display content. The left navigation bar will be displayed on every page with exception of the home-page. This three tier system is relatively common, and can be seen used in the design of many websites. This will be further highlighted with the presentation of wire-frame prototypes in the next section. An example of the fixed global navigation bars located at both the top and the left of the screen is as follows:-
Along with these main navigation bars, navigational bread-crumbs will also be located directly below the top navigation bar and directly above any displayed content – these bread-crumbs are included in order to allow the user to quickly determine where-about they are located within the total site hierarchy / map. This again provides enhanced user-friendliness to the website, and aids the user retain their bearings whilst navigating through sections.
Included below is a collection of wire-frame prototypes developed to highlight the design principles to be applied in the creation of this website. This is to demonstrate how the navigational systems will flow between categories, and examples of how the website content will be delivered to each of the target audiences.
Above is an example of the homepage, the first page that the users will see when they enter the website. It is very simplistic by design, and will allow users to quickly and efficiently locate desired content (based on target audience – these are the main logically separate containers geared towards each target market).
The snapshot above highlights the purchasing information section of the application web store page. The snapshot below highlights the search functionality of the website, the design of which has been styled to closely represent that of Google so that users have a sense of familiarity whilst performing a search query on the website:
Finally, due to the website including aforementioned search functionality – in order to be correctly implemented for the maximum possible efficiency, the Controlled Vocabulary of the website must be assessed, and the design of a Metadata Matrix is to be composed. Using both the Controlled Vocabulary database and Metadata Matrix, the internal search engine is able to optimize the results provided to the user by effectively expanding or modifying the query behind the scenes so that a desired item the user is searching for is not accidentally missed through the use of a non-exact matching term.
|Product||Product name / description||WiFi, node||Easy|
|Service||General service name / desc.||Cloud, network||Moderate|
|Price Plans||Specific Service Plan details||fee, cost, price||Moderate|
|Network||Existing network name / attribute||SSID, IP, MAC||Difficult|
|Guide||Guide document feature / content||how to, how do i||Easy|
Considering the Metadata Matrix above, the table below illustrates the Controlled Vocabulary Database:
|Accepted Term||Variant Terms|
|wLan||WiFi, wireless, local area network|
|Quality||Signal, RSSI, SNR, strength|
|$x.xx||Plans, service, cost, price, licence, terms,|
|Map||network map, network topology, node list|
|how to||guide, instructions, help|
That concludes the potential design of WiFi Node Observation Deck! Thanks for reading!