Docstoc

contents contents

Document Sample
contents contents Powered By Docstoc
					                                      contents
                                    contents

concept framework                          2

team’s fishbone                            4

about ENVIRONET                            5

how we got here                            6

concept map                                8

scoping the project                       10

managing ENVIRONET                        14

users test (part 1)                       16

paper prototype test                      18

users tests (1): results                  20

mobile interface prototype test           22

interface design                          24

information architecture                  26

ENVIRONET website                         28

ENVIRONET website test                    29

report on interface design                30

technical specification                   36

database and middleware scripting         42

about ADHOCIA                             46




                                                 1
                                        concept framework

    Digital Media Beyond Cyberspace
    How can we add a virtual dimension to the physical world to create a new, collaborative, accessible
    and democratised media space that intersects both the real and cyber worlds to enhance peoples’
    experience of their environment?

    Cyberspace is a term first coined by William Gibson in his novel “Neuromancer” to refer to a near-
    future computer network where users mentally travel through matrices of data. The term is now
    used to describe the Internet and the other computer networks. However, with
    increasing development and use of wireless, ubiquitous devices, augmented and enhanced
    reality, convergence and the ‘Internet of Things’ utilising RFIDs, ‘Cyberspace’ is going to
    permeate ‘Real’ and ‘Social’ space. This may create an exponentially greater effect on our lives,
    growing from ever encompassing media forms of TV, then Internet, and next Beyond
    Cyberspace: the Internet of the environment.

    “In the days before widespread literacy...Information did not come to people; people had to go to
    information (Cathedral example)...Digital Networks finally make it possible to blow up the link
    between rich information and its physical carrier... the traditional link- between the medium and the
    message is broken” 1

    Physical locations have information embedded to them. This information is authored, accepted,
    directed and allowed by its ownership. Digital networks/media enable to create, storage and retrieve
    information related to individual/collective experiences linked to physical location/places without
    damaging its ownership. This allow individuals to virtually own their location/space
    related experience and sharing it with others. Physical location/places and their messages/
    information are no longer restricted to the laws of nature time/shape/space but enriched by
    individuals’ experiences.

    Mission Statement: To create an “Internet of the environment” that aims to be as open and
    accessible as the Web Internet.

    This project will work towards creating a democratisation of the environment, differentiated from the
    corporate, mediated environment of the city space. It will take digital media beyond the confines of
    the computer or ‘virtual’ space and incorporate it into the ‘Real’ environment. This will create a
    collaborative virtual dimension within the Real World by attaching digital data to physical locations
    using GPS and mobile technology.

    Target Audience at this stage are early adopters of mobile technology who utilise GPS enabled
    devices, who also seek an enhanced sense of autonomy, adventure and spontaneity within their
    environment.

    The application will enable people to associate (bookmark or ‘tag’) physical locations with digital
    information, which will be made universally accessible. Other users with GPS enabled devices can
    receive the digital data that has been left in a specific location (be it a message in text, a picture, a
    video or sound clip).

    One specific scenario involves people using this ‘Internet of the Environment’ to leave specific
    information about the place (pointing out things of interest, an interesting story about
    something that took place there, a picture of there from a different time, a clip of video created
    there that says something about the place, an audio file which compliments the surrounding space
    and perhaps info about where are other relevant or connected places). Other users who pass

2
through that space can then have their experience of the place enhanced with this additional media.

Users don’t find this information on the Internet, they come across it as they move within the
physical world by receiving it via their everyday devices such as mobile or PDA with GPS.

This adds a sense of adventure, mystery and unpredictability to the physical world by
incorporating a dynamically changing and evolving digital dimension.

-----------------------------------------------------------------------
References: 1 Philips Evans & Thomas S. Wurster (2000)“BLOWN TO BITS. How the new
economics of information transforms strategy”. Harvard Business School Press.




                                                                                                      3
                                                team’s fishbone

    Focusing five individuals to work collaboratively is not an easy task. Each member has individual
    values, objectives, visions, different personalities, cultural backgrounds, different defense
    mechanisms and her/his own ways of interacting in a team. In order to focus the team to
    develop the project successfully we used the Fishbone exercise. The Fishbone exercise enabled
    us to focus our unstructured collection of our individual characteristics in a form of different
    steps that lead to the completion of our project.




4
                                    about ENVIRONET

The Concept in Brief

“EnviroNet” is a Web-based application for location-aware (e.g. GPS enabled) mobile phones
and devices. It allows people to attach or to search for digital data that is relevant to their own
community and which is linked to physical locations.

Users can ‘search’ for data by inputting their community’s descriptor or by using keywords.
Leaving the application running on their mobile device, it alerts them when they pass a relevant
‘tagged’ location. Users can also upload data by ‘tagging’ specific locations, adding their own
messages, keywords and community descriptors to the system, to be subsequently shared with
other users.

EnviroNet is ultimately intended to create multi-layered community networks in which digital
media is superimposed over an urban area. Our aim is to enrich and enhance peoples’
experience of their environment, as well as to assist newcomers to various communities. We
also envisage EnviroNet helping to educate the many different types of people that inhabit the
urban environment about each other.




                                                                                                      5
                                             how we got here

    The Journey

    During our first brainstorming session, all members of the team wrote their areas of interest
    on a large whiteboard, we then linked these areas to one another until we had a large network
    diagram covering many aspects of interactive media. We then identified areas where our
    interests converged. One particular ‘node’ was that of ‘democratised’ media, which in our
    definition, includes software and applications which are freely available for anyone to use, to
    enable them to create their own digital media content.

    In early June, we came up with the idea to do a ‘Locative Media’ project. Although at this stage,
    we didn’t know it was called that, or that anyone else had done anything like this. We simply all
    agreed the idea of linking digital information / data / media to physical locations was potentially
    very
    exciting. We termed our project ‘Digital media, beyond cyberspace’, with the aim of creating an
    ‘Internet of the Environment’. Our project manager, Christiana then came up with the name
    ‘EnviroNet’.

    Early concept research revealed there have been various projects involved with linking digital
    information to physical locations. These include Locative Media projects / platforms such as
    ‘Urban Tapestries’, ‘Aware’, ‘Headmap’ and ‘Equator’ and Location-Based Services such as
    ‘Dodgeball’, ‘Jambo Networks’ and ‘Plazes’.

    We realised we were going to need to be very specific to differentiate our project from others of
    this type. We decided to focus on the local area of ‘Elephant & Castle’ possibly to do something
    related to the re-generation project. We also looked at other existing locative projects, to see
    how ours could build-upon or differ from them. We found that most weren’t ‘spontaneous’ in
    the way we initially envisaged ours to be – i.e. that the user is alerted unexpectedly when they
    pass though a location ‘tagged’ with digital data, rather than having to specifically look things
    up wherever they are. We also found that most were text-based, so we sought to combine other
    media if possible (images, then possibly video, audio).

    Technical realisation of this type of media was the next area to research. We had to identify the
    mobile devices (i.e. PDAs, Mobile phones, laptop or tablet PCs, Head-mounted displays etc), the
    coding & applications (ranging from platforms such as ‘Mobile Bristol’ and ‘Geonotes’ to scripting
    languages such as XML, GML and RDF) and location-sensing technologies (such as GPS, GPRS,
    WiFi, Bluetooth) that could potentially be used to create our product. However, accurate and
    affordable location sensing is something still being developed, and can become highly technical
    and beyond our practical means.

    During our Usability tutorial with Ella, who is very knowledgeable in this area, suggested we
    focus more on the user-experience, rather than the technical aspects of this problem. She said
    computer scientists were working on many projects to resolve these technical issues. Ella
    suggested we could be more effective in differentiating out project from other ‘Locative media’
    projects by focussing more explicitly on the users, and by asking questions such as ‘What does
    it give people that they need?’ and ‘How does using it affect their behaviour?’ She suggested
    we develop an open-ended model, conducting in-depth user studies to get an array of different
    uses and generate new ideas for use. Ella also suggested a simulation might be worth doing, as
    otherwise we may get too diverted into the projects technical implications.


6
We then thought about many different possibilities for our product, including ‘virtual’ notice
boards and locative-mediated bus stops. We were still undecided, when we went to meet Lee
from ‘Headshift’. He spoke about their work, and enthused about social software and social
‘tagging’ (‘folksonomies’) which he argued as a means of putting people back in control of
the powerful tool of language. He showed us Headshift created site ‘Brixton links’, which uses
geoURL to dynamically create a site with RSS-fed content all about the Brixton area. He also
talked about the idea of maps with ‘hubs’ of different communities ‘hotspots’ overlaying each
other. He suggested creating the application to work on existing mobile devices, to make it
more relevant than a complete simulation.

We liked this idea, and were already very interested in the concept of social tagging, Juan
specifically wrote about it thesis. We decided we’d like our product, which was already
intended to host user-created content, to combine the facility for ‘tagging’ to allow users to
categorise their own entries according to their own keywords. Our coder, Markus, set about
creating a system where this could be done.

