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 1II. 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.
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.
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.
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.
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
0 comments:
Post a Comment