Options Button Y=, Tables and Lists Panning and Zooming Graphing Transformations Factoring Formula Library Fractions Simplified Button Layout More Ideas

Pan and Zoom

 

 

Design Overview

  • Allow dynamic window adjustments with instant feedback using the 4 arrow keys.

Motivation

  • No immediate feedback in adjusting window.
    In TI-73 and TI-83, it is necessary to press on the “Window” button, and directly change the values for Xmin, Xmax, Ymin, and Ymax. Similar for zooming.
  • 4 teachers found the current graph window complicated.
  • 2 teachers mentioned that they forget the graph goes beyond what they deal with.
  • 3 teachers would like an auto window.

Major findings

  • 6/8 users were initially confused by a graph screen that appeared to be blank (in this case due to points plotted off the default screen).

Past iterations and user tests

See Evolution of Prototypes

 

 

Design Background

We decided that setting the current calculators' way of setting the graph window, by setting the x and y bounds was not an intuitive interface, because it required the user to be able to imagine how they wanted the graph to look, then translate that into a list of numbers. Our design methodology was to simplify this, and provide an intuitive method of setting the graph window. We borrowed our design from the way many computer applications use to navigate around large documents- one can zoom in and out, and also pan around.

Look at evolution of prototypes to see how this evolved into our final design.

 

Design Walkthrough

1.

When “Graph” button is pressed, graph will be zoomed and panned to cover all of the coordinates entered by the user.

2.

To pan manually, the user presses the “Pan” button on the calculator. A “pan mode” label and an animation with arrows show up. The user may use the arrow keys to pan the screen in this mode.

3.

After pressing the "Zoom" button, a “zoom mode” label and an animation with arrows show up.

The user may:

  • zoom in (up arrow)
  • zoom out (down arrow)
  • stretch the x-axis (right arrow)
  • stretch the y-axis (left arrow)
4.

The right arrow stretches the x-axis.

5.

The left arrow to stretches the y-axis.