使用者介面發展至今已由過去的文字指令轉換成圖形化導向，介面上所運用的視覺元素越來越豐富而多元，但是介面上的要素越多，就更應該透過一個完善的視覺架構來整合，規劃一套完整的頁面配置設計，有助於使用者理解介面中的資訊架構。
近年台灣有睡眠問題的人數不斷攀升，而電子睡眠日誌是一項針對失眠患者所開發的產品，將傳統紙本睡眠日誌數位化，整合各項需填寫的項目，運用觸控式螢幕作為操作介面，以提昇整體使用性。然而觸控介面的操作方式，主要是以手指或觸控筆直接在螢幕上點擊操作，有別於以往傳統電腦螢幕介面是以滑鼠或鍵盤為主的輸入方式，為了因應此不同的輸入模式，電子睡眠日誌在設計時，其介面的視覺呈現，就必須調整為適用於觸控介面。
本研究以一般介面的設計原則為基礎，發展出合適於觸控介面之電子睡眠日誌的介面設計，經過兩階段實驗，共三個版本的電子睡眠日誌，測試後發現，良好的頁面配置可讓使用者從中得知操作順序，能有效提升操作效率。此外，針對電子睡眠日誌之介面設計評估的結果如下：(1)介面設計需要各領域專業人員的配合，跨領域合作才能相互整合出一套完善的介面系統；(2)圖形化的呈現必須能產生直接的聯想，若圖形的類比設計不當，使用者必須一再思索才能理解；(3)步驟式的填寫能提昇操作效率，依循介面的引導，逐步往下填寫，減少思考的時間；(4)介面上罕見的用詞須謹慎使用，使用者對字詞的意義不甚了解會間接影響操作，應在事前對使用者詳細說明。
另外，針對介面之頁面配置設計的討論結果如下：(1)頁面配置應具有結構上的意義，所有配置都應有各自代表的作用存在，才能讓頁面建立起無形的操作順序；(2)善用一致性建立規範，可以形成具有邏輯和秩序的頁面；(3)頁面配置與互動設計需妥善整合，可利用物件－運作介面模型（Object-Action Interface Model, 簡稱OAI模型），將介面上的物件、使用者動作、各物件在介面上所呈現的動作同步整合；(4)頁面元素多寡和階層深淺需協調運用，妥善規劃頁面「廣度」與「深度」的分配，取得兩者之間的平衡，才能展現良好的使用性；(5)觸控介面的頁面設計，需格外謹慎考量配置問題，避免頁面訊息被操作者的手部遮蔽；(6)審慎運用頁面配置設計原則：用一致的原則來建立介面的基本設計規範，包含邊界、圖像、文字、色彩；運用象限優先原則時，需考量元素本身的視覺強度是否會造成影響；對稱性平衡若無任何強調性的設計，容易讓使用者無法從頁面中區分優先操作的部份；使用群組原則時，在按鈕字義相似且擺放位置近的情況下容易破壞群組作用；運用連續原則時，若要加強其連續性，可將物件對齊置放於同一個直線上。

