Interaction Design Proposal by byrnetown73

VIEWS: 0 PAGES: 35

									                                         09

        

                               20
May





Interaction
Design
Proposal


Prepared
by:
Irina
Povjakel



Student
number:
14000

Table of Contents
Executive
summary .......................................................................................................... 3

Summary
of
Microsoft
Surface ...................................................................................... 4

  History ........................................................................................................................................... 4

  Features......................................................................................................................................... 6

  Input ............................................................................................................................................... 7

  Output ............................................................................................................................................ 8

  Touch
screen
Pros
and
Cons................................................................................................... 9

  Strengths .....................................................................................................................................10

  Weaknesses................................................................................................................................10

Overview
of
existing
interfaces
and
software ...................................................... 11

Design
and
Interaction
guidelines............................................................................ 13

  Design
concept. .........................................................................................................................13

  Interaction
Guidelines............................................................................................................14

Overview
of
the
redesign ............................................................................................. 22

  Considerations ..........................................................................................................................22

  Constraints .................................................................................................................................22

  Problems .....................................................................................................................................22

Screen
designs
for
Microsoft
Surface....................................................................... 23

Conclusion......................................................................................................................... 34

References ........................................................................................................................ 35












                                                                                                                                                     2

Executive summary



    In
this
proposal
I’m
going
to
redesign
tfl.gov.uk
website
for
multi‐touch

Microsoft
Surface.



    Microsoft
Surface
is
the
next
generation
of
customer
digital
interaction.
“It

breaks
down
traditional
barriers
between
people
and
technology.”
[1]
It
has

natural
user
interface.

Microsoft
Surface
allows
people
to
interact
with

technology
with
their
hands,
with
gesture
and
using
real
world
objects.

    Tfl.gov.uk
intend
for
use
by
people
living
in
London.
This
website
allows
to

check
availably
of
routes
depend
on
preferences
of
user.



    In
this
proposal
first,
I’ve
done
research
about
Microsoft
Surface
and
it’s

existing
interfaces.
Then
I
explored
design
and
interaction
guidelines.
And

according
to
the
purpose
of
the
website
and
taking
in
consideration
the

guidelines
I
did
redesign.


    As
result
you
will
see
layout
of
tfl.gov.uk
for
Microsoft
Surface
that
include
a

description
of
the
steps
required
to
do
some
tasks.














                                                                                    3

Summary of Microsoft
Surface
    

     “Microsoft
Surface
is
a
revolutionary
surface
computing
platform
that

responds
to
natural
hand
gestures
and
real
world
objects,
helping
people

interact
with
technology
in
a
way
that
is
simple,
intuitive—and
unprecedented.

Using
this
innovative
technology,
multiple
users
can
manipulate
and
maneuver

digital
content,
drive
specific
interactions
with
objects,
and
allow
for
devices
to

connect
and
engage
with
Microsoft
Surface.
The
360‐degree
user
interface

invites
individuals
and
groups
to
discover
and
interact
with
technology
in
a
way

that
helps
inspire
cutting‐edge,
engaging
experiences
and
transactions
that

differentiate
your
business.”
[1]



    

History




   In
1982
multi‐touch
tablets
and
screens
were
done
at
the
University
of

Toronto
and
Bell
Labs.


    In
2001
Steven
Bathiche
of
Microsoft
Hardware
and
Andy
Wilson
of

Microsoft
Research
initially
conceptualized
the
product
idea
for
Surface.
[2]

   In
October
2001,
a
virtual
team
was
formed
with
Bathiche
and
Wilson
as
key

members,
to
bring
the
idea
to
the
next
stage
of
development
(fig.1).





                                                                 

    Fig.
1.
One
of
the
first
prototypes
of
Microsoft
Surface
in
2001.






                                                                                 4

    In
2003,
the
idea
was
presented
to
the
Microsoft
Chairman
Bill
Gates.
Later,

the
virtual
team
was
expanded
and
a
prototype
named
T1
(Fig.
2)
was
produced

