Mobile Web User Interface Patterns for Screen Usage and User Input

화면 활용과 사용자 입력을 위한 모바일 웹 사용자 인터페이스 패턴

  • Published : 2012.03.30

Abstract

Mobile web applications are different from desktop web applications because of their small screen size and small user input devices. Therefore user interface designers have spent their effort and time to re-design the user interface of mobile web applications to meet these differences. In this paper, we introduce five user interface patterns for mobile web applications to reduce their effort and time. Two of them are for utilizing small screen size efficiently, and they are space overloading pattern and data filtering pattern. These patterns enable designers to reduce screen usage. The other three patterns - data suggestion pattern, input reuse pattern, and incremental data input pattern - are for helping users' data input on mobile devices. These three patterns enable users to reduce direct data input. Our work will help user interface designers develop mobile web interface to utilize screen space efficiently and get data with less errors and less efforts from users.

Keywords

References

  1. 권준희 외1명, "유비쿼터스 환경에서 상황 데이터 기반 모바일 콘텐츠 서비스를 위한 추천 기법," 디지털산업정보학회 논문지, 6권, 2호, 2010, 6, pp. 1-9.
  2. 권준희 외1명, "웹 2.0과 웹 프레임워크를 이용한 식단 웹 애플리케이션에 대한 연구," 디지털산업정보학회 추계학술대회 논문집, 2009, 11, pp. 167-172.
  3. W3C, "Mobile Web Best Practices 1.0," available at http://www.w3.org/TR/mobile-bp/
  4. Gamma E, Helm R, Johnson R, and lissides J, Design Patterns-Elements of Reusable Object-Oriented Software, Addison-Wesley, 1995.
  5. Erik G. Nilsson, "Design Patterns for User Interfaces on Mobile Equipment," Human-Computer Interaction - Interact 2009, LNCS vol. 5727/2009, Springer, 2009, pp. 934-935.
  6. Erik G. Nilsson, "Design Patterns for User Interface for Mobile Applications," Journal of Advances in Engineering Software, vol. 40, Elsevier, 2009, pp. 1318-1328. https://doi.org/10.1016/j.advengsoft.2009.01.017
  7. Erik G. Nilsson, Design guidelines for mobile applications, SINTEF Report STF90. 2009.
  8. Regina Bernhaupt, Marco Winckler and Florence Pontico, "Are User Interface Pattern Languages Usable? A Report from the Trenches," Human-Computer Interaction - Interact 2009, LNCS vol. 5727/2009, Springer, 2009, pp. 542-545.
  9. Nokia Developer, Mobile Web Design Patterns, avilable at http://www.developer.nokia.com/Community/Wiki/Category:Mobile_Web_Design_Patterns.
  10. Mobile UI Patterns, available at http://mobilepatterns.com/
  11. Martijn van Welie, Gerrit C. van der Veer, Anton Eliens, "Patterns as Tools for User Interface Design," Tools for Working with Guidelines, Springer, 2000, pp. 313-324.
  12. Jürgen Engel, Christian Märtin, and Peter Forbrig, "HCI Patterns as a Means to Transform Interactive User Interfaces to Diverse Contexts of Use," Human-Computer Interaction, LNCS 6761, Springer, 2011, pp. 204-213.
  13. Jan O. Borchers, "A Pattern Approach to Interaction Design," Proc. of the 3rd Conf. on Designing Interactive Systems, 2000.
  14. E. Todd, E. Kemp, and C. Phillips, "What makes a good User Interface pattern language?," Proc. of the fifth conference on Australian user interface, vol. 28, ACM, 2004, pp. 91-100.
  15. Gustavo Rossi, Daniel Schwabe, and Fernando Lyardet, "User Interface Patterns for Hypermedia Applications," Proc. of the working conference on Advanced Visual Interfaces, ACM, 2000, pp. 136-142.