Interaction Design

Interaction design
Creating a ‘living campus’

© Oliver Tomlinson 2010
Contents
Discovery phase
Introduction 4
Potential users 5
Market research: Application design 6
Market research: Augmented reality 7
Market research: Map applications 10
Transformation phase
Application flow 16
Application screen layout structure 17
Laptop version: concept specification 18
Key design concepts 20
Transformation conclusions 26
Making phase
Final brand 28
User scenario one: The mouse 29
User scenario two: The owl 32
Future developments 35
2 © Oliver Tomlinson 2010

DISCOVERY TRANSFORMATION MAKING
DISCOVERY TRANSFORMA
Planning & Designing a Cross-platform Interface 3

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 it’s motion sensors, multi-touch screen and
augmented reality functions (in the 3GS model). It’s size
makes it a handy navigation tool, and by connecting to the
Internet it can be kept up-to-date in real time via it’s 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-departmental
knowledge 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 Talking buildiNGs
civic spaces, but also within buildings (remembering that
GPS location would not be available here) such as airports, TiNG
shopping centres or tube networks.

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.
“I’ve been here for two years now so just want to

know what is going on around the campus, mainly
what drinks are on offer in the student’s union,
but also to get some ideas for the projects we are
working on. Don’t really care about finding my way
around as I know it all already - but I did hear we
had a Robotics Department the other day...cool!”
The Cat
“I’m only visiting the campus for an event in the
Palmer Building. I’ve never been to the campus
before and am a bit worried about where I can park;
it seems such a large place and I’m always running
late so I don’t want to park too far away. I’ll
probably have a look on the web at home before I
leave, then I might use my iPhone if I get lost on
the campus. Oh I hope I’m not late!”
The Rabbit
“It’s my first day and everything is so new, I keep

getting told about things I should do and see, but
right now I’m totally lost - I would ask someone
the way but everyone looks so busy. I need a
quick reference to know where I am and what’s
going on around me; I’m sure my department said
something about a society I should join?”
The Mouse
“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 office each day I find it very difficult to ascertain
what developments have been happening around
campus; just this week I heard the Robotics Department
are giving a talk on augmented reality - excellent!”
The Owl
Market research
Application design
iPhone 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 TiNG will be a cross over between ‘Productivity
important tasks, focusing on the task and streamlining Application’ and an ‘Immersive Application’.
Tricky as each are at opposite ends of the
interactivity. They often organise data hierarchically, aesthetic scale – one functional and one
allowing the user to drill down to the desired level immersive.
• 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 don’t have time to look at
on the iPhone
• Metaphors – modelling app actions on real world Allow the user to interact with the TiNG map in
actions e.g. putting something in a folder. Tapping, an engaging way - like a real map.
sliding and flicking. People should think they are

touching something tangible – e.g. page flick
• 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 notifications means updates/new information on Push notifications should be used to highlight
the app is shown on the home screen even when it’s new tweets (would need to show which ones
are new since last use). It would need to link
not open (‘badging’). You can badge something in the in with the settings section of the iPhone, e.g.
tab bar e.g. when you have a voicemail. turning them off or making them audible etc.

Market research
Augmented reality
WorkSnug: http://worksnug.com/
An application available from the Apple store; it’s designed KEY POINT: Screen shots found on
to allow users to find work spaces within a city using AR. the internet should not be trusted as
The user can view a street through the camera so see local they are put there by developers and
information. are often Photoshopped to illustrate
concepts rather than actual working
examples.
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
it’s often difficult to find free work spaces for quick
meetings when away from the office.

Bionic Eye: http://www.bionic-eye.com/
A tool used to find local restaurants and directions. It looks
like this application is at concept stage and is not as refined
as WorkSnug.

Difficult to assess due to limited screen shots.
Overlapping of details could be an issue, as could
legibility of restaurant logos
Little directional information given on labels, but the
arrow system used on the pavement is a interesting
feature utilising the iPhone 3GS capabilities.
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.

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.