within
a
month.
The
prototype
was
based
on
an
IKEA
table
with
a
hole
cut
in
the

top
and
a
sheet
of
architect
vellum
used
as
a
diffuser.
[2]The
team
also
developed

some
applications,
including
pinball,
a
photo
browser
and
a
video
puzzle.






                                                       

    Fig.
2.
Prototype
based
on
IKEA
table
named
T1.

    2004
Microsoft
built
more
than
85
early
prototypes
for
Surface.


    2005
The
final
hardware
design
was
completed.





                                                                    

    Fig.
3.
Microsoft
Surface
today.

     On
April
17th
2008,
Microsoft
Surface
launching
at
5
AT&T
stores
across
the

U.S.
At
the
stores,
Surface
will
help
customers
shop
for
mobile
phones.

    In
June
2008
Harrah’s
Entertainment
launched
Microsoft
Surface
at
Rio
iBar

and
Disneyland
launched
it
in
Tomorrow
land,
Innovations
Dream
Home[2].







                                                                                5

    On
August
13,
2008
Sheraton
Hotels
introduced
Surface
in
their
hotel

lobbies
at
5
locations[2].


   On
September
8,
2008
MSNBC
began
using
the
Surface
to
work
with
election

maps
for
the
2008
US
Presidential
Election
on
air.



Features

    

    Here
is
Microsoft
Surface
inside
(Fig.4)
and
its
technical
specifications. [1] 





                                                                  

Fig.4.

    


    Display


    •
Type:
30‐inch
XGA
DLP
projector


    •
ATI
X1650
graphics
card
with
256
MB
of
memory


    •
Maximum
resolution:
1024
x
768


    •
Lamp
mean‐life
expectancy:
6,000+
hours


    •
Maximum
pressure
on
the
display:
50
pounds
per


    square
inch/3.5
kg
per
cm


    •
Maximum
load:
200
pounds


    

    Input
Devices


    •
Camera‐based
vision
system
with
LED
infrared



    direct
illumination


    •
Bluetooth
keyboard
and
mouse
(available
to


    administrators
only)

    


    Computing
System


    •
2.13‐GHz
Intel
Core
TM
2
Duo
processor


    •
Memory:
2
GB
dual‐channel
DDR2





                                                                                      6

    •
Storage:
Minimum
250
GB
SATA
hard‐disk
drive


    

    Audio


    •
Output
type:
Stereo
flat
panel
built‐in
speakers


    •
Output
compliant
standards:
Stereo


    •
Input:
None


    

    Network
Protocols
and
Standards


    •
Network
adapter:
Intel
Gb
LAN


    •
Wireless
LAN
connectivity
supported:
Yes


    •
Data
Link
Protocol:
IEEE802.11b,
IEEE802.11g,
Bluetooth
2.0,
Gigabit

Ethernet


    •
Network
Standards:
IEEE802.11b,
IEEE802.11g,
Bluetooth
2.0

    


    I/O
Connections


    •
2
headphone
jacks


    •
6
USB
2.0
ports


    •
RGB
component
video


    •
S‐VGA
video
(DB15
external
VGA
connector)


    •
Component
audio


    •
Ethernet
port
(Gigabit
Ethernet
card
[10/100/1000])


    •
External
monitor
port


    •
Bays
for
routing
cables


    •
On/Standby
power
button


    

    AC
Input
Ratings


    •
AC
input:
100‐240
VAC,
50/60Hz,
10A,
650W






Input



   The
Microsoft
Surface
has
multi‐touch
screen
as
input
device
(Fig.5).
There

are
many
hand’s
gestures
that
allowed
the
user
to
use
the
interface.

    • Tap
–
select
an
item.

    • Double
tap
–
open
an
item.

    • Slide
Finger
–
Used
to
scroll
through
a
list
or
to
move
the
page.

    • Drag
Item
–
Used
to
move
drag‐able
items
to
a
different
area
on
the
screen.

    • Pinch
–
zoom
out.

    • Spread
–
zoom
in.

    • Orientate
–
by
using
one
finger
on
each
hand
the
user
can
rotate
one

        around
