You are here: Home / Archives for GUI

1.4.5 -> the BIG release

January 31, 2010 by Andrea D'Intino · Leave a Comment 

Ladies and gentleman, we’ve just redesigned Tabbles, from scratch – or nearly. This release is the result of the 6 months of testing, discussing, improving, re-testing, re-thinking, re-designing. Now Tabbles looks like something “familiar” and not anymore like an alien kind of application. We hope you’ll love using it as much as we loved making it.

Tabbles’ new face:

All the details are in our change-log.
Share|

Filed under English · Tagged with , ,

Small update: one more GUI redesign… (updated!)

January 6, 2010 by Andrea D'Intino · Leave a Comment 

… to make it totally idiot-proof this time! Read more about this on our forum.

Updated! Teaser nr. 2:
…and the forum post
Share|

Filed under English · Tagged with ,

The evolution of a GUI and the pulsating life of a UX

December 15, 2009 by Andrea D'Intino · 7 Comments 

Hello world.

this is a little illustrated story of how the Tabbles GUI evolved, from paper sketches to the latest version (1.3.10 RC1). For those who don’t know, the Tabbles GUI is done using WPF and C# while the core logic is written in F# wherever possible (that excluding the GUI and those time when and old API had to be called in C).

In the beginning it was chaos.

Initially we had many different ideas, a lot of confusion in our heads and one goal: “be revolutionary user-friendly => be different from everything else”.

This is a very first mockup done by me on a cold scandinavian night in December 2008:

(Dec. 2008)

And at the same time we sketched a few crazy ideas on paper:

(Dec. 2008)

One more mockup, done in another freezing scandinavian nuight, one month later:

(Jan. 2009)

Then came ZUI, direct manipulation, vector graphics and Utopia.




As we started, me and Maurizio we shared a common sense of frustration for the GUIs in general. Most of the software around looks indeed gray, square, boring and it gives the impression that not much happened since the early 90’s. On top of it we were disgusted of how they file management hasn’t evolved at all since Bill Gates wrote the FAT for the IBM-DOS 1.0 in 1976.
Those are the very first prototypes of Tabbles, which few people has seen (February 2009 until May 2009):
(Feb-March 2009)


At this point we were heavily focusing on ZUI, and vector graphics. Most of the graphics (including the button icons!) was vectorial and done in XAML. Why made that choice, is not 100% clear to us yet :-)
For sure it was painful: the easiest way was designing first Illustrator, then saving to XAML using the Mike Swanson’s plugin (very friendly guy, excellent plugin) and then checking the result using kaxaml. Soon we hit the wall and realized we couldn’t avoid using Microsoft Expression Blend 2 - not a bad tool itself, but we still needed whether Illustrator or Visual studio to do many different things. I guess we did some true pioneering there…


One of the features we were more proud of was the so called “butterfly” (which existed in 3 different shapes until the version 1.1.something and we plan to revive it as undisclosed point).
The purpose of the butterfly was to allow the user to perform operation directly on the object without going through a sub-menu (so called direct manipulation) or using the right-mouse button (widely criticised in the late 80’s).
One of the first ones (from January 2009) looked pretty cartoonish:

In February the butterfly looked a lot like an atom (from Illustrator):

(Feb. 2009)
Uh, by the way, at that time we also had a temporary logo, we used it for a private beta (targeted to FFF =  friends, family and fools) and it looked liked this:
(05 Apr. 2009)

…a few mockups later…

…Tabbles started to get its identity. While I’m writing this post, I’m looking at the app on my screen and you might say that the following shots do not look at all like what we have now. Well, it looks different but some key elements where there already: most of the icons with their minimalist design, the grey gradient, the zoom bar, the separation between tabbles level and file level. Plus all the main features such as the zooming+panning paradigm, which was pervasively deployed wherever possible.


Here is one out of many crazy mockups done in the first half of 2009:



This design never made it into development (thank GOD!) as its space-efficiency would have been extremely poor… apart of being plain ugly. This is what Tabbles looked like in those days:

(April 14)

(May 6-8)

Then a master jedi arrived and showed us the path to the Force.
I have a background as 3D graphician, sales/marketing guy as well as a degree in economics (which didnd’t even hang on the wall…). Maurizio has an IT degree and learns programming languages in his spare time (last time I asked he mentioned he knows 20, that was a while ago). Both of us are able to mess around with photoshop: but messing around is one thing, designing a sleak GUI is another.


Being aware of our limits, at some point we asked my younger brother to help us finding a decent designer to design our homepage and to fine-tune our GUI. He initially babbled something like “yeah, hmm, you know…”. After a couple of weeks he came out with a statement that sounded like “well, if you want I can get you the best guy in town, but it won’t be cheap…”. The town was Rome, and the guy was Marco Marini.


Marco lives on a space-ship and he typically hangs around riding a flyng-dragon and wearing a shiny Mithril armor. We met him for the first in February 2009 and showed him what we had at that point. It took him a while to send us a couple of mockups as while he was working for us (pennyless garage-based developers), he was also working - among the others -  on the rai.it website (the italian public tv website). He designed our homepage, our logos and re-designed our GUI.
In May we received the first mockups from him of the redesigned  GUI….for the next few weeks we simply couldn’t stop drooling :


(The mockups were delivered on 05-07 May 09)

[since we're 3 nice guys investing their own money (!) we got a very friendly price (which I was kindly asked not to disclose) :-) ]



This major upwards shift in the GUI did obviously push us towards new directions. Me and Maurizio would have never been able to produce graphics with this level of care… The new mockup had  beautiful 3D effects everywhere, neat shadows, rounded shapes and reflections, definitely a few meters above the best mockups we did ourselves.


The challenge was now going from .psd to WPF!
Plus, the mockups were based on an early version of Tabbles, as things evolved (and they did pretty quickly) most of the buttons in the mockup were doomed to oblivion…


Let’s start with the basic: the new tabble + butterfly in illustrator looked like this:



And obviously the XAML that came out of this monster wasn’t exactly what Expression blend and Visual Studio were expecting to get… It had to be redone as most of the stuff we got.
But of course we knew that things weren’t supposed to be easy and we didn’t even consider giving up on the GUI! :-)


Therefore, The next versions of Tabbles looked like this:

(16 June 2009)
(23 July 2009)

1st of August: release-time


Surprisingly for everybody (that is: we, ourselves and us), we made it and released the 1.0 roughly when we scheduled it 1 year earlier, long before the first lines of code were written. Of course 2/3 of the features were missing and the 1/3 that was there would crash as only you’d look at it a bit too intensely… but hey, if Microsoft can do it, why can’t we? :-)


The shots of the 1.0 version are still on our website in the screenshots page and the videos are on youtube. Anyway this is what the 1.0 looked like:

(The “ground floor”- 01 Aug 2009)
(The “files’ floor”- 01 Aug 2009)
1.1.x -> 1.2.0 -> 1.3.0
Ok, if you look at the first versions of Tabbles, from February and then look at the screenshots up here, you’ll probably say “that’s quite an improvement!”… sure, but we didn’t feel it was good enough.
Many people reported a steep learning curve, had issues with the zooming+panning and was complaining about the poor space efficiency.
We did at some point realize that most of the concepts we introduced in the Tabbles GUI, while sounding smart and correct on paper, where miles away from what the average windows user had learn since the Windows 95 took over the world.
These includes GUI functions as:
- Double click
- Right click opening a context menu
- Standard menu-bar (File, Edit, View, etc).
- Drag’n'drop

Now, did we need one year to find this out? Yes we did: not all we did was wrong and for everything that was indeed wrong we can proudly state that we found 700 things not put in a GUI, which is why I’m writing this post today.