Difficult 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.
Directions are ‘as a crow flies’ and wouldn’t 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.
Seeing where Tweets are coming from is an
interesting idea, but only really useful in an open
environment such as a park. It could be a engaging
idea for music festivals or sports events.

Market research
Map applications
University College London

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 app’s potential.
Buildings on the map are clickable, giving further
details including building height which is useful
in London when scanning the skyline. Text size
is readable but the user can not zoom in or out
therefore location is difficult to perceive, especially
as the app does not use GPS location
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.

University of Sheffield

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
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 finder. However, lists are
very slow and not very intuitive, and the map does
not scale text size and isn’t clickable.
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 finder being a
popular function.

WalkBrighton city map

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.
This app matches Brighton’s wayfinding system,
so users should adapt to it’s 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.
A fantastic aid for a visitor on foot in Brighton, but a
few more features such as ‘what’s 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 an
uninspiring OS map.

University of Toronto

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.
As mentioned, once past the title screen the UoT
app follows standard Apple conventions, allowing
the 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).
Due to it’s 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 beneficial to
road users but limited for pedestrian movements
around the campus.

University of Toronto continued

DISCOVERY TRANSFORMATION MAKING
ISCOVERY TRANSFORMATION MAKING

Application flow
iPhone home
page
Welcome page TiNG
TiNG list
+
Edit TiNG list
(other locations)
Uni of Reading
Oxford Science Pk
Barbican Pick desired

location
University of
Reading
Use current
location?
Real-time
TiNG list 3D map Buildings Tweets
augmented reality
Link to Link to Centre on user Building catagory All Tweets

map building on map location (click or search)
Go to 3D map of Go to 3D map with

that TiNG focus on building Click building Building list Click entry
for details (click or search)
Link to
Tweets
Building details Building details Building Tweets
Go to Tweets (floating window) incl. recent Tweet (historical)
incl. recent Tweet
Add new Link to Building

Tweets Show on map Show on map
map
Search function Go to 3D map Go to 3D map

with text input
Edit list Building Tweets
Delete & re-order Go to Tweets

Application screen
layout structure
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.
Real-time
TiNG list 3D map Buildings Tweets
augmented reality
Edit TiNG list + Science & Buildings TiNG Tweets

Uni of Reading Tech Centre Typography Department
Sedignisque sum Tat etur ate nectiossimus
2 Departments Agricultural Department

Oxford Science Pk Sedignisque sum Tat etur ate nectiossimus
Barbican Lecture Theatres Meteorological Dept.

Libraries Typography Department

Unions & Food HUMMs Building

Accommodation
Back
TiNG Search Science & Lecture Theatres Typography Dept.

Uni Pop-up:
Tech Centre Pop-up: 09:31 10/02/10
University of Bath Most recent tweet

University of Oxford
Department Department Carrington
at the top; can be
Staffordshire University header with header with Henley forwarded or www.
most recent most recent Palmer
browser linked
tweet tweet 14:20 08/02/10
Historical flow down

View all View on View all
tweets map tweets and can be seen by
scrolling
Back
Done TiNG list + Palmer

Uni of Reading
Oxford Science Pk Address, contact details

and most recent tweet
Barbican
View all View on

tweets map

Laptop version: Concept
specification
The 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 profile.
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 notifications.
• Synchronise with your mobile platform.
• Adding building tweets if you have that privilege.
Synchronisation
• TiNG lists / new
environments added
• Add / remove TiNGs
• Updated tweets
TiNG
laptop
TiNG
mobile

As with the TiNG application layout, laptop design concepts

are indicative only so do not show actual colour choice or
correct dimensions.
TiNG Find a TiNG: Login:

HOME MY TiNG SEARCH Live tweets from all environments.......Live tweets from all
“Talking” Buildings
What is your
environment saying?
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 officimus 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
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
Company information: contact, about, legal etc.
View any TiNG environment.

See 3D maps and building
tweets, with links to adding
to mobile TiNG.
User video - how to

