research-article

Employing patterns and layers for early-stage design and prototyping of cross-device user interfaces

Authors:

James A. LandayAuthors Info & Claims

CHI '08: Proceedings of the SIGCHI Conference on Human Factors in Computing Systems

Pages 1313 - 1322

https://doi.org/10.1145/1357054.1357260

Published: 06 April 2008 Publication History

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.

Supplementary Material

index.html (index.html)

Slides from the presentation

Download
1.02 KB

ZIP File (p1313-slides.zip)

Supplemental material for Employing patterns and layers for early-stage design and prototyping of cross-device user interfaces

Download
12.81 MB

Audio only (1357260.mp3)

Download
10.35 MB

Video (1357260.mp4)

Download
142.71 MB

References

[1]

Alexander, C., S. Ishikawa, M. Silverstein, M. Jacobson, I. Fiksdahl-King, and S. Angel, A Pattern Language. Oxford University Press: New York, 1977

[2]

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.

[3]

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.

Digital Library

[4]

Bederson, B.B., J. Grosjean, and J. Meyer, Toolkit Design for Interactive Structured Graphics. IEEE Transactions on Software Engineering, 2004. 30(8): 1--12.

Digital Library

[5]

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.

[6]

Buyukkokten, O., H. Garcia-Molina, A. Paepcke, and T. Winograd, Power Browser: Efficient Web Browsing for PDAs. Proc. CHI 2000, 430--437.

Digital Library

[7]

Calvary, G., J. Coutaz, and D. Thevenin. A Unifying Reference Framework for the Development of Plastic User Interfaces. Proc. EHCI 2001, 173--192.

Digital Library

[8]

Deng, J., E. Kemp, and E.G. Todd. Managing UI Pattern Collections. Proc. CHINZ '05, 31--38.

Digital Library

[9]

Ding, Y. and H. Litz. Creating Multiplatform User Interfaces by Annotation and Adaptation. Proc. IUI 2006, 270--272.

Digital Library

[10]

Eisenstein, J., J. Vanderdonckt, and A. Puerta. Applying Model-Based Techniques to the Development of UIs for Mobile Computers. Proc. IUI 2001, 69--76.

Digital Library

[11]

Fincher, S., Perspectives on HCI Patterns: Concepts and Tools (Introducing PLML). Interfaces, 2003(56): 26--28.

[12]

Fogarty, J. and S.E. Hudson, GADGET: A Toolkit for Optimization-Based Approaches to Interface and Display Generation. Proc. UIST 2003, 125--134.

Digital Library

[13]

Gajos, K. and D.S. Weld. SUPPLE: Automatically Generating User Interfaces. Proc. IUI '04, 93--100.

Digital Library

[14]

Graham, I., A Pattern Language for Web Usability. Addison-Wesley: London, 2003.

Digital Library

[15]

Hong, J.I. and J.A. Landay, SATIN: A Toolkit for Informal Ink-based Applications. Proc. UIST 2000, 63--72.

Digital Library

[16]

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

Digital Library

[17]

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.

[18]

Lopez, J.F. and P. Szekely, Web Page Adaptation for Universal Access, in Proc. UAHCI 2001, 690--694.

[19]

Microsoft, ASP.NET Mobile Controls, 2002. Microsoft Corp.: Redmond, WA. http://asp.net/mobile

[20]

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.

Digital Library

[21]

Mynatt, E.D. and W.K. Edwards. An Architecture for Transforming Graphical Interfaces. Proc. UIST '94, 39--47.

Digital Library

[22]

Newman, M.W. and J.A. Landay. Sitemaps, Storyboards, and Specifications: A Sketch of Web Site Design Practice. Proc. DIS 2000, 263--274.

Digital Library

[23]

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.

Digital Library

[24]

Nichols, J., et al., Generating Remote Control Interfaces for Complex Appliances. Proc. UIST 2002, 161--170.

Digital Library

[25]

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.

[26]

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.

Digital Library

[27]

Puerta, A., M. Micheletti, and A. Mak. The UI Pilot: A Model-Based Tool to Guide Early Interface Design. Proc. IUI 2005, 215--222.

Digital Library

[28]

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.

[29]

Szekely, P. Retrospective and Challenges for Model-Based Interface Development. Proc. DSV-IS '96, 1--27.

[30]

Tidwell, J., Designing Interfaces: Patterns for Effective Interaction Design. O'Reilly Media: Sebastopol, CA. 384pp., 2005. http://time-tripper.com/uipatterns/

Digital Library

[31]

van Duyne, D.K., J.A. Landay, and J.I. Hong, The Design of Sites. Addison-Wesley: Boston, 2002

[32]

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.pdf

[33]

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.

[34]

Yahoo, Yahoo! Design Pattern Library, 2006. http://developer.yahoo.com/ypatterns/

Cited By

Srinivasan AChan J(2024)Improving Selection of Analogical Inspirations through Chunking and RecombinationProceedings of the 16th Conference on Creativity & Cognition10.1145/3635636.3656207(374-397)Online publication date: 23-Jun-2024
https://dl.acm.org/doi/10.1145/3635636.3656207
Myers B(2024)Pick, Click, Flick!undefinedOnline publication date: 14-Mar-2024
Majrashi K(2023)Inter-Platform Consistency Inspection MethodInternational Journal of Technology and Human Interaction10.4018/IJTHI.32605819:1(1-20)Online publication date: 20-Jul-2023
https://dl.acm.org/doi/10.4018/IJTHI.326058
Show More Cited By

