Process Assignment 2
Stage 1: Design
1.1 Concept preparation
In order to create the map design, we decided to gather the following materials as preparation:
- a geographic map of Delft central district and the route line;
- the locations of the museums and shops;
- icons to indicate the shops and museums;
- a list of variables to influence direction or focus
We divided these tasks over our four group members, and fulfilled our tasks.
Geographic map and route line
The geographic map and route line were easily done in google maps, by inserting the street locations of the assignment one by one. [blog link]
Using this graphical representation, the basic map and route line were established in Illustrator.
Shop and museum locations
Finding the shops and museums were done by visiting an information point in the central of Delft. By taking along all information sheets that contained museums or shops, a collection of locations were found. [blog link]
Icon design (1)
For the indication of the locations, a few icons were designed and tested until we considered them clear enough. Our criteria were:
- clear symbolic meaning
- recognizable when minimized
After the first icon re-design, we considered our designed icons sufficiently clear. [blog link]
List of variables
In order to make the implementation of the graphic variables easier, a list of variables were extracted from the book. Any variables that could manipulate either focus on one point on the map, or suggest a direction (by means other than arrows) were listed. [blog link]
After we had our resources for the preparation, we started on the concept generation phase.
1.2 Concept generation
Now we were ready to create concepts. As our focus was to apply the graphic variables and not as much creating an optimally graphically appealing map, we all used the same basic design for our concept variances.
After each group member had created his respective concepts, we chose what we saw as the most effective map, and started trying out additional variables to maximize its effect. The final assessment was only one criterion: influencing the choice of direction the most effectively. We assessed this on personal perception.
1.3 Concept choice
Through constant discussion and trying out, we came to an agreement on our map design. The map had a dashed route line to influence direction and the blocks adjacent to the museum/shopping locations lit up with orange or grey to influence focus. It made use of the following variables:
On the line:
- dashes (suggesting movement: ch 7 narrative)
On the rest of the map:
- separate areas represent regions connected to icons (large brain pixels: ch 2 easy detection)
- Background map mostly highly unsaturated, (good for bg: ch 4 color)
- Icons have a strong contrast (dark grey/black - white)
This is the map we chose for the first concept presentation on May 26.
1.4 Presentation feedback
After doing the presentation, teacher Visser remarked that our map violated the basic limitations for the assignment. The feedback we received was:
- Do not use the line for any indication of direction
- The symbolic meaning of the shopping icon (bag with euro sign) is unclear
As our current map design was largely based on the directions indicated by the line, we had to fundamentally reconsider our use of graphic variables to influence the decision of the direction.
Stage 2: Redesign
For the redesign, we repeated the design process of the first concept: concept generation, choice of most effective map, optimizing map on effectiveness. This time, we also asked a teacher for intermediate feedback.
2.1 First redesigns
Each of us started making our own impression of how the map should be implementing the graphic variables to influence the direction. [blog link]
Despite a strong tendency to still use subtle changes to the line to indicate the direction, we ended up able to choose an effective concept that did not make use of the route line at all.
2.2 Concept redesign
The concept we designed contained:
Icons:
The icons used for the allocation of the museums and shops in either sharp focus or blur, established by either emphasizing the border line between the dark and light parts of the icon, or creating a threaded transition towards the map creating a ‘blur into the map’ effect. Museum icons colored saturated purple, and shopping icons colored saturated green.
Rest of map:
Areas of interest around the icons were emphasized with the use of more or less saturation of an already less saturated version used by the icon (unsaturated green and unsaturated purple).
Graphic variables:
The map made use of the following variables:
- Sharpness distinction (Ch 2) makes the difference between both icon groups easier to spot
- Contrast (Ch 4) between dark edge and white outline makes the icon pop out
- Color saturation (Ch 4) makes the more saturated area more dominant over the less saturated
- Depth of focus (Ch 5) makes sharper objects attract attention more readily
With this map, we asked for feedback during the scheduled feedback moments from teacher Van Mourik.
2.3 Concept feedback
From teacher Van Mourik, we received feedback on our maps, which we formulated into the following attention points:
Icons:
- The perceived color intensity between the colors used for the Museum and Shopping icons should be more or less equal.
- The colors used for the Museum and Shopping icons should make use of colors that otherwise have no strong culturally defined meaning on maps (such as ‘green = nature area’)
- The perceived icon intensity (due to ‘holes’ inside the icon) is more or less equivalent
Rest of the map:
- The multiscale structure (Ch 2) design principle used makes two areas in particular easier to find
- Both directions to choose from are presented at the same angle (thus making a ‘V’). This nullifies the possible influence of route orientation as printed on the poster.
2.4 Final concept design
Our next step was to consider the steps one by one, and apply them if appearing effective.
Icons:
- We redesigned the icons, focusing on equality in drawing attention by shape as well as symbolic clarity. Of the initial concept, the initial ‘M’ inside the museum icon and ‘€’ for the shopping icon were removed and the museum icon received pillars instead.
- To make the perceived intensity even more equal, we also tried to equalize the amount of icons for both shopping and museums, by including the churches with the museums.
- To increase symbolic clarity of meaning, we now took color into consideration as well. To ensure the color would complement the already used colors, we made use of a color circle, picking opposing colors. We changed the color of the shopping icons/area from green to greenish blue, as it had both no known meaning and still did complement the museum’s purple well.
Rest of the map:
- The map was rotated as suggested, so the fork in the road marking the decision point had an equal angle for both route K and route P. Although we do not have any theoretic ground for the effect, we unanimously judged the maps to look clearer this way.
- Rather than consistently coloring the areas in the map adjacent to the location icons, we decided to color only those areas around the highest concentration of locations of either type, and only those that were in our favor of emphasizing focus on the desired direction.
To recap, the final map design makes use of the following variables:
Graphic variables:
- The multiscale structure (Ch 2) design principle used makes two areas in particular easier to find
- Sharpness distinction (Ch 2) makes the difference between both icon groups easier to spot
- Contrast (Ch 4) between dark edge and white outline makes the icon pop out
- Color saturation (Ch 4) makes the more saturated area more dominant over the less saturated
- Depth of focus (Ch 5) makes sharper objects attract attention more readily
We posted the resulting poster on our blog. [blog link]
With this, we considered our poster ready to be tested.
Stage 3: Test
We posted the initial test setup on our blog. [blog link]
The version below is an updated one, making the initial setup obsolete.
3.1 Test setup
(1) Presumptions
Tourists will be influenced by subtle graphic changes (based on the book ‘Visual Communication for Design’) in two tourist maps in order to choose a route. The graphic variables used to make the distinction are: multiscale structure (Ch 2), sharpness distinction (Ch 2), contrast (Ch 4), color saturation (Ch 4), depth of focus (Ch 5) (see 2.2 and 2.4).
One map is a museum oriented map in which we intended to influence the viewer into taking the route clockwise (route K) and the other is a shopping oriented map in which we intended to influence the viewer into taking the route counterclockwise (route P).
(2) Research Question
Main Question:
- Can applying the theory on graphic variables subconsciously influence the decision of the perceiver?
Sub questions:
- Are the different values of graphic variable differences between the test maps consciously noted?
- Does the chosen direction correspond with the direction intended with the use of graphic variables?
(3) Research method
To test our maps, we created an online test. The application was created in Flash and php, and both fully manages the test procedure, results processing into table format and automatically alternating map versions among participants depending on which map had the least test results. Reasons to choose for this over visiting the city were: ease of gathering participants, ease of information processing and less possible influences during the test itself.
To ensure if this testing method would be accepted, we asked for verification from teacher Van Mourik. After processing his feedback (‘as long as the participant also enters where he lives’), we used this testing method.
One entry in our blog shows a movie demonstrating the test. [blog link]
(4) User Test
The user test will be conducted using a Flash application accessible via the internet address “http://moving.zxq.net/maptest/test.swf?g=graphic”.
The participants will be contacted by one of our group members and will be asked to visit the website above to be tested. The test can be done within the comfort of home, so the participants will not be influenced by testers’ tacit oppressive feeling. Therefore, we expect to acquire more accurate and honest information from them. All the information gathered during the test will be also accumulated digitally.
A minimum of 20 participants will participate in this research. People who are not acquainted with Delft in Netherlands will be recruited. Through friends and relatives of all four group members, a large group of people of different nationality will be asked to participate.
(5) Test procedure
1) First, the participants open the internet address “http://moving.zxq.net/maptest/test.swf?g=graphic” to start the test.
2) Then they see the initial screen of the test. With a proper greeting, they learn that two tourist maps of Delft will be shown and the total test time is less than one minute.
3) In order to see the maps, participants have to enter their name and region they come from and then click “start test”.
4) Participants will be asked to see two versions of the maps for 16 seconds simultaneously and be asked if they had noticed any conspicuous differences between those two maps. If some differences are found, they will be asked to name the differences and reason why afterwards.
5) After they press “show maps”, you can see two maps for 4 seconds for each map twice simultaneously (16 seconds total).
6) Participants will be questioned if they had seen any conspicuous differences between two maps. If “yes” is selected, they have to give reason why.
7) Finally, half of the participants will see the “museum map” and the others will see the “shopping map” with a question that supposed they are visiting Delft for shopping and visiting museums and pick route K or P.
Results
After the test had been performed by more than 20 valid participants, we collected the user data through the link http://moving.zxq.net/maptest/gettable.php?g=graphic, which displayed all test results in table format.
At the moment of processing the results, we had ended up with 34 valid participants. 16 participants were shown the shopping map and 18 participants were shown the museum map (for the last question).
The outcomes of the results were: 8 out of 34 participants (31%) noticed the difference between two maps. Of these 8 participants, 6 noticed a difference in color saturation of the block on the map, and 2 noticed the difference in the icons.
18 out of 34 participants (53%) chose the correct route, of which 9 had seen the shopping map and 9 had seen the museum map. Of the 26 who did not notice a difference between the maps, 16 (62%) chose the correct route. Of the 8 who noticed a difference, only 2 (25%) chose the correct route.
Conclusion
With a result of 65% who did not see a difference, we conclude that our maps are fairly inconspicuous. Having only 53% choosing for the correct direction seems very close to random chance, but when looking at only those who did not see the difference, the result becomes 62%, with an undeniable deviation of 12% from the distribution of random chance (50%), which makes us conclude that the map design did have an effect on the choice of direction.
The results might have turned more in our favor in a more hasty environment, when the viewer is oblivious of the existence of two versions, or when we had a bigger sample. Regardless, we can conclude from our test that graphic variables do have a subconscious effect on the choice of direction.