User area of subscribed use TiNG.
TiNGs, including preferences
for the mobile version.
Introduction page.

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
Experimenting with
different typefaces and
icon layout.
TiNG
TiNG
TiNG
Far left icon does not
work at actual size but
may be useful as a
brand logo. The icon
on the left is a simplified
version for the iPhone
desktop.

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.
Carrier 12:34 PM
Interaction
Buildings
methods
Departments
Lecture Theatres
Libraries
DRAG TAP
Unions and Food
Accommodation
Button variations
My TiNG Real-time Map Buildings Tweets Home Real-time Map Buildings Tweets
Carrier 12:34 PM Carrier 12:34 PM Lists can become

Buildings Lecture Theatres Lecture Theatres Info a little repetitive; to
add interest I may try
coloured buttons or
Palmer Building textured backgrounds.
Carrington Address: The University of Reading
Whiteknights
Carrier 12:34 PM
Reading
Henley Berkshire Buildings Lecture Theatres
RG6 6UR
Palmer Telephone: + 44 (0)118 987 5123 Carrington
Fax: +44 (0)118 931 4404 Henley
Palmer
Email: palmer@reading.ac.uk
View on Map See all Tweets

My TiNG Real-time Map Buildings Tweets
My TiNG Real-time Map Buildings Tweets My TiNG Real-time Map Buildings Tweets

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.
The iPhone camera has

a shutter button at the Interaction
Palmer Building bottom bar with a link to methods
10.03.2010
Induction today at 09:00... 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.
TAP VIEW
The building details and To prevent overlapping

Tweets ‘float’ over the of Tweet bubbles, the
actual building, with application will only
links to more detailed show the nearest to the
Home Real-time Map Buildings Tweets
Tweet history. user.
Palmer Building Palmer Building

10.03.2010 10.03.2010
Induction today at 09:00... Induction today at 09:00...
Home Real-time Map Buildings Tweets Home Real-time Map Buildings Tweets
As a Tweet ages, the

panel should fade,
giving the user an idea
of time.

Palmer Building
10.03.2010
Induction today at 09:00...
Carrington Building
08.01.2010
Peer support services...
Dolce Vita Cafe

05.03.2010
Free coffee with every five
coffees...
Hom
e
Real-
time
Map
Build
ings
Twee
ts
Palmer Building Palmer Building

10.03.2010 10.03.2010
Carrington Building
Induction today at 09:00... Induction today at 09:00...
08.01.2010
Dolce Vita Cafe
Dolce Vita Cafe Dolce Vita Cafe
05.03.2010
10.03.2010
Free coffee with every 5
10.03.2010
Free coffee with every 5
coffees... coffees... coffees...
Carrington Building
08.01.2010
Dolce Vita Cafe
05.03.2010
coffees...
Carrington Building
Dolce Vita Cafe
Where there is a close Overlapping was 08.01.2010
05.03.2010
overlap due to building causing legibility coffees...
proximity, the user can problems; here I
tap a window to bring it experiment with drop
to the front. shadow and colour.

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.
Carrier 12:34 PM
Interaction TAP
University of Reading methods select
PINCH EXPAND 2x DRAG DRAG

zoom out zoom in map tilt map pan
Carrier 12:34 PM Carrier 12:34 PM The map is always

University of Reading University of Reading initiated from a top-
down, North-up view.
As the user zooms
Wessex Hall Typography Dept.
in from above more
Reprographics information is detailed.
Bridges Hall
Labels of buildings
Typography Dept. can be clicked to link
Atmospheric Observatory
to information and
Science & Tech.
historical Tweet lists.
Fine Art
Psychology
Fusion Cafe
Agriculture Science & Technology

Two finger drag

tilts the overhead
map into a
perspective view
Carrier 12:34 PM
University of Reading
Carrier 12:34 PM Carrier 12:34 PM The map can be tilted

