copenhagen soundscapes

7/28/2019 Copenhagen Soundscapes

http://slidepdf.com/reader/full/copenhagen-soundscapes 1/41

Webdesign og Webkommunikation ved Sigurd Trolle Gronemann

Gruppe 19 - KBHlydskaberCarl-Johan Kristiansson 020485-3339 [email protected]

Elin Pernilla Craehn 160784-2600 [email protected] Malene Lund 310182-1454 [email protected]

Sirid Bonderup 150884-1600 [email protected]

antal anslag: 61.816

kbh lydskaber

-a creative soundmapping website for Copenhagen



2



3

Introduction 5 all

Concept 5 all

Problem statement 6 all

Project organization 6 Elin

Preliminary outline 7 Sirid

Strategy 7

Method 7 Malene

Genre and style 8 Sirid

Genres and style - Descriptive Analysis 9 Malene

Our design in relation to the genre of soundmapping 9 Sirid

Communication 9 Elin

Target Group 10 Carl-Johan

Personas 10 Sirid

Our experts 12 Elin

Diffusion 13 Carl-Johan

Part conclusion 14 all

Scope 14

Community 14 Malene

Persuasive design: Specications and functionality 15 Malene

Experience Design 15 Sirid


Structure 16

Information Architecture 17 Elin

Meta-data and tagging 18 Sirid

Information Flow 19 Elin

Wireframes 19 Elin

Wireframe testing 19 Carl-Johan


Skeleton 20

Written Communication 20 Malene

Usability and Functions 21 Carl-Johan

Functionality 21 Carl-Johan

Efciency 21 Elin

Satisfaction 22 Carl-Johan

Gestalt Principles 22 Carl-Johan

Usability-testing 24 Sirid

Trunk test 24 Sirid

Part conclusion 25 All



4

Surface 25 Aesthetics 25 Malene

Our Design Aesthetics 25 Elin

Design Evaluation 26 Malene

Browser compatibility and size 27 Elin

Part Conclusion 27 all

further work 27 all

Conclusion 28 all

List of references 29 all

Appendix 31 all



5

KBH lydskaber-a creative soundmapping website for Copenhagen

IntroductionThe world wide web has been continuously growing in functionality during the last decades. The

entry of web 2.0 technology on the web such as Google maps gives us possibilities of experiencing

new aspects of time and space. It has also given rise to new opportunities for audio -performers,

-composers and -audiences (Barbosa, 2003 p. 1). Recently, several websites with soundmapping

functions have been established with the aim to bring rich sound experiences from the cityscape

into web media. There are examples of websites that focus on a global scope of sounds1 and those

which function on a local level2.

Soundmapping is a diverse concept which does not fall under an immediate genre, making it

original and exible. We nd the concept interesting as it combines a wide range of elements from

the web media: visuals, sounds, networking, sharing, creativity, art and much more. As there is no

website dedicated to soundmapping of Copenhagen, this project sets out to establish one.

ConceptThe intention of soundmapping is to mediate certain atmospheres, moods and feelings through

the use of sounds from physical locations in the outdoor environment. These sounds are referred

to as soundscapes. The aim of soundmapping is to communicate a sense of place - a physicality,

which is facilitated by datavisualization on the internet. This idea of maps not focusing on the

actual spatiality but more on the sensed space and mental journeys, has its own term: psychogeog-

raphy.

On soundmapping websites, users can upload soundscapes and pinpoint specic locations of cap-tured sounds. In relation to this, visitors can listen to sounds by exploring interactive maps where

soundscapes are displayed. There is a wide range of soundscape types and the soundmapping con-

cept is balancing on the border between art and the everyday. Some soundscapes can be catego-

rized as performances with staged sounds and noises, whereas some soundscapes grasp temporary

tunes with natural elements or social encounters among others3.

Soundscapes are mostly generated without any monetary incentives involved and the concept

relies on peoples personal motivation to experiment and explore.

1 (Soundcities.com)

2 (Soundsurvey).

3 http://www.reverberant.com/sm/http://en.wikipedia.org/wiki/Soundscape



6

Problem statement We wish to design a website dedicated to soundmapping of

Copenhagen. We imagine a creative community site, where

you can upload, download and listen to soundscapes from the

Copenhagen area.The focus lies in how to build a visually ap-

pealing site incorporating the image of the target group with

a simple and well-structured functionality. Furthermore, wethink that a

certain level of quality must be reached in order to entice crea-

tive and semi-creative people to fully use the website and to

establish a form of community.

Project organizationIn this section we will account for our overall approach and aspects that are related to project

management.

Garret : the elements of user experience.

In order to keep track of our progress and

to balance various stages in webdesign, we

have used Garret’s model of user experiences

(2003, p. 33) as a basis for the projects struc-

ture and progress.

The model covers the entire eld of web de-

sign, going from abstract- to concrete stages.

In order to provide a structure and design

that can encourage users to use our website,

a thorough target group analysis and list of requirements and specications is necessary.

The two initial stages, strategy and scope,

have needed careful attention during the rst

phase of the project since there was no clear

or pre-dened target group concerning sound-

mapping. When we had established a solid

idea of who the users could be, we were able

to continue on to the structure, skeleton and

surface of the website.

Although the model suggests for a linear process (that a stage to a higher or lower extent should

be nished before continuing to the next), we emphasized the importance of iteration between the

stages and argued that they were not existing independently of one another. Seeing that user in-

volvement is a key element in web design it should be present during all stages (Sharp et. al 2007).

Garret divides the phases according to what kind of website that is being developed: A website

with the aim of presenting information to the user (information intensive) or a website with the

focus of offering the user with a proper set of functionalities (functionality intensive). Due to the

soundmap elements and community aspects of our website, we propose it to be more functionality

intensive than information intensive. However a certain amount of information will also be pro-

vided on the website in order for the user to get a clear idea of what the website is about.



7

Preliminary outlineHereby we present the order and the content of the project to clearly illustrate the process going

from abstract to concrete stages.

Strategy - Communication, Target-group, User-involvement,Genre and style, Genres and style - Descriptive Analysis,Expert interviews, method, personas and diffusion.

Scope - Persuasive design: Specifications and functionality,Experience Design, Community

Structure -Preliminary thoughts on the structure of the website,Information Architecture, Meta-Data and tagging,Categories for tagging, Information Flow, Wireframes,Gestalt, Wireframe Testing

Skeleton - Written Communication, Usability and Functions,Usability Testing

Surface - Design, Our Design Aesthetics, Design Evaluation,Browser Compatibility and Size

Conclusion- Further Work

abstract

concrete

StrategyIn this initial stage we will account for our method followed by a thorough genre and target group

analysis.

Method As we were designing a brand new website, our rst goal was to determine a possible target group.

There are several soundmapping websites for other cities4, the websites referred to in this reportare:

• Soundcities

• Soundsurvey

• UKsoundmap

• NY soundmap

• Soundaroundyou

4 http://www.soundcities.com/

http://www.soundsurvey.org.uk/

http://sounds.bl.uk/uksoundmap/fusionmap.aspx

http://fm.hunter.cuny.edu/nysae/nysoundmap/http://www.soundaroundyou.com/



8

By using these as a starting point we have performed a survey in our network. This survey have

supported our initial user analysis by providing an overview of thoughts and experiences concern-

ing other websites within the genre, and about the general concept of soundmapping. In addition

we have requested other websites for potential data about their visitors in order to get a clearer

picture of their users.

We have furthermore performed a genre analysis of soundmapping websites. In this way, we were be able to identify common issues present within the eld and accordingly incorporate these impli-

cations when we developed our website.

We have gathered our research respondents by contacting our friends and acquaintances, thereby

establishing an “expert” group consisting of people working professionally and creatively with

sound and the city within diverse elds (radio, art, architecture, lm-making etc.). The objective of

this was to gather experts best suited for evaluation.

Through these arrangements we have developed provisional personas to match our three initial

user-types: the listener, the uploader and the downloader. The intention was to use the expert

user input in all stages, from concept development, functionality and design to user testing of the

nished site to support the provisional personas.

Genre and styleIn the following section we will consider the concept of web genres. Initially we analysed a number

of soundmapping websites5 and attempted to create an overall picture of the common denomina-

tors of soundmapping websites. We will further establish a general concensus of common issues

that are present within the soundmapping genre. Finally we formed a strategy of how we can

