Download This Sample
This sample is exclusively for KidsKonnect members!
To download this worksheet, click the button below to signup for free (it only takes a minute) and you'll be brought right back to this page to start the download!
Sign Me Up
Table of Contents
In our digital world, we cannot deny the importance of mobile applications. They provide solutions to everyday problems and make our lives easier. In this lesson, we will use App Lab to create interactive apps. An interactive app is an app that allows users to interact “with audiovisual information via gamification, visualization, and even VR/AR. Basically, every app has some kind of interactivity.”
See the fact file below for more information on the making interactive apps or alternatively, you can download our 28-page Making Interactive Apps worksheet pack to utilise within the classroom or home environment.
Key Facts & Information
Designing the User Interface
- A user interface is the visual appearance of a website, software, or an application that users interact with.
- For the app to be successful, the creator should take into account what the app user needs. The user interface should be engaging and effective. It should support the user’s journey through the app and create a positive experience for the user.
- App Lab equips creators with a design toolbox that contains all the app components/elements.
- The app creator can easily design their app’s user interface by combining different components.
- To add an element to the app, the creator needs to drag and drop the element to the screen. They can position the element anywhere in the screen and edit the properties of the said element (resize, change color, edit text, etc.).
UI Elements
- Button – commonly displayed as shapes with a label at the center and allows a user to execute a particular command
- Label – displays text that provides information to the user about a particular object
- Radio Button – small circular element that allows users to select an option from a particular list
- Image – allows creators to display a picture of a particular object on screen
- Screen – allows creators to add a new screen to the app
- Chart – allows creators to display data to users and communicate their message about the said data
- Photo Select – allows users to select a photo from their computer and store it
- Text Input – where the user can enter data
- Dropdown – reveals a list of items from where the user can select or choose a value when a button is clicked
- Checkbox – allows users to select an item by checking the box beside it
- Canvas – where users can draw and create graphics
- Text Area – can hold unlimited amount of characters (usually used to collect user inputs like comments, reviews, etc.)
- Slider – allows users to control a value by sliding the knob
- There is no fixed formula for making the perfect mobile app, but following these good design principles will definitely help creators build a successful app.
- First, it is good to strive for minimalism. Avoid clutter. The screen should only have all the necessary elements. The visual and functional design should be consistent throughout the app. Use the same set of fonts, color scheme, and the like. The users will expect that the similar elements will behave the same way throughout the app.
- The goal of the creator is to have a simple, easy-to-understand, functional app. In other words, the user interface should be intuitive.
- Users should be able to navigate the app easily without any training.
- The app should also be engaging. Users should come away feeling like they want to come back.
- The app should be efficient. Users should not have to go through too many steps just to accomplish what they need to do. Can the user achieve their goal with just a few clicks?
- The user should also feel supported whenever they use the app. If they need help or advice, does the app have a way to help them?
- Lastly, users should be able to easily recover when they make a mistake.
Making An App Interactive
- Code makes the user interface elements interactive. The designer needs code to make the elements behave in a certain way and enable users to interact with it.
- The example shows how to code a button in such a way that when the user clicks it, it will carry out a task (make the background green).
- The designer needs to input the correct information inside the coding block, as shown below.
- “Interactive apps need both UI elements and event handlers for those UI elements and each type of user interaction needed.”
- The first dropdown allows the designer to select the element that they want to code.
- The second dropdown allows the designer to select the type of action that they want the user to do in order to trigger the specified event.
- Whatever task or command that the element needs to execute is found inside the event block. In the example, clicking the button will set the screen’s background color to green.
- To learn more about the coding process, complete the worksheets below.
Note:
- Using the worksheets require logging into your App Lab account. Visit https://code.org/educate/applab.
- This worksheet pack is a sequel to Intro to App Making. If you need a more in-depth beginner’s tutorial on App Lab, refer to that worksheet pack.
Making Interactive Apps Worksheets
This is a fantastic bundle which includes everything you need to know about the Making Interactive Apps across 28 in-depth pages. These are ready-to-use Making Interactive Apps worksheets that are perfect for teaching students about the importance of mobile applications. They provide solutions to everyday problems and make our lives easier. In this lesson, we will use App Lab to create interactive apps. An interactive app is an app that allows users to interact “with audiovisual information via gamification, visualization, and even VR/AR. Basically, every app has some kind of interactivity.”
Complete List Of Included Worksheets
- Making Interactive Apps Facts
- Good Design Principles
- Good UI Design
- Interactive App Elements
- Your Favorite App
- Music App
- Calculator App
- Survey/Poll App
- Master Clicker Game
- Where’s the Bug? Game
- What’s Your App Idea?
Link/cite this page
If you reference any of the content on this page on your own website, please use the code below to cite this page as the original source.
Link will appear as Making Interactive Apps Facts & Worksheets: https://kidskonnect.com - KidsKonnect, November 23, 2020
Use With Any Curriculum
These worksheets have been specifically designed for use with any international curriculum. You can use these worksheets as-is, or edit them using Google Slides to make them more specific to your own student ability levels and curriculum standards.