Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
Please use this template to help you plan for your app design.
It is recommended to think through your design and include as many details as possible.
App Inventor Name: __Nicolas Hernandez___
Details
Kids Learn
Category of
Your App
Learning/Pre-school
User Group(s)
(age/job/education level
etc.)
User Test Plan
A template designed for BSU EDTECH534 Mobile App Design Course by Yu-Chang Hsu, Ph.D.
2011-2015
Dissemination Plan
A template designed for BSU EDTECH534 Mobile App Design Course by Yu-Chang Hsu, Ph.D.
2011-2015
A template designed for BSU EDTECH534 Mobile App Design Course by Yu-Chang Hsu, Ph.D.
2011-2015
II. Instruction for App Component Map and App Behavior Flowchart
Sketch it out!
1.
App Component Map (i.e., explain what you plan to have on the Component Designer; You can also consider providing a screenshot of your working
Component Designer to help your explanation.)
a. What are some visible components you plan to have on the user interface? (e.g., buttons, labels, images, animations, textbox for input etc.)
Visible Components
Screen 1
Get Started Button: The Get Started Button is the only visible component on this screen. The
visible image is a background image set in the Screen1 properties.
A template designed for BSU EDTECH534 Mobile App Design Course by Yu-Chang Hsu, Ph.D. 2011-2015
Screen 2/Selection
Header: The header appears at the top of the screen. This is a graphic image created/arranged in Adobe
Illustrator (Artwork by freepik.com). The header image is included for aesthetic and informational
purposes.
Choice Image: The choice image is an image with the text What are you learning today? in red letters
in a Berlin Sans font. This is an image and not a label because the font was desired for consistency.
Animals Button: The animals button, like the header button, uses an image that was created/arranged in
Adobe Illustrator (artwork freepik.com). The button is designed to be aesthetically appealing. The button
will take the user to the AnimalsPractice page where the user can learn about animals.
Shapes Button: The shapes button, like the header button, uses an image that was created/arranged in
Adobe Illustrator (artwork freepik.com). The button is designed to be aesthetically appealing. The button
will take the user to the ShapesPractice page where the user can learn about animals.
Colors Button: The colors button, like the header button, uses an image that was created/arranged in
Adobe Illustrator (artwork freepik.com). The button is designed to be aesthetically appealing. The button
will take the user to the ColorsPractice page where the user can learn about animals.
A template designed for BSU EDTECH534 Mobile App Design Course by Yu-Chang Hsu, Ph.D. 2011-2015
Header: The header appears at the top of the screen. This is a graphic image created/arranged in Adobe Illustrator (Artwork by freepik.com). The
header image is included for aesthetic and informational purposes.
Image Buttons (16): The image buttons will toggle from the icon, to a picture of the animal to the word
representing the animal when clicked.
Navigation Buttons (3): The navigation buttons will take the user to colorspractice, the shapespractice, or the
quiz screen.
A template designed for BSU EDTECH534 Mobile App Design Course by Yu-Chang Hsu, Ph.D. 2011-2015
Header: The header appears at the top of the screen. This is a graphic image created/arranged in Adobe
Illustrator (Artwork by freepik.com). The header image is included for aesthetic and informational purposes.
Image Buttons (9): The image buttons will toggle from the icon, to a picture of the word representing the
color when clicked.
Navigation Buttons (3): The navigation buttons will take the user to animalspractice, the shapespractice, or
the quiz screen.
A template designed for BSU EDTECH534 Mobile App Design Course by Yu-Chang Hsu, Ph.D. 2011-2015
Header: The header appears at the top of the screen. This is a graphic image created/arranged in Adobe
Illustrator (Artwork by freepik.com). The header image is included for aesthetic and informational
purposes.
Image Buttons (6): The image buttons will toggle from the icon, to a picture of the word representing the
shape when clicked.
Navigation Buttons (3): The navigation buttons will take the user to animalspractice, the colorspractice,
or the quiz screen.
A template designed for BSU EDTECH534 Mobile App Design Course by Yu-Chang Hsu, Ph.D. 2011-2015
Quiz Screen
Header: The header appears at the top of the screen. This is a graphic image created/arranged in Adobe
Illustrator (Artwork by freepik.com). The header image is included for aesthetic and informational purposes.
Subheader The sub header image will change according to the quiz type. The three options are animals,
colors, and shapes. The appearance of each image can be found on the selection screen.
QuizLabel (3): The quizlabel is changed to match the quiz type. In each case the last word is changed to
either Animal, Color, or Shape.
Sprites (8 in 2 rows) : The image sprites will change based on quiz type. For an animals quiz, the images will change
to animals on the top row and animal names on the top row. A change in quiz type will change the images on the
sprites but the arrangement will be the same (4 in each row).
Try Again: The try again button (temporarily set to a pink image for testing) is enabled when a quiz is
completed and disabled when a quiz is restarted or the user navigates away from the quiz screen. This button
will reset the quiz and allow the user to replay the quiz.
Unmapped Sprite (1): This sprite is currently unmapped. It is under consideration to be used in the even that
multiple quizzes within a category can be created. This will launch a new version of a quiz in the same
category (animals, colors, or shapes).
Learn More Label: This label is static and is meant to inform the user of what is below.
Navigation Buttons (3): The navigation buttons will take the user to animalspractice, the colorspractice, or
the quiz screen.
A template designed for BSU EDTECH534 Mobile App Design Course by Yu-Chang Hsu, Ph.D. 2011-2015
Non-Visible Components:
Screen 1:
Sound: The I love learning clip plays when the screen is launched. It is included to help draw the user in to the app experience.
Horizontal Layout (2): There are two horizontal layout components used for formatting to keep the button centered and to keep the button at a specific
location at the bottom of the screen.
Selection Screen:
Sound: The learning is fun clip plays when the screen is launched. It is included to help draw the user in to the app experience.
Non-visible images. There are two non-visible images that are used for formatting to create white space.
Horizontal Layout (3): There are three horizontal layout components used for formatting to keep the buttons centered for aesthetic purposes.
Animals Practice Screen:
Sound: A click sound plays when the images are clicked and pictures are cycled through to help the user experience.
TinyDb: Tiny DB is used to store the value from where the user clicked in order to load the animals quiz.
Horizontal layout (3) Three horizontal layouts are used to center the header image, the navigation buttons and the table holding the images. (aesthetics)
Table Layout: A 4x4 table is used to keep the images properly aligned. The table is placed inside a horizontal layout for center formatting. (aesthetics)
Colors Practice Screen:
Sound: A click sound plays when the images are clicked and pictures are cycled through to enhance the user experience.
TinyDb: Tiny DB is used to store the value from where the user clicked in order to load the colors quiz.
Horizontal layout (3) Three horizontal layouts are used to center the header image, the navigation buttons and the table holding the images. (aesthetics)
Table Layout: A 3x3 table is used to keep the images properly aligned. The table is placed inside a horizontal layout for center formatting. (aesthetics)
Shapes Practice Screen:
A template designed for BSU EDTECH534 Mobile App Design Course by Yu-Chang Hsu, Ph.D. 2011-2015
Sound: A click sound plays when the images are clicked and pictures are cycled through to enhance the user experience.
TinyDb: Tiny DB is used to store the value from where the user clicked in order to load the shapes quiz.
Horizontal layout (3) Three horizontal layouts are used to center the header image, the navigation buttons and the table holding the images. (aesthetics)
Table Layout: A 2x3 table is used to keep the images properly aligned. The table is placed inside a horizontal layout for center formatting. (aesthetics)
Quiz Screen:
Sound: Three different sound components are on this screen. One for notifying the user that they matched a pair, one for notifying the user that the
match is incorrect, and one for the instructions on what to do when the quiz is launched. This is done to enhance the user experience.
TinyDb: Tiny DB is used to get the value from where the user clicked in order to load the correct quiz.
Horizontal layout (4) Four horizontal layouts are used to center the subheader image, the navigation buttons, the quizlabel, and the learn more label.
This is done for aesthetical purposes to center the information on the screen.
A template designed for BSU EDTECH534 Mobile App Design Course by Yu-Chang Hsu, Ph.D. 2011-2015
Insert the images of your App Component Map and Behavior Flowchart below.
II-A. App Component Map (30 points)
A template designed for BSU EDTECH534 Mobile App Design Course by Yu-Chang Hsu, Ph.D. 2011-2015
A template designed for BSU EDTECH534 Mobile App Design Course by Yu-Chang Hsu, Ph.D. 2011-2015
A template designed for BSU EDTECH534 Mobile App Design Course by Yu-Chang Hsu, Ph.D. 2011-2015