We then had a talk with Russell Merryman, formerly of the BBC’s Interactive TV department,
and currently working on Al Jazeera’s Interactive TV. He talked about issues with setting up
Locative mobile services such as the cellular ops tight control over the medium, which
creates difficulties for developers due to the lack of interoperability between networks /
devices. Of creating a simulation, he said faking the real thing in order to prove our concept was
an acceptable, and often practised in industry method. By demonstrating the concept without it
being tied to one proprietary system would mean there would be more companies the product
could potentially developed by. He also stated that the customer ultimately dictates what the
providers have to do, so if something is created that people really want to use, the providers
have to adapt to it.

Our solution was to build it as a real dynamic Web application, but to simulate the GPS
location-sensing functionality. This would prevent it from being diverted by the overly
technical - which could potentially detract from our concept focus of user-centred design, and
take most of our time and resources. This would also to leave it as a more flexible application,
which could be used by anyone willing to link it to the location-sensing technologies.
Interface designer Marcela was also planning to design it using XHTML and CSS, to leave it as
open as possible, and so it would work on Web browsers on mobile devices, rather than needing
a special application installed for it to run. As a team, we had decided it would be an
application for mobile phones, rather than less common, more-expensive mobile devices such
as PDAs, although it would work with these, or any other Web-enabled mobile device.

We decided to focus our user research on the Latin American community in Elephant & Castle,
as we wanted to do something local, which would make it more unique to us, there are many
Latin people in the area and we also have Spanish and Brazilian Portuguese speakers on our
team. They would be one ‘example’ community to focus on for our research and user orientated
product development, although our overall concept was still to create the product to be used by
any community. An early user-scenario to demonstrate the concept was that of someone from a
particular community arriving in a new area (such as a refugee), and using our product to find
out about things of interest and relevance the area.




                                                                                                     7
8
      Locative
    Installation
                   concept map
 concept research blog
http://conceptresearch.blogspot.com/




                                       9
                                     scoping the project

     Project name: ENVIRONET

     Initial statement of what we want to make:

     How can we add a virtual dimension to the physical world to create a new, collaborative,
     accessible and democratised media space that intersects both the real and cyber worlds to
     enhance peoples’ experience of their environment?

     Online project type: Internet/Mobile phone, Internet

     Market Sector: Social/Public

     Project bias

                                                           Importance        Size of section (large,
                                                            Ranking             medium, small)
                                                       (MoSCoW* principle)
         Company profile                 -                      -                       -
           Information                  Yes                    M                     large
           gathering**
           Information                  Yes                    M                     large
         dissemination**
              Retail                     -                      -                       -
        Database access/                Yes                    M                     large
          development
       Online transactions               -                      -                       -
     Others:                            Yes                    S                    medium
     Self Regulation
     System

     *MoSCoW = (M) must have, (S) should have, (C) could have and (W) want it to have
     **Information gathering and information dissemination will be between users only (information
     sharing)

     Browser/platform expectations
     Browsers: Internet Explorer, Safari, Firefox (website)
     Platform: Cross Platform,
     As many mobile phones models as possible.
     Brands: Nokia, Samsung, Motorola, Sony Ericsson

     Benefits/achievements wanted

     For the team: Design and develop a dynamic website that can be accessed by mobile phones
     and has the functionality of what the ENVIRONET definition describes.
     For the users: Have the option to retrieve and post messages using the location aware ENVI-
     RONET system. Get the chance to be authors and clients of the system and consequently to
     have an enhanced experience with their physical environment.
10
Access and use

The audience/users: Ideally is general public. In order to prove the concept we are using the
scenario with the Latin ethnic groups in the community of Elephant and Castle. Therefore the
target audience is Latin American people that live in UK.

Media mix

                                           Mobile Site                    Promotional Site
              Text                             90%                              50%
            Graphics                           10%                              40%
           Animation                             -                                -
             Audio                               -                                -
             Video                               -                              10%


Content

Written: Written content, i.e. messages, will be provided by people that belong to the target
audience.
Database: Build from scratch
Graphics: Logo and relevant graphics to be created from scratch
Video: Recorded and edited by the team

Time for development

Deadline: 24/08/05

Special considerations

Database development
Specialist in the team: Yes (Markus)

Dynamic pages required
Specialist in the team: Yes (Markus)

Testing strategy

Focus Group: Latin American Group (Carnaval del Pueblo)
Usability testing: Paper Prototype Test, Prototype Test

Budget

Since there is no client or profit for the project there is no budget. However the team will share
possible expenses of the project. The expenses must be no more than 100 pounds.




                                                                                                     11
12
     scoping the project
     timetable samples




13
                             managing ENVIRONET

     Team Culture

     ENVIRONET is the result of the collaboration between the five members of the team
     ADHOCIA. The project took place in a ‘team culture’. A good ‘team culture’ is defined by
     England and Finney in their book Managing Multimedia as a collaborative environment where all
     members are pulling together to achieve well defined tasks, respect each other’s skills, share
     success and failures and where there is mutual support when needed.

     ADHOCIA was characterised by a good team culture since it enclosed all the elements
     mentioned above. Each team member had well defined individual tasks that led to the
     implementation of the project. Because of the nature of the project the management of the
     team was not hierarchical, each member had individual tasks that performed with the freedom
     and the responsibility of her/his own decision-making. For that reason, respect for each other’s
     skills had been achieved. However, the team members had the chance to suggest ideas and
     comment on each other’s work during the meetings, allowing this way the team to discuss and
     develop the project collaboratively. Consistent group meetings were essential for maintaining
     a successful communication between all team members and consequently achieving a shared
     responsibility for success and failures in the project.

     Management Style

     The management style followed in this project was a combination of the Collaborative and the
     Delegation style. The Collaborative style occurred after recognizing that as a project manager I
     did not have the right experience, knowledge and skills to take decisions for the different
     specialized aspects of the project so I asked for the team to express their opinions to bring
     together the experience required before reaching certain decisions.

     The Delegation style was followed by breaking down the tasks of each       member directing her/
     him in a way to the right track for the completion of the project but at   the same time
     transferring her/him the power of decision-making within her/his role.     However, the delegation
     allowed by the individual members was controlled by the power of the       collaborative decisions
     the team made as a whole during the meetings.

     Meetings

     The team-meetings took place every Wednesday. These meetings’ purpose was mainly to
     evaluate the progress of the project and outline the next steps.
     Methodology: A day before each meeting the main points to be discussed during the meeting
     were publish in the group’s Blogger (also emailed to the members) in order to keep the meeting
     focused.
     Objectives: During the first few meetings I realised that it was very hard to keep the meetings
     focused resulting to miss discussing important issues. The method of publishing the main points
     the day before overcame the problem and kept the meetings focused to the main points. Also,
     the members had the chance to think and prepare for the discussion points before the meeting
     or to suggest any other issues they would like to discuss.

     In the last month we had group meetings more often (at least twice a week) since it was the
     most productive period of the project and more meetings were required to make sure that all
     team members were pleased with the development of the project.

14
Methodology: The main points of what was discussed and all decisions made during the
meetings were published in the team’s Seedwiki making it available to the team for future
reference.
Some members of the team also met to work together when they had to carry out tasks
collaboratively. It is also worth mentioning that many members met ‘virtually’ using online
messenger services to test and evaluate each other’s first developed tasks.

Timetabled Tasks

Methodology: Each member was given a schedule with her/his own individual timetabled tasks.
The members presented to the team the development of their tasks during every meeting.
Objectives: This method allowed the team to see and evaluate the development of the project
as a whole (not just from the scope of their own role) and work collaboratively to overcome any
difficulties appeared.

Seedwiki

Team’s Seedwiki: http://www.seedwiki.com/wiki/major_project_group_1/major_project_group_
1.cfm

Seedwiki is a web tool that allows you to organize and publish your content for a wide audience
by using your browser. In this project Seedwiki was used to organize and publish the content at
the time the team was producing it. This way the team had access to the process of the project
at all times. The development of the project was saved and organized in the team’s Seedwiki.
This allowed the team to see the journey of the project, track its progress and access informa-
tion discussed in meetings.
The project’s Seedwiki can also be used as a reference for the team in their future projects.

Assets Registration

http://www.maimm.arts.ac.uk/~group1/assets/assets.html

