The most important in web interface design are images, audio and video to get attraction from user. The image that use in website should be relatively small and the typical size for a web photo is 640X480 in pixels and 72 dots per inch. We can use the sound effectively in web page because some people like to hear music when they serve the web page. Before a user can play a downloaded sound file, they must have appropriate software for that file format installed on their computer. The most popular standard sound file format :
1) WAV - develop for use with Microsoft Windows
2) MIDI - used for background music in web because of small files
3) AU- designed for used on Sun UNIX system.
4) AIFF - develop for Apple Macintosh
5) MPEG - modern, professional-quality- can be played on Windows, UNIX and Macintosh systems.
6) RA - supplying "streaming" audio over the web.
The most commonly used video file formats on the web are; (1) Quick Time ( filename.mov) used for Windows and Macintosh, (2) AVI (filename.avi) used for windows, (3) MPEG (filename.mpg) professional quality video for all pc.
-Playing streaming video (.mpeg, .avi) and audio (.mp3)
Playing audio and video with graphic
Playing streaming audio and video - RA , RAM, RM
The codec is the algorithm that handles the compression of video or audio, as well as the decompression when it is played. The user must have an appropriated plug in or helper application before they can view the movie clip :
1) Netscape Navigator 3.0 Gold
2) a plug-in for viewing AVI video
3) "streaming" video format (similar to the Real Audio streaming format)
4) "Server push" can deliver real-time live video and no requirement for special browser plug-ins or viewing application.
Images, Audio and Video for Website
Audio Usage in Web Environment
The purpose of audio usage in Web is to show the idea through informative communication process, background sound and to improve navigation system through sound integration, special effect or user guide.
How the audio technology can be use in web development ?
1. Showing through webcasts (life) - such radio channel, games, entertainment, lecture etc.
2. To add attraction with background music, background sound and special effect.
3. e-Commerce - selling MP3, audio CD etc.
4. Audio on demand - talking, lecture and etc.
There are many of audio can be use through web such audio digital (.WAV, .AIF, .AU), integration audio with program development (flash, authorware) and video integration (quicktime, AVI, MPEG). The audio technology through website's are :
MP3 is a patented digital audio encoding format using a form of lossy data compression. It is a common audio format for consumer audio storage, as well as a de facto standard of digital audio compression for the transfer and playback of music on digital audio players. Audio quality for MP3 depends on how many kilobits the file may use per second of audio. Using a lower bit rate provides a relatively lower audio quality and produces a smaller file size. Likewise, using a higher bit rate outputs a higher quality audio, but also results in a larger file. MP3 file 12X smallest than audio conventional file such wav , aiff etc. The MP3 always use for downloading music or song and almost 4mb for each song with 4-5 minutes long.
Real Media is a multimedia container format and it is typically used in conjunction with Real Video and RealAudio and is used for streaming content over the Internet. The file size is smallest than MP3 file but with low quality. It’s always use for music, speech, seminar etc. One of advantage is it can prevent user to downloading available file
MIDI (Musical Instrument Digital Interface) allows computers, synthesizers, MIDI controllers, sound cards, samplers and drum machines to control one another, and to exchange system data. MIDI does not transmit an audio signal or media but it transmits "event messages" such as the pitch and intensity of musical notes to play, control signals for parameters such as volume, vibrato and panning, cues, and clock signals to set the tempo. As an electronic protocol, it is notable for its widespread adoption throughout the industry. MIDI files are very small. Even complex and pretty long MIDI compositions are rarely over 200 Kbytes in size, and many of them are much smaller. Because of small file size, it can be download very fast and always use for background music for website. MIDI files are special. Indeed, they can be used for creating music, but not in the same way as MP3 files. While MP3 files contain digitalized audio data, which allows to store any sound found in the real world (no matter how complex it is), MIDI employs a completely different solution which MIDI can save data in music note only (without sound).
Several factor that influence data rate transfer through website. The first factor is speed of internet line which high speed of internet line will give good quality for user. Second is the file size and audio quality. If the file size of audio big, the time for downloading also take a long time. A high quality of audio can make the file size also high. Third is compression data technique with format file used and the technology of audio. The conventional technology (downloading) should download completely before it can be play by user. But the new technology (streaming), the user can play the audio before the downloading process complete. Several audio that use streaming is MP3, Active Streaming Format (ASF) and Real Audio. Beside of advantages that user can get from audio technology through website, the user also have several problem in audio usage through web. The standard always change with technology development and every technology need to different server.
Web page criteria design for pre school, adragogy and cooperative learning
Adults have different learning styles than children. Web design for adult should restrict the use of graphic or pictorial materials, printed information not in long page or text, avoid textured background, use larger font size, not use background and prints combination's of red and green and blue and yellow. The web design should provided a link for a complete text on audio clip, provide text, or signing for video clips, provide both visual and auditory warnings. Web design for adult should furnish keyboard commands, increase the size of graphic links, double space between list of vertical links, avoid form with small boxs, and avoid functions that require a response in a specified amount of time. It is because of adult characteristic, and adult physical different that should be consider when designing a web page.
Web page criteria for cooperative learning almost same with andragogy web page because cooperative learning usually used for teaching methods in higher education.
Implementation of Learning Theories into webpages
What is learning theories ?
A learning theory is an attempt to describe how people and animals learn, thereby helping us understand the inherently complex process of learning. Learning theories have two chief values according to Hill (2002). One is in providing us with vocabulary and a conceptual framework for interpreting the examples of learning that we observe. The other is in suggesting where to look for solutions to practical problems. The theories do not give us solutions, but they do direct our attention to those variables that are crucial in finding solutions.
There are three main categories or philosophical frameworks under which learning theories fall: behaviorism, cognitivism, and constructivism.
Behaviorism focuses only on the objectively observable behavior aspects of human learning. In essence, three basic assumptions are held to be true. First, learning is manifested by a change in behavior. Second, the environment shapes behavior. And third, the principles of contiguity (how close in time, two events must be for a bond to be formed ) and reinforcement (any means of increasing the likelihood that an event will be repeated ) are central to explaining the learning process. For behaviorism, learning is the acquisition of new behavior through conditioning.
Cognitive theories look beyond behavior to explain brain-based learning. Cognitivists consider how human memory works to promote learning. The difference of cognitive learning theory compared with behavioral theory is that cognitivists place much more emphasis on factors within the learner and less emphasis on factors within the environment.
Constructivism views learning as a process in which the learner actively constructs or builds new ideas or concepts. Constructivist believe that knowledge is individually and socially constructed by learners based on their interpretations of experiences in the world. Constructivism itself has many variations, such as active learning, discovery learning, and knowledge building. Aspects of constructivism can be found in self-directed learning, transformational learning, experiential learning, situated cognition, and reflective practice.
INSTRUCTIONAL DESIGN
Instructional Design is the practice of maximizing the effectiveness, efficiency and appeal of instruction and other learning experiences. The process consists broadly of determining the current state and needs of the learner, defining the end goal of instruction, and creating some "intervention" to assist in the transition. Ideally the process is informed by pedagogic or teaching device that makes instruction as well as the instructional material more engaging, effective and efficient.
ID models serve as conceptual, management, and communication tools for analyzing, designing, creating and evaluation guided learning, ranging from broad educational environments to narrow training applications. ID models is a discipline of study :
-Instructional Design simply means using a systematic process to understand a human performance problem, figuring out what to do about it and then doing something about it (McArdle, 1991).
-Instructional Design is the science of creating detailed specifications for the development, evaluation and maintenance of situations which facilitate the learning (Richey, 1986).
-Instructional Design is the entire process of analysis of learning needs and goals and the development of a delivery system to meet the needs (Briggs, 1977).
ADDIE model
The ADDIE model is the generic process traditionally used by instructional designers and training developers. The ADDIE instructional design model provides a step-by-step process that helps training specialists plan and create training programs. This acronym stands for the 5 phases contained in the model:
Analyze - analyze learner characteristics, task to be learned, etc.
Design - develop learning objectives, choose an instructional approach
Develop - create instructional or training materials
Implement - deliver or distribute the instructional materials
Evaluate - make sure the materials achieved the desired goals
Most of the current instructional design models are variations of the ADDIE model.
ASSURE Model
The ASSURE model is helpful for designing courses using different kinds of media. This model assumes that instruction will not be delivered using lecture/text book only. It allows for the possibility of incorporating out-of-class resources and technology into the course materials. This model will be especially helpful for instructors designing online courses. This model emphasizes teaching to students with different learning styles and constructivist learning where students are required to interact with their environment and not passively receive information.
A - Analyze Learners - obtain general entry behaviours of the learner like grades, previous knowledge and learning style
S - State Objective - objective need to be clear and measurable
S - Select Method, Media and Materials - select available materials, modify existing materials and suggest new materials
U - Utilize Media and Material - preview the materials, prepare the materials, evironment and provide the learning experience
R - Require Learner Participation - In-class and follow-up activities, so learner can procecss the information
E - Evaluate and revise - before, during and after instruction, assess learning materials and learning outcomes
Web Evaluation
There are a variety of methods of criteria to consider, ranging from personal, informal methods to the more educational, and formal techniques. There is no one perfect method of evaluating information, rather you must make an inference from a collection of clues or indicators, based on the use you plan to make of your source. We need to evaluated the web because the web was becoming one of the main resources of learning.
We can use traditional evaluation criteria for web evaluation purpose :
External/Internal Criteria
External criteria refers to the who and where of information. In other words, who wrote the article and from where did it come ? When we cannot evaluate the information itself, we can evaluate where it's coming from, and hope that those sources are credible. Internal criteria is using our own expertise, or independent knowledge, to determine if the information is accurate.
Credibility Indicator
Authorship is a major factor in considering the accuracy and credibility of information found on internet. Evaluating credentials of an author involves analyzing the educational background, past writings, expertise, and responsibility he/she has for the information. One should check the knowledge base, skills, or standards employed by the author in gathering and communicating the data. We also must know the publisher of the document and how reputable is the publisher. Determining when the source was published is a necessary step in discerning a site's accuracy. We can look to make sure the source is current or out-of-date for specific topic. Topics which continually change or develop rapidly (sciences) require more current information.
Certain types of formats are more accessible on the Web, and are easier to use. When selecting first rate sites, a variety of qualities should be present. The information should be easy to find and use. The design should be appealing to its audience. The text should be easy to read, not muddled with distracting graphics, fonts, and backgrounds. The site should be well organized and easy to get around. The page should load in a reasonable amount of time and consistently be available. In addition, recognizing spelling errors, grammatical errors, and profanity will assist in evaluating Web site design.
Purpose
Credibility issues are not only related to the material itself, but also to the reader's purpose. Therefore, another method of evaluating information is to consider the viewer's purpose for using the site. For instance, a viewer's purpose might be for their personal interest or for professional or educational reasons. Obviously, all information would need to be accurate and verified in several other types of sources.
Classic Methods of evaluation
- use of experts The expert will check the contain of a software, have a look at the quality of finding fast of information, make an assessment and draw a comparison between different version.
- people test Often use in formative evaluation to test software before selling it or post to user. We look and listen to a person using software directly and analyze their behavior and talking. Finally, we find out what the user has learned.
- use the results of others A good starting point for evaluation is to look at the results of others. Make a meta-study, and collect the first impressions of persons, self-reflections, and their report of used.
- have a look of use in real life We look at the economical value, where, when and why the products is used and we ask if the user is happy with the software.
The evaluation tools that have been designed and used for centuries to evaluate traditional printed resources are not sufficient in assessing the credibility of material found on the Web due to the nature of this vast new medium. However, there are a variety of tools that have been designed to assist in the evaluation of Internet information.
Web evaluation process
Web evaluation process are divided to Summative and Formative evaluation :
Summative Evaluation provides information on the product's efficacy ( it's ability to do what it was designed to do). For example, did the learners learn what they were supposed to learn after using the instructional module. In a sense, it lets the learner know "how they did," but more importantly, by looking at how the learner's did, it helps to know whether the product teaches what it is supposed to teach. Summative evaluation is typically quantitative, using numeric scores or letter grades to assess learner achievement.
Formative Evaluation is a bit more complex than summative evaluation. It is done with a small group of people to "test run" various aspects of instructional materials. For example, we might ask a friend to look over the web pages to see if they are graphically pleasing, if there are errors we've missed, if it has navigational problems. It's like having someone look over during the development phase to help us catch things that we miss, but a fresh set of eye might not. At times, we might need to have this help from a target audience.
What is the difference between a Summative Evaluation and Formative Evaluation ?
Formative evaluation is typically conducted during the development or improvement of a program or product (or person, and so on) and it is conducted, often more than once, for in-house staff of the program with the intent to improve. Summative evaluation, on the other hand, is a method of judging the worth of a program or product at the end of the program activities or product and focus on the outcome.
Usability Evaluation Method
Usability is a quality attribute that assesses that how easy user interface are to use. Usability testing is important because usability is a necessary condition for survival. If a website is difficult to use, people leave. If the homepage fails to clearly state what a company offers and what users can do on the site, people will leave. If a website's information is hard to read or doesn't answer users' key question, they leave.
Usability is defined by five quality components:
1. Learnability - How easy is it for users to accomplish basic tasks the first time they encounter the design ?
2. Efficiency - Once users have learned the design, how quickly can they perform task ?
3. Memorability - When Users return to the design after a period of not using it, how easily can they reestablish proficiency ?
4. Errors - How many errors do users make, how severe are these errors, and how easily can they recover from the errors ?
5. Satisfaction - How pleasant is it to use the design ?
There are generally three types of usability evaluation methods : Testing, Inspection an Inquiry.
1) TESTING
In Usability Testing approach, representative users work on typical tasks using the system (or the prototype) and the evaluators use the results to see how the user interface supports the users to do their tasks. Testing methods include the following:
1) Coaching Method
This technique can be used for usability test, where the participants are allowed to ask any system-related questions of an expert coach who will answer to the best of his or her ability. Usually the tester serves as the coach. One variant of the method involves a separate expert user serving as the coach, while the tester observes both the interaction between the participant and the computer, and the interaction between the participant and the coach. The purpose of this technique is to discover the information needs of users in order to provide better training and documentation, as well as possibly redesign the interface to avoid the need for the questions. When an expert user is used as the coach, the expert user's mental model of the system can also be analyzed by the tester.
2) Co-Discovery Learning
During a usability test, two test users attempt to perform tasks together while being observed. They are to help each other in the same manner as they would if they were working together to accomplish a common goal using the product. They are encouraged to explain what they are thinking about while working on the tasks. Compared to thinking-aloud protocol, this technique makes it more natural for the test users to verbalize their thoughts during the test. This technique can be used in the following development stages: design, code, test, and deployment.
3) Performance Measurement
This technique is to used to obtain quantitative data about test participants' performance when they perform the tasks during usability test. This will generally prohibit an interaction between the participant and the tester during the test that will affect the quantitative performance data. It should be conducted in a formal usability laboratory so that the data can be collected accurately and possible unexpected interference is minimized.
4) Question-asking Protocol
During a usability test, besides letting the test users to verbalize their thoughts as in the thinking aloud protocol, the testers prompt them by asking direct questions about the product, in order to understand their mental model of the system and the tasks, and where they have trouble in understanding and using the system.
5) Remote Testing
Remote usability testing is used when tester(s) are separated in space and/or time from the participants. This means that the tester(s) cannot observe the testing process directly and that the participants are usually not in a formal usability laboratory. The tester can observe the test user's screen through computer network, and may be able to hear what the test user says during the test through speaker telephone.
6) Shadowing Method
During a usability test, the tester has an expert user (in the task domain) sit next to him/her and explain the test user's behavior to the tester. This technique is used when it's not appropriate for the test user to think aloud or talk to the tester while working on the tasks.
7) Teaching Method
During a usability test, let the test users interact with the system first, so that they get familiar with it and acquire some expertise in accomplishing tasks using the system. Then introduce a naive user to each test user. The Novice users are briefed by the tester to limit their active participation and not to become an active problem-solver.
2) INSPECTION
1) Cognitive walkthrough
Cognitive walkthrough involves one or a group of evaluators inspecting a user interface by going through a set of tasks and evaluate its understandability and ease of learning. The user interface is often presented in the form of a paper mock-up or a working prototype, but it can also be a fully developed interface. The input to the walkthrough also include the user profile, especially the users' knowledge of the task domain and of the interface, and the task cases. The evaluators may include human factors engineers, software developers, or people from marketing, documentation, etc. This technique is best used in the design stage of development. But it can also be applied during the code, test, and deployment stages.
2) Future Inspection
This inspection technique focuses on the feature set of a product. The inspectors are usually given use cases with the end result to be obtained from the use of the product. Each feature is analyzed for its availability, understandability, and other aspects of usability. For example, a common user scenario for the use of a word processor is to produce a letter. The features that would be used include entering text, formatting text, spell-checking, saving the text to a file, and printing the letter. Each set of features used to produce the required output (a letter) is analyzed for its availability, understandability, and general usefulness.
3) Heuristic Evaluation
A heuristic is a guideline or general principle or rule of thumb that can guide a design decision or be used to critique a decision that has already been made. Heuristic evaluation is a method for structuring the critique of a system using a set of relatively simple and general heuristics.
4) Pluralistic Walkthrough
At the design stage, when paper prototype is available, a group of users, developers, and human factors engineers meet together to step through a set of tasks, discussing and evaluating the usability of a system. Group walkthroughs have the advantage of providing a diverse range of skills and perspectives to bear on usability problems. As with any inspection, the more people looking for problems, the higher the probability of finding problems.
3) INQUIRY
1) Field Observation
Human factors engineers go to representative users’ workplace and observe them work, to understand how the users are using the system to accomplish their tasks and what kind of mental model the users have about the system. This method can be used in the test and deployment stages of the development of the product.
2) Focus Group
This is a data collecting technique where about 6 to 9 users are brought together to discuss issues relating to the system. A human factors engineer plays the role of a moderator, who needs to prepare the list of issues to be discussed beforehand and seek to gather the needed inthe user. formation from the discussion. This can capture spontaneous user reactions and ideas that evolve in the dynamic group process.
3) Interviews
In this technique, human factors engineers formulate questions about the product based on the kind of issues of interest. Then they interview representative users to ask them these questions in order to gather information desired. It is good at obtaining detailed information as well as information that can only be obtained from the interactive process between the interviewer and interviewee.
Web Interaction and Interface Design
Interactive Voice Response (IVR) is an automated telephony system that interacts with callers, gathers information and routes calls to the appropriate recipient. An IVR system (IVRS) accepts a combination of voice telephone input and touch-tone keypad selection and provides appropriate responses in the form of voice, fax, callback, e-mail and perhaps other media. Common IVR applications include:
- Bank and stock account balances and transfers
- Surveys and polls
- Office call routing
- Call center forwarding
- Simple order entry transactions
- Selective information lookup (movie schedules, etc.)
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. 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.
I. Usability
Refers to how intuitively or easily your media item is navigated and processed (flow, sequence, instructions, download time). Note, this construct is the most inclusive of the three and is influenced by both visualization and functionality.
- Planning Presentation (flow, navigation)
Regardless of chosen media, it is generally a good idea to outline your instructional materials prior to production. These outlines may take many forms from storyboards to index cards to flowcharts.
a) Story Board
Storyboards were originally created to plan and script video programs but can also be useful to plan the content of computer screens. Storyboards allow one to design the look of their interface, consider common placement for navigation buttons, and make decisions about the placement of titles, text, and video. Alessi and Trollip (1991) recommend a sequential process of storyboarding: write essential instructional text, questions, and feedback; write scaffolding text, directions, navigational screen cues, and prompts; produce storyboard with text and sketches of graphic elements; check for overlap and design adequate space for any pop-up text or interactive elements that supplement the original presentation; describe time-dependent media that has a distinct start and stop point. Note, storyboard-like drawings can be captured or reproduced on Index Cards which allow designers to flexibly modify and adjust the sequence of their instructional materials. A large flat-top table or bulletin board will facilitate the shuffling and rearrangement of lesson components. The size of your storyboard sketch window should correspond to the technology delivery medium.
b) Flow charts
Flowcharts are useful for depicting the flow of lesson segments, web sites, or multimedia interactions, feedback loops, and extension tasks. Flowcharts contain standard symbols. A circle represents the start and end point in a flow, a square or rectange represents a step in the flow, and a diamond represents a decision point for the learner in the flow (e.g., choose a menu item, take a quiz, input variables into a simulation). Flowcharts are especially useful when developing new materials in a team, as everyone must reach consensus on major presentation and interaction sections in the media item.
- Navigation Samples
Before considering navigation options, it is highly recommended what we should do first on paper. What are the major topic headings? What are the sub-units? How many layers or levels of content are there? With sample chart in hand, we can create the most appropriate navigation technique. Some navigation technique as below :
a) Menu-tree navigation - represents a technique whereby information is structured under major topic headings and sub-headings. Users navigate down a particular path/hierarchy and back out of that path using visible menus. The menu and path remains visible and is evident at any point in the tree structure.
b) Tab-stop navigation - represents a technique whereby information is again structured under major headings and sub-headings, but the user accesses that information using a file-folder tab-stop metaphor. The major tab headings are always visible. Tab-stop navigation is more appropriate if your design includes hierarchical information with multiple sub-levels.
c) Index navigation - represents a technique whereby information is structured within an all-inclusive table of contents. All potential selections are visible. Sites with vast information contents employ this method so users will not be forced to "dig" through multiple levels of menus to find a specific piece of information (search engines provide a related option).
d) Pull-Down Menu - navigation employs javascripting to direct users to different parts of a web site. The old Volkswagen samples at right are particularly confusing. On the main menu screen, the user can choose pull-down selections from four main areas.Once a sub-topic is selected from a pull-down menu, however, the user is not given any indication of the sub-topic they have selected.
e) Page Turning - navigation is useful for creating tutorials or content structured according to units or chapters. It may be difficult to create an entire site with this navigation approach, but sections of a site are often accessed in such a manner. Page-turning navigation is appropriate if your design plan includes sequential, page-after-page information.
f) Iconic navigation - is a technique where the user can select a visual representation of specific items they wish to link to. Sometimes the icon is accompanied with a text label, sometimes it is not. For clarity, both text and iconic representations are recommended. When the main visual is selected, the subsequent, underlying page should also contain the icon to signal the learner as to the selected item.
g) Combining - navigation techniques may be accomplished with many of the above forms (e.g., hybrid form of menu-tree navigation and tab-stop navigation).
To get a "feel" for effective navigation techniques, it is useful to study the strategies employed by others. Some strategies are effective, while others are confusing. After designing the web site, it is a good idea to conduct a field test or "usability test" with sample users. Observing, taping, or interviewing these users can reveal potential problems with your selected navigation strategy.
- Scaffolding
Procedural scaffolds are instructions for using an interface or embedded cues/features that help someone use an interface. They take many forms. Interfaces with planning scaffolds allow students to: set goals and objectives, chart milestones and deadlines for projects, create storyboards, etc. Interfaces with regulating scaffolds allow students to: monitor their progress, receive feedback on their performance (e.g., online quizzing, interactive practice exercises), etc. Interfaces with evaluating scaffolds allow students to: critique one another's work, exchange documents to-from the instructor for revising, etc.
- Heuristic Evaluation
Heuristic evaluation is the most popular method for quick, cheap, and easy evaluation of a user interface design. Heuristic evaluation is done as a systematic inspection of a user interface design for usability. The goal of heuristic evaluation is to find the usability problems in the design so that they can be attended to as part of an iterative design process. Heuristic evaluation involves having a small set of evaluators examine the interface and judge its compliance with recognized usability principles (the "heuristics").
2) Visualization
Visualization is creating visually interesting and aesthetically pleasing media items while avoiding potentially distracting or unnecessary "bells and whistles." Verbal information holds no meaning if you have limited or no understanding of the language. Similarly, the arbitrary graphic symbol will not make sense if you have not been exposed to its meaning. When designing messages, a combination of both visual and verbal information is recommended to enhance clarity.
Tips for Designing Visuals
1. Carefully select your visuals on the basis of age, culture, and education.
2. The icons should clearly and logically represent the content they are linking to.
3. While a combination of visual/verbal information is suggested, do not overwhelm the learner with extraneous verbal information.
4. Use arrows or other visual cues to highlight important components of your visuals.
5. The largest item in a display will attract the most attention (e.g., the giraffe).
6. Understand the directionality of visual elements and their hidden meanings. Vertically-oriented visuals (e.g., city skyline) are best placed at the bottom of a page to draw the eye upward toward the instructional message. Horizontal visuals (e.g., camera) are neutral and stable. Visuals with diagonal lines (e.g., running) will pull the eye toward the direction of the line.
7. Visual animation should be employed sparingly for aesthetics (e.g., rotating "new" at right), but whenever possible to help clarify confusing concepts (e.g., differential acceleration of bike-chain at right).
Tips for Designing Text
1. Avoid the use of all capital letters for body text, because it appear that the text is shouting. It is okay to use CAPS for highlighting or for titles.
2. Text items in bold face or other style will command attention. Contrasted colors may also attract attention.
3. Text size should correspond with the average viewing distance. For every 8 feet in distance from the instructional text, add 1/4 inch to letter height.
4. Employ approrpriate type families on the basis of your message (i.e., serif vs. san serif), and avoid the use of too many font faces on one screen or throughout one site (e.g., arial, helvetica, times, courier).
5. Separate text adequately to enhance readibility.
6. Provide for adequate contrast between figure and ground (i.e., text and background).
Tips for using colors
Avoid the use of too many colors on one screen, especially font colors. Pay attention to the psychology of color (Holzschlag, 1999). Dominant red colors evoke feelings of passion, aggression, or danger. Blue symbolizes cleanliness and order or security and trust. Green is often associated with luck or nature. Brown can be used to represent the earth. White symbolizes purity and sterility, but death in many eastern countries. Black can be used to represent death and fear, or power and elegance. Purple represents royalty or spirituality. Yellow can portray hope and optimism or dishonesty and cowardice. Orange can represent energy and balance.
Screen Design- Balance, Layout
Art and Advertising tend to use dynamic, informal layouts to attract our attention. For instructional messages, a formal balance is recommended to avoid distracting the learner. To achieve formal balance, consider sketching your screens to resemble a large alphabetical letter or character (i.e., A, X, C, B, D, Y, E, O). Image and text objects are then designed to lie along the shape of the selected letter.
Focal Point
If you divide a screen into thirds, the "rule of thirds" states the learner will be attentive to those items placed near the intersecting lines.
Density
The best computer interfaces will not distract the learner with an overwhelming array of images, icons, text objects, or features. "Less is more," so strive for screens of average density.
Consistency
The best computer interfaces will maintain a consistent look. In particular, icons used for navigation should maintain one position to avoid confusing the learner.
Metaphor
In addition to using metaphors as a navigation technique, metaphors are useful to enhance screen design.
3) Functionality
Consider the functions or features of your media item and how useful they are for supporting a given task. When designing an interface or selecting a pre-existing interface, it is important to consider the functions or features of that interface. First and foremost, the functions of an interface should support your instructional plans or strategies.
4) 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 your site in alternative formats (e.g., text, aural, visual) provide for increased functionality.
How fast is fast enough for our web application
Many of web development organizations have been taking asking the question "what is the standard response time for a web page?" But none of standards have been generally accepted because every web users has a different personal feeling. That means, we must analyze who are the customers, what their needs are, where there are located, what their equipment and what their connection speed.
The consideration factors for performance expectations can be divide into three broad categories; user psychology, system consideration and usage consideration.
1. User psychology
User psychology plays an important role in perceived performance, which is the most critical part on evaluating performance. How fast is fast enough from a user psychology perspective, it depends on several key factors that determine what is and isn't acceptable performance. The factors are users previous experience, activity type and surfing intent.
2. System considerations
System considerations included the system hardware, network and / or internet bandwidth of system, geographical replication and software architecture.
3. Usage considerations
The usage considerations referring to how web site or web application will be used. " Fast " means something different for different applications. Interactive sites need to be faster than mostly static sites. These considerations are very specific to the site and organization.
Collecting information about performance requirement in three areas. There are user expectations, resource limitations and stakeholder expectations. There's no way to predict user expectations unless users can tell their expectations to us before the requirements are set. When users are made aware of their connection speed, their expectations about performance shift accordingly. Limitations on resource such as time, money, people, hardware, networks and software affected performance requirements. We can easily obtain about stakeholder expectations, Stakeholder expectations generally want the system so fast and scalable that performance become non issue and for the least possible money.
Once we collected as mush information about users and stakeholders expectations as well as resource limitations, we need to consolidate all of information about user and stakeholder expectations as well as resource limitations, we need to consolidate all of information into meaningful, quantifiable, and testable requirements. There are three categories in determining and documenting performance requirements; speed, scalability and stability requirements.
Composite requirements simply means the application is minimally production-ready from a performance standpoint and composite goals means that application is fully production-ready from a performance standpoint according to today assumptions. There's no industry standard for web application performance and its depends on our own judgment to determine how fast is fast enough for our application.
Three of Web Management Models are Technical Organizational Hierarchy Model, Project Co-ordinator Model and Delicate Tension Model. Necessary skills within a web development team:
A. Strategy
Internet strategy takes into account
B. Project Management
Deliver a project on time and on budget according to an agreed-upon specification and ability to communicate project requirement.
C. Architecture and Design
Interface and information design to ensure the user can navigate internet with the site as desired
D. Content
Developing and creating original content, managing content feeds.
E. Programming
Data design and site architectures, creating web applications and database management.
Roles and Responsibilities of the web project manager:
Responsibilities:
- develop project plan
- direct project resource
- monitor and manage the project schedule, budget and risk
- deal with operational issue
- prepare projects status report
- Ensure projects meets requirement and objective
Roles:
- Must have good people management skills
- Having the discipline and general management skill to make sure that people follow the standard processes and procedures
- Establishing leadership skills to get the team willingly follow the direction
- setting reasonable, chalenggingand clear expectations for people
- Team buildong skills so that the people work together well
- proactive verbal and written communicator skills, including good, active listening skills
Stage of developing a Website ia planning, constructing and testing.
