NOV
2
2008

Path to perfection... ( a plea for feedback )

“Perfection is reached not when there’s nothing left to add, but when there’s nothing left to remove.” - Antoine de St. Exupery

I have been frustrated with the UI of Flo now for the past week. As mindmaps grow larger, I keep feeling the UI get crowded. Now maybe there is nothing that can be done to fix this. I don't know, but I wonder what you in the audience think. I feel my input is now rendered useless because after 2 years I am so trained on how it works I don't notice the UI braindamages.

So can anyone provide me with mockups of a cleaner interface? What would you remove from the toolbar and hide in a menu? What would you do with that "Property" editor on the lower right hand corner? Is it better served as a floating dialog? Is the title editor better served as an in-line editor on the mind map? Or should it be on a dashboard of the main UI. Should the top toolbar be smaller?

Also for any of you who are interested I have subversion opened at: http://svn.geiseri.com/svn/projects/flo. You will need at least Qt 4.3, perl and HunSpell's development libraries installed. On windows I have included HunSpell.

Comments

I left a comment on the previous post, but for some reason I don't see it.. Maybe I forgot to hit submit...

Anyway, I think Flo looks pretty cool, and I'm certainly going to have a look at your spellchecking code, since I never succeeded in getting that going on windows for myself. I'm also impressed with the organization of your code.

Couple things I found playing with Flo.. (checkout from a couple days ago)..

- On start, the recent documents dialog comes up even though there are no recent files.
- Create an idea, and a couple connected ones, then assign an emblem to that idea, then zoom in on it. Selecting and deselecting the main idea will shift the emblem and connected notes, all the updates make selecting/deselecting sluggish.
- The first button in the spell checking dialog says "Repace"
- No context menu on ideas (should contain stuff like "add child" etc)
- Double clicking adds a child, but double right-clicking does as well
- Ctrl+Mousewheel should zoom.
- Dragging ideas and selection rectangle on the checkered area outside the page messes up the drawing
- If you enable "Show paint" either in Kwin or qt (Flush paint or whatever) it will help to optimize painting. There are still some instances where dragging notes repaints way more than necessary resulting in slowdowns.
- I'm not sure where your performance problem is, but moving more than one item at a time is a lot slower than moving just one (even when they're not connected). I have a very similar program that is much faster in this case. Worth a look
- I don't really like the property editor panel. It takes a lot of space, and it's not obviously connected to the selected item. I would make the name editable inline, and the other properties editable with some sort of popout from the idea itself and get rid of the whole dialog.
- It's not obvious how to attach an idea again after it has been disconnected (with the reparent action in the toolbar). Oops, just figured that out. Maybe some instructions in the status bar?
- How do I add multiple pages? I don't really understand your page system. There is one page, whose size is specified in pixels, but I can't figure out how to add new ones. The way I did it was to specify pages in page sizes (like US Letter, A4, etc) and then whenever you drag a box outside of the page, it adds another page automatically underneath the box. So you get automatic print-preview (since it should print as displayed on the screen) and don't have to worry about managing pages. Of course if the target is not print, then pages have no meaning and might as well be an unlimited canvas.
- The save confirmation dialog is different than most apps.. I would suggest something like "The document hasn't been saved. Do you want to save the changes? Save | Discard | Cancel). Yes/No dialogs are being phased out in most places.

Anyway.. Just some things I came across. Like I said, it looks very promising!


By leos at Sun, 11/02/2008 - 17:30

> - On start, the recent documents dialog comes up even though there are no recent files.
Yeah I need to make this start screen more useful. Since 99% of my mindmaps are new or ones that are in progress for me the list is quite full :)

> - Create an idea, and a couple connected ones, then assign an emblem to that idea, then zoom in on it. Selecting and deselecting the main idea will shift the emblem and connected notes, all the updates make selecting/deselecting sluggish.
That is strange indeed.

> - The first button in the spell checking dialog says "Repace"
There is a reason why spellchecking was the second feature i introduced after i could type on shapes :)

> - No context menu on ideas (should contain stuff like "add child" etc)
Okay good call, I introduced a context menu with the block operations on them.

> - Double clicking adds a child, but double right-clicking does as well
I think double clicking should edit inline, (see below) Double right clicking should do nothing, its just shoddy programming.

> - Ctrl+Mousewheel should zoom.
Ohh good idea!

> - Dragging ideas and selection rectangle on the checkered area outside the page messes up the drawing
I have just learned to live with this but it is annoying. ( see below )