design KBH lydskaber to be recognized through the genre, and differentiate itself positively from

other websites within the genre.

Following, Engholm (2005) puts forth a denition of genres:

“Genres are generated by the repetition of phenomenological constellations - such as textual

content, navigational elements, layout, graphics, the use of dynamic or static images and colour range”

Accordingly, webgenres as a phenomenon can be described as the common characterstics that tie

related websites together within specic elds. According to Engholm style is complementary to

genres and is used to characterize singular objects and events (2005).

What should be mentioned is that webgenres are not constant and change according to the trends

that are ourishing on the web. In comparison to some of the more established genres (blogs,

newspapers, photo galleries etc.) soundmapping websites are a new concept and as far as we know,

there are not many existing websites about soundmapping. In this sense the concept can not be

generalized as a genre in itself, but we have attempted to point out some of the implications that

reoccur in the websites.

5 http://www.soundcities.com/http://www.soundsurvey.org.uk/

http://sounds.bl.uk/uksoundmap/fusionmap.aspx

http://fm.hunter.cuny.edu/nysae/nysoundmap/http://www.soundaroundyou.com/



9

Genres and style - Descriptive Analysis As there is no soundmapping website for Copenhagen, our point of departure was other types of

soundmapping sites. Based on our survey we were able establish what our respondants liked/

disliked about the other soundmapping sites. From those comments we began reecting upon the

elements of our website.

From a general perspective, the only clear common denominator of the different websites genre- wise is the actual concept of soundmapping. When going into detail with the different websites we

noticed a problem; none of the websites clearly explains what the website and the actual concept

is about. This was further promoted by one of our respondents: “maybe a short introduction to

sharpen my senses would do the page good. but not too long, something like a sentence or two to

get me started.” This is problematic, since the concept of soundmapping is not familiar to every-

one and not immediately comprehensive.

Regarding the transparency of the concept, some of the soundmapping websites6 do not immedi-

ately present any visual elements (such as maps or sound les) that indicate the concept, this issupported by a quote from our survey: “I don’t think that the sound element is obvious enough on

the page. It’s too quiet and nothing indicating sound in the design” . We argue that it is of great

importance to display these elements to allow the concept to permeate. This is necessary to em-

phasize in order to tie the soundmapping websites together as a web genre and promote its idea

and innovation.

Overall, all of the mentioned websites within the genre differ in their style. Furthermore, some of

the websites7 seem to lack in mediating personality through their style. When asking the respond-

ents of our survey they expressed: “boring but classy” and “OK, maybe a bit too minimalistic” .

This could imply that a clear visual identity is neccessary to entice users.

Our design in relation to the genre of soundmappingConcluding upon our descriptive analysis, the genre of soundmapping websites is not strict.

Through our analysis we have emphasized the necessity of incorporating and clearly promoting

soundmapping elements to communicate the actual concept. The concept also need to be support-

ed briey by text content. Finally, many websites within the soundmapping genre seem to fail in

conveying a personal style. We believe that an individual space for audio is necessary to entice the

websites visitors. These notions were taken into consideration when designing the website.

CommunicationInterpretation is constrained on the web, therefore a focus on the interpretation process in context

with a website has greater importance for getting the message through. (Rasmussen and Fischer

2008, p. 27). This infers that the process of communication should not be viewed as a direct

transfer of messages but a wide range of observations and interpretations (Rasmussen and Fischer

2008, p. 30). These interpretations are based on a number of premises constructed by the user’s

own experiences, convictions and context.

6 http://fm.hunter.cuny.edu/nysae/nysoundmap/http://www.soundsurvey.org.uk/

7 http://fm.hunter.cuny.edu/nysae/nysoundmap/

http://sounds.bl.uk/uksoundmap/fusionmap.aspxhttp://www.soundcities.com/



10

In order to collect these subjective user-experiences we asked the respondents of our survey to

evaluate existing soundscape websites, this gave us an idea of our potential users negative and

positive experiences and interpretations of the soundscape concept. According to Rasmussen

and Fischer it is likely that the receiver misinterprets a message from the sender if the “cultural,

temporal and spacial distance is to large” (Rasmussen and Fischer 2008, p. 34). This argument

is supported by Ole from our expert interview who expressed: I don’t think I understand what

this site is trying to communicate and what it wants me to do [...] It doesn’t move me [...] I need transparency in order to realize the actual concept” . Presumably, the user was not enticed to use

the website due to the distance factors and eventually the lack of a proper target group recognition.

This is why its important to achieve a deeper understanding of the target group.

Target GroupIt is important to know what target group to address in order to create an overall picture of who

the users of our website will be.

There are various methods that can be used to segment target groups. One way is to gather quanti-tative data such as age, gender, income, education, ideology, taste and so forth. However, accord-

ing too Rasmussen and Fischer this might result in an overlook of other important factors such

as lifestyle, experience and people’s behaviour (2008, p. 49). If these factors are not taken into

consideration, misinterpretation might disrupt your message.

In our case with soundmapping, people’s experience and perception of other websites was impor-

tant to create an idea of the target group interest.

We have contacted administrators of other soundscape websites in order to identfy Rasmus-

sen and Fischers notions of experience and lifestyle amongst their users. Soundaroundyou.com

replied that ”67% of respondents had increased awareness of acoustics / soundscape research at

least slightly” . This infers that most soundmapping website visitors do have a certain interest in

soundscapes and are not randomly visiting their website. Furthermore, the website administrator

replied “The majority of people gained most from the actual recording of soundscapes (40%), the

discovery of soundscapes (27%) and exploration of the soundscape map (20%)”.

It was also necessary to establish the ideology and taste of our target group in order to create our

personas. Several models, for instance the Minerva model are also intended to identify these fac-

tors. We argue that our target group is positioned on the upper hand right scale in the model. This

implies that they are modern and idealistic in their way of living. However, the model’s focus isupon broad and shallow tendencies although it is helpful in determining what social or political

structure our users belong to.

In the shaping of our target group and following that, personas, we had some specic ideas of

what might be important when creating a website dedicated to soundmapping.

PersonasThrough the conviction that it is optimal “to design for specic types of individuals with specic

needs” (Engholm & Salamon 2005, p. 77) rather than just designing for an entire target group, wehave decided to create personas. Personas will help us to analyze user experiences and goals in

relation to our website and its intended users.



11

Due to time constraints and lack of enough quantitative data to support our ndings, these per-

sonas are not complete and are not as reliable as complete personas, and their limitations should

be considered. According to Angela Quail: “Provisional Personas are also necessary when a com-

pany has not rst adopted a market segmentation”8, in other words, even though our personas are

limited, they’re still are an essential tool for us to be able to narrow our focus since we don’t have

enough quantitative data to perform a market analysis.

The personas were created from the data gathered through surveys and input supplied from other

websites. Prior to forming our personas we made afnity diagrams which supported us in quickly

sorting the data into themes and to get a clear picture of the problematics. The method helped

us in recognizing user patterns and perceptions of the websites. The themes stemming from the

afnity diagrams indicated three different kinds of user behaviour which formed a foundation for

establishing personas.

8 http://www.personacreation.com/persona_creation/2008/04/beyond-fake-per.html

Persona 1: Line, “The shy traveller”. Female, 21, not technical,

but interested in places and sounds. Passive, shy user who do

not think anyone would listen to her sounds if she uploaded

them. Interested in the atmosphere, Likes to listen to the

sounds of other cities/countries. Escapism, can “close her eyesand dream she is somewhere else”. The sounds brings back

memories for her.

The three personas are presented below, and moodboards of these are attached in appendix 1 a-c:

Persona 2: Jakob, “The arty mixer”. Male, 28. Creative and

quality oriented concerning both technical issues such as the

sound, relevant tagging and different functions on the website,

but also other social aspects such as interaction with other us-ers. Has an interest in local culture and creative communities.

Wants both context and sound.

Persona 3: Michael, “The professional user”. Male, 34. Prag-

matic, likes modern/traditional design. Uses the website in a

professional capacity, i.e. for soundeffects to movies, games,radio, etc. Wants quick and easy layout. Interested in the

search function and sound quality. Does not care about the

context, the sound is the main objective.



12

According to Rasmussen & Fischer we should to frame the remaining personas:

“As a target group analyst one should dene what concrete cultural universes you want to operate in in con-

