A KISS Desktop UI Implemented in JavaFX

Some minor, probably not very impressive ideas, came to my mind the last weeks to adapt the common desktop UI experience to my needs. If you like those ideas then sorry, this was not indented.

I am not familiar with Apples OS which are known to provide good UI and could have already implemented my ideas. If this happens this post is only here to show some effects and components implemented in JavaFX. Note that I am not a specialist for a good looking UI! I never read any UI guidelines, even not before this post and I am not proud of that. For specialists refer to Kirill Grouchnikov (-> pushing-pixels), Joshua Marinacci (-> blog), Jonathan Giles (-> blog), …

More Intuitve Items to Log-Off

The first change is to show all the possible log-off possibilities with more intuitive icons and not only in raw text. The user should be able to determine the right thing faster (on mouse over or click a description could pop up)

In clockwise direction or from left to right:

  1. lock screen
  2. user log out
  3. restart
  4. save to disc
  5. save to RAM
  6. and the last one: shutdown.

Some of the icons were taken from the great amarok player some were backed by my crude designer heart.

Tags instead Menu

Another idea was that the normal application menu is somewhat complicated to use. Even in Vista/Win7 or Kde 4 you need to browse through the menu if you don’t know the name of the application, although I had to admit that I really like the search functionality in Vista/Win7 (BTW that was the only thing I liked about Vista). The point is that the menu items should be clickable and then filter the application list on the right side. So the menu items behave like tags:

… select ‘Internet’ and ‘Office’ to find my email client:

The textbox can be used to further filter the applications by name:

Taskbar == Application Chooser

The next idea is a taskbar which is at the same time the application chooser which is normally triggered from ALT+TAB. So instead of the known taskbar (here kde):

and the application chooser (gnome/kde):

I want to have only one unified bar to keep things simple (see KISS). In the first try I though I will put the unified taskbar on the bottom like it is normally done with the ordinary taskbar:

– first try of unified taskbar –

In this example I used some images to fake application content. The images were taken from a JavaFX example.

The window switching and menu-pop-up is triggered from a simple ‘mouse over’ not from a time consuming mouse click. Or sometimes I prefer keyboard then I can use ALT + LEFT/RIGHT. Now the desktop is like I wanted it, but what should be shown when I close all apps? And there is a lot of unused space between the last icon and the log-off menu which is ugly. But moving this menu to the left could cause a lot of trouble for the user. Then one solution could be to move it where it does not fit: into the finder or apps menu (like some OS vendors did).

Second Try With Desktop Ground

So we need to introduce the desktop ground as a special window available from the taskbar to make things even more simple. All the ‘starter’-icons from the Apps-menu then will go onto our dockable desktop ground. Even the finder-menu and the log-off menu will be there as docked apps which can be arranged like the user wants it. The idea of ‘docks’ is stolen from my current window manager called Window Maker. Of course those docks could be used to display weather, stocks, tweets, ….

To further improve the experience for me as a developer I will put the unified taskbar in the center of the screen. OMG, what? Yes, this bar is only displayed on e.g. ubuntu key (at the moment this is implemented with the ALT key instead). I guess, this is the point where UI experts would like to hit me, but I think this is a good solution – at least for me, because:

  1. It is simple
  2. The average distance from any point to the center is less than to the bottom of the screen, so we have faster acces to any of the current running applications.
  3. We save pixels because our taskbar is not omnipresent

So here a screenshot of this centered unified taskbar:

– second try of unified taskbar –

Always Fullscreen

We even could go further to avoid bars on the top of each application window. To close an application we could put a small ‘close’-icon (like it is the case for tabs for your browser) on each preview image of the unified taskbar. So the applications could then be always full screen like it is the case for mobile devices. Hmmh, but then we cannot see two apps at the same time!? For that we could implement resizing applications in the unified taskbar via mouse scroll and dragging via ubuntu key+mouse dragging. Now the desktop has two states:

  • Editing mode, where the taskbar is shown and application windows (except the desktop) could be closed, resized, moved and we can switch applications
  • Application mode, where normally only one application is visible in full screen

So now look at the applications’ desktop where each of the docks (two icon docks, the find-menu dock and the log-off dock) could be dragged around to suit your needs:

– final version –

Click here to start the webstart version.

The things which are currently not implemented in the JavaFX application:

  • Closing, resizing and dragging of application windows
  • If the user hits ENTER in the find-menu dock it should start that command and if this command does not exist it will start a desktop search
  • ALT+TAB does not work with JavaFX so I had to use ALT+LEFT and ALT+RIGHT
  • The current time could be displayed instead of an icon for the desktop

Conclusion

I would really like to see some of my UI ideas in Kde or Gnome. I think those ideas are simplifications and usage boosts and not only eye catchers in my humble opinion. Like the most UI ‘improvements’ were in the last time … keyword: compiz.

Update: The following projects comes really close to that what I had in mind:

And are there developers of JavaFX out there who read this?

Then first of all: Thanks a lot for JavaFX!

