Education apps

Applies to Windows and Windows Phone

Globally, educators, parents, and students use technology for bringing learning to life. You can gain inspiration for the design of your own education app by reviewing scenarios in this topic and learning how the Microsoft design style is applied in these apps. Windows 8.1 has developer tools and new design choices you can use to build immersive app experiences for students, teachers, staff, and administrators.

For education apps, it's important to consider content, classroom orchestration and account management, collaboration, administering and taking tests, engagement, and accessibility.

Content

When you design your education app, think about the kind of content types you'll provide for your audience and whether they are consuming and/or creating the content. Common content scenarios for education apps include:

  • Curriculum content and standards, text books, libraries, and self-learning tutorials.
  • Classroom management.
  • Assessments—tests and quizzes.
  • Instruction tools and classroom orchestration.
  • Productivity tools designed for students (writing, presenting, organizing).

Kno Textbooks and Khan Academy are both education content apps that are great at providing users with engaging educational text and videos for consumption.

Screen shot showing Kno Textbooks

Kno Textbooks

Screen shot showing Khan Academy

Khan Academy

In the app Record Voice and Pen, from OakReFactory, the emphasis is on content creation. A teacher can record voice and notes simultaneously, and then save, export, and share that content.

Record Voice and Pen export wizard

Once the user has stopped recording their video, a modal box allows them to select their export preferences.

Record Voice and Pen with Share charm

Then they can share their content via the Share charm.

Another app with emphasis on content creation is Educ8 Teacher. Educ8 Teacher allows teachers to start a classroom session and write on a virtual chalkboard. Then the teacher can save the content they created and come back to it at a later time. This app is ideal for scenarios where a teacher projects to a larger screen in front of the classroom.

Educ8 Teacher math and geometry

Educ8 Teacher first grade math

Educ8 Teacher real-world math

Class orchestration and management

When designing your app consider how you'd like your app to support educators and learners through real-time and asynchronous communication, content creation and consumption, and controls or permissions. Items to consider for your app design in terms of classroom orchestration and management include:

  • Classroom orchestration

    Classroom orchestration refers to real-time management of classroom activities. Think about whether your app will be used by local users, remote users, or both. Let the real-time needs and the physical location of users guide your design scenarios for classroom orchestration. For example, if an educator has a classroom full of students, they might have different requirements from the app than an educator who's teaching a class of students learning remotely across the globe. A common scenario for classroom orchestration needs might be a testing scenario, which is described in further detail in Assessments: Administering and taking assignments, quizzes, and tests. Another scenario to consider is a live web or video chat session to provide question and answers in real time with students, assistants, and educators.

  • Account management

    Consider multiple account types to accommodate the many users who will need to access your app (such as teachers, administrators, parents, and students) and the different interface elements and content you'd like to be available to each account type. For example, you might want your app to provide content creation capabilities for an educator's account but read-only capabilities for a student's account. You can express this in the UI by giving teachers capabilities that students don't have, as determined by the login experience.

  • Age rating and parental control

    Because many education apps are for people under 18 years old, make careful decisions about age-sensitive data in the app. Microsoft provides age ratings for this purpose. Before uploading your app to the store, make sure the age rating reflects the relevant age group and you meet the criteria in the age-rating chart. Also be sure to provide any necessary parental control settings within your app.

    GuruCool Preschool Puzzles

    "Parent settings" is found in the upper left corner and in the app bar in GuruCool Preschool Puzzles.

Collaboration

Consider scenarios where users might want to collaborate and design a user flow that can enable the types of collaboration you want your app to encourage. Will the collaboration be real-time or will students see the info at different times?

Promethean ActiveEngage2 is a virtual student response system where students respond to questions and contribute to classroom discussions in real time. The interface design directs them to share their information with the teacher or class.

Promethean ActiveEngage2

Promethean ActiveEngage2 encourages collaboration in real time.

Microsoft OneNote, Skitch, and Evernote are apps that enable collaboration by allowing users to share notes and edit them simultaneously. In these cases, the apps use the Share contract to help a user send a file location, document, or summary.

Assessments: Administering and taking assignments, quizzes, and tests

If your app includes test and quiz scenarios, educators may want to put constraints or a time limit on their students' tests, or limit access to other content (such as lecture videos) within the app while the student is taking a test. For example, if your app has lesson plans, you might want to make them unavailable to the student while the student is taking a test within your app. BrainPOP is designed so that a user cannot access video content simultaneously while taking a quiz. Also, if they exit the quiz without completing it and receiving a grade, they cannot save their answers and come back to the quiz without starting the quiz over.

BrainPOP quiz

BrainPOP quiz dialog

BrainPOP warns the user with a message dialog when they leave a quiz before completion, and doesn't save their answers if they choose to leave.