the
other
therefore
rotating
the
selected
item.

    • Flick
–
like
the
drag
item,
but
the
item
will
slide
across
the
screen

        decreasing
in
velocity.





                                                                                7

Fig.5. Microsoft Surface Input.

Later
we
will
see
interaction
guidelines
for
gestures
that
are
the
most
useful
and

natural
(Tabl.1).





Output



     The
Microsoft
Surface
has
large
screen
for
output
information.
Also
it
is
able

to
output
audio.


     The
majority
of
the
device’s
output
is
visually
through
the
surface
screen.

Feedback
is
displayed,
through
a
small
animation,
color
change
or
icon

manipulation.
This
is
very
important
with
touch
screen
interfaces,
as
it
can
be

difficult
to
see
visual
feedback.


     

     “When
something
like
a
wine
glass
is
set
on
the
table,
Surface
illuminates
the

edges
of
the
object
(Fig.6)
with
a
soothing
glow
and
can
display
information,

pictures,
or
decorative
graphics
next
to
and
around
the
glass.
When
the
glass

moves
across
the
table,
these
items
follow
it.
The
possibilities
for
such
a
device

are
staggering,
especially
when
it
drops
in
price
and
enters
the
home
market.
It’s

even
possible
that
consumer
electronics
could
be
tagged
at
production.”
[3]





Fig.6. Wine glass on the table.

To make the image on the screen bigger, user just needs to spread fingers.
To make it smaller user needs squeeze fingers together. To move something
into the trash, push it into the trash with hand. This new interface allows




                                                                                 8

painting with a real brush, playing cards with users hands, and paying
customers bills just by putting your credit card on the surface of the display.

Microsoft Surface also allows what is being called Multi-Touch and Multi-User
interaction (Fig.7). This means that more than one individual can interface
with the computer simultaneously. With the Microsoft Surface can support
dozens and dozens of fingers at once.




Fig.7. More than one user.




Touch
screen
Pros
and
Cons



                     Pros
                                         Cons


Direct
–
“Direct
pointing
to
objects,
direct
   Low
precision
(finger)
‐
Imprecise

relationship
between
hand
and
cursor
           positioning,
the
finger
can
be
too
large
for

movement
(distance,
speed
and
                  accurate
pointing
with
small
objects.

direction),
because
the
hand
is
moving
on

the
same
surface
that
the
cursor
is

moving,
manipulating
objects
on
the

screen
is
similar
to
manipulating
them
in

the
manual
world.”
[4]



Fast

                                          Hand
movements.

                                                

Finger
is
usable.
                              Fatigue
‐
Straining
the
arm
muscles
under

                                                heavy
use.

No
keyboard
necessary
for
applications
         Sitting
position
‐
The
user
has
to
sit
close

that
need
menu
selections.
                     to
the
screen.

Suited
to
novices,
no
experience.
              Dirt
‐
the
screen
gets
dirty
from
finger.




                                               Screen
coverage
‐
the
user's
hand,
the

                                                finger
can
obscure
parts
of
the
screen.


                                               Activation
–
“Usually
direct
activation
of

                                                the
selected
function,
when
the
screen
is

                                                touched;
there
is
no
special
"activation"

                                                button
as
with
a
light
pen
or
a
mouse.”
[4]




                                                                                               9




Strengths




    • High
Speed
Interaction
‐
Direct
Interaction.
Users
can
actually
“grab”
digital

      information
with
their
hands
and
interact
with
content
by
touching
and

      gestures,
without
the
use
of
a
mouse
or
keyboard.

    • Data
Manipulation
‐
Selecting,
moving,
rotating
and
resizing.

    • Easy
To
Use
–
Instinctive,
no
experience.

    • More
Than
One
User
‐
Max
52
points
of
touch.

    • Object
Recognition
‐
Users
can
place
physical
objects
on
the
surface
to

        trigger
different
types
of
digital
responses.


        


Weaknesses



    • Low
Accuracy
‐
Fingers
are
not
as
accurate
as
a
mouse
or
stylus.
It
will

       make
