.png)
User Interface Project
Overview
I was tasked with creating a website in Figma that teaches users about something new. I had the freedom to determine the format of my website, so I decided to create a promotional site for the Logitech k380 keyboard. This was a solo project that I worked on for 2 months using Figma. This project was done for the purpose of visually showing how user interface concepts can be applied and to show my ability to create an interface that is understandable, clear, and memorable.
Goals
I set two personal goals for the successful completion of this project:
- Be efficiently understood: The product information should be quickly understood as the user navigates through the different pages. That means that the pages must be simple and uncluttered so that people pickup the information at a glance.
- Create intuitive navigation: The navigation should be so easy to understand that the user doesn't even think about it as they go through the site. All links and buttons are self-explanatory and each page has the sole purpose of conveying information.
The Process
I created a project proposal that would discuss how I would create my site using the Laws of UX and Multimedia Principles. After that was approved, I started designing my project while keeping these concepts in mind. During the time frame of this project, I received feedback from my professor and peers about the layout of pages and the way I visually presented concepts.
Project Proposal
I created a small paragraph for every concept I learned and described how I would incorporate those ideas into my project. This proposal was written in order to:
- Improve my understanding of essential UI principles.
- Plan how I was going to use those usability concepts to make my interface easy to use and understand.
Check out the project proposal to get a closer look into how I used 20 usability concepts to inform the design of the website. I will visually demonstrate my use of 3 concepts as an example in the next section.
User Interface Principles
Von Restorff
The Von Restorff Effect says that among items that are similar to each other in a group, the one that is visually different is more likely to be remembered. I highlighted the preferred place to buy the keyboard. I did this so that users wouldn't have to spend time researching where to get it.
.png)
Germane Cognitive Load
Germane Cognitive Load is the effort made by the working memory to handle helpful but non-essential content. I created an optional popup explaining the Logitech Options software, a software that allows users to access additional settings. Applying this principle by creating a popup allows users to learn more about the product even if the content isn't as necessary.
The Signaling Principle
The Signaling Principle says people learn better when there are cues that highlight the organization of essential content. These cues can allow users to focus on what content is the most important to know. I made use of this principle by including a table of contents so users understand what information the features tab offers before going in depth with the keyboard.
Final Project
This prototype is for a website promoting the Logitech k380 keyboard, a keyboard I use in my daily workflow. It shows what this product can do and it's functionality as well as the diverse amount of features that potential buyers may be interested in. There is also a "Where to Buy" section where people can find where this device is being sold.
%201.png)
Takeaway
This final project gave me the opportunity to demonstrate my knowledge of user interface concepts by making something tangible. I now have a better idea of how concepts, such as Fitts's Law and the Law of Proximity, are incorporated into digital interfaces so that they improve user experience. In addition to that, I have learned what makes a website or app effective or ineffective in terms of usability and how to use feedback from mentors and peers to improve my work. Using this knowledge, I can create more accessible and user friendly interfaces for my future endeavors.