Engaging students reasoning through drawing in classroom context. Reflection on an introductory module in UX design

Promover o raciocínio dos estudantes pelo desenho em contexto da sala de aula. Reflexão baseada num módulo introdutório ao design UX

Silva, J. Neves, J. Raposo, D.

IPCB/ESART - Escola Superior de Artes Aplicadas do Instituto Politécnico de Castelo Branco
IPCB/ESART - Escola Superior de Artes Aplicadas do Instituto Politécnico de Castelo Branco
IPCB/ESART - Escola Superior de Artes Aplicadas do Instituto Politécnico de Castelo Branco

Retirado de: http://convergencias.esart.ipcb.pt

RESUMO: Vários estudos explicam como o desenho pode ser aplicado como uma ferramenta de raciocínio ao envolver um aluno para aprender diferentes disciplinas de estudo; O aluno irá representar a sua compreensão sobre um tema específico através de sua linguagem natural. O ato de desenhar funciona como um incentivo, os alunos interagem com o tema de estudo através da representação gráfica de uma idéia. Embora o desenho seja útil como ferramenta, a falta de um elo mais forte com a escrita e a fala ainda é desperdiçada. Há a necessidade de capacitar o desenho como uma ferramenta de raciocínio, encontrar novos links e projetar outras associações futuras. Storytelling fornece uma ligação possível entre o raciocínio através de desenho, fala, escrita e gestão da informação. A aplicação de abordagens sistematizadas aplicadas na resolução de problemas em sistemas de produtividade pessoal (PPS) como o sistema Get Things Done (GTD) permite uma perspectiva relacionada com diferentes níveis de aprendizagem e configurações. Uma estratégia de aprendizagem focada nesses elementos é crucial no contexto contemporâneo do design da Interface do Usuário, permitindo novas definições de linguagem e raciocínio em uma abordagem sistemática sobre como desenvolver e capacitar uma idéia específica.

PALAVRAS-CHAVE: Desenho, narração de histórias, interface do usuário, UX (experiência do usuário), mockup.
ABSTRACT: Several studies explain how drawing can be applied as a reasoning tool when engaging a student to learn different subjects of study; the learner will represent their comprehension on a specific subject through their natural language. The act of drawing works as an incentive, students interact with the subject of study through the graphic representation of an idea. Although drawing is useful as a tool, the lack of a stronger link with writing and talking is still missed. There is the need to empower drawing as a reasoning tool, find new links and project other future associations. Storytelling provides a possible link between reasoning through drawing, talking, writing and information management. Applying systemized approaches applied on problem solving in personal productivity systems (PPS) as the Get Things Done system (GTD) enable a perspective related with different learning levels and settings. A learning strategy focusing on these elements is crucial in the contemporaneous context of User Interface design, it allows new language definitions and reasoning in a systematic approach on how to develop and empower a specific idea. 
KEYWORDS: Drawing, storytelling, user interface, UX (user experience), mockup.

1. Introduction

Every day teachers face learners that display specific learning problems due to reasoning difficulties. That demotivation is caused by a false notion of the time required to understand and master a specific subject. The rhythm of contemporary life and the idea of ephemeral it conveys undermine the value of project as management of different activities to achieve a predetermined objective. The necessity of developing a project that amplifies more resilience in students should be a more contemporaneous need, in order to offer learners a strategic approach regarding the issue of project development. This paper presents an experimental module focusing on user interface design in the first stages of the project, dealing with mockup, specifically on the flow definition through drawing. 

2. Learning module structure

The learning module design follows assumptions of a constant need in adapting to contemporaneous perspectives, giving learners the tools and concepts to better cope with the challenges of this digital era, but also giving them conceptual tools that allow a continuous learning effort and an insight in constant adaptations to new trends.
The module follows general subjects of interest in the area related to the course, the layout is the recipient of general functions, featuring a malleable shape allowing evolutions in the briefing design in a response to future needs in the area associated with the course curriculum. The source layout design makes a response to the learner formation and contemporaneous concepts in accessing and mapping information, because the areas related with media interaction are volatile in their nature. The teacher in charge of the briefing is responsible by a constant evaluation in trends of behaviors and the ways the learners experience information, media and the learning experience design. Due to the lack of time in direct contact with the contemporaneous learning context, the learning experience has to amplify and ameliorate its contact with the study thematic and that could be achieved though a theoretical and practical approach.
The course briefing is organized in four vectors, related to different layers of information; the course phases, the plan containing the strategy related with learning theories, the sessions and the flow. These four elements interact between each other to empower the learning experience. The course briefing incorporates in the course phases, diagnostic, development and the final output, this organization relates to the course plan, the learning strategy in the several sessions and in some courses is possible to reinforce the concept through a more emotional experience where drawing takes an important role in energizing the experience.
The sessions incorporate the context of learning in the classroom or bLearning referring also the development phases related to the project. In the course the relation between different tools displays the interaction flow between apps and support concepts applied during the learning experience.
Structuring thought through reasoning with pictures has become in the last years an important element in learning strategies applied in curriculum courses. 
The design takes into account the needs found in the area where the briefing acts as learning experience. Before the start of each semester the teacher performs and evaluates the learner’s needs. The trends in the professional area related with the course influences the briefing design. When working with different media the need for a constant update of strategies and values arises empowered also by the nature of some borderline areas intersected by new learning developments or practices, one of these examples is the recreational trend in learning contents.