Methodology: All assets produced for the final product (mobile site version, promotional website
and projector file) have been registered using Excel and published as a web page. Each asset
was organized by its name, size, format, date created, resolution, location and description. The
assets have been arranged alphabetically.
Objectives: Registering the assets is essential in multimedia projects because it helps members
locate a file, reproduce or change it easily avoiding time consuming searches. Also, colour
coding the different file formats and locations makes the essential information eye catching.




                                                                                                   15
                                  users tests (part 1)

     Carnaval Del Pueblo ‘Places of interest’ Questionnaire
     Usability Exercise 1

     Tagging Exercise & Target Group

     Carnival Del Pueblo, Burgess Park, Elephant & Castle 07.08.05

     For the purposes of our user centred development and user testing, we chose to work with one
     specific community, to focus on how they might use the application influence development.

     We chose Latin Americans in London as our target group as there is a large Latin community
     in Elephant & Castle, and members of our team are native Spanish and Brazilian Portuguese
     speakers.

     Before we could test our proposed product, we needed content to include in the database. We
     wanted to have real and relevant content, in order to demonstrate the application realistically,
     and to put our concept and premise to the test – Would people want to ‘tag’ their environment?
     What kinds of places would they choose to tag? What messages would they leave? What
     language, slang or terminology would they use? And how would their input affect the
     development of data fields within the product database?

     We conducted a ‘tagging’ exercise, in English and Spanish at the ‘Carnival Del Pueblo’, in
     Burgess Park. We asked people to name places in the area that are relevant to their community,
     and assign these places with a primary keyword, then secondary keywords, a description, and
     an image they would associate the place with.

     Peoples’ responses showed that they were happy to share places of importance to them, even
     though they were doing it ‘off the top of their heads’ they could think of several key places.
     Some places such as the restaurant ‘La Bodeguita’ were mentioned frequently by people from
     many different places including Bolivia, Columbia, and Ecuador. More unexpected results
     included ‘Continental Links’ a money transfer shop, but tagged with the keywords
     ‘meeting-place’ by a Bolivian participant, as the shop is well located in Bolivia so many people
     use it. This also reflects the aspect of many people in our target groups lifestyle, of coming here
     to work and sending money back home.

     We collected a lot of primary data, which revealed many places in the area that are significant
     to the community, why they’re significant, and what language, terminology and imagery people
     associate with the places. It not only provided data for the application and future testing
     scenarios, but also an insight into our target groups lifestyles and interests.




16
     PLACE          COMMUNITY       1ST           OTHER              DESCRIPTION                                IMAGE
                                    KEYWORD       KEYWORDS
     The London     Brazilian       Samba         Meeting place,     Every Sunday evening this school has       Brazilian flag
     School of                                    Music, Dance       a friendly relaxed Samba practice.         with ‘G.R.E.S’
     Samba                                                                                                      Unidos De Lon-
                                                                                                                dres’ (logo of
                                                                                                                school)
     Elephant &     -Brazilian(1)   -Cafe         -Bars,             -The shopping centre looks like a real     -An Elephant
     Castle         -Bolivian(2)    -Meeting      Restaurants        dump, but the Latin cafes and bars
     Shopping                       Place         -Shopping,         inside add much needed character to
     Centre                                       Latin Music        this otherwise seedy place.
                                                  Shop,
                                                  Eating
     La             -Columbian(1) -Columbian      -Good Food         -This is a really good place where you     -The interior of
     Bodeguita      -Bolivian(2)   -Restaurant    -Good Drinks,      can find Columbian music, food, beer       the restaurant,
                    -Ecuadorian(1) -Popnillada    Meeting Place      and other dirnks.                          to show it is a
                                   -Columbia      -Cheap, Clean      -A good, sociable place to be with         big saloon, a
                                                  -Food, Latin,      some nice food.                            nice space.
                                                  Music Service      - Inside here it is a friendly and         -Friends
                                                                     comfortable environment.                   -Landscape
                                                                     -This is a beautiful Latin place serving   -People enjoying
                                                                     popular food in a charming environ-        their food
                                                                     ment.
     Los Arrieros   -Columbian      -Club         -Restaurant        -There’s good food here, but the place     Show the place
                    -Bolivian       -Restaurant   -Bar, Music        is small and the music too loud.           is like a small,
                                                                                                                cramped base-
                                                                                                                ment.
     Burgess Park   -Columbian      -Festival     -Latin, Food,      -We come here every year in August         -Big, spacious
                    -Bolivian       -Football     Music,             for the ‘Carnaval Del Pueblo’              park.
                                                  Performance        -This is a good place to come at the       -The church in
                                                  -Sports, Week-     weekend, to socialise and play sports.     the park.
                                                  end, Meeting
                                                  Place
     Ministry of    Bolivian        Chaney        Saturday, Music,   -This is a fun place to come and hear      Dancers inside
     Salsa                                        Dance,             good music on a Saturday.                  the club.
                                                  Meeting Place

     Continetntal   Bolivian(2)     Money         -Responsible,      -This is a good office for sending      -Elephant
     Links                                        Reliable           money with a fast and reliable service.
                                                  -Internet          -People meet up with friends here it’s
                                                                                                                                   examples from the Carnival del Pueblo tagging exercise




                                                                     also reliable place to use to send mon-
                                                                     ey as it’s well located in Bolivia.




17
                                paper prototype test

     Before we created the ‘real thing’ we made a paper prototype version of the application, in order to
     help guide our product development according to users responses.

     Our test ‘scenario’ was of a Latin American who has moved to the area arriving at Elephant & Castle
     for the 1st time. They use EnviroNet to find out about their community. Therefore all our testers
     were all from the Latin American community in London, but not local to the area.

     The test was designed to take place ‘on the move’. We walked around the area and users input a
     search, from a range of options generated from the real content from our ‘tagging’ exercise at
     Carnival del Pueblo. As we were operating the prototype ourselves, the exercise was not primarily for
     testing the interface usability, but to test the concept of the product - to see how they would use it,
     how they feel about using it and what ideas they may generate to develop it’s use.




18
19
                       users tests (1): results

     Main findings
     Overall:

     As we were operating the paper prototype and simulating the GPS location sensing, the user
     wasn’t really ‘hands-on’ with the interface, however, they all stated that the interface was easy to
     use and understand, the menu was clear and the content made sense. This reinforces the simple,
     basic design and the following of existing conventions for Web and WAP layouts that our users
     seemed to understand. But more results on interface from next test.

     All of the users said they enjoyed using it, that it enhanced their experience of the area as it
     bought things and places to their attention they wouldn’t otherwise have known about. ‘I only
     knew about 2 restaurants around here, now I know there are many more Latin places’ (user 1)

     General Quotes:

     ‘I’m impressed, I don’t normally like this stuff’ (user 1)

     ‘Really useful’ (user 3)

     ‘The idea is wonderful, the whole thing is very nice’ (user 4)

     1. Observation:

     Users commented very positively about how they felt about the way the application worked ‘in
     the background’, i.e. that they input their community and keyword to search, and then just ‘put
     the phone away’ and carried on walking, while the application would ‘find things for them’, as they
     walked.

     Supporting quotes:

     ‘I like that you just leave it and it finds things for you’ (user 2)

     ‘You can look around, but you don’t have to worry about it, as the phone will look for things for
     you’ (user 3)

     Recommendation:

     We need to prioritise the simulation of ‘spontaneity’ in the demonstration. Our concept is based on
     the informed premise that all mobile phones will have GPS within the next few (2-3) years. USA is
     having all new model phones incorporate GPS to improve emergency services. We won’t be using
     GPS, but this spontaneous effect was very well received and commented on by users. To do our
     concept justice and demonstrate it effectively it would be great if we could simulate this effect.

     2. Observation:

     Users really liked the product, even with only 4 keywords available for them to choose in the test.
     However, they stated it would be more useful, personal and relevant if a wider range were
     available, such as for other communities such as Sports players, Gay community, Music taste vari-
     ety etc.

20
Supporting quotes:

‘If this was more specific, it would be perfect’, ‘I would like to use it for festivals and concerts’
(user 2)

‘The more people use it, to add more varied information, the better it will get’, ‘This service would
be very popular for the gay community’ (user 4)

Recommendation:

Again it would help to demonstrate in our show the concept of how the application will grow and
include ‘something for everyone’ the more people use it. Perhaps by listing possible keywords, or
on the interface itself, including a button with ‘popular keywords’ and entering some
interesting or unexpected terms which will demonstrate the potential diversity of content.

Also, as discussed, we can conduct a ‘tagging’ exercise during the next test, perhaps by recruiting
local people and going more into the concept to see if they can contribute less obvious content
(such as shops or restaurants) and include things like personal histories, experiences, stories etc.

3. Observation:

More than one user asked if the messages were from ‘people’ or from the places themselves. One
user was concerned that the system could be easily exploited for marketing (locative ‘SPAM’) or
commercial purposes.

Recommendation:

Create a visible ‘Rate this message’ or similar button on the message page. When users click they
will see how they can rate (or remove?) an inaccurate, offensive, or ‘fake’ (i.e. commercial)
message, to demonstrate our concept goal of the system as self-regulating.
Perhaps we could include a couple of bogus messages in the next test, to see if users understand
and make use of the self-regulating facility, and if they don’t use it, see how we can make it more
accessible for them, as this is an important feature.
One user suggested we may use the same system that’s used when setting up an email account
when registering and have people type out 4 letters shown in a warped image (that a machine
can’t read) to prevent system being exploited to create SPAM.

