Images/Graphics
Web page graphics must serve a function. If a graphic image's only function is "to look cool," you are unnecessarily increasing the download time of your web pages. "Looking cool" can ultimately cost you more money and make you lose potential customers.
The following list is a summary of the types of graphic images that are acceptable on a web page:
-
Navigation buttons - Used to help visitors navigate your web site. If designed well, these buttons can be much easier to read and find than text links.
-
Image maps - Also used to help visitors navigate your web site. If designed well, image maps greatly add to the visual appeal of a web page but can considerably increase the page's download time.
-
Logo - Used for your corporate or business identity. Logos increase brand name recognition and add visual appeal to any document or web page.
-
Bullet points - Used to draw your visitors' eyes to the main points of your document. Also used to break up a web page full of paragraphs.
-
Mastheads - Also known as a title graphic. Main function is to let your visitors know which web page they are on. Adding clip art or an illustration to a masthead adds more visual appeal.
-
Divider lines or horizontal rules - Commonly used to separate footers, categories within a single web page, and FAQ questions and answers.
-
Background images - Used to enhance the visual appeal of a web page and make a web site easier to navigate. One of the most common background images is a sidebar which usually contains the links to the other pages in your site.
-
Headings (text graphic) - Commonly used preserve a typeface that many people do not have on their computers.
- Photos - Commonly used to make your web pages seem more personal and more inviting. Visitors' eyes are naturally drawn to photos of people. An absolute necessity to showcase products on certain e-commerce sites.
All graphic images on your web site should match in color, typeface, and special effects. The general rule is to keep web page size between 40-60K. If you are a graphic designer, photographer, architect, or programmer, a 75K web page will still give a relatively fast download time on a 28.8 Kbps modem.
Animation
Animation on a web page is any form of movement of objects or images. Animations are usually done in Adobe Flash, although Java and GIF animations are also used in many websites. Streaming video in Flash is coming increasingly popular.
Reasons to have motion on a web page are to draw attention to something, to provide a demonstration or to entertain. The need f
or movement on a page depends on the purpose and content of the page. A financial institute would not really need animations on their pages, while an entertainment site obviously would have such movement.
Video
Due to bandwidth constraints, use of video should currently be minimized on the web. Eventually, video will be used more widely, but for the next few years most videos will be short and will use very small viewing areas. Under these constraints, video has to serve as a supplement to text and images more often than it will provide the main content of a website.
Currently, video is good for:
- Promoting television shows, films, or other non-computer media that traditionally have used trailers in their advertising.
- Giving users an impression of a speaker's personality. Unfortunately, most corporate executives project a lot less personality than, say, Captain Janeway from Star Trek, so it is not necessarily a good idea to show a talking head unless the video clip truly adds to the user's experience.
- Showing things that move. For example a clip from a ballet. Product demos of physical products (e.g., a coin counter) are also well suited for video.
Audio...Audio...Audio...
What is audio actually? Audio is a sound within the acoustic range available to humans. Audio can be used through the web. This is because the audio can make the presentation alive. Besides, the audio also can improve the navigation system through voice over or background sound.
The audio can be played through streaming or download. Both of them have different definition. Streaming in this context means we can play the music without waiting the downloading process while download means the music file has to be downloaded before can be played.
Hmm...there a few format of audio file. For example, mp3, real audio or MIDI. As long as i know, mp3 has smaller size but retain the quality of the music while real audio has smaller size than mp3 but unfortunately decrease the quality of the music. Other tan that, MIDI file audio just concern about the music itself rather than the singer like instrumental music. So, the size is quite small and need less time to be downloaded.
Morover, there are a few factors that effect the rate of transferring audio data such as:
1. Internet speed
2. file size and the quality of the audio
3. Compression technique that has been used
4. technology of distributing the audio
For today, we will discuss on the WEBPAGE TOOLS.
Webpage tools consists a few elements such as, chatting, forum, email, downloading and uploading files, search engine and guestbook.
Chatting
Internet chatting is when two or more online individuals come together to chat inside a chatroom, virtual software,a website, or instant messenger. Chats can be ongoing or scheduled for a particular time and duration. Most chats are focused on a particular topic of interest and some involve guest experts or famous people who "talk" to anyone joining the chat.
click for more info
Forum
Forum on webpage is online discussion site. It originated as the modern equivalent of a traditional, bulletin board and a technological evolution of the dialup bulletin board system. From a technological standpoint, forums or boards are web application managing user-generated content. People participating in an Internet forum may cultivate social bonds and interest groups for a topic may form from the discussions.
click for more info
Email stands for electronic mail. Email actually a system for sending and receiving messages electronically over a computer network, as between personal computers.
click for more info
Downloading and Uploading files
Uploading and downloading are two terms used in computing to refer to data transfer. In brief, files are considered uploaded when they are transferred from a computer to a central server. Files are downloaded when they are transferred from a server to a smaller peripheral unit.
click for more info
Search Engine
Search engine is a place, on the Net, where one goes to find sites about specific information. When you have a Web site and you want people to be able to find it you must go to the search engines and submit your site to them so they will list it. Some examples of search engines are Google, Yahoo, Alta Vista, Metasearch and Metacrawler.
click for more info
Guestbook
Guestbook is a FORM filled in by a visitor when accessing a website. Usually, these forms ask for basic information such as your name, email address, and phone number. They are sometimes used for legitimate purposes such as for the notification of Web site updates. Moreover, web designers use the guestbooks often, asking a visitor to a Web site to fill in a guest book results in their leaving the site.
click for more info
Hurm....web design interface must suitable with the users itself. There are many factors that we have to look for before design our interface web design. For example, if our website is focus on preschool students, we have to consider that the children are a heterogeneous group different from the average user type, with different interests, needs and cognitive abilities. So, a few factors that we have to look for before we design the website are:
1. more images than text
2. easy reading
3. navigation elements should be intuitive, simple, and of an optimal size for the motor
capabilities of the child
4. Interface colours - more to cheerful clours
In conclusion, at this early age, children have not reading or writing skills, so the multimedia
content plays a leading role and adapting it to the user’s characteristics is pedagogically beneficial.
INTERFACE FOR ANDRAGOGY LEARNEARS.
In my concern, andragogy is related to education that involved adult learners. There is a principle that describe of the adult learners called Knowle's Principle of andragogy. Actually from this principle, the website developer that focus on the adult learners should know the behavior and apply it on the website itself. For example, the principle stated that:
1. the learners as self directed
2. adults can be a resource for their own learning and learning of others
3. focused on the learners' developmental goals
4. Learning as application to real world
So, the developer should design a website that allow user to explore the web by himself/herself.In that case, the design including the font, colours and etc have to be considered such as :
1. do not use fancy colours for background and font
2. make less use of graphic
3. more navigation button to explore
4. larger the font if possible to make it easy reading
5. More application situation included
INTERFACE FOR COOPERATIVE LEARNING
Cooperative learning can be defined as learning situation in which the students of all levels of performance work together in structured group toward a shared or common goal.
The technologies that are applied in this cooperative learning environment include multimedia technology, web authoring tools, and Internet communication tools such as email, chatrooms, instant messaging (via Yahoo Messenger or MSN Messenger) and discussion boards services.
Multimedia and web authoring tools allowed
students to exercise their creative thinking skills to apply various media elements to their information and content, as well as interactive features to make the application appealing and dynamic.
Internet communication tools allowed for both asynchronous and synchronous two-way communication activities to be conducted between the teacher and students, and among the students themselves. Students can leave email messages for the teacher to answer before their next class, and conduct virtual meetings with their group members at night from their own homes, and during times when members are unable to meet.
So, in conclusion, the webpage tools such as chatting, forum and email are actually needed in a webpage that based on cooperative learning in order to make the user interact to each other to gather information.
click for more info
::LEARNING THEORY???::
What is that really means??
Learning theory is a model of psychology that explains human responses through the concept of learning. Learning theory includes behaviorism, cognitive theory, and constructivism.
Behaviorism
From my reading, behaviorism base on the change of the behavior that can be seen. This theory emphasize on the style of repeated behavior until it can be done automatically. A few experiments have been done to prove this theory. For example, the experiment that has been done by:
1. Pavlov (1849 - 1936)
2. Thorndike (1874-1949)
3. Watson (1878 - 1958)
4. Skinner (1904 - 1990)
Click for more info
Cognitive Theory
Cognitive theory is base on the thinking instead of behavior. The changes of behavior are used as the signal to show the thinking process. Cognitive theory also looks the learning process as "getting or restructured whereas human process and keep the information". Jean Piaget is one of the master of cognitive theory.
Click for more info
Constructivisme
Constructivisme base on the experience, so that anybody can build his or her own knowledge from the prior knowledge. In this way, the learning process is more meaningful and knowledgable.
click for more info
for more info on learning theories, click here..
::INSTRUCTIONAL DESIGN::
Instructional Design is the systematic process of translating general principles of learning and instruction into plans for instructional materials and learning.
To make it clear, there are examples to differentiate the 3 learning theory in instructional design process as below :
- Behaviorist believe that learning result in changing the learning behaviour
- Cognitivists believe that learning occurs when learners add new concepts and ideas to their cognitive structure
- Constructivists believe that the learners construct knowledge for themselves
1. ADDIE MODEL
Analysis
- During analysis, the designer identifies the learning problem, the goals and objectives, the audience’s needs, existing knowledge, and any other relevant characteristics. Analysis also considers the learning environment, any constraints, the delivery options, and the timeline for the project.
Design
- A systematic process of specifying learning objectives. Detailed storyboards and prototypes are often made, and the look and feel, graphic design, user-interface and content is determined here.
Development
- The actual creation (production) of the content and learning materials based on the Design phase.
Implementation
- During implementation, the plan is put into action and a procedure for training the learner and teacher is developed. Materials are delivered or distributed to the student group. After delivery, the effectiveness of the training materials is evaluated.
Evaluation
- This phase consists of (1) formative and (2) summative evaluation. Formative evaluation is present in each stage of the ADDIE process. Summative evaluation consists of tests designed for criterion-related referenced items and providing opportunities for feedback from the users.
2. ASSURE MODEL
3. DICK AND CAREY MODEL
4. WATERFALL MODEL
For the 5th week, Dr Dayang invited Dr Willy (if im not mistaken) to give some talks on philosophy, principle, theories and concept. Actually, those words are familiar with me since i was a student that had to study all those things when im undergraduate.....but as the time goes by...im forgot what are those words really means.
Regarding to Dr. Willy, Philosophy is very broad. .....
Philosophy :
- "more independent learner"
- "love of wisdom"
- general belief and attitudes of an individual or group
- the body of principles underlying a branch of learning
Principle :
- a rule or standard especially good behavior
- discovered rather than inverted
Theories :
- constructed to give an explanation of phenomena
- can predict and explain result
- has 3 functions. They are:
i) permitting organization
ii) leading to explanation
iii) furnishing the basis for prediction
In conclusion, theories tell us:
i) what we are doing
ii) why we do things
iii) know how to do things
iv) It helps us better understand the process
v) will enable us to predict what is going to happen in the future
Concept :
- mental abstraction which allows generalization
- related to hypothesis
For this week, we have learned and discussed deeply on web evaluation. Regarding to my reading on a few models of interaction design, some of them include evaluation steps in their models? IS EVALUATION SO IMPORTANT??well, we will discuss more in here my friends....
According to the lecture by Dr Dayang, web evaluation can be divided into two. There are FORMATIF evaluation and SUMATIF evaluation.
Before going further, why we need those evaluation??Hmm...in my point of view, evaluation is important to make sure that the web has quality content and the web is usable due it become the main resource of learning nowadays.
Okay, now we move on to FORMATIVE evaluation.
Formative evaluation must has been done along the process of web development. This type of evaluation typically examines process rather than product. It is evaluated by the experts or the developer himself of herself. It is done with a small group of people to "test run" various aspects of instructional materials.
For example, you might ask a friend to look over your web pages to see if they are graphically pleasing, if there are errors you've missed, if it has navigational problems. It's like having someone look over your shoulder during the development phase to help you catch things that you miss, but a fresh set of eye might not. At times, you might need to have this help from a target audience. For example, if you're designing learning materials for Form 1 students, you should have Form 1 students as part of your Formative Evaluation.
Hmm...but, how learning assessment can differentiate between these two evaluations?Hmm...For example, you might assess an entire class of students, but you are assess them individually to see how each did.
In the other hand, SUMATIF evaluation involve the evaluation at the end of the process and evaluated by the end users. This evaluation is more focus on the outcome of the web...
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 you know whether the product teaches what it is supposed to teach.
Moreover, in terms of learning assessment in SUMATIF evaluation, it look at more than one learner's performance to see how well a group did on a learning task that utilized specific learning materials and methods. By looking at the group, the instructional designer can evaluate the learning materials and learning process.
For this week, we have learn about Web Interaction and Interface Design...
In my opinion, Interaction Design focus on how users will interact with software or website itself. But, what is the relationship between the interaction design and Interface design?hmm..the interface design is the design of website with the focus on the user's experience and interaction. The goal of user interface design is to make the user's interaction as simple and efficient as possible, in terms of accomplishing user goals. So, what can i conclude here is the relationship between interaction design and interface design is the good interface design will make the users easy to interact with the website that related to interaction design...
Interface web design must consider a few things. They are:
U - Usability
V - Visualization
F - Functionality
Here, i would like to discuss each of those aspects that have to considered in Interface Design...
1. U - Usability
Usability? In this context, usability means the elegance (style, smartness) and clarity (simplicity, clearness) with which the interaction with a web site is designed. Honestly, as a user i really like and comfortable with a website that very simple, well organized and has its own style. The style maybe can be the trademark for each website.
The usability also considered pull-down menu, page turning navigation and index. Make sure all the navigation buttons do not make the users become more confius. (navigation samples).
The other thing that the developer must consider is scaffolding. Scaffolding is just like guider such as map, guide tour, table, search engine, land mark. (more on scaffolding)THE MOST IMPORTANT THING is, the web site must be user friendly. So that the user able to explore and navigate the web site easily.
2. V - Visualization
Visualization in my thought is something that we can see. So, in the web site, visualization is the interface itself with full of graphic, text and other media. Visualization do not bring any meaning if we do not describe what is the visual are all about. Thus, as the developer, he or she must design the meaningful visual for his or her website. So that, the user know what the objective of the website actually. The developer also must consider icon, text, colour, screen design to avoid the website become distracting to the users.
3. F - Functionality
Functionality in this context refers to function of the interface of the web site. The function of the interface should support the developer's instructional plans or strategies.