nection to the single case. [To examine what a certain target group] it can be relevant to nd out [...] what

they have in common” (2008, p. 54.)

The three personas have some common denominators: they are to different extents creative and

have a general interest in sounds- especially in soundscapes. They are rather young and assumed

to belong to a youth culture on the modern side, rather than the traditional side, in the minerva

model. Furthermore, persona 1 and 2 are leaning more towards a non-mainstream and idealistic

character than Persona 3, but he is however still on right side on the minerva model. Last but not

least, they are all living within the Copenhagen region and are taking part in the citys’ cultural life.

Our expertsIn order to ensure credibility and support for our provisional personas, we have performed a set of

interviews and user-tests with people that we consider to fairly correspond with our personas:

Ole: a student of modern culture and cultural mediation

at KU, specializing in soundscapes and radio-montage.

Io-Maria: An architecture student who does art projects

and movies about the city.

Camilla: A librarian employed at DR archive and re-

search, radio dept.



13

Diffusion Again, in order to “design for specic types of individuals with specic needs” (Engholm & Sala-

mon 2005, p. 77) we needed to narrow our design concept once more. This section will account for

theory concerning diffusion. This was essential in our case since the concept of soundmapping is

not widespread in Copenhagen. Furthermore, we wished to create a site with a high level of user

participation, also known as a prosumer site. “Prosumer is a portmanteau formed by contracting

either the word pro fessional or producer with the word consumer ” 9. In order to make this kind

of site dynamic and eventful, it is necessary to attract creative people from the start.

Our initial goal has been to establish a community and to create a network for creative people

either within the sound industry or people who enjoy listening to soundscapes. The concept of

soundmapping is innovative and there are many underlying strategic implications that should be

considered when innovating and establishing networks. An essential theory that stems from the

eld of information economics is the theory of ‘network externalities’.

This theory implies that the benet a user derives from an information product increases when theamount of other users (which are consuming the same information good) is increasing (Liebowitz

& Margolis 1998). Accordingly the users value of our product, KBH lydskaber will rise as more

people are contributing to our website, both material-wise and community-wise.

This implication is further related to Roger’s theory ‘diffusion of innovation’ - that a certain num-

ber of users (the critical mass) must adopt in order for an innovation to obtain success (Rogers

1983).

This implication of the amount of users and user value is supported by our interviewee Ole whoexpressed: “just like news updates, it needs to be continuously relled with content, if nothing is

happening on the website it looses its function” . Ole further supports this by also saying that it is

“the users who builds it [the website] up” . This is certainly true for the soundmapping website we

have created, no users - no content, no content - no users.

To encourage this and to facilitate it’s process we have focused our design on our primary persona

Jakob who is acting as the main source for uploading material and in addition is highly interested

in the community aspect of the concept. Our secondary personas, persona 1 and persona 3, will

not in the same degree contribute with material, but will make good use of it on the website and

diffuse the knowledge of the site in their networks. We are aware that persona 1 probably is going

to be the most frequent type of visitor and visitors are important, but as stated earlier, without

content, the website dies. This is why it is persona 2 and not persona 1 who is our primary persona

in the pilot phase. We imagine that persona 1 and 3 will grow in importance when the website pro-

gresses. However, It is a matter of making the website appealing to both persona 1 and 2 in order

for the website to have success. That being said, quality in this context is also important to entice

persona 3 to use and visit the website, something Ole also reected upon: ”It’s important that you

try to create something that is not too controlling, but at the same time is quality conscious”.

It is however important to note that the three different personas are not as far a part as they seem,they are both overlapping each other as well as being interdependent. In summary, Persona 2 is

our focus, however all of the three personas play an active role in the establishment of the website.

9 http://en.wikipedia.org/wiki/Prosumer



14

With the focus on persona 2, a point of departure was therefore to nd out Jakob’s wishes, taste

and technological skills and then relate his preferences to some of the topics in Garrets elements of

user experience: what functionality the website should promote, how it should be structured, and

how the visual design and language can appeal to him (2003, p. 33).

Part conclusionSince the soundmapping genre itself is not specic, personas, expert interviews, and the survey

will be helpful tools in order to keep our focus on communicating the concept in the best way pos-

sible.

By evaluating other soundmapping sites through a survey and by establishing three personas we

have dened the users of the website. In order to ensure credibility and support for our provisional

personas we brought in three experts corresponding to the personas.

Based on our persona(s), our design focus at this point was upon the strategic implications con-

cerning uploading and downloading sound, diffusion and community establishment.

ScopeIn this section we will provide a broader overview of our design scope which involves the incorpo-

ration of a community, persuasive design and experience design. These ideas will be connected to

the design concept and its users.

Community In continuation of the diffusion strategy, we suggested that the value of the website’s visitors

could be increased by a community. This would also promote growth by spreading the website

to networks within the creative eld. This idea was suggested during the interview with Ole. To

keep visitors and members coming back and contributing to the website, it is important to create a

sense of social awareness so that the website feels vivid.

To create social awareness on our website we have chosen to include the option to comment on

a specic sound, social network sharing functions and user prole pages. These are examples of

what Bødker and Christiansen refer to as ‘breadcrumbs’ and ‘shared mirrors’ (Bødker and Chris-

tiansen: 2006).

Bødker and Christiansen also argue that being a member in the community of the website should

not affect the sense of social awareness:

“social awareness […] must be constructed indirectly, presenting itself as an option, rather than as a conse-

quence of being able to overhear and oversee.” (2006)

In relation to this we have considered the limitations and the accessibility of our community. On

one hand the community must be accessible to some extent, in order for us to maintain the visitors

interest for as long as possible, on the other hand a quality level must be kept. Therefore we havedecided to make all parts of the website visible for non-members of the community, whilst upload-

ing and downloading sounds is limited to members.



15

Persuasive design: Specications and functionality Since our website depends on the collaboration and upload of sounds by our members in order to

have success, we believe that by identifying our user’s emotional needs and the surrounding com-

munity we can persuade our users to not only listen to and download the soundscapes, but also to

upload sounds.

Persona 1, Line is primarily motivated through emotional needs which we chose to meet by graph-ical means, using a strategy for choosing the right graphical style based on the user group’s prefer-

ences. (Hansen 2005, p. 25.) This persona is also instrumental in spreading knowledge about the

site through social networks, which we promote through a reduction technology (Fogg 2003, p.

33) by making it easy to post links to Twitter and Facebook directly from every page on the site.

Persona 2, Jakob is likewise motivated through emotional needs. As with Persona 1, this can be

enforced through a visual identity. (Hansen 2005, p. 25.) As this persona is instrumental in keep-

ing the site alive with new content, we will encourage him to upload more through the means of

Operant Conditioning; (Fogg 2003, p. 51) users in the community part of the site will have indi-

cations of how much and how recently they have contributed to the site and therefore awarding

frequent contributions with a higher status among the site users.

Showing how often a sound clip has been downloaded and commented on as opposed to only

played is an indication of sound quality and relevance, again conditioning uploaders to upload

high-quality content, which can be enforced additionally by only featuring the most frequently

downloaded or linked sound clips on the main overview map.

Persona 3, Michael’s motivation comes more from his need for relevant content. (Hansen 2005,

p. 23) As a professional user of the site, he needs to easily and readily be able to nd what he islooking for. By giving him quality content, Michael should be persuaded to come back for more.

(Hansen 2005, p. 23-24) This will be achieved by means of access to a search interface and navi-

gating the user generated classication. Additionally the indirect scoring through downloading de-

scribed above will ensure that the most relevant items will “bubble to the top”. These aspects will

be reviewed in the structure phase.

Experience Design

In the diffusion chapter we emphasized the importance of increasing the value for the user. This value is highly dependent on experience design. Both persuasive design and experience design

helped our understanding for how we could create a self-efcient and user-centered website.

Prahalad & Ramaswamy argue that in experience design it is not the technology or the product

that is in focus, but rather the user and his or her possibilities for inuencing and contributing

to the website. The interaction of the user(s) is thereby dening the experience and connected to

that, the value of the experience. “[...] innovation’s center of gravity remains located in the tech-

nology or the product, which is at best a variant of the prevailing dominant logic. Rather, the

center of gravity must shift to the individual’s co-creation experience.” 10

Prahalad & Ramaswamy also gives some examples of what is needed to make a good experience design: to organize the

system to deal with the experience space, focusing on events on the website and connecting the

