NextLesson Glossary

NextLesson Glossary

A feature of our interactive tool

After the initial version of our interactive learning tool was live, it was up to the curriculum team to fill it with amazing lessons. In the meantime, we focused on new features and learning tools. Since many of our lessons centered around real world jobs—like accountants and sports team managers—there were bound to be industry-specific words that students wouldn't know. We set about building a “toolbox” that a student could use. We had visions of many tools down the road, but for now, the first tool would be a glossary.

The User Experience

When a student encounters a underlined glossary term, they can click on it to see the definition. A little pop up tooltip will tell the student the definition and show an image if there is one. They can also access a list of all the terms in the lesson by going to the right hand toolbar and clicking on the glossary icon. This will slide in the list of glossary terms in the lesson that they can look over.

A video depicting the two ways you can view a glossary term's definiton.

Having the experience unobtrusive was key, because we didn't want students to get distracted. Rather than open up separate tabs or new windows, we intergrated it as much as we could. This lead to the side toolbar. The secondary vertical pane that shifted out of the toolbar also served a great place to hold the table of contents, which allowed quick navigation.

The Visuals

We had a variety of concepts and objects to diagram including careers, mathematic principles, and industry‑specific terms. Fortunately, I had a library of image assets that I'd slowly created over time, making this task a little less time-intensive. However, it still required a bit more thought over how to illustrate more abstract concepts like “viable” and “hypothesize.”


Vector Illustrations

2016

  • Illustrator
  • Sketches

Vector Illustrations

2016

  • Illustrator
  • Sketches

The User Experience

When a student encounters a underlined glossary term, they can click on it to see the definition. A little pop up tooltip will tell the student the definition and show an image if there is one. They can also access a list of all the terms in the lesson by going to the right hand toolbar and clicking on the glossary icon. This will slide in the list of glossary terms in the lesson that they can look over.

A video depicting the two ways you can view a glossary term's definiton.

Having the experience unobtrusive was key, because we didn't want students to get distracted. Rather than open up separate tabs or new windows, we intergrated it as much as we could. This lead to the side toolbar. The secondary vertical pane that shifted out of the toolbar also served a great place to hold the table of contents, which allowed quick navigation.

The Visuals

We had a variety of concepts and objects to diagram including careers, mathematic principles, and industry‑specific terms. Fortunately, I had a library of image assets that I'd slowly created over time, making this task a little less time-intensive. However, it still required a bit more thought over how to illustrate more abstract concepts like “viable” and “hypothesize.”

Personal Shopper

Counting Principle

Marketing

Baker

Telephoto Lens

Critique

List Price

Budget

Production Costs

Critically Endangered

Stage Manager

Cost of Production

Video Wall

Viable

Entrepreneur

Median

Agility

Revenue

Coupons

Pricing Structure


Other NextLesson Projects

NextLesson InterestID

NextLesson Lesson Covers

NextLesson Glossary Terms

NextLesson Characters

Back to all projects