input
slower.

    • Fatigue
‐
Reaching
across
the
table
often
can
cause
the
arms
to
ache,

       reading
will
not
be
comfortable.

    • Screen
Visibility
–
Glare.

    • Privacy
‐
Open
for
many
to
view.


    • Poor
Feedback
‐
Feedback
is
visual
or
audio.

    • Accessibility
–
blind
and
disable
people
will
have
difficulties
to
use
it.

    • High
price.







                                                                                   10

Overview of existing
interfaces and software

There
are
a
variety
of
available
applications
for
Microsoft
Surface.

    1. Water.

                       “The
water
attract
application
runs
when
a
Microsoft

                       Surface
unit
is
not
being
used.
It
invites
users
to
look
at

                       and
touch
the
unit,
using
water
ripples
to
demonstrate

                       how
Microsoft
Surface
responds
to
single
and
multiple

                       touches
as
well
as
to
objects.”
[5]

                       

                       

    2. Concierge.

                       

                       Concierge
gives
you
the
power
to
create
maps
and

                       highlight
specific
locations,
including
attractions
in
and

                       around
your
venue.

                       

                       

                       

    3. Photos.

       

                       Photos
enable
users
to
browse
and
control
photos
and

                       videos
that
you
have
added
or
that
have
been
stored
on
a

                       user's
memory
card.



    4. Music.

       

                       Music
allows
you
to
add
your
music
collection
to
a

                       Microsoft
Surface
unit
for
users
to
browse
through,
select,

                       and
play.






    5. Patient
Consultation
Interface
for
Texas
Health.

       

                                   “In
conjunction
with
Texas
Health
Resources,

                                   Infusion
built
a
demo
application
that
shows





                                                                                     11

                                    how
digital
heath
care
system
could
be

                                    streamlined
using
Surface
for
patient

                                    consultations.
Doctors
could
use
surface
to

                                    explain
procedures
and
anatomy,
learn
about

                                    drugs
and
grab
patient
info
from
RFID‐
                                    enabled
HMO
cards.”
[6]

       

       

    6. Sheraton
Hotel
Application.

                                    Sheraton's
hotel
in
Seattle
is
home
to
a
custom

                                    Surface
app
built
in
collaboration
with

                                    Microsoft.
The
virtual
concierge
allows
guests

                                    to
explore
a
constellation
of
media
about

                                    Seattle,
all
while
listening
to
local
music
and

                                    using
maps
to
plan
their
day
trips.


                                    


                                    

    7. MSNBC's
Electoral
Coverage
Application.

       

                                     
Developer
Vector
form
built
several
Surface

                                     apps
specially
for
NBC
News
to
use
on‐air,

                                     enabling
political
analyst
Chuck
Todd
to

                                     interact
with
election
results,
trends,
and

                                     maps
to
explore
the
last
presidential
election

                                     in
real‐time.

                                     

                                     

    8. Barclay's
Premier
Account
Application.

       

                                     Barclays
has
become
the
first
bank
to
start

                                     Microsoft
Surface
technology
in
its
new

                                     flagship
branch
at
Piccadilly
Circus
in
London.

                                     The
Surface
technology
will
allow
users
to

                                     grab
digital
content
with
their
hands
and

                                     navigate
information
about
Barclays’
Premier

                                     banking
offering
with
simple
gestures
and

                                     touches.

       A
large
video
wall
will
graphically
represent
London
using
content
from

       blogs
and
customer
interests,
while
personal
consoles
will
enable
people

       to
contribute
to
the
installation
and
explore
relevant
information
from
the

       Time
Out
guide.


          “We
have
taken
inspiration
from
retailers
and
developed
a
space
that

       attracts
and
engages
individuals
while
conveying
what
the
Barclays
brand

       represents”
Mike
Amato,
Barclays.
[7]

       




                                                                                12

    9. Churchend
Primary
School,
United
Kingdom.

        

                                  Surface
isn't
all
about
making
a
sale
or

                                  entertaining
guests.
Students
and
teachers
at

                                  a