University of Reading University of Reading at any time using a
two-finger drag. Once
Wessex Hall
10.03.2010
Fire alarm at 14:00...
in this 3D view, the user
Bridges Hall
10.03.2010
Typography can see information on
Science & Tech
10.03.2010
Wessex Hall
10.03.2010
Fire alarm at 14:00... building Tweets.
10.03.2010
Fine Art
10.03.2010
The screenshot to the
Psychology Fire alarm at 14:00...
10.03.2010 far left illustrates an
FireAgriculture
alarm at 14:00...
10.03.2010
Science & Technology issue of overlapping
Fire alarm at 14:00... 10.03.2010
Fire alarm at 14:00... Tweets. When zoomed
in this is not so much
an issue, so a limit must
be put on the amount of
information visible.

Transformation
conclusions
Following 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.
KEY POINT
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.

DISCOVERY TRANSFORMATION MAKING
NSFORMATION MAKING

Final Brand
TiNG
TiNG
talking buildings
Carrier 12:34 PM
t alking buildings

User scenario one

The Mouse
It’s 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

can’t 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 it’s 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, Carrier 12:34 PM
and relate it to her current position. Once in the correct area, Buildings
she found the exact building using the phones’ augmented
reality function, and received visual confirmation that it P Cancel
TAP
was the correct building to enrol. Live building tweets also Palmer Building
enabled the Mouse to find the correct room in the Palmer
Permissions Office
Building for her enrolment.
Q W E R T Y U I O P
A S D F G H J K L
Z X C V B N M
.?123 space return
1: Building search
The mouse searches for the Palmer Building from
the Buildings function. As she types, the intelligent
search will provide potential matches.

Carrier 12:34 PM
2: Building information
Buildings Info Following a click on the Palmer Building tab in
the search, the mouse is taken to details of that
Palmer Building building. From here, she can view on map or see all
tweets. Tapping the details, e.g. phone number, will
Address: The University of Reading
Whiteknights activate a pop up with an option to use the details.
Reading
Berkshire
RG6 6UR
Telephone: + 44 (0)118 987 5123
Fax: +44 (0)118 931 4404
Email: palmer@reading.ac.uk
View on Map See all Tweets
Carrier 12:34 PM
University of Reading
TAP
Palmer Building
3: Map analysis
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 Home Real-time Map Buildings Tweets
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.

4: Augmented Reality
Palmer Building
08.03.2010
To check which building in her proximity is the
Enrolment for freshers Palmer Building, the mouse uses the Augmented
today at 12:00... Reality function in TiNG. Tapping the ‘Real-time’
button, the application switches to camera view
Dolce Vita Cafe
(portrait or landscape - if landscape the buttons will
28.01.2010
rotate),
Free coffee for every 5 and superimposes building information and
bought... Tweets onto the screen.
The Tweet on the right is fading due to its age.
Palmer Building
TAP 08.03.2010
Enrolment for freshers Dolce Vita Cafe
today at 12:00, please go
28.01.2010
Free coffee for every 5
to rooms 12 and 13. Blank
bought...
enrolment forms can be
found at www.reading.
ac.uk/freshers.
See on map Tweet history Forward
5: Building Tweets
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.

User scenario two
The Owl
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; he’s also found it useful to use
TiNG to inform other departments on new Typography events.
Owl gets to his office 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 notification on
their application.
At lunchtime, when the Owl is sitting in the canteen, he hears

the Meteorological Department Head is having difficulties
with visualising probability in his diagrams; Owl decides to
forward the tweet straight to him as an email, just incase he
missed the notification.
While sitting there, Owl wonders what the visiting lecturer’s

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 Push notifications alert
event at the Typography Department, and also forwarded 2 users to new Tweets
issued by buildings
the tweet to a friend via email while sitting in a canteen. He in their own TiNG
opened another TiNG location (Central St. Martins) to find out environments.
Tweets
what is going on in their Graphic Design Department.

