Abstract
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.
This is a preview of subscription content, log in via an institution to check access.
Access this chapter
Tax calculation will be finalised at checkout
Purchases are for personal use only
Similar content being viewed by others
References
International 3D & Advanced Imaging Society: 3D Update at CES 2015, Las Vegas (2015)
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
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
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
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). http://link.springer.com/chapter/10.1007/978-3-319-03176-7_4
Buxton, B.: Sketching User Experiences, pp. 97–115 (2007). doi:10.1016/B978-012374037-3/50064-X
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
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
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)
Acknowledgments
Supported by the Spanish Ministry of Finance and Competitiveness (proj. no. IPT-2012-0630-020000) and funded by the Catalan Government scholarship 2012FI_B677.
Author information
Authors and Affiliations
Corresponding author
Editor information
Editors and Affiliations
Rights and permissions
Copyright information
© 2015 Springer International Publishing Switzerland
About this paper
Cite this paper
González-Zúñiga, D., Granollers, T., Carrabina, J. (2015). Sketching Stereoscopic GUIs with HTML5 Canvas. In: García-Chamizo, J., Fortino, G., Ochoa, S. (eds) Ubiquitous Computing and Ambient Intelligence. Sensing, Processing, and Using Environmental Information. UCAmI 2015. Lecture Notes in Computer Science(), vol 9454. Springer, Cham. https://doi.org/10.1007/978-3-319-26401-1_27
Download citation
DOI: https://doi.org/10.1007/978-3-319-26401-1_27
Published:
Publisher Name: Springer, Cham
Print ISBN: 978-3-319-26400-4
Online ISBN: 978-3-319-26401-1
eBook Packages: Computer ScienceComputer Science (R0)