Very neat. Lots of potential! If I can give some UI feedback (from my perspective, of course!):
* The Plus buttons are a bit confusing. It says down the bottom to press "enter" to put in a new task, I added some notes, then clicked outside of the textarea field... then I pressed enter... yes, silly I know, but easy to make this mistake. Then I realised that the + inside the task creates a new task!
* Can't remove multiple tasks in one go - the popup makes this frustrating.
* the <-> is not working. Test case: add two new tasks to a project. I can't move the bottom one above the top one for some reason - it seems to move all the tasks/projects up and down...
* Add a new task - in the task tab, the textarea box is quite small. Click on another task, then go back to the newly created task - the textarea is the right size.
* If you click on add project, it is excellent that you have it says "Enter a project", but a suggestion is to not provide focus in the text area - the next time you click in there it clears the warning.
* If you add a subtask, then make increase the task size but move it outside of the window, then without releasing the mouse button drag it above the task, then some odd javascript loop starts occuring and my browser (Firefox 11) freezes until it asks me to stop the script.
* What do the checkboxes do?
* What does the text in the very left hand panel signify? Seems to be projects? I seem to be getting old ones appearing... duplicates sometimes.
* Why a seperate mobile view? You could use CSS media queries to achieve the same functionality.
* Is there any reason why there is a script tag after the end </html> tag?
* Can you split the js out of the page and into their own files?
Really like the hierarchy, my only problem is it would be another app on top of existing ones that already sync quite well and are fully mobile (i.e. g-tasks).
I completely love it, oh my god! I was looking for something like this to plan out my revision timetable for my A-levels, this seems like the perfect tool to use. Not only that, but it seems like an awesome tool to keep me motivated. I really like that "task completed" section!
Very nice. Sleek and easy UI. I designed a to-do list a long time ago. 4 years, 3 developers, and $2,000 later the 2.0 version still hasn't launched. I learned a lot.
My recommendation is that deleting tasks needs to be a little easier. I hate those "are you sure" dialog boxes but on the other hand you don't want users accidentally deleting things. So do this: Make the user "double click" on the trash can icon to delete a task. That solves the problem elegantly.
There's 2 glitches. When I added projects then deleted the projects, their names still show up on the very left most panel. When I click their names nothing happens and I can't get rid of them. I had to refresh the page to get rid of them. When I click on mobile and then click the back button I get a red error message saying "Error saving to server. Check Connection."
In Firefox 11 for Windows 7 when you click the task boxes (which highlight blue) underneath the project's name the boxes change height slightly which is really awkward behavior. Setting overflow:hidden on the elements seems to fix it very nicely.
Color wise I wish it wasn't so grey. Too much grey can make a page look too cloudy and gloomy. Lighten things up a bit.
In the right panel, the tabs [Schedule | Charts | Help | Task]. Change "Task" to "notes". Otherwise it's confusing. And make the help tab the last one and the Notes tab (Task tab) either the 1st or the 2nd tab. The font-size used for them is also too big, use a font-size that's 95% of their current size. Also the tabs need some room to breathe, give the #tabs ul a padding:0 0 0 4px;. Also give #tabs ul li a padding:5px 8px 4px 8px;
Also you should show order and priority. There are 3 main panels. The left (project names) the middle (task list), and the right (schedule, charts, help, task/notes). In your css make the following changes: In #content #rightContainer get rid of the border-left, and add box-shadow:-1px 0 2px #666; and in #content #leftContainer get rid of the border-right and add box-shadow:-1px 0 2px #666 inset; It'll look much better because now it gives the app a slight 3D layered look. You could also do it in the opposite way (giving #leftContainer a box-shadow:1px 0 2px #666;) to emphasize the left panel first (which I think is more visually correct). It's just a little harder to do it this way because you'll have to create an inset box shadow for the right panel but because it uses tabs (with different divs on top) the inset box shadow doesn't show up unless you give ALL of the divs inside of it a box-shadow:1px 0 2px #666 inset; as well.
The button-links up at the very top (Sign up, Sign in, Feedback/help, mobile) should NOT be buttons but instead just links that are underlined. Get rid of the single "sign up" link and instead change "Sign up to save your tasks" to "Sign Up to change your tasks, it's free." and make the "Sign Up" part an underlined link. Change "sign in" to "Log In". And change "header nav's" padding to padding:2px 10px 0 0;
Since my comment (parent) is being downvoted, I will elaborate. In the situation under discussion (deletion of a to-do item) a deletion will never free up a significant amount of any resource (e.g., memory). In those cases, it is pretty obvious to me that keeping the data and metadata of the to-do item around so that the user can undelete it is better than popping up an alert.
It got downvoted because HackerNews isn't like Reddit where you comment for the purpose of just speaking your opinion. I learned this the hard way a few times. Unless your comment contributes something to the conversation it's just noise.
A rule of thumb is basically: Unless you have something important to add don't add anything, otherwise it's just more mediocre comments to sort through. That's why HN has good comments and less noise. Whereas at Reddit and forums and comment systems on other sites, everyone and their grandmother chimes in. Creating a monstrous wall of "thank you"s, "neat", "I agree"s and other babble.
About deletion: How about clicking the trashcan deletes it, but leaves it in the list grayed out? The trashcan icon then turns into an undo icon, which puts it right back in the list.
The item will be permanently deleted on page reload, or perhaps after a timeout.
my vote goes to time-out.
What I would do is convey that visually: have the task fade out slooooowly, as it reaches invisible state, it's actually deleted, until then, the undo-link is available. (Which probably should not fade out)
I find all three of the buttons slow and clunky. For a while I didn't have a delete button because using shift+backspace is so much faster. Same goes for the other two buttons.
I like "task" more than "notes" because I plan to add more things than just notes to that panel.
* The Plus buttons are a bit confusing. It says down the bottom to press "enter" to put in a new task, I added some notes, then clicked outside of the textarea field... then I pressed enter... yes, silly I know, but easy to make this mistake. Then I realised that the + inside the task creates a new task!
* Can't remove multiple tasks in one go - the popup makes this frustrating.
* the <-> is not working. Test case: add two new tasks to a project. I can't move the bottom one above the top one for some reason - it seems to move all the tasks/projects up and down...
* Add a new task - in the task tab, the textarea box is quite small. Click on another task, then go back to the newly created task - the textarea is the right size.
* If you click on add project, it is excellent that you have it says "Enter a project", but a suggestion is to not provide focus in the text area - the next time you click in there it clears the warning.
* If you add a subtask, then make increase the task size but move it outside of the window, then without releasing the mouse button drag it above the task, then some odd javascript loop starts occuring and my browser (Firefox 11) freezes until it asks me to stop the script.
* What do the checkboxes do?
* What does the text in the very left hand panel signify? Seems to be projects? I seem to be getting old ones appearing... duplicates sometimes.
* Why a seperate mobile view? You could use CSS media queries to achieve the same functionality.
* Is there any reason why there is a script tag after the end </html> tag?
* Can you split the js out of the page and into their own files?
Please take this as constructive feedback :-)