International Conference on Ubiquitous Computing and Ambient Intelligence

Ubiquitous Computing and Ambient Intelligence. Sensing, Processing, and Using Environmental Information pp 289-296 | Cite as

Sketching Stereoscopic GUIs with HTML5 Canvas

  • Diego González-Zúñiga
  • Toni Granollers
  • Jordi Carrabina
Conference paper
Part of the Lecture Notes in Computer Science book series (LNCS, volume 9454)


Creating the layout of an application graphical user interface is an important part of any system development process. Mock-ups, usability studies, focus groups and sketching are techniques that help define this layout and ship the best UI for the required task. But with the addition of 3D depth into the GUI assortment, a gap is exposed when trying to draft the GUI due to the fact that depth cannot be easily represented using traditional 2D methods like paper or existing software. With this article we present a tool that allows designers and developers to draft graphical user interfaces that comply with stereoscopic side-by-side formats. The tool is created using the HTML5 canvas element, in conjunction with the browser’s console to live edit any sketch, and created layouts can be saved and shared in devices capable of showing compatible stereoscopic images.


  1. 1.
    International 3D & Advanced Imaging Society: 3D Update at CES 2015, Las Vegas (2015)Google Scholar
  2. 2.
    Häkkilä, J., Posti, M., Koskenranta, O., Ventä-Olkkonen, L.: Design and evaluation of mobile phonebook application with stereoscopic 3D user interface. In: CHI 2013 Extended Abstracts on Human Factors in Computing Systems on - CHI EA 2013, p. 1389. ACM Press, New York (2013). doi:10.1145/2468356.2468604
  3. 3.
    Broy, N., André, E., Schmidt, A.: Is stereoscopic 3D a better choice for information representation in the car? In: Proceedings of the 4th International Conference on Automotive User Interfaces and Interactive Vehicular Applications - AutomotiveUI 2012, p. 93. ACM Press, New York (2012). doi:10.1145/2390256.2390270
  4. 4.
    Huhtala, J., Karukka, M., Salmimaa, M., Häkkilä, J.: Evaluating depth illusion as method of adding emphasis in autostereoscopic mobile displays. In: Proceedings of the 13th International Conference on Human Computer Interaction with Mobile Devices and Services - MobileHCI 2011, p. 357. ACM Press, New York (2011). doi:10.1145/2037373.2037427
  5. 5.
    Gonzalez-Zuniga, D., Chistyakov, A., Orero, P., Carrabina, J.: Breaking the pattern study on stereoscopic web perception. In: Urzaiz, G., Ochoa, S.F., Bravo, J., Liming, L.C., Oliveira, J. (eds.) Ubiquitous Computing and Ambient Intelligence, Context-Awareness and Context-Driven Interaction, pp. 26–33. Springer, Heidelberg (2013). CrossRefGoogle Scholar
  6. 6.
    Buxton, B.: Sketching User Experiences, pp. 97–115 (2007). doi:10.1016/B978-012374037-3/50064-X
  7. 7.
    Fallman, D.: Design-oriented human-computer interaction. In: SIGCHI Conference on Human Factors in Computing Systems (CHI 2003), pp. 225–232 (2003). doi:10.1145/642611.642652
  8. 8.
    Broy, N., Schneegass, S., Alt, F., Schmidt, A.: FrameBox and MirrorBox. In: Proceedings of the 32nd Annual ACM Conference on Human Factors in Computing Systems - CHI 2014, pp. 2037–2046. ACM Press, New York (2014). doi:10.1145/2556288.2557183
  9. 9.
    González-Zúñiga, D., Carrabina, J.: Hacking HTML5 canvas to create a stereo 3D renderer. In: Proceedings of the IEEE 10th Symposium on 3D User Interfaces (2015)Google Scholar

Copyright information

© Springer International Publishing Switzerland 2015

Authors and Affiliations

  • Diego González-Zúñiga
    • 1
  • Toni Granollers
    • 2
  • Jordi Carrabina
    • 1
  1. 1.CEPHISUniversitat Autònoma de BarcelonaBarcelonaSpain
  2. 2.GRIHOUniversitat de LleidaLleidaSpain

Personalised recommendations