ABC School is an app targeted toward early readers that features cartoon figures and plays background music. Sounds and animations give the user feedback as to when an answer is correct or incorrect. Consider implementing user feedback features like these to keep your audience immersed in the activity at hand.

ABC School

Engagement

Windows offers opportunities in tiles and notifications to increase and maintain user engagement. Take these engagement opportunities into consideration when designing your education app:

  • Tiles

    Live tiles are a great way to increase engagement and reengagement with your app. Consider these scenarios for using live tiles in education apps:

    • Encourage students to brush up on topic areas they are struggling with.
    • Remind students of upcoming assignments, quizzes, and tests.
    • Remind educators to complete grading or provide students with feedback on recently submitted assignments.

    If your app is predominantly content based, opportunities to use live tiles include showing the student what the topic for the day is, as BrainPOP does.

    BrainPOP tile

    BrainPOP uses live tiles to inform users what the topic of the day is.

    If your app is a publishing app such as NOOK, you can push an update to remind a user of content they've read or are currently reading, or let the user know about a new ebook on a topic they are currently learning or interested in.

    Nook tile

    NOOK reminds users of what they’ve recently read in live tiles.

    Large tiles provide ample space to add multiple live updates at a time, or to display a user's progress in a graphical representation. For example, GuruCool Preschool Puzzles could implement a smaller version of their progress chart on a large tile to encourage children and their parents to complete a topic.

    GuruCool Preschool Puzzles progress chart

    Preschool Puzzles could implement a version of the above progress chart on a large tile to encourage a user to complete a topic.

    Secondary tiles are great entry points into a section of an app that interests the user. It reduces the number of steps to navigate to a section. For example, a student may want to check their class schedule, and a secondary tile that links to the class schedule page would allow the student pull up their schedule with a click or tap.

  • Notifications

    Consider complementing your live tiles with notifications in scenarios with time-sensitive content such as an upcoming test or assignment due date. Notifications can be more attention-grabbing than live tiles so be sure to use them in more critical scenarios (such as a test or assignment due soon) to avoid making your app feel "spammy." Consider giving the user options as to what kinds of notifications they'd like to receive to help the user feel more in control of how the app interacts with them.

Accessibility

Early in the design process, consider how all types of learners will interact with your content and what auditory and visual needs you'll address in your app. There are several accessibility scenarios that can be considered during the design decision phase of app development. For education the most significant accessibility needs are:

  • Auditory needs

    Windows is equipped with Microsoft Narrator, a screen reader that reads text on the screen aloud and describes events. Optimizing your app for Microsoft Narrator and other screen readers is a good way to ensure your app is accessible to users who are visually impaired or blind. Test your app to see if it's optimized for accessibility in XAML or HTML. For a screen reader to work, all UI elements within your app must be appropriately labeled with a name, role, description, state, position, and any other relevant information. Optimizing your XAML or HTML so that screen readers can determine basic UI elements is a relatively low investment in terms of development hours, and drastically improves the user experience for users of all abilities.

  • Visual needs

    To create an enhanced and accessible visual experience for all users, include closed captioning and subtitles for images and video within your app. To improve the text in your app, a high contrast ratio of text to background is recommended for both XAML and HTML. A minimum luminosity contrast ratio of 4.5:1 against the background is required for your app to be considered accessible. To accommodate those with color blindness, use color alternates such as text, shapes, and icons in scenarios where color is used to convey information.

  • Keyboard interactions and alternate inputs

    People might use a variety of ways to interact with your app: touch, keyboard, mouse, and pen are the most common. If the app is game-like, perhaps a controller or 3D gestures are recognized.

    The more keyboard accessibility features your app has, the more students are able to digest your app's content and complete assignments with ease. Support keyboard interactions by enabling keyboard shortcuts, allowing for activation of elements with the enter or spacebar key, and allowing users to navigate via arrows and/or tabbing. You can override the default tab order by setting a tab index property in XAML or HTML.

    Once you've designed your app to be accessible, be sure to mark your app as accessible when submitting to the Windows Store.

Related topics

Age ratings and rating boards
App tiles sample
Checklist for accessibility
Defining vision
Guidelines for accessibility
Guidelines for app bars
Guidelines for login controls
Guidelines for sharing content
Guidelines for tiles
Guidelines for toast notifications
HTML AppBar control sample
Meet Windows Store apps
Microsoft Narrator
Sharing content source app sample
Sharing content target app sample
Testing your app for accessibility (HTML)
Testing your app for accessibility (XAML)
Toast notifications sample
Tools
UX guidelines for Windows Store apps
UX/UI
XAML AppBar control sample

 

 

Show:
© 2014 Microsoft