The Improvement of Beijing Digital Information Booth Interface Design

1. The Improvement of Beijing Digital Information Booth Interface Design P.L. Patrick Rau, YueSun Institute of Human Factors & Ergonomics, Department of Industrial Engineering, Tsinghua University

2. Introduction • What is Beijing Digital Information Booth (BDIB)? • Touch screen web information system • Multimedia self-service terminals • Multifunction service platform

3. Introduction • The homepage interface of BDIB

4. Introduction • Existed Problems: • Poor navigation support through the system • Inappropriate layout and look & feel design. • Importance of the Research

5. Methods • Layout and Look-and-feel Checklist • Layout and Look & Feel evaluation • Universal Detailed Checklist • Navigation design evaluation • Navigation Stress Test • Randomly choose 20 pages to test the mind workload while viewing a website

6. Methods • Universal Detailed Checklist • Nested Navigation System • Global Panel • Regional Panel • Context Panel • Assistant Navigation System • Guide • Help function • Search Engine • Site map and Index • Functional Buttons

7. Findings and Recommendations • Lack of Help function • Lack of Search Engine • Inappropriate and inconsistent layout and insufficient functions of the Nested Navigation System • Conflicts between navigating and protecting privacy when marking the used hyperlinks • The functional buttons are either missing or confusing. • Lack of breadcrumb • The guide to show how to use handwriting function of the touch screen is not easy to be noticed • Too many colors used on the interface • Taglines are inconsistent on the pages • The word written on the screen cannot be distinguished from the background clearly • Lack of language option • Inappropriate layout of the input keypad • Different sizes of buttons in the same layer of the hierarchy under the subcomponent “Service” cause confusion

8. Findings and Recommendations • PROBLEM 1: Lack of Help function • Recommendations: • Add help function in the fix position on each page • Two ways to input the topic: select one popular topic & input the topic Help.Microsoft.com

9. Findings and Recommendations • PROBLEM 2: Lack of Search Engine • Recommendations: • Find important and frequent using functions • Offer search scope options • Put it on the upper right corner of the page Search timewarner.com

10. Findings and Recommendations • PROBLEM 3: Inconsistent layout of the Nested Navigation System • Recommendations: • The locations of global panel, regional panel and context panel should keep the same throughout the system

11. Findings and Recommendations • PROBLEM 4: Conflicts between navigation and protecting privacy when marking the used hyperlinks. • Recommendations: • Reset every time when return to the homepage • Reset when the interface is left still without any operation for some time • Set a button to reset the hyperlinks manually • Set a camera on top of the BDIB. Return to the homepage automatically when the user left

12. Findings and Recommendations • PROBLEM 5: The functional buttons are either missing or confusing. • Recommendations: • Previous button should be added • All of the “homepage” buttons should link to the primary homepage • Enable the users to go back to the homepage of subcomponent by providing a breadcrumb trial

13. Findings and Recommendations • PROBLEM 6: Inappropriate use of color • Recommendations: • No more than five colors should be used • Provide a transparent dark background when touch screen input is need. color apple.com

14. Conclusion • Purpose: to improve the interface design of BDIB. • Evaluation Methods: Two checklists and a Navigation Stress Test. • Recommendations are given to each finding accordingly.

15. Thanks! Q&A

16. Findings and Recommendations • PROBLEM 11: Lack of language option • Recommendations: • Set language option with clear and different icon • At least implement English option • The position of the language option should be eye-catching, normally in the top right area of the page (Language visitlondon.com )

17. Findings and Recommendations • PROBLEM 9: Taglines are inconsistent on the pages • Recommendations: • A clear tagline should be added in the fixed place in the main page.

18. Findings and Recommendations • PROBLEM 10: The word written on the screen cannot be distinguished from the background clearly. • Recommendations: • Translucent dark background should be provided • The color of the word should be light and consistent

19. Findings and Recommendations • PROBLEM 6: Lack of breadcrumb • Recommendations: • Provide the breadcrumb trail in small type on the top of the content area Yale Website Design Guideline

20. Findings and Recommendations • PROBLEM 7: The guide to show how to use handwriting function of the touch screen is not easy to be noticed. • Recommendations: • Touch screen input guide should be duplicated in the guide on the upper right corner of the page

21. Findings and Recommendations • PROBLEM 12: Inappropriate layout of the input keypad • Recommendations: • Put the input keypad near the column • Move it to the right side of the screen instead

22. Findings and Recommendations • PROBLEM 13: Different sizes of buttons in the same layer of the hierarchy under the subcomponent “Service” • Recommendations: • All the buttons in the same size • Use color difference to highlight the popular services