10 http://sloanreview.mit.edu/the-magazine/articles/2003/summer/4442/the-new-frontier-of-experience-innovation/



16

new content to their time and space context, allowing the user to interact with the system through

simple and exible interface. (2003)

The model shows different aspects of the experience space that we

have incorporated in our website:

Personal meaning is created on our website through the

sounds that users upload from their own neighborhood in Copen-hagen and the connections to different categories. Events and

a personal involvement will be facilitated by the community

which creates a sense of something happening on the website. By

indicating sounds on our map (soundmapping) we create a con-

text for the events. By letting our main content (sound) be user

generated, we are in a higher degree letting our users inuence

and create the experience and interaction on our website.

The experience space -

C. K. Prahalad &

Venkatram Ramaswamy

Part conclusionOur design scope involves both persuasive design and experience design. Both are important

aspects for understanding our design concept: persuasive design can help us to illuminate issues

with the upkeep of the community part of the website, persuasive design furthermore helps us to

understand the users emotional needs and why it is important with a community aspect on the

website to create social awareness. Experience design lets us establish an understanding of the

overall experience of the concept. Through these subjects we have generated a number of specica-

tions and requirements that should be incorporated in the website.

StructureThrough our survey we were made aware that existing soundscape sites were often too complex

and hard to navigate. This prompted us to focus on simplicity in our IA.

The basic structure of the site is a hierarchy determined through a whiteboard session similar

to card sorting. A full-blown traditional card sorting was deemed too large an undertaking for a

site of this size. During the session, the team members created the initial topic hierarchy with the

target personas in mind. The structure of the hierarchy is primarily a hub and spoke organization

expanding into a simple tree structure.

upload

about

database/ library

community

help

faq

home / mapmap, search, login, create pro-file, listen, facebook, twitter, rss



17

Information ArchitectureIt is rst of all important to establish that the website we have made is essentially a database, but

it is also more than that. The map and the audio player add a layer of interactivity and high func-

tionality and the prole pages and the commentary eld in the player adds a community aspect to

the site. Still it is essential that the users can nd the les they are looking for in the database.

The primary organization scheme for the content will be a graphical one, as sound les will berepresented as points on a map. The users will be provided with alternatives through a topical

organization scheme with predened categories for each sound le and social classication by

allowing users to attach tags to uploaded sounds. The site will contain elements of both top-down

IA through menu navigation and map drill-down and bottom-up IA through searching and user

generated classication.

The structure of our website is based on our personas’ information needs and seeking behaviour’s.

This is essential in the eld of information architecture since peoples’ information-seeking behav -

iour vary. Sometimes the user does not exactly know what he is looking for (exploratory search).

Occasionally he is attempting to nd everything on a particular topic (exhaustive search) and

