p–ISSN: 2723 - 6609 e-ISSN: 2745-5254

Vol. 5, No. 12, December 2024 http://jist.publikasiindonesia.id/

Indonesian Journal of Social Technology, Vol. 5, No. 12, December 2024 5631

Design of Python Programming Learning Media Interaction

Design Using the UCD Method

Ade Arya Ilham

Universitas Telkom Bandung, Indonesia

Email: [email protected]

*Correspondence

ABSTRACT

Keywords: interaction

design, learning media,

python programming,

user-centered design

(UCD), iterative

evaluation.

Programming learning media plays an important role in

helping learners master programming languages such as

Python. This research aims to design an effective interaction

design on Python-based programming learning media using

the User Centered Design (UCD) Method, which is a design

approach that puts the user at the center of attention,

ensuring that the resulting product is by the user's needs and

preferences. User needs analysis, prototyping, and iterative

evaluation are all part of UCD's research methodology. The

analysis of user needs will identify user profiles, learning

problems, and interface preferences. The design process will

involve creating a prototype of learning media that takes into

account the needs and characteristics of the user. Iterative

evaluations will be used to gather user feedback and help

improve the design.

Introduction

Along with the development of the times, information technology students are

required to understand programming languages, because programming languages are the

main thing in carrying out a software system that will be used. (Sugosha, Andreswari, &

Hardiyanti, 2021). Python is one of the most widely used computer programming

languages in the world. It was first released in the 1990s and is now used to build millions

of apps, games, and websites. Many schools and colleges use it as one of the introductory

programming languages taught to students. (Kurniawati, Dahlan, & Faisal, 2022).

However, many students still have difficulty in making programs using this Python

language. In the accumulated predictive time ± 32 hours/semester. For each student, this

is still considered insufficient for mastery of the programming language. (Pratiwi & Iriani,

2024).

Based on a survey conducted by researchers on 43 Telkom University students

through Google Forms, the results show that 58.1% of students can create programs using

Python, while 41.9% of them are unable to do so (Pratiwi & Iriani, 2024). Students face

several main difficulties in learning the Python programming language, including the lack

of practice problems and programming examples, difficulties in handling errors,

difficulties in applying syntax correctly, and difficulties in understanding basic concepts.

Ade Arya Inspiration

Indonesian Journal of Social Technology, Vol. 5, No. 12, December 2024 5632

Of all these difficulties, the lack of practice questions and programming examples ranked

highest with a percentage of 64.3% (Setyaningsih & Sutama, 2023). In addition,

according to 42.5% of respondents, learning apps like Geeksforgeeks are still considered

too theoretical and lack adequate practice, including incomplete video tutorials. Telkom

University students expect features such as comprehensive video tutorials, practice

questions to test understanding, and material on basic Python concepts to overcome these

problems (Wardianti & Rini, 2024).

The solution in the form of a website was chosen because it is more accessible and

flexible and developed with interactivity features to increase student engagement.

(Pujianto, Setiawan, Rosyid, & Salah, 2019). This statement is strengthened by previous

research that proves that there is a change in students' attitudes and learning outcomes

after the implementation of learning that utilizes website-based learning media as in the

thesis written entitled Development of Website-Based Integrative Learning Media

Through the Moodle Portal in Class V Madrasah Ibtidaiyah Negeri 2 Malang compiled

by Maulida Fikria Nasol. (Alfarizi, Al-Farish, Taufiqurrahman, Ardiansah, & Elgar,

2023). This thesis was written in 2017 to develop a product in the form of web-based

learning media using the mödle portal and focusing on integrative thematic learning. The

results of this development show that the development of integrative thematic learning

media is proven to be effective and interesting based on the results of the pretest, post-

test, and student responses. (Raharjo & Subhiyakto, 2024).

The success of learning media does not only depend on the content delivered but

also on the user experience provided by interaction design. In this context, the User

Centered Design (UCD) method is a strategic approach to ensure that users (students or

beginners in Python programming) are actively involved in the design process to meet

their needs and expectations. (Clinton & Sengkey, 2019).

The success of learning media does not only depend on the content delivered but

also on the user experience provided by interaction design. In this context, the User

Centered Design (UCD) method is a strategic approach to ensure that users (students or

beginners in Python programming) are actively involved in the design process so as to

meet their needs and expectations.

Based on these backgrounds and problems, researchers will conduct research and

design web-based interaction designs with features, comprehensive tutorial videos,

material on basic Python concepts, and practice comprehension test questions. It is hoped

that the interaction design designed using the User Centered Design (UCD) method can

help to improve students' ability to create programs using Python.

