TDLoo won an award

I’m proud to say that the Princeton School of Engineering and Applied Science distinguished this paper with the Kenneth H. Condit Senior Thesis Prize for excellence in senior thesis research.  They also awarded me personally the Elgin Prize.

The department recognized the paper for its interdepartmental research and focus on real life problems.

I’m excited to see where I can go to build on this research in the future.

Ready for Testers

Most of the application’s features are now implemented, and the application is stable enough to permit some users to test it.

The application is currently ready for alpha testing

If you would be interested in participating, please fill out this form by Sunday, April 29th.

An additional post is forthcoming with some additional information about the application’s current and forthcoming features.

 

Here’s a link to the full thesis:

 

Here are some excerpts from the thesis:

 

 

Behavioral psychologist Susan Weinschenk Ph.D. maintains a blog in which she discusses how psychology should influence user interfaces. In her article for UX Magazine, she lists a number of important points to understand when designing user interfaces (Weinschenk (2010)):

1. People want to do the least amount of work possible.
2. Progressive disclosure is the concept that designers should let users choose to get more details.
3. Show examples of how things can be done.
4. Make user interface components look like how they should act (e.g. knobs, sliders, etc.), based on the concept of affordance.
5. Be minimalistic with features to avoid overwhelming the user.
6. Defaults are important to allow users to spend less time configuring the appli- cation.
7. Anticipate that users will make mistakes. Make it easy to undo actions.
8. People want to know what’s coming, so give status updates (e.g. “Loading…” or “Deleting…”).
9. Use color to show items that belong together.

 

AJAX in Django with jQuery

Picking jQuery definitely seems like it was a great option.  It’s been tricky, but I’ve got some exciting progress.

As a beneficiary of the resources online, I hope this blog can become my own contribution to the online community by sharing some code snippets in case someone else in my position stumbles on this site.

How to send POST data to Django via Ajax using jQuery and read back the results.  

Note that the ‘data’ parameter in the Ajax call can be sent either as a string or as a map of values like shown.  It seems best to send the values as a map like this, since on the Django end I can then retrieve the values for each via something like request.POST[‘lastAction’].

jqXHR = $.ajax({
            type: 'POST',
            url: "/sendaction",
            data: {
                lastAction:JSON.stringify(action),
                hashOfLastModification: 'HASHHASHFROMCLIENT',
                timestampOfLastModification: Date.UTC(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours(), now.getMinutes(), now.getSeconds(), now.getMilliseconds()),
            },
            success: function(data, textStatus, jqXHR)
            {
                //Debugging
                console.log(data);                
            },
            dataType: "json"
        });

Here is the receiving end in views.py in Django:

def sendaction(request):
    if request.is_ajax() and request.method == 'POST':

        #Get the data out of the request
        actionPerformed = json.loads(request.POST['lastAction'])
        oldHash = request.POST['hashOfLastModification']
        oldTimestamp = request.POST['timestampOfLastModification']

        #Prepare the response
        response = {}

        #Debug only
        response['lastAction'] = actionPerformed
        response['actionType'] = actionPerformed['actionType']['name']
        response['hashOfLastModification'] = oldHash
        response['timestampOfLastModification'] = oldTimestamp

        #Hard-coded temporarily
        response['status'] = 'Success'
        response['newHash'] = 'HASHFROMSERVER'
        response['newTimestamp'] = time.time()        

        #Send the result back
        format = 'json'
        mimetype = 'application/javascript'        
        data = simplejson.dumps(response)
        return HttpResponse(data,mimetype)
    else:
        return HttpResponse(status=400)

Notice that:

• jQuery returns a jQuery XHR Object, but it is not possible (it seems) to get the server’s response from this object — it needs to be obtained in the success callback using the ‘data’ parameter, which is where I log it to the console in the code above.
• To deserialize the object I sent using JSON, I make the following call:

  actionPerformed = json.loads(request.POST['lastAction'])

  This loads the attributes of the original object into a Python dictionary with the keys corresponding to the fields in the original object.  It doesn’t quite make ‘actionPerformed’ a Python object in the way I had expected, but it works well using the dictionary construct.

• I construct the return data as a Python dictionary and then encode it using Django’s simplejson module.  It was, indeed, simple.

 

Structuring the Application

The toughest challenge right now is determining how to keep track of every one of the user’s changes and store them.  There’s a bit more to it than that, though.  I want to store these changes locally first, and then attempt to synchronize with the server, so the application can run off-line for a bit and then synchronize when it regains an internet connection.  Also, every action has to be undoable.

The way I intend to solve the problem is for every one of the user’s actions to create an action object which stores metadata about the action the user performed.  This object should include enough information to update the database to reflect the change and also to roll the change back by performing the reverse action.  With the code above, I’ve got it sorted out (at least somewhat) how the client will exchange this with the server.  Now I’ve got to go through the code and make every user action generate an action, and then I have to work on getting Django to read in these actions and update the database accordingly.

 

