學術產出-Theses
Article View/Open
Publication Export
-
題名 Xketch-線稿式原型設計工具於行動應用開發之研究
Xketch - A Sketch-Based Prototyping Tool for Mobile App Development作者 徐嘉駿
Hsu, Jia Jyun貢獻者 余能豪<br>林玲遠
徐嘉駿
Hsu, Jia Jyun關鍵詞 原型製作
開發工具
線稿式設計
迭代設計
Prototyping
Toolkits
Sketch-Based
Iterative design process日期 2015 上傳時間 3-Aug-2015 13:43:54 (UTC+8) 摘要 行動應用程式App開發時相當注重於使用者體驗。利用原型進行測試以收集使用者回饋，根據回饋改善原型再進行原型測試，此過程稱之為Iterative Design Process。本研究從前測與訪談中得知設計師偏好使用線稿式的設計手法做出紙面原型，經過數次上述的循環後再轉換成互動式原型；在反覆設計/重構原型與進行使用者測試的過程中，累積了許多的資料需要被記錄與分析，但目前尚未有服務能支援Iterative Design Process中各個階段的需求。本研究提出了一套能加快設計流程的線稿式原型設計工具「Xketch」。在原型設計階段，設計師可透過繪製筆畫指令的方式生成元件與設定頁面、元件間的互動行為；當原型設計完成後可以直接發佈給受測者。在原型測試階段時，系統會同步記錄受測者的操作過程與think-aloud口述資料。最後，將收集到資料透過時間軸介面重現以協助團隊分析與討論。本研究認為Xketch能有效幫助行動應用程式App的開發過程，加速Iterative Design Process的循環。第一版Xketch的開發目的著重於原型設計階段，設計師可利用筆畫指令生成對應的元件與互動行為，並透過Storyboard設定與檢視原型的使用流程。受測者認為Xketch整體的操作簡易、容易學習，也相當認同使用線稿圖案作為筆畫指令的概念，並認為Xketch能有效幫助設計師快速製作出互動式原型。最後，本研究將分析受測者操作記錄並搭配訪談回饋總結Xketch的實驗結果與討論，探討未來Xketch在原型設計的改善方向。
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.參考文獻 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 http://www.telono.com/en/articles/lo-fi-vs-hi-fi-prototyping-how-real-does-the-real-thing-have-to-be/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 https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/Landay, J., & Myers, B. (1995). Interactive sketching for the early stages of user interface design. CHI ’95. Retrieved from http://dl.acm.org/citation.cfm?id=223910Newman, 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_3Rettig, 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.2388732Vinod 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 描述 碩士
國立政治大學
數位內容碩士學位學程
101462012資料來源 http://thesis.lib.nccu.edu.tw/record/#G0101462012 資料類型 thesis dc.contributor.advisor 余能豪<br>林玲遠 zh_TW dc.contributor.author (Authors) 徐嘉駿 zh_TW dc.contributor.author (Authors) Hsu, Jia Jyun en_US dc.creator (作者) 徐嘉駿 zh_TW dc.creator (作者) Hsu, Jia Jyun en_US dc.date (日期) 2015 en_US dc.date.accessioned 3-Aug-2015 13:43:54 (UTC+8) - dc.date.available 3-Aug-2015 13:43:54 (UTC+8) - dc.date.issued (上傳時間) 3-Aug-2015 13:43:54 (UTC+8) - dc.identifier (Other Identifiers) G0101462012 en_US dc.identifier.uri (URI) http://nccur.lib.nccu.edu.tw/handle/140.119/77316 - dc.description (描述) 碩士 zh_TW dc.description (描述) 國立政治大學 zh_TW dc.description (描述) 數位內容碩士學位學程 zh_TW dc.description (描述) 101462012 zh_TW dc.description.abstract (摘要) 行動應用程式App開發時相當注重於使用者體驗。利用原型進行測試以收集使用者回饋，根據回饋改善原型再進行原型測試，此過程稱之為Iterative Design Process。本研究從前測與訪談中得知設計師偏好使用線稿式的設計手法做出紙面原型，經過數次上述的循環後再轉換成互動式原型；在反覆設計/重構原型與進行使用者測試的過程中，累積了許多的資料需要被記錄與分析，但目前尚未有服務能支援Iterative Design Process中各個階段的需求。本研究提出了一套能加快設計流程的線稿式原型設計工具「Xketch」。在原型設計階段，設計師可透過繪製筆畫指令的方式生成元件與設定頁面、元件間的互動行為；當原型設計完成後可以直接發佈給受測者。在原型測試階段時，系統會同步記錄受測者的操作過程與think-aloud口述資料。最後，將收集到資料透過時間軸介面重現以協助團隊分析與討論。本研究認為Xketch能有效幫助行動應用程式App的開發過程，加速Iterative Design Process的循環。第一版Xketch的開發目的著重於原型設計階段，設計師可利用筆畫指令生成對應的元件與互動行為，並透過Storyboard設定與檢視原型的使用流程。受測者認為Xketch整體的操作簡易、容易學習，也相當認同使用線稿圖案作為筆畫指令的概念，並認為Xketch能有效幫助設計師快速製作出互動式原型。最後，本研究將分析受測者操作記錄並搭配訪談回饋總結Xketch的實驗結果與討論，探討未來Xketch在原型設計的改善方向。 zh_TW dc.description.abstract (摘要) 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. en_US dc.description.tableofcontents 摘要 IAbstract II致謝 V目錄 VII圖目錄 IX表目錄 XI第1章 緒論 11.1 研究背景與動機 1 1.1.1 Iterative Design Process（迭代設計） 1 1.1.2 初步研究 71.2 研究目的 10第2章 文獻及案例探討 122.1 線稿式設計 122.1.1 紙面原型 122.1.2 線稿式設計工具 132.1.3 小結 182.2 App原型製作的案例探討 182.2.1 影像連結式的原型製作工具案例 192.2.2 元件產生器的原型製作工具案例 222.2.3 小結 26第3章 系統設計 273.1 概念說明 273.1.1 原型介面設計 283.1.2 原型測試階段 293.1.3 資料分析階段 303.2 系統原型設計 313.2.1 $P Point-Cloud Recognizer 323.2.2 筆畫指令 323.2.3 介面與互動設計 363.2.4 小結 41第4章 系統評估 424.1 實驗流程 424.2 受測者資訊 444.3 實驗結果與討論 454.3.1 筆畫指令 454.3.2 介面與互動設計的觀察結果 504.4 小結 55第5章 結論 585.1 未來展望 585.2 研究貢獻 62參考文獻 65附錄一 實驗流程說明 68附錄二 問卷與訪談 71 zh_TW dc.format.extent 12810687 bytes - dc.format.extent 12810687 bytes - dc.format.mimetype application/pdf - dc.format.mimetype application/pdf - dc.source.uri (資料來源) http://thesis.lib.nccu.edu.tw/record/#G0101462012 en_US dc.subject (關鍵詞) 原型製作 zh_TW dc.subject (關鍵詞) 開發工具 zh_TW dc.subject (關鍵詞) 線稿式設計 zh_TW dc.subject (關鍵詞) 迭代設計 zh_TW dc.subject (關鍵詞) Prototyping en_US dc.subject (關鍵詞) Toolkits en_US dc.subject (關鍵詞) Sketch-Based en_US dc.subject (關鍵詞) Iterative design process en_US dc.title (題名) Xketch-線稿式原型設計工具於行動應用開發之研究 zh_TW dc.title (題名) Xketch - A Sketch-Based Prototyping Tool for Mobile App Development en_US dc.type (資料類型) thesis en dc.relation.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 http://www.telono.com/en/articles/lo-fi-vs-hi-fi-prototyping-how-real-does-the-real-thing-have-to-be/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 https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/Landay, J., & Myers, B. (1995). Interactive sketching for the early stages of user interface design. CHI ’95. Retrieved from http://dl.acm.org/citation.cfm?id=223910Newman, 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_3Rettig, 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.2388732Vinod 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 zh_TW