Index Terms

Employing patterns and layers for early-stage design and prototyping of cross-device user interfaces
1. Human-centered computing
  1. Interaction design
    1. Interaction design process and methods
      1. Interface design prototyping
2. Software and its engineering
  1. Software notations and tools
    1. Development frameworks and environments
      1. Integrated and visual development environments

Recommendations

Using design patterns and layers to support the early-stage design and prototyping of cross-device user interfaces
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 communication

This 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 ...
Abstract
Multi-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

Information & Contributors

Information

Published In

cover image ACM Conferences

CHI '08: Proceedings of the SIGCHI Conference on Human Factors in Computing Systems

April 2008

1870 pages

ISBN:9781605580111

DOI:10.1145/1357054

General Chairs:
Mary Czerwinski
Microsoft Research, USA
,
Arnie Lund
Microsoft, USA
,
Program Chair:
Desney Tan
Microsoft Research, USA

Copyright © 2008 ACM.

Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. Copyrights for components of this work owned by others than ACM must be honored. Abstracting with credit is permitted. To copy otherwise, or republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee. Request permissions from [email protected]

Sponsors

Publisher

Association for Computing Machinery

New York, NY, United States

Publication History

Published: 06 April 2008

Permissions

Request permissions for this article.

Request Permissions

Check for updates

Author Tags

Qualifiers

Research-article

Conference

CHI '08

Sponsor:

CHI '08: CHI Conference on Human Factors in Computing Systems

April 5 - 10, 2008

Florence, Italy

Acceptance Rates

CHI '08 Paper Acceptance Rate 157 of 714 submissions, 22%;

Overall Acceptance Rate 6,199 of 26,314 submissions, 24%

Contributors

Other Metrics

View Article Metrics

Bibliometrics & Citations

Bibliometrics

Article Metrics

57
Total Citations
View Citations
2,078
Total Downloads

Downloads (Last 12 months)46
Downloads (Last 6 weeks)5

Reflects downloads up to

Other Metrics

View Author Metrics

Citations

Cited By

Srinivasan AChan J(2024)Improving Selection of Analogical Inspirations through Chunking and RecombinationProceedings of the 16th Conference on Creativity & Cognition10.1145/3635636.3656207(374-397)Online publication date: 23-Jun-2024
https://dl.acm.org/doi/10.1145/3635636.3656207
Myers B(2024)Pick, Click, Flick!undefinedOnline publication date: 14-Mar-2024
Majrashi K(2023)Inter-Platform Consistency Inspection MethodInternational Journal of Technology and Human Interaction10.4018/IJTHI.32605819:1(1-20)Online publication date: 20-Jul-2023
https://dl.acm.org/doi/10.4018/IJTHI.326058
Chen YLiu ZTensmeyer CElmqvist NMorariu V(2023)DocDancer: Authoring Ultra-Responsive Documents with Layout Generation2023 IEEE Symposium on Visual Languages and Human-Centric Computing (VL/HCC)10.1109/VL-HCC57772.2023.00023(133-138)Online publication date: 3-Oct-2023
https://doi.org/10.1109/VL-HCC57772.2023.00023
Santos PMadeira RCorreia N(2021)Applications across Co-located Devices: User Interface Distribution, State Management and CollaborationThe 23rd International Conference on Information Integration and Web Intelligence10.1145/3487664.3487748(602-613)Online publication date: 29-Nov-2021
https://dl.acm.org/doi/10.1145/3487664.3487748
Sanctorum ARukonic LSigner B(2021)Design Requirements for Recommendations in End-User User Interface DesignEnd-User Development10.1007/978-3-030-79840-6_14(204-212)Online publication date: 6-Jul-2021
https://dl.acm.org/doi/10.1007/978-3-030-79840-6_14
Swearngin AWang COleson AFogarty JKo ABernhaupt RMueller FVerweij DAndres JMcGrenere JCockburn AAvellino IGoguey ABjørn PZhao SSamson BKocielnik R(2020)Scout: Rapid Exploration of Interface Layout Alternatives through High-Level Design ConstraintsProceedings of the 2020 CHI Conference on Human Factors in Computing Systems10.1145/3313831.3376593(1-13)Online publication date: 21-Apr-2020
https://dl.acm.org/doi/10.1145/3313831.3376593
Suleri SKipi NTran LJarke M(2019)UI Design Pattern-driven Rapid Prototyping for Agile Development of Mobile ApplicationsProceedings of the 21st International Conference on Human-Computer Interaction with Mobile Devices and Services10.1145/3338286.3344399(1-6)Online publication date: 1-Oct-2019
https://dl.acm.org/doi/10.1145/3338286.3344399
Jia WHua QZhang MWang BChen RJi X(2019)Category Theory-Based Mobile User Interface Pattern Recommendation MethodIEEE Access10.1109/ACCESS.2018.28891897(8209-8225)Online publication date: 2019
https://doi.org/10.1109/ACCESS.2018.2889189
Akiki P(2018)CHAINJournal of Systems and Software10.5555/3163590.3163767135:C(165-190)Online publication date: 1-Jan-2018
https://dl.acm.org/doi/10.5555/3163590.3163767
Show More Cited By

View Options

Get Access

Login options

Check if you have access through your login credentials or your institution to get full access on this article.

Full Access

Get this Publication

View options

PDF

View or Download as a PDF file.

eReader

View online with eReader.

Media

Figures

Other

Tables

View Table of Contents