> - If you enable "Show paint" either in Kwin or qt (Flush paint or whatever) it will help to optimize painting. There are still some instances where dragging notes repaints way more than necessary resulting in slowdowns.
Can you elaborate on this some more please. I have some performace problems I am still trying to tackle.

> - I'm not sure where your performance problem is, but moving more than one item at a time is a lot slower than moving just one (even when they're not connected). I have a very similar program that is much faster in this case. Worth a look
I am wondering if its not the redo/undo stuff... but I am at a loss as how to profile it.

> - I don't really like the property editor panel. It takes a lot of space, and it's not obviously connected to the selected item. I would make the name editable inline, and the other properties editable with some sort of popout from the idea itself and get rid of the whole dialog.
Yeah that makes more sense now that I think about it. Its amazing how you grow used to pain after a while. I am going to make the title editor inline, and the properties edit via a popout dialog.

> - It's not obvious how to attach an idea again after it has been disconnected (with the reparent action in the toolbar). Oops, just figured that out. Maybe some instructions in the status bar?
Im not sure I follow you there. Could you maybe send a screenshot or a video of the operation you are doing? I think you did something I did not intend ;)

> - How do I add multiple pages? I don't really understand your page system. There is one page, whose size is specified in pixels, but I can't figure out how to add new ones. The way I did it was to specify pages in page sizes (like US Letter, A4, etc) and then whenever you drag a box outside of the page, it adds another page automatically underneath the box. So you get automatic print-preview (since it should print as displayed on the screen) and don't have to worry about managing pages. Of course if the target is not print, then pages have no meaning and might as well be an unlimited canvas.
This is vestigial and should go away. The canvas should really be unlimited. At one point I had this idea that I wanted a paper ready mindmap, but that is not how i use it any more.

> - The save confirmation dialog is different than most apps.. I would suggest something like "The document hasn't been saved. Do you want to save the changes? Save | Discard | Cancel). Yes/No dialogs are being phased out in most places.
I think I am using Qt for this, I will have to check.

Thanks a TON for the feedback!! I will try to see if I can address more of these soon.


By Ian Reinhart Geiser at Mon, 11/03/2008 - 03:20

>> - If you enable "Show paint" either in Kwin or qt (Flush paint or whatever) it will help to optimize painting. There are still some instances where dragging notes repaints way more than necessary resulting in slowdowns.
> Can you elaborate on this some more please. I have some performace problems I am still trying to tackle.

Well, in case you are running KDE4 with kwin+desktop effects, there is an effect called "Show paint" which shows you what kwin is refresshing on the screen. It doesn't coincide 100% with what the app is requesting to repaint, but it's pretty close. Then you can drag around a note and see how the updates are drawn to the screen. Most of the time it's just a rectangle around the moving box, but sometimes the repaint will be quite a large area... There is some environment variable you can set which makes Qt draw a yellow rectangle before painting which is more accurate, but I forgot the name of the variable...

>> - I'm not sure where your performance problem is, but moving more than one item at a time is a lot slower than moving just one (even when they're not connected). I have a very similar program that is much faster in this case. Worth a look
>I am wondering if its not the redo/undo stuff... but I am at a loss as how to profile it.

I haven't looked too closely at your code.. Do you create an undo command at every move or just when the move is complete? I just made my items emit a moveFinished signal on mouseRelease after moving, so a MoveCommand only gets created once..

>> - It's not obvious how to attach an idea again after it has been disconnected (with the reparent action in the toolbar). Oops, just figured that out. Maybe some instructions in the status bar?
>Im not sure I follow you there. Could you maybe send a screenshot or a video of the operation you are doing? I think you did something I did not intend Eye-wink

I just pressed the reparent button on the toolbar, then clicked a note. It was disconnected from its parent and I couldn't figure out how to reparent it. Then I figured out that I had to click and drag to the new parent.. It seems obvious now, but it took me a bit to figure out.

> This is vestigial and should go away. The canvas should really be unlimited. At one point I had this idea that I wanted a paper ready mindmap, but that is not how i use it any more.

Ah ok. Cool.

I'm messing with your spell checking code right now... Trying to add a context menu for the misspelled word so you don't need to bring up the dialog. Its a neat app.


By leos at Mon, 11/03/2008 - 05:24

Aha! QT_FLUSH_PAINT=1 ./myapp


By leos at Mon, 11/03/2008 - 05:25

