Non-ChangesImprovementsWalkthroughIntroduction1

The Math NotebookRedefining Class Notes

Laurin Beckhusen ● Christopher Chow ● Sean Gabriel

Michael Jurka ● Erik Lewis ● David Wong

User Interface Design Project

Non-ChangesImprovementsWalkthroughIntroduction2

Intended Use of Interface

Introduction

Use of Interface

• Note-taking software technology that bridges the gap between evolving hardware and traditional note-taking methods

• System designed for taking notes in the classroom, imitating the conventional notebook but utilizing the power of digital ink

• Addresses a common problem: how to share answers online? Typing out f(x) = (2x^2+3x) / 5 just isn’t cutting it anymore

Non-ChangesImprovementsWalkthroughIntroduction3

Intended User Population

User Population

• High school students or college students, with some level of computer experience

• Users are familiar with the Windows operating system and can perform common tasks for people their age (ex. use AOL Instant Messenger)

• Early adopters of technology (ex. tablet PCs)

Introduction

Non-ChangesImprovementsWalkthroughIntroduction4

Task Chosen

Task Chosen

Work on homework with a friend online

Walkthrough

Non-ChangesImprovementsWalkthroughIntroduction5

First Screen (1)

Walkthrough

Non-ChangesImprovementsWalkthroughIntroduction6

Inline Help (2)

Walkthrough

Non-ChangesImprovementsWalkthroughIntroduction7

Column View (3)

Walkthrough

Non-ChangesImprovementsWalkthroughIntroduction8

Individual Homework (4)

Walkthrough

Non-ChangesImprovementsWalkthroughIntroduction9

Active File (5)

Walkthrough

Non-ChangesImprovementsWalkthroughIntroduction10

Switch-To-Edit View (6)

Walkthrough

Non-ChangesImprovementsWalkthroughIntroduction11

Hide The Iconic Menu (7)

Walkthrough

Non-ChangesImprovementsWalkthroughIntroduction12

White Board Activated (8)

Walkthrough

Non-ChangesImprovementsWalkthroughIntroduction13

Status Visible (9)

Walkthrough

Non-ChangesImprovementsWalkthroughIntroduction14

Read Instructions (10)

Walkthrough

Non-ChangesImprovementsWalkthroughIntroduction15

Share Notes Task (11)

Walkthrough

Non-ChangesImprovementsWalkthroughIntroduction16

Need For A Help Menu

Need For A Help Menu

User complained that support documentation was insufficient

1. In-line instructions with UI rather than dumping user to an external document

2. Tool tips to aid struggling user

Goal: Design intuitive system that didn’t need extra documentation

Improvements

Help and Documentation

Non-ChangesImprovementsWalkthroughIntroduction17

Fully Tabbed System

Fully Tabbed System

In user testing, found it not fast enough and not intuitive

1. Split Screen with no switching

2. Use common tabs for multiple documents

Improvements

Cater To Universal Usability

Goal: Support fast switching by having 2 tabs, My Notes & Online Collaboration

Non-ChangesImprovementsWalkthroughIntroduction18

Common Symbols Palette

Common Symbols Palette

Cognitive walkthrough and user feedback wanted more tools

Goal: Minimize palette clutter with only common tools (selector, pens, highlighter)

Improvements

Flexibility And Efficiency Of Use

Add ability for user to insert other math related symbols

Non-ChangesImprovementsWalkthroughIntroduction19

Zoom Feature

Need To Reach Menu

User testing showed this was not intuitive

Added a “MathNotes Home” button in top left corner

Goal: Allow users to return to menu page quickly, used a zoom out feature

Recognition Rather Than Recall

Improvements

Non-ChangesImprovementsWalkthroughIntroduction20

Support For Whiteboard

Support For Whiteboard

User testing showed us that this feature is not easy to find or use

1. Split Screen View if user wants it

2. In-line instructions for how to use it

Goal: Create a space where users can draw freely and share with other users

Recognition Rather Than Recall

Non-ChangesImprovementsWalkthroughIntroduction21

More Shortcuts

More Shortcuts For Expert Users

User complained that there were not enough shortcuts supported

Added more keyboard shortcuts for switching between tabs

Goal: Design simple interface that could be used very quickly and efficiently

Cater To Universal Usability

Non-ChangesImprovementsWalkthroughIntroduction22

Alternative Improvements

Suggestions Not Added

• Search functionality: originally considered character recognition but found scope of the problem too big – searching through digital ink poses a similar problem

• Full help menu: prefer iconic “menus” in interface to make system as intuitive as possible – true help menu breaks the consistency of this system

• Reorganization of notes: found optimal breakdown for notes based on user testing – adding more reorganization possibilities puts additional burden on user to categorize things differently and detracts from initial goal of having a seamless interface

• List of IP’s: allow for easier connectivity in collaborative modes – agree with this fundamentally, but it is impractical to implement and may raise privacy concerns

Non-Changes

Non-ChangesImprovementsWalkthroughIntroduction23

Q & A

Q & A

* Images Provided by GettyImages.com