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 only tested by opening inkscape on my system and mousewheeling. Guess I changed that setting on my system (it's in preferences under "scrolling").

I apologize; I sounded harsher than I meant to, since I really like mousewheel zoom. I used to be a CAD technician, so I got really used to it for drawing programs, and then it was hidden from me in so many other programs.

Skipping the whole "this program does it this way", and "I'm more comfortable with this". My argument for mousewheel zoom as default is as follows:

Vertical scrolling has become a convention for good reason: Most commonly used apps focus on text and lists. Webpages are read top to bottom, reports are top to bottom, pretty much all text is top to bottom. Most tables are top to bottom too, or left to right, rarely diagonal. This is what I mean by linear information - especially the text - things that are processed (read or written) in one dimension (up/down).

However, there are other documents and information formats that aren't linear. Things like pictures, maps, and mind-maps fall into this category. In these cases, a one-dimensional scroll makes little sense. Vertical scroll is particularly bad for mind maps, because most of those spread horizontally (at least in my experience). Two-dimensional scroll is showing up on mice now, which does improve things somewhat.

Unfortunately, Two-dimensional scroll still doesn't fully address how we process this type of information. One of the advantages of graphical representations is to provide an overview of the structure. For example, you're looking at a mind map, and can see all the ideas and how they relate. If there's one idea to focus on, you "zoom in" on it. Now, if you want to look at a sibling of that idea, you can either stay zoomed in, and blindly look around, or you can quickly zoom out, see all the siblings, and zoom in on the one you want.

Of course, zooming doesn't rule out the need for moving around in a detailed view (like when the entire idea doesn't fit). That's what panning is for. AutoCAD and the way I have inkscape set up have you hold down the middle button, and move the mouse. Google maps has you hold down the left (primary) mouse button and move the mouse.

So, here's the mouse mapping I would suggest:
Primary button: interaction with objects (selection, move, resize, etc.)
Secondary button: Context menus
Mousewheel: zoom
Middle button (mousewheel button): pan
ctrl+mousewheel: scroll

Zoom, scroll and pan should also be available as tools somewhere, for people that don't have a 3-button mouse with wheel available.

Sorry for the long wordy post.


By soap at Wed, 11/05/2008 - 05:31

Hi Ian,

I felt inspired by your work, so I created some mockups, that came to my mind, when I saw Flo. (Sorry I didn't pay enough attention while exporting them, so they contain a rather large amount of nothingness around them.) The nothingness inside them is intentional :-) Some ideas have also already been mentioned by others.

I'd use the start screen, the empty canvas to display some useful information like rudimentary usage instructions or a tip of the day or a list of recent documents.

Canvas_1

Ideas can be added by doubleclicking the canvas and can be edited by doubleclicking the idea itself. In edit mode the node is zoomed in to reveal all its properties.

Canvas_4

They are aligned by snapping to an invisible grid, that is infered from the position of other nodes. I think kivio already has something like this.

Canvas_3

Just some quick ideas, but perhaps some can be useful.

michael


By michaelrudolph at Sun, 11/02/2008 - 19:46

can you tell me how you did the blue shapes? you have me thinking, i will have to update my codefu a bit for the eyecandy though.


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

Hi Ian,

I used OmniGraffle on the Mac to do this. My thinkpad's display and therefore my whole OSS machine is broken right now. I'll tell you how I would have done it with open source tools in inkscape.

First you create a rectangle and alter its corner radius (Rx and Ry) to get the rounded corners. Then you set the rectangle's fill & stroke. I used a grey stroke, which I'm not sure is the best choice, but for a wireframe is definitely alright. For the rectangle's fill you choose a bilinear gradient; that's gradient and in the "Repeat" combobox the value "reflected". Then you "Edit..." the gradient, which allows you to change its colors. I like to work with hue, saturation and lightness (HSL), for the blue shapes I used a nice blue that I liked as one stop (gradient end point) and altered the lightness for the other stop. Once you have the colors right, you use the "create and edit gradient"-tool (ctrl-F1) to manipulate the gradient on canvas. To do this you drag the endpoints in the position you like. If you hold down the ctrl key while dragging the nodes snap to an invisble grid, which allows you to work with the necessary precision. Drag the darker color's handle into the middle and the other handle 90 degrees upward or downward. Adjust the length to you liking.

That's it. I hope that was what you were asking for. Just ask some more, if you were indeed looking for drawing instructions, this protocol was sure a bit on the short side.

michael


By michaelrudolph at Mon, 11/03/2008 - 10:56

I googled but cannot figure out exactly what is flo. Where is the project's homepage? I see that you use Hspell, is this an Israeli project?


By dotancohen at Mon, 11/03/2008 - 09:46

Right now I lack a home page, the closest I have right now is the subversion and an outdated wiki page on my projects wiki. See http://www.kdedevelopers.org/node/3727 for more of an introduction.


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

Hspell as for hunspell, an improved replacement for myspell.


By reynaldo at Mon, 11/03/2008 - 13:46

Uh, no, hspell and hunspell are 2 completely different projects. It looks like hunspell is what is actually meant here, so the blog text should be fixed to say so!

By the way, while hunspell is a good choice, it would be much better to just use Sonnet which can use hunspell or just about any other spellchecker out there. It's sad to see projects reinventing the wheel over and over again just to avoid depending on kdelibs, something which isn't even useful anymore now that KDE 4 is cross-platform.


By Kevin Kofler at Tue, 11/04/2008 - 07:06

i corrected the post.

as for reinventing the wheel yes its sad, but KDE is way too heavy for just a spell checker. KDE is not as cross platform as advertised, imho. now if the trolls put a spellchecking lib into Qt that would be optimum.


By Ian Reinhart Geiser at Tue, 11/04/2008 - 12:46

Pages