The objectives of this study are:

1. Produce an interaction design of the Python programming language learning media

application that can help overcome learning difficulties for Telkom informatics

students using the User Centered Design method.

2. Get the usability value of the Python programming language learning media

application that has been created using SUS.

Design of Python Programming Learning Media Interaction Design Using the Ucd

Method

Indonesian Journal of Social Technology, Vol. 5, No. 12, December 2024 5633

Method

This research uses a qualitative approach to gain an in-depth understanding through

questionnaires and interviews with users, namely informatics students about user needs

and designing learning media with a focus on interaction.

Place and Time of Research

This research was carried out at Telkom University and several others, with the

author pursuing an S1 education majoring in Informatics. The research time covers a

specific period, starting from the analysis stage to implementation and evaluation.

Research Stages

This research has several stages or flows that can be used in solving problems that

occur and can also help provide user interface design results that are by the needs using

the User-Centered Design (UCD) method.

Design Solution

1. Low Fidelity

Low Fidelity At this stage, the creation of Low Fidelity begins, which is the initial

stage of designing this design. Low Fidelity has no display of fonts, colors, logos, or other

design elements and consists only of a skeleton.

2. High Fidelity

After making low fidelity, then design high fidelity so that the design that has been

made is easier for users to understand. In this high-fidelity design, images, icons, and

colors will be given to clarify the design that has been made.

3. Prototype

After completing the creation of the low-fidelity and high-fidelity designs, the next

step is to prototype the high-fidelity designs that have been created. This stage is

important to ensure the connection between each design that has been made. Prototyping

is carried out to test the concept or work process of the product that has been designed.

4. Evaluate Design

In the evaluation design stage, the author conducted tests with Usability Testing on

users (Telkom University informatics students and several others). The test was carried

out using the System Usability Scale (SUS) measurement tool to measure user satisfaction

(informatics students of Telkom University and several others) with the design solutions

made.

5. Drawing conclusions

At this stage, conclusions are drawn from the results of the interaction design that

has been made. The results of the conclusion must be able to answer the existing

problems. Furthermore, the provision of suggestions for further research.

Results and Discussion

Specify the user requirements.

At this stage, the needs of users will be explained based on the data that has been

obtained from the results of the interview and also the user personas that have been

Ade Arya Inspiration

Indonesian Journal of Social Technology, Vol. 5, No. 12, December 2024 5634

created so that the application created can help users achieve the goals they want to

achieve.

Table 1

User Requirements

It

Needs

Requirements

1

Programming learning

practice instructions

are not only full text.

The Learning feature is in the form of

video tutorials that users can follow.

The video tutorial will contain

complete learning instructions and

simplified examples to improve

memory.

In addition to the tutorial video, there

will be readings explaining the

material.

2

Leveling Python

Programming learning

materials to improve

understanding of

Python.

Features of Python material that will be

explained about the basics of

programming, its benefits, as well as

examples of coding examples and how

to do it.

3

Practice questions to

understand better after

the material better.

The practice feature is in the form of a

collection of questions according to the

material that has been read. Questions

will provide multiple choice, essay,

and upload coding results.

4

Discussion to ask

things that are not

understood so that you

can understand better.

The discussion forum feature is a

forum where you can ask anything

related to the material or coding

questions.

Mental Model

A mental model is an explanation of how a person understands, describes, or

explains how they believe something operates. In terms of user experience (UX), mental

models refer to how users or designers conceptualize the operation of a system or product.

(Sudirman, Lase, Syafriyandi, & Gobal, 2024). This is the mental model of the system

designer of a learning application intended for Python programming:

Design of Python Programming Learning Media Interaction Design Using the Ucd

Method

Indonesian Journal of Social Technology, Vol. 5, No. 12, December 2024 5635

Hierarchical Task Analysis

The process of analyzing user tasks using Hierarchical Task Analysis (HTA) is

carried out to describe what activities or workflows users need to do to achieve their goals.

In this study, HTA users were used to describe how users access learning materials and

access practice instruction videos in Python programming learning applications.

Create design solution

At this stage, the researcher designed an interface interaction design for a Python

programming learning application. The design starts from a low-fidelity prototype in the

form of an initial sketch in the form of a wireframe, then from the wireframe that has been

made, a high-fidelity prototype modeling is carried out in the form of a prototype that

contains detailed images, icons, typography, themes, interactions and has functionality

that almost resembles the final product. (Azhar, Defriani, & Hermanto, 2023).

a) Low-fidelity and High-fidelity Landing Page CreationThe landing page shown in

Figure 1 is the user interface of the taught coding application.

