"I love Prototyping for Learning"

2022-10-09 04:58:06

Getting StartedResourcesSubscribePROTOTYPING FOR LEARNINGA resource for getting started with prototyping Why We PrototypeOne of our biggest challenges in developing learning solutions is to insure that our stakeholder’s vision, organizational needs and the audiences requirements are met to deliver the best possible experience. In the past we’ve jumped right into development. Now, by introducing prototyping, we provide a way to simplify the development process by experimenting, testing, and gathering feedback before the development process. There are dozens of tools today which enable and provide simple ways to effectively prototype. For reference, we have selected and shared the latest toolset that we use within our team to design, gather feedback and test ideas for millions of learners that we provide contents and tools to each year.Communicate VisuallyCreate a Visual StoryRoad MapGet everyone on the same pageImprove ResultsUse feedback to make it better! Steps for PrototypingDefine the Problem Ask questions, understand the need, don’t make any assumptions. Ask to speak to several audience (participants) who can provide feedback.Understand the AudienceThis is critical! How will they use the deliverable? Where will they use it? What type of environment? What device will they use?Brainstorm OptionsUse you sketching and prototyping apps to evolve the concept. Get feedback and once everything is good, start development.Prototype, Feedback, Evolve, RepeatUse prototyping tools and process to gather feedback, test concepts and once approved, develop, gather feedback, launch and repeat. Get Feedback in between each step! Start SketchingThe easiest way to start is by sketching out ideas and concepts as you are thinking, brainstorming or working with your stakeholder.Start out with a pen and paper and start sketching as you are collaborating with your team. The following apps will allow you to use your device to digital sketch, collaborate and share ideas. OneNote MicrosoftiOS, Android, Mac and Windows Adobe SketchiOS, Android, Mac and Windows FiftyThree PaperiOS MoleskiniOS NotabilityiOS (My Favorite) Use Sketching to Tell a StoryInstead of just presenting a mock-up, think about presenting your idea as a story. Use your prototype to help tell a story of a user interacting with your app. What can this user expect to see? How will they navigate between areas of the app or interact with the content? Once you have the answers to these questions, make sure your answers are illustrated through the story your prototype tells. Basic Sketching Objects to UseBelow are quick examples of how to draw sample content within your sketch.TextDraw some squiggly lines to represent copy from a headline to a paragraph.Hamburger MenuAdd to allow the user to reveal additional commands or menu items that are not critical to the primary purpose of the screen.ButtonCan be rounded or squared and allows a user to select a call to actionPlayCan be used within a rectangle to represent a media element such as audio or video.AccordionAllows you to present choices that may expand upon selection to reveal additional choices. Blind/ModalCan be used to call attention or alert the user to a particular interaction such as a warning or prompt. Try This Sketching ActivityGrab some paper and a pencil. Draw a sample menu with 4 selections. and then a secondary content page that shows how you may use a headline, visual image or video and additional content. See our exampleSketch Sample Based on Activity×Here we see an example of a sketch showing a menu and two screens as the user navigates deeper into the program. Content Strategy for DesignThink about each device size, orientation and how a user will be interacting with it. Ready to PrototypeXD for Wireframes and PrototypingDesign, prototype, share — all in XD.Learn More about XD Don’t forget to experiment, play and adapt your process.For homework, download and test one app a month (at least) to see how you can enhance your process. Resources:Tools, Apps, and Books to Check Out Books to Open Your EyesFour great books to expand your imagination, learn about design and how people interact with content to managing your projects.The Design of Everyday ThingsDon't Make Me ThinkCreativity, IncSprint: How to Solve Big Problems and Test New Ideas in Just Five Days A Book Apart.Books for people who make web things.Responsive Web Design Think beyond the desktop, and craft designs that respond to your users’ needs—no matter how large or small the display.Design for Real Life You can’t know every user, but you can develop inclusive practices to create experiences that support a wider range of people, more of the time. Mobile First Data-driven strategies and battle tested techniques to help make you a master of mobile—and improve your non-mobile design, too!Designing for Touch Get the know-how to design for interfaces that let you touch—stretch, crumple, drag, flick—information itself. Capturing FeedbackOne of the key aspects of prototyping is getting feedback from your audience as often as possible to help evolve an idea and test its effectiveness. Check out these great apps to grab and record anything on your Mac or Windows screen. SnagitEasy capture, edit and share anything on your Mac or Windows screen. Explore CamtasiaCapture video and audio of anything on your screen to document, share or instruct your audience. Explore JingA simple, free way to start sharing images and short videos and esily share them on the web.Explore iPad Pro with Apple PencilOne of my favorite tools today is using Apple iPad Pro with the Apple Pencil to quickly sketch, screen grab and annotate elements. Creating Placeholder (fill-in) Copy If you need to start conceptualizing content and layouts without any content, you can start with these fun text generators. Lorum IpsumDerived from Latin dolorem ipsum (“pain itself”), Lorem Ipsum is filler text used by publishers and graphic designers used to demonstrate graphic elements.Explore CUPCAKE IPSUMHow about using auto-generated text that will actually make people love your project even more? Pretty sweet, right?Explore Lorem Ipsum for XDDownload this plug-in in Adobe XD to instantly be able to add text to your wireframes. Explore Feedback LoopsLook for ways to connect and gather feedback during every phase of your project. A couple tools to explore. MiroCapture video and audio of anything on your screen to document, share or instruct your audience. Explore MuralThink and collaborate visually. Anywhere, anytime. Great for teams. Explore User TestingSee, hear and talk to your customers as they engage with your products, apps and messaging. Make better decisions.Explore Sealworks Interactive Studios 9 Cambridge Lane Newtown, PA 18940Email: [email protected] Follow usOn Twitter Check Outour blogCopyrights © 2019 All Rights Reserved by Sealworks Inc.