# Perception or Pixels – Designing a Visual World from the User’s Point of View

Els Rogier, Gerrit van Der Veer, Laura Benvenuti, Teresa Consiglio

► To cite this version:

Els Rogier, Gerrit van Der Veer, Laura Benvenuti, Teresa Consiglio. Perception or Pixels – Designing a Visual World from the User’s Point of View. 8th Workshop on Human-Computer Interaction and Visualization (HCIV), Sep 2011, Lisbon, Portugal. pp.95-123, 10.1007/978-3-642-54894-9_8. hal-01414657

HAL Id: hal-01414657

https://hal.science/hal-01414657

Submitted on 12 Dec 2016

HAL is a multi-disciplinary open access
archive for the deposit and dissemination of sci-
entific research documents, whether they are pub-
lished or not. The documents may come from
teaching and research institutions in France or
abroad, or from public or private research centers.

L'archive ouverte pluridisciplinaire HAL, est
destinée au dépôt et à la diffusion de documents
scientifiques de niveau recherche, publiés ou non,
émanant des établissements d'enseignement et de
recherche français ou étrangers, des laboratoires
publics ou privés.

<figure><img src="image_1.png" /></figure>

Distributed under a Creative Commons Attribution 4.0 International License
# Perception or Pixels -Designing a Visual world from the User's Point of View

Els Rogier, Gerrit C. van der Veer, Laura Benvenuti, Teresa Consiglio,
Open University the Netherlands, Heerlen, the Netherlands

**Abstract.** User centered design would benefit from a dedicated environment, where the designer can focus on the application domain. Our current main domain is design for adult learning. We show how user centered interaction design may require a flexibility that often is not supported in commercially available digital learning environment. Based on design ideas that emerged during observing our students, supporting their needs for learning resources and our actual teaching we developed prototype learning facilities that fit the "human size".

## Introduction: Designers build bridges between worlds

Designers use their professional expertise to apply it on the domain they are designing for. The next section will elaborate on this for our case. Designers need tools and a design environment, in order to implement their design decisions. If these are not available, designers have to invest in additional types of expertise, or they have to cope with a suboptimal context.

Applying design to the domain of adult and distance learning requires a choice for a design paradigm. Designing electronic learning support may be approached from two sides:

1. Choosing or adapting an (existing) learning environment or building one based, on a general view on what is the best way to support learning (as intended by the "client of design", which could be an educational authority, or the intended learners). The actual learning content may subsequently be inserted and its presentation format and the related interaction possibilities will have to fit the functionality provided by the environment.

2. Analyzing the multiple types of learning activities that the intended learners might want to perform. How to enable or support these will depend on each learner's individual background regarding knowledge in the learning domain, preferences for presentation and interaction, and the actual context of learning that includes location (e.g., at home, in a bus), time available (a day, 10 minutes), and available resources (books at hand, a peer in the same room). Based on this analysis design patterns may be found or developed that support the activities. In this case the next step will be to identify or develop an electronic learning environment that facilitates the provision of these patterns.

