Interface Development for Learning Environments: Establishing Connections Between Users and Learning

95 Pages·2019·2.472 MB·English

by  Joseph Frantiska Jr.

SPRINGER BRIEFS IN EDUCATIONAL
COMMUNICATIONS AND TECHNOLOGY
Joseph Frantiska Jr.
Interface
Development
for Learning
Environments
Establishing
Connections Between
Users and Learning
SpringerBriefs in Educational Communications
and Technology
Series Editors
J. Michael Spector, University of North Texas, Denton, TX, USA
M.J. Bishop, University System of Maryland, Adelphi, MD, USA
Dirk Ifenthaler, University of Mannheim, Mannheim, Germany
More information about this series at http://www.springer.com/series/11821
Joseph Frantiska Jr.
Interface Development
for Learning Environments
Establishing Connections Between Users
and Learning
Joseph Frantiska Jr.
School of Education
Walden University
North Chelmsford, MA, USA
ISSN 2196-498X ISSN 2196-4998 (electronic)
SpringerBriefs in Educational Communications and Technology
ISBN 978-3-030-14481-4 ISBN 978-3-030-14482-1 (eBook)
https://doi.org/10.1007/978-3-030-14482-1
Library of Congress Control Number: 2019935817
© Association for Educational Communications and Technology 2019
This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of
the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation,
broadcasting, reproduction on microfilms or in any other physical way, and transmission or information
storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology
now known or hereafter developed.
The use of general descriptive names, registered names, trademarks, service marks, etc. in this publication
does not imply, even in the absence of a specific statement, that such names are exempt from the relevant
protective laws and regulations and therefore free for general use.
The publisher, the authors, and the editors are safe to assume that the advice and information in this book
are believed to be true and accurate at the date of publication. Neither the publisher nor the authors or the
editors give a warranty, express or implied, with respect to the material contained herein or for any errors
or omissions that may have been made. The publisher remains neutral with regard to jurisdictional claims
in published maps and institutional affiliations.
This Springer imprint is published by the registered company Springer Nature Switzerland AG
The registered company address is: Gewerbestrasse 11, 6330 Cham, Switzerland
This brief is dedicated to my mother
Madeline and to my late father Joseph Sr.
Preface
As technology has become more sophisticated, engineers have used various means
to allow them to interact with systems that they have developed or use in order to
develop other systems. As educational technology had matured, educators have also
needed to wrestle with these same interfacing problems. In doing so, their students
or other practitioners can interact with complex learning environments in an optimal
fashion.
In Chap. 1, the background and tools of interface design are discussed along with
an illustrative example used throughout the brief to provide a structured approach
that is applicable to a wide variety of situations. Chapter 2 examines the theoretical
background upon which the techniques and procedures are based on. Chapter 3
focuses on the techniques and procedures that form the basis for the development of
interfaces. Storyboarding and prototyping are as applicable to the field of educa-
tional technology development as they are to the high-tech arena. Chapter 4 builds
upon the preceding chapters by adding various design approaches that form the
skeleton of an environment. The meat on the bones of this skeleton is the graphical
component that is discussed in the remainder of Chap. 4. The subject of Chap. 5
further adds to the interface as static graphics provide limited interaction. It is here
that animation, video, and sound are introduced to provide a much richer and more
productive environment. Finally, while all of these components play an important
role in modern learning environments and how they interact with systems and peo-
ple, the written word is still of great importance. Chapter 6 discusses how text can
quickly but succinctly put forth ideas and instruction.
It is the goal of this brief to aid the educator in developing interfaces between
people and online learning environments. In this way, they can create learning envi-
ronments that will interact with their students. The students can efficiently interact
with the learning environment, which will then allow them to maximize their inter-
action with the world in general.
vii
viii Preface
Background and Significance
The Merriam-Webster dictionary defines an interface as “the place at which inde-
pendent and often unrelated systems meet and act on or communicate with each
other.” In the case of humans interfacing with computer systems, interfaces have
become more and more complex. This can be both good and bad with the good
being derived from the vast information that can be represented to the user. The bad
aspect is that the instructional designer must be cognizant of both the information
available and how to present it to the user. This two-pronged approach ensures that
both ends of the human-computer interface are considered. The interface acts as a
bridge between the human and machine and needs to act as a translator between the
two. The signals generated by the machine are radically different from the images
and text that the human understands. Not only is the interface required to select the
necessary information but to display it in formats that are optimally useful and
intelligible.
The designer needs to assess the information available and not only how to
present it to the user insofar as the efficient usage of screen area but also with
respect to the user’s inherent learning style and abilities. In order to do this, a struc-
tured approach that properly addresses both aspects is needed. This brief aims to
fill this need.
North Chelmsford, MA, USA Joseph Frantiska Jr.
Contents
1 Interface Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
An Illustrative Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
User Interface Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Hypertext . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Assessment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Understand the Audience . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Define the Inputs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Define What Processing Occurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Define the Outputs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Example Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Inputs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Processing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Outputs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
References . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2 Theory and Practice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Cognitive Underpinnings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Dual Coding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Dissonance Theory . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Learning Taxonomies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Cognitive Learning Taxonomy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Affective Learning Taxonomy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Psychomotor Learning Taxonomy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Combining Taxonomies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Example Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
References . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
3 D evelopment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Elaboration Theory . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Learning Hierarchies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Prototyping . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
ix
x Contents
Storyboarding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Example Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
References . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
4 Structures and Graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Random Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Structured Designs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Linear Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Hierarchical Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Hierarchical with Association Design . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Selecting an Appropriate Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Multimedia: Its Implementation and Usage . . . . . . . . . . . . . . . . . . . . . . . . 43
Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Image File Compression . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Raster Formats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Interlacing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
GIF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
JPEG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
TIFF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
RAW . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
PNG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
BMP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
PPM, PGM, PBM, and PNM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Vector Formats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
CGM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Example Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
References . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
5 M otion and Sound . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Video/Animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Sound Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Uncompressed Format . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Compressed Formats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Example Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
References . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
6 W ords . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Message Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Combining Sources of Information . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Modality Principle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Redundancy Principle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Other Principles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78