The development of user-interface has evolved from text-instruction in the past to graphic-oriented now, and interface has been more varied due to the application of visual element. The increased number of elements on interface should be integrated through an integrated visual structure. A completed layout design is essential for a user to understand the information architecture of the interface. Nowadays, a growing number of people in Taiwan have sleeping problem. Our subject is Electronic Sleep Diary (ESD), a product developed for insomnia patient, digitizing the traditional sleep diary (TSD) on paper. ESD integrates every element in TSD and applies touch screen as the operational interface to increase the usability. The ideal way of operating a touch interface is to touch on the screen by fingers or a touch pen directly, not like the traditional way of using mouse or keyboard.
The visual presentation of interface in ESD has to be designed to be accordance with touch interface for its different ways of input. This study is to develop the interface for ESD, being based on general principles and applicable in touch screen. Three different versions of the interface have been designed with two-step experiments to examine their usability.
The result of examination is that a fine layout can have the users comprehend the order of operation and increase the efficiency of operation.Furthermore, the results of evaluating the interface design of ESD are as the following: (1) A successful interface design needs multi-disciplinary cooperation. It can result in a better interface system; (2) Graphic representation should have direct association that enables users understand the graphic analogy in design; (3) A clear procedure of writing a sleeping diary can increase the efficiency of operation and reduce the time of thinking; (4) Be careful when using jargon in interface. The operation would be affected indirectly due to the misunderstanding of the meaning of the terminology. A detailed description is needed for the use of jargon.
In addition, the results of discussing the layout design of the interface are as thefollowing: (1) There should be constructional meaning to layout. All layouts should have the self-representative effects, and can help users establish an underlying sequence of operation; (2) Maintaining consistency helps to establish the logic and order of the interface; (3) Screen layout and interaction design should be well-arranged and integrated using Object-Action Interface Model; (4) Balance the tradeoff between the number of elements in single screen and the depth of the hierarchy; (5) The layout design of touch screen should avoid the page information to be covered by user`s hand; (6) Applying the design principle of page layout seriously helps the usability: Using the principle " Consistency" to establish the basic standard of interface design, including border, image, text and color; when using the principle "Quadrant Preference", it should be noticed the visual strength of elements reduce the effect or not; symmetrical balance makes user not recognize the priority of pages; the buttons of similar meanings and with close distance prevent the effect of the principle “Grouping”; aligning objects increase the effect of principle "Continuity".

Keywords: Interface design, Graphic user interface, Layout, Sleeping Diary, Touch Screen

參考文獻
英文參考文獻
1.Brooke, J. (1986). SUS: A quick and dirty usability scale. In P. W. Jordan, B. Thomas, B. A. Weerdmeester & A. L. McClelland (Eds.) Usability Evaluation in Industry. London: Taylor and Francis.
2.Chin, J. P., Diehl, V. A. and Norman, K. L. (1988). Development of an instrument measuring user satisfaction of the human-computer interface. Proceedings of SIGCHI’88 (pp. 213-218). New York: ACM/SIGCHI.
3.Elam, K. (2004). Grid systems: Principles of organizing type. New York: Chronicle Books Llc.
4.Feiner, S. (1988). A grid-based approach automating display layout. In Proceedings of the Graphic Interface’88, Edmonton, Canada (pp.192-197). Canada: Morgan Kaufmann.
5.Galitz, W.O. (2007). The essential guide to user interface design : an introduction to GUI design principles and techniques (3rd ed.). New York: Wiley.
6.Hart, S.G. (2006). Nasa-Task Load Index (Nasa-TLX); 20 Years Later. Human Factors and Ergonomics Society Annual Meeting Proceedings (pp. 904-908). California: Human Factors and Ergonomics Society.
7.Kollar, L. (2003). GUIML,creating amic GUI objects using XML. Mathematical and Computer Modelling, 38 (9), 893－901.
8.Kim, W.C.& Foley, J.D. (1993). Providing high-level control and expert assistance in the user interface presentation design. In Arnold, B., Van der Veer, G., & White, G. (Eds.). Proceedings of the INTERACT ‘93 and CHI ‘93 conference on Human factors in computing systems (pp.430-437). Amsterdam: The Netherlands.
9.Larson, K. & Czerwinski, M. (1998). Web Page Design: Implications of Memory, Structure and Scent for Information Retrieval, Proceedings of CHI’98 Human Factors in Computing Systems (pp. 18-23). New York: ACM.
10.Mullet, K. & Sano, D. (1995). Designing visual interfaces : Communication oriented techniques. New Jersey: SunSoft Press.
11.Norman, D.A. (1988). The psychology of everyday things. New York: Basic Books.
12.Norman, D. A. (1999). Affordance, conventions, and design. Interactions, 6(3), 38-43.
13.Sanders, Mark S.& McCormick, Ernest J. (1992). Human Factors in Engineering And Design. New York: McGraw-Hill.
14.Shneiderman, B. (1987). Designing the UserInterface: Strategies for Effective Human Computer Interaction. Massachusetts: Addison-Wesley.
15.Staggers, N. (1993). Impact of screen density on clinical nurses' computer task performance and subjective screen satisfaction. International Journal of Man-Machine Studies, 39(5), 775-792.
16.Gillo, X. & Vanderdonckt, J. (1994).Visual techniques for traditional and multimedia layouts. In Costabile, M. F., Catarci, T., Levialdi, S. & Santucci, G.(Eds.), Proceedings of the workshop on Advanced visual interfaces (pp.95-104). Italy: Bari.
17.Vogel, C. (2003). A roadmap for proper taxonomy design. Computer Technology Review, 23(7), 42-44.
18.Weinschenk, S. (1997). GUI design essentials. New York: Wiley Comput-er Pub.
19.Zaphiris, P. (2000). Depth Vs Breadth in the Arrangement of Web Links. Proceedings of the 44th Annual Meeting of the Human Factors and Ergonomics Society (pp. 139-144). California: Human Factors and Ergonomics Society. .

中文參考文獻
20.Bürdek, B. (1996)。工業設計：產品造形的歷史、理論及實務 (Design: Geschichte,theorie und praxis der Produktgestalung) (胡佑宗譯)。台北市：亞太圖書。
21.Morin, C. & Espie, C. (2008)。失眠的評估與治療 : 臨床實務手冊 (Insomnia : a clinical guide to assessment and treatment)(楊建銘、黃彥霖與林詩維譯)。臺北市 : 心理。
22.Preece, J.,Rogers, Y.& Sharp, H. (2006)。互動設計：跨越人－電腦互動 (Interaction Design: Beyond Human-Computer Interaction）（陳建雄譯）。台北市：全華圖書。
23.Rosenfeld, L. & Morville, P. (2004)。資訊架構學：網站應用 (Information architecture for the world wide web) (陳建勳譯)。台北市：歐萊禮。
24.Shneiderman, B. (2005)。人機介面 : 有效的人機互動策略 (Designing the user interface : strategies for effective human-computer interaction)(曾志軒譯)。台北市：台灣培生教育。
25.Solso, R. L. (2004)。視覺藝術認知 (Cognition and the visual art) (梁耘瑭譯)。台北市：全華圖書。
26.Tidwell, J. (2006)。操作介面設計模式 (Designing interfaces) (蔡學鏞譯)。台北市：歐萊禮。
27.丁美月(2007)。身心舒眠使用手册：讓生命自然地「轉化」與「再生」。台北市：姿霓國際。
28.方裕民(2003)。人與物的對話－互動介面設計理論與實踐。台北市：田園城市。
29.李青蓉(1998)。人機介面設計。台北市：空中大學
30.吳立雅(2004)。以人機介面觀點探討醫令資訊系統的用藥疏失因素及介面設計原則。元智大學資訊傳播學系碩士論文，桃園縣。
31.吳智豪(2004)。個人數位助理之視窗操作介面發展。國立成功大學工業設計研究所碩士論文，台南市。
32.雷凱俞(2009)。運用預示性於電子睡眠日誌之設計與使用性測試。國立台灣科技大學設計研究所碩士論文，台北市。
33.蕭貴霙(2008)。互動介面設計與評估－以高齡者資訊介面為例。長庚大學工業設計研究所碩士論文，台北縣。

網路參考資料
34.台灣睡眠醫學學會。上網日期：2010, 6, 15。網址：http://www.tssm.org.tw/news.php
35.Questionnaire For User Interaction Satisfaction. 上網日期：2010, 6, 15。網址： http://lap.umd.edu/quis/