User Interface Design Project
The Math Notebook
Redefining Class Notes
Laurin Beckhusen ● Christopher Chow ● Sean Gabriel
Michael Jurka ● Erik Lewis ● David Wong
Introduction
Walkthrough
Improvements
Non-Changes
1
Intended Use of Interface
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
Introduction
Walkthrough
Improvements
Non-Changes
2
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
Walkthrough
Improvements
Non-Changes
3
Task Chosen
Task Chosen
Work on homework with a friend online
Introduction
Walkthrough
Improvements
Non-Changes
4
First Screen (1)
Introduction
Walkthrough
Improvements
Non-Changes
5
Inline Help (2)
Introduction
Walkthrough
Improvements
Non-Changes
6
Column View (3)
Introduction
Walkthrough
Improvements
Non-Changes
7
Individual Homework (4)
Introduction
Walkthrough
Improvements
Non-Changes
8
Active File (5)
Introduction
Walkthrough
Improvements
Non-Changes
9
Switch-To-Edit View (6)
Introduction
Walkthrough
Improvements
Non-Changes
10
Hide The Iconic Menu (7)
Introduction
Walkthrough
Improvements
Non-Changes
11
White Board Activated (8)
Introduction
Walkthrough
Improvements
Non-Changes
12
Status Visible (9)
Introduction
Walkthrough
Improvements
Non-Changes
13
Read Instructions (10)
Introduction
Walkthrough
Improvements
Non-Changes
14
Share Notes Task (11)
Introduction
Walkthrough
Improvements
Non-Changes
15
Need For A Help Menu
Need For A Help Menu
Goal: Design intuitive
system that didn’t
need extra
documentation
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
Help and Documentation
Introduction
Walkthrough
Improvements
Non-Changes
16
Fully Tabbed System
Fully Tabbed System
Goal: Support fast
switching by having
2 tabs, My Notes &
Online Collaboration
In user testing,
found it not fast
enough and not
intuitive
1. Split Screen
with no switching
2. Use common tabs
for multiple
documents
Cater To Universal Usability
Introduction
Walkthrough
Improvements
Non-Changes
17
Common Symbols Palette
Common Symbols Palette
Goal: Minimize palette
clutter with only
common tools
(selector, pens,
highlighter)
Cognitive
walkthrough and
user feedback
wanted more tools
Add ability for user to
insert other math
related symbols
Flexibility And Efficiency Of Use
Introduction
Walkthrough
Improvements
Non-Changes
18
Zoom Feature
Need To Reach Menu
Goal: Allow users to
return to menu page
quickly, used a zoom
out feature
User testing
showed this was
not intuitive
Added a “MathNotes
Home” button in top
left corner
Recognition Rather Than Recall
Introduction
Walkthrough
Improvements
Non-Changes
19
Support For Whiteboard
Support For Whiteboard
Goal: Create a space
where users can
draw freely and share
with other users
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
Recognition Rather Than Recall
Introduction
Walkthrough
Improvements
Non-Changes
20
More Shortcuts
More Shortcuts For Expert Users
Goal: Design simple
interface that could
be used very quickly
and efficiently
User complained
that there were
not enough
shortcuts
supported
Added more keyboard
shortcuts for
switching between
tabs
Cater To Universal Usability
Introduction
Walkthrough
Improvements
Non-Changes
21
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
Introduction
Walkthrough
Improvements
Non-Changes
22
Q&A
Q&A
* Images Provided by GettyImages.com
Introduction
Walkthrough
Improvements
Non-Changes
23