Major Update for January

Wow.  That was frustrating.  I’ve spent nearly all of December and January trying to figure out how to use Ext JS 4.  It seems like a great framework.  The demos look awesome.  The client list is impressive.  The technology seems promising.  However, the documentation is abysmal.  For that reason, I will choose to fall back on jQuery and jQuery UI for my user interface.

The problem, I guess, is that Ext JS is really meant to be used by “professionals” — those that can afford the commercial software licence and the necessary support.  I don’t doubt that Ext JS is powerful.  During the time I spent working with it, I found that I was able to do some really neat formatting with some simple set-up.  However, the learning curve is steep, and it does not seem accessible right now to someone without more background in frameworks like this and resources to get expert help.

The documentation I found online was well-written, but it was often for old versions of the software and very limited.  Whereas for jQuery I could easily look something up — either an error message or something I wanted to do — and find answers on sites like StackOverflow or other forums, the available information on Ext JS was really discouraging.  I wanted to set up drag-and-drop, and there were pretty good examples/tutorials for how to do that, but it was difficult to apply these to my situation, as there were certain design idioms that weren’t explained well.

In short, it was frustrating.  I had made good progress up to that point when I decided to start using the new framework, but since then I’d hit a brick wall and made very little progress.  It was a frustrating circle, since every time I tried to move forward I’d get frustrated and not want to work on the project and set it down for a few days.

After talking it over with a friend I decided to go back to jQuery.  So that’s where I’m at.  I know this is going to be very complicated using jQuery, as jQuery and jQuery UI are really meant (in my opinion) for adding functionality to a basic site rather than building an entire user interface around them for a sophisticated web application.  However, I’d rather face a challenge that I have some hope of overcoming than continuing to knock my head against a wall with Ext JS.  The documentation and support for jQuery is really fantastic.

Here’s what I’ve got so far.  The colors are obnoxious so I can easily tell what is what in the DOM — scaffolding, you could call it.  Right now, I’m setting up Django on the back end and laying some of the framework for what looks like it is going to be a very complicated web application.  The undo/redo feature is going to be very tricky to implement, but I look forward to the challenge.  Using HTML 5’s localStorage feature so the application can function offline and then synchronize with the server when it comes back online is also going to be a fun challenge.  Perhaps I’m making a bit of a mistake by trying to solve so many tough problems at once, but I think these are features that will be prohibitively difficult to integrate later on if I haven’t built the application to support them from the beginning.

What the cool kids are doing

The lack of posts over the summer certainly hasn’t correlated with a lack of progress on the project — just a slower rate, and fewer postworthy updates.  But, alas, it’s time to kick back into high gear.

For today, I’ll post some notes I took on some of the main competitors.

Today I stumbled on the first to-do list program that actually comes close to my idea of assigning to-do items to specific dates of action rather than dates due.  Even still, this application is not quite robust enough.  It does, however, provide some great inspiration and ideas that will greatly impact my planning.

Here they are:

TeuxDeux (www.TeuxDeux.com)

The first online tool that has a calendar-like view

Pros

• First list I’ve found to lay out to-do items by day
• Clean interface allows user to focus on tasks
• Interface is quick and easy
• The signup process was quick
• Typography is used inteligently
• It’s easy to get back to “Today” after moving ahead
• It’s easy to see which day today is
• The design expands to the width of the screen

Cons

• Poor iPad functionality
• No metadata (just titles of to-do items, no other info)
• Only 5 days shown at a time
• Completion action is clicking on items
• Cannot edit items in-line

Inspirations (not necessarily features TeuxDeux has, but things it made me consider)

• Allow users to jump forward/back in the calendar easier with multiple jump sizes and quick-jumps to certain weeks
• Deleted items should go to the bottom of the day in which they are assigned, and get grayed out
• Have a beautiful printable version of list
• Show a heatmap of the number of items per day
• When a day passes and items remain undone, move them to today (or somewhere so they don’t get lost!)
• Views for 5 and 7-day weeks
• View either by the “Due Date” on the calendar or the “Planned Date”

TaskWise (www.taskwise.com)

A corporate-feeling to-do list

Pros

• The signup process checks your responses to the form as you go from field to field
• Uses a captcha
• Hitting “Tab” creates sub-tasks, and task groups can be collapsed
• Items can be exported to Excel
• Stastistics about progress / productivity

Cons

• The color scheme is not attractive or clean
• So much clutter!
• Icons on top right are hard to understand & use
• Looks very corporate — not very fun & friendly

Tadalist (www.tadalist.com)

A no-frills to-do list

Pros