Consequently, between the 1.1.x and the 1.2.0 we did hit on the steering wheel: the goal shifted from “be user-friendly in revolutionary way” to “be user-friendly in the Outlook way“.
In November we locked ourselves into our cave and stayed hidden in there for a few weeks, coming out only time to time to show some prototypes to our beloved community.
Among the major improvements in this re-design round were the introduction of a traditional menu bar (you can’t imagine how many people were begging for it!), a windowed layout for the file window (revolving a silly decision made long time before), the introduction of drag’n'drop pretty much everywhere, the long awaited explorer integration, a major clean-up of the windows and a much better use of the space with the newborn file window.
The 1.2.0 looked like this:
(11 Nov. 2009)
The 1.2.0 did finally look the way we wanted. Since then graphically not much has changed – the major change was the introduction of the auto-tagging rules (explained here and here) and therefore the correspondent button appeared.

Cool! What’s next?


While I’m writing this, we’re at 1.3.10 RC1: we’re working on an alternative view mode that doesn’t require the user to zoom and pan. Else, we’re keeping our beloved community informed using this forum post.


The story goes on here


Questions? Comments? They’re all very welcome! This is us and this how you can contact us.


P.S.: Marco was kind enough to design a couple of decent logos for us :-)


Share|

Filed under English · Tagged with , , , ,

space-efficiency -> rearranged file item

November 29, 2009 by Andrea D'Intino · Leave a Comment 

HELLO WORLD

Space efficient + readable = not easy task

Being space-efficient is crucial for any application. Not being space efficient results in the app showing less data than what it potentially could, resulting in being less productive. On top of this, you need to make sure that the data is rendered in an easy-to-read manner and there is a whole science behind this.

Cleartype
Maurizio is the expert (read: “the freak”) of readability, on several occasions he explained me what is cleartype and why it exist and how it works. Having a pretty good sight I’ve never been into this stuff, but many people have trouble reading if the font is not big enough. There is a whole bunch of guidelines on how to  make good app design, and one universal rule is “don’t use text below 12points”. Plus, only the system default font is optimized, therefore it’s advisable to stick to it and forget about using fancy fonts.

Reading without reading
While Maurizio cares a lot of making sure the text is always readable, I’m a freak of making the text quickly readable. What I mean is that very often within a paragraph or a whole page, one or two words are important and sometimes they’re even expressive enough to summarize the whole page. This is particularly important when you have computer generated strings where you know the strings follow a certain pattern and you know you don’t need to read the whole thing cause all the information you need is in one word.
In these situations it’s important being able to understand how the strings are arranged before even starting to read. Color coding combined with bold text is one way to solve this:

Now, we agree that this window is butt-ugly, but the interesting information stands out of the noise. In the first line you read: blah blah blah blah “xls” blah blah blah blah “Tabbles”, “about Tabbles” blah blah. All the blah blahs they’re maybe interesting the first time you read them, but once you find out what it’s all about, then you just want to skip it and jump to the useful stuff.

Variable length
Being space efficient when the item to be displayed can be of a variable size, adds more spice to the issue. Windows Explorer has the same problem with the file name: it can be very short or very long. The solution that Microsoft opted for is truncating the filename. We have the same problem, along with a much bigger problem which is displaying the tabbles next to the files: the problem is that you can have anything from zero to a lot of tabbles linked to any file, possibly 2 files next to each other have very different amounts of tabbles linked to them. There is no way you can truncate this smartly… the solution we’re opting for is to put the tabbles in a sort of tab, and the tab can be shown/hidden, depending on what suits you best in that moment. Smart, isn’t it?

Jumpy eyes
One more or less direct consequences of having “information items” of variable length, next to each other, is the fact that corresponding strings can be disaligned. This makes my eyes jump around and loose focus. I believe this is a major generator of perceived confusion. One more reason to rearrange the file item :-)

What we have today
Finally the screenshot. This is how it looked yesterday.
We’re also adding the chance to hide the the tabbles under a file. Here is what it looks like today, next to the Vista’s explorer:

Quite an improvement, isn’t it? And by the way:
- we didn’t learn everything overnight
- it’s not our first attempt
- it’s the result of several discussions + mockups + more thinking + banging_heads_on_wall + sleep_deprivation.
- it’s not the final solution, we can still improve it :-)
Peace!
Share|

