8/7/2019 Interaction Design - Creating a Living Campus
1/36
Interaction designCreating a living campus
Oliver Tomlinson 2010
8/7/2019 Interaction Design - Creating a Living Campus
2/36
Oliver Tomlinson 20102
Contents
Discovery phase
Transformation phase
Making phase
Introduction 4
Potential users 5
Market research: Application design 6
Market research: Augmented reality 7
Market research: Map applications 10
Application ow 16
Application screen layout structure 17
Laptop version: concept specication 18Key design concepts 20
Transformation conclusions 26
Final brand 28
User scenario one: The mouse 29
User scenario two: The owl 32
Future developments 35
8/7/2019 Interaction Design - Creating a Living Campus
3/36
Planning & Designing a Cross-platform Interface 3
DISCOVERYTRANSFORMATIONMAKING
DISCOVERYTRANSF
8/7/2019 Interaction Design - Creating a Living Campus
4/36
Oliver Tomlinson 20104
Introduction
This report illustrates the design process involved in creating
a cross-platform application, based on the iPhone 3GS
(mobile) and a sister laptop version (static web).
An iPhone is perfectly suited to providing a unique user
experience with its motion sensors, multi-touch screen and
augmented reality functions (in the 3GS model). Its size
makes it a handy navigation tool, and by connecting to the
Internet it can be kept up-to-date in real time via its laptop
equivalent.
TiNG: Navigation and knowledge share
The application designed in this report is called TiNG due
to its reference to talking buildings (the lowercase i is often
used in marketing iPhone applications). The aim of the
application is to aid navigation around a set area, such as a
campus, and bring buildings to life by incorporating Twitter
feeds in augmented reality. These building Tweets will be
used only to publicise news from that particular building or
department; the aim of this is to promote cross-departmentalknowledge share and greater understanding.
TiNG would be the umbrella tool under which various
establishments could provide maps to their own area; for
this report I shall be focusing on the University of Reading,
but keeping in mind the concept would need to adapt to any
number of building complexes.
Once proven in a university environment, this application
would be ideally suited to many situations where the user
wishes to gain a better understanding of a space, and know
what is happening within buildings or areas. It could be
used in large scale geographic areas such as campuses and
civic spaces, but also within buildings (remembering that
GPS location would not be available here) such as airports,
shopping centres or tube networks.
TalkingbuildiNGs
TiNG
8/7/2019 Interaction Design - Creating a Living Campus
5/36
DISCOVERYTRANSFORMATIONMAKING
Planning & Designing a Cross-platform Interface 5
Potential users
Points below explain the potential users of the application
and its web counterpart. Also highlighted are their particular
interests and requirements for consideration in the
Transformation phase.
Its my rst day and everything is so new, I keep
getting told about things I should do and see, but
right now Im totally lost - I would ask someone
the way but everyone looks so busy. I need a
quick reference to know where I am and whats
going on around me; Im sure my department said
something about a society I should join?
Im only visiting the campus for an event in thePalmer Building. Ive never been to the campusbefore and am a bit worried about where I can park;
it seems such a large place and Im always runninglate so I dont want to park too far away. Illprobably have alook on the web at home before Ileave, then I might use my iPhone if I get lost onthe campus. Oh I hope Im not late!
Ive been here for two years now so just want toknow what is going on around the campus, mainly
what drinks are on offer in the students union,but also to get some ideas for the projects we areworking on. Dont really care about nding my wayaround as I know it all already - but I did hear wehad a Robotics Department the other day...cool!
I need to inform the students about a fantastic
networking opportunity at an event in London next
week, come to think of it, I think it could be relevant to
students in one of the other departments too. Working
in my ofce each day I nd it very difcult to ascertain
what developments have been happeningaroundcampus; just this week I heard the Robotics Department
are giving a talk on augmented reality - excellent!
The Rabbit
The Cat
The Mouse
The Owl
8/7/2019 Interaction Design - Creating a Living Campus
6/36
Oliver Tomlinson 20106
Market research
Application designiPhone Human Interface Guidelines
Compact screen size: 480x320
One screen at a time
One application at a time when the phone is
answered then all open applications will turn off (need
to return to the same point)
Minimal user help make it simple and follow
conventions
What is user motivation? What will be their experience?
What is the goal?
How is the useful information displayed?
Productivity apps enable users to accomplish
important tasks, focusing on the task and streamlining
interactivity. They often organise data hierarchically,
allowing the user to drill down to the desired level
Immersive is focused on the user experience when
viewing content. They often hide much of the user
interface to provide a graphic rich screen
Think about the extra functions available in the desktop
version things that people dont have time to look at
on the iPhone
Metaphors modelling app actions on real world
actions e.g. putting something in a folder. Tapping,
sliding and icking. People should think they are
touching something tangible e.g. page ick
Provide feedback, visually, audibly or physically, so the
user knows something has happened
Use branding in a subtle way colours etc Upon starting the app should show a launch image
(portrait) then restore the state it was last used
Push notications means updates/new information on
the app is shown on the home screen even when its
not open (badging). You can badge something in the
tab bar e.g. when you have a voicemail.
TiNG will be a cross over between Productivity
Application and an Immersive Application.
Tricky as each are at opposite ends of the
aesthetic scale one functional and one
immersive.
Allow the user to interact with the TiNG map in
an engaging way - like a real map.
Push notications should be used to highlight
new tweets (would need to show which ones
are new since last use). It would need to link
in with the settings section of the iPhone, e.g.
turning them off or making them audible etc.
8/7/2019 Interaction Design - Creating a Living Campus
7/36
DISCOVERYTRANSFORMATIONMAKING
Planning & Designing a Cross-platform Interface 7
Market research
Augmented reality
KEY POINT: Screen shots found on
the internet should not be trusted as
they are put there by developers and
are often Photoshopped to illustrate
concepts rather than actual working
examples.
WorkSnug: http://worksnug.com/
An application available from the Apple store; its designed
to allow users to nd work spaces within a city using AR.
The user can view a street through the camera so see local
information.
Design & layout
Clean with a great use of transparency on the labels.Text spacing helps group information as does the
use of colour.
Usability
Can be used portrait and landscape to add to
screen space. Labels give distances but do not
seem to give directional information.
Marketability
A very useful tool for business users in London as
its often difcult to nd free work spaces for quick
meetings when away from the ofce.
8/7/2019 Interaction Design - Creating a Living Campus
8/36
Oliver Tomlinson 20108
Bionic Eye: http://www.bionic-eye.com/
A tool used to nd local restaurants and directions. It looks
like this application is at concept stage and is not as rened
as WorkSnug.
Design & layout
Difcult to assess due to limited screen shots.
Overlapping of details could be an issue, as could
legibility of restaurant logos
Usability
Little directional information given on labels, but the
arrow system used on the pavement is a interesting
feature utilising the iPhone 3GS capabilities.
Marketability
The map element of this application could be useful
for someone looking for a place to eat, but the AR
seems a little wasted as the user would surely see
the restaurant signage along the street. However,
in the Far East this app could be very useful when
looking at high-rise buildings with many different
businesses in the same location.
8/7/2019 Interaction Design - Creating a Living Campus
9/36
DISCOVERYTRANSFORMATIONMAKING
Planning & Designing a Cross-platform Interface 9
Twitter 360: http://www.bionic-eye.com/
From the same developer as Bionic Eye, it also looks like
a concept stage application. Its purpose is to link AR with
Twitter feeds.
Design & layout
Difcult to assess due to limited screen shots that
look heavily Photoshopped. At this stage it looks
very similar to the bionic eye. AR can not appear
under a real object so a halo around a user is
misleading.
Usability
Directions are as a crow ies and wouldnt take
into account obstacles such as buildings. Labelling
friends in a crowd is useful but inclusion of a Tweet
would have been a good addition.
Marketability
Seeing where Tweets are coming from is an
interesting idea, but only really useful in an openenvironment such as a park. It could be a engaging
idea for music festivals or sports events.
8/7/2019 Interaction Design - Creating a Living Campus
10/36
Oliver Tomlinson 201010
Market research
Map applicationsUniversity College London
Design & layout
Simple but following the Apple guidelines well. Icons
are clear and colour usages consistent. The web
links to the app are however uninspiring and give
little indication of the apps potential.
Usability
Buildings on the map are clickable, giving further
details including building height which is usefulin London when scanning the skyline. Text size
is readable but the user can not zoom in or out
therefore location is difcult to perceive, especially
as the app does not use GPS location
Marketability
As a student or visitor to the UCL site this map
would be very useful in planning a journey, but
lack of GPS may deter some users to use it on the
move. Not being live i.e. showing recent news or
events, may prevent continued use.
8/7/2019 Interaction Design - Creating a Living Campus
11/36
DISCOVERYTRANSFORMATIONMAKING
Planning & Designing a Cross-platform Interface 11
University of Shefeld
Design & layout
It feels like this app is trying to pack too much into
one programme. Styles are mixed between the
different features, with a distracting background
and developer logo. The map has a nice feel to
it, bouncing off the edges if pushed too far, but is
bitmapped when zoomed to maximum
Usability
This is a thorough app, containing a number of
different functions to act as a personal organiser
while at university. Including a GPS function adds a
number of features to aid usability such as a location
on the map and a friend nder. However, lists are
very slow and not very intuitive, and the map does
not scale text size and isnt clickable.
Marketability
Students would need to be organised to use this
app, but if the features work it could be a useful
tool for them and I imagine the friend nder being a
popular function.
8/7/2019 Interaction Design - Creating a Living Campus
12/36
Oliver Tomlinson 201012
WalkBrighton city map
Design & layout
Simplicity is key with this app, and with just three
functions it is very slick. The map design is key,
and luckily the developers have done a great job
in colour choices and text layout. 3D buildings
break up the landscape and the nightlife function is
applied very well.
Usability
This app matches Brightons waynding system,
so users should adapt to its style and orientation
well. As you zoom into the map (by pinching)
more information becomes available to you, with
directional arrows indicating locations of off-screen
landmarks. The only downside is that the map is not
searchable.
Marketability
A fantastic aid for a visitor on foot in Brighton, but a
few more features such as whats on or a search
ability would make the app slightly more interesting
for repeat usage. The Council are quite behind
on their website with no links to the app and anuninspiring OS map.
8/7/2019 Interaction Design - Creating a Living Campus
13/36
DISCOVERYTRANSFORMATIONMAKING
Planning & Designing a Cross-platform Interface 13
University of Toronto
Design & layout
The initial screen is a little garish with clunky icons
and inconsistent colouring, but once past this, lists
are Apple standard and the map is familiar Google
Maps with pins and shadowed labels.
Usability
As mentioned, once past the title screen the UoT
app follows standard Apple conventions, allowingthe user to understand it quickly. Interaction
between this app and other iPhone functions is
seamless, allowing phone calls and web browsing
from the main map. However, the Google Map
style does not give the depth of particular campus
buildings, and it does not match the campus map
style seen on their website; but this could be seen
as a good thing as the campus maps are poorly
designed (screenshots on next page).
Marketability
Due to its ease of use, I would expect to see this
app used as a phone listing more than a navigation
device. Use of Google maps would be benecial toroad users but limited for pedestrian movements
around the campus.
8/7/2019 Interaction Design - Creating a Living Campus
14/36
Oliver Tomlinson 201014
University of Toronto continued
8/7/2019 Interaction Design - Creating a Living Campus
15/36
Planning & Designing a Cross-platform Interface 15
DISCOVERYTRANSFORMATIONMAKING
ERYTRANSFORMATIONMA
8/7/2019 Interaction Design - Creating a Living Campus
16/36
8/7/2019 Interaction Design - Creating a Living Campus
17/36
Planning & Designing a Cross-platform Interface 17
DISCOVERYTRANSFORMATIONMAKING
Application screen
layout structure
TiNG listReal-time
augmented reality3D map Buildings Tweets
TiNG list Buildings TiNG Tweets
Typography Dept.Lecture Theatres
Palmer
TiNG Search
TiNG listDone +
Uni of Reading
Oxford Science Pk
Barbican
Uni of Reading
Oxford Science Pk
Barbican
2
Edit + Science &
Tech Centre
Science &
Tech Centre
Back
Back
Pop-up:Departmentheader withmost recent
tweetView on
mapView alltweets
View onmap
View alltweets
Pop-up:Departmentheader withmost recent
tweetView alltweets
Departments
Lecture Theatres
Libraries
Unions & Food
Accommodation
Typography DepartmentSedignisque sum Tat etur ate nectiossimus
Agricultural DepartmentSedignisque sum Tat etur ate nectiossimus
Meteorological Dept.Sedignisque sum Tat etur ate nectiossimus
HUMMs BuildingSedignisque sum Tat etur ate nectiossimus
Carrington
Henley
Palmer
Address, contact details
and most recent tweet
University of Bath
University of Oxford
Staffordshire University
This page illustrates the screen layout for the main features of
TiNG. They are indicative only so do not show actual colour
choice or correct dimensions.
Uni
Most recent tweet
at the top; can be
forwarded or www.
browser linked
Historical ow down
and can be seen by
scrolling
09:31 10/02/10
14:20 08/02/10
Typography DepartmentSedignisque sum Tat etur ate nectiossimus
8/7/2019 Interaction Design - Creating a Living Campus
18/36
Oliver Tomlinson 201018
Laptop version: Concept
specicationThe laptop version of TiNG can be used as a browsing tool,
searching through environments and reading recent tweets
from buildings. It also the area for adding tweets, if you have
those rights, from your own prole.
Search
TiNG environments, e.g. University of Reading, Oxford
Science Park, Eden Project.
Particular buildings - information such as location,tweets, address etc.
Browse
Environment maps - view online and print out.
Building tweets.
Update
Your own selection of environments.
Personal preferences such as push notications.
Synchronise with your mobile platform.
Adding building tweets if you have that privilege.
TiNGmobile
TiNGlaptop
Synchronisation
TiNG lists / new
environments added
Add / remove TiNGs
Updated tweets
8/7/2019 Interaction Design - Creating a Living Campus
19/36
Planning & Designing a Cross-platform Interface 19
DISCOVERYTRANSFORMATIONMAKING
TiNG Find a TiNG: Login:
Company information: contact, about, legal etc.
As with the TiNG application layout, laptop design concepts
are indicative only so do not show actual colour choice or
correct dimensions.
Live tweets from all environments.......Live tweets from allMY TiNG SEARCHHOME
Lit quamet vel et expelent moluptat.Fici te verspid
ellabor eprovit ut quosa dolupta duciendae vel mo
el illaciur ratiatia net ut vel et, vererum idebis re
Lit quamet vel et expelent moluptat.Fici te verspid ellabor
eprovit ut quosa dolupta duciendae vel mo el illaciur ratiatia net
ut vel et, vererum idebis reMin nus pellita sandam re nihitatibus
evellat inciis aut fuga. Et quianimpossi ut ofcimus doluptae nul-
lecus que qui omnia et pore nimusani as accus et, con nempo-
runt eat quatecu sdaerio stinis pre lissit, cus quodign isciduciis
reperum quae ernatem iderum laborione core milit ad
Talking Buildings
What is yourenvironment saying?
User video - how to
use TiNG.
Introduction page.
User area of subscribed
TiNGs, including preferences
for the mobile version.
View any TiNG environment.
See 3D maps and building
tweets, with links to adding
to mobile TiNG.
8/7/2019 Interaction Design - Creating a Living Campus
20/36
Oliver Tomlinson 201020
Key design concepts
Brand
To differentiate from all other applications.
All other design elements such as colour and structure
should follow the brand.
A strong brand will engage the user.
TiNG
TiNG
TiNGTiNG
Far left icon does not
work at actual size but
may be useful as abrand logo. The icon
on the left is a simplied
version for the iPhone
desktop.
Experimenting with
different typefaces and
icon layout.
8/7/2019 Interaction Design - Creating a Living Campus
21/36
Planning & Designing a Cross-platform Interface 21
DISCOVERYTRANSFORMATIONMAKING
Lists
Scroll up and down, and select with a tap.
Breadcrumbs are design elements to allow the user to
go back to the start.
Follow current Apple conventions.
Button variations
Lists can become
a little repetitive; to
add interest I may try
coloured buttons ortextured backgrounds.
Carrier
Carrier Carrier
12:34 PM
12:34 PM 12:34 PM
My TiNG
My TiNG My TiNG
HomeReal-time
Real-time Real-time
Real-timeMap
Map Map
MapBuildings
Buildings Buildings
BuildingsTweets
Tweets Tweets
Tweets
Buildings
Lecture Theatres Info
Departments
Lecture Theatres
Libraries
Unions and Food
Accommodation
Carrington
Henley
Palmer
Palmer Building
Address: The University of Reading
Whiteknights
Reading
Berkshire
RG6 6UR
Telephone: + 44 (0)118 987 5123
Fax: +44 (0)118 931 4404
Email: [email protected]
Buildings
C ar rier 1 2: 34 P M
M y T iN G R ea l- ti me M ap Buildings Tweets
Lecture Theatres
Carrington
Henley
Palmer
Buildings
Lecture Theatres
View on Map See all Tweets
Interactionmethods
DRAG TAP
8/7/2019 Interaction Design - Creating a Living Campus
22/36
Oliver Tomlinson 201022
Augmented reality
A new feature of the iPhone 3GS, utilising the built
in camera to view a real-time image with graphic
information superimposed.
Ability to tap information for more details.
To use conventional design used by the camera
function of the phone.
Tweet style to be at correct scale in comparison to the
buildings.
Home Real-time Ma p Bui ldi ngs Twe et s
The iPhone camera has
a shutter button at the
bottom bar with a link to
the photo album. I have
replaced this with my
TiNG toolbar; this allows
easy links back to the
other TiNG functions,
and reinforcement that
the user is still within the
application.
The building details and
Tweets oat over the
actual building, with
links to more detailed
Tweet history.
To prevent overlapping
of Tweet bubbles, the
application will only
show the nearest to the
user.
As a Tweet ages, thepanel should fade,
giving the user an idea
of time.
Palmer Building10.03.2010
Induction today at 09:00...
Interaction
methods
TAP VIEW
Home HomeReal-time Real-timeMap MapBuildings BuildingsTweets Tweets
Palmer Building10.03.2010
Induction today at 09:00...
Palmer Building10.03.2010
Induction today at 09:00...
8/7/2019 Interaction Design - Creating a Living Campus
23/36
Planning & Designing a Cross-platform Interface 23
DISCOVERYTRANSFORMATIONMAKING
Where there is a closeoverlap due to building
proximity, the user can
tap a window to bring it
to the front.
Overlapping wascausing legibility
problems; here I
experiment with drop
shadow and colour.
Home HomeReal-time Real-timeMap MapBuildings BuildingsTweets Tweets
Dolce Vita Cafe10.03.2010
Free coffee with evcoffees...
Palmer Building10.03.2010
Induction today at 09:00...
Palmer Building10.03.2010
Induction today at 09:00...
Dolce Vita Cafe10.03.2010
Free coffee with evcoffees...
Palmer Building10.03.2010
Induction today at 09:00...
Carrington Building08.01.2010
Peer support services...
Dolce Vita Cafe05.03.2010
Free coffee with every vecoffees...
Carrington Building08.01.2010
Peer support services...
Carrington Building08.01.2010
Peer support services...
Carrington Building08.01.2010
Peer support services...
Dolce Vita Cafe05.03.2010
Free coffee with every vecoffees...
Dolce Vita Cafe
05.03.2010
Free coffee with every vecoffees...
Dolce Vita Cafe05.03.2010
Free coffee with every vecoffees...
HomeReal-time
MapBuildings
Tweets
8/7/2019 Interaction Design - Creating a Living Campus
24/36
Oliver Tomlinson 201024
3D map: including tweets
Multi-view from different angles and scales, using
pinch and drag.
Tweet style to be scalable to give appearance of depth.
More information seen as the user zooms in.
Always north-up display to prevent issues with text
readability.
Interaction
methods
PINCH
zoom out
EXPAND
zoom in
2x DRAG
map tilt
DRAG
map pan
TAP
select
Carrier
Carrier Carrier
12:34 PM
12:34 PM 12:34 PM
University of Reading
University of Reading University of Reading
Home
Home Home
Real-time
Real-time Real-time
Map
Map Map
Buildings
Buildings Buildings
Tweets
Tweets Tweets
Bridges Hall
Science & Tech.
Psychology
Agriculture
Fine Art
Typography Dept.
Wessex Hall
Atmospheric Observatory
Science & Technology
Fusion Cafe
Typograph
Reprogr
The map is always
initiated from a top-
down, North-up view.
As the user zoomsin from above more
information is detailed.
Labels of buildings
can be clicked to link
to information and
historical Tweet lists.
8/7/2019 Interaction Design - Creating a Living Campus
25/36
Planning & Designing a Cross-platform Interface 25
DISCOVERYTRANSFORMATIONMAKING
Carrier
Carrier Carrier
12:34 PM
12:34 PM 12:34 PM
University of Reading
University of Reading University of Reading
Home
Home Home
Real-time
Real-time Real-time
Map
Map Map
Buildings
Buildings Buildings
Tweets
Tweets Tweets
Wessex Hall10.03.2010
Fire alarm at 14:00...Bridges Hall10.03.2010
Fire alarm at 14:00...
Wessex Hall10.03.2010
Fire alarm at 14:00...Science & Tech10.03.2010
Fire alarm at 14:00...
Fine Art10.03.2010
Fire alarm at 14:00...Psychology10.03.2010
Fire alarm at 14:00...Agriculture10.03.2010
Fire alarm at 14:00...
Science & Technology10.03.2010
Fire alarm at 14:00...
Typography10.03.2010
Fire alarm at 14:00...
The map can be tilted
at any time using a
two-nger drag. Once
in this 3D view, the usercan see information on
building Tweets.
The screenshot to the
far left illustrates an
issue of overlapping
Tweets. When zoomed
in this is not so much
an issue, so a limit must
be put on the amount of
information visible.
Two nger drag
tilts the overhead
map into a
perspective view
8/7/2019 Interaction Design - Creating a Living Campus
26/36
Oliver Tomlinson 201026
Transformation
conclusionsFollowing the transformation phase of this report, the
following points have been concluded:
There are three key elements to the TiNG structure; list
design, augmented reality portrayal, and map design
incorporating Tweet details.
The laptop version of TiNG is most likely to be used by
department heads when adding new building Tweets.
TiNG tool-bar will be consistent throughout the
application functions, because of this there will not be
a landscape version.
Colour schemes and design elements are to stem from
the TiNG brand as long as readability and usability are
not compromised.
Orange colour to be reserved for areas or elements
where user interaction is possible.
Tweet visual language will be dynamic, by portraying
Tweet age as a transparency.
Where possible follow Apple guidelines on element
structure and typography e.g. Helvetica, but vary with
texture and colour.
Scrollable elements such as maps and lists will be a
soft touch, i.e. a slight bounce to the screen image as
the user scrolls to document boundaries or limits.
The main function of TiNG is
to portray a dynamic, living
environment, i.e. talking buildings.
The user must believe that new
information will be available to them
so they do not become bored with
the application. Because of this,
the portrayal of information must be
clear, and the environment engaging
while following a strong brand.
KEY POINT
8/7/2019 Interaction Design - Creating a Living Campus
27/36
Planning & Designing a Cross-platform Interface 27
DISCOVERYTRANSFORMATIONMAKING
RMATIONMAKING
8/7/2019 Interaction Design - Creating a Living Campus
28/36
Oliver Tomlinson 201028
Final Brand
Home
Home
Real-time
Real-time
Map
Map
Buildings
Buildings
Tweets
Tweets
TiNG
TiNG
Carrier 12:34 PM
ta lk ing bui ldings
talking bui ldings
8/7/2019 Interaction Design - Creating a Living Campus
29/36
Planning & Designing a Cross-platform Interface 29
DISCOVERYTRANSFORMATIONMAKING
Its freshers week at the University of Reading, and everything
is so new to the Mouse as she wonders around the university
campus; she has never been to Reading before and has no
understanding of the campus layout.
Luckily the Mouse saw a link to the TiNG application on the
main university homepage, and downloaded it before her
arrival. She needs to enrol at the Palmer building so looks on
the TiNG map to see where it is in relation to her halls.
The Mouse follows signs to the centre of campus but then
cant see which of the buildings is the Palmer building, so she
uses the augmented reality function of TiNG to pan around
the buildings using the iPhone camera; she can see in real-
time which of the buildings is Palmer, and is comforted to
see a tweet emerging from the building stating its the place
to enrol. Tapping the live tweet she can look for the room she
needs to go to, and all historical messages from the Palmer
Building.
Outcomes
The Mouse could see her destination from the map overview,
and relate it to her current position. Once in the correct area,
she found the exact building using the phones augmented
reality function, and received visual conrmation that it
was the correct building to enrol. Live building tweets also
enabled the Mouse to nd the correct room in the Palmer
Building for her enrolment.
User scenario one
The Mouse
Home Real-time Map Buildings Tweets
Carrier 12:34 PM
Buildings
Q W E R T Y U I O
A S D F G H J K L
Z X C V B N M
space.?123 return
P
P
Palmer Building
Permissions Ofce
Cancel
1: Building search
The mouse searches for the Palmer Building from
the Buildings function. As she types, the intelligent
search will provide potential matches.
TAP
8/7/2019 Interaction Design - Creating a Living Campus
30/36
Oliver Tomlinson 201030
Home
Home
Real-time
Real-time Map Buildings
Tweets
Tweets
Carrier 12:34 PM
Carrier 12:34 PM
Info
University of Reading
Palmer Building
Address: The University of Reading
Whiteknights
ReadingBerkshire
RG6 6UR
Telephone: + 44 (0)118 987 5123
Fax: +44 (0)118 931 4404
Email: [email protected]
Buildings
View on Map See all Tweets
Map Buildings
2: Building information
3: Map analysis
Following a click on the Palmer Building tab in
the search, the mouse is taken to details of that
building. From here, she can view on map or see all
tweets. Tapping the details, e.g. phone number, will
activate a pop up with an option to use the details.
The mouse is now taken to the map of the University
of Reading TiNG. Because she linked here from
the search function, the building she is interested
in is highlighted blue, and because she is currently
on campus her location and orientation are also
plotted. The view is top down, North up.
TiNG will zoom to an appropriate level to enable a
view of both points; if the mouse were to zoom in
(using expand), more map details would be shown.
TAP
Palmer Building
8/7/2019 Interaction Design - Creating a Living Campus
31/36
Planning & Designing a Cross-platform Interface 31
DISCOVERYTRANSFORMATIONMAKING
Home
Home
Buildings
Buildings
Tweets
Tweets
4: Augmented Reality
5: Building Tweets
To check which building in her proximity is the
Palmer Building, the mouse uses the Augmented
Reality function in TiNG. Tapping the Real-time
button, the application switches to camera view
(portrait or landscape - if landscape the buttons will
rotate), and superimposes building information andTweets onto the screen.
The Tweet on the right is fading due to its age.
Tapping a Tweet box in the Real-time camera
view initiates a pop up giving more details of that
particular Tweet. The pop up gives options to view
all Tweets from that particular building, view on map
or forward via email.
TAP
Real-time
Real-time
Map
Map
Palmer Building
08.03.2010
Enrolment for fresherstoday at 12:00...
Dolce V
28.01.2010
Free coffbought...
Dolce V
28.01.2010
Free coffbought...
Palmer Building
08.03.2010
Enrolment for fresherstoday at 12:00, please goto rooms 12 and 13. Blankenrolment forms can befound at www.reading.ac.uk/freshers.
S ee o n m ap Tw ee t h is to ry F or wa rd
8/7/2019 Interaction Design - Creating a Living Campus
32/36
Oliver Tomlinson 201032
The Owl has been lecturing at the University of Reading
for 8 years and is currently the Head of the Typography
Department. This year he has started using TiNG to keep his
students and colleagues up-to-date with events and news
related to his department; hes also found it useful to use
TiNG to inform other departments on new Typography events.
Owl gets to his ofce in the morning and hears from a
colleague that the Typography department has a visiting
lecturer to talk about probability graphics; this will be an
interesting lecture for the students and may be of use to other
departments on campus. Owl logs onto the University of
Reading (UoR) TiNG site to post a tweet from the Typography
department. This post on the website is synchronised with all
users of the UoR TiNG so they all get a push notication on
their application.
At lunchtime, when the Owl is sitting in the canteen, he hears
the Meteorological Department Head is having difculties
with visualising probability in his diagrams; Owl decides toforward the tweet straight to him as an email, just incase he
missed the notication.
While sitting there, Owl wonders what the visiting lecturers
university is like, and what has been happening in their
Graphic Design Department. He uses the TiNG application to
load another location (Central St. Martins College of Art), then
looks at the historical tweets from the department.
Outcomes
The Owl has informed all subscribers of the UoR TiNG of an
event at the Typography Department, and also forwarded
the tweet to a friend via email while sitting in a canteen. He
opened another TiNG location (Central St. Martins) to nd out
what is going on in their Graphic Design Department.
User scenario two
The Owl
Tweets
2Push notications alert
users to new Tweets
issued by buildings
in their own TiNG
environments.
8/7/2019 Interaction Design - Creating a Living Campus
33/36
Planning & Designing a Cross-platform Interface 33
DISCOVERYTRANSFORMATIONMAKING
1: Sharing knowledgeHearing that the Meteorology Department were
having a few problems illustrating probability, the
owl forwarded a relevant Tweet to the head of
department via an email.
Sharing knowledge is a key element of the TiNG
application and it must be quick and efcient in
doing so. This example has linked two different
departments together, Typography and Meteorology,
and could promote an innovative solution to a
particular challenge.
Home HomeReal-time Real-timeMap MapBuildings BuildingsTweets Tweets
Carrier 12:34 PM Carrier 12:34 PM
University of Reading University of Reading
Typography Dept.
12.03.2010
Visiting lecturer onProbability graphics...
Meteorology Dept.
01.02.2010
Probability issues inweather forecasts...
FORWARD
8/7/2019 Interaction Design - Creating a Living Campus
34/36
Oliver Tomlinson 201034
Home
Carrier 12:34 PM
My TiNGs
University of Reading
Central St. Martins Uni.
2
Edit
2: TiNG environments
3: Tweet history
To add a new TiNG environment the owl tapped
the TiNG home button, this removes all other
buttons and shows what TiNG environments the
user currently is subscribing to. He then searched
for Central St. Martins and added to his list; he can
always unsubscribe later by pressing the edit button.
Push notications are shown where new Tweets
have been posted since his last visit. To go to the
environment the owl just needs to tap the one he is
interested in, this will open the 3D map of that area
(with the function buttons re-appearing).
NOTE: When the owl rst used the application, this
screen was the opener, but once he searched for
and chose University of Reading, TiNG continued to
open with the UoR 3D map as the rst page.
The owl was interested what the Graphic
Department in Central St. Martins had been
Tweeting about recently. Once he had subscribed
to that environment, he tapped the Tweets function
and selected Graphics Department to see all their
Tweet history. From here he can forward via sms or
email, and also return to the UoR environment by
tapping TiNG home.
Carrier 12:34 PM
Graphic DesignTweets
08.03.2010
Visit Decode at the V&A:http://www.vam.ac.uk/microsites/decode/
27.01.2010
Weve just heard that Sarah Martinhas won an award at the annual SignDesign Society Awards. Well Done!
19.12.2009
Electrician wanted for designinstallation
08.11.2009
Home Real-time Map Buildings Tweets
8/7/2019 Interaction Design - Creating a Living Campus
35/36
Planning & Designing a Cross-platform Interface 35
DISCOVERYTRANSFORMATIONMAKING
Future developments
I would imagine the TiNG application growing as more
environments started creating their own space. Creating the
3D environments could be time consuming, but I would see
the environments paying for this work once benets from
knowledge share and efcient waynding are proven.
The development of societies within particular environments
could be achieved if a friend nder was added to the
concept; this function would prove more useful for academic
institutions rather than work areas or commercial shopping
centres.
Another interesting function to develop would be transparent
buildings, allowing users to navigate within buildings as well
as outside.
8/7/2019 Interaction Design - Creating a Living Campus
36/36