資訊與溝通科技的快速成長，加上網路便利性的提升，無意間促進人們使用科技學習新知以及顛覆傳統面對面授課的教育形式。而在數位學習的型態中，又以因為行動裝置普及促使的行動載具學習型態最為重要。

本研究分享開發TutorMandarin的過程。TutorMandarin是一款提供外國人能在線上學習中文的軟體，其提供的平台包含網站與行動APP。而在本行動研究中，如何幫助TutorMandarin的設計師區分數位學習與行動載具學習的特色，並在分析使用者經驗後，能以使用者導向設計來修改現有的APP使用者介面。而透過實際參與開發的過程，從學術與實務的角度，產出能提供設計師參考的模組。

本行動研究限制在於使用者介面的範疇中，尚未劃分出一個專屬於行動載具學習的種類，而當設計師想開發關於行動載具學習的使用者介面時，可能會對於從教育與設計這種跨領域結合的創新感到迷惘，且在設計研究的初期，須先劃分數位學習與行動載具學習的界線，才能制訂專屬行動載具學習的使用者介面。

在此次行動研究的預期結果當中，期望能給予設計師在設計行動載具使用者介面時有一個開發過程的參考，並對於產業、公司以及個人發展都有正成長的效果。

The rapid growth of information and communication technologies and the convenience of Network inadvertently create new educational patterns when people learn new knowledge with technological products. On the hand, the behavior of people gaining information with technology has made revolution of traditional face-to-face teaching format. Moreover, mobile learning (M-learning) has become the most important role as the proliferation of mobile devices gradually.

This study shares the process of participant in developing TutorMandarin, which provides online Chinese language teaching service by official website and APP platform. The main contribution of this action research is how to assist User Experience and User Interface designers of TutorMandarin to distinguish the features of E-learning and M-learning. Furthermore, designers can use user-centered design to revise existing UI after analyzing UX. Through the process of this action plan, it is anticipated that offer designers a reference from academic and practical perspectives.

The scope of this study is not yet to divide one exclusive type of M-learning UI. Leaning against the factor, it may make designers feel confused on the innovative format of combining education and design realms when the process of developing UI. Also, the first step must clarify the boundary between E-learning and M-learning then start to formulate the exclusive M-learning UI.

This research provides a reference for designers when developing M-learning UI. Moreover, it can result in positive influence for industry, company and individual.