Filed under English · Tagged with , ,

Weekly update (I’m starting a tradition here)

October 18, 2009 by Andrea D'Intino · 1 Comment 

Hello guys,

This one is the first post of a series. I think it’s great idea to write here what we’re doing on a weekly base.
Development

a little flashback: Tweaking the GUI
In the last 3 weeks we’ve been mostly focusing on tweaking the GUI based on the feedback we got from our early users and friends. Among the things that mostly bothered people were the lack of a “normal” menu bar. Many people asked to have more integration with windows explorer, my brother (the guy from julay.it) mentioned a list of things to be fixed in the current GUI and Tim from the joelsonsoftware forum suggested us to reskin the windows. All of this has been progressing very well without any majour surprise, and surprisingly even the explorer integration went smooth (thanks to the use of ez shell extensions which saved us months of work…).

Graphically speaking, we got from here to here.

(still flashback) The desktop mode – stage 1
Maurizio has been secretly planning to develop a “desktop mode” for Tabbles, then a few weeks back he told me about his naughty desire but added that this would take months of development as he need to hook up with some hideous Windows libraries using the C language (to which he is strongly allergic). Then, one day, he googled the right thing (“pin applicaton to desktop”) and found the 4 lines of code that did the trick… the feature was implemented in literally 30 mins and this opened a whole new world in front of our eyes.
What could this mean? Well, it would mean give the user a desktop where one could zoom and a pan, as you do in google maps. Not bad at all!
Implementing this stuff can be considered a success story.

(Happened this week) The desktop mode – stage 2
This one is a little bit less of a success story :-)
Last Tuesday Maurizio told “look I think we should make the first floor detachable, and run in a window… I can make it happen in a couple of hours”… of course I said “great, go ahead!”, but a couple of hours later he called me back and said “actually this will take a bit longer…”. It took him indeed until Friday :-)
Well calling an insuccess would be a bit overdone, given the value added to the app.

(also happened this week) The desktop mode – stage 3
As Tabbles will probably be installed in desktop mode by default (the user can switch it’s behavour in real time), we also needed to to draw the files that the user has on his real desktop. This is nearly done and it took a couple of days of work and will probably need one more.
This is what we have today:



So, we wished we could release another beta before the weekend but we couldn’t make it…expect something early next week. Maybe it’ll be a bit broken, but we’re sure you’ll be impressed :-)

Sales and Marketing

a little bit of a flashback again: rethinking the sales and marketing strategy
We started off the whole project thinking on focusing on a corporate app, therefore we shaped our site and our communication in order to look like “what we thought would be appealing to a company”. Things were actually not going too bad for a startup, but when we learned about the balsamiq success and we read this post, we realised we could be trying a totally different path…not only that: while we were reading this post we already started a lively dialog with our first users on our forum (we love you guys, I hope you know that by now!) so basically we did already jumped in this “friendly small company” trend even if our website would still give the feeling of us looking like a greedy impersonal corporation.
Therefore we planned to rework our website a bit in order to show what we are instead of trying to hide it.
The last couple of weeks: some GUI stuff and some maintainance
We usually work like this: Maurizio writes the code and grosses the GUI, I try and make the GUI look prettier, do the icons, the user manual, the default databases and take care of the translation. There has been a lot of this stuff done in the last weeks, and precisely:
  • Icons tuned up and re-exported (before they were all vectorial XAML, now they’re all png), in 2 different color flavours.
  • Minimalistic default databases, in EN, DE, IT, NL, RU (now, that’s a boring task!)
  • Arrange the translations using the fabulous Zeta Resource Editor tool, on this post
The last couple of weeks again: Mantis, Wiki, getsatisfaction.com vs phpbb3

- getsatisfaction.com vs phpbb3:
On top of this, I’ve been having a look at getsatisfaction.com and Maurizio made me notice how cool it’s rating feature is. Well, getsatisfaction has a clean and nice design but it’s true power is in the fact that finding meaning information is made so much easy since users have the chance to vote the stuff they find useful.
Because of this mechanism, an average Joe (or a casual user looking for some support but not willing to invest not more than 3 mins on it) will probably find what he needs within seconds, leave the site with a pleasing feeling and come back soon.
With phpbb information is way more scattered. The point is that phpbb is meant as a generic forum software, one you could use to setup a board on butterfly collecting, on politics or on forum…getsatisfaction.com is very different.
On the other hand, the upside of phpbb is that it allows things like a poll, uploading a file, creating a poll and even some integration with some other online softwares (such as the populare mediawiki).
Looking for a nice way to allow users to rate posts (and other users?) I’ve been browsing the phpbb mod repository reading a quite a chunk of the phpbb mod development forum, looking for a “rating mod” (a mod is a sort of plugin for phpbb). I found a few WIP, a few abandoned but nothing I could just install and play with…at the same time, many people are hungry for such a plugin, I can see why.
-Mantis
I installed Mantis a couple of weeks ago (here), it’s now up and running and it works pretty well given what we need right now. The fact that it’s not integrated with phpbb annoys me (and our users!) so extremely much!!!
Obviously here too there is quite a lot of people crying for a solution, and quite a few projects, but nothing easy enough for me to install… the best thing I found was this and I honestly got scared after reading the first half of the howto :-\
(if anyone out there is brave enough to try that, we’d be more than happy of lending him a couple of licenses in return…as long as he doesn’t get our website melted :-D )
- Mediawiki
This is the the platform powering wikipedia, it’s huge, powerful, open source, free and it should integrate pretty well with phpbb (here). Mantis also integrates pretty well with Mediawiki (here)…so installing Mediawiki could allow us to (at least) have a shared user database (so that user don’t have to create different accounts each time) but maybe also to have dual login! Yeah!
Of course there is a but: we’re currently using an inexpensive (read cheap) shared hosting, with 1 mysql database, and I’m pretty sure that this db won’t resist long if we install Mediawiki on it…
Any opinion on this would be highly appreciated!
Real marketing stuff: re-segmenting?
I started saying that we initially targeted businesses (small and medium, but still businesses). A refining of the marketing material was needed as even on the joelsonsoftware post we got criticized for not having a clear target.
Well, two things happened since then:
  • we decided to go “Freemium” earlier than expected: we’ll soon launch a featured limited version with no expiry date, free for personal use.
  • the desktop mode fell from the sky as an unexpected (at least for me) gift.
What is gonna happen to “Tabbles | your personal document management system“? Probably it’s soon gonna move to the attic, and be replaced by something like:
  • Tabbles | smarter folders
  • Tabbles | beyond folders and tags
Or probably something that names the new desktop mode like:
  • Tabbles | deeper desktop and smarter tags
On top of this, I’ve been thinking a bit about 4 bullet-points which would quickly give the read an idea of what Tabbles does. Those are 4 candidates:
  • Zoomable desktop: gives your desktop a third dimension
  • Unique file organization system based on tag-bubbles
  • Virtual file system: all your disks look as one
  • Ultra-easy project sharing system (we still need a feature to be developed for this, but a low development-cost one)
Ok, we put the zoomable desktop line on top, the fact has quite a meaning for us. Who are we trying to appeal? Who are we competing too? However I look at this, only one name comes to my mind: Bumptop. This topic is indeed not clear at all. We’re not sure if we want to push on appealing home users and early users, and create a community (Winamp style) or we should stick to the path we decided initially and try and hit big contracts with big companies?
But the second line, Unique file organization system based on tag-bubbles, is indeed the most controversial one. While a zoomable desktop is a not-too-hard to describe concept, the core features of Tabbles are everything but easy to tell about. Let me just tell that we went to 8 variation of that line, but none of them made us 100% happy. Any comment on this is extremely welcome!

Uh, I wrote a lot!
Next week I’ll keep it shorter, I promise :-)

Andrea
Share|

Filed under English · Tagged with , , , , ,