Application Design II / Interaction Design Proposal and Planning
23.10.24 - 12.11.24 / Week 5 - Week 8
Name: ALYSSA AISYAH BINTI 'ARIEF NASRAN (0364017)
Name: ALYSSA AISYAH BINTI 'ARIEF NASRAN (0364017)
BDCM
Application Design
II (DST61004)
INSTRUCTIONS
TASK 2
Interaction Design Proposal and Planning
For task 2 of Application Design II, we are are required to develop a comprehensive interaction design plan for our final web-based mobile application, including detailed wireframes, user flow diagrams, and prototypes of both micro and macro animations. We must aim to visually and conceptually prepare the interaction design and animations that will enhance the user experience of their application.
The requirements are the following:
- Create detailed flowcharts + wireframes that map out the user journey and key interaction points within the application,
- Micro Animations: Prototype small-scale animations that enhance the user's interaction with the application. These might include button effects, hover animations, loading indicators, and feedback messages.
- Macro Animations: Develop concepts for larger-scale animations that significantly affect the user interface, such as transitions between different app states or animated introductions. For complex animations, we may use Adobe After Effects or similar tools to create more detailed prototypes. If actual animation creation is not feasible, we may alternatively provide references to existing animations that closely represent your intended design.
- Accompany our prototypes with a written explanation or a visual presentation that describes how these animations and interactions contribute to the usability and aesthetic of the application. Discuss the purpose behind each animated element and how it integrates into the overall user experience design.
To prototype the interaction design plan of my app, I continued with my figma file, but added interactable components to the screens.
Flowcharts
Word Categories
I first created a flowchart of the logic for mastered/reviewing/learning categories for any word flashcard that comes up.
Fig 0.1 Flowchart of Word Categories Logic
When encountering a new word, you may either answer that you know the meaning of the word or you don't. If you know the word, it goes to "mastered", and if you don't know the word, it goes to "learning". Indicating that you know a mastered word leaves it in mastered, and answering that you don't know a learning word leaves it in learning. If you indicate that you don't know a word in mastered or you know a word in learning, it will move to "reviewing". From reviewing, answering that you know the word moves it to mastered and answering that you don't know the word moves it to learning.
App Flow Chart
Fig 0.2 Flowchart of App
I also created the flowchart of my app and what each interaction from each screen/button navigates to.
Macro Interactions
Word Flashcards
Fig 0.3 Word Flashcards Macro Interaction
Quiz
Fig 0.4 Quiz Macro Interaction
Pressing the open book icon on the right end of the bottom navigation bar labeled "Quiz" will take the user to a screen with the Common Words, Basic Words, and Advanced Words categories. The box at the bottom of each category is now labeled "Practice Quiz" and has an arrow pointing to the right. The arrow is at the right edge of the screen and points to the right to give a visual metaphor for pressing the arrow, which will take the user to another screen hidden from view. The arrow pointing to the edge, at the edge of the screen itself, is there as if to point to the hidden screen to be transported to.
Here, the Common Words quiz is selected, as indicated by "Common Words" at the top of the new screen. There is an arrow on the top left of the screen pointing to the left, acting as an analog to the prior arrow. One can imagine the quiz screen is "hidden to the left" when on the home screen and, when on the quiz screen, the home screen is "hidden to the right," in which the player can navigate back and forth with the arrows pointing to the "hidden screen."
When encountering each question for the first time, each quiz question will say "New Question" on the top right of the purple box highlighted in light purple. Afterwards, it will either be labeled "Mastered," "Reviewing," or "Learning," corresponding to the rules described earlier. The user is prompted with the first question: "Which word matches the following definition?" as well as the subsequent definition: "Lacking energy or enthusiasm; sluggish in spirit of behavior," and a set of 5 multiple-choice options to select. The list has a slightly lighter purple to separate it visually from the box it is partially covering. Hovering over and selecting one of the options will light up its section of the multiple-choice option (each divided by horizontal lines all the way from one end of the dark purple box to the other) to an even lighter purple for the same design purposes explained prior.
The correct answer, "Lethargic," is selected in this demonstration, as indicated by the bright green box on top with center-aligned text saying "Correct." The word, its phonetic spelling, the type of word (adjective, noun, etc.), its definition, and an example sentence are provided to give as much information to the user as possible about the meaning and utility of the word. The purple box saying "Next" and the arrow pointing to the right is visually and mechanically the same as the "Practice Quiz" box and will take the user to the next question when pressed.
There are 3 white progress bars at the bottom of the page labeled "0/50 words mastered," "0/50 words reviewing," and "0/50 words learning." The bar will be increasingly filled with the color corresponding to its status (green if "Mastered," yellow if "Reviewing," red if "Learning") and represents the progress through the quiz. The green and red color dichotomy is intuitively associated with correct/incorrect, and so that is utilized here. "Reviewing" is the halfway point between "Mastered" and "Learning," where the color yellow is the middle point between red and green. It is often associated with the halfway point in stoplights as well, so the color yellow similarly has everyday intuitive associations, which is utilized here.
When pressing the box with "Next" and the arrow, the user will be taken to the next question. In the demonstration, the user chose the correct option, and so the top progress bar increased to "1/50 words mastered" and gained some green color filling to show fractional completion. The next question asked is for the definition: "Avoid and stay away from deliberately; stay clear of," and the incorrect option, "Flummox," is chosen, as indicated on the top of the screen when selected. The first question is now saved as "Mastered" and the second question is now saved as "Learning," as the user will see when the question comes up again. They will also see that the bottom progress bar will now indicate "1/50 words learning" and will be partially filled with red.
Search
Fig 0.5 Search Macro Interaction
The third icon from the left on the bottom navigation bar is labeled "Search" and has a magnifying glass symbol to provide an easy visual reference for the user searching for a word on the app scattered across decks compiled in a word list. Hovering over and pressing this icon will also light up the symbol and the text, as per the same visual and interactive reasons. The user is then taken to a mostly empty purple screen except for a white bar with a faded out grey magnifying glass on the right to indicate that it is a search bar and the text "Type to search word database" to prompt the user for a text input to search the database. For this demonstration, the string "ab" was typed and after pressing the magnifying glass, a list of words starting with "ab" appear on screen in a list with light purple lines dividing the section for each word. Similar to before, this gives the user a visual indication for the section of the word to be pressed to take it to the word definition. The word "abeyance" is pressed here, and the user is taken to the deck where the word appears and the screen of where to study the definition of the word.
Micro Interactions
Common Words Dropdown
Fig 0.7 Common Words Dropdown Micro Interaction
Add new word/Add new deck
Fig 0.8 Add new word/Add new deck Micro Interaction
The "Create" symbol is represented with a circle and a plus sign inside of it to give an intuitive representation of adding something new on the app, and it is the second icon from the left on the bottom navigation bar. Hovering over and pressing the icon will light up the symbol as well as the text below it to show the user that direct input is being received. When the icon is pressed, a box containing two options will appear; "Add new word" and "Add new deck". The former with a capital and lowercase letter "a" symbol to represent words and two rectangles for the latter; this gives a minimalistic image of a stack of cards which makes of a deck. Hovering over and pressing either option in this box will light up whichever half contains the option being selected; either "Add new word" on the top or "Add new deck" on the bottom. There is a horizontal line dividing the box in half to show which part of the bar to press to create a new word and which part of the bar to press to create a new deck.
Add a new deck
Fig 0.9 Add New Deck Micro Interaction
If the user presses "Add new deck" from the Create menu, they will be taken to a new screen resembling that of the "Add new word" screen. The symbol is replaced by the two cards symbol representing a deck, the same as the one in the Create menu, and instead says "Add a new deck" below. There is one white bar for input as opposed to three on this screen, with "Name" in faded out text to indicate to the user that the name of the deck being created. The deck name "challenging words" is inputted and, utilizing the same "Choose deck" box and dropdown menu as seen previously, the deck will replace the default Custom Words deck selected. Once the deck name and selected deck are chosen, pressing . "Save" below will save the new deck.
Add a new word
Fig 1.0 Add New Word Micro Interaction
Pressing "Add new word" from the Create menu will take you to a new page where a new word is added, with the same capital and lowercase letter "a" as before and "Add a new word" below to indicate to the user which screen they're on and to fill in the empty space stylistically. Below the "Add a new word" line is a bar with three short line dividers that contain four options for the four main parts of speech that the word created may signify; verb, noun, adjective, and adverb respectively. When hovering over or pressing any of these four options, they will light up as well for the same interactive reasons as prior features. There are then three separate white bars with faded out text to signify what each of these input elements take in to create the new word. The first white bar with "Word" faded out will take in the input of the word itself to be added to whichever deck is selected. In this example is the word "forlorn", and so the word itself will be put here. The second bar with "Definition" in faded text is where the definition or meaning of the word is inputted to be attached to the word added. This is where the definition of the word "forlorn" would be inputted for studying the word and its meaning. The third and last bar with "Example" faded out is where an example sentence may be provided to show how the word may be used in speech or writing. Below these input bars is the same interactive element as seen in the home screen; a box with "Choose deck" and a down arrow which contains a dropdown menu of the 6 Custom Words decks where the word provided here will be added. Once a deck is selected, pressing save will save the word, its definition, and an example of using it to whichever deck is chosen.
Prototype of Interaction Design Proposal and Planning
REFLECTION
Working on task 2 made me dive more deeply into interaction design and explore how thoughtful planning and prototyping can enhance user experience. Developing and rationalising things like flowcharts, wireframes, and animations for my app pushed me to consider the logical flow of the application and how users interact with each element, ensuring both functionality and engagement.
Designing the macro and micro animations was another engaging aspect of this task. The macro interactions, like the word flashcards and quiz mechanics, helped me explore how transitions and animations contribute to a natural, immersive experience. For instance, the "flipping card" motion of the flashcards mimics physical interactions, making the app more relatable and intuitive. Similarly, the progress bars and their corresponding colors visually reinforce learning progress, keeping users motivated.
On the micro-interaction level, elements like dropdown menus, hover effects, and icon animations added a layer of responsiveness to the design. Even though they are small, they are significant details which enhance user feedback, making the app feel more dynamic and engaging. Prototyping these interactions in Figma helped solidify their implementation and gave a clear visual representation of how they would function in the final application.
Overall, this task deepened my understanding of how interaction design shapes user experience in combining functionality with aesthetics to create a cohesive and engaging app.
Comments
Post a Comment