sometimes he will know the exact name of name or location of what he is looking for (known-item

seeking. (Morville and Rosenfeld 2007, p. 35).

Persona 1, Line is a dreamer and wants to explore all the different areas and moods that the

soundscapes will represent, in this sense she is an exhaustive seeker. In contrast, Persona 3 Mi-

chael needs material based on certain work criteria, as such he is looking for more specic infor-

mation (he is an exploratory seeker) and will gain efciency by using the search functions and

user generated tags. In addition he might need to re-access material which location or name he

is already aware of (known-item seeking). Persona 2, Jakob, our main focus, will either be using

a search function depending on whether he’s accessing the site to upload sounds (top-down) or

searching for specic sounds through a search interface in the top navigation part of every page

(bottom-up). In this sense, he inherits all of the information-seeking behaviours.

Morville and Rosenfeld 2007, p. 35



18

These implications of our personas are tentative due to their unpredictive nature. The user will

still be able to select between the several search systems (organization scheme hierarchy, database

search function and user generated tags) depending on their mood, varying needs and preferred

browsing choices.

Meta-data and tagging

“a top-down approach to genre is problematic [...] genres are socially constructed, so different social groups using documents with similar structural features may think about them and de-

scribe them differently” (Crowston & Kwasnik 2004, p.4). Having this in mind and adding the fact

that soundscapes are abstract and might be hard to classify, we argue that a top-down structure is

not sufcient alone and we emphasize the importance of using faceted classication for different

genres. Our approach is mix of top-down and a folksonomy strategy allowing the users to create

the meta-data.

By using genre classication of concepts, we attempt a pragmatic approach, as we do not want the

users to be dependent on one conceptual perspective. Furthermore, in our role as designers we do

not want to posses the meaning of the specic soundscape documents, we think it should be up to

the users. This argument is supported by Ole when he was asked about functionality he considered

to be essential on the website. He expressed: “tags linking to the stories [you want], alternatively

[...] if you’re interested in a sound, it links to another sound you might be interested in”. Bates in

Morville and Rosenfeld have designed the berry-picking model and stresses that many people pick

bits of information along the way (2007, p. 36). User-generated classication will indeed support

this way of browsing information.

Below is a table of suggestions for main categories for tagging and metadata:

Category Controlled vocabulary lters for tagging

People Crowds, Conversations, Performers, Entertainers,

Artists, Drunk, Random, Demonstrations, Rallies,

Speeches, Political

Surroundings Cafés, Street noise, Pubs, Schools, Stores, Private

Residences, Ofces, Forrests, Parks, Construction

work, Police, Ambulance, Social

Ambient Water, Wind, Rain, Snow, Noise, Street noise,

Music Street Performance, Jazz, Rock, Hip-hop, Indie,

Café music, Elevator

The implementation of these meta-data and tagging options will provide the users with many

advantages. It will provide them with more exibility for browsing, it will not require complete

domain knowledge, it will facilitate the classication of new documents in the long-term and will

allow the users, not the designers, to form the concept of soundscapes themselves. (Crowston &

Kwasnik 2004, p. 6-7). In order to minimize redundancy, to avoid aming and to limit the number of categories, we will use controlled vocabulary lters. Suggestions for vocabulary lters are

showed above in the table, as well as the main categories.



19

Information Flow Many questions about how to organise the sound content are prominent and our focus is on how

to facilitate the access to the database in a simple yet highly functional way. Persona 1 and at

some occasions persona 2 might not always be interested in delving deeper into the soundscape

database and should in this sense have an option to nd soundscapes in a quick manner. In this

connection we have decided to include a news feed and the possibility of having showed differ-

ent themes on the main map. This will facilitate the information ow by providing the user withinformation rather than leaving him to search for it himself. The themes are indirectly generated

through the users’ behaviour on the website and will contain six categories:

• KBH lydskaber presents/ featured sounds

• Most played

• Most downloaded

• Newest sounds

• Most shared

• Most commented on

The content of these themes will be generated by the users when they download tracks, comment

on tracks and so on, except for the rst “featured sounds” theme, the content in this theme will

be selected by curators at KBH lydskaber. The themes are furthermore intended to incorporate

a way of motivating people to upload and download sounds and will display the highest rated

soundscape in the different rating themes. This will motivate users, especially persona 2, to upload

new sounds, as he will an opportunity to appear in the eld.

Wireframes We used wireframes (see appendix 2 a-d) as a method to build the structure of the website and to

create a website template, before focusing on details and aesthetics. Through this we could eas-

ily achieve homogeneity and recognize what structural conventions we needed to accommodate

concerning user navigation.

An Important factor regarding usability and site-navigation is consistency, especially since the site

users are not very familiar with the genre. The consistency is facilitated by situating the navigation

bar, audio player and search function at the same position at every section of the website. This is

motivated by our assumption about web conventions - that the users expect to nd them there.

Content is the only element that is varying when browsing the website.

Wireframe testing When we had our wireframes and design examples (see appendix 3) in place, we conducted small

interviews with Ole and Io in order to ensure that everything made sense structurally and to get

input and suggestions for improvements.

Ole responded well to our overall structure and thought it was simple and easy to get an over-

view of the website with consistent elements: “It sounds very simple and easy. I think that it [the

navigation bar and audioplayer] are really good ideas for this kind of website because it makesit less confusing when you navigate”



20

Io was also positive concerning our overall structure:

“It [the structure] is very user friendly because you make a point of having a tight frame which is easy to re-

late to and minimises the risk of getting lost on the site. I also really like the fact that the audio player is such

a big part of everything, it makes it really easy to browse the site and at the same time listening to sounds

without being restricted to one specic page.”

Having the audio player and navigation bar as consistent elements on our website, in order to cre-ate a rm frame, proved to be a popular decision, both of our experts agreed that this structure was

important in order to emphasise the sound:

“I don’t think I’m that kind of person who thinks to much about it...I adapt...some of the websites I’ve seen...

they irritate me because many of them were to big and you had to move around a lot...I really think that it

sounds like a good idea, that thing with the navigation and audio player framing it [the website] in”.

These statements conrmed that we moved in the right direction and at the same time also had

been very thorough when forming our structure.

Part conclusionOne of the conclusions we were able to make from our survey and expert interviews was that we

had to pay special attention to the structure of the website. Several elements such as the database

and indicators of sound on the website should be structured in a comprehensible way. We also had

to adapt the structure to our personas and experts’ information needs. In this connection we could

conclude that a combination of a top-down and bottom-up functional IA would suit the needs of

the different users. Wireframes was used as a method to visualise the structure. Testing the wire-

frames on our user group proved to conrm our ideas of how to structure the website.

Skeleton Written CommunicationIn order to accentuate the soundmapping elements on our website, we have not featured any

lengthy texts, only short sections in the “about” page which we are referring to in this section.

According to Jensen it is important that the written information on a website is presented in the

order the user need it. Users on the internet usually do not read more than the rst sentence of a

text, it is therefore crucial that the rst sentence gives the user all the information he or she need

(Jensen 2001).

It is important to remember that all the essential information is structured in a way that allows the

reader to quickly understand what the text is about. We have therefore structured our texts after

subject and we kept them as short as possible.

We argued that the about page should describe the concept of soundmapping to give the users a

further idea of the intention of the website. As the users are expected return to the website and

hence willing to learn to use it effectively we have also provided them with help instructions and a

‘frequently asked questions’ section in the about page. In addition to this we have also made sure

to incorporate small info texts on every page in order to guide the users. This is particularly useful

for persona 1 who is not technical.

On the basis of the survey we have argued for the necessity of describing the actual intention of the



21

website and to promote it’s meaning. In this relation we have by convention inserted a short and

catchy tagline “en alternativ tur i byen” in the header to briey tell the user what the website is

about. A short description on the left side follow to ensure that the users understand the concept.

Usability and Functions A deeper insight into functionality, efciency and satisfaction is essential when designing for us-

ability (Gregersen and Wisler-Poulsen 2009). These factors will ensure a higher quality and that

the user will stay on or potentially revisit the website later. We performed functionality- and us-

ability tests while designing the website to make sure that the above factors were met.

Functionality In the scope section we elaborated upon the necessary functions that should be incorporated on

the website to make sure that it lets the users to obtain relevant goals and needs. These functions

will be described in detail and will be related to functionality.

The top-down and bottom-up functional IA will facilitate the users primary goal, to browse or

search for specic soundscapes. Besides the simple search function in the navigation bar, the user

will via the library page have access to an advanced search function including a tag-cloud to nd

soundscapes based on their preferences. The map on the main page also enable them to browse

soundscapes based on various categories.

Furthermore the users secondary goal, networking with other interested parties, is made possible

by the site’s community functions. However, as the website is focusing on the concept of sound-

mapping our intention was not to create a full blown forum. A minimalistic prole page is provid-

ed and includes a prole-picture, the number of uploads, plays, downloads, a list of uploads withthe newest sounds shown on a map and functions to send a message and edit one’s prole. A sub-

scription function enable users to receive updates about their preferred contributors through their

own RSS-feeds. User’s will be able to comment soundscapes through the audio player. The audio

player will further contain social network “share” functions which will promote the users to diffuse

the presence of our soundmapping website. For a complete overview of functions see appendix 5.

Efciency The websites efciency is depending on the objective of the website and the goals of the users. If

we were to design a website with a heavy amount of information we would have to provide the us-

ers with a lot of content on the main page. However our website is focusing on the soundmapping

experience and in this sense the underlying efciency is supported by easy access to the quick- and

anvanced search functions and the small amount of pages- and information content of the website.

The soundscapes will therefore receive more attention and will be more efciently obtained. The

many options concerning IA, mentioned in the prior section, will allow the users to effectively nd

soundscapes.

To support efciency further the map on the front page allows the user to nd soundscapes im-

mediately when accessing the website, this is further promoted by the function of ltering themes

which is mentioned in the structure section.



22

The audio player allows the users to listen to soundscapes inabruptly while navigating the website.

It will allow them to switch soundscape tracks which will increase the efciency due to fewer clicks.

SatisfactionGeneral usability satisfaction consists of many factors: visual, functional, motivational and user-

friendly etc. (2009 Gregersen & Wisler-Poulsen).

The map on the main page will be located in the center of the website with the intention to tell the visitors that this website is about soundmapping. The map is intended to provide the visitors with

motivational experience through a visual interface of soundmapping. The visitors will furthermore

be able to zoom in and out in order to explore specic areas of Copenhagen, we think this will pro-

mote visual satisfaction further. The xed position of the audio player on the bottom of the website

accentuates the navigation and search functions, promoting user-friendly satisfaction by allowing

the users to browse the website without visual disturbance. The audio player will display sound-

waves depending on the “beat” of the tracks. We assume that this will promote another motivation

through technical and visual experience of soundmapping.

Gestalt Principles After having the basic structure in place, we started designing mockups of the website. At this

point we focused on Beecher’s (2009) notion of high visual and low functional delity prototyping

as we anticipated that initiating a functional design through coding at this stage would be prob-

lematic if we identied errors concerning the structure .

The site is divided into ve sections:

The header (light green) - Site ID

The navigation bar (dark green) - Global navigation bar present in all pages, including a search

bar

Content (yellow) - Map (red), user proles, search results etc.

Footer (blue) - Audio player, comment and social sharing option

15 950 15

50

50

15

140x470140x470

610x470

30 30

950x50

950x50 50

50

15

15 950 15

50

50

470

15

460x470460x470

30

950x50

950x50 50

50

15

At rst we made a layout scheme, dening placement and margins. This was used as an underlay

for Photoshop mockups with an eye to gestalt principles. We wanted to ensure that more detailed

contents and items were positioned and shaped in a reasonable manner to provide a high vis-

ibility. We wanted to keep an “airy” feel over the design so we did not relate so much on the law

of closure. However to keep a reasonable structure we used the laws of proximity, continuation

and similarity to accentuate the items that belonged together (e.g icons) to promote readability

(Birkvig 2004) .

layout scheme



23

Photoshop mock-ups of frontpage and search database page



24

Usability-testing While initiating the design process and the more complex usability aspects, we wanted to make

sure that we had also covered the basics concerning navigation and site orientation.

Trunk test We conducted a usability test, taking a point of departure in Krug’s trunk test and his standards of

navigability requirements: Site ID, page name, overview of sections, “you are here” indicators andsearch functionality (2006).

During the usability testing we encountered

a few issues elucidated by the respondent

Camilla. She was initially asked about her

rst impression of the website and pointed

out an issue concerning the navigation ele-

ments: “... I don’t think I would be able to

… nd my way around if there was not this

hover-text saying what it is”.

Choosing icons as a navigation element was

a design decision. By leaving out text indi-

cators and using symbols as navigation, we

wanted to enhance the style and personal-

ity of the website. We were aware that this

could lead to navigation problems. To solve

this we have used hover-text to guide the

user in nding his way. We do not think this

will constitute a problem for our user-group

since they are highly condent when navi-

gating the web, and since the navigation is

only consisting of six sections. Camilla eventually said that the hover-text was enough in this case.

As mentioned in the genre analysis, other soundmapping websites have had problems convey-

ing the meaning of their website. We suggested that a brief tagline could solve this. When Camilla

looked at the mainpage she expressed: “When I see the header, it would be nice if it was larger

‘en alternativ tur i byen’ - ... I didn’t really see it until now.... You will always look for the header

initially, you always try to nd an indicator of what it is about ... then you decide whether it issomething you want to look into ...” . Therefore we have accentuated the tagline by making it larger

and in italic.

Camilla further had a point concerning readability: “I would think that text should be larger, I

think it is very small compared to the headlines. There is a lot of readjustment from one text to

another” . We decided to increase the line-height instead of the font-size as we needed a hierarchy

to guide the user when reading the website.

Camillas nal point was about the search eld. She said that the search icon and it’s use was notclear and suggested that we added “søg” in the eld to promote its intention. A screenshot of the

site before and after the test can be found in appendix 4.



25

Part conclusion When moving into the skeleton stage of the process we could establish some ground rules for how

to shape the content. Although not having much written content on the website we could conclude

that the little written content we had, should be formulated in a clear and concise manner as many

of the replies from the survey concerned complaints of not understanding the concept. Overall our

usability testing gave positive results and the issues that were brought up was rened.

SurfaceIt is not only the functionality itself that present the user with an impression of the website, the

visual expression is also in a high degree crucial for what the website wants to communicate to its

users. In this section we will introduce design theory related to webdesign. We will then connect

this to our visual aesthetics followed by the design evalutation process that lead up to the nal

prototype.

AestheticsLisbeth Thorlacious argues that if a website is aesthetically pleasing or not will always depend on

the taste of the user (Thorlacious 2007). This is one of the reasons why we through careful user-

testing also wanted to evaluate our design to make sure that the aesthetics was pleasing for our

users and in connection with that, our personas.

Thorlacious also discusses new trends in webdesign, one of them is “stilistic functionalism with

trash”, where the web design combines ‘good’ and ‘bad’ taste, or as Thorlacious formulates it:

“It is a taste, that amongst others is present in youth cultures where a great importance is attached to if a

combination of good and bad taste is present, or to be more exact, put demands upon the good taste to be

disrupted by elements of bad taste, this creates an opportunity to articulate new forms of aesthetic experi-

ences” (Thorlacious 1997, p.5).

It is furthermore important that the user is aesthetically disposed to be able to get an aesthetic

experience, since the separate elements of the website must be able to fascinate the user as a part

of the experience and aesthetics of the website. The different elements of the website should there-

fore have an aesthetic code that is directly relatable to the user and users aesthetic disposition

(Engholm 2003). This can again be connected to our personas. Through them we have created a

clear idea of the frames for our aestheticial considerations. It is mainly through persona 1 and 2

we have gotten our aesthetic guidelines and preferences. This ts very well with what Thorlaciousdescribes as a trend of experience oriented websites with younger people as users with a tendency

to move towards a “hyperfunctionalist and minimalistic design”(Thorlacious 1997, p.10-11)

In the genre-analysis we postulated that many soundmapping websites lacks a ‘personality’ in

their design. We have taken this into consideration when creating the design for our website and

user group, this will be further elaborated upon in this next section.

Our Design Aesthetics

Through our personas and expert interviews we created several design examples. These exampleshad a ‘personal’ design aesthetic that was directly linked to our user tests and the conclusions we

draw from them (see Appendix 3).



26

One of our initial ideas was to create a minimalistic design with simple sketched lines. This has

since been conrmed through our user-testing as the right decision. To create a more eclectic de-

sign to accommodate our users, especially persona 1 and 2, we chose to incorporate a vintage feel

to the minimalistic backdrop. The vintage feel respresent Thorlacious notion of ‘bad taste’ while

the minimalism on our website represents the ‘good taste’. Another part of the design is the use of

icons on the navigation bar instead of text, this is also a result of us having a younger user group

with a high appreciation of the aesthetic consideration on a website. We have chosen to not incor-porate a lot of graphic elements or illustrations on the website in order to highlight the design in

our navigation bar and the map.

To further support the vintage feel of the design we used beige as a background color with the con-

viction that it symbolizes gentleness and simplicity 11 which is very suitable in our case. In addition,

by using beige as a blend subordinate color, we could also accentuate the essential parts of the

design - the map. In this connection the maps’ coloured indicators have been used to highlight the

map and to break of the serenity and lack of colour contrast on the page.

We decided to use the serif font Georgia to deviate from the general web standard of using sans-

serif fonts. This further promote a specic style and personal design aesthetic and appeal to perso-

na 1 and 2. We are aware that using serif fonts on the web media can cause a decline in readability

but we don’t estimate this to be an issue due to the small amount of text content on the website,

and considering that the target users are young and don’t have any specic disabilities. Moreover, we only used two types of fonts on the website and the different sizes of the fonts are limited to

ensure that it will not disrupt attention from other content. Georgia is a web-safe font12 and will

ensure that the visitors will be able to view the site as intended.

Design Evaluation An evaluation of our initial design examples by one of our experts, Io, gave us more ideas on how

to relate our design to our user group. One of the primary things that we wanted to focus on was

how to keep the style of the website minimalistic, graphic and still keeping within the vintage-

perspective. This was also something our expert, Io pointed out: “The map is really nice. I like that graphic style you have the best. I think the black/white things [the icons] in grey with the vin-

tage/clipart feel are great”.

Another aspect of the design that was discussed in this user testing is to what extent different

colors should be incorporated in the website, without compromising the design aesthetics. “ If

colors were to be incorporated they should be on the map to utilise them in the best way. They

should not be overpowering or disrupt your attention”. We also asked our other expert, Ole,

about this dilemma and he agreed: “keep it simple so that you’ll be able to relate to the colors that

is indicated on the map”. Based on these statements we decided to limit colors on the website to

the map and in that way making the sounds the center of attention.

11 http://desktoppub.about.com/cs/colorselection/p/beige.htm

12 http://www.w3schools.com/css/css_websafe_fonts.asp



27

These implications were incorporated in our design test which was conducted with Camilla, a

researcher at DR. She was very positive concerning the design:

“I think it suites them [the user group] it’s very soft and vintage...and in contrast you have the

audio player, I think the design and layout is really good”.

She further agreed on the choice of color:

“I actually like it, normally I think it’s boring with monochromes, but I think it’s really suits well

in relation to this concept”. Thus, the color scheme proved to be a success.

Browser compatibility and size We decided to design the website with a xed layout as we argued that a predictable layout and

easy control of the functionality (maps) and images would promote a “view-friendly” website. We

were aware of the disadvantages of having a xed layout, for instance the unpredictable ow of

text elements, we do however have a very small amount of text content on the website. Further we

based the size of the xed layout (980x700 pixels) on statistics13 about danish users’ screen-sizes

which ensured that the majority of users will not experience any difculties in viewing the content

of the website. The website is optimized for Google Chrome and Safari.

Part ConclusionIn order to create a design that appeals to our user group we wanted to keep in line with the

minimalistic and hyper functional approach, in that way relating our website to our young user

group. The design test of our inital design examples helped us to select and narrow the design into

a specic style based on the user group. We decided to make a design with a vintage feel to create

a more inviting atmosphere and to disrupt the minimalism, but still giving room for the sound-

scapes to permeate.

further workSince we were designing this website from scratch our available resources were limited to our abil-

ity to nd people in our network who would contribute with valuable input, and our ability to ana-

lyse existing soundmapping websites for inspiration and improvement. A closer cooperation with

people actually soundmapping Copenhagen would give new insights and perspectives. If the site

was to be implemented it would also be optimal for a group of active soundscape artists to have

some kind of ownership of the site, perhaps as moderators, in order to guide the development of

the content. Because content is imperative to kick start the website, renowned artists could be

invited to contribute sounds to the website to promote the initial diffusion rate and to draw peopleto the website.

Although the nal website is intended to provide the user with many options concerning data-

base functionality, uploading and downloading sounds and so on, the functionality and interac-

tion thereof is only ctitious and accommodated through static webpages (with descriptions and

images). This is due to the course requirements which limited us to the use of the static coding

languages (X)HTML and CSS. Some of the functionality, for instance the comment eld and the

dynamic indicators on the front page map have been coded in (X)HTML and CSS, this would how-

ever be better to code in Javascript or Flash. In addition the database would require programming

skills such as MySQL or XML.

13 http://www.fdim.dk/statistik/teknik/skaermoploesning



28

A suggestion for further development from two of our experts, was to develop a smart phone ap-

plication of KBH lydskaber, that would allow people to draw a soundscape route through the city

or use geo-location to have soundscapes played from their exact position on the go.

ConclusionOur outset was to design a soundmapping website for Copenhagen. We found inspiration in exist-

ing soundmapping websites and reected upon what we could do better. Through the survey and

expert interviews we wanted to dene our user group in order to create a foundation on which we

could base our structure and design.

To satisfy the users emotional needs and to generate user value, we have incorporated experience

design and persuasive design into the concept. Through the user input we identied a demand for

a community. The different personas complement one another through their different needs and

user behaviour, they fulll the necessity of supplying the website with material, diffusing the web-

site through social sharing and by ensuring a certain quality of the content. In order to facilitatethe nding of sound content, a combined top-down and bottom-up information architecture was

essential. This structure complements the users varying browsing behaviour.

This leads us to conclude that we through a persistent use of our personas and experts have done

our best to create a site that will appeal to the suggested user group both functionally and aestheti-

cally. Having considered how to launch an innovative site, we believe KBH lydskaber could have

the potential to become a self-sufcient creative community supplying Copenhagen with exiting

soundscape perspectives.

Our nal prototype.



29

List of references About.com, no date available. Color Symbolism and Choosing Colors [online] Available at:

<http://desktoppub.about.com/cs/colorselection/p/?once=true&>[Accessed 12 December 2010].

Barbosa, A., (2003). Displaced Soundscapes: A Survey of Network Systems for Music and Sonic

Art Creation. Leonard music journal, Vol. 13, pp. 53–59.

Beecher, F., 2009. Integrating Prototyping Into Your Design Process [online] (updated Septem-

ber 22 2009) Available at: <http://boxesandarrows.com/view/integrating> [Accessed 12 Decem-

ber 2010].

