Drawing as Reasoning Tool in UX Design - Doodling and Drawing as Foundation for Project Planning

Abstract

Thinking through drawing in classroom settings on a Design bachelor degree, is a learning strategy capable of developing perception on new project values. Several studies explain how drawing serves as a reasoning tool to build knowledge upon a subject of study. The act of doodling and drawing, plays a role in a narrative structure, constructing a map of symbols and allowing different associations. Students interact with the subject of study through the graphic representation of an idea. Although drawing is useful as a tool, in learning settings is still missed a stronger link with writing and talking. There is the need to empower drawing as a reasoning tool, find new connections and project other future associations. The learning strategy developed in this article was carried out in the Curricular Unit of Interaction Systems, during the first semester of 2016/2017, in the Bachelor Visual Communication Design and Audiovisual degree, Applied Arts School, Polytechnic Institute of Castelo Branco, Portugal.

1 Introduction

Drawing when designing user experience solutions offers support for defining areas with different constructions. Some of the constructions go beyond the field of drawing, tracing, elements in a two-axis territory (surface and structure) over a yet not explored space, simulating areas and expanding first reasoning’s.

There is already a connection, physically between students and drawing, that connection, in the project surface background, has some degree of two axis flexibility, due to the easy access to the surface of the drawing. It connects the possibilities of exposition with the student project support and the direction of the project path. Although this connection exists, students must do an effort, moving forward to extend their reach with their hand, in connecting consciously with the drawing interfaces. The drawing interfaces represent areas of simulation, making a direct connection with the more transparent and accessible array of interfaces.

The hand stands out not only as a natural tool for drawing but because of its devalued value in the contemporaneous interaction framework, due to the less productive interactions provides by the modern lifestyle, unanswering the motor importance that the brain attaches to the hand visible in the Wilder Penfield homunculus diagrams.

The most outstanding characteristic of the motor homunculus the hand, with its opposable thumb, is the defining feature of the human being. It can manipulate and explore characteristics of objects large and small – restricted as a general capacity to the highest primates – defines the stage for elicitation of an increased range of their properties, for their utilization as tools, for a more comprehensive transformation of their infinite potential into definable actuality [7].

Creativity can imply the discovery of knowing, the use of our hands to transform our physical environment (the unknown) into the constructed record of ideas (the known) and according to Jordan Peterson directly connected to our cognitive capacity for creativity; the rise of new and useful concepts out of confused or uncertain situations.

To maintain this reach with the drawing interface, students must maintain a balance between their direction strength, and two connections, one connected with the project surface and the other connected directly to the project body. The first associated with the axis of drawing and the second, linked to a heavier and hierarchical nature, the project structure.

In certain situations, that construction is something that the learner must make an effort in reaching to be able to reach the larger possibilities of drawing. Through practice, learners, build two different two different visual literacies, one related to the culture which they conceive communication, and the other, related to their interpretations. Accordingly, with Schönborn and Anderson [5], Visual literacy is the capability of students both to interpret visual representations that are presented by teachers and to create visual representations on their own.

Drawings represent external models that involve the creation of Internal Models; drawings are external representations (visible outside the mind of the creator); however, authors such as Jonassen et al. [6] suggests that a significant interaction occurs between external models and internal models.

In summary, when approaching drawing, there are two connections to the project composition, one project surface connection and another, project structural connection. The project background surface connection relates with drawing, student master its two axis flexibility to get closer to the horizontal structure offered by drawing. Drawing presents a more reachable and faster simulation for interface systems, something that learners naturally can approach and that although some effort, is physically reachable.

2 Methodological Implementation

The study was carried in quasi-experimental settings, in this context, students were given templates of sketch paper. Then they were asked to draw their wireframe solutions on the template. The survey method focused on the differences obtain between the group that tested the solutions on paper and the group that didn’t experiment the approach of the pencil before pixels.

The experiment tested a structure composed of implicit, explicit and cryptic elements. Cryptic elements following the “Dramaturgical E-learning Strategy (DES)” Burmester et al. [4]. Within DES, tasks are transformed into conscious and unconscious spheres of experience using a dramaturgical basic structure (i.e., exposition, confrontation, and solution), cryptic knowledge, and community (i.e., a social-communicative context). The “Dramaturgic E-Learning Strategy” (D.E.S.) has been developed based on the assumption that learning is an information acquisition process with emotions and personal experiences. Emotions and immersive experiences seem to be important to learn and process new learning material in a better way. D.E.S. consists of emotional and dramaturgic elements to improve computer-supported learning. D.E.S. is based on scientific results of brain and emotion research, instructional design approaches like ‘anchored instruction’ or goal-‘based scenarios’ as well as modern concepts of dramaturgy [4].

The implicit idea on the experimental approach was to place a placebo constituted by a cryptic element formed by the variation curve or dramatic variation represented by the numeration and the three emoji images. The explicit elements contained the drawing of different panels (Fig. 1).

Fig. 1.

Module structure displaying each element meaning.

3 Experimental Development

The experiment focused the wireframe design, the fourth activity, in the UX Project task sequence composed of eight steps. An UX Project focused on finding a solution for an app that could provide leisure solutions accordingly with work pattern and available time of each user. The fourth activity consists of four sessions each with sixty minutes is characterized by its interventionist nature, where students design and test different solutions (Fig. 2).

Fig. 2.

UX, project task sequence applied on the curricular unit of Interaction System, Bachelor Visual Communication Design and Audiovisual degree. The experience was carried out in the fourth step.

The action flow map containing portraying the functions to apply in the mobile app supported the drawing of the first wireframes (Fig. 3).

Fig. 3.

Actions flow map, resulted from group discussion.

The test applied two approaches to drawing and they were explained to students at the beginning of the exercise. The two approaches included sketches and schemas, according to with Baskinger and Bardel [3], sketches are informal yet representational forms that produce suggestive, evocative drawing, through their rough, selective reveal. They include wireframes, doodles, and ideation sketches in which there is less expectation about completeness and precision. Accordingly, with the same author’s schemes are informal, abstracted forms that eschew detail for a simplified summary view that draws attention to conceptual relationships. They include conceptual frameworks. mind maps. and storyboards in which a loose overview assists memory.

The drawing with the template had the support of the “App actions flow map”, using that template student draw their solutions through different trial and error attempts (Figs. 4 and 5).

Fig. 4.

Structure of materials applied in the experiment.

Fig. 5.

Student working with the sketch template. Copying the actions flow map into the sketch template.

One of the efforts in the exercise was to motivate solutions that would engage lazy users (users that would not spend much time in defining the mobile app settings). For this reason, the cryptic element represented by the numeration and the three emoji influenced students to reduce the number of screens and understand if the unpleasant experience was reduced to the minimum. An effort following the premise that users avoid long settings adjustments. Along the exercise, the idea of planning through drawing come out and the use of the flow map drawings, conducted students in the structural perspective of the exercise.

The main idea of the exercise was to fight the stigma of a non-digital surface, that displays more rough and sensible qualities.

4 Results

The group that worked with the drawing perspective, although not applying their sketches results in the final project, produced better insights in their argumentation and project control, supported by the relation between drawing/sketching and planning on the rough prototype. From the first sketches, in the variety of traces and lines, for this group, occurred the uncovering of different solutions. The main idea of the exercise was to fight the stigma of a non-digital surface, of rough nature.

In contrast, the group that didn’t work with the drawing support manifested more difficulties in changing their reasoning on their first proposals and lacked a better argumentation on their solutions. Several students forgot many of the settings displayed on the “App actions flow map” that should be their document guide during their following development.

5 Conclusion

The experimental approach meant to be an escape from the digital non-texturized framework into the terrain creation characterized by the fluidity of sketching and doodling, from these elements students uncover a map. This hypothesis concerning the use of drawing to unveil broad perspectives on UX design, in the future will be supported by other experiences that aim in triggering other insights on the problematics facing the mobile app design. The topic of research will in the future include other scenarios, in finding strategies that could create a meaningful bridge, performed by drawing, between the mental idea and the digital interaction.

This experience allowed learners, from the experimental model, to understand in a systematic approach, how to develop and empower an idea, built of associations with different levels and perspectives.

The implicit idea of “placebo” means that when students sketch their solutions on paper don’t necessarily apply those same solutions ahead in the project. But the fact that they already experimented and tested through drawing gives them an entirely new dynamic into their project.

This metaphorical relation, between doodling, rendering and the construction of argumentation, within this model, relates to everyday life experiences in how learners can cope with problem-solving. The future use in other experiences, of storytelling solutions, could provide a possible link between thinking through drawing, and project management.