We decided to choose for adaptation to the individual and momentary needs and the learning context of the learners (symbolized by ‘perception’ in our title, rather than for the application of standard commercially available learning environments and their rigid templates (the ‘pixels’ in our title). That is what the main section of this chapter is about for our case, where visualizing our design ideas is the main
challenge. We will not aim at a complete overview of all possible learning activities and all possible ways of presentation and interaction. We will choose a sample of activities that we often encounter in our teaching practice in the domain of interaction design, and show various ways of supporting them in our practice of blended learning that we discovered useful for our adult students. So far we did not aim at a complete set of guidelines. What we are developing in the first place are design patterns for support of individual learning activities of adult learners in blended learning situations in specific context.

In this chapter we will first discuss the multidisciplinary character of user centered design, followed by a description of our students and the content domain of learning. Next we will discuss the commercially available electronic learning environments that were available in our teaching context.

For our research approach we choose action research. We will argue for this choice and describe the process.

Next we will provide examples of learning activities, and the various ways to support these, that we analyzed, tried, and assessed. Finally we will provide conclusions and point to a research agenda.

## User centered design is a multidisciplinary expertise

User centered design requires theoretical understanding, knowledge of techniques, experience with tools, and general design skills, in the domain of application. If the application is user-system interaction, the domain requires expertise from: Cognitive Psychology, Software Engineering, Industrial/Interaction Design and, depending on the context of use, Cultural Anthropology, Ethnography, or Organizational Design. In an ideal world designing is team work where the team owns all different types of expertise.

Our current case considers the domain of adult learning: we teach our students the various aspects of theory, concepts, tools and techniques of human-centered design, and we ourselves practice the expertise of designing Internet based learning resources. This allows students, independent of location, context, or time, to find and use learning resources. These resources need to optimally fit unpredictable learning situations. Learners might need their learning activities to be supported, context dependent for different types of devices (smart phones, laptops, Wii, wall size screens, e-book-readers [2], [3]) communicating through many different modalities, e.g.:

* The system output to the learner through spoken or readable text (in some cases with voice over), still pictures (2D, 3D), video (sound could be synchronous and authentic to the video, or an expert's comment to the video, or a studio audience's reaction to the video, or a suggested learner's reaction, ...) etc.

* The learner's input to the system through voice, pointing in 2D or 3D, typing and mouse handling, body movements, ...

The current state of technical opportunities that are available for our students mainly consists of some kind of computer (most of the time mobile) with a screen, and internet availability depending on the context. Consequently, we focus on visual design with pointing and gestures and sound as the common available basics.

Learners should be able to interact with these supporting systems in a way that fits the "human size". This includes supporting human ways of reading, scanning,
pointing, and a system's way of reacting to learner behavior that is "naturally" perceivable, noticeable, and acceptable. And these aspects require a system behavior that should fit both: human perception, and culturally determined expectations and meaning (of colors, turn taking, location, reading direction, etc.).

**Our students and their learning topics**

The students that we have been working with are living in many different countries: Germany, Belgium, Romania, China, Spain, the Netherlands, and Italy. They are all University level students, some in the last phase of a Bachelor, many in a Masters study or even in a post Master curriculum [4], [10], [23].

Their background, or the official label of their curriculum varies between Cognitive psychology, Ergonomics, Computer science, Information sciences, User system interaction, Artificial intelligence, or Architecture and design.

Many are at the age of "traditional" university students, some are adults, often in a University that focuses on adult education. In general, the courses we teach are taken by students who are genuinely interested. Consequently, hardly anybody ends with a "fail", though some (max 10%) decide to withdraw. From our experience, all our student groups should be considered "adult" as far as learning intention and behavior is concerned.

The names of our courses vary: Cognitive ergonomics, Human information processing, Visual design [14], [28], Service Design [27], [10], Task analysis and task modeling [11], Design for cultural heritage, etc.

In all cases, we provide an introduction to the domain of the course and discuss just a sample of the relevant concepts, techniques or tools, after which we require our students to each study several or the remaining items in these categories, and teach these to each other. After each student presentation we provide a reflection on the presentation, mainly underscoring the good points, and, whenever needed, providing additional information (e.g., things we missed from the student's presentation). We record all presentations, put our own (portioned in 10-minute mini courses) on a dedicated YouTube channel, and provide the students' ones on website that is open only for the current student group. All our courses include as a main part real hands on experience of the approach, the techniques and tools. In each case we ask them to analyze and design for a real live need of a real (local) client in that we carefully select based on size and content of the project and on possibility of the client to be available for the students during the course.

**Commercially available platforms are conservative**

We teach for students that we cannot supervise "full time", because we are traveling teachers and many of our students are not living close to the location where we happen to deliver our tuition. Our learning situation can be characterized by the concept of "blended learning" where we sometimes have face to face meetings, sometimes teach through the internet, and frequently provide learning opportunities through electronic learning environments.

A blended learning approach combines face to face classroom methods with computer-mediated activities to form an integrated instructional approach. In the past, digital materials have served in a supplementary role, helping to support face to face instruction. For example, a blended approach to a traditional, face to face course
might mean that the class meets once per week instead of the usual three-session format. Learning activities that otherwise would have taken place during classroom time can be moved online. There is no consensus on a single agree-upon definition for blended learning and, in addition, the terms "blended," "hybrid," and "mixed-mode" are used interchangeably in current research literature [25]. Pennsylvania State University defines blended learning as a combination of face to face classroom methods with computer-mediated activities to form an integrated instructional approach [20].

Most of the universities where we provide our courses do in fact have their preferred or prescribed electronic learning environment. We discovered that four rather divers learning environments were regularly used:

*   **Blackboard [5]** – commonly used to provide lecture presentations, exercises for homework, and exams, to upload homework in a dropbox, and to form student discussion groups, and a chat facility can be provided. Streaming video can be added through mashup-modules.

*   **Elluminate Live [16]** – a communication tool that includes integrated voice over IP and teleconferencing, chat, quizzes and polls, and the use of multiple webcams. There are visualization tools and shared whiteboard facilities for uploading documents and controlled sharing of writing rights. The teacher can plan as well as record the meeting.

*   **Adobe Connect [1]** – based on Adobe Flash, this environment supports video meetings where multiple webcam can be used, presentations may be given, and documents can be uploaded and shared with controllable writing rights. Like the previous environment, sessions can be recorded. Different from, Elluminate there is no tool for planning and no requirement to have the teacher fix meeting times in advance, so each participant can enter the environment and work there whenever needed.

*   **Smartschool [24]** – a learning environment that is developed, and extensively used, in Belgium (Flemish) educational institutes. It is mainly focused on administrative management of education and exchange between institutes and teachers, and it contains an electronic learning environment that allows exchange of learning content.

We were supposed to use these and we tried. We found ourselves confronted with rules, requirements, restrictions, and impossibilities that made us stop spoiling our time.

We decided to build our own learning environments, mainly in a Moodle environment, which allows us to provide open access and with a Creative Commons license well as to use (with appropriate attribution) others' resources under that license. Creative Commons (CC) is a nonprofit organization that enables the sharing and use of creativity and knowledge through free legal tools. The CC copyright licenses provide a simple, standardized way to give the public permission to share and use creative work — on conditions of the user's choice. CC licenses allow easy change of copyright terms from the default of “all rights reserved” to “some rights reserved.” Creative Commons licenses are not an alternative to copyright. They work alongside copyright and enable you to modify your copyright terms to best suit your needs [13].
Moodle is a Course Management System (CMS), also known as a Learning Management System (LMS) or a Virtual Learning Environment (VLE). It is a Free web application that educators can use to create effective online learning sites [21].

## Action research

The development of our electronic learning environments is based on growing understanding during practical use. We aim at supporting our students' authentic learning needs.

For our research approach we choose for action research, which, according to the British Open University [9] is characterized as "Any research into practice undertaken by those involved in that practice, with an aim to change and improve it. It is therefore, a process of enquiry by you as a practitioner (an OU tutor in this case) into the effectiveness of your own teaching and your students' learning. Action research is about both 'action' and 'research' and the links between the two. It is quite possible to take action without research or to do research without taking action, but the unique combination of the two is what distinguishes action research from other forms of enquiry."

According to Carr and Kemmis [8] action research is simply a form of self-reflective enquiry undertaken by participants in social situations in order to improve the rationality and justice of their own practices, their understanding of these practices, and the situations in which the practices are carried out. Bogdan and Biklen [7] define action research as the systematic collection of information that is designed to bring about social change.

According to Ferrance [17] there are numerous reasons to choose Action research as the basic paradigm for investigations in practical educational context:

* it allows, and in fact requires a focus on school issue, problem, or area of collective interest;

* it naturally includes a form of teacher professional development;

* it is based on, as well as stimulates, collegial interactions;

* it provides participants the potential to impact school change;

* it is based on reflection on own practice;

* it supports improved communication on the phenomena investigated.

We decided on joining this choice.

## Examples

Adult learners might want to perform a multitude of different types of activities. We will in this chapter only describe a sample that illustrates those that are most common in the learning domain that we consider, e.g.:

* Get a definition;

* Get an explanation;

* Get theoretical background material related to a definition;

* Get a well prepared example;

* Construct their own example;

* Practice a skill;

* Attach a personal note to received or constructed material

* Highlight parts of material
* Attach a note to be shared with other learners;

* Attach a note intended to share with a teacher or expert;

* Discuss a topic with one or more others (synchronously or asynchronously).

With our electronic learning environment we intend to support this type of activities. In many cases the activities are to be expected, though we are regularly prompted by our students. Based on our experience in teaching we design support and we provide this during the next course where we expect it would be appreciated. Our observation of the resulting student behavior, the learning results, and the students' comments (unsolicited as well as triggered) teaches use what to keep and what to adapt. That is how we learn. The current chapter provides an overview of work in progress.

For the above illustrative set of basic learning activities that we need to support we will show examples of how to support these. If relevant we also discuss the context for which alternative representations seem to work best.

## 1. Get a definition

Students will, and do need definitions of concepts. They will ask for this during face to face lectures, and they turn out to look for them in their electronic learning environment. Depending on the context (being in a quiet home or in a noisy bus) they might prefer a different presentation mode. Figure 1 shows a video capture of a lecture. The definition is visible on the screen where a PowerPoint slide is displayed. The professor is standing next to the screen explaining the definition. We found that students preferred this representation in the learning environment in case they had attended the actual class previously: they reported it helped them to remember and supported a more thorough understanding.

<figure><img src="image_2.png" /><figcaption>Figure 1. Definition as given by a teacher using a slide and life discussion</figcaption></figure>
Figure 2 shows and alternative where the definition is presented (silently) in a
scrollable text that is followed by a more elaborated explanation of the definition.
This kind of representation can be easily accessed from either a regular computer or a
(smaller) mobile device. Some students that did not attend an actual class preferred
this in order to study in depth and make notes.

Figure 3 is from an online course on human information processing [19]. The definition of working memory is displayed within a text. Extra information about the definition is available in different ways: in following pages, as well as in pointers to "external" sources that will pop up in a new window. This visual structure will work best on a laptop or PC screen, though it allows for scattered short learning periods like the other alternatives: a student can mark for each page if he considers he studied this page or not. This pattern is preferred by students who take a course and at their own pace without any face to face meetings. They will often return to the text later and go to additional resources

Finally, figure 4 shows a slide that was used during a face-to-face lecture where the teacher explains in greater detail. The slide does not formally state it as a definition but is one nonetheless. This type of slides can also be used as stand-alone learning material or can be accompanied by voice over. Some students use this to refresh their understanding and in that case, the voice over explanation may provide additional support if needed and if the use of sound is feasible in the actual context.

<figure><img src="image_3.png" /><figcaption>Figure 2. Definition followed by explanation, in a scrollable text that fits on PC screens as well as on mobile phones</figcaption></figure>
<figure><img src="image_4.png" /><figcaption>Figure 3. Definition incorporated inside a full course learning environment.</figcaption></figure>

<figure><img src="image_5.png" /><figcaption>Figure 4. Slide with definition, originally used in class, and subsequently provided as standalone definition resource with optional voice over explanation</figcaption></figure>
## 2. Get an explanation

Explanations, in our learning domain, are mostly about a concept (most of our students in fact appreciate to be able to have both, a definition, and an explanation of concepts that are core in the learning domain), a phenomenon, or a tool.

<figure><img src="image_6.png" /><figcaption>Figure 5. Explanation of concepts can be found by hovering a concept and then clicking on it.</figcaption></figure>

Figure 5 is a screenshot from a website on task analysis and design [12]. It shows the screen at the moment that the mouse is moved over the square labelled “Distributed cognition”, at which event a rectangle pops up that explains the goal for which the labelled tool or technique could be used. Different concepts (tools and techniques for task analysis) are presented on the right side and when hovering over them with the mouse a short explanation is shown. This allows quick scanning a structure of unfamiliar terms, as indicated by the labels that group the concepts: Knowledge sources; Analysis orientation; Sketching; Phenomena of use; and Negotiation. As the structure itself is relevant for comparison and choice, a relatively large part of the screen is needed to display this.

If, after orientation based on the short explanation, a learner wants to learn about the details, a click on the rectangle makes the pop-up screen changes to provide a choice of 5 tabs that allow information to be studied in detail: the type of problem that could be solved by applying the tool or technique; how to apply this; examples of the use; an exercise to trying out; and pointers to more information.

Learners will choose which tab(s) to open depending on how they estimate the information to be relevant for their actual aim in studying the material. If they will come back to a concept later they have different possibilities to refresh their
understanding. Re-reading examples might help them most since this refers to application in a realistic case. If this strengthens the applicability for the actual moment, they might subsequently go to the “how” tab that provides them with detailed guidelines.

<figure><img src="image_7.png" /><figcaption>Figure 6. Slide showing Roberta Tassi’s website [22] overlaid with a dynamic visual representation on how to find relevant tools</figcaption></figure>

Tools and techniques, in our domain of interaction design, are never used in isolation. Their applicability in relation to the phase of design, the context, and the type of problem to be solved, need explanation as well. As an example we refer to the open source website created by Tassi [22]. This site is a learning resource for service design, intended to be used stand alone, though we have actually used it extensively in blended learning courses. We discovered it does help learners to explain the system and structure of the tools and techniques in relation to the process and context, as well as to have learners work through an actual design process (designing for a real client). We discovered it makes sense to support the process by providing an explanation of the use of this website, to which end we used a presentation in a face to face session of which figure 6 shows the main slide.

This slide in fact combines two layers of explanation: the original representation is taken from the service design tool collection [22], where the text of the main page itself gives an explanation of what the website is about. In our lectures, as well as in our website for each course on service design, we showed this slide that (in dynamic
red graphics) highlights and a shortly explains, our suggestion for using the resources in that website. A voice over is an option for the individual student who cannot attend class.

From our online course on Human Information Processing, that is supposed to be studied in a free time schedule and without any contact with a teacher or with peer students, figure 7 presents how students get an explanation on why they should bother about perceptions. The explanation is supported by a relevant picture, as it turned out to make the phenomenon much more easy to understand and remember. Learners in general commented that this worked just fine for them. The amount of explanation was considered just enough to understand without any other support or possibilities to discuss with others during the actual reading. Still, for who would ever wants more, we provide a possibility to “find out more” which will bring the learner to additional explanations from sources that differ from the actual lecture.

<figure><img src="image_8.png" /><figcaption>Figure 7. Explanation with words and a picture</figcaption></figure>

### 3. Get theoretical background material related to a definition

Even if a definition seems enough (or is considered so in a certain context by a teacher) individual students might well feel a need to know more. Especially in the case of fully stand alone online courses, learners appreciate the possibilities to find additional material which may well stem from other websites.
Figure 8 is a screenshot from the online course of human information processing, where the definition of a concept (Working memory) is provided. The figure shows the screen after the learner just hit the blue box at the right hand side that says “Find out more”. At this event, in the blue box there appears a section in which the student can find background links from other locations related to the definition presented on the central stage. In this case these are additional definitions and theoretical background on them from different trusted sources, i.e., from the “Memory” site of the Cognitive Psychology department of the University of Amsterdam, and the Computing classes site of Georgia Tech.

Clicking on these URLs will open a new window that displays the relevant material on those sites. Learners will often first look at what material might be available for further reading and only in a second round come back and go to these resources.

<figure><img src="image_9.png" /><figcaption>Figure 8. Find out more through pointers to additional resources that will appear in a new window.</figcaption></figure>

## 4. Get a well prepared example

Definitions, explanations, and additional pointers, often are not enough for some, or even most, of the learners. Examples allow them to reason about the concept, the phenomenon, or the technique, and try out their understanding by interpretation in practice. In a physical classroom or laboratory, examples may well be samples of the actual phenomenon. Students can be walked through a process (a design, an
experiment, the observation of behaviour) and experience the process in real time accompanied by explanations and by questions that trigger understanding. In an electronic environment we may provide a simulation or suggest the experience by a proxy.

<figure><img src="image_10.png" /><figcaption>Figure 9. An example that is experienced as a game, illustrating the issue</figcaption></figure>

Figure 9 is a screenshot from the online course of human information processing. On the right side in the blue box is a section “Try it”. This is a well prepared example illustrating the text on the centre stage. In this example the user can do a test that allows to understand the written material better. The phenomenon to be understood is attention, the test in “Try it” is a case where the actual attention is manipulated by the text “you must count how many times this red ball bounces on the 4 sides of the container”. When the learner hits the button “I’m ready, let’s go” several balls with different colours start to bounce along with the red one. That one is, obviously, rather easy to follow and the bounces may be counted. However, after a few seconds a figure of a brown monkey, with the same size as the balls, appears and starts bouncing as well. After the monkey disappears (after 15 seconds) the test stops in 5 seconds. The number of bounces is asked and then the learner is asked about the monkey. 9 out of 10 students did not see it at all. Now they are suggested to repeat the test, at which occasion everybody notices the monkey, and they all understand the phenomenon of selective attention that has been discussed in the main page.

Another well prepared example from the same online course is illustrated in figure 10. The main text is about the domain of Cognitive Psychology, and the “Try it” examples are developed to show remarkable phenomena that can be described and understood in this domain. The student can do several experiments that allow to understand the reason for going into dept regarding the theoretical part of the domain.
The experiment in this figure illustrates the “Stroop” effect that shows that several dimensions of an incoming stimulus may trigger different and conflicting responses. In the original Stroop test there is a page with individual words that are printed in various colors. The reader has to mention the colors of the words as quickly as possible. The next page contains color names, printed in different colors that are inconsistent with the work. The time needed to name the printing colors suffers considerably, illustrating the effect of conflicting input dimensions on information processing. In our version of the Stroop effect we use only words printed in black, and ask the reader to mention the number of letters. Our second page only contains words that label a number (’one’, ’two’, three, ’six’, etc.), which allows the learner to experience the same phenomenon without violating copyright rules.

<figure><img src="image_11.png" /><figcaption>Figure 10. An example that simulates a laboratory proof of the phenomena</figcaption></figure>

Finally, we present an example of a concept from a visual design pattern collection. Figure 11 shows how a pattern is applied. The example contains pictures, text and links to find out more about the example. The way to browse the pattern examples and to explore the knowledge on them is in fact analogous to the concept explanation pattern that we illustrated in figure 5: hovering over the pattern icon reveals only a visual representation of the pattern, clicking on the icon provides the pop-up as shown in figure 11 where the learner, by choosing one of the tabs, may find the basics of the visual design pattern; an elaborated example from a real website; the forces in the current design space that would support or discourage the use of this pattern; how the pattern may be applied, and a systematic overview of when and why to apply it.
<figure><img src="image_12.png" /><figcaption>Figure 11. A visual design pattern example.</figcaption></figure>

**5. Construct my own example**

For many learners the construction of their own example is the ultimate proof of
understanding. In this case, some feedback is almost always needed. In courses with
face-to-face possibilities, this can be scheduled or provided on request.

<figure><img src="image_13.png" /><figcaption>Figure 12. Two pictures from a student's presentation to show changes in design</figcaption></figure>

Figure 12 shows two pictures that a student made during a course in Italy. The student presented his work to the teacher and other students in a slide presentation. A picture of the prototype that the student designed was drawn in a natural context to explain the new prototype and the changes from the previous design. The first of the student's pictures illustrates how users of a current type of remote control might have problems reading the labels of the multiple buttons and needed time to discover what button to press. The second picture shows a new prototype remote control with only a
few (considerably larger and shaped) buttons that would allow quick scanning and quick user action.

Obviously, learners may develop this type of examples wherever they are and any time that fits them. However, we found in practice that they mostly want to have feedback from someone who would understand, like a peer learner or a teacher. Consequently, we try to support this need even for blended learning situations. Figure 13 is from the learning environment of a course on service design. We actually trigger students to develop their own examples and provided facilities to upload these. A list of presentations with examples students made themselves are displayed at the relevant place in the course website. Participants in the course can review how other students in their class made their presentation and view the examples they constructed.

In a recent case where we taught this course, the (Chinese) students triggered a new development for their learning environment, requesting the possibility to upload their intended presentations well before the face-to-face meeting in order to collect feedback from their peers prior to “submitting” it to the teacher’s comments.

<figure><img src="image_14.png" /><figcaption>Figure 13. Students developed presentations to share with each other, sometimes prior to officially presenting it to the teacher</figcaption></figure>

## 6. Practice a skill

Students need, and want, to demonstrate their knowledge. Even though this is not a main goal in any of the courses we teach, nor a main goal of any of the learners that visit our electronic learning environments. A fact, however, is that students differ regarding their competence and we discover they are happy to try themselves and to learn from each other. A teacher may be of help in this case.

In order to aim at systematically improving presentations (whenever needed, depending on the culture and level of the students) we have developed a process of
selecting those student presentations that we consider exemplary for the quality, structure, content, or even performance. We publish a short list of “remarkable” presentations and we suggest students to especially consider the video recordings of these and we give each student team in the course the assignment to write a brief report on those selected recordings stating why each of these is excellent.

In the slides in Figure 14 the exercise is explained. Students are encouraged to learn from each other and therefore are asked to look at good examples of fellow students. On purpose we ask them to view the presentation videos on a small screen, in order to avoid the viewers to focus on content details. We generally experience a striking improvement on the aspects that we aim at and mention in the exercise.

<figure><img src="image_15.png" /><figcaption>Figure 14. Suggested peer presentations to improve presentation skills</figcaption></figure>

Occasionally students are unable to attend. A student that was unable to physically attend the class on the day of the presentation asked, and received permission, to do his presentation at home in front of a video camera. His presentation was highly rated by his peers as well as by the teacher.

But face-to-face meetings are also taken as an opportunity to practice relevant skills. Figure 15 shows a picture from a Chinese student who really wanted to learn how to present the work he prepared. He developed his own ideas to do so, combining a prepared slide show on the screen with notes and schedules drawn on a flipchart during his presentation. He wanted the presentation to be videotaped so that people could give feedback and allow him to learn from it.
<figure><img src="image_16.png" /><figcaption>Figure 15. Voluntary trial presentation intended to collect feedback</figcaption></figure>

7. **Attach a personal note to received or constructed material**
In our blended learning courses students are frequently asked to upload material.

<figure><img src="image_17.png" /><figcaption>Figure 16. Personal notes may well be part of a learning environment</figcaption></figure>
Students sometimes spontaneously add a personal note uploading their homework. Other students or the teacher who receives this could be triggered to respond to in the same way. Figure 16 shows an example, where both the student and the teacher (that is the one who is answering in this example) need to be aware whether the conversation is private between the two of them, or between a well specified design team, or open for reading as well as reacting by the whole course group. Our learning environments now allow each of these, and we find in most cases the students choose the "open for the whole class" mode.

## 8. Highlight parts of the material

When learning material has to be structured and the structure is complex, it may often only fit on large screens (laptops, PCs). In that case learners tend to read in their "normal" reading habit – e.g., from left to right and from top to bottom in European and Chinese current cultures. Any complex (e.g. 2D) representations might make the student miss some relevant features.

Figure 17 is an example of a visual pattern wizard [15] for website design. Through different questions the learner may explore what visual patterns could be suitable for the website they are designing. At the left hand students may, first of all, choose for one of four different design space categories, each with multiple variables:

* Page descriptions, which allow, but not enforce, choices between

* Purpose of the site: information or entertainment?

* Size of text to read (long or short)?

* Number of pages of the site (more than 30 pages or not)?

* Number of pages with actual content (15 or less)?

* Interaction tasks other than navigation (e.g., form filling, file upload)?

* Tasks that need a sequence of subtasks?

* Categorisation of the site structure

* Meaningful sections?

* Hierarchy of depth more than 2?

* Icons to support categorization?

* Content continuous with categorization?

* User characteristics

* Mainly experienced internet users?

* More than ten events a year interesting for users?

* Desktop only or mobile use as well?

* Are there user polls or review questions to be answered by users?

* Page elements

* Icons used for menus in the pages?

* (Large) tables?

* Photo journals?

Each time a learner answers a question in the left side box, or deletes an answer (which makes the question unanswered) (Figure 17 top), an arrow towards the right side box dynamically starts to appear and move, and some patterns lighten up (Figure 17 middle part). After that a back arrow (Figure 17 bottom) indicates that the changing configuration of feasible patterns is in fact related to the answers of the questions that the user just gave, and which may be revised.
<figure><img src="image_18.png" /><figcaption>Figure 17. Successive views of a dynamic support to attention to new information on the right hand side that is the result of checking options at the left.</figcaption></figure>
The moving arrows in the previous example turned out to help notice that something new has appeared on the right side as a result of what is going on by the learner's tentative choices at the left.

In the courses that we build ourselves, we may apply any highlighting technique that fits the purpose. However, we will often use relevant and open source available learning recourses if they fit our students' needs. During a course where cultural diversity [26] was an issue, we wanted to explain how to use the website from Hofstede [18] and what kind of information you could find on it. Therefore, in preparing a lecture, the teachers connected live to the website and used these for a demonstration while his screen and his comments were recorded. The mouse pointer is highlighted to allow the viewer to see what elements the teacher is attending to and pointing at. This dynamic representation (figure 18) supported learners to follow the teacher's attention and to understand the actual use as demonstrated. Viewing a recorded video capture of the session turned out to be appreciated as well as providing the intended learning.

<figure><img src="image_19.png" /><figcaption>Figure 18. Dynamic highlighting of the teacher's pointer, combined with a voice over explanation</figcaption></figure>
In a course on design for cultural heritage, pictures are shown of personal item that are considered family heritage. The type of pictures, in this case, do not match well with dynamic visualisation of attention support, and require careful study without disturbance of esthetic aspects. In a discussion on such an item one or more specific parts may need to be considered, like the year 1883, or the name indication MAK (in this case the name of the young women who embroidered this in the indicated year) in the example of figure 19. Trying out in practice showed us that the temporary indication of which part we are referring to by using a not confusing shape and color (in this case a red circle) helps to clearly focus attention. When that is reached the attention support can be removed and the meaning of the detail may be discussed, experienced, and appreciated. In this case, dynamics turn out not to be needed (and even to be considered irritating) to draw attention.

<figure><img src="image_20.png" /><figcaption>Figure 19. Simple static way to draw attention to a detail that could easily be missed. After attention has been established, the pointer should be removed to allow acceptable experiencing of the esthetics.</figcaption></figure>

In our courses there are often various different elements and phenomena that occasionally require attention to be drawn. The previous examples show, respectively, how to support attention to the effect of student actions (as discussed with Figure 17) and how to focus attention of students to join the teacher's focus. However, there are many situations in electronic learning environments where there are opportunities that learners might miss. Screens often cannot be just plain and simple, and multiple options for interaction need to be provided at the same time. In that case reactions to
mouse over may help the learner find out (or remember) there are interaction possibilities available. Figure 20 shows 2 phases from interaction with the design pattern wizard [15] where attention to relevant parts is triggered by dynamic highlighting on mouse over, through a red exclamation mark and a thought cloud.

<figure><img src="image_21.png" /><figcaption>Figure 20 dynamic highlighting to draw attention to possibilities</figcaption></figure>

## 9. Attach a note to be shared with other learners

Sharing ideas with peers is common practice in face-to-face learning situations. In the Moodle learning environment that we often use as a platform for our design there
is an option for a learner to share work, ideas and materials with others. The result is posted in a discussion topic. Other students and teachers can read and reply on the message. Obviously, this facility needs to be known and triggered, like Figure 21 illustrates, where our learning environment administrator fount out there was a need to alert students. She posted a message that started the actual use that was apparently not obvious for a new class of students.

<figure><img src="image_22.png" /><figcaption>Figure 21. A triggering message to show students how to upload and share notes</figcaption></figure>

Once students are aware of this functionality they turn out to use it and they want others to receive the message, to react and to collaborate. In fact students in a group will use the board for purely social purposes as well. Figure 22 is a snapshot from the creation of a topic "Pictures" on a discussion board used during a course we gave in China. A student wanted to share pictures taken during the last class with the rest of her classmates. She adds a note telling people what to do in case they cannot open the file. As you may read, the teacher was triggered to react as well, with a personal not to thank for the nice initiative.
<figure><img src="image_23.png" /><figcaption>Figure 22. A personal note and some help in case the zip file cannot be opened</figcaption></figure>

## 10. Attach a note intended to share with well defined others

In some cases our students wanted to be very precise on whom to share their notes with. Sometimes our courses draw over 100 students and in such a case the teacher is supported by tutors, about 1 per 30 students. Tutors support the students in providing facilities, additional learning resources, and when there are communications problems with uploading homework or preparing presentations because English is not the first language of the students, tutors are available even when the teacher is only present at scheduled times (e.g., 2 day during each fortnight. In teaching such relatively large groups, we found out there may well be a wish for several levels of intimacy. Students feel the need to share some communications only with the teacher or tutor; or only between their design team, or between the team and the tutor, or with the whole class.

Figure 23 shows a design sketch, not yet implemented, of a web environment for this type of context [6]. The “sticky notes” suggest informal messages the student can choose to keep private or to share. With the create group button, a person or new group of people can be added. In the current example, each student can choose to keep the notes private or make them general or share them with “UtrechtSC”, his group of computer science students at the University of Utrecht. Also, the sketch indicates that each note can have a PDF attached, allowing the sharing of documents that have a more formal state compared to a sticky note.

## 11. Discuss a topic with one or more others

Students often ask for possibilities to discuss issues with their peers beyond the possibilities in the face-to-face meetings. If privacy is not considered an issue (which we found out is clearly culture dependent), Moodle allows acceptable functionality. Figure 24 shows how we are able to provide this in our Moodle based electronic learning environments. On the right side of the screen several discussion topics are listed. Students and teachers can react on these topics or start a new discussion topic.
<figure><img src="image_24.png" /><figcaption>Figure 23. Prototype (not implemented yet) of note sharing facilities with a specified audience</figcaption></figure>

<figure><img src="image_25.png" /><figcaption>Figure 24. A series of discussion topics created by students right after a series of presentations</figcaption></figure>
## Design requires a supporting environment

After design follows implementation, for which different types of expertise are needed to implement an actual product or service. A design team should be aware of the characteristics, possibilities and restrictions that the design environment is providing. The current commercially available products that we were supposed to use (e.g., Blackboard, Illume, Smartschool, and Adobe Connect) present us with problems. The guiding principles and concepts for visual design in these electronic learning environments are a mismatch to our learner centered didactic approach and to or students' learning objectives. In contrast, open source environments like Moodle offer more flexibility and allow us to develop our own extensions, to profit from the creations of our colleagues and to combine successful ideas. In practice, many educational institutes have yet to learn to trust and rely on open source solutions where an active community is replacing the commercial business model for managing risks.

This means we are confronted with limitations in the visual facilities of digital learning environment that hinder the support of learners in a way that fits the “human size” of this type of user. In many cases the system imposes, by design, restrictions to who is the boss of a screen’s real estate: where can we put a question, a video, a button to press, or how can we specify our own animation. On the other hand, most designers of learning support are not eager to focus on pixels and to reinvent a wheel for which they do not have the expertise.

Commercially provided learning environments should be re-developed to allow designers to do their job in a proper way, possibly by freely applying Open Source based solutions. On the other hand, Open Source environments should (be developed to) acquire a state of acceptability for educational institutes that allow both designers and learners access to state of the art solutions.

## Conclusions

Our experiences and the ideas we developed are based on supporting blended learning, for adult students in many countries, in the domain of interaction design. Our students are highly motivated and well aware of the restricted opportunities and time available for them.

We base our teaching, as well as the design of our learning environments, on what we learned during teaching. Our adult learners turn out to set their own learning goals. In addition, they are learning in a large and unpredictable variety of contexts and time slots. They will try to learn wherever they can access learning resources, and they choose to aim at learning goals that fit the availability of time.

Our design knowledge is developing during practice; hence we choose action research as our paradigm. Experiments for our type of learners and our type of learning domain are not possible and would not make too much sense.

In order to optimally support learning, we started by identifying learning activities, trying out how to support them, assessing the result in practice as far as practice allows assessment. In many cases the assessment is subjective: students let us know, or do not complain, and if we were lucky half of them answered short questionnaires.

We are in a situation where we are allowed to teach our courses in different settings and different educational cultures in many countries as far apart as Europe and China. This helps us to find out what our growing understanding is worth. Still
we are currently in the process of identifying design patterns to support a growing set of learning activities, taking the context (location, available time, opportunities to contact peers and teacher, available hardware and platform) as well as the individual learner's state (educational background, domain knowledge, actual need) into account.

We are working on it. The current chapter provides the examples that help us to consider further research, where we are aware of the need to combine our action research with the experiences of our colleagues, who, hopefully, be as open as we try to be in sharing.

## References

1. Adobe Connect (2013) http://www.adone.com/products/adobeconnect.html, retrieved August 21, 2013

2. Benvenuti L., Hennipman E.J., Oppelaar E.J., Cruijsberg B., van der Veer G.C., Bakker G. (2010) Experiencing and Learning with 3D Virtual Worlds. In: Spector, J.M.; Ifenthaler, D.; Isaias, P.; Kinshuk; Sampson, D. (Eds.) Learning and Instruction in the Digital Age. Springer.

3. Benvenuti L., Van der Veer G.C. (2011) Practice what you preach: experiences with teaching 3D concepts in a virtual world. In: Shalin Hai-Jew (ed.) Virtual Immersive and 3D Learning Spaces: Emerging Technologies and Trends. IGI-global, 45-53

4. Benvenuti L., Rogier, E., and van der Veer G.C. (2012) E-learning in a distance learning curriculum: a workplace approach. Proceedings of the European Conference on Cognitive Ergonomics 2012 (ECCE 2012), ACM Digital Library

5. Blackboard (2013) http://www.blackboard.com, retrieved August 21, 2013

6. Blanco M.M., Van der Veer G.C., Benvenuti L. and Kirschner P.A. (2012) Design Guidelines for Self-Assessment Support for Adult Academic Distance Learning. In: Shalin Hai-Jew (Ed) Constructing Self-Discovery Learning Spaces Online: Scaffolding and Decision Making Technologies. IGI Global, 2012. 169-198.

7. Bogdan R. and Biklen, S. K. (1992) Qualitative Research For Education, Boston: Allyn and Bacon, p 223

8. Carr W. and Kemmis S. (1986) Becoming Critical. Education, knowledge and action research, Lewes: Falmer. p 162

9. Coats M. (2005) Action research, a guide for associate lecturers. Centre for Outcomes-Based Education, Open University, Milton Keynes, UK.,

10. Consiglio T. and van der Veer G.C. (2011) Designing an interactive learning environment for a worldwide distance adult learning community. In: Anke Dittmar & Peter Forbrig (Eds) Designing Collaborative Activities - Proceedings of ECCE 2011. ACM Digital Library, 225-228

11. Consiglio T., van der Veer G.C., and de Moel N. (2012) Learning resources for task analysis. Proceedings of the BCS HCI 2012 Workshops HCI Educators: 1-4, Electronic Workshops in Computing, ewic.bcs.org

12. Consiglio T. and Van der Veer G.C. (2013) Task analysis and design, www.nibuk.nl/taskanalysis/wizard, retrieved August 21, 2013
13. Creative Commons, 2013. http://creativecommons.org/about, retrieved August 21, 2013

14. De Moel N. and van der Veer G.C. (2011) Design pattern based decision support. In: Anke Dittmar & Peter Forbrig (Eds) Designing Collaborative Activities - Proceedings of ECCE 2011. ACM Digital Library, 93-96

15. De Moel, N. (2013) Visual design patterns, patternwizard.nl/pattern/wizard, retrieved August 21, 2013

16. Eilluminate (2013) http://www.illuminate.com/Services/Training, retrieved August 21, 2013

17. Ferrance E. (2000) Action research. Themes in education, LAB, Brown University, Providence, RI.

18. Hofstede G. (2013) National culture dimensions, geert-hofstede.com/dimensions.html, retrieved August 21, 2013

19. Oppelaar E.J. and Van der Veer G. (2013) Human information processing: http://www.opener2.ou.nl/opener/hip, retrieved August 21, 2013

20. PennState (2013) http://weblearning.psu.edu/blended-learning-initiative/what_is.blended-learning, retrieved August 21, 2013

21. Rice W. (2011) Moodle 2.0 E-Learning Course Development. Packt Publishing Limited, Birmingham, UK

22. Tassi R. (2009) Service design tools, www.servicedesigntools.org/, nc-by-nd cc licence

23. Rogier E. and van der Veer G.C. (2011) designing education for people's understanding and experience. In: Anke Dittmar & Peter Forbrig (Eds) Designing Collaborative Activities - Proceedings of ECCE 2011. ACM Digital Library, 229-232

24. Smartschool (2013) http://www.Smartschool.be, retrieved August 21, 2013

25. Torrisi-Steele G. (2011) This thing called blended learning – a definition and planning approach. Research and Development in Higher Education, 34, p 360-371

26. Van der Veer G.C. (2011) Culture Centered Design. In Patrizia Marti, Alessandro Soro, Luciano Gamberini and Sebastiano Bagnara (Eds) Facing Complexity - Proceedings CHItaly 2011. ACM Digital Library. 7-8

27. Van der Veer G.C., Consiglio T. and Benvenuti L. (2011) Service Design - a structure for learning before teaching. In Patrizia Marti, Alessandro Soro, Luciano Gamberini and Sebastiano Bagnara (Eds) Facing Complexity - Adjunct Proceedings CHItaly 2011. ACM Digital Library. 144-147

28. Van der Veer G.C. and Verbruggen C. (2011) Teaching visual design as a holistic enterprise. In: A. Ebert, A., N.D. Gershon, and M. Pohl (Eds) Human Aspects of Visualization. LNCS 6431, 163-172