Posts

The Final Chapter: Reflections on the HCI Journey

Image
Reflecting on my journey through Human-Computer Interaction, I am surprised by how much my perspective has evolved. It is not only in terms of design, but also in how I understand the complex relationship between users and technology. When I began the course, CSC 842: Human-Computer Interaction, I had a basic understanding of usability and user experience. I thought that good design was primarily about visual appeal. However, what I soon learned was much deeper: effective product design starts with a thorough understanding of user needs, behaviors, and the context in which a product will be used. The Beginning In the initial weeks of the course, I felt uncertain and unsure of what to expect. I was not sure whether the class would focus on hands-on activities, lectures, or a balance of both. I had imagined that we would jump right into designing an application from scratch, relying on creativity and collaboration with group members. But as the course progressed, I realized that the desi...
Post a Comment
Read more

HCI with AI: Enhancing the Design Process with AI

Image
AI Tools in Your Design Process Although my team did not use AI tools directly in building the tutorial application, we actively used ChatGPT as a reference during the planning stages of the design process. We used it as a brainstorming tool to help generate different interface ideas, review sample user flows, and better understand usability principles. For example, when exploring how to design a more flexible user experience, we asked ChatGPT how to support users who might not want to customize every step of the tutorial. ChatGPT suggested using predefined templates. This is an idea that can simplify the user journey, while still allowing personalization options. We also used ChatGPT to evaluate the advantages and disadvantages of various tutorial formats, including text-based, mixed text-and-visual, and video formats. In addition, we used ChatGPT to enhance our understanding of user-centered design. It helped us review design heuristics, such as Nielsen’s principles, which we used to...
Post a Comment
Read more

Building my HCI Project Portfolio

Image
Building Your Portfolio: Website and Presentation Deck When I began building my portfolio for the tutorial application on the website and for the presentation deck, I knew I wanted it to clearly reflect the entire design process. I chose a simple, organized format for both the website and the presentation deck to guide viewers easily through the three stages of development: low-fidelity, medium-fidelity, and high-fidelity prototyping. One key design choice was using a visual timeline for each phase of the project, allowing users to intuitively follow the evolution of the tutorial application. The website was created using Google Sites, and each stage of the tutorial application was built in Figma. Screenshots from each development stage were captured in Figma and pasted into both the website and the presentation deck. The website serves as a more detailed page, in contrast to the presentation deck. It offers a deeper examination and explanation into the design process behind each aspe...
Post a Comment
Read more

Idea to Hi-Fidelity Prototype

Image
Evaluating the UI with Heuristic Evaluation To evaluate my medium-fidelity UI prototype in Figma, Nielsen’s 10 Usability Heuristics is used by going through each screen in the tutorial application with the checklist on these principles. The peer feedback is also gathered to gain different perspectives and identify issues that might have been missed. The most challenging heuristic to apply was user control and freedom, since the initial design did not offer clear ways to undo actions or go back, which made the overall user experience feel limiting. Help and documentation was also difficult to incorporate without making the interface feel cluttered. During the evaluation, several usability issues are found. For example, some tutorial screens relied only on icons without labels, which went against the “Recognition rather than recall” heuristic. Additionally, the technical terms that did not match how most users naturally think, violating the principle of aligning the system with the real ...
Post a Comment
Read more

Finally the UI Design Begins

Image
Learning the Art of UI Design When I first started exploring UI design, I felt both excited and overwhelmed. Initially, I thought the main goal of UI design was mainly about making elements on a page look visually appealing, but I quickly realized there was much more to it. There is the challenge of finding the right balance between appearance and functionality. I am starting to understand how important it is to guide users effortlessly through an interface, which they can navigate through the page without confusion. One of the most important lessons I learned was the impact of organization in design. It is not just about arranging elements on a page, but about guiding the user’s attention in a way that feels intuitive. The placement of buttons, text, and visuals, along with proper spacing and emphasis, can make a huge difference in how easily someone navigates an interface. I realized that a well-structured design does not just look good, but it enhances usability by making interactio...
Post a Comment
Read more

Rapid Prototyping

Image
The First Attempt: Bringing Your Idea to Life The first version of the tutorial application was done using paper prototyping, and it was not polished. The main focus was getting the main ideas down quickly rather than making it look polished. The layout was simple, with boxes and arrows to indicate navigation between different sections of the tutorial application. The initial features were chosen based on what was considered the most essential for finding tutorials. The first page is the home page, featuring a top navigation bar and a center section with a text box and search button. After the user types their request and clicks the search button, it transitions to the next page, which includes all the personalization options. Users can choose between a mix of text, graphics, and video, as well as personalize content to suit their learning style, such as adding checkpoints, mini quizzes, and user anecdotes. After the user selects all the personalization options, the tutorial appears an...
Post a Comment
Read more

Bringing Ideas to Life: Creating Your Concept Video

Image
From Idea to Solution: Defining Your Concept The problem that needs to be solved is the lack of engaging tutorials that cater to diverse learning preferences. Many existing online tutorials are either outdated, too restrictive, or limited to a single format. This makes it difficult for users to find content that suits their needs. The concept that is proposed addresses this by allowing users to customize the format of their tutorial to ensure a more engaging and adaptable experience that aligns with individual learning styles. During the brainstorming process, various approaches were considered, such as offering only video-based tutorials or focusing purely on interactive content. However, relying solely on these formats felt too restrictive and didn’t fully address the need for flexibility in learning. Like many current tutorials available online, these approaches lack the adaptability many users need. The refined solution allows users to combine multiple content types, such...
Post a Comment
Read more