After building dozens of educational iPad apps, I thought i'd take a moment to reflect on my design process. Everything begins with an app concept. The concept should clearly answer two questions: what curriculum will the app support and how will it function. Developing concepts merits a discussion in and of itself and I will return to it in a future post.
After settling on the concept I begin to sketch. Initial sketching is one of the most important steps in my app design process. I always sketch on paper that is roughly the same size as the target device for the application. Lately this has been the iPad. Touch interfaces require a clear understanding of physical spacing - components should feel in balance and the eye should be drawn to the right areas of the screen. Further, younger children have smaller fingers but don't have the same level of control and this must be accounted for in all touch input spaces and/or buttons.
The initial sketch points the design and layout in a clear direction. The primary interaction models should be articulated as well outside of the screen. This helps to assess the early design in the context of functional interaction - put another way, how will the app function?
There are always too many details to include on the initial sketch including:
Below is an initial sketch. Notice the interaction models which are called out - "draw anywhere", "tap", "answer".
After settling on the concept I begin to sketch. Initial sketching is one of the most important steps in my app design process. I always sketch on paper that is roughly the same size as the target device for the application. Lately this has been the iPad. Touch interfaces require a clear understanding of physical spacing - components should feel in balance and the eye should be drawn to the right areas of the screen. Further, younger children have smaller fingers but don't have the same level of control and this must be accounted for in all touch input spaces and/or buttons.
The initial sketch points the design and layout in a clear direction. The primary interaction models should be articulated as well outside of the screen. This helps to assess the early design in the context of functional interaction - put another way, how will the app function?
There are always too many details to include on the initial sketch including:
- will navigation be 'single touch' or 'touch and release'
- will answers need to be submitted by a secondary button
- how will correct and incorrect answers be displayed
- how much scaffolding will be included on the primary screen
Below is an initial sketch. Notice the interaction models which are called out - "draw anywhere", "tap", "answer".
Once I am happy with a sketch, I move to prototyping. At this stage I do not work on the visuals to any extent but rather focus on the primary interactions. Prototyping raises many questions that must be answered beyond the initial sketch.
My goal when prototyping is to always get a basic version of the app functioning and settle on the primary interaction models and structures. How will feedback be given? How will scaffolding be included and to what extent? What are the consequences of a wrong answer? All of these questions are raised and must be answered in the prototype. At this stage it's important to test the prototype with educators and students and solicit feedback. What doesn't work? What needs to change? What needs to be refined?
Below is a snapshot from an early functional prototype for a Math Word Problems app.
My goal when prototyping is to always get a basic version of the app functioning and settle on the primary interaction models and structures. How will feedback be given? How will scaffolding be included and to what extent? What are the consequences of a wrong answer? All of these questions are raised and must be answered in the prototype. At this stage it's important to test the prototype with educators and students and solicit feedback. What doesn't work? What needs to change? What needs to be refined?
Below is a snapshot from an early functional prototype for a Math Word Problems app.
The work between early prototype and final product is one of refinement and craftsmanship. Discoveries are always made and new questions are always posed. How should audio be incorporated if at all? How should feedback be incorporated on all levels (from button-touch to getting the right answer). How should states be saved or cleared when the app is closed or a user switches to the home screen.
When designing educational apps for children additional considerations come into play. How will multi-touch be handled? Kids lean on devices and touch everywhere and this must be anticipated! How will support be given when kids are stuck (ie. when an action hasn't been taken for an extended period of time). If kids have the wrong answer, will they be able to move forward? How many answers do they need to get correct to pass a level?
The screenshot below shows the final product. This product bears some resemblance to the early prototype but in some ways it is totally different. Perhaps most significantly we decided to add audio support and shifted the style of answer input for the written equation and answer box.
When designing educational apps for children additional considerations come into play. How will multi-touch be handled? Kids lean on devices and touch everywhere and this must be anticipated! How will support be given when kids are stuck (ie. when an action hasn't been taken for an extended period of time). If kids have the wrong answer, will they be able to move forward? How many answers do they need to get correct to pass a level?
The screenshot below shows the final product. This product bears some resemblance to the early prototype but in some ways it is totally different. Perhaps most significantly we decided to add audio support and shifted the style of answer input for the written equation and answer box.
In my experience, the best apps begin with a strong initial sketch and vision for the app. There must be a clear concept which answers what curriculum the app will support and how it will function. The first prototype builds off of the initial sketch and implements the primary interaction models. Refinement and testing shape the early prototypes. The final product must resolve many of the unanswered questions in the early design. Small decisions and interaction models must be clarified. Initial testing must bear out these decisions and validate them.
My design process is constantly evolving. How do you think about educational design? How could I improve my process? I'd love to hear your thoughts.
My design process is constantly evolving. How do you think about educational design? How could I improve my process? I'd love to hear your thoughts.
RSS Feed