school
in
the
U.K.
have
been
running
a
pilot

                                  program
to
see
how
Surface
apps
can
make

                                  learning
vocabulary
and
foreign
languages

                                  more
intuitive.
[8]

                                  

                                  

                                  

    10. Microsoft
Mobile
Connect

                                    

                                    
One
of
Microsoft's
in‐house
experimental

                                    apps
is
Mobile
Connect,
a
Bluetooth‐enabled

                                    app
that
allows
a
mobile
phone
to
share

                                    multimedia
and
contacts
with
Surface
just
by

                                    placing
the
device
on
the
screen
and
dragging

                                    information
to
and
from
the
phone.
[9]











Design and Interaction
guidelines





Design
concept.



Using
touch
for
input
has
the
following
characteristics:

    •   Natural
and
intuitive.
Object
interactions
are
designed
to
correspond
to

        how
users
interact
with
objects
in
the
real
world
in
a
consistent
manner.

    •   Less
intrusive.
Using
touch
is
silent
and
consequently.
It
is
much
less

        distracting
than
typing
or
clicking,
especially
in
social
situations
such
as

        meetings.

    •   Direct
and
engaging.
Touch
makes
you
feel
like
you
are
directly

        interacting
with
the
objects
on
the
screen.

    •   Reduced
accuracy.
Users
can't
target
objects
as
accurately
using
touch,

        compared
to
a
mouse
or
pen.




                                                                                 13

Interaction
Guidelines



Control
usage


    •   Prefer
using
common
controls
(good
touch
experience).

    •   Choose
custom
controls
that:

           o Can
be
sized
large
enough.

           o When
manipulated,
move
and
react
the
way
real‐world
objects

               move
and
react,
such
as
by
having
momentum
and
friction.

           o Allow
users
to
easily
correct
mistakes.

           o Avoid
of
inaccuracy
with
clicking
and
dragging
(Objects
should
fall

               into
the
correct
place).

           o Provide
feedback
that
is
clearly
visible
even
when
the
finger
is

               over
the
control.

    •   Prefer
constrained
controls
(controls
like
lists
and
sliders).

    •   Provide
default
values.


    •   Provide
a
list
of
most
recently
input
values.

    •   Multiple
selections
(provide
an
option
to
use
a
check
box).



Control
sizing


    •   For
buttons
use
a
minimum
size
of
40x40
pixels
(more
comfortable
to

        users).

Control
layout
and
spacing


    •   Choose
a
layout
that
places
controls
close
to
where
they
are
most
likely

        going
to
be
used.
Avoid
long
distance
hand
movements.

    •   Use
the
recommended
spacing.


Interaction


    •   “Make
hover
redundant.
Take
full
advantage
of
hover,
but
only
in
ways

        that
are
not
required
to
perform
an
action.
This
usually
means
that
the

        action
can
also
be
performed
by
clicking,
but
not
necessarily
in
exactly
the

        same
way.
Hover
isn't
supported
by
most
touch
technologies,
so
users

        with
such
touch
screens
can't
perform
any
tasks
that
require
hovering.“

        [10]

    •   Provide
touch
keyboard.


    •   Allow
users
to
zoom
the
content.

    •   Provide
panning
and
zooming.

    •   Gestures
have
to
be
consistent
across
programs.





Windows
Touch
gestures

There
is
a
table
(tabl.1)
with
gestures
that
are
the
most
useful
and
natural
[10]:






                                                                                14

Gestures
                                Entry
state
      Motion
             Exit
state
    Effect

Panning
                                 One
or
two
       Drag,
with
any
     Last
finger
   Move
the
underlying

                                         fingers
in
       additional
         up
ends
the
   object
directly
and

                                         contact
with
     fingers
            gesture.
      immediately
as
the

                                         the
screen.
      remaining
in
                      fingers
move.
Be
sure
to

                                                           same
position
                     keep
the
contact
point

                                                           relative
to
each
                  under
the
finger

                                     
                     other.
                            throughout
the
gesture.

 Fig.8.