4. Observation:

Some users wanted more detailed information such as Addresses, more detail about places (like
prices in restaurant etc). One user asked if users could leave their phone number if they were
using it for social purposes (but this could be risky?).

Recommendation:

As we agreed with the general concept, it is up to users how they use it. This could include
leaving more details. If users were making these observations, it seems necessary to make it
clear in the ‘tagging’ section that users can input whatever they like – maybe on the ‘help’ link
from the tagging page, or in a more general ‘Instructions’ or ‘About EnviroNet’ page?
However we do it, it should be on the next prototype model that we use for the 2nd Usability test.



                                                                                                        21
                                                 mobile interface
                                                 prototype test
     This 2nd stage test was conducted using the 1st working version of the application on a mobile
     phone. Again, we walked around the area, this time users were able to search as well as ‘tag’.
     We had to ‘simulate’ the GPS functionality. We did this by entering location ‘codes’ in place of
     this being done automatically by the GPS device. This test focussed more specifically on
     interface usability, however, it did give the testers a better idea of what the product really
     means.

     ‘It was nicer than last time because it was the real thing… It’s something that would make you
     feel closer to home if you find something that’s related to you, for example if you’re away back-
     packing’ (user 1)

     ‘It’s nice to give your opinion about a place, that you can say what you think’ (user 2)

     Findings & Changes

     Signing up:
     Users found the ‘sign up’ process too long, and would prefer to do online, so we added
     information to the sign up page stating users could also sign up online. They also noted that
     after signing up, they still had to login in, so we changed it to automatically log them in.

     Searching:
     Users were unsure whether they needed to fill out all fields, so we created mandatory and
     non-mandatory fields and indicated the mandatory ones with an asterisk.
     Users wanted to ‘add’ to an existing search to broaden their search, although this is not
     possible, by showing that ‘communities’ and ‘keywords’ are optional, they can leave
     ‘communities’ blank and simply input several different keywords.
     Users weren’t sure whether selecting the links would ‘clear’ a current search. We made this
     clearer by changing ‘search’ to ‘new search’.

     Search results:
     Users were confused by links appearing at the top of the screen- they weren’t sure if the results
     were below or on another page, so we moved the links to the bottom of the page.
     Users were confused when they didn’t see results at the top of the page, which was rectified
     by moving the links and also removing the logo from the top of the screen (which also made
     results load faster, and made data transfer smaller, thus decreasing cost for users)
     When multiple results were shown, users weren’t sure which ones they’d already read, so we
     implemented visited links in a different colour (although unfortunelty this is not supported by all
     phone browsers).

     Tagging:
     Users found it difficult to read the message they were typing, so we enlarged the size of the
     ‘message’ field.
     The Langitude & Longitude fields (only included to simulate the GPS) confused users, so we
     moved them to the bottom of the screen.
     Tagging process was too long, so we indicated that not all fields are mandatory. The ‘subject’
     field was also confusing, so we re-named this ‘name of place’



22
Logout:

No real problems here, all users knew to navigate to the ‘home’ page to log out, however, we
decided to add a ‘logout’ link on all pages to save cost for users (as each page loaded costs
them money)


Mobile Interface Prototype Follow-up Test

We did some quick follow-up tests after implementing the above changes, to see if they helped.
These were on previous testers, as well as new, to give impartiality.

New and previous users alike found the system easy and quick to master and use, with previous
users stating they noticed definite improvements in ease of use, and stating there was nothing
more they would change.
Only two observations came up-
Firstly the ‘communities’ list was not alphabetical – which could be a problem when the
communities list becomes longer, which we’ve now changed.
Secondly, after adding a keyword using the ‘popular keywords’ and going back to the search
screen, the community button had became unselected. This couldn’t be changed as it would
require Javascript not supported by mobiles, however, an easy solution was to move the
‘keyword’ field above the ‘communities’, so users would choose ‘popular keywords’ before
selecting a community.




                                                                                                 23
                                              interface design

     The interface design for the mobile phone website was done using the software Adobe GoLive
     CS2. The software support mobile standards such as CSS, XHTML, SMIL, SVG Tiny, MPEG-4,
     and 3GPP, all of which have been endorsed by global standards committees as well as leading
     companies, including Sony Ericsson, Nokia, Opera, Access, Openwave, Ikivo, and others.
     <http://www.adobe.com/products/golive/mobile.html>




24
25
                                                                 information
                                                                architecture
     The enviroNET project requires implementing two different web sites. One that will handle the
     enviroNET application interface for the mobile phone device, and a second one which purposes is to
     promote and inform about the stages, processes and people involved in the enviroNET project. The
     later one will also include features to interact with the enviroNET application.

     Two approaches are put together to accomplish the navigation structure of both sites.
     Firstly, the application of non-linear models to structure the navigation closely to how the user may
     perceive the information. Secondly, the design of diagrams to help other team members to
     implementing the website.

     ENVIRONET Mobile Phone Structure

     The smallness of mobile phone screens restrict extremely the opportunities of designing rich
     navigational interfaces. The two dimensional space is almost limited to design vertically. Therefore
     the design of the navigation has been conditioned primary by usability testing, and interface design.
     On the other hand, a diagram reflecting the processes and paths available to users has been
     depicted.


     Figure 1 shows the whole navigation structure of the mobile version. Figure 2 (page 27) is a further
     description of the LOGIN SIGN UP Flow Process included in Figure 1.




26
Navigational Structure