3. Implicit structure applied in the Learning Module design

To overcome potential problems created by a weak emotional engagement to the subject in study, the module conveys the drawing as a learning structure tool in an effort to promote new strategies in developing associations in a fast and interactive process obviously supported by speech and writing.
Drawing enables simultaneously in the Learners an overview of the process and a development of a sequential idea or a layer view on the subject in study, through a process of reasoning through pictures.
Doodling acts as a “tool”, extracting emotional connections from the “precise information” package of information presented in the learning experience. When enabled, drawing uses several metaphors to translate different concepts and functionalities. The sequence of those “reasoning through pictures” moments develops the storytelling sequence.
To enable the learning module the teacher must overcome the negative experiences arranging the sequence of learning materials in an attractive and engaging design, providing different moments displaying the positive outcomes but also the outcomes that arise when learners fail a successful reasoning.
Reasoning through drawing and schematics can help the expression of an idea. In that way schematics help the learners structure the path and narrative elements within the storytelling sequence. This strategy can engage the learners in displaying their own structure and logic system (Ionascu, 2013) [1].
As the authors Siu-Lan Tan and Megan E. Kelly note; in the classroom drawing has the power to enable the learners to improve their acuity over the object in study, allowing the teacher to detect evolutions in their acuity, observation made on their graphical annotations resultant from multiple exposures and interactions with the subject studied on the learning module (Tan, Kelly, 2004) [2].
The creative reasoning implicit in drawing is distinct from, but complementary to, reasoning through argumentation, asking learners to read a text and draw what they have understood requires them to make explicit this understanding in an inspectable form. A further important research area concerns how teachers can best support their students to use drawing alongside e writing and talking in the classroom (Ainsworth, Prain, Tytler, 2011) [3]. Crossing the two perspectives, the drawing and the verbal expression allows new narratives, narrative that bind knowledge facilitating the retention of knowledge.
The author Marcelline Krafchick relates these ideas in her book "How belief stories matter - an approach to myth", by illustrating what other people do, stories bind together members of a group more effectively than through the mere listing of rules. The focus on specific character concretized behavior for the imagination to take hold and remember (Krafchick, 2010, pag.36) [4].
Narratives and stories work with structures, and if they came from drawings and doodling’s they can be resumed and understood via diagrams, the American author Kurt Vonnegut in his book A Man without a country, under a section titled “Here is a lesson in creative writing,” maps out the shapes of stories, with equal parts irreverence and perceptive insight, along the “G-I axis” of Good Fortune and Ill Fortune and the “B-E axis” of Beginning and Entropy.
Drawing schematics relate not only with “visual shapes” but also with “functional structures” conceptual or technical in their nature or even related to stories and narratives. Helping the learner to discover his own structure of logic, empowers his self-confidence when expressing an idea and promotes the transcoding practice by drawing along future learning experiences.
The thought of creating meaning through the association of different ideas must prevail in the student's experience with such learning module. The use of pps – personal productivity systems allow learners to engage with the project planning and development of activities through a timetable plan. Expression can foster different approaches to time organization, doing so, students can understand what should be their “time” unit when representing their project planning.
The personal productivity system models try to organize multiple and overflowing demands of work and lifestyles by defining things in terms of sets. The relation between pps´s and project development through the use of drawing, is possible due to the role of storytelling, because it provides information from drawing where the learner reasons through pictures and organizes information in several levels of contexts. From the retrieval of information, the learner reasons the experience in different scopes allowing multiple crucial metaphors applying important problem solving techniques useful to everyday life.
The drawing applied in the classroom context has a long history, related to representing the visual elements, but no so often applied in translating processes. Recently with the courses curriculum related with UX design, drawing resurfaced again mainly in low and medium fidelity prototypes. In this context drawing doesn't function only as system of representation but also as interaction system containing several flows of information. Drawing enables, the visual usability reasoning in the system and the mental map projected on the different levels of actions related with the app.
As the author Bruce Hanington refers in his book “Universal Methods of Design”, low and medium fidelity prototypes are common throughout early ideation processes appearing as concept sketch models. These serve an internal development purpose, they are also an excellent tool for the early testing of ideas with clients and users in research, allowing constructive reviews and timely feedback for interactive changes. The interactive element offered by drawing operates on a low fidelity prototype. Users are presented with pages representing interface screens. In completing a task or working toward a goal, the participant indicates what he or she would do in each screen page, while the researcher swaps subsequent pages to simulate the interface response (Hanington, 2012, pag. 138) [5]. This low fidelity diagnostic has several levels from the low to the higher levels of fidelity all part of a survey in the design project. The term fidelity describes the level of detail on the system deliverables. Low-fidelity deliverables are a rough approximation of the intended user experience. These are fast methods, capturing the essential characteristics of the object of study; the high fidelity mockup gives a more accurate representation of the object, including not just core features but also specifics of the site’s behavior and even aspects of the final visual design (Bowles, Box, 2010, pag.81) [6].
Even if it is strange to construct a digital product prototype out of physical materials such as paper, this technique can really work because of its low cost and easiness in fast modifications. Those are extremely useful in discussing alternatives with colleagues and clients. Developing a number of different wireframes is time-consuming, ideas that look complete can lead people to irrelevant details and in early design the designer has to explain repeatedly to the client the real characteristics of the product, while the low-fidelity nature of a sketch conveys the big picture preventing the client to view them as some form of finished product.  (Allen, Chudley, 2012, pag. 239) [7].
Drawing, sketching and doodling allows faster feedbacks from who designs and demands. An app can also have a hidden story, and in that way it establishes a relation with mnemonic techniques such as the Simonides "palace of memory". Planning this implicit element helps strengthening the product and when done with efficiency, it empowers the relation and interactivity with the app. The efficiency factor has nothing to do with creating obvious elements of entertainment, but using elements that ease the flow and help pin the several stages of actions within the app. To achieve these results the learners must know how to plan the stages and understand how time is perceived along the interaction.
Events in the world take time to unfold, perceiving objects and events also takes time and the same occurs with remembering perceived events, thinking about past and future events, learning from those, acting on plans and reacting to perceived and remembered events (Johnson, 2010, pag. 151) [8].
Many of those digital systems have in their experience of interaction a metaphorical configuration of flat lines and in that way they are dangerously near to become a confuse system, without incorporating a dramatic curve perception in the app design, the final outcome will have more problems in appealing the user. It’s in the prototype phase that the designer can plan those phases and levels of sensorial elements.
A degree program design on UX should follow assumptions of a constant need in adapting to contemporaneous perspectives giving the learners the tools and concepts to better cope with the challenges of this digital era but also giving them conceptual tools that allow a continuous learning effort. Drawing allows a dramatic change in the way students cope, not with technology, but with the implicit problems that engage users in daily lives.

