4th W: Web Evaluation

Like all organized projects, web projects have to be evaluated before being published. This is especially important because web pages are becoming important resources for the users and to assess their instructional qualities. Evaluation can employ experts, normal people and others experiences.

Web Evaluation Process

Web evaluation must be both formative and summative. Formative evaluation is done during the process of making the web project and usually by experts and designers themselves. Summative evaluation on the other hand is done to the final outcome employing experts and a sample of the targeted users.

The evaluation of a website should consider the usability of the website. The usability can be measured through five quality components: learnability, efficiency, memorability, errors and satisfaction of the audience. In addition to that we need to look at the accessibility of the website through measuring seven factors. These are navigation & page layout, visual presentation & customization, text descriptions for images, accessible mark-up for forms, lists, scripts and tables, use & presentation of written language, accessible issues for other media types and help, searches, errors & documentation.

Observation, in-depth interviews, surveys, focus groups, analysis, reports, and dialogue with users in addition to form, checklist or rubric; all of these can be the tools of evaluation.

Web Evaluation Form

When developing an evaluation form for a website we should consider designing different form for different user’s level – age (children, teenagers, or adults), types of users (novice or expert). The items in a web evaluation form should be based on the objectives of evaluation.

In designing the evaluation form for the website we have to give special consideration for reliability and validity. The results given by the form has to be reliable which means that the same results should be obtained when applying the evaluation form on another website with the same characteristics. The form also has to be valid measuring exactly what it should measure.

3rd W: Designing for the user

When designing a web page it is crucial that we design considering the user on line with accomplishing the other objectives behind constructing the site. In discussing this issue let us look at an example which can help us apply the rules for a good design for the user. Our example is from a famous website. That is learningenglishkids managed by the British Council. In precise we are going to look at the page presenting stories in learnenglishkids website of the British Council. The URL for the page discussed is: http://www.britishcouncil.org/kids-stories.htm

Interface Design
Interface design is most often associated with the development of Web pages, computer software, and multimedia, but is relevant to the creation of any instructional media or technical equipment. Interface design encompasses three distinct, but related constructs--usability, visualization, and functionality (Vertelney, Arent, & Lieberman, 1990). Recently, a fourth component of interface design has emerged as a critical factor--accessibility.

I. Usability

Usability refers to how intuitively or easily the media item is navigated and processed (flow, sequence, instructions, download time). This construct is the most inclusive of the three and is influenced by both visualization and functionality. It can be said that learningenglishkids webpage has a good usability.

Navigation
In terms of navigation it is mixing two famous strategies, Index navigation and Tab-stop navigation. The index navigation is occupying the central and biggest part of the page and that is natural because it provides the details and links concerned about stories (which is the topic of this section). On the other hand, the tab-stop navigation is used in the frame of the page up and down. And it provides more general options which can lead to related pages outside the stories section or the main page for stories. It is cleverly designed to have pull-down menus to give fast access to the details inside the major sections in the main website (learnenglishkids) and also related websites like the main British Council website. The possibility of getting to the homepage from any place in the website is a good feature counted for the website. In addition to providing easy and fast access to the main menu, it also serves as emergency exit for the users who mistakenly gets lost in the website. Although the user needs to scroll down to see the down tab-stop navigation, in that navigation there are links to the most general locations which are not of interest to kids (the main users).

Scaffolding
For scaffolding the website provides instructions and ideas directed to teachers and parents on how to use the website and its contents. These are put in the lower section of the page since it is not directed to kids. Apart from that the webpage has the option for using Google search engine which allow kids to quickly locate specific stories they like. Dynamic overviews (pop-up windows that illustrate the location of a user in a hyper-structure) were also used in the webpage.

Figure 1

II. Visualization

Visualization is creating visually interesting and aesthetically pleasing media items while avoiding potentially distracting or unnecessary "bells and whistles."

Images, text and audio
The website we are looking at uses a combination of both visual, text information and verbal information which is recommended to enhance clarity. This combination is chosen to suit the main users of the website (kids). The website uses small image clips ( some are animated and some are not) to represent "clickable" or interactive options, for example the image clips linking to short stories, long stories and stories for little kids. For introducing the stories in the website both text and visual representation is used. For example Goldilocks and the three pears fairy tale is introduced in words explaining the main things in the story in addition to a drawing to the right. In the drawing Goldilocks appears in front of a table where there are three bowls of soup. In presenting the stories themselves, visual, text and verbal presenting is used. This enhances learning a lot, since the kids will be able to learn about the story from these three ways at the same time. Looking at text we notice that capital letters are used for headings where as small letters are used in the body which is the correct way. The use of san serif veranda is successful in this website. According to Molich and Pernice (2002) “Sans-serif faces, such as Veranda, are crisp and easiest to read onscreen.”[1]

