Please use this identifier to cite or link to this item:

Title: Xketch-線稿式原型設計工具於行動應用開發之研究
Xketch - A Sketch-Based Prototyping Tool for Mobile App Development
Authors: 徐嘉駿
Hsu, Jia Jyun
Contributors: 余能豪

Hsu, Jia Jyun
Keywords: 原型製作
Iterative design process
Date: 2015
Issue Date: 2015-08-03 13:43:54 (UTC+8)
Abstract: 行動應用程式App開發時相當注重於使用者體驗。利用原型進行測試以收集使用者回饋,根據回饋改善原型再進行原型測試,此過程稱之為Iterative Design Process。本研究從前測與訪談中得知設計師偏好使用線稿式的設計手法做出紙面原型,經過數次上述的循環後再轉換成互動式原型;在反覆設計/重構原型與進行使用者測試的過程中,累積了許多的資料需要被記錄與分析,但目前尚未有服務能支援Iterative Design Process中各個階段的需求。
本研究提出了一套能加快設計流程的線稿式原型設計工具「Xketch」。在原型設計階段,設計師可透過繪製筆畫指令的方式生成元件與設定頁面、元件間的互動行為;當原型設計完成後可以直接發佈給受測者。在原型測試階段時,系統會同步記錄受測者的操作過程與think-aloud口述資料。最後,將收集到資料透過時間軸介面重現以協助團隊分析與討論。本研究認為Xketch能有效幫助行動應用程式App的開發過程,加速Iterative Design Process的循環。
Iterative Design Process plays a great role for developing mobile applications with great user experience. Designers create prototypes to collect user feedback and use those feedbacks to improve designs and prototypes for further iterations and testings. From our initial studies, we found out designers tend to use sketch based paper prototypes as their initial prototyping method. Designers go through rounds of paper prototyping, testing and iterations, before moving on to create digital interactive prototypes. During this process, there are a lot of information needs to be recorded and analyzed for the iteration loop. However, no integrated service yet can streamlined designers’ process of creating prototypes, recording testing sessions, and analyzing results.
We developed “Xketch”, a sketch-based mobile application development tool for iterative designs and testings. First, designers can use the sketching interface on Xketch to rapidly prototype UI modules and interactions. Designers then can distribute the prototypes through Xketch to testers. During testing sessions, Xketch’s testing environment will record user behavior data and think aloud audios. At last, the collected data will be presented on Xketch’s timeline interface for feedback analysis. We envision Xketch to streamline and optimize the iterative design process when designers design mobile applications.
The first version of Xketch contains major features for the prototyping phase. Designers can use simple sketching gestures to generate corresponding on-screen UI modules, and configure interactions of those components. Moreover, designers can also create and review interaction flows through storyboard settings. From our testing for Xketch, participants indicate that Xkecth is easy to use and learn. They also found the concept of using sketching gestures to generate on-screen UI module intuitive. Overall, participants think that Xketch can help them create prototype rapidly and intuitively. To improve for Xketch, we recorded participants’ usage behavior and accompanied with user interviews to give us a holistic view on the future iterative direction for Xketch.
Reference: Carolyn Snyder. (2003). Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces. Morgan Kaufmann.
Coyette, A., Faulkner, S., Kolp, M., Limbourg, Q., & Vanderdonckt, J. (2004). SketchiXML : Towards a Multi-Agent Design Tool for Sketching User Interfaces Based on U SI XML. TAMODIA 2004.
Egger, F. N. (2000). Lo-Fi vs. Hi-Fi Prototyping: how real does the real thing have to be? Retrieved October 2, 2014, from
Gould, J., & Lewis, C. (1985). Designing for usability: key principles and what designers think. Communications of the ACM, 28(3), 300–311.
Herbsleb, J., & Kuwana, E. (1993). Preserving knowledge in design projects: What designers need to know. CHI ’93 & INTERACT '93, 7–14.
iOS Human Interface Guidelines: Designing for iOS. (2014). Retrieved October 16, 2014, from
Landay, J., & Myers, B. (1995). Interactive sketching for the early stages of user interface design. CHI ’95. Retrieved from
Newman, M., Lin, J., Hong, J., & Landay, J. (2003). DENIM: An Informal Web Site Design Tool Inspired by Observations of Practice. CHI ’13, 18(3), 313–320. doi:10.1207/S15327051HCI1803_3
Rettig, M. (1994). Prototyping for tiny fingers. Communications of the ACM.
Rudd, J., Stern, K., & Isensee, S. (1996). Low vs. high-fidelity prototyping debate. Interactions.
Segura, V., Barbosa, S., & Simões, F. (2012). UISKEI: a sketch-based prototyping tool for defining and evaluating user interface behavior. AVI ’12, 18–25.
Vatavu, R., Anthony, L., & Wobbrock, J. (2012). Gestures as point clouds: a $ P recognizer for user interface prototypes. Proceedings of the 14th ACM …, 0–7. doi:10.1145/2388676.2388732
Vinod Goel. (1995). Sketches of Thought. Cambridge, MA: The MIT Press.
Walker, M., Takayama, L., & Landay, J. a. (2002). High-Fidelity or Low-Fidelity, Paper or Computer? Choosing Attributes when Testing Web Prototypes. HFES ’02, 46(5), 661–665. doi:10.1177/154193120204600513
Description: 碩士
Source URI:
Data Type: thesis
Appears in Collections:[數位內容碩士學位學程] 學位論文
[數位內容與科技學士學位學程] 學位論文

Files in This Item:

File Description SizeFormat
201201.pdf12510KbAdobe PDF95View/Open
201202.pdf12510KbAdobe PDF74View/Open

All items in 學術集成 are protected by copyright, with all rights reserved.

社群 sharing