johnreypet@lio.com

Hi, I'm John Rey Petalio - a Web Developer, App Developer, and Visual Artist. I love playing Chess, and I'm currently learning Guitar and Video Editing. I love this song Padayon, and i love watching this movieS Inception, The Social Network, Interstellar and this animated movie Zootopia.

Operating Systems

My Projects

    KonektCons

    Building the future of On-demand Skilled Work

    A&A Mini Mart

    Full-stack e-commerce web application

    John Rey's Art Desktop project thumbnail - Interactive visual art portfolio

    John Rey's Art Desktop

    Interactive visual art portfolio

    Sorsogon Treasures

    Mobile tourism app for discovering Sorsogon's hidden gems and local attractions


Certificates

    Cyber Threat Management

    Cyber Threat Management

    (Cisco)

    Intro to Cybersecurity

    Intro to Cybersecurity

    (Cisco)

    Academic Achiever Certificate

    Academic Achiever Certificate

    (CCDI)

    Certificate of Academic Excellence

    Certificate of Academic Excellence

    (JNHS)

Back to Blog
Tutorial

Understanding Human-Computer Interaction: Why UX Matters

February 4, 2022
6 min read
#UI/UXfor beginners#humancomputer interaction#designthinking

The Course That Changed How I See Technology

Introduction to Human Computer Interaction was the course I didn't know I needed. Coming from a programming background, I was focused on making things work. This course taught me to make things work well for people.

My First UX Disaster

Before taking HCI, I created a simple calculator app. It worked perfectly—for me. When I asked my roommate to use it, he spent five minutes trying to figure out how to perform basic operations. That's when I realized: if users can't use it, it doesn't matter how well it works.

❌ What I Built (Before HCI)

  • Buttons with cryptic labels like "CALC" and "RST"
  • No visual feedback when buttons were pressed
  • Results appeared in a tiny, hard-to-read font
  • No error messages for invalid operations

✅ What I Built (After HCI)

  • Clear labels like "Calculate" and "Clear"
  • Visual feedback with button press animations
  • Large, readable display for results
  • Helpful error messages like "Cannot divide by zero"

Core HCI Principles I Learned

1. User-Centered Design

Everything starts with understanding your users. Who are they? What are their goals? What frustrates them? I learned to ask these questions before writing a single line of code.

2. Affordances and Signifiers

A button should look like a button. A link should look clickable. Users shouldn't have to guess how to interact with your interface.

3. Feedback and Response

Every user action should have a clear response. Click a button? Show that it was clicked. Submit a form? Confirm it was received. Silence is the enemy of good UX.

4. Error Prevention and Recovery

It's better to prevent errors than to handle them. But when errors do occur, help users recover gracefully.

Practical Application: Redesigning My Projects

Armed with HCI knowledge, I went back and redesigned every project I'd created. Here's what changed:

Visual Design

Better color contrast, readable fonts, and intuitive layouts

Interaction Design

Clear navigation, consistent behavior, and helpful feedback

Information Architecture

Logical organization and easy-to-find content

Real-World Impact: My Library System Redesign

Remember that library management system from my database course? I completely redesigned the interface using HCI principles:

Before (Programmer's Interface)

  • Command-line interface with cryptic commands
  • No visual feedback for actions
  • Error messages like "ERR_001: Invalid input"

After (User-Centered Interface)

  • Graphical interface with clear buttons and forms
  • Visual confirmation for all actions
  • Helpful messages like "Book successfully checked out to John Doe"
"Good design is invisible. When users can accomplish their goals without thinking about the interface, you've succeeded."

The Connection to Modern Development

These HCI principles became the foundation for all my future projects:

  • Mobile apps: Touch-friendly interfaces and responsive design
  • Web development: Accessible and inclusive design
  • Database interfaces: Admin panels that non-technical users can navigate

Tools and Techniques I Started Using

User Research Methods

  • User interviews: Understanding real needs and pain points
  • Usability testing: Watching users interact with prototypes
  • Personas: Creating representative user profiles

Design Tools

  • Wireframing: Planning layout and functionality
  • Prototyping: Testing ideas before coding
  • Style guides: Maintaining consistency across projects

💡 Career Impact

Understanding HCI made me a more valuable developer. I could bridge the gap between technical functionality and user needs—a skill that's always in demand.

Advice for IT Students

  1. Don't skip the "soft" courses: HCI might seem less technical, but it's incredibly valuable
  2. Test with real users: Your assumptions about usability are probably wrong
  3. Embrace constraints: Designing for accessibility makes interfaces better for everyone
  4. Study existing interfaces: Analyze what works and what doesn't in apps you use daily

The Long-Term Impact

This course fundamentally changed how I approach every project. I now start with user needs, not technical possibilities. I design interfaces before databases. I test with users before launching.

Most importantly, I learned that technology serves people—not the other way around. Every line of code I write now has a human on the other side, and that human deserves an experience that's intuitive, accessible, and delightful.

What did you think of this post?

I'd love to hear your thoughts and experiences. Have you had similar experiences in your IT journey? What courses or concepts changed how you think about technology?

Read More Posts