The
pan
gesture.



Zoom
                                    Two
fingers
in
   Fingers
move
       Any
finger
    Zoom
the
underlying


                                        contact
with
     apart
or
           up
ends
the
   object
in
or
out
directly

                                         the
screen
at
    together
(pinch)
   gesture
or
    and
immediately
as
the

                                         the
same
time.
   along
an
axis.
     the
fingers
   fingers
separate
or

                                                                               break
the
     approach
on
the
axis.

                                                                               axis.
         Be
sure
to
keep
the

                                                                                              contact
points
under

                                                                                              the
finger
throughout

                                                                                              the
gesture.

                                 

Fig.9.
The
zoom
gesture.



Rotate
                                  Two
fingers
in
   One
or
both
        Any
finger
    Rotate
the
underlying

        
                                contact
with
     fingers
rotate
     up
ends
the
   object
the
same
amount

                                         the
screen
at
    around
the
         gesture.
      as
the
fingers
have

                                         the
same
time.
   other,
moving
                     rotated.
Be
sure
to
keep

                                                           perpendicular
                     the
contact
points

                                                           to
the
line
                       under
the
finger

                                     
                     between
them.
                     throughout
the
gesture.

Fig.10.
The
rotation
gesture.



Two­finger
tap
                          Two
fingers
in
 No
motion.
           Any
finger
    Alternatively
zooms
or

        
                                contact
with
                         up
ends
the
   restores
the
default

                                         the
screen
at
                        gesture.
      view
for
the
object

                                         the
same
time.
                                      between
the
fingers.



                                     

 Fig.11.
The
two‐finger
tap

 gesture.



Press
and
tap
                           One
finger
in
    No
motion.
         Second
        Performs
a
right
click

         
                               contact
with
                         finger
up
     for
the
object
under
the

                                         the
screen,
                          ends
the
      first
finger.

                                         followed
by
a
                        gesture.

                                         second
finger.


                                     

Fig.12.
The
press
and
tap

gesture.

        Tabl.1.
The
most
useful
and
natural
gestures.




        
                                                                                               15

Summary of tfl.gov.uk                                             





    If
you
are
planning
a
trip
to
the
Greater
London
area
or
have
to
use
daily

commuting
services
in
the
city,
the
website
“tvl.gov.uk”
is
the
best
online

resource
(Fig.13).

    “Transport
for
London
is
the
integrated
body
responsible
for
the
Capital’s

transport
system.
Its
role
is
to
implement
the
Mayor’s
transport
strategy
for

London
and
manage
transport
services
across
the
Capital,
for
which
the
Mayor

has
responsibility.”
[11].

   Transport
for
London
was
created
in
2000
as
part
of
the
Greater
London

Authority.

    Transport
for
London
is
organized
in
three
main
services,
each
with

responsibility
for
different
aspects
of
transport:

        • London
Underground

        • London
Rail

        • Surface
transport

    Each
of
the
main
parts
has
its
own
corporate
identity,
formed
by
differently

colored
versions
of
the
standard
roundel
and
adding
appropriate
lettering
across

the
horizontal
bar.
The
roundel
rendered
in
blue
without
any
lettering

represents
Transport
for
London
as
a
whole.
The
same
range
of
color
is
used
on

the
Transport
for
London
website
tfl.gov.uk
(Fig.13).

    






                                                                                 16

                                                                      

Fig.13.
Website
“tfl.gov.uk”.



    I’ll
break
this
site
down
into
sections
for
understanding
the
needs
and

requirements
of
the
site
(Fig.14).
Then
it
will
be
possible
to
apply
the
design

guidelines
to
create
a
new
version
for
the
Microsoft
Surface.






                                                                                  17

Fig.14.
Main
section
of
www.tfl.gov.uk.

    The
page
is
constructed
with
a
header
and
footer.
The
central
area
is
broken

into
2
columns.
Left
column
are
news
and
general
information,
right
is
journey

planner,
service
update,
shops
and
map.



     

     So
user
can
make
plan
journey
strait
away
from
the
first
page
(Fig.15).
There