Colors
The use of colors is generally balanced. The page is not crowded with many colors and it is consistent with a certain number of colors. Some headings are highlighted with different colors to attract attention. The use of colors is also elaborated for important words in the text to make them stand out above other words. Most of the backgrounds for text are white with color for text that gives good contrast. However in the first page a background color of light green is used with words in dark green which makes it difficult to read. The background should be in contrast with the words for easy reading. Another thing which the website designers need to revise is the extensive use of red in the pages. Though sometimes mixed with green, red is the main color of the website. Nonetheless, “dominant red colors evoke feelings of passion, aggression, or danger.” [2] It is better to reduce the use of red and instead use green because “Green is often associated with luck or nature”[2].

White space
For instructional messages, a formal balance is recommended to avoid distracting the learner. This can be achieved through white space. Website designers are keeping a simple and Zen-like layout by increasing line heights and adding lots of whitespace to pages. Instead of crowding the page with information overload, New Web designers are focusing on the essentials, and producing clean and fresh pages.The white space is used in the webpage we are discussing to create the formal balance especially through serving as background to the elements of the website.

Density
The best web interfaces will not distract the learner with an overwhelming array of images, icons, text objects, or features. Our webpage here do apply this. It has screens of average density and avoids long pages like this one that make you scroll forever through endless mounds of content.

Consistency

The interface of the site maintains a consistent look. Icons used for navigation maintain one position to avoid confusing the learner. It also uses similar font faces and color schemes throughout the interface. The consistency in the sequence and in the way of presenting the elements of the website makes life easy for the kids. They do not have to wonder whether different words, situations, or actions mean the same thing.

Figure 2

III. Functionality

Functionality refers to the features of the media item and how useful they are for supporting a given task (e.g., interactive simulations, drill and practice quizzes, site maps, frequently asked questions, search engines). The website considers the functions and features of its interface. These functions and features support the instructional plans and strategies of the website which is mainly teaching English. The presentation of stories in different ways, exercises, quizzes and drills following the stories, the possibility to print out flash cards and exercises based on the stories in the website, and other features all enhance the teaching of English to kids.

IV. Accessibility

Accessibility is an emerging Web interface design topic; if not addressed, it will negatively influence Web site usability for users with certain disabilities; tools that help users access the site in alternative formats (e.g., text, aural, visual) provide for increased functionality. The website uses specific, explicit links which tells their content without the need to click. To support accessibility to those who have computers with low specifications, for example can’t show all kinds of graphics, the website provides a text-only version of the website. However, it is a limited version which for example does not have text only stories. So it is less likely that kids with old computers will be able to get a lot from the website. Here I suggest solving this problem by expanding the text-only version of the website to include text only stories.


Interaction design
Interaction Design (IxD) is the discipline of defining the behavior of products and systems that a user can interact with. In terms of interaction, effective interfaces are visually apparent and forgiving, instilling in their users a sense of control. Users quickly see the breadth of their options, grasp how to achieve their goals, and do their work. Effective interfaces do not concern the user with the inner workings of the system. In this sense we should check our website in different interaction elements. These are Anticipation, Autonomy, explorable interfaces and time of the user.


I. Anticipation
Applications should attempt to anticipate the user’s wants and needs. Do not expect users to search for or gather information or evoke necessary tools. Our website here gives concern to this point. The user can find all the elements of the website in front of him ready to interact with the user.

II. Autonomy

The computer, the interface, and the task environment all "belong" to the user, but user-autonomy doesn’t mean we abandon rules. We should give users some breathing room. Users learn quickly and gain a fast sense of mastery when they are placed "in charge." Paradoxically, however, people do not feel free in the absence of all boundaries. A little child will cry equally when held too tight or left to wander in a large and empty warehouse. Adults, too, feel most comfortable in an environment that is neither confining nor infinite, an environment explorable, but not hazardous. The story section in our website gives kids a sense of control by providing options to them to choose wherever they want to go. Kids can even start with the exercises before reading the stories. This will not result in wrong learning but rather the opposite. This is because students will learn the correct sequence for themselves by themselves which will enhance the self learning skills in the long run. And to ensure that this will happen in the correct way the story section provides just enough guidelines to ensure that the task will be challenging, encouraging but not difficult.

III. Explorable Interfaces
Give users well-marked roads and landmarks, then let them shift into four-wheel drive. An effective website should make easy for the user to wander here and there in the website providing a way out at all times. In our website links and icons are provided in different ways. For accessing short stories subsection for example the kid can press in the heading, a colored short stories in the body text or an image clip icon to the right of the body. To go to one specific story, he has the same three options to choose from. However, he can always go back to the main page of the section or the main page of subsections using the tab-stop navigation up in the page. Moreover while interacting with any story he can go back to the main page of the subsection or any subsection through a simplified list to the right of the story screen. In that same list he can also navigate to topics related to the story he is interacting with.

