User Interface Design Project

1
User Interface Design Project
The Math Notebook Redefining Class Notes Laurin
Beckhusen ? Christopher Chow ? Sean
Gabriel Michael Jurka ? Erik Lewis ? David Wong
2
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) (2x23x) / 5
  just isnt cutting it anymore

Introduction
3
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
4
Task Chosen
Task Chosen Work on homework with a friend online
Walkthrough
5
First Screen (1)
Walkthrough
6
Inline Help (2)
Walkthrough
7
Column View (3)
Walkthrough
8
Individual Homework (4)
Walkthrough
9
Active File (5)
Walkthrough
10
Switch-To-Edit View (6)
Walkthrough
11
Hide The Iconic Menu (7)
Walkthrough
12
White Board Activated (8)
Walkthrough
13
Status Visible (9)
Walkthrough
14
Read Instructions (10)
Walkthrough
15
Share Notes Task (11)
Walkthrough
16
Need For A Help Menu
Need For A Help Menu

• In-line instructions with UI rather than dumping
  user to an external document
• Tool tips to aid struggling user

User complained that support documentation was
insufficient
Goal Design intuitive system that didnt need
extra documentation
Improvements
17
Fully Tabbed System
Fully Tabbed System

• Split Screen with no switching
• Use common tabs for multiple documents

In user testing, found it not fast enough and not
intuitive
Goal Support fast switching by having 2 tabs,
My Notes Online Collaboration
Improvements
18
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
Improvements
19
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
Improvements
20
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

• Split Screen View if user wants it
• In-line instructions for how to use it

21
More Shortcuts
More Shortcuts For Expert Users
User complained that there were not enough
shortcuts supported
Goal Design simple interface that could be used
very quickly and efficiently
Added more keyboard shortcuts for switching
between tabs
22
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 IPs allow for easier connectivity in
  collaborative modes agree with this
  fundamentally, but it is impractical to implement
  and may raise privacy concerns

Non-Changes
23
Q A

• Q A

Images Provided by GettyImages.com