Ade Arya Inspiration

Indonesian Journal of Social Technology, Vol. 5, No. 12, December 2024 5636

b) Low-fidelity and High-fidelity Register and Login pages are designed for Teachable

Coding applications. The Login page allows users to log in with an email and

password, while the Register page is used for new user registration.

Design of Python Programming Learning Media Interaction Design Using the Ucd

Method

Indonesian Journal of Social Technology, Vol. 5, No. 12, December 2024 5637

c) Creating Low-fidelity and High-fidelity Dashboard PagesThe dashboard page shown

in Figure 3 is the main page visible to users after successfully logging into a taught

coding application.

d) Creating

Low-fidelity and High-fidelity Information The information page shown in Figure 4 is

a page that contains information about the taught coding application.

e) Creating

Low-fidelity and High-fidelity IDE Prerequisite Pages (Python)The prerequisite pages

shown in Figure 5 provide information about the hardware specifications required to

use the text-coded application.

f) Pembuatan Low-fidelity dan High-fidelity

Halaman How to use the Platform

The user guide page in Figure 6 provides instructions on how to use the taught app

so that users don't have any difficulties.

Ade Arya Inspiration

Indonesian Journal of Social Technology, Vol. 5, No. 12, December 2024 5638

g) Creating Low-fidelity and High-fidelity Discussion Forum PagesThe discussion forum

page shown in Figure 7 is a place for users and mentors to discuss and exchange

information.

h) Low-fidelity and High-fidelity Creation Level 1 Pages - BeginnersThe entry-level

pages shown in Figure 8 provide learning materials for beginner-level in taught coding

applications.

i) Low-fidelity and High-fidelity Level 2 Pages - IntermediateThe mid-level pages

shown in Figure 9 provide learning materials for intermediate levels in a taught coding

application.

Design of Python Programming Learning Media Interaction Design Using the Ucd

Method

Indonesian Journal of Social Technology, Vol. 5, No. 12, December 2024 5639

j) Low-fidelity and High-fidelity Creation Level 3 Pages - ProficientThe advanced level

pages shown in Figure 10 provide learning materials for the proficient level in the

taught coding application.

k) Creating Low-fidelity and High-fidelity Practice Questions PageThe practice page

shown in Figure 11 is a page for working on practice questions after studying the

material on the taught coding application.

Ade Arya Inspiration

Indonesian Journal of Social Technology, Vol. 5, No. 12, December 2024 5640

l) Low-fidelity and High-fidelity User Settings Page The user settings page shown in

Figure 12 allows users to set profiles, such as name, email, password, address, and

contacts within the coded app.

Test participants will be given several questions that need to be answered, the

questions are as follows:

Table 2

SUS Question

Scenario

Description

1

Accessing the landing page of DiajarKoding

2

Registration

3

Accessing Login /onboarding

4

Accessing the dashboard

5

Accessing information

6

Accessing IDE Prerequisites

7

Accessing How to Use the Platform

8

Accessing Discussion Forums

9

Accessing Level 1 - 3 Materials

10

Accessing Practice Questions

11

Accessing User Settings

Analysis of Test Results

After the testing and filling out the questionnaire was completed, the following

results were obtained:

Design of Python Programming Learning Media Interaction Design Using the Ucd

Method

Indonesian Journal of Social Technology, Vol. 5, No. 12, December 2024 5641

Table 3

Original score of SUS Questionnaire

No

Resp

ond

Original Score

Q1

Q2

Q3

Q4

Q5

Q6

Q7

Q8

Q9

Q10

1

R1

5

1

5

2

5

1

5

1

5

2

R2

4

2

4

3

4

2

4

2

4

2

3

R3

4

2

4

2

4

2

4

2

4

3

4

R4

5

2

5

2

5

1

5

1

4

2

5

R5

5

2

4

2

4

2

4

2

4

2

6

R6

4

2

4

2

5

2

4

2

4

3

7

R7

4

1

5

1

5

2

5

1

5

1

8

R8

5

2

5

2

4

1

5

1

5

2

9

R9

5

4

5

4

5

3

5

3

5

10

R10

4

2

4

3

4

2

4

11

R11

5

1

5

2

4

2

4

1

4

2

12

R12

4

2

5

2

4

2

5

1

4

13

R13

4

2

4

3

5

2

4

2

4

2

14

R14

4

2

4

2

4

2

4

1

4

2

15

R15

5

1

4

2

4

1

4

1

5

2

16

R16

5

1

5

2

4

2

5

1

4

2

17

R17

5

2

4

2

4

1

4

2

4

2

18

R18

