Design and Implementation of the Website - Assignment Example

Design 1. Design Considerations A number of different factors were considered during the design phase of the project in order to enhance the overall web usage experience of the website. The largest design consideration was the primary objective set before which is laid out below again: To build a simple First Aid web application for Newcastle University’s students, which will contain: test, general information, techniques and first aiders’ contact list. The design is to be attractive and user-friendly. Also, the website is not to be complicated and does not include irrelevant information. As mentioned before, the aim of the website is the delivery of useful even lifesaving information in the simplest possible manner. Essentially this means that the website has to deliver on human computer interaction (HCI) in order to ensure that the visitors to the website get the information they require with little hassle. The HCI was augmented through the implementation of usability criteria that allowed an enhancement of the design elements. Usability was worked on during the design phase so that implementation could be better planned and coordinated. Essentially usability refers to the simplicity of use and the learnability of products created by human beings. The concept of usability is extensive and can be applied to the design of software, machines, tools, processes, website and any other devices that serve human purpose. Over the years usability has found increasing utility in communication and knowledge transfer1. Since the website is aimed at both communication and knowledge transfer so it only makes sense to design the entire website using usability criteria. However, it must be borne in mind that a number of different usability criteria exist including those presented by the International Standards Organisation (ISO) so choosing the right criteria is essential. For example, the usability criteria for machine tools are significantly different from the usability criteria for websites so care must be exercised in choosing the right framework. The usability criteria employed for the current website was derived from the work of Lund (1997). 1.2. Lund’s Usability Maxims Lund has provided a number of different usability maxims that have been derived from heuristic surveys. This ensures that these maxims are wide banded and thus are applicable to a wide range of design criteria2. The audience for this website is expected to span all kinds of age ranges, demographic and socio-economic backgrounds because emergencies could occur anywhere at any point in time. Therefore, there was a consistent need to ensure that the design criteria for the website were pervasive and would fit most audiences well. Lund’s usability maxims are presented below along with the appropriate design incorporation in the website. It must be kept in mind that these criteria are listed in order of decreasing importance according to their mean rating of importance derived from Lund’s work. 1.2.1. Identifying the User This website is intended for audiences looking for information on First Aid in general and more specifically audiences specific to Newcastle University. This indicates that the concerned audience could consist of: any age range between 10 and 65 years of age; any demographic background as there are international students on campus; any forms of disability; people with different levels of computer interaction and knowledge; people with little knowledge of first aid; people in a panicked state. The criteria listed above describe the typical user for the website. Among other concerns, the major concern was the state of panic in which certain users would visit the website. The website is intended as a first-hand reference for first aid in emergency situations so it can be expected that people in emergencies would visit the website for seeking out what to do. Given this overriding constraint, it would make a lot of sense if the website tends to deliver the required content with the least effort required by presenting an intuitive interface that is operable by anyone. The key element here is simplicity of use that offers information just when required through the application of minimal computing expertise. Based on this usability criterion, the website was provided with a fitting logo on top that sticks out prominently to indicate the nature of the website. This is intended to secure the visitor’s confidence as to the nature of information available on the website. The logo features a typical saddle bag with a “+” sign to indicate the medical nature of the website. This conforms to pervasive medical practice throughout the world where ambulances and other medical devices and facilities are marked using this branding scheme. Anyone anywhere visiting this website can take one look at the logo and decipher that this website has first aid information to offer. The logo is presented below for reference. Figure 1 - Logo of the website 1.2.2. Design Consistency The website can be considered as a multi-faceted concern given that it is composed of more than one page. These pages can all be considered a facet of the website that the user has to interact with. In terms of design the facets of the website need to be either similar or well matched in order to ensure that the user feels little resistance when moving from one page to the other. Design consistency ensures that users have little problem in navigating throughout the website. This design philosophy can be seen pervasively throughout the larger web based ventures such as eBay that host a singular interface for the user to interact with. In more technical terms, this ensures that the user applies minimal time in deciphering how various facets of the website work. In turn this tends to lower the learnability time required for using the website. The design of the current website has been kept consistent and centred around one common theme. The colour scheme, fonts, text, images and videos have been kept consistent throughout the website structure in order to ensure that an average visitor has minimal trouble in navigating the website. This is also essential for this website because people in emergency situations may be visiting it and it would be preferable for them to visit something intuitive rather than something full of surprises. The major design elements of the website including the main menu and the colour scheme repeat themselves around the website to provide design consistency. Figure 2 - The green colour scheme, the ubiquitous green blue background and a menu above and below the main content has been kept consistent throughout all of the website to ensure design consistency. 1.2.3. Decision Information A prominent part of Lund’s usability criteria is the provision of information for making decisions when making a decision is required. This tends to serve two different purposes in the current website: information in navigating the website; information to save someone’s life. The website can only be navigated when the user knows what the outcome of his actions such as clicking will be. In these terms the website has been kept simple by applying only the most common and standard elements for navigation. The menu has been constructed using a standard div tag that has text inserted into itself to create a button. These simple buttons mean that the user has ample information as to their use. The user is fully aware of the consequences of using these kinds of buttons because these are one of the most common elements throughout the online domain. Figure 3 - Menu used above and below the page's content The second aspect is saving someone’s life using the website. The user must be provided with the right information at the right time in order to make a lifesaving decision. This has been provided for using one common page with simple controls that provide the user with all the information required to make the right decision. The Techniques page provides all of the required information in a simple to use interface that is shown below. Figure 4 - Techniques page main interface Figure 5 - Expansion of one of the technique sections delineating the basic design philosophy As seen above the section for unconscious adults provides nothing but the required information without much searching required. Moreover, the information that has been provided has been arranged in a systematic manner in order to ensure that the visitor knows what to do after one reading of the section. This flow of information ensures that the visitor has enough information arranged in a systematic manner to take the right decision at the right time. The flow of information has also been simplified using videos that can also be seen in the screen capture above. These videos provide a simple visual method to demonstrate what to do when a particular problem is experience in terms of first aid. In case that the visitor is not inclined to use textual information, they can always use the video to extract information for taking the appropriate action. This augments the usability maxim for providing the user with the right information to make the right decision. 1.2.4. Error Help As such the website is too simple an interface to be provided with detailed error help. Moreover, since the visitor does not have any editing capabilities so there is little chance that error trapping inabilities would somehow damage the website structure. The website has only a few errors that could be encountered including: 404: page unavailable; 500: server gateway time out; video not accessible from YouTube. All of these errors have server end handling so error handling has not been implemented with the website structure. Satisfactory website operation is expected without the need for error handling. 1.2.5. Action and Reaction One of the more prominent problems with bad interfaces is their lack of responsiveness. The quicker an interface responds to the user’s requests, the greater are the chances that the user would be able to perform better diagnosis of the expected interface behaviour. For example, if a visitor were to click a button on a website without any visible response coming through the visitor might keep clicking the button over and over to accomplish his task. Similarly, websites whose pages load slower would not be preferred by visitors. To deal with this problem, each page has been loaded with content that requires nothing more than a decent 56 Kbps connection to work. The only exception to this are the videos provided in the techniques section but a textual workaround has been provided for that as explained in the previous section. 1.2.6. Fixable Mistakes Since no output is extracted from the website so this maxim was seen as irrelevant to the usability of the current website. 1.2.7. Overwhelming the User It is typical for a number of designs to overwhelm the user with either large amount of material or with a large amount of design elements. When the average human being is subjected to a large amount of information that needs to be processed, it is difficult to organise and then classify such information. Consequently the overwhelming information that is provided to human beings tends to cloud judgement and to make decision making harder. The current website has been created in order to clarify thinking and action on the issue of first aid. If the information provided on this website or the content provided on the website was overwhelming, it would pose two problems: pages would load slower given the large amounts of design elements implemented on them; decision making would become harder given the larger volumes of information that would need to be processed to make decisions. Both of these problems would tend to contradict usability maxims provided above in the form of violating Action and Reaction as well as Decision Information. This usability maxim was satisfied by keeping the content state at an optimum level so that the user does not feel overwhelmed by the provided content. The main objective of the website could only be satisfied once these issues were satisfied so special attention was paid to these elements. 1.2.8. Consistency Lund’s usability criteria have stressed the need for consistency over and over again including a separate usability maxim for consistency. The basic contention behind consistency is to ensure that the overall look and feel is coherent and so presents a professional and credible outlook for the audience. The right kind of impression about the website is essential to developing a credible rapport with the visitors since only then they will utilise the information presented on the website. The clearest example for this can be seen in our daily behaviour while using the internet. It is common to search for something using a search engine such as Google. The results are then processed by visiting the resulting websites. It is common for many of us to visit a website and hit the back button after we have only gone through one or two pages of the website. The lack of consistency tends to erode the very professionalism that would have built up the credibility of the website. Moreover, the visitor also gets an impression that the website may be difficult to use so there would be little point in trying to learn to use it. In contrast the current website design has been bolstered by making it consistent and thus credible. The visitor can only be expected to utilise the presented information if they feel that the website is credible enough. 1.2.9. Minimisation of Human Memory Requirements Users typically experience problems in using devices that require the use of a large amount of memory. Most typical human actions are derived from memory such as switching gears while driving. Similarly when using computer interfaces a number of actions are spontaneously derived from human memory3. For example, clicking a button to retrieve new information is an action mired in human memory. The more intricate the computing interface, the greater is the need for utilisation of human memory. One of the chief differences between command line interfaces and graphical user interfaces (GUIs) is the fact that GUIs require less human memory in order to function. Compare for example accessing the primary drive in your computer using the command line and then the GUI. The speed and the exertion with the GUI are far lower than that for the command line interface. In a somewhat similar manner web based elements can be made complex or simple and intuitive. In the case of the current website the various sections presented in the Techniques area could have been navigated using myriad approaches. One possibility was using Flash based action elements but they presented unwanted complications in terms of use. One typical complication is the unavailability of the right Flash version. A visitor using an older personal computer may have to download Flash before the website could be accessed. Downloading and installing Flash would present unique challenges for audiences with limited knowledge of computers so it was felt necessary to simplify the design by using text based content. To make things simpler, dynamic HTML elements were used instead. 1.2.10. Learnability Learnability is often treated as one of the chief aspects of usability. The ability of a user to learn how to use a service is seen as the service’s learnability. The greater the learnability, the simpler it is to use the desired product or service and vice versa4. Typically systems with a large number of elements for servicing require more time for learning and thus present learnability issues. In contrast, the current website presents a simple system that presents nearly no major learnability issues. The website has been kept simple purposefully in order to ensure that the visitors do not have to spend time figuring out how to use the website. No extraneous features such as logging in are required in order to access the information required. Therefore, the learnability of the website is high and would require little more than a few minutes in order to become fully usable for an average internet user. 1.2.11. Shortest Path The shortest path to the required information and services is an essential element of usability. This ensures that the user does not have to navigate in and out of various facets of a product or service in order to do common tasks. For example, it would hardly make any sense for a person to be able to navigate a website only after logging in although this is typical with forums. In order to avoid any such problems, the current website’s information mechanisms were kept as simple as possible using the shortest path strategy. This also bolstered the usability of the website. The website only has a few pages that are required. The required information pertaining to techniques are construed on one page that has been labelled as Techniques. This approach ensures that the required information is available through the simplest possible means especially information pertaining to emergency situations such as strokes. Once again the use of this approach tends to enhance the usability of the current website. 2. Implementation The implementation of the website dealt with the practical aspects related to creating and hosting a website. The primary medium used to create the website was Dreamweaver (by Adobe). This allowed direct access to coded snippets and sections for easy modification, troubleshooting and implementation. Since no dynamic interaction with databases was required for the website so its structure was kept simple by creating pages in HTML. This ensured that the website could be hosted on any common server without the need for expensive hosting solutions. The basic steps taken in order to deal with the implementation are outlined below. 2.1. Page Layout A standard page layout was chosen which provided simplicity and functionality at the same time. The page layout is presented below. The rectangles with borders represent different sections of the page layout. All pages were provided with a logo on top to identify the website. The menu was provided twice on each page to boost accessibility. The text chose for these pages was kept large in order to promote usability by disabled visitors. The content section of each page has been interlaced using text, images and videos depending on the page and its use. 2.2. Logo The logo was kept simple and brief by creating a vector based image that displayed the “+” sign that is often used to refer to medical services and facilities. This was augmented by mentioning Newcastle University on top so that the specific audience of the website could identify with it. Also, the logo cum banner for the top was labelled with “First Aid Online Tutorial” to provide visitors with some idea as to what the website holds. The logo cum banner was placed atop every single page to promote consistency and to provide an idea as to the website’s purpose. This approach ensured that the website’s top area remained positively occupied with purposeful content. 2.3. Navigation Scheme The navigation scheme of the website was kept as simple as possible in order to facilitate the visitors. The resulting navigation scheme is presented below for reference as Appendix ‘A’. The entire structure is simple and is only two layered after the home page. The basic bifurcation arrives in the Techniques section where different other sections are present in div tags on the same page. This ensures a simple, effective yet robust navigation structure that can encompass the projected needs of the current website. 2.4. Web Content The web content for the current website is structured into three different parts – text, images and videos. The text used on the pages of the website is single size based on a large sized font. This ensures that all forms of audiences can easily access and interpret the website. Other than the text, images and videos have been employed in order to enhance the overall look and feel of the website. These are described in greater detail below. 2.4.1. Images The images used for the current website have been based on vector imaging in order to decrease their overall size and thus enhance their usability. A number of other imaging techniques could have been used such as JPEG, GIF and the like but these were abandoned in favour of the vector based imaging style. The lower sizes of these images ensure that pages load faster and seem crisper. A typical vector image employed for the website is shown below. Figure 8 - Typical vector image utilised on tha main page The image shown above demonstrates the efficacy of the utilised file format – small size, simple resizing for various viewing devices and readily loaded. All images on the website have been placed based on these criteria. 2.4.2. Videos A number of videos were placed on the website in the Techniques section that has been linked from YouTube. The purpose of placing the videos was to enhance the usability of the website. However, these videos are large in size and it would make little sense to place these videos on the website hosting server so instead the videos have been placed on YouTube and have been linked to the page. 3. Appendix ‘A’ 4. Additional References Nielsen, Jakob. (August 2003). Usability 101: Introduction to Usability. Alertbox: Current Issues in Web Usability. Retrieved from http://www.useit.com/alertbox/20030825.html GOSS Interactive. (October 2011). Conducting a website review and implementing results for increased customer engagement and conversions Retrieved from http://www.gossinteractive.com/community/whitepapers/conducting-a-website-review-and-implementing-results-for-increased-customer-engagement-and-conversions Read More