4. Conclusions

Designing a learning module on UX design mockups including drawing as an active tool is a challenge. It requires incorporate new strategies related with pps. Even if drawing is considered an expressive tool distant from the complexity of digital universe is still easily adaptable to the holistic perception of information. It allows connecting associations in a timeline map presenting several options in project development. Beyond its render possibilities, drawing gives access to a deeper learning, through the interactions and evolutions, to exposures on a defined problem challenge. Drawing in a UX drawing perspective allows also in one channel, to relate a wireframe perspective interweaved with a flow of moments, because the screen’s sequence related to the different functionalities are associated to an implicit story within the digital interaction.



This paper was presented at Regional Helix 2016, and published exclusively at Convergences.



[1] Ionascu, Adriana. 2013 Drawing Practice in Art Education. Visual Inquiry, International Journal of Learning and Teaching Art Vol. 2, No. 1 Guest Issue, 2 (1), 71-73
[2] Tan, E. Kelly, Siu-Lan, Megan. 2004, Graphic Representations of Short Musical Compositions.  Psychology of Music 2004, 32, 191-212
[23] Ainsworth, Prain, Tytler, Shaaron. 2011,  Drawing to Learn in Science. sciencemag.org, 33, 1096-1097. Vaughan, Russell
[4] Krafchick, M.e. 2010, How belief stories matter - an approach to myth. Berkeley California: Regent Press (2010)
[5] Hanington, B., Bella, M. 2012,  Universal Methods of Design: 100 Ways to Research Complex Problems, Develop Innovative Ideas, and Design Effective Solutions. Rockport Publishers
[6] Bowles, C., Box, J. 2010, Undercover User Experience Design Voices That Matter. Pearson Education
[7] Allen, J., Chudley, J. 2012, Smashing UX Design: Foundations for Designing Online User Experiences. John Wiley & Sons
[8] Johnson, J. 2010, Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design Rules. Morgan Kaufmann

Reference According to APA Style, 5th edition:
Silva, J. Neves, J. Raposo, D. ; (2017) Engaging students reasoning through drawing in classroom context. Reflection on an introductory module in UX design. Convergências - Revista de Investigação e Ensino das Artes , VOL X (19) Retrieved from journal URL: http://convergencias.ipcb.pt