User Interface Design II: Webpage Tutorial

Building an ASUS Gaming Personal Computer (PC)

Timeframe                

15 Weeks

2024 Fall Semester

Software Used

Microsoft Word

Figma

Role                  

Induvial Project

For the course, students were assigned to design a tutorial website dedicated to guiding users through a task - from start to finish. The prototype I developed showed users how to build their own ASUS PC. This project utilizes key principles and laws of user interface design to ensure an intuitive, engaging, and user-friendly experience. My goal is to present each step in a way that’s easy for users to understand, navigate, and retain, making the process of building a custom ASUS PC accessible and enjoyable for both beginners and experienced builders.

Project Overview.

My primary objectives for this project are to create an interface that simplifies the process of building a PC, making it accessible and understandable for users of all backgrounds. By focusing on intuitive navigation, clear content presentation, and thoughtful application of UI design principles, I aim to provide a seamless and enjoyable learning experience for anyone interested in constructing their own ASUS PC.

Project Objectives.

The Process

I started with a project proposal that outlined how I would apply UI design principles to make the ASUS PC building process clear and accessible. Use the link below for more on how each principle influenced my design.

Miller’s Law


User interface principles

Miller’s Law states that the average individual can retain approximately 7 items, plus or minus 2, in their short-term or working memory. Considering this, I ensured that the features of the product were only 6 steps. This remains well within the limits of Miller’s Law, enabling users to process the information effectively within the capacity of their working memory.

Zeigarnik Effect

The Zeigarnik Effect is a psychological principle that states that people are more likely to remember tasks that are incomplete or interrupted compared to those that are finished. Considering this I implemented a bubble progress bar below the features, making users aware of how much they have left when learning about the features.

The Multimedia Principle  

The Multimedia Principle emphasizes the effectiveness when aligning visuals and text to convey the same message. Ensuring that images and nearby text support each other, enhancing comprehension of dense content, I presented information under the features tab - in a cohesive and complementary manner through text and images.

For my final project, I developed an instructional website designed to guide users in building their own ASUS Gaming PC with ease, regardless of their experience level. My prototype is organized into three main sections: Getting Started, which introduces the basics of gaming PC components; Features of the Components used for Assembly, which walks users through each item utilized when building their PC; and Accessories, which offers additional information for optimizing and upgrading their setup.

Final Prototype


Working on this project has shown me that interface design is about much more than aesthetics—it's about creating experiences that align with how users think and interact. By focusing on principles like reducing cognitive load and enhancing usability, I have gained a deeper appreciation for the balance between functionality and design. This project has given me insights that will guide me as I take on more intricate and user-centered design challenges.

Reflection :)

Next
Next

Project Two