Ahonen, T. & Moore, A. (2007, January 1). Putting 2.7 billion in context: Mobile
phone users. [Online]. Available: http://communities-dominate.blogs.com/brands/2007/01/putting_27_bill.html
Bicen, H. & Cavus, N. (2011). “Social network sites usage habits of undergraduate
students: case study of Facebook,” Procedia - Social and Behavioral Sciences., 28, 943-947.
Brown, T. H. (2003, June). The role of m-learning in the future of e-learning in
Africa. In 21st ICDE World Conference. [Online]. Available: http://www. tml. tkk. fi/Opinnot (Vol. 110).
Butkiewicz, M., Wang, D., Wu, Z., Madhyastha, H. V., & Sekar, V. (2015). Klotski:
Reprioritizing web content to improve user experience on mobile devices. In
12th USENIX Symposium on Networked Systems Design and Implementation, NSDI 15, pp. 439-453.
C. Quinn. (2007). mLearning: Mobile, Wireless, In-Your-Pocket Learning, LineZine, Fall
2000. Available: http://www.linezine.com/2.1/features/cqmmwiyp.htm
Clark, R. C., & Mayer, R. E. (2016). E-learning and the science of instruction: Proven
guidelines for consumers and designers of multimedia learning. John Wiley & Sons.
Corbeil, J. R., & Valdes-Corbeil, M. E. (2007). Are you ready for mobile learning?
Educause Quarterly, 30(2), 51.
Deb MacKenze. (2014, October 02). What’s the difference between UX and
UI. Retrieved from https://thecdm.ca/news/ux-vs-ui
Downer, C. (2012). Skeuomorphism and the UI. 22/11/2012. Available:
http://realmacsoftware.com/blog/skeuomorphism-and-the-user-interface.
FORLIZZI, J. and BATTARBEE, K., 2004, Understanding experience in interactive
systems. In Proceedings of the 2004 conference on Designing Interactive Systems (DIS 04): processes, practices, methods, and techniques (New York: ACM), p. 261.
Garrett, J. J. (2004). The elements of user experience. Jjg. net, 2000.
Gay, G., Stefanone, M., Grace-Martin, M., & Hembrooke, H. (2001). The effects of
wireless computing in collaborative learning environments. International Journal of Human-Computer Interaction, 13(2), 257–276.
Georgiev, T., Georgieva, E., & Smrikarov, A. (2004, June). M-learning-a New Stage
of Е-Learning. In International Conference on Computer Systems and Technologies-CompSysTech (Vol. 4, No. 28, pp. 1-4).
Goran Paunovic, (2013, August 29). The relationship between user interface and user
experience. Available: http://blog.artversion.com/web-design-company/the-relationship-between-user-interface-and-user-experience/
Gorlenko L. and Merrick R.: No wires attached: Usability challenges in the connected
mobile world. IBM Systems Journal , 42(4), 639–651, 2009.
Hassenzahl, M., & Tractinsky, N. (2006). User experience-a research agenda.
Behaviour & information technology, 25(2), 91-97.
Hayes, P., Joyce, D., & Pathak, P. (2004). Ubiquitous learning–an application of
mobile technology in education. In Proceedings of world conference on educational multimedia, hypermedia and telecommunications (pp. 1811-1816).
Horton, W. (2011). E-learning by design. John Wiley & Sons.
Humayoun, S. R., Hess, S., Kiefer, F., & Ebert, A. (2014, September). Patterns for
Designing Scalable Mobile App User Interfaces for Multiple Platforms. In Proceedings of the 28th International BCS Human Computer Interaction Conference on HCI 2014-Sand, Sea and Sky-Holiday HCI (pp. 317-322). BCS.
Isman, A., (2006), Computer and education, Sakarya University Journal of Education,
Volume: 2 Web Site: http://www.ef.sakarya.edu.tr/dergi/efdergisayi1.pdf, 24.11.2006.
Jamie Leeson. (October 25, 2016). 10 top UI trends for 2017. Retrieved from
http://www.creativebloq.com/features/10-top-ui-trends-for-2017
John Heggestuen. (2013). One In Every 5 people In The World Own A Smartphone,
One In Every 17 Own A Tablet [CHART]. Retrieved from http://www.businessinsider.com/smartphone-and-tablet-penetration-2013-10
Johnson, L., Adams Becker, S., Estrada, V., & Freeman, A. (2014). NMC Horizon
report:2014 K–12 edition. Austin, TX: The New Media Consortium.
Keegan, D 2003. The future of learning:From eLearning to
mLearning.Hagen:Fernstudienforchung, Germany. E-published version:http://learning.ericsson.net/leonardo/thebook/
Kerri Simmons. (2014). Designing E-learning and M-learning for PC and Tablets.
Retrieved from https://www.sweetrush.com/designing-e-learning-and-m-learning-for-pc-and-tablets/
Keser, H., Uzunboylu, H., & Ozdamli, F.,(2011). The trends in technology supported
collaborative learning studies in 21st century. World Journal on Education Technology.2(2). 103-119
Khalid, H., Shihab, E., Nagappan, M., & Hassan, A. E. (2015). What do mobile app
users complain about?. IEEE Software, 32(3), 70-77.
Kim, H.K., Han, S.H., Park, J., Park, W., Park, Y.S., Cho, Y., Chun, J., Oh, S., 2009.
The definition of user experience through a literature survey. In: Proceedings of the 3. Gesture based navigation 2009 Fall Conference of the Korean Institute of Industrial Engineers. The relationship between user interface and user experience
Law, E.L.C., Roto, V., Hassenzahl, M., Vermeeren, A.P.O.S., Kort, J., 2009.
Understanding, scoping and defining user experience: a survey approach. In: Proceedings of the 27th International Conference on Human Factors in Computing Systems (CHI 2009), pp. 719e728.
MARC SCHENKER. 2016. The Ultimate Mobile Design Trends for 2016. Retrieved
from https://www.ymedialabs.com/ultimate-mobile-design-trends-2016/
Marghescu, G., Chicioreanu, T. D., & Marghescu, I. (2007). An alternative to the
traditional methods in education-m-learning: a glance into the future. In EUROCON 2007-The International Conference on" Computer as a Tool".
Mark Harrison. (2012). Mobile learning. Retrieved from www.kineo.com
Netania Engelbrecht, April 1, 2016, Mobile App Design Trends: Our Picks. Retrieved
from http://blog.usabilla.com/mobile-app-design-trends-our-picks/
O’Malley, C., Vavoula, G., Glew, J., Taylor, J., Sharples, M., & Lefrere, P. (2003).
Guidelines for learning/teaching/tutoring in a mobile environment. Mobilearn
project deliverable. Retrieved December, 2, 2014.
Ozuorcun, N. C., & Tabak, F. (2012). Is M-learning versus E-learning or are they
supporting each other?. Procedia-Social and Behavioral Sciences, 46, 299-305.
Quinn, C. (2013). A future for M-Learning. In Z. L. Berge & L. Y. Muilenburg (Eds.),
Handbook of mobile learning. New York, NY: Routledge.
Rob Van Kranenberg, The Internet of Things: A Critique of Ambient Technology and
the All-Seeing Network of RFID (Amsterdam: The Institute of Network Cultures, 2008), 12-16
S. Agarwal et al., “Diagnosing Mobile Applications in the Wild,” Proc. 9th ACM
SIGCOMM Workshop Hot Topics in Networks, 2010, p. 22.
Sharples, M. (2000). The design of personal mobile technologies for lifelong learning.
Computers & Education, 34(3), 177-193.
Sutch, D. (2010). Education futures, teachers and technology. Futurelab Report.
http://www2.futurelab.org.uk/resources/documents/other_research_reports/Education_futures.pdf.
Shudong, W., & Higgins, M. (2005, November). Limitations of mobile phone learning.
In Wireless and Mobile Technologies in Education, 2005. WMTE 2005. IEEE International Workshop on (pp. 3-pp). IEEE.ISO 690
Traxler, J. (2005, June). Defining mobile learning. In IADIS International Conference
Mobile Learning (pp. 261-266).
Traxler, J. (2013). Mobile learning across developing and developed worlds: Tackling
distance, digital divides, disadvantage, disenfranchisement. In Z. L. Berge & L. Y. Muilenburg (Eds.), Handbook of mobile learning. New York, NY: Routledge.
Uzunboylu, H., Bicen, H., and Cavus, N. (2011). The efficient virtual learning
environment: A case study of web 2.0 tools and windows live spaces. Computers & Education, 56(3), 720-726.
Verve, (August 17, 2015). The History of Flat Design,Infographics.
Wains, S. I., & Mahmood, W. (2008, October). Integrating m-learning with e-learning.
In Proceedings of the 9th ACM SIGITE conference on Information technology education (pp. 31-38). ACM.
Welsh, E. T., Wanberg, C. R., Brown, K. G., & Simmering, M. J. (2003). E‐learning:
emerging uses, empirical results and future directions. International Journal of Training and Development, 7(4), 245-258.