Spell checking context menu.. Probably pretty crude, but it works... This is in my own app, but it should be pretty much identical for your use, especially if you move to inline editing. Still needs some options like add, ignore word.

void NoteText::contextMenuEvent(QGraphicsSceneContextMenuEvent* event) {
qDebug() << "context menu event "<documentLayout()->hitTest(event->pos(), Qt::FuzzyHit);
QTextCursor c = textCursor();
int cursorPosition = document()->documentLayout()->hitTest(event->pos(), Qt::FuzzyHit);
c.setPosition(cursorPosition);
c.select(QTextCursor::WordUnderCursor);
qDebug() << "selected text:" << c.selectedText();
QString misspelledWord = c.selectedText();
if(!misspelledWord.isEmpty() && !spellingHighlighter->getSpellChecker()->checkWord(misspelledWord)) {
QStringList words = spellingHighlighter->getSpellChecker()->getSuggestions(misspelledWord);
QMenu *menu = new QMenu();
menu->addSeparator();
foreach(QString word, words) {
QAction* a = new QAction(word, menu);
a->setData(cursorPosition);
menu->addAction(a);
}
connect(menu, SIGNAL(triggered(QAction*)), this, SLOT(onSpellingActionTriggered(QAction*)));
menu->exec(event->screenPos());
delete menu;
}
else
QGraphicsTextItem::contextMenuEvent(event);
}

void NoteText::onSpellingActionTriggered(QAction* act) {
QTextCursor c = textCursor();
c.setPosition(act->data().toInt());
c.select(QTextCursor::WordUnderCursor);
c.insertText(act->text());
setTextCursor(c);
}


By leos at Mon, 11/03/2008 - 06:02

>> - I'm not sure where your performance problem is, but moving more than one item at a time is a lot slower than moving just one (even when they're not connected). I have a very similar program that is much faster in this case. Worth a look
>I am wondering if its not the redo/undo stuff... but I am at a loss as how to profile it.
I haven't looked too closely at your code.. Do you create an undo command at every move or just when the move is complete? I just made my items emit a moveFinished signal on mouseRelease after moving, so a MoveCommand only gets created once..

I create one per move. This might be the problem, since looking at the code I am doing 1 undo/redo per shape per move... this could add up big time. I will see if I cant go on a move finished signal.


By Ian Reinhart Geiser at Mon, 11/03/2008 - 10:34

I haven't had a chance to try it out yet, but here are my ideas anyway. These are things I thought about for a mind map program some months ago.

1. Ideas should be in-line editable, in fact anything displayed should be.
2. Mousewheel should zoom in and out. The zoom should be centered on the mouse's cursor. I think marble does this. Holding down ctrl isn't necessary.
3. Certain zoom levels should remove detail. ie. zoom out enough, and the ideas with no children get hidden. All the way to a full zoom out showing only root ideas.
4. The align buttons should be put into a menu, or optional toolbar.

5. Toolbars should be use-based. One for editing content, one for navigating, one for finished format work, one for printing/whatever. It seems like you've got that set up already, but I'd only show the editing and navigating by default.

I'm going to try your program out when I've got time this week.


By soap at Sun, 11/02/2008 - 18:35

>> 2. Mousewheel should zoom in and out. The zoom should be centered on the mouse's cursor. I think marble does this. Holding down ctrl isn't necessary.

Mousewheel on its own scrolls the view, and does so in just about every app. Hijacking this default behaviour is not so good. Better to require a modifier (and Ctrl+Mousewheel is zoom in Firefox and Dolphin, so it has some precedent.


By leos at Sun, 11/02/2008 - 19:36

There are also many apps that use unmodified mousewheel for zooming: Inkscape, AutoCAD (and most CAD programs), and Marble for starters. Their content is arguably more similar to Flo than a webbrowser.

It doesn't make sense to force a convention for reading linear information onto a program for non-linear information.

With smooth zooming, the behaviour is also clear to users. It's also a much more efficient way to navigate such documents, so we should make it primary behaviour in order to make it more discoverable.

Update: Google Maps also uses mousewheel for zoom. I think that's a big enough wide-spread app to make my point.


By soap at Mon, 11/03/2008 - 00:46

it looks like inkscape does the scroll button for panning and ctrl+scroll for zoom. I have not used autocad since before scroll wheels so i cannot say there.

needless to say zoom via the scroll wheel would allow me to remove the zoom slider on the status bar at the bottom.


By Ian Reinhart Geiser at Mon, 11/03/2008 - 03:05

Pages