4

2

4

2

4

2

3

2

4

1

19

R19

4

2

4

2

4

2

4

2

4

2

20

R20

4

5

4

3

4

3

5

2

4

3

21

R21

4

2

5

2

4

2

4

2

5

4

22

R22

4

2

5

4

2

5

2

4

3

23

R23

4

2

4

2

4

2

4

24

R24

5

2

5

2

5

2

4

1

4

2

25

R25

4

1

5

1

4

2

5

1

4

3

Ade Arya Inspiration

Indonesian Journal of Social Technology, Vol. 5, No. 12, December 2024 5642

26

R26

5

2

4

2

5

1

4

2

27

R27

5

3

2

4

3

28

R28

4

2

4

3

4

3

29

R29

5

2

4

1

4

2

4

1

4

30

R30

4

2

4

2

5

2

4

2

3

2

31

R31

4

1

5

1

4

2

4

1

4

1

32

R32

4

2

4

1

4

1

2

33

R33

5

2

4

2

4

2

4

2

4

2

34

R34

5

2

4

2

5

2

5

2

5

4

35

R35

5

2

4

3

5

2

5

1

5

36

R36

4

2

4

2

4

2

4

5

37

R37

4

1

5

2

4

2

5

2

4

3

38

R38

4

2

4

2

4

3

4

2

3

4

39

R39

4

2

4

2

4

2

5

2

5

2

40

R40

5

2

4

2

5

2

4

2

4

2

The results obtained still do not represent the true usability value. However, the

results obtained do not accurately reflect the actual usability value. (Wijaya, Arif, Aini,

& Putri, 2024). To determine the true score, the original score for odd-numbered

questions must be subtracted by one point, and for even-numbered questions, the original

score must be subtracted by five points. The number must then be multiplied by 2.5. The

following formula can be used to determine the actual value of the average calculation.

 

󰇛  󰇛

󰇛

  

󰇜



󰇛

  

󰇜

󰇜



From the formula above, the average score for usability testing in the interaction

design of Python programming learning applications shows a value of 77 with a grade of

C which has Adjective Ratings as GOOD and ACCEPTABLE.

Design of Python Programming Learning Media Interaction Design Using the Ucd

Method

Indonesian Journal of Social Technology, Vol. 5, No. 12, December 2024 5643

Table 4

Usability Final Score

Calculation Score

Sum

Value

Q1

Q2

Q3

Q4

Q5

Q6

Q7

Q8

Q9

Q10

(Qty x

2.5)

4

3

4

3

38

95

3

2

3

29

73

3

2

29

73

4

3

4

3

4

3

36

90

4

3

31

78

3

4

3

2

30

75

3

4

3

4

38

95

4

3

4

3

4

3

36

90

4

1

4

1

4

2

4

2

4

0

26

65

3

1

3

2

3

1

25

63

4

3

4

3

34

85

3

4

3

4

3

1

31

78

3

2

4

3

30

75

3

4

3

31

78

4

3

4

3

4

3

35

88

4

3

4

3

35

88

4

3

4

3

32

80

3

2

3

4

30

75

3

30

75

3

0

3

2

3

2

4

3

2

25

63

3

4

3

4

1

30

75

3

4

1

3

4

3

2

29

73

3

1

3

1

26

65

4

3

4

3

4

3

4

3

34

85

3

4

3

4

3

2

34

85

4

3

1

3

4

3

31

78

4

0

4

0

4

2

3

2

24

60

3

2

3

2

24

60

4

3

4

3

4

3

1

31

78

3

4

3

2

3

30

75

3

4

3

4

3

4

35

88

3

1

3

4

3

4

1

3

28

70

4

3

31

78

4

3

4

3

4

3

4

1

32

80

4

3

2

4

3

4

0

27

68

3

1

3

0

25

63

3

4

3

4

3

2

32

80

3

2

3

2

1

26

65

3

4

3

4

3

32

80

4

3

4

3

32

80

Average Score (Final Result)

77

Ade Arya Inspiration

Indonesian Journal of Social Technology, Vol. 5, No. 12, December 2024 5644

User Requirements Fulfillment

After going through a series of design and development processes, all user needs

that had been identified in the early stages of this project have been successfully met.

Among them:

1. Program Code Exercises: Users are allowed to practice live through available videos

and program code exercises. This allows users to implement their knowledge

practically and get immediate feedback on the results

2. Concept Visualization: To make it easier to understand, the key concepts have been

visualized so that users with different backgrounds can understand the material more

easily.

3. Gradual Learning Process: The material has been arranged in systematic stages from

