Human

 Computer  Interaction  Group  

  Institute  for  Visualization  and  Interactive  Systems  
  Prof.  Dr.  Albrecht  Schmidt    
 
Lecture  “Human  Computer  Interaction”  (summer  term  2011)   Page  1/3  

Exercise  1  (Group  Assignment)  

You  should  do  this  assignment  in  groups!  Acceptable  group  sizes  are  2  or  4  students  per  
group.  All  members  of  a  group  should  be  assigned  to  and  attend  the  same  Tutorial  
Group  (Übungsgruppe).  
 
In  this  exercise,  your  task  is  to  design  and  communicate  an  idea  for  a  novel  interactive  
application.  In  your  group,  you  should  choose  one  of  the  topics  listed  on  page  three.  
We  recommend  that  you  first  do  a  brainstorming  session  in  your  group  and  decide  on  
the  topic  you  want  to  work  on  and  on  details  of  your  idea.  
 
The  exercise  includes  the  drawing  of  a  storyboard,  the  creation  of  a  video  sketch  /  
concept  video,  and  the  design  of  the  key  screens.    
 
The  section  “Practical  Tools  and  Techniques”  of  the  HCI  lecture  slides  of  May  2,  available  
through  our  Moodle  (http://moodle.hcilab.org/),  provides  a  basic  introduction  and  
further  links  on  how  to  create  a  storyboard  and  how  to  make  a  concept  video.  
 

Storyboard      
Draw  a  storyboard  (or  alternatively  use  photos)  that  show(s)  the  key  scenes  of  your  
idea.  The  storyboard  should  contain  between  3  and  8  images  and  you  may  also  add  text  
(e.g.,  speech  bubbles).  Feel  free  to  create  the  storyboard  in  a  way  you  like  it  and  you  find  
helpful  to  communicate  the  idea.  
 
For  a  detailed  discussion  of  storyboards  and  their  usage  see  [1]  –  this  is  not  a  required  
reading  (keine  Pflichtlektüre)  and  is  provided  for  your  information  only.  
 

Video  Sketch  /  Concept  Video  

To  communicate  your  application  and  interaction  concepts,  please  create  a  video  sketch  
or  concept  video  for  your  selected  topic.  Your  video  may  consist  of  stills  only  (in  this  
case  motion  should  be  created  by  zooming  and  transitions)  or  of  still  images  combined  
with  one  or  more  video  clips.    
 
Based  on  your  storyboard,  take  digital  still  photos  or  short  video  clips  and  combine  
them  into  a  short  video.  The  duration  of  the  video  must  be  between  30  and  90  seconds.  
The  video  should  include  a  voice  over  and/or  sound  track  supporting  the  content.    
 
Make  sure  that  you  do  not  use  copyrighted  materials  (e.g.,  sounds,  images,  clips)  –  
produce  them  yourself  and/or  use  freely  available  content.  There  are  different  sites  that  
provide  photos  and  music  which  are  public  domain  or  under  the  creative  commons  
license,  e.g.,  http://www.jamendo.com.  You  can  also  use  a  Text-­‐To-­‐Speech  tool,  e.g.,  the  
TTS  demo  from  AT&T  available  on  
http://www.research.att.com/~ttsweb/tts/demo.php.  
 
We  do  not  expect  a  professionally  produced  video!  Make  a  video  that  you  think  helps  to  
communicate  the  concept,  while  limiting  the  effort  for  producing  it.    
 
 
   Human  Computer  Interaction  Group  
  Institute  for  Visualization  and  Interactive  Systems  
  Prof.  Dr.  Albrecht  Schmidt    
 
Lecture  “Human  Computer  Interaction”  (summer  term  2011)   Page  2/3  
 
For  a  detailed  discussion  of  video  sketches  and  their  usage  see  [2]  –  this  is  not  a  
required  reading  (keine  Pflichtlektüre)  and  is  provided  for  your  information  only.  
 
Possible  tool  options  for  creating  concept  videos  include  Apple  iMovie,  Windows  Movie  
Maker  or  open  source  software  available  under  Linux.  Another  option  would  be  using  a  
30  days  trial  of  Adobe  Premiere.  An  introduction  to  using  Premiere  for  concept  videos  
can  be  found  here:  http://tinyurl.com/387u4l.  General  tutorials  for  making  movies  can  
be  found  on  the  web.  
 

Key  Screens  
Provide  designs  for  the  main  3  to  5  screens  of  your  application.  These  key  screens  
should  be  prepared  as  images  in  the  look-­‐and-­‐feel  of  the  platform  of  your  choice.  You  
are  welcome  to  create  these  screens  with  an  image  manipulation  program  or  a  GUI-­‐
Builder.    
 

Literature  
[1]  Khai  N.  Truong,  Gillian  R.  Hayes,  and  Gregory  D.  Abowd.  2006.  Storyboarding:  an  
empirical  determination  of  best  practices  and  effective  guidelines.  In  Proceedings  of  the  
6th  conference  on  Designing  Interactive  systems  (DIS  '06).  ACM,  New  York,  NY,  USA,  12-­‐
21.  http://doi.acm.org/10.1145/1142405.1142410    
 
[2]  John  Zimmerman.  Video  Sketches:  Exploring  Pervasive  Computing  Interaction  
Designs.  IEEE  Pervasive  Computing  4,  4  (Oct.  2005),  91-­‐94.  
DOI=http://dx.doi.org/10.1109/MPRV.2005.91.  

Submission  
This  is  a  group  assignment.  Work  together  and  make  sure  that  you  share  the  workload  
equally!    
 
Each  group  member  must  be  able  to  explain  the  group's  solution  in  class.    
 
• Upload  your  video  sketch  or  concept  video  to  a  publicly  accessible  video  portal,  
e.g.,  Vimeo  or  Youtube.  
• Submit  a  PDF  document  (one  per  group)  through  our  Moodle  page  (see  above).    
• Your  document  should  include  
o a  title  page  with  amongst  others  the  names  of  all  group  members  
o your  storyboard    
o a  link  to  your  video  
o your  key  screens  
 
• Please  name  your  PDF  file  “exercise_1_group_<N1_N2_N3>.pdf”,  where  Nx  are  
the  surnames  of  all  group  members.  
• The  submission  deadline  for  this  exercise  is  Monday,  May  16,  2011,  12:00.  
• When  experiencing  problems  with  creating  the  video,  use  the  Moodle  forum  to  
ask  for  help  first.  If  no  help  is  available,  you  may  also  contact  us  at  our  office  or  
by  email:  {bastian.pfleging,  thorsten.prante}@vis.uni-­‐stuttgart.de.    
   Human  Computer  Interaction  Group  
  Institute  for  Visualization  and  Interactive  Systems  
  Prof.  Dr.  Albrecht  Schmidt    
 
Lecture  “Human  Computer  Interaction”  (summer  term  2011)   Page  3/3  

Topics  
1. Mobile  Payment  using  Cell  Phones  
Assume  that  many  new  phones  will  have  NFC  technology  built-­‐in  that  
allows  to  employ  phones  to  make  payments,  e.g.,  for  tickets,  coffee,  in  
shops,  etc.  The  users  should  be  able  to  configure  the  limits  for  payment,  to  
choose  the  way  they  authorize  payment  over  a  certain  threshold,  and  to  
set  a  preference  about  how  they  are  notified  during  payment.  
2. Indoor  and  Outdoor  University  Location  System  
Assume  mobile  phones  have  means  to  detect  their  location  (indoors  as  
well  as  outdoors).  Users  have  different  means  of  inputting  where  they  
want  to  go  (e.g.,  taking  a  photo  of  a  business  card,  searching  for  a  name,  
etc.)  .  The  phone  will  provide  guidance  to  the  specified  location.  
3. Using  a  Smartphone  as  User  Interface  for  the  car  
Assume  the  car  provides  all  of  its  functionality  currently  displayed  in  the  
car  and  controlled  with  the  in-­‐car  controls  as  web  services  (e.g.,  fuel  level,  
lights,  steering,  break,  …).  Create  a  mobile  application  that  makes  use  of  
these  web  services.    
4. Remote  User  Interfaces  for  Machines  
Assume  a  machine  (e.g.,  production  scale  laser  cutter,  solar  power  plant,  
or  a  coffee  machine)  provides  its  current  status  and  error  information  via  
a  web  service  and  via  a  push  mechanism.  Create  a  mobile  application  that  
makes  use  of  this  web  services.    
5. Searching  Everything  
New  mobile  phones  already  provide  multiple  means  to  search  for  about  
everything  (e.g.,  items  you’ve  opened,  locations,  your  friends,  etc.).  What  
are  further  items  you  would  like  to  search  for  (e.g.,  dynamic  organizations  
of  the  items  you  work  with,  a  free  parking  space,  a  nearby  bakery  
recommended  by  members  of  your  social  network,  news  articles  you’ve  
read  while  waiting  for  the  train  last  week,  etc.)?  And  how  would  you  like  to  
improve  means  for  inputting  your  search  query  (e.g.,  via  similarities  to  
items  currently  viewed,  informed  by  what  you’ve  done  before,  via  the  
information  contained  in  appointments,  or  generally  via  context  cues,  
such  as  time,  location,  people  you’ve  met,  etc.)  and  how  would  you  like  to  
have  the  results  displayed?  Design  a  mobile  search  facility  that  conveys  
your  ideas.