And secondly:

  • Why do I need a compiler for JavaFX?? I would really like to ‘press F5′ and see my minor layout changes or see my minor code changes. This is not a nice to have. This is a must-have, I think. This should be possible!
  • The language reference should be improved with examples otherwise it is senseless to the intented audience: developers and UI designers. And I couldn’t found the for loop!? Only the for expression … strange.
  • The toolkits (ie. NetBeans) need further, if not a lot, work . These words are a bit harsh, I know, but I am a fastidious Java developer and know how well IDEs could work.
    First of all the most pain is the debugger. I know how well this works for Java, but I only needed the content of my variable at a specific moment, but NetBeans wasn’t able to show this, although it shows the content of ‘native’ objects like Rectangle:

    So I needed to use println(“{item}”)
  • Unit tests should be as easy as for normal Java projects
  • Other anoying bugs occured: if you format e.g. the sourcecode of AppItem where some brackets (of a function) will move one column to the right on each format call. The same appears for e.g. ‘public-read var width;’ where the semicolon moves to the right, too. Problems while operating within strings and variables in the string. The code completion is case insensitive :-/ The “if else” construct is not that nicely formated if you don’t specifythe brackets. There was no javadocs for ‘native’ javaclasses. There are no boolean operations for sequence like ‘and’, ‘or’, …. which would be nice to have.

So that’s a too lengthy list, but to be honest: while working with JavaFX I had fun! Try it out!

Resources

Clone the latest and greatest status of the project here:

hg clone http://timefinder.hg.sourceforge.net:8000/hgroot/timefinder/desktopbar/

(source code is under public domain but the pics shouldn’t be reused)

or try it out now

About these ads

7 thoughts on “A KISS Desktop UI Implemented in JavaFX

  1. Nice post! I’d like to place some critisism though.

    “The window switching and menu-pop-up is triggered from a simple ‘mouse over’ not from a time consuming mouse click.”
    To be honest: I don’t like that idea. Everytime I wanted to move the mouse out of the way and hit an application icon and did the switch by accident, it pissed me off. Just like I am by applications stealing the focus, everytime I’m writing something, because their programmer thought his program was so friggin important that my cursor has to be there for every move it makes: “Wow! Look: I have successfully brought up a login screen and you want to use this textfield now, no matter if there’s someone in a hurry asking you something on Jabber, I’m stealing the focus if you don’t mind.” (Yes I do!) The benefit of not having to click is far outweighed by the annoyance of always taking care about your mouse pointer’s position.

    The taskbar as application chooser is an idea I don’t like either. The Macintosh’s dock is something like that and all it does is either get in the way if your mouse gets near the lower end of the screen (same problem as described above) or if you don’t auto-hide it, it just takes a masive amount of screen estate, which is especially painful on 16:4 displays. Opera, and I’m a big fan of this browser, has the ability to enlarge the tab-bar so it shows little versions of the tab’s websites. I used that for a week or so and that chose to use the normal text-tabs again. Reason: It took too much screen estate. If you’re having one of these 16:4 displays and run out of vertical screen estate, you may argue that you could place the icons on the side of the screen but then you’re quickly running out of space if you have many applications open at the same time and as soon as you need two rows you cannot simply bang your mouse on the border and click, you need to be more accurate and that takes time, according to Fitt’s law depending on the size of the target and its distance to the mouse pointer. It also seems next to impossible to auto-switch to the application on the border with a mouse over because you had to cross the row infront of it, so you would always switch back if you left the icon to place the mouse on a textfield, button or similar.
    One mouseclick to switch solves all those problems and gives more freedom.

    As for the switch between fullscreen and edit mode: it reminds me of vi, which is not an editor but the programmer’s revenge on the user, because you’re constantly switching modes using ESC and you’re virtually always in the wrong one. The only time where I want a real full screen mode on my desktop, is when I’m watching a movie. In any other case I want to have either information if an application just has finished some time consuming work (task bar icon flashes) or the possibility to switch or bring up apps. A maximized window with a small task bar gives me both: a good overview, fast access and a pretty large screen estate.

    Tags instead of menus have a nice benefit over submenus though: a program may have multiple tags, which is nice, because you can find the program in multiple places. That concept requires that tags are properly set though, but I think it’s good. I still would like to have an “any” tag to see all my installed programs.

    Please mind, that this is just my personal opinion on it. Other people may not share it.
    Anyway, if noone dares any change noone will ever improve anything, so just keep the ideas coming!

  2. > if your mouse gets near the lower end of the screen

    yeah, same problem under windows if you set ‘hide taskbar’ or sth. like this

    > To be honest: I don’t like that idea. Everytime I wanted to move the mouse out of the way and hit an application icon and did the switch by accident, it pissed me off.

    Yes, this is so true.

    BUT, to be honest: I think my solution with the global key (e.g. ubuntu key) isn’t for an end user but it is very cool for me or other developers which can use the keyboard!

    And it is very clear if you are e.g. in editing mode. Because then the taskbar is present and other windows are shaded out. Try the javafx version for that.

    > “any” tag to see all my installed programs.

    this is the default state (all entries deselected)

  3. Pingback: New Desktop Experience « JFXStudio: sketch, hack, share

  4. Pingback: Matchstick Graph « Find Time for the Karussell

  5. Pingback: Matchstick Graph Editor « JFXStudio: sketch, hack, share

  6. Pingback: Matchstick Graph Editor - Use JavaFX

Comments are closed.