It has been designed following the same principles that with the mobile phone interface. The
difference is that content is not created dynamically. Most of the site is made of different static
pages, with the exception of the section that allows enviroNET application users to edit and delete
posts through the site.




                                                                                                      27
                                    ENVIRONET website

     Although EnviroNet’s concept and purpose is to allow people to use the service when they are liter-
     ally on the move, a big screen website was created, to promote the idea, and explain more about the
     project. Containing explanations about the team, the members, the project, the
     development process and the phases it involved and a video demonstrating a possible
     scenario; the website also allows people to sign up for the service (since signing up via the
     mobile browser might seem a bit difficult for some people), view their posts, edit them and even
     delete them. A possible path that may be achieved in the future is to allow people to post messages
     and search for places using this website.

     Because of this functionality, the promotional website interface was built using pure basic HTML and
     CSS, without any flashy graphics or any thing that can cause cluttering of information. The purpose
     of the website is to allow people to get to know more about EnviroNet, sign up and use the service of
     viewing their posts (through the login box) in a very easy way. For this reason, the interface is clean
     and simple to use.

     Once created, with all the links working and everything integrated in it, the website was
     validated through the W3 website (http://www.w3.org) to make sure that met all the web
     standards, for both the HTML code and the CSS. A few errors were corrected until it passed through
     the validation. Both logos (HTML validated and CSS validated) were added in every page, with a link
     to the validation page.

     On the top orange bar, links such as home, site map and contact are separated from the real content
     of the website, displayed in the menu on the left, with information about the team, the process and
     the product. To make the navigation easy to use, these menus appear in all the pages. The middle
     part, where the content of each link in the menus appears, is the only
     dynamic thing in the website. On the top of this section, a text with the main link’s name and with
     the sub link (depending on the case) appears to show the user where he/she is.

     After the user logs in, he/she sees a list of his/her post, sorted by date. The two buttons next to
     each post, allows their management. If a user chooses to edit the post, he/she can only change the
     message posted (the community and name of place cannot be changed), and if he/she chooses to
     delete, the post is deleted straight away.

     The blue of EnviroNet’s visual identity is the main color of the website, followed by a yellowish or-
     ange that contributes to create a better feel for the website.




28
Website test:

We conducted a brief website usability test, to see how us-
ers found our product website, which was created to man-
age posts created with the mobile phone application, as
well as create accounts and find out more about EnviroNet.

Website test results:

Users found all the main functions within the ‘Your Account’
section ‘very easy’ to use.

They understood this part of the website was to check, de-
lete and edit posts & to create an account and get informa-
tion about the service.

They suggested it would be helpful to include prices for the
service.
Recommendation: check various network rates and perhaps
construct a table to show how much an ‘average session’
on EnviroNet (of perhaps 10 viewed pages of data or how-
ever many 1000 bytes) would cost for each. Would need to
state the date these figures were from, that they are just
there as a guide, and that they could be subject to change,
so ideally users should contact their network.

Users suggested they might like to create a post using the
website, but understood this would contradict the location
aspect of the system.
Users recommendation: Users could create a very short
post on their mobile if they were short of time, and just
edit it to a longer post at home using the website.

For the non-account part of the site (with all the info about
the project) users had no difficulty with the navigation,
quote ‘The website is very simple to use.’
                                                                29
                                                          report on
                                                   interface design

     Although chugging along rather slowly (more slowly than predicted a few years ago), with phones
     and PDA’s becoming ever more advanced, the mobile internet is clearly going to play a big role in the
     future of the web. And it is because of this that EnviroNet uses the mobile web, rather than a
     downloadable application to allow people to use its services.

     Creating an interface for a website to work in a mobile device is not an easy task. This is due to a
     series of limitations, such as:
     • small screen (120 pixels wide in some devices)
     • difficult text input
     • costs of data transfer
     • processor and transfer speeds are slow
     • users are mobile (Their primary goal will be to find a piece of information, not to browse the web.)
     • many usability issues involved
     • mobile phone browsers are too limited (no Javascript, no frames, etc.)

     Another existing problem is that the technology is not standardized, and what works for one device
     may not work for another.
     “Be aware that when it comes to mobile browsing, manufacturers aren’t bound to standards in the
     same way that the Internet is… The technology is new, and there is a long distance to run before
     there is any standardization for mobile browsing.”

     - Colly (2005), 7 Steps to better handheld browsing. Available at <http://www.collylogic.com/index.
     php?/weblog/comments/7_steps_to_better_handheld_browsing/>

     Devices and browsers have a variety of differences:
     Openwave devices support XHTML Mobile Profile with WML extensions. Nokia only supports XHTML
     MP. Access and AU Systems only support XHTML Basic, a subset of XHTML MP. (XHTML MP is XHTML
     Basic plus the style, hr, b, i, big, and small tags)

     When designing EnviroNet’s interface for mobile devices, all the above were taken into consideration,
     to allow the user to have the best experience possible when on the move. The interface for was
     created using XHTML Basic, which is supported by many devices.

     Bellow there’s a list of all the important rules that must be taken into consideration when designing a
     website for a mobile device, what was considered when creating EnviroNet’s interface and how these
     rules were applied.

     DESIGNING THE INTERFACE

     Before starting to create the interface, all the options were analyzed as to provide the user with a
     service that would work fine in the majority of devices and would not pose any big usability
     problems. Combining the user experience and use of computer websites together with their
     experience when using a mobile device was extremely important in order to generate an interface
     that is easy to use and “instinctive” (the user does not has to learn how to use it).




30
     IMPORTANT RULES                   TAKEN INTO      ENVIRONET INTERFACE
                                     CONSIDERATION
Think vertical, not                       YES        This was the first rule that was
horizontal. Users view the top                       taken into consideration when
first on mobile devices.                             designing the interface and is
Therefore, avoid navigation                          applied in all the pages.
bars, tabs, and side-by-side
positioning. Design from the
top down.
Do not design with tables.                YES        Although used in the beginning
Different devices render tables                      of the design process, tables
differently. To display a table, a                   were removed further on, so
device must perform                                  that the interface could work
floating-point calculations,                         better on mobile browsers.
which slows down the rendering
of the table.
Don’t use large CSS files.                YES        CSS files are external and
These can result in excessive                        applied to every page.
visual clutter, reducing                             This reduces the amount of
readability. They also take a                        downloading the user has to do.
long time to download, result-
ing in the browser redrawing
the screen after the user is
partway through reading it.
Don’t use large graph-                    YES        There is only two graphics in
ics. These take a long time to                       the entire website: EnviroNet’s
download and costs more to the                       logo in the first page (login)
user.                                                and in the second page (home).
Keep text styles simple,                  YES        EnviroNet uses a non-serif font
otherwise it becomes difficult to                    (Verdana), which is easy to
read the information.                                read in all devices, without any
                                                     complicated stying.
Use few colors. The differ-               YES        To differentiate between the
ing screens and user situa-                          body text, links and other
tions mean that colors may not                       information, two colors were
be experienced as you intend                         used: gray for the first and blue
them, and may not be                                 for the later.
distinguishable from each other.
Keep content short. Keep the              YES        The content was made as short
site’s content short and to the                      as possible without lacking
point.                                               essential information to the
                                                     user. Sentences were made
                                                     shorter and in a more direct
                                                     way. For example, instead of
                                                     saying, “Rate this message
                                                     as inappropriate” it was used
                                                     “Rate inappropriate”.




                                                                                         31
          IMPORTANT RULES                 TAKEN INTO       ENVIRONET INTERFACE
                                        CONSIDERATION
     Don’t use drop-down menus               YES        No drop down menus was used.
     for navigation. Users won’t                        The navigation is made by
     understand or use them.                            links, buttons and radio
                                                        buttons, which proved to work
                                                        fine in most devices.
     Use a simple graphic at the top         YES        In all the pages there is a
     of the page with a                                 differentiated blue capital letter
     navigational icon suggesting                       word, to indicate to the user in
     what site and what portion of                      which page he is now (home,
     the site the user is at, plus a                    search, post, search results,
     brief title indicating what                        about, help…)
     page the user is on.
     The top of the page is prime            YES        The most important information
     real estate; you do not want                       is displayed at the top of each
     the reader to get bored                            page. This was reorganized
     scrolling to the content.                          after the second usability test.
     Don’t use frames or pop-up              YES        No frames or pop-ups were
     windows.                                           used.
     Set the width and height                YES        For the both of the logo
     attributes for the images so                       images, the exact width and
     that the page can be laid out in                   height were specified within the
     its final form even before the                     XHTML code.
     images are loaded.
     Use efficient, semantic markup          YES        The XHTML code is all very
     and leave the presentation                         simple and clean, and all that
     to CSS.                                            regards the different styles
                                                        used and within the external
                                                        CSS.
     The content of the service              YES        The content of the website was
     should fulfill the needs of                        made as clear as possible for
     the target user group and be                       the target group, being
     optimized for the most common                      displayed in a way that takes
     tasks.                                             efficiency in the first place.
     Keep user Task flow fluent              YES        The interface was made very
                                                        simple and easy to understand
                                                        and navigate, so that the user
                                                        doesn’t get stuck at some point
                                                        or waist time finding his/her
                                                        way.
     It is better to provide 30              YES        There is one page for each of
     links on a single page rather                      the links. In sections like “Post”
     than five links on six pages.                      and “Search”, where there are a
                                                        lot of information to scroll down
                                                        through, everything is on the
                                                        same page, instead of being
                                                        divided into two pages.




32
     IMPORTANT RULES                 TAKEN INTO      ENVIRONET INTERFACE
                                   CONSIDERATION
Going back and forth be-                YES        In all the pages the user can
tween pages may take more                          find all the menu options, so
time in XHTML, as the pages                        he doesn’t have to keep going
are                                                backwards or forwards to find
downloaded separately.                             what he is looking for.
Provide proper feedback for             YES        Every time the user sends an
user actions and for error and                     information, he is notified about
problem situations.                                the action taking place or if any
                                                   error occurred. (e.g. “wrong
                                                   password”, “no results found”,
                                                   please fill in the field
                                                   ‘message’…)
Remove unnecessary white                YES        The XHTML code for each page
space and comments inside                          is just a few lines long and no
code.                                              extra spaces between pieces of
                                                   code exists.
Keep the pages light.                   YES        Apart from the first page (login)
                                                   and the second page (home),
                                                   all the pages are made of pure
                                                   text, being very light and quick
                                                   to download.
Use high-contrast colors for            YES        Because the background of the
images and fonts.                                  website is white, dark colors
                                                   were used for the fonts (grey
                                                   and blue), being easy to read.
Avoid background images.                YES        No background image was
                                                   used, as it would take too long
                                                   to download the page and also
                                                   costing more to the user.
Don’t use black or dark                 YES        No background color was used,
background images or                               as this would make it too
colors.                                            difficult to read the information
                                                   displayed.


Use the same, simple color              YES        As mentioned before, apart
palette for all the graphics in                    from the grey, used for the
your site. This will help ensure                   normal text, blue was used
a consistent look and feel and                     (with different font styles) for
contribute to site identity                        other information (links, page
                                                   name)
Use alt text for images. Obvi-          YES        Because it might take a while
ous, but important on a hand-                      for the mobile browser to
held device.                                       display the image or even in
                                                   the case of devices that don’t
                                                   display images, the alt text was
                                                   used in both of EnviroNet’s
                                                   image as “logo”



                                                                                       33
           IMPORTANT RULES                       TAKEN INTO                   ENVIRONET INTERFACE
                                               CONSIDERATION
     Text for buttons and links are                    YES                 All of them are in low case
     better to read if they are not in                                     (including the first letter).
     capital letters.
     Users start to lose control if                  YES/NO                Although the form is all in one
     the form is longer than two                                           page, it is a bit long. But, in
     screenfuls or if the form is                                          order to make the service
     split onto several pages.                                             efficient, all the fields for both
                                                                           “Search” and “Post” are
                                                                           necessary.




     APPLICATION

     When designing a website for a mobile device, normal HTML is not valid anymore. Mobile browsers
     read XHTML, which is more concise and simpler than the previous one.
     In this case, the application Adobe GoLive CS2 was used. It not only allows the creation of either
     XHTML Basic 1.0 or XHTML MP but it also allows the creation of specific CSS for mobile devices. It
     also includes a preview for small screen rendering and other facilities for the creation of websites for
     mobile devices.
     When using the application to create EnviroNet’s mobile website, the easy to use interface of the
     software was used together with XHTML editing to result in a simple and efficient code.


     CSS

     External CSS works better for mobile devices. Taking this into consideration, a style sheet, “mobile.
     css”, created to work with mobile browsers (as the software offers this as an option) was applied to
     every page, with the media type specified as “handheld”.
     As Karen Stevenson, who has extensive experience in the use of CSS for handhelds explains, “The
     future for handhelds will be XHTML and CSS, using a style sheet designated with the media type
     “handheld”. WAP sites are dwindling (or at least not growing) and the newest handhelds are moving
     to XHTML/CSS. Phones that are labeled “WAP2” can use regular web sites, not just WAP sites. I know
     XHTML/CSS sites work great on at least some WAP2 phones”.
     But because some devices do not read the “handheld” media type for CSS, another CSS, exactly
     the same as the “mobile.css” was created, but instead of “handheld” as media type, it has “screen”
     (screen.css). This was done because some current phones apply “screen’ styles. “…In some cases
     the phone carrier runs pages through a proxy that strips styles out even if the phone could recognize
     them, so it’s a crapshoot figuring out what will get applied. The best bet is to just keep it simple.”
     (Stevenson, 2005, Style Sheets for Handheld Devices, Available at <http://css-discuss.incutio.
     com/?page=HandheldStylesheets>)
     Although the Style Sheets used were kept very simple, they were not used to make the website
     look nicer, but to help the user navigate through the website efficiently and consider usability issues
     involved.

     For both CSS used (mobile and screen), a few classes were created:

     .link – used for the links on the menu of the home page. The font is grey and underlined (all links are
     underlined to make sure the user knows it’s an hyperlink).
34
.deflogo – used for the text that appears at the beginning of each page to tell the user where he/she
is. The font is displayed in blue and in capital letters.
.linkbut – used for the links at each page. They work as a menu with options like help, home, logout
and so on. They are displayed in blue, bold and underlined.
.name – used for information that has to be differentiated from the rest, such as the main categories
of the forms. It is displayed in grey and bold.
.back – used at the search results page to separate different results found. It constitutes of a light
blue background for the text.
.backdark – used in the middle of the text as a link/button that takes the user to another page or
executes an action. Applied to “rate inappropriate” and “popular keywords. The text appears with a
darker blue background, in bold and white.
.linkse – used in the search results page for the name of the place. It appears in grey, bold and
underlined.
.button – used for all the buttons in the interface. Text is blue.
.border – used around the links on the home page, as to make it clearer to the user that it is the
main menu. It appears as a thin blue line.

All the above proved to work really fine in all mobile devices the interface was tested on, not
cluttering the website with unnecessary visuals or styles.
Although some mobile devices do not read the font property (some display the website with the
default font of the device), Verdana was used for all classes of styles as is an easy to read font
(proved by the usability tests).


FORMS

Two main forms were used on EnviroNet’s mobile website (“Search” and “Post”). Although the use of
forms is not recommended, the whole concept depends on that. The forms were not separated in
different pages, to avoid extra costs of data transferring for the user, and for usability issues.
Usability tests conducted at the Nokia Research Center, proved that users do not find typing in a
mobile device website such a hassle, since they are used to the mobile keyboard to type SMS
messages. This was also proven in our usability tests.


TESTING THE INTERFACE

While designing the interface, tests were done using the Small Screen Rendering option on the
GoLive software as well as on the Opera Browser on the computer, through the selection of the
option “view in small screen”. The process was useful as it checked if the CSS for handheld was
working fine.
Later on, once the interface was ready and working fine, with all the links and pages, (without the
backend code), it was uploaded to the server and tested in a few mobile phones (Samsung E330,
Nokia 6230, Motorola V3 RAZR, Nokia 2650). After these tests, a few changes were made,
regarding the size of the logo, blue background and blue texts. The Logo was scaled to fit in the
smallest screen tested (Nokia Guto), and the blue was changed into a higher contrast and lighter
tone for the fonts, and into an even lighter tone for the background of the text. Once another test
was done to make sure everything was working fine, the integration with the back end code was
done.




                                                                                                         35
                             technical specification

     The implementation of enviroNET requires the selection and design of hardware and software
     resources. The following sections start with a model of the enviroNET application that will direct
     the subsequent research on technologies that provide location awareness. It also includes a
     section justifying the decisions taken in the selection of technologies. The report concludes with
     the application architecture behind enviroNET’s proof of concept.

     1. System Requirements

     enviroNET project is a web based application; its technical implementation at the highest level
     of abstraction implies a Client-Server architecture, which involves three main elements:

     - A location aware mobile device running a web browser rendering the enviroNET user interface
     and capable of transmit user location.

     - A web application server able to run enviroNET.

     - Client and Server communicate through the Internet.




     The model will allow enviroNET to be scalable and platform independent. Furthermore, it sets
     the framework to realise the feasibility study outlined below and therefore to choose the
     hardware and software required to proof the concept behind enviroNET and to demonstrate it
     on the degree show.

     1.1 The Server

     On the server side the web application requires a Database Management System (DBMS) to
     store application data, and a web server able to incorporate middleware scripting so it can
     interact with the DBMS, process client requests and dynamically create standard web
     documents. The server also has to have a fixed public IP address in order to be accessible
     through the Internet.

     1.2 The Client

     Besides a web browser, which is the standard application to render web documents, the client

36
needs to incorporate a Location Aware System (LAS), which accurately identifies user position
and transmit these data over TCP/IP, the Internet protocol suite, to the enviroNET web
application in a format that is capable to process. Ideally would run on the background, and will
constantly inform the server about client location without the need of the user to input data or
notice this process.

2. Feasibility Study

2.1 The Server

This study involves research on appropriate technologies so a decision can be taken according
to human and economic resources available.
To implement the server side, the project has at its disposal a Mac OSX Server with public
unique IP address. It includes MySQL as DBMS, Apache as web server, and PHP as middleware
scripting. Within this framework one of the team members will take the role of developing the
server side part of the application by designing the database, create the coding necessary for
the middleware part and ensuring that the application performs accordingly.

2.2 The Client

On the other hand, the client side is more problematic. Despite of being able of running in any
platform, the target client is the mobile phone. The concept behind enviroNET implies making it
as open and accessible as possible. The most ubiquitous mobile device capable of accessing the
Internet is a cell phone that implements General Packet Radio Service (GPRS). GPRS is a mobile
data service implemented in GSM networks, and supports among other protocols TCP/IP.
Having selected the platform for the client device, the most difficult part is how to include the
LAS bit. Mobile phone LAS available are:

LAS for Mobile Phones:

LAS can be classified depending on the position techniques they implement to resolve device’s
location [1].

Absolute LAS

Absolute LAS determine actual location globally. These systems have wide area coverage and
position is determined based on coordinates that have been used to map the area. Global
Positioning System (GPS) and the Global System for Mobile Communication (GSM) implement
this technique.

GPS

The Global Positioning System covers the whole Earth surface. It was designed and is controlled
by the USA Department Of Defence. It is available to use free of charge. It’s a satellite
navigation system that uses at least 24 satellites that are on low-orbit. In order to implement it
is necessary a receiver that works in conjunction with the satellites. The receiver calculates its
position on the Earth by a method of triangulation using four of the satellites. The information
received is expressed in latitude, longitude and elevation. The basic GPS schema has a median
accuracy of 10 meters [3].
Despite of its wide coverage, it has some limitations. Weather conditions may affect reliability.
The signals emitted by satellites are not strong enough to reach receivers inside buildings; in
addition, in highly dense urban areas like cities, the urban canyon effect causes GPS to lose
                                                                                                     37
     functionality [2].
     Next generation GPSs are currently being developed to overcome these deficiencies. The
     European Union has created the Galileo project, which implements stronger radio signals,
     promising greater accuracy and functionality outdoors as well as indoors. [2]

     GSM Localization

     Mobile phone network providers can determine the absolute position of mobile devices
     subscribed to their networks. They use different techniques like cell ID, enhanced CELL ID, Time
     of Arrival (TOA), Angle of Arrival (AOA)[4] Its accuracy varies from 50 to 200 meters. Network
     providers charge for providing this information, and they have already developed different
     Location Based Services (LBS) over cellular networks.

     Assisted GPS

     This system combines GPS with GSM localization. It overcomes the urban canyon effect
     associated to normal GPS, and provides greater efficiency. Mobile phones handsets have to
     include GPS receivers. Assisted GPS is being encouraged by USA and European laws to enhance
     emergency services. They have mandated that mobile network providers have to be able to
     locate users within 100 meters. [2]

     Relative LAS

     Relative LAS determine the location by relating device’s position to other objects in the
     environment. To accomplish that, device and objects have to share common communication
     protocols. Objects in this sense can be wireless 802.11 networks, GSM cell towers or Bluetooth
     devices. Those communication protocols identify objects with a unique ID. When the device is
     in range to communicate with them, the device “listen” to those objects and send the ID to a
     central database where information on the location of those objects is stored. The location of
     the device is obtained by triangulation, in a similar way as GPS does.

     3. SELECTION OF TECHNOLOGY

     The main objective of enviroNET is to proof the concept at the MA IM 2005 degree show. The
     exhibition runs indoor and the objective is to allow visitors to grasp of the utility of the concept
     behind enviroNET. enviroNET uses User Centred Design (UCD) approach, and even though the
     development of the application will be ideally implementing a LAS, to gain an appropriate user
     feedback.

     Having decided the server side of the application, an analysis of the possibilities of using one of
     the previous LAS is carried out.

     Absolute LAS

     GPS

     Using GPS requires that either mobile phones have a built-in GPS receiver, or an external one
     that is synchronized to the device. In the first case, mobile phone models that have built in GPS
     receivers are still rare, and minimum price is over 200 pounds. Handsets with capabilities to
     communicate to external GPS receivers are more affordable, and a valid package cost around
     130 pounds.


38
In either case, there is a need to build an application able to obtain the GPS data, and parse
either to the browser on the client device, or to send it to other application server that
communicates with enviroNET, so information about the location can be processed.
Develop those kind of applications require knowledge in software development languages
capable of using operating system’s components, like Java, C++, or .NET, depending on the
platform in use. Bluetooth, which is the common protocol used by GPS external receivers and
mobile phones to communicate, can only be accessed by application developed using those
languages.

GSM Localization

This information is provided by network operators in a charge per request scheme making it
considerable expensive for an application like enviroNET. Furthermore the Applications
Programming Interface (APIs) as well as applications able to process this data require the same
software development skills that in the case of using GPS.

Relative LAS

It was considered the possibility of setting up Bluetooth beacons, and creates a triangulation
method at least for the degree show. PlaceLab is an Intel research project that aims to
provide a framework for developing applications that requires implementing LAS. To overcome
the inability of GPS to work indoors, PlaceLab uses relative positioning by listening to fixed radio
beacons with unique cell ID like wireless 802.11 networks, GSM cell towers and Bluetooth. The
PlaceLab framework applies to commodity hardware like laptops, PDAs and cell phones [3].
Bluetooth beacons can achieve an accuracy of ten meters in PlaceLab, but it takes the client
device at least ten seconds to recognise cell ID and other non intended beacons in the
environment can interfere in the process. Furthermore, using PlaceLab within enviroNET
requires knowledge of Java, and clients for enviroNET to use at the Degree Show would be
limited to those devices provided by the team.

4. Conclusion

A review on the different technologies that could be implemented to provide location awareness
to enviroNET has been outlined. The main concern of the research has been to draw the
possibilities and limitations of the systems, as well as the feasibility of implementing in
accordance to human and economic resources. After evaluating the different risks involved in
taking any of them, the team decided to simulate location awareness at the Degree Show, since
the primary goal of the project is to demonstrate that enviroNET fulfils a need, Location Aware
Systems could be implemented with the right resources, and when technology becomes more
accurate and easier to implement in mobile phones.

5. Proof of Concept

Having decided not to incorporate a LAS, but to simulate it to proof the concept, the enviroNET
architecture is depicted in the diagram on page 49.

On the Server Side, the Operating System (OS) is Mac OS X Server, which includes the Apache
Web Server that host enviroNET web documents and make them publicly available to the
Internet. These documents are created dynamically following a three-tier architecture.
The Data Storage repository holds information units. The Business Logic layer includes server
side scripts that manipulate the information units to meet application requirements. The
Presentation Layer is responsible for the interface of enviroNET.
                                                                                                       39
     On the Client Side, the mobile phone the interface is rendered by an XHTML browser that
     provides interaction capabilities to make request to the Server Side.
     Client and Server communicate through the Internet.

     REFERENCES

     1. Nova N., Locative Media : a literature review. Ecole Polytechnique Federal de Lausanne.
     Lausanne. February 2004.

     2. Borriello G. et al., Delivering Real-World Ubiquitous Location Systems. March 2005.
     Edinburgh, Scotland.

     3. Lamarca A. et al., Place Lab: Device Positioning Using Radio Beacons in the Wild.
     In proceedings of Pervasive 2005, Munich, Germany

     4. Wikipedia, GPRS. Accessed on 29 August, 2005. Available at http://en.wikipedia.org/wiki/
     GPRS




40
41
                                         database and
                                  middleware scripting

     When planning the development of enviroNET, it was decided to use PHP and MySQL as the
     main server-side technologies.

     In order to speed-up and facilitate the coding process, the repeated use of various
     functionalities of PHP, such as the inclusion of frequently used sections of code from external
     PHP files, proved to be very effective. The use of this feature also allowed me to simplify the
     structure of the code and to keep file sizes to a minimum. Furthermore, this technique allowed
     me to implement changes rapidly, whenever the results of usability tests necessitated these.

     Furthermore, it as ensured that the existing code contains a satisfactory number of comments
     and explanations regarding the code’s purposes. These comments will allow me and other
     programmers to understand the code more easily.

     As the main enviroNET system is supposed to be accessed from mobile devices, it was essential
     to work within certain parameters for the development of this website. One of these restrictions
     is the inability of most mobile devices to interpret JavaScript. Therefore, the server-side coding
     had to be adapted to include the error-handling control structures of the application. This was
     done by implementing a large number of user-feedback messages into the structure of the
     website. In other words, whenever a user performs certain tasks or makes mistakes (e.g.
     searching for non-existent content, searching or posting without specifying parameters, logging
     out, changing of password, etc.), the system has to provide the user with an appropriate
     message, in order to allow the user to get a deeper understanding of the system.

     To ensure that enviroNET is only accessed by and contributed to by authorised users, who have
     completed the sign-up process, it was essential to implement access-privileges that are being
     controlled by a login procedure. These confirm a user’s identity by comparing login details with
     existing information in the database. Once a user has successfully signed in to enviroNET, the
     system keeps track of the user by creating session variables, which allow access to the system’s
     functionalities.

     Another method of increasing the security of the enviroNET system is the use of encoding data.
     Sensible data, such as the passwords of users are being stored inside the database in an
     advanced encryption format. Whenever the system needs to verify sensible data, it uses a
     passphrase to encrypt the data, before comparing it with the stored copy inside the database.

     As enviroNET is a public, content-driven tool with the aim of enriching users’ lives, where
     every user has the potential to publish content without any restrictions, we were concerned
     about the possibility of offensive, commercial and otherwise inappropriate content being
     published. In order to prevent enviroNET from becoming an advertising tool, we chose to
     provide every user with the ability to rate existing posts as inappropriate. By doing so, a user
     nominates the deactivation of the concerned post. Whenever a message is being rated for the
     third time, it becomes inactive and will be excluded from the search results. Furthermore, the
     user who posted this message will be rated every time one of his / her messages is being
     deactivated. When a user is rated for the third time, his / her account is being deactivated.

     As enviroNET consists of two co-existing websites, namely the one that is accessed via a mobile
42
device and the one that can be accessed via a regular computer-based browser, we required a
script that allowed me to determine what kind of device a user is using to access enviroNET. The
PHP function HTTP_USER_AGENT allowed me to retrieve a user’s browser information. We then
wrote a script that searched this information for common data of operating systems. Thereby,
I was able to redirect those requests coming from mobile devices to a different URL than those
that indicated that the user was currently using a computer.

When creating the database structure for enviroNET, one of our intentions was to make it as
efficient as possible. Therefore, it was ensured that no duplicate data exists in the database, as
this could slow down the retrieval process. Furthermore, the amount of information users can
provide for certain aspects of the database is restricted. While users can still create posts that
contain very long messages, other information (e.g. personal details) undergoes certain
quantitative rules, which will ensure the seamless communication between the system and the
users.

Another feature that is aimed at increasing the efficient use of enviroNET is its capability to
communicate with the users through email. If an existing user forgets his username or
password, he / she can make use of the provided functionalities on the computer-based website
and request his login details. enviroNET will then send an automated email to the user with the
requested information. Furthermore, users are being sent emails upon successful creation of
their user account. To enable this feature of enviroNET, I had to make use of PHP’s mail
function.

See diagrams on pages 52-53.

Projector:
When scoping enviroNET, we initially planned to develop a system capable of using GPS
coordinates, in order to determine a user’s exact location. However, our research showed that
we wouldn’t be able to fulfil the technical requirements for such a system with the resources
available to us. Therefore, we decided to simulate the locative aspect of enviroNET by asking its
users to provide their location in form of two single digits, which stand for latitude and
longitude. In order to facilitate the user’s understanding of how enviroNET would ideally be used
in everyday situations, we decided to provide the user with appropriate visuals, representing
the locations where he / she currently searches or posts messages.

We abandoned our initial idea of using a series of posters in combination with coordinates,
because it could have made it too difficult for the user to make the connection between his
actions in different locations. Instead, we intended to produce an interactive and responsive
multi-user tool, which would assist the user by personalising his experience of and path through
enviroNET.

The resulting tool is an interactive Macromedia Flash Player, which continually accesses
enviroNET’s database to request a list of currently active users. This list is then being compiled
using PHP and parsed back to the Flash Player in form of an XML Object.
Users can interact with the tool by searching or posting messages in the enviroNET system.
Every time a user performs such an action, his username and location will appear on-screen, as
well as a visual of the chosen location.

See diagram on page 53.




                                                                                                     43
44
     Site structure for enviroNET (mobile site):

       index.php                              mobile/about.php        H           mobile/login.php         C A         mobile/abuse.php              F
       Determines user access of              Information             F           Verifies username and S F            Deletion of user account      H
       enviroNET through computer             regarding the                       password with                        due to publishing of
                                                                                                           H N
       or mobile device by checking           purposes and aims                   information in database.             inappropriate content.
       browser information.                   of enviroNET.                       Then redirects to index.



       web/index.php                          mobile/index.php        A           mobile/signup1.php        A          mobile/signup2.php            A
       Displays the enviroNET                 Displays Login screen   H           Provides form for         H          Stores provided               C
       website that is aimed at               if no session data is               information required                 information in database.
                                                                      F                                     F                                        N
       computer browsers.                     found. Otherwise,                   to sign up for enviroNET.
                                              displays homepage.




       mobile/                C A     mobile/                C A      mobile/              A      mobile/            C A     mobile/help.php         N
       searchtag1.php         H F     postmessage1.php       H F      changepassword1.php H       logout.php         H F     Contains help content   F
       Provides form to               Provides form for               Provides form to            Destroys session           for several pages of
                                N                              N                           F                           N                             H
       search for messages.           posting messages.               search for messages.        variables.                 enviroNET.


       mobile/                C A     mobile/                C A      mobile/               A
       popkey.php             H F     postmessage2.php       H F      changepassword2.php F
       Provides a list of             Stores messages in              Displays overview
                                N                              N                        C H N
       popular keywords.              database.                       of found results.


       mobile/                C A
       searchtag2.php         H F
       Displays overview
                                N
       of found results.


       mobile/                C A     mobile/rate1.php        C A
       searchtag3.php         H F     Provides self-regulating F
       Displays details of            functionalities.
                                N                             H N
       chosen result.

      Reusable blocks of code:

      header.php         H        footer.php             F    notice.php               N    mobile/create_ S         These files contain sections of code,
      Code for HTML header        Code for HTML footer        Provides user-feedback        session_data.php         which are used in various parts of the
                                                              for various pages.            Creation of session      website. This “recycling” of code
      connect_db.php      C       auth_user_test.php A
                                                                                            variables.
      Code for connection         Code to check user’s                                                               facilitates and speeds-up the
      with database               authorisation                                                                      development of a project.
       Site structure for enviroNET (web site):                                                                   Projector structure:

         index.php                        mobile/login.php         C           web/delete.php          A
         Determines user access           Verifies username and S              Deletes a selected      F
         of enviroNET through             password with                        message from the
                                                                   N                                   H
         computer or mobile device        information in database.             enviroNET system.                                              Projector
         by checking browser info.        Then redirects to index.                                     C




         mobile/index.php                 web/index.php        H       F       web/messages.php        A               Request
         Displays Login screen if         Displays login screen,               Displays a user’s                         from                                        XML Object
                                                                       M                           V   F                                                             parsed from
         no session data is found.        general explanations                 messages. Provides                      Projector
                                                                       T                           N   H                to PHP                                     PHP to Projector
         Otherwise, displays              and information about                options to edit and
         homepage.                        enviroNET.                   V       delete messages.    M   C


         web/                    C A
         logout.php              H F                                                                                                         Database
         Destroys session                                                      web/edit.php      M C A                   PHP                                              PHP
         variables.                                                            Provides form for T V F
                                                                                                                         File             (Projector table)               File
                                                                               selected message
                                                                                                   N H
                                                                               to be edited.
         mobile/forgot2.php N C           web/content.php M V
         Sends user details to F H        Contains all the   H F
         user’s email address             static content for                   web/store.php        C A
         upon user’s request.             the website.                         Updates an           H F
                                                                               edited message
                                                                               in the database.
                                                                                                                                                  PHP
                                                                                                                                                  File
         web/signup2.php         C N      mailer.php           C N            These files contain sections
         Checks provided         H F      Sends emails to      H F            of code, which are used in
         information before               users when signing
                                                                              various parts of the website.
         storing it in the database.      up or forgotting password.
                                                                              This “recycling” of code
                                                                              facilitates and speeds-up
        Reusable blocks of code:                                                                                                           Search or Post
                                                                              the development of a project.
                                                                                                                                             action on
         web/nav.php                   web/menu.php                                                                                        mobile device
                                 V                             M           web/create_session          S
         Contains code for             Contains code for                   _data.php
         main navigation               navigation menu.                    Creation of session variables.
         toolbar.
                                                                       web/notice.php                  N
        web/header.php H               web/footer.php          F       Provides user-feedback                          Mobile            Mobile          Mobile          Mobile
        Code for HTML header           Code for HTML footer            for various pages.                              Device            Device          Device          Device
        connect_db.php      C          auth_user_test.php A            web/textmenu.php                T
        Code for connection            Code to check user’s            Contains code for a text-
        with database                  authorisation                   based menu.




Table structure for enviroNET Database:                                                                                                                               Markus Begiebing

     user_details                                                                                                                                                  primary key: user_id

        user_id              first_name              last_name                  email                                           rating            status
        1                    Christiana              Karayianni                 christiana.k@gmail.com                          0                 1
        2                    Markus                  Begiebing                  markusbegiebing@gmail.com                       0                 1


     passwords                                                                                                                                                 primary key: user_pass

        user_id              user_name               user_pass
        1                    Christiana              christianak
        2                    Markus                  markusb


     access_privileges

        user_id              user_type
        1                    User
        2                    Admin


     communities                                                                                                                                          primary key: community_id

        community_id         community_name
        1                    Latin-American
        2                    Student


     messages                                                                                                                                                 primary key: message_id

        message_id           user_id        community_id           creation_date         expiry_date        latitude      longitude        address        rating     status       keywords
        1                    2              1                      2005082210..          00000000           2             1                130, R..       0          1            Meeting
        2                    1              2                      2005082210..          20050930           1             1                               0          1            Restaur..


     projector

        user_id              timestamp           latitude          longitude
        1                    User                2                 1
        2                    Admin               1                 1


                                                                                                                                                                                              45
                                           about ADHOCIA

     What motivates us is to enhance people lives, especially those who are not in the position of
     power, and we use digital media to achieve it.

     We are a team of digital specialists, in a digital era. If we worked twenty years ago, we would
     still have the same spirit. Digital is just contemporary to us, but it is not to our ethos.

     So we want to liberate the media, if this happened twenty years ago, we might be thinking of
     creating a newspaper or a radio program to allow people to be heard, to let them express their
     opinion.

     We are not exposing this as a political statement, we are not rebellions, not in the conflict
     sense, we are more pragmatic and subtle. We really want to help people now, not to change
     the world (which we wouldn’t mind by the way). We simply believe that it will enhance people’s
     social experiences, their everyday life interactions by adding a virtual dimension to their
     physical environments.

     We do not just create; we create because we observe. We create for them and with them, we
     call them “users” because this is our digital jargon, but we think about us, human beings. We
     want to enhance people’s lives by adapting the imposed environment/lifestyle, and not the
     other way around.



                                                    team and roles
                     Christiana Karayianni                               Markus Begiebing
                     Project Manager                                     Coder
                     christiana.k@gmail.com                              and Database Developer
                                                                         markusbegiebing@gmail.com




                     Juan Garcia                                         Mazy Jane Burns
                     Technical Manager                                   In charge of
                     juanbau@gmail.com                                   Concept Development
                                                                         and Usability
                                                                         mazyjane@gmail.com



                     Marcela Brandi
                     Interface Designer
                     marcelabrandi@gmail.com




46
ENVIRONET Website
www.maimm.arts.ac.uk/~group1/

Access ENVIRONET
from your mobile phone
www.maimm.arts.ac.uk/~group1/
OR
www.maimm.arts.ac.uk/%7Egroup1/

See the process of the project
http://www.seedwiki.com/wiki/major_project_group_1/
major_project_group_1.cfm




                                                      47

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:2
posted:9/7/2011
language:English
pages:47