James Lin
James A. Landay
ABSTRACT
Designing UIs that run across multiple devices is increasingly important. To address this, we have created a prototyping tool called Damask, which targets web UIs that run on PCs and mobile phones, and prompt-and-response style voice UIs. In Damask, designers sketch out their design for one device while using design patterns to specify higher-level concepts within their design. Damask's patterns include pre-built UI fragments that are already optimized for each device. Designers also use layers to specify which UI parts are common across devices and which are specific to one device. Damask uses the sketches and patterns to generate designs for the other devices, which the designers can refine. A study performed with 12 professional UI designers found that, in the early stages, designers using patterns and layers in Damask created cross-device UIs that are rated at least as good as those created without patterns and layers, without more time.
Supplemental Material
Available for Download
Slides from the presentation
Supplemental material for Employing patterns and layers for early-stage design and prototyping of cross-device user interfaces
- Alexander, C., S. Ishikawa, M. Silverstein, M. Jacobson, I. Fiksdahl-King, and S. Angel, A Pattern Language. Oxford University Press: New York, 1977Google Scholar
- Ali, M.F., M.A. Pérez-Quiñones, M. Abrams, and E. Shell. Building Multi-Platform User Interfaces With UIML. Proc. CADUI'2002, 225--236.Google Scholar
- Banavar, G., L.D. Bergman, Y. Gaeremynck, D. Soroker, and J. Sussman, Tooling and System Support for Authoring Multi-Device Applications. Journal of Systems and Software, 2004. 69(3): 227--242. Google ScholarDigital Library
- Bederson, B.B., J. Grosjean, and J. Meyer, Toolkit Design for Interactive Structured Graphics. IEEE Transactions on Software Engineering, 2004. 30(8): 1--12. Google ScholarDigital Library
- Bergman, L.D., G. Banavar, D. Soroker, and J. Sussman. Combining Handcrafting and Automatic Generation of User-Interfaces for Pervasive Devices. Proc. CADUI'2002, 155--166.Google Scholar
- Buyukkokten, O., H. Garcia-Molina, A. Paepcke, and T. Winograd, Power Browser: Efficient Web Browsing for PDAs. Proc. CHI 2000, 430--437. Google ScholarDigital Library
- Calvary, G., J. Coutaz, and D. Thevenin. A Unifying Reference Framework for the Development of Plastic User Interfaces. Proc. EHCI 2001, 173--192. Google ScholarDigital Library
- Deng, J., E. Kemp, and E.G. Todd. Managing UI Pattern Collections. Proc. CHINZ '05, 31--38. Google ScholarDigital Library
- Ding, Y. and H. Litz. Creating Multiplatform User Interfaces by Annotation and Adaptation. Proc. IUI 2006, 270--272. Google ScholarDigital Library
- Eisenstein, J., J. Vanderdonckt, and A. Puerta. Applying Model-Based Techniques to the Development of UIs for Mobile Computers. Proc. IUI 2001, 69--76. Google ScholarDigital Library
- Fincher, S., Perspectives on HCI Patterns: Concepts and Tools (Introducing PLML). Interfaces, 2003(56): 26--28.Google Scholar
- Fogarty, J. and S.E. Hudson, GADGET: A Toolkit for Optimization-Based Approaches to Interface and Display Generation. Proc. UIST 2003, 125--134. Google ScholarDigital Library
- Gajos, K. and D.S. Weld. SUPPLE: Automatically Generating User Interfaces. Proc. IUI '04, 93--100. Google ScholarDigital Library
- Graham, I., A Pattern Language for Web Usability. Addison-Wesley: London, 2003. Google ScholarDigital Library
- Hong, J.I. and J.A. Landay, SATIN: A Toolkit for Informal Ink-based Applications. Proc. UIST 2000, 63--72. Google ScholarDigital Library
- Lin, J., Using Design Patterns and Layers to Support the Early-Stage Design and Prototyping of Cross-Device User Interfaces, Unpublished Ph.D. Dissertation, University of California, Berkeley, 2005. http://jameslin.name/research/damask/dissertation/jlin_dissertation.pdf Google ScholarDigital Library
- Lin, J. and J.A. Landay. Damask: A Tool for Early-Stage Design and Prototyping of Multi-Device User Interfaces. Proc. DMS 2002, 573--580.Google Scholar
- Lopez, J.F. and P. Szekely, Web Page Adaptation for Universal Access, in Proc. UAHCI 2001, 690--694.Google Scholar
- Microsoft, ASP.NET Mobile Controls, 2002. Microsoft Corp.: Redmond, WA. http://asp.net/mobileGoogle Scholar
- Mori, G., F. Paternò, and C. Santoro, Design and Development of Multidevice User Interfaces through Multiple Logical Descriptions. IEEE Transactions on Software Engineering, 2004. 30(8): 507--520. Google ScholarDigital Library
- Mynatt, E.D. and W.K. Edwards. An Architecture for Transforming Graphical Interfaces. Proc. UIST '94, 39--47. Google ScholarDigital Library
- Newman, M.W. and J.A. Landay. Sitemaps, Storyboards, and Specifications: A Sketch of Web Site Design Practice. Proc. DIS 2000, 263--274. Google ScholarDigital Library
- Newman, M.W., J. Lin, J.I. Hong, and J.A. Landay, DENIM: An Informal Web Site Design Tool Inspired by Observations of Practice. Human-Computer Interaction, 2003. 18(3): 259--324. Google ScholarDigital Library
- Nichols, J., et al., Generating Remote Control Interfaces for Complex Appliances. Proc. UIST 2002, 161--170. Google ScholarDigital Library
- Olsen, D.R., S.E. Hudson, R.C.-M. Tam, G. Conaty, M. Phelps, and J.M. Heiner. Speech Interaction with Graphical User Interfaces. Proc. INTERACT2001.Google Scholar
- Ponnekanti, S.R., B. Lee, A. Fox, P. Hanrahan, and T. Winograd. ICrafter: A Service Framework for Ubiquitous Computing Environments. Proc. Ubicomp 2001, 56--75. Google ScholarDigital Library
- Puerta, A., M. Micheletti, and A. Mak. The UI Pilot: A Model-Based Tool to Guide Early Interface Design. Proc. IUI 2005, 215--222. Google ScholarDigital Library
- Sinha, A.K., S.R. Klemmer, and J.A. Landay, Embarking on Spoken-Language NL Interface Design. International Journal of Speech Technology, 2002. 5(2): 159--169.Google Scholar
- Szekely, P. Retrospective and Challenges for Model-Based Interface Development. Proc. DSV-IS '96, 1--27.Google Scholar
- Tidwell, J., Designing Interfaces: Patterns for Effective Interaction Design. O'Reilly Media: Sebastopol, CA. 384pp., 2005. http://time-tripper.com/uipatterns/ Google ScholarDigital Library
- van Duyne, D.K., J.A. Landay, and J.I. Hong, The Design of Sites. Addison-Wesley: Boston, 2002Google Scholar
- van Welie, M. and H. Trætteberg. Interaction Patterns in User Interfaces. Proc. PLoP 2000. http://jerry.cs.uiuc.edu/~plop/plop2k/proceedings/Welie/Welie.pdfGoogle Scholar
- Wagner, A., Prototyping: A Day in the Life of an Interface Designer, in The Art of Human-Computer Interface Design, B. Laurel, Editor. Addison-Wesley: Reading, MA. pp. 79--84, 1990.Google Scholar
- Yahoo, Yahoo! Design Pattern Library, 2006. http://developer.yahoo.com/ypatterns/Google Scholar
Index Terms
- Employing patterns and layers for early-stage design and prototyping of cross-device user interfaces
Recommendations
Multimodal interfaces design issues: the fusion of well-designed voice and graphical user interfaces
SIGDOC '08: Proceedings of the 26th annual ACM international conference on Design of communicationThis poster describes a novel approach that is intended to combine graphical user interfaces (GUI) and voice interaction in the Web throughout the design and the development of intuitive and user-friendly multimodal interfaces. We are considering the ...
Post-transitioning user performance on cross-device menu interfaces
Highlights- First study to investigate user performance with multiple menu interfaces across devices with focusing on performance after transitioning from one device to ...
AbstractMulti-device user-interaction behavior creates a need to design cross-device menus that support users to re-locate menu items efficiently and effectively after the transition from one device to another. We conducted two laboratory ...
Comments