• Each person gets a personal url (http://yourname.tadalist.com)
• Examples are provided for each field (‘e.g. “Get Milk”‘)
• Fields give requests, not field names (“Name your new list” rather than “list name”)
• Nice, non-obtrusive animation when tasks are completed (jump to bottom of list and fade)
• Ability to undelete items easily

Cons

• Rordering requires changing into “reorder” mode

Inspiration (once again, not directly related to Tadalist, but it hit me while testing it)

• After a user completes an action, confirm it at the top and show a keyboard shortcut that does the same thing

Mockup Modified

Here's today's improvements on the mockup

Today, I gave the first mockup another go.  Here are some highlights:

• Added time and date at top
• Added day numbers to days of the week, plus a way to change weeks
• Specified items in “Info” tab for item
• Added a “Reminder” tab to modify reminders for each item
• Moved the “Complete” bin to the right column so it can be a permanent place even as the main section changes from week to month views
• Added some more links and UI features

That’s all for now!

Starting to Mockup a Design

Here's an early concept of what the web app could look like

On a quest to find cool apps to download for helping with the project, I came across an excellent tool for mocking up the site design and, eventually, the iOS app.  It’s called iMockup, and it allows for a very natural and powerful creative experience.  Highly recommended!

In the mockup at right, notice the early concept of what the app could look like.  I have yet to do the serious research into exactly what type of UI makes the most sense to the user, but this is my first hypothesis / concept of what could work.

I’m going for a minimalist design, with the most emphasis on the ToDo board itself and less emphasis on the control surface — links, and buttons, and such.

Right now, I’m considering three possible views for the web application.  The one pictured at right is the “Week View” — it would show all 7 days, plus two long-term categories and the “completed” bucket.  The “Month View” — not pictured — could show a table listing all of the days in a month with the long-term and complete bins on the left.  The Month View would be ideally suited to dragging items from the long-term bin and distributing them on the days of the month.  The final view, the “Overall View,” will be slightly different from those above.  It might consist of a prominent display of today’s ToDos with a scrollable listing of upcoming dates in a column at left or right.

Hello world!

Welcome to my thesis blog!  I’ll be keeping up this blog with progress on my senior thesis, in fulfillment of my requirements as a student at Princeton University in the Department of Operations Research and Financial Engineering.  My adviser is Professor Alain Kornhauser.

The physical version of what I'll digitally create

What is TDLoo?  It’s a new, useful way of organizing todos.  The thing is, most todo lists require you to list things in one dimension — from top to bottom.  Others, like Remember The Milk, provide ways to prioritize and split your todos up into multiple lists.  But the model is still stuck in the 1990s.  A 21st century todo list ought to comply with the UI idioms we’ve come to expect — namely, drag and drop.  Further, the visual representation of each todo should give much more information about what it represents than just the name and due date.

Consider the image at right, a physical version of what I hope to replicate.  The concept is relatively simple: organize todos based on the date you hope to accomplish them.  Most todo lists out there allow setting a due date, but that’s not helpful — my thesis may be due in April, but I sure as heck don’t want to find out about it on the date it’s due!  Instead, the concept behind TDLoo is that todos need to be assigned to the days they are to be accomplished.

Also, notice the cup in the upper-right side of the image?  That’s the “accomplished’ cup — any todos completed get to be dropped into the cup.  It’s a great feeling ripping todos off the board and stuffing them in the cup.  It’s a shame no digital version can provide that degree of tactile satisfaction associated with marking off a todo item (it’s a lot better than just checking off a box!), but I’ll do my best to make it a rewarding UI experience.

In the end, I hope to make organizing todos not just intuitively simple and practically usable but also enjoyable.  You’ve got enough work to do.  Organizing your work shouldn’t itself be work.  It should be like a game.

So here are some keywords and ideas I’m thinking about right now:

• Drag-and-drop
• Intelligent connection to email clients for parsing todos
• iPad application
• Web application
• JQuery
• JQuery UI
• AJAX
• Cloud-syncing
• Syncing with other todo services?
• Reminder emails & texts

An early, semi-working proof of concept

For now, check out this semi-working prototype pictured at right.  I’ve also dropped the code I’ve got right now onto my webspace, so check it out:
http://webscript.princeton.edu/~yaro/tdloo/preview01

It allows you to drag the todos around using a combination of JQuery UI features.  Note, however, that nothing is saved outside of the browser.  So if you reload the page, you lose the data.  But at least it’s a start. The general concept of moving around todo items

I just purchased my iOS developer license and will be downloading XCode soon.  Also, of course, just set up this blog after purchasing TDLoo.com.  Next steps include setting up a server for TDLoo — probably going to rent a slice from SliceHost since I’ve had a positive experience using their hosting in the past — and setting it up with some of the software I need (Django, I’m looking at you!).  More to come after finals are over.