Tech-Trend
Tools
Figma
Role
User Interface Designer
Team
Individual
Timeline
5 months
Overview
For this project, I was tasked with creating an informational website that utilizes different User Interface Design concepts to teach users something new. The main purpose of this page is to allow users smooth navigation while also ensuring users are able to retain and recall the information presented to them on this website.
-
Chunking
-
Multimedia Principle
-
Miller's Law
-
Von Restorff
Goals
As I was creating Tech-Trend, I had three main goals: to make my website easy to use, memorable, and informative for users trying to learn more about techwear.
Process
Project Proposal
Before I began working on the website prototype, I first wrote a project proposal that detailed what my project was about and how I would be using the 20 different User Interface design terms I was asked to incorporate. Below I have linked my full project proposal.
User Interface Design Concepts
While writing my proposal, I had to think about how I was going to apply each of the concepts to my page. For the purposes of this process page, I will not go into how I demonstrated all 20 terms but will describe the four I think are most important to my page.
Chunking
Chunking is the process of breaking up larger pieces of information into smaller pieces of information that are easier to remember. By splitting my tutorial into separate steps that follow my users’ schema, or mental structure, I will effectively apply chunking and deal with my users' intrinsic cognitive load. For example, I split my tutorial into steps such as tops, bottoms, outerwear, etc as these pieces of information are already part of a users’ schema of how an outfit is chunked.
Sections
Different sections for each part of the outfit helps users remember each step.
Multimedia Principle
The Multimedia Principle expresses that using both words and pictures is better than words on their own. While having both words and pictures might not be essential to a user’s learning, it is helpful. By using pictures alongside text that explains said picture, I will effectively apply the multimedia principle. For example, in each section of my tutorial, I have a picture of what that part of the outfit would look like and I include text next to it to explain how it fits into the techwear fashion genre.
Image and Text
Different sections for each part of the outfit helps users remember each step.
Miller's Law
Miller’s Law states that the average person can hold seven, plus or minus two, pieces of information in their working memory. To apply Miller’s Law to my website, I made sure that my tutorial had 6 steps to stay within the range of Miller's Law.
Tutorial Steps
There are only 6 steps in the tutorial to ensure users remember them.
The Von Restorff Effect
The Von Restorff Effect expresses that within a group of objects that are similar, the object that is different is more easily remembered. In order to consider the Von Restorff Effect, I plan to make the important words in my step descriptions stand out by making them a different color from the rest of the text.
Colored Text
By changing the color of the important words in a paragraph, I make the words easy to recall.
Final Prototype
For my finalized prototype, I created a website that teaches users about techwear. My prototype was broken into two main sections. The first is an informational sections about techwear and its different subgenres. The next is a tutorial on how to dress in those different styles.
Takeaways
Throughout the process of creating this prototype, I have learned a lot about the importance of User Interface Design. The human mind and the way it processes and retains information is so interesting and it is very important that we, as designers, take this into consideration when making anything. I have already been taking many of the User Interface Design terms into consideration in the projects I am currently working on and will continue to do so with any future projects I may have.