In User interface design 2 we were asked to develop an informational prototype designed to teach users something new. This project was used to further develop my knowledge of advanced visual design principles and theories and how to apply them. These design principles aided me in developing an interface that valued the user throughout the entire design process. My final prototype interface consists of a how-to guide teaching users how to record their computer screen and microphone with windows 10's built-in recording features. As well as viewing their captured recordings and basic trimming.
1. Design an informational app that teaches users something using proven design principles.
2.Demonstrate ability to diligently reflect on feedback from client.
3. Create an intuitive and informative user experience.
This project began with a proposal where we pitched the idea of our tutorial and showcased how we would use learned design principles in our interface. We did this in sections, tackling a few principles at a time, receiving feedback from our professor weekly. After a few weeks we went through all the necessary principles and submitted a final proposal document detailing how we would tackle every principle in our design linked here.
Proposal document outlining all the concepts we covered and how I applied them to my project
Next we began working on your prototypes using Figma. We had plenty of guidelines and examples to help us get started but overall we had a lot of freedom in what the interface would look like. We worked on our prototypes for the following five weeks, presenting our progress in class for feedback from our professor and peers. At the end our professor provided us with thorough feedback on our prototypes after we submitted a complete rough draft. After getting more feedback we had two additional weeks of peer reviews to help us shape our prototypes into the finished product you see here.
Definition: The average person can only keep 7 ± 2 items in their working memory.
Implementation: Having 5-7 major steps in each section.
Definition: Users remember uncompleted and interrupted task better than completed tasks.
Implementation: Adding a progress bar supplemented by a checkbox for the user to check throughout the tutorial.
Definition: People learn better from words and pictures than from words alone.
Implementation: Using pictures that specifically show the user where to click in windows supplemented by textual steps explaining the same thing.
Definition: People have a tendency to best remember the first and last series or items.
Implementation: Putting overviews and review pages that go over everything the user will or has learned at the beginning and end of each section.
After completing this project I can say with confidence these user interface design principles helped me to create an elegant UI that easily shows users how to use Xbox game bar to record their screen and quickly edit there saved captures. This project helped me gain valuable experience by teaching me how to iterate on a project over time and apply feedback from the client as well as fellow designers to create a positive user experience.