Birkvig. H., 2004. Sådan laver du smukkere grask design. 2ed. Forlaget Grask Litteratur: Co-

penhagen.

British Library, 2010. UK Soundmap - Map fusion [online] Available at: <http://sounds.bl.uk/uk-

soundmap/fusionmap.aspx> [Accessed 12 December 2010].

Bødker, S., Christiansen, E., 2006, Computer support for social awareness in exible work , Com-

puter Supported Cooperative Work, vol. 15 nr. 1, s. 1-28.

Crowston, K. Kwasnik, B.H., 2004. A framework for creating a facetted classication for genres:

Adressing issues of multidimensionality. HICSS ‘04: Proceedings of the 37th Annual Hawaii In-

ternational Conference on System Sciences (HICSS’04).

Department of Sustainability and Environment, 2010. Tool - Snowball Sampling [online] (up-

dated September 07 2007) Available at: <http://www.dse.vic.gov.au/dse/wcmn203.nsf/linkview/

d340630944bb2d51ca25708900062e9838c091705ea81a2fca257091000f8579#1> [Accessed 12

December 2010].

Engholm, I., 2003. WWW’s designhistorie – website udviklingen i et genre- og stilteoretisk pers-

pektiv. København: IT-Universitetet (Ph.d.-afhandling).

