More Related Content
What's hot
Similar to Technovation challenge workplan for week 4
Similar to Technovation challenge workplan for week 4 (20)
More from wetech_global
More from wetech_global (12)
Recently uploaded
Recently uploaded (20)
Technovation challenge workplan for week 4
- 2. Agenda Topics • Survey results • Multiple screen and logic components for the App • User-centered Design Activities • Check-in for Survey Results – (15 mins.) • Colored Dots tutorial – (30 mins.) • Introduction to User-centered design – (10 mins.) • Usability testing (20 mins.) • Creating a Paper Prototype (30 mins.) • Wrap-up – (10 mins.)
- 3. Check in • Share interesting results or trends from your surveys • Is there a good size market for your app? • Are you looking to make any changes on your app idea based on the survey ideas?
- 4. Colored Dots This tutorial shows how to create apps that have multiple screens. In App Inventor, you can have a screen and can open a second screen. Later, the second screen can return to the initial screen that opened it. You can have as many screens as you like, but each screen closes by returning to the screen that opened it. The screens can share information by passing and returning values when they open and close. The screens also share the same TinyDB data, which they can use to store and share values. http://tinyurl.com/k2qahq7
- 5. Colored Dots This tutorial is an introduction to: Multiple Screens TinyDB Brush Picker
- 6. Multiple Screens • • • You can add screens in the designer and use the screen transitions in blocks editor to decide which screen to go to next For Example: if they push the menu button go to the menu screen Screen 1 will always be the screen the app starts on – probably best to make it a welcome screen You have to “package for the phone” to test moving between screens
- 7. Tiny DB • • Besides opening screens and returning values, the different screens in a multiple screen app can communicate through TinyDB. To do this, give every screen its individual TinyDB component. ColoredDots uses TinyDB to let you name the colors you create and save them to later use. The saving and naming will be done in Brush_Picker, as shown in the blocks later
- 8. Brush Picker The main job of Brush_Picker is to create a color from the redgreen-blue values entered in the text boxes and provide that color to Screen1. One thing the Brush_Picker needs to check is that it's using good values for colors and dot size. Each of the red, green, blue values should be a number between 0 and 255.
- 9. Putting it all together
- 10. What is User-Centered Design? Designing things with the user in mind. You are not always the user.
- 11. Designing with the user in mind? • • • Crash dummies – moving from only men to women and children! http://tinyurl.com/kb34cec Crash dummies are a perfect example of not designing with the user in mind. When they were first created, they were all shaped like adult men. As a result, women and children where killed by automobile accidents at a higher rate than men. Now, there are female dummies, male dummies, and children dummies. Now designers are even considering making crash dummies bulkier to accommodate the increasing average weight in the United States. These dummy designers are now creating dummies with the user in mind.
- 12. How to design with the user in mind? Which remote looks easier to use? Keep it simple! Source: Debra Lauterbach
- 13. What is User Interface? • User Interface: link between the user person and the technology • User Interface Design: designing technology that makes sense to user – “intuitive” design User Interface: Buttons User Interface: Touch Screen
- 14. Prototyping Lifecycle Have users test the prototype and ask them questions about their experience with it. Incorporate feedback. What does it need to do? What is the goal? Who is your user? What do they expect? What do they want? Prototyping. Create samples. Source: Debra Lauterbach
- 15. Usability Testing • Watch video on testing usability: http://www.youtube.com/watch?v=6TbyXq3XHSc • Ask participants to shares thoughts about creating prototypes based on the video
- 16. Activity: Usability testing of competitor apps • Investigate 2 or 3 apps that are similar in function to yours or that have the same target customer • Search on App Store for iPhone and Google Play for Android apps • Browse the apps and discuss the following: What does it do well? What could it do better? Make notes about the features/interface Color scheme, size/layout of buttons, readability, etc. Optional: If participants have their workbooks ask them to fill in the chart on page 11 of the workbook
- 17. So you have competition… So what? • You can make a better product! • Plastic bags can cover you from the rain…but aren’t you glad people invented raincoats?
- 18. Activity: Prototype Plan (20 min.) • • • • Skills and tools you need Components and skills Research tutorials and videos Divide up the work: each team member will program at least one screen.
- 19. Plan for completing a prototype Features Resources Timeframe
- 20. Activity: Create a paper prototype
- 21. Task List • Finish the paper prototype and bring to next session • Also, continue to gather survey responses to make sure that the team better understands the market of their app
- 22. Wrap-Up • Share a photo of your session with WeTech at wetech@iie.org • Encourage participants to join WeTech Technovation Facebook group to stay connected with the larger community http://tinyurl.com/mmzjwed
Editor's Notes
- Ask the participants if they had a chance to browse through the Colored Dots Tutorial. Is there anything about this tutorial that they’d like to discuss?Link to Colored Dots tutorial: http://tinyurl.com/k2qahq7
- Review the tutorial with the team and ask them if they can use any of the following ideas covered in the tutorial:Multiple screensTiny BDBrush Picker
- Looking at the populateList function in Colored Dots, here are the different concepts we’ve covered.1.) populateList is a procedure that returns a value2.) uses a loop to iterate/repeat actions3.) uses “and” logic as the condition in to iterate (if global counter > 0 and global counter <= numberOfColors)4.) variables – counter and tinyDBList5.) lists – action is to add items to the tinyDBList as long as the condition is trueLooking at limitRange, what concepts are there?1.) procedure that returns a value2.) conditional statement! If the input is not a number, return the lower limit, otherwise return the value if it’s valid (return the max value if it’s greater than the max allowed)
- Participants have assumptions about how the app will work because they designed it – they have to test with real users to see if the app really makes sense.We will begin with user-centered design. This means that you are designing your app with the user in mind. You are designing your app not only for you to be able to use it really well, but it also keeping in mind all your potential customers. If only you can use your app, your product market just got really small. In addition, you may not know best. That is a major pitfall of many designers. You do not represent everyone who might possibly use your app – that is why you need to get feedback from all sorts of possible users.
- Video Linkhttp://www.youtube.com/watch?v=vhvdtRZltXoSource: http://www.autoexpress.co.uk/news/autoexpressnews/210049/crash_test_dummies.html
- Let’s think about user-centered design in the example of remotes. Which remote looks easier to use? (let the participants call out).The remote on the right is a lot easier to use. The remote on the left has a lot of colorful buttons, but the remote on the right is simple. Keep your app ideas simple. User-centered design is about designing with the user in mind, which means aiming for designs that are friendly, simple, and usable. It is important to remember, you are not the user of your app. Different users will have different perspectives on what is important. Talking to your customers and understanding what they find important will prevent you from making assumptions.
- Keyvocabulary:Interface is a common boundary or link between two things. An example of interface are the buttons on the front of your TV set.User interface is a link between a person and thing, such as software. Software is the link between you and playing a computer video game.User interface design means designing things that make sense for the user, or the people who use them. Includes buttons, screen, keyboard, mouse, etc, and the software on the screenDifferent users have different expectations and needs – think about your grandparents using an iPod or complicated remote control. Or you can imagine seeing a toddler trying to use a PSP, they do not have the fine motor skills to hit the smaller keys…but that is why the PSP’s target customers are not toddlers, instead the PSP is great for adult gamers with the perfectly spaced keys for quick touches and a large screen.
- We now cover the Prototyping Lifecycle. There are four steps in this cycle. Define the requirements: What does your app need to do? What is its goal?Research will help you see if you defined your app requirements in a way that works with the customer/user.Design the prototype after researching the user and determining their expectations. Usability testing: Have users test the prototype and ask them questions about their experience with it. Incorporate their feedback into future prototypes.Where is your team in the cycle right now?
- Watch the video about usability testing. This is an example of a paper prototype. Participants can make their own prototype. Ask participants to write notes of their impression in their notepads/workbook while watching this video. (Click on the image on the slide, it links to this YouTube video: http://www.youtube.com/watch?v=6TbyXq3XHSc.)Participants can also watch another example: http://www.youtube.com/watch?v=GrV2SZuRPv0&feature=relatedTheir paper prototypes really make it clear how simple a design needs to be. If you can make a paper prototype of your app without too much trouble, then it most likely is user-friendly.
- Now that participants have shared thoughts on the videos, they can apply them to this activity. In this activity, participants will compare their app idea to competitor or near similar apps. These can be apps that are similar in function to or that attract the same target customer. It would be good to look at about 2 or 3 other apps. Search on the App store or Google play for some competitor apps. Then assess, What does it do well? What could it do better? You can make notes about the features or interface on page 12 in your workbook.
- Participants might have found that their same app idea has already been made into an app by another company…encourage them to make a better product!
- Determine what skills/tools you will need to create your app and features that you do not already have. Break the app down into several components, each requiring a different skill, and research tutorials and videos that teach the skills required. Decide how you are going to divide up the components and who is going to work on what. Each team member will program at least one screen.
- Ask participants to create a plan for how they will complete the prototype. Figure out what basic features or components the app will need (text-to-speech, accelerometer, lists, etc.) and then browse videos or tutorials on Technovation site that will teach how to implement those features. Finally, make a plan for when the team will work on each component.
- Participants can make their own paper prototype like the videos they watched. They can copy the template in the slide and create multiple screens for how the app would look and function. Ask the participants to design paper prototypes as a team. Don’t worry about drawing pictures or making them pretty yet, just create a nice outline. They can make it beautiful later!
- For next week, ask participants to finish their paper prototype. They can also continue to collect more survey results.