Carrier 12:34 PM Carrier 12:34 PM
University of Reading University of Reading
Typography Dept.
12.03.2010
Visiting lecturer on
Probability graphics... Meteorology Dept.
01.02.2010
Probability issues in
weather forecasts...
FORWARD
1: Sharing knowledge
Hearing 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 efficient in
doing so. This example has linked two different
departments together, Typography and Meteorology,
and could promote an innovative solution to a
particular challenge.

Carrier 12:34 PM
2: TiNG environments
My TiNGs Edit
To add a new TiNG environment the owl tapped
the TiNG home button, this removes all other
buttons and shows what TiNG environments the
University of Reading 2 user currently is subscribing to. He then searched
for Central St. Martins and added to his list; he can
Central St. Martins Uni. always unsubscribe later by pressing the edit button.
Push notifications 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 first 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 first page.
Home
Carrier 12:34 PM
Tweets Graphic Design
08.03.2010
Visit Decode at the V&A:
http://www.vam.ac.uk/
microsites/decode/
27.01.2010
We’ve just heard that Sarah Martin
has won an award at the annual Sign
Design Society Awards. Well Done!
19.12.2009
Electrician wanted for design
3: Tweet history installation
The owl was interested what the Graphic 08.11.2009

Department in Central St. Martins had been Virtual worlds - the department have
Tweeting about recently. Once he had subscribed just added a new module in this area.
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.

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 benefits from
knowledge share and efficient wayfinding are proven.
The development of societies within particular environments

could be achieved if a ‘friend finder’ 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.

Photo taken by Jaap Oostinjen (www.flickr.com)

Interaction Design - Creating A Living Campus

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Interaction Design - Creating A Living Campus

Uploaded by

Copyright:

Available Formats

Creating a ‘living campus’

2 © Oliver Tomlinson 2010

Planning & Designing a Cross-platform Interface 3

This report illustrates the design process involved in creating

An iPhone is perfectly suited to providing a unique user

TiNG: Navigation and knowledge share

TiNG would be the umbrella tool under which various

Once proven in a university environment, this application

4 © Oliver Tomlinson 2010

Points below explain the potential users of the application

“I’ve been here for two years now so just want to

“It’s my first day and everything is so new, I keep

“I need to inform the students about a fantastic

• Immersive is focused on the user experience when

sliding and flicking. People should think they are

6 © Oliver Tomlinson 2010

Design & layout 

Planning & Designing a Cross-platform Interface 7

Design & layout 

8 © Oliver Tomlinson 2010

Twitter 360: http://www.bionic-eye.com/

Design & layout 

Planning & Designing a Cross-platform Interface 9

Design & layout 

10 © Oliver Tomlinson 2010

Design & layout 

Planning & Designing a Cross-platform Interface 11

Design & layout 

12 © Oliver Tomlinson 2010

Design & layout 

Planning & Designing a Cross-platform Interface 13

14 © Oliver Tomlinson 2010

ISCOVERY TRANSFORMATION MAKING

Planning & Designing a Cross-platform Interface 15

Welcome page TiNG

Barbican Pick desired

Link to Link to Centre on user Building catagory All Tweets

Go to 3D map of Go to 3D map with

Add new Link to Building

Search function Go to 3D map Go to 3D map

Edit list Building Tweets

Delete & re-order Go to Tweets

16 © Oliver Tomlinson 2010

Edit TiNG list + Science & Buildings TiNG Tweets

2 Departments Agricultural Department

Barbican Lecture Theatres Meteorological Dept.

Libraries Typography Department

Unions & Food HUMMs Building

TiNG Search Science & Lecture Theatres Typography Dept.

University of Bath Most recent tweet

tweet tweet 14:20 08/02/10

Historical flow down

Done TiNG list + Palmer

Oxford Science Pk Address, contact details

View all View on

Planning & Designing a Cross-platform Interface 17

18 © Oliver Tomlinson 2010

As with the TiNG application layout, laptop design concepts

TiNG Find a TiNG: Login:

Company information: contact, about, legal etc.

View any TiNG environment.

User video - how to