Engholm, I. Salamon, L., 2005. Webgenres and -styles as socio-cultural indicators- an experi-

mental, interdisciplinary dialogue. In proceedings in the making. p. 1-6.

Fogg, B. J., 2003. Computers as Persuasive Tool in Persuasive technology - Using computers to

change what we think and do. Morgan Kaufmann Publishers.

Foreningen af danske interaktive medier, 2010. Skærmopløsning [online] (updated October 2010)

Available at: <http://www.fdim.dk/statistik/teknik/skaermoploesning>[Accessed 12 December

2010].

Garret, J. J., 2003. The Elements of User Experience, AIGA/ New Riders.

Gregersen, O. Wisler-Poulsen, I., 2009. Usability: Testmetoder til mere brugervenlige websites

på internettet . Forlaget Grask Litteratur: Copenhagen.



30

Hansen, J. H., 2005. Motiverende design - sådan ændrer du brugernes adfærd på hjemmesiden.

Frydenlund: Copenhagen.

Jensen, U. et al., 2001. Tekstens disposition og byggeklodser, i Skrivgodt.dk - sådan skriver du

gode tekster til internettet, p. 62-78.

Krug, S., 2006. Don’t make me think. A common sense approach to Web Usability, 2. ed., p. 130-

160. New Riders: Indianapolis.

Liebowitz, S.J. Margolis, S.E., 1998. Network Externalities (Effects), New Palgrave Dictionary of

Economics and the Law, MacMillan.

London Sound Survey, 2010. London Sound Survey - Listen Up! London life in sound [online]

Available at: <http://www.soundsurvey.org.uk/> [Accessed 12 December 2010]

Morville, P. Rosenfeld, L., 2007. Information Architecture for the World Wide Web. 3rd ed.

O’Reilly Media: Sebastopol.

NYSoundmap, 2006. NYSoundmap [online]. Available at: <http://fm.hunter.cuny.edu/nysae/ny-

soundmap/> [Accessed 12 December 2010]

Personacreation, 2008. Buyer Persona Creation - how to develop your goal-centred customer

strategy [online] (updated April 21 2008) Available at: < http://www.personacreation.com/persona_

creation/2008/04/beyond-fake-per.html> [Accessed 04 November 2010].

Rahmaswahmy, V., 2003. The new frontier of experience innovation [online] (updated July 15

2003) Available at: <http://sloanreview.mit.edu/the-magazine/articles/2003/summer/4442/the-

new-frontier-of-experience-innovation/> [Accessed 12 December 2010]

Rasmussen, V. C., Fischer, H. L., 2008. Målgruppeanalyse – lær din målgruppe at kende, Køben-

havn: Nyt Teknisk Forlag.

Reverberant, (no data available) Soundmapping [online] Available at: <http://www.reverberant.

com/sm/> [Accessed 12 December 2010]

Rogers, E.M., 1983. Diffusion of innovation. 3rd ed. New York Free Press: New York.

Sharp, H. Rogers, Y. Preece, J., 2007. The process of Interaction Design in Interaction Design -

beyond Human-Computer-Interaction 2. ed., p.412-465. John Wiley & Sons.

Sound Around You, 2009. Welcome to Sound Around You [online]. Available at: <http://www.

soundaroundyou.com/> [Accessed 12 December 2010]

Soundcities, 2010. Soundcities [online] (updated 2010) Available at: <http://www.soundcities.

com/index.php> [Accessed 12 December 2010].



31

Thorlacius, L.., 2007. Æstetikkens rolle i webdesign. Nordicom Review 28(2007) pp. 63-76.

W3schools, 2010. CSS Web Safe Font Combinations [online] Available at:

<http://www.w3schools.com/css/css_websafe_fonts.asp>[Accessed 12 December 2010].

Wikipedia, 2010. Prosumer [online] (updated December 12 2010) Available at: <http://en.wikipedia.org/wiki/Prosumer> [Accessed 12 December 2010].

Wikipedia, 2010. Soundscape [online] (updated November 15 2010) Available at: <http://

en.wikipedia.org/wiki/Soundscape> [Accessed 12 December 2010].

Appendix

Persona moodboards appendix 1 a-c Wireframes appendix 2 a-d

Design examples appendix 3

Screenshot of front page before and after usability and design test appendix 4

Site presentation appendix 5



32

N o t t e c

h n

i c a

l , b u t

i n t e r e s t e

d .

P a s s i v e ,

s h y u s e r w

h o

d o n o t t

h i n k a n y o n e

w o u

l d l i s t

e n t o

h e r s o u n

d s

i f s

h e u p

l o a

d e

d t h e m .

I n t e r e s t e

d i n t h e a t m o s -

p h e r e ,

L i k

e s t o

l i s t e n t o t h e s o u n

d s

o f o t h e r c

i t i e s .

T h e s o u n d

s b r i n g s

b a c

k

m e m o r i e s

f o r

h e r .

A G E :

2 1

L I V E S I N :

A d o r m

i n A m a g e r

O C C U P A T

I O N :

S t u

d i e s s p a n

i s h a t

t h e u n

i v e

r s i t y

, w o r k s

i n a c a

f é .

A C T I V I T I E S :

C a

f é s ,

t r a v e

l l i n g ,

k n i t -

t i n g

R E A D S : B

l o g s ,

p o e t r y

L I S T E N S

T O :

M a n u

C h a o ,

r e g g a e .

L I N

E T H

E S H Y T R A V E L L E R

“ E s c a p

i s m

f o r t h e m a s s e s

”

“ Y o u c a n c

l o s e y o u r e y e s a n

d d r e a m

y o u

’ r e s o m e w

h e r e e l s e

”

1a



33

C r e a t i v e a

n d q u a l i t y o r i e n t e d c o n c e

r n i n g b o t h t e c h n i c a l i s s u e

s

s u c h a s t h

e s o u n d , r e l e v a n t t a g g i n g