is
an
available
advanced
option
what
is
very
useful.






                                                                               18

Fig.15.
Journey
Planner.




    After
inserting
the
details
of
journey
user
will
get
full
information
about

available
fastest
routes,
changes,
times
and
problems
if
it
is
(Fig.16).






                                                                                  19

Fig.16.
Several
available
routes.


    Also
user
can
view
detailed
route
(Fig.17).







                                                   20

Fig.17.
View
detailed
route.






                               21

Overview of the redesign
Considerations



      To
achieve
a
successful
new
design
for
the
Microsoft
Surface
a
designer

must
know
the
website
main
goals
and
understand
it’s
needs.
The
designer
must

take
in
consideration
design
guidelines
that
were
previously
created.




Constraints


      The
touch
screen
system
requires
more
space.


      Where
tfl.gov.uk
uses
clickable
text,
the
Microsoft
Surface
requires
a
button

to
avoid
the
pressing
on
the
wrong
links.


      Colors
and
design
have
to
be
clean
and
bright.


      Reaching
across
a
table
often
to
navigate
will
become
hard
work
for
the

user.


      With
no
keyboard
the
journey
planner
becomes
difficult
to
use.
Users
will

need
a
keyboard
to
insert
the
address
and
it
has
to
be
with
big
buttons
and

enough
space
between
to
avoid
pressing
wrong
letters.

.


Problems


    •   Providing
good
feedback.

    •   
Too
much
information.
    •   Reduced
accuracy.
    •   Making
navigation
intuitively.






                                                                                22

Screen designs for
Microsoft Surface



    There
is
the
wireframe
layout
of
the
new
design
(Fig.18).
The
arrangement

has
been
done
so
that
the
most
used
buttons
are
located
at
the
bottom
of
the

page
close
to
the
user
to.


    The
page
can
be
increased
in
size
by
the
spreading
function
but
cannot
be

reduced
to
less
than
the
original
size.







Fig.18.
The
wireframe
layout
of
the
new
design.






                                                                                23

    As
tfl.gov.uk
contains
a
lot
of
information
the
main
navigation
has
drop

down
sub
navigation.
So
user
will
need
just
to
touch
the
button
from
main

navigation
to
access
to
sub
navigation
(Fig.19).


    





                                                                                  

Fig.19.
Sub
navigation.









                                                                               24

    For
getting
information
user
can
simply
drag
interested
link
(button)
to
the

centre
and
it
is
possible
increase
the
size
of
text,
pictures.
User
can
pinch
or

spread
for
zoom
out
or
in
(Tabl.1).

    There
is
a
feedback
by
changing
colours.
For
understanding
where
user
is
I

add
the
border
to
buttons.

(Fig.20)







                                                                                    

Fig.20.
Example
of
presenting
information.






                                                                              25

    For
touch
screen
interface
it
is
difficult
to
use
search
because
there
is
no

keyboard
or
mouse.
I
provide
quit
big
touch
keyboard
to
reduced
accuracy

(Fig.21).


    So
search
very
easy
to
use
you
just
need
type
your
words
by
touching
the

buttons
on
keyboard
and
touch
button
“GO!”
Also
user
can
see
in
navigation

border
that
shows
where
he
or
she
is.







                                                                                      

Fig.21.
Search
page.






                                                                                   26

    To
show
search
results
can
be
difficult
as
it
can
be
list
of
thousands
links.
So

I’m
showing
a
few
first
results
(Fig.22).
To
view
all
result
user
can
use
buttons

“Prev”
or
”Next”
or
scroll
by
flicking
finger.



    To
view
the
more
details
about
let
say
the
option
2
user
can
simply
spread
it.

To
return
back
to
search
result
simply
Pinch
it.

    





                                                                                        

Fig.22.
Layout
“Search
Result”
page.






                                                                                  27

     The
main
idea
of
tfl.gov.uk
is
journey
planner.
So
this
is
the
most
usable
part

of
the
website.
It
has
to
be
very
simple
to
use.
Here
user
will
need
to
type
from