IV. Time of the user
It is important to show concern about the time of the user. Users can navigate away if they feel that their time is wasted in waiting for the page to load. For high speed internet the website can satisfy they user very easily. Nonetheless, the website gives consideration even to low speed internet users. The website provides games to keep the kid busy while waiting for the story to load. This is especially beneficial with users with low speed internet. At the same time the website provides an animated indication to the progress of downloading. The animation is also enhanced by a calculator of percentage of download. This is crucial to make the user confident that the process has not stopped. It is also crucial because it gives an indication of the potential length of waiting so the user can take his decision to wait or go to another task.


Information design
I. Information vs decoration
It is all right to decorate construction, but never construct decoration." The structure of the website has to be planned carefully before thinking about decorating the page. What will the website contain and in which sequence? How information will be organized in order to achieve the goal of the website. In the story section of learnenglishkids the main topic is stories. It is introduced to the learner with a question: do you love stories? Then the subsections are introduced. The subsections are short stories, long stories, stories for your little brother and sister and fairy tales. Inside each subsection stories are listed in two columns. The first column introduces stories with text and image. The second column on the other hand introduces stories with text only. This helps to keep the page less crowded and to reduce distracters. The story section in our website is constructed well with elements that really interest young learners. The subsections are separated well which helps the user to get his decision fast which story genre s/he chooses. In terms of presenting the different genres the section really balances it. All kind of stories are presented through text, audio images and animation. However, in terms of the number of stories they are not the same. It can be easily noticed that fairy tales are less than the other kinds.

II. Non- needed information
Non-needed information can distract users and make the page crowded. So much detailed instructions are not needed. This also applies to help menus and ideas. By looking at our page we can notice that short sentences with direct instructions are used. Details are not exaggerated even inside the stories. Images and animation are used efficiently to reduce the amount of text needed.

III. Simplicity with clarity

Clarification is the ultimate goal for the information designer. Simplification is a good place to start. Stripping away clutter helps to reveal the essence of information. It may be necessary to refine, and add back some of the information that initially gets stripped out, but everything should ultimately add clarity. Anything that does not add clarity should most often be removed. The story section pages try to apply this by minimizing the amount of information presented in each page. It also cuts the components of the page to small sections making it easy to understand pit by pit. Passive white space is employed to come in between the sections.

Sketching suggestions for better page

• In the text only version, complete stories should be added
• Change colors to degrees of green instead of red
• Reposition to the middle

2nd W: Management of the web

Many internet fans see the final website not knowing about the process of constructing the website. The very first thing in making a website is the management of the website. And for professional (maybe institutional also) websites, a complete team of professionals are involved in making the website.

Web is a project, so principles of project management are essential in the construction of the website. So:

-What are Project Management Principles?
-What are the key elements of any project?
-Cost – including manpower cost, time is cost
-Time – Total of man-hours
-Quality – difficult to define - subjective to certain specification.
-And is the rule of the Project Manager in the above considerations?

Since we are speaking about project management, Models of Project Management can be used to guide us resolve these issues. We will look at the following three models:
Traditional Organizational Hierarchy Model

"Decisions are taken at the "top" and communicated downwards ignoring the fact that expertise in specific areas lies near the "bottom" of the hierarchy.”

Project Co-ordination Model

“Project Manager can easily lose control of the management Process - as all work & and decisions are taken between, parties at the rim, with no more reference to the Project Manager.”

Delicate Tension Model

"Reflects the best of both preceding models. The Project Manager is clearly in possession of the requisite authority - but informal/formal reporting & communication between other parties, without reference to the Project Manager, is recognized."

1st W: How Fast Does a Website Need To Be?

Note: The above title is for an article which I am going to summerise in the following lines.


1. Introduction

In his article How Fast Does a Website Need To Be?,
Scott Barber - an active member of the international Performance Testing community and an experienced practitioner explained that there are no industry standards to answer this question. What we have to do is that we must analyze the site in terms of who the customers are, what their needs are, where they are located, what their equipment and connection speed might be, etc., etc.

2. Considerations Affecting Performance Expectations

2.1. User Psychology which depends on:

1. The response time that users have become accustomed to based on previous experience.
2. Another factor is activity type. All users understand that it takes time to download an MP3 or MPEG video, and therefore have more tolerance if they’re aware that that’s the activity they’re performing.
3. This leads us to the factor of how user expectations have been set. If users know what to expect, as they do with the tax preparation system I use, they’re likely to be more tolerant of response times they might otherwise think of as slow. If you tell users that the system will be fast and then it isn’t, they won’t be happy. If you show users how fast it will be and then follow through with that level of performance, they’ll generally be pretty happy.
4. The last factor we should discuss here is what I call surfing intent. When users want to accomplish a specific task, they have less tolerance for poor performance than when they’re casually looking for information or doing research.

2.2. System Considerations

System considerations include the following:
1. system hardware
2. network and/or Internet bandwidth of the system
3. geographical replication
4. software architecture

2.3. Usage Considerations

Usage considerations are related to but separate from user psychology. The usage considerations I’m referring to have to do with the way the Web site or Web application will be used. For example, is the application a shopping application? An interactive financial planning application? A site containing current news? An internal human resources data entry application? "Fast" means something different for each of these different applications.