a n d d i f f e r e n t f u n c t i o n s o

n

t h e w e b s i t e ,

b u t a l s o o t h e r s o c i a l a s p e c t s s u c h a s i n t e r a c t i o n

w i t h o t h e r u s e r s .

H a s a n i n t e r e s t i n

l o c a l c u l t u r e a n d c r e a t i v e

c o m m u n i t

i e s .

W a n t s b o t h c o n t e x t a

n d s o u n d .

J A K O B

T H E A R T Y M I X E R

A G E : 2 8

L I V E S I N :

a n a p a r t m e n t i n V e s t e r -

b r o O C C U P A T I O N : u n e m p l o y e d , w o r k -

i n g o n a r t - p r o j e c t s .

A C T I V I T I E

S : N e t w o r k i n g , m a k i n g

m u s i c , c o n c e r t s , v e r n i s s a g e s .

R E A D S : V

i c e m a g a z i n e ,

H e n r y

M i l l e r .

L I S T E N S T O : ” i t d o e s n ’ t m a t t e r ,

y o u h a v e n

’ t h e a r d o f t h e m ”

“ . . . e s p e c i a l l y i f t h e r e

w a s m o r e c o m m u n i t y a b o u t i t ”

“ I u s e s o u n d s f o r t h e a t e r , s o u n d i n s

t a l l a t i o n s a n d s a m p l e s ”

1b



34

U s e s t h e

w e b s i t e i n a p r o f e s s i o n a l c a p a c i t y ,

i . e .

f o r m o v -

i e s , g a m e

s r a d i o , e t c .

W a n t s q u i c k

a n d e a s y l a y o u t .

I n t e r e s t e d i n t h e s e a r c h f u n c t i o n a n d s o u n d q u a l i t y .

D o e s

n o t c a r e a b o u t t h e c o n t e x t , t h e s o u

n d i s t h e m a i n o b j e c -

t i v e . M I

C H A E L

T H E P R O F E S S I O N A L U S E R

A G E : 3 4

L I V E S I N : L a r g e a p a r t m e n t i n V a n -

l ø s e

O C C U P A T

I O N : F r e e l a n c e s o u n d

t e c h n i c i a n

A C T I V I T I E S : W O R K ,

W O R K ,

W O R K

a n d s p e e d w a y .

R E A D S : m

u s i c m a g a z i n e s .

L I S T E N S

T O : t e c h n i c a l g u i t a r i s t s ,

m e t a l l i c a .

“ I w a n t a s i m p l e l a y o u t : t i t l e , m a p , m e n u a n d a g o

o d s e a r c h f u n c t i o n ”

“ S o u n d q u

a l i t y a n d r e l e v a n t t a g g i n g

i s e s s e n t i a l ”

1c



35

2a



36

NAVIGATION

AFSPILLER

BYKORT

FEED

NAVIGATION

AFSPILLER

VELKOMMEN OG VISION Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis

lectus quis sem lacinia nonummy. Proin mollis lorem non dolor. In hac habitasse platea dictumst.

Nulla ultrices odio. Donec augue. Phasellus dui. Maecenas facilisis nisl vitae nibh. Proin vel est

vitae eros pretium dignissim. Aliquam aliquam sodales orci. Suspendisse potenti. Nunc adipisc-

ing euismod arcu. Quisque facilisis mattis lacus. Fusce bibendum, velit in venenatis viverra, tellus

FAQ Lorem ipsum dolor sit amet,

consectetur adipiscing elit. Fusce

quis lectus quis sem lacinia non-

ummy. Proin mollis lorem non dolor.

In hac habitasse platea dictumst.

Nulla ultrices odio. Donec augue.

Phasellus dui. Maecenas facilisis nisl

vitae nibh. Proin vel est vitae eros

HJÆLP Lorem ipsum dolor sit amet,

consectetur adipiscing elit. Fusce

quis lectus quis sem lacinia non-

ummy. Proin mollis lorem non dolor.

In hac habitasse platea dictumst.

Nulla ultrices odio. Donec augue.

Phasellus dui. Maecenas facilisis nisl

vitae nibh. Proin vel est vitae eros

velkommen og info

2b



37

NAVIGATION

AFSPILLER

TAGCLOUD

SØG GO

AVANCERET SØGNING

dropdown menu

TAGS - KATEGORIER (POETISKE)

TID - STED

BITRATE - KVALITET

KUNSTNERNYESTE

MEST DOWNLOADEDE

MEST AFSPILLEDE

FLEST KOMMENTARER

FLEST POINTS

2c



38

NAVIGATION

AFSPILLER

NAVIGATION

AFSPILLER

NAVIGATION

AFSPILLER

TAGCLOUD

SØG GO

SØGNINGEN HAR GIVET X RESULTATER

NAVN

ANTAL UPLOADS

ANTAL AFSPILNINGER

ANTAL DOWNLOADS

SEND BESKED

REDIGER PROFIL

UPLOADS

søgning og database efter søgning

prolside

2d



39

a b c d e f g h i j k l m n o p q r s t u v x y z æ ø å

A B C D E F G H I J K L M N O P Q R S T U V X

Y Z Æ Ø Å

a b c d e

f g h i j k l m n o p q r s t u v x y z æ ø

å

A B C D E F G H I J K L M N O P Q R S T U V X -

Y Z Æ Ø Å


A B C D E F G H I J K L M N O P Q R S T U V X Y Z Æ Ø Å


A B C D E F G H I J K L M N O P Q R S T U V X

Y Z Æ Ø Å


A B C D E F G H I J K L M N O P Q R S T U V X Y Z Æ

Ø Å

a b c d e f g h i j k l m n o p q r s t u v x y z æ ø

å

A B C D E F G H I J K L M N O P Q R S T U V X Y Z Æ Ø Å

b r ø d t e k s t

o v e r s

k r i f t

i k o

n e r

t e k s t o p

s æ t n i n g

K o r t

L y d b ø l g e r

3



40

4



Site description

The navigation bar contains the following icons: home, info, library, upload, login and a simple

search bar with a search icon that doubles as a submit button. All links in the navigation bar have a

hover text explaining what they lead to. The current location on the web site is indicated by adding

a drop shadow to the relevant icon. The icons link to different sections of the website, additionally

the login icon rst shows a login pane that then leads to a prole page.

Entering text into the simple search eld and submitting it (or clicking on the search icon), will

show a search result page. As this is a mockup of a real site, the search results shown will be for the

term “Amagerbrogade” no matter what is entered into the original search eld. The Library page

contains a more advanced search form allowing to customize search results. Again, submitting that

search will lead to the same mockup search result page for “Amagerbrogade”. On the search result

page, one can click on the prole icons for each search result, which should link to the prole page

for the user that uploaded the given sound clip. (The mock up always links to the same user prole,

Jakob.)

There are in total 7 different pages. For simulating different pop ups and changes without using

Javascript, Flash or server side scripting, each page have one or more variants in separate html

les. For instance, the categories selectable on the front page link to versions of the page showing a

different map image. The player at the bottom also has a comment button that opens a drawer un-

derneath the player containing the comment eld and comments from other users. In the mockup

this is implemented as a link to an identical page with the comment drawer folded out. With all

variations representing different states, this brings the total number of html les to 18. For a func-

tioning site the separate states would not be implemented as separate html les, but it’s a way to visualize parts of the functionality given the constraints set by the static nature of the mockup.

During the development of the site we encountered the following issues:

* The search elds already contain a value explaining what to enter in them. We had originally

planned to use the “placeholder” attribute which only shows the text in the search eld when it’s

empty, but it is not a valid XHTML 1.0 strict attribute. It is possible to implement similar function-

ality without using the placeholder attribute, but that would require some Javascript coding, which

we decided not to use. Thus we decided simply to enter the text into the “value” attribute.

* We have replaced the background and frame of some form elds with a custom image. This

causes a problem on the upload page in the larger text area tag, as Safari and Chrome by default

allow resizing the eld by dragging in the lower left corner. If this is done on our site, the form eld

will resize, but the background will not. It is possible through CSS to disable this behaviour, but it

is not available in CSS level 2.1 which we validate our design against.

* The pages link to a favicon, or a sortcut icon. But since the pages will be viewed from a CD

ROM or a local lesystem, the icon will not show up, as both Chrome and Safari ignore favicons

comming from the le:// URI scheme.

5

copenhagen soundscapes

Documents