where
to
go
and
where
and
say
when.
Again
I
use
touch
keyboard
to
insert
the

details
of
journey.


    I
provide
feedback
by
showing
border
around
text
field
where
at
the

moment
user
is
typing.
To
point
date
is
much
easier
user
can
scroll
the
month

and
point
the
date
(Fig.23).
When
everything
ready
just
touch
“Next”.









                                                                                        

Fig.23.
Journey
Planner.








                                                                                 28

    Planner
results
will
be
showing
the
list
of
possible
routes
(Fig.24).
User
can

sort
it
by
choosing
“Earliest”,
“Earlier”,
“Later”,
“Latest”
buttons.
Also
I
provide

“Edit
Search”
or
“New
journey”.




    To
view
more
details
about
let
say
the
route
2
user
can
simply
spread
it.
To

return
back
to
search
result
simply
pinch
it
(Tabl.1).







                                                                                        

Fig.24.
Planner
results
is
showing
the
list
of
possible
routes.






                                                                                  29

    Details
about
route
are
very
simple
to
zoom
in
or
out.
User
can
spread
or

pinch
it.


   Also
it
is
possible
to
“Edit
Search”,
“New
journey”,
“Return
journey”
and

“Onward
journey”
(Fig.25).







                                                                                   

Fig.25.
Route
details.






                                                                                30

    Maps
is
the
most
intuitively
part
for
this
device.
User
needs
just
choose
what

kind
of
map
prefers
and
spread
or
pinch
it
(Fig.26).

    





                                                                                      

Fig.26.
Maps.






                                                                               31

    It
is
possible
to
see
several
maps
at
the
same
time
(Fig.27).

    





                                                                       

Fig.27.
Several
maps
at
the
same
time.






                                                                    32

    It
is
really
comfortable
to
view
maps
on
touch
screen.
You
don’t
need
any

mouse
or
keyboard
to
increase
the
size
you
do
it
intuitive
using
your
finger

(Tabl.1)
(Fig.28).


    





                                                                                   

Fig.28.
View
map
in
bigger
size.






                                                                                33

Conclusion
    


    In
this
proposal
I’ve
done
research
about
multi‐touch
device
Microsoft

Surface
and
I’ve
showed
how
can
looks
website
“tfl.gov.uk”
in
a
new
interface.
I

took
in
consideration
the
user’s
needs,
website’s
purpose,
and
interaction

guidelines.

    But
only
after
user
testing
I
will
be
able
to
say
that
this
is
successful
redesign

prototype.







                                                                                   34

References



    1. “Experience
Microsoft
Surface”,
www.surface.com.

    2. "Microsoft
Surface
Fact
History".
Microsoft.

        http://www.microsoft.com/presspass/presskits/surfacecomputing/docs
        /SurfaceHistoryBG.doc.
Retrieved
on
2007‐05‐30.

    3. http://blog.800hightech.com/microsoft‐surface‐future‐of‐
        computers/512/

    4. http://www.sapdesignguild.org/resources/TSDesignGL/INDEX.HTM

    5. http://www.microsoft.com/surface/Software.aspx

    6. http://www.fastcompany.com/blog/chris‐dannen/techwatch/11‐killer‐
        apps‐microsoft‐surface‐videos

    7. http://www.onwindows.com/Articles/Barclays‐banks‐on‐
        Surface/3276/Default.aspx

    8. http://www.churchendprimary.com/latestnews_detail.asp?Section=5&R
        ef=446

    9. http://blogs.msdn.com/surface/archive/2009/04/08/mobile‐connect‐
        available‐to‐our‐customers.aspx

    10. http://msdn.microsoft.com/enus/library/cc872774.aspx#guidelines

    11. "Fact
sheet:
Transport
for
London"
(PDF).
Transport
for
London.
May

        2008.

        http://www.tfl.gov.uk/assets/downloads/corporate/TfL_Factsheet_May_
        2008.pdf.
Retrieved
on
2008‐09‐06.



    12. http://tfl.gov.uk






                                                                         35


								
To top