basic to advanced, which helps users follow the learning flow according to their ability

level.

Conclusion

Based on the results of analysis and testing, the design of Python learning

application interaction design with the User Centered Design (UCD) method has

successfully achieved its goal. The app is capable of providing an intuitive and effective

learning experience, according to the needs and characteristics of the user.

Usability testing showed a SUS score of 77, which is included in the GOOD

category with a grade of C and ACCEPTABLE in the Adjective Ratings. This indicates

that the app meets the recommended usability standards and provides convenience in its

use. For further development, it is recommended to conduct a more in-depth analysis of

each SUS question to identify aspects of usability that can be improved, in order to meet

user expectations more specifically.

Design of Python Programming Learning Media Interaction Design Using the Ucd

Method

Indonesian Journal of Social Technology, Vol. 5, No. 12, December 2024 5645

Bibliography

Alfarizi, M. R. S., Al-Farish, M. Z., Taufiqurrahman, M., Ardiansah, G., & Elgar, M.

(2023). The Use of Python as a Programming Language for Machine Learning and

Deep Learning. Student Scientific Work of Monotheism (KARIMAH TAUHID),

2(1), 1–6.

Azhar, Sarah Afifah, Defriani, Meriska, & Hermanto, Teguh Iman. (2023). UI/UX

Analysis of Project Management Information System (PMIS) Website Using User-

Centered Design Method. Sinkron: Jurnal Dan Penelitian Teknik Informatika, 7(3),

1798–1810.

Clinton, Rombang M. P., & Sengkey, Rizal. (2019). Purwarupa Sistem Daftar

Pelanggaran Lalulintas Berbasis Mini-Komputer Raspberry Pi. Jurnal Teknik

Elektro Dan Komputer, 8(3), 181–192. https://doi.org/10.35793/jtek.v8i3.26655

Kurniawati, I., Dahlan, M. Z., & Faisal, B. (2022). Permaculture landscape as an adaptive

strategy towards food security at community-scale. IOP Conference Series: Earth

and Environmental Science, 1092(1), 12015. IOP Publishing.

Pratiwi, Khairunnisa Hanan, & Iriani, Tuti. (2024). The potential of interactive

multimedia with contextual teaching and learning approaches in mathematics

learning: a systematic literature review. Jurnal EDUCATIO: Jurnal Pendidikan

Indonesia, 10(2), 69–77.

Pujianto, Utomo, Setiawan, Asa Luki, Rosyid, Harits Ar, & Salah, Ali M. Mohammad.

(2019). Comparison of Naïve Bayes Algorithm and Decision Tree C4. 5 for

Hospital Readmission Diabetes Patients using HbA1c Measurement. Knowl. Eng.

Data Sci., 2(2), 58–71.

Raharjo, Ilham Dwi, & Subhiyakto, Egia Rosi. (2024). Implementing Long Short-Term

Memory (LSTM) in Chatbots for Multi Usaha Raya. Advance Sustainable Science

Engineering and Technology, 6(4), 2404018.

Setyaningsih, Hana Ilvi, & Sutama, S. (2023). Problem-Oriented Student Worksheet

based Learning: Cultivating Creativity in Primary School Students. Proceeding

ISETH (International Summit on Science, Technology, and Humanity), 707–714.

Sudirman, Sudirman, Lase, Dewantoro, Syafriyandi, Syafriyandi, & Gobal, Raju. (2024).

Development of an Event Management System in the Professional Organization of

Indonesian Professional Assessors Association (IASPRO) Using a User-Centered

Design Method. KnE Engineering, 374–383.

Sugosha, Komang Gustiana, Andreswari, Rachmadita, & Hardiyanti, Margareta. (2021).

Design and Implementation of User Interface and User Experience in Online Sales

Applications at Sugosha Pharmacy with a User-Centered Design Method. 2021

International Conference on Advanced Computer Science and Information Systems

(ICACSIS), 1–5. IEEE.

Ade Arya Inspiration

Indonesian Journal of Social Technology, Vol. 5, No. 12, December 2024 5646

Wardianti, Rahmi, & Rini, Tika Puspita Widya. (2024). Improving Student Activities and

Learning Outcomes Using PBL, TGT Models and Experimental Methods for

Elementary School Students. Journal Educational Research and Development| E-

ISSN: 3063-9158, 1(1), 23–32.

Wijaya, Etistika Yuni, Arif, Muchamad, Aini, Nuru, & Putri, Yiyin Noriyah. (2024).

UI/UX Web-Based Learning Design with UCD Approach to Basic Programming

using FIGMA. Bit-Tech, 6(3), 412–420.