New Firefox GUI - Text

Full view: Mockup 1, Mockup 2

A browser interface should be as small as possible, and give the user as much freedom as possible. Instead of pressing the menus into small buttons, I suggest to put them somewhere else and thus to give them more “space”. In my opinion, the ideal solution would be to use a newly opened tab – that appears as empty under current versions. This empty space is what I would like to use because it has enough display capacity. The fact that the tools disappear as soon as you open a website is a further advantage. This currently empty tab could become a sort of second desktop (“Fire Desktop”), where all elements are placed as widgets. This would give the user the flexibility that is often called for – he could largely decide how to use and organize the newly won space.

By clicking on “Bookmarks” in the “sub navigation panel”, the user would see the information in the whole browser window, and not only inside a small drop-down menu. In this way, it would be possible to choose better or other displaying methods than those available now. The browser history could be displayed, e.g. as a time line or as a tree structure. Furthermore, I think that Firefox should put a good RSS reader at users’ disposal from the very beginning because RSS feeds have become part and parcel of the Internet (like ‘Brief RSS reader‘).


About widgets:

As already said, each “Fire Desktop” element would be a widget. To unlock the desktop, you would have to click once on the lock icon in the lower right corner. From then on, it is possible to freely arrange the widgets on the desktop, to alter their size, to select different widget skins – large and colorful or minimalistically small, to edit widget preferences, and to remove existing ones. Many users would certainly welcome the possibility to freely choose a background picture for their desktops.


To install new widgets, one could use the Mozilla add-on page which should entail an extra sub-category “Widgets”. This would enable the user to custom design his “Fire Desktop”, adding precious extra value to Firefox.


Best regards

Paradiesstaub


PDF: Firefox GUI – An idea


One Line GUI - Mockup - EN

A task that I preform pretty often when following a link is to erase the URL additions to see the main page (link → blog post → main page). Why not create a button inside the URL bar to get there faster? It should ‘work’ after a double click so that it doesn’t disturb the user when typing a new URL.


URL-Pic1


I was inspired by two programs: GNOME – Nautilus & Google Chrome

In the GNOME file manager Nautilus, it is easy to jump to a higher folder in the hierarchy by simply clicking.


URL-Pic2


So why not having a similar feature in Firefox? Just a simple double click to get to the main page of the site. Google Chrome has some kind of highlighting elements right now in the URL bar to clarify the most important part of an URL, but does nothing special with it.


URL-Pic3


The highlighting through a bottom should be decent and should not disturb the user. The button could be hidden and only shows up when doing a mouseover.


If the user double-clicks on the button = opens main page

If the user double-clicks outside the button = marks whole URL (as it is right now)


That’s it for the moment.

Paradiesstaub


PDF: Additional suggestion to improve the URL bar

This idea is based on the concept I submitted to the Mozilla Design Challenge 09. I try to regroup fields of interest via a tree structure – without knowing the tab contents.


Because I am now focusing on creating tab groups according to certain rules, there should be no problem in exporting this idea to other projects. My goal is to create as few tab groups as possible, these groups being useful and well organized. To avoid confusion I’ll explain my idea step by step.


Open browser. A “Birth Tree” is created that opens the start page. As the name “Birth Tree” suggests, this is where trees are born – “tab trees”. The first branch of the tree is the start page. There is an extra rule for the “Birth Tree”: “Each newly opened tab (superior tab) first belongs to the “Birth Tree”, as long it has not opened another tab (sub tab). If another tab (sub tab) has been opened, both (superior and sub) tabs get bundled into a new Tab Group. This kind of extraction applies as long as the Tab Group is comprised of more than one website”. “Superior tabs” are tabs that are created by clicking on the plus-symbol or pressing CTRL+T – “sub tabs” arise when clicking on a link (middle mouse click on a link, for example). This kind of birth process prevents a user from opening 50 tabs with CTRL+T and getting 50 tab groups. In the following explanations, I’ll concentrate exclusively on tree structure and a tab-group that has gone through the birthing process (from now on all tabs are “sub tabs”).


Until now our tab group would look like this:


Bild1

The highest point on the picture (the star) is the “starting point”; it is the founder of the group. The upper white box is the first website and the other, the tab that was created from it.


The “Birth Tree” rule would make no sense for “adult tabs”, that’s why I invented another rule for them: “When you open more than two tabs from one website, you move higher up in the tree structure until this rule is broken again or until you reach the starting point, in order to branch off the tab tree and to create a new Tab Tree Group.

This rule sounds somewhat complicated, but pictures should help understand it better.


Bild2Bild3














As you can see, the new group (yellow) gets integrated into the existing tree. The advantage of this procedure is that the allocation remains flexible. This fits the need of the user who can “jump” to higher tabs – from the point of view of the tree structure – and create new tabs from there. The following example will help you better understand what I mean. We assume that the user creates enough tabs at a higher branch point to build a new Tab Tree Group. This would affect the other groups (especially the second one) as follows:


Bild4

As we all know, you can not only create tabs, but you can close them too. So how would this kind of tree structure work when we close tabs, or better, how would it work if we closed tabs that are important for multiple Tab Tree Groups? If a tab gets closed, the lower structure will become attached to the upper one. The same principle applies to a group that no longer fulfills the Tab Tree Group criteria, it would be integrated into the next higher group. A special case is when a branching point/tab gets closed (marked with an ‘x’ on the pic.) and two groups become related to one tab: which group should be allowed to integrate it?


Bild5aBild5b














The answer to the question is that the tab further belongs to the group it was last belonging to. This prevents tabs from always jumping between different branch groups.


Until now, it was not important for the user to know whether a tab belonged to one or to another Tab Tree Group and if a group was created or closed, because all tabs were still open according to my concept. It’s only when you minimize a Tab Tree Group that the tabs they contain become important: we could say that they are stored in another place and no longer in the big “tab pool”. Take a look at the next picture that shows a Tab Tree Group with one click on it – actually, you see two Tab Tree Groups.


Bild6


It would be very unpleasant if you were to close a few tabs within a minimized Tab Tree Group and the whole Group would suddenly disappear – because it would no longer comply with the rule – and would become linked to another group. To prevent such an occurrence, I suggest freezing the minimized tab structure. The user could then close individual tabs without having the minimized Tab Tree Group integrated somewhere else. If the user chose to reactivate only one single tab from a Tab Tree Group, this tab would “de-freeze” and the standard rules would apply again.


Bild7aBild7b

Bild7c

























When you save a Tab Tree Group, you also save the underlying tree structure. Because the user can add further tabs to a Group that has already been saved, I suggest to integrate it directly below the starting point (star). In this way, the existing group structures would not be affected.



Positive sides of this method:

It enables the user to open many websites and to bundle them into a few well-structured groups that clearly show the user how he has arrived there. I’ll give you a quick example: let us suppose that the following picture represents a Google search. The first website would be the result of the search. Different search results would follow as open tabs. One of these tabs would be a Wikipedia entry from which we open further links. As long as we don’t open more than two tabs starting from the same website, the whole structure belongs to the “Google Group” (red). As soon as the user opens more than two tabs starting from the same website, a new Tab Tree Group appears (yellow). The new Tab Tree Group holds all tree tabs up to the Wikipedia entry (also included). It is not so relevant to the user to know how the second Tab Tree Group was created. It is more important for him to see in the second Tab Tree Group where he has come from, i.e. from Wikipedia.


Bild3



Negative sides of this method:

In most instances, the user will not understand why a new Tab Tree Group was created – I don’t see it as a real problem though, since we have reached our target of bundling tabs. Only a field test can show how practical my method really is.



I would like to add that I find automatic tap grouping solutions far better than those that are left to the user’s discretion. Another basic rule should be to keep the number of clicks to a minimum and mouse movements as short as possible.


That’s about it! I’d be really happy to get your feedback and to know what strengths/weaknesses you see in the suggested method.



Regards

Paradiesstaub



PDF: Idea – A Practical Way to Group Tabs

Creative Commons Licence: Attribution 3.0 United States

This idea tries to fix a dilemma of written language. When writing something down, our language guides us through a well-structured path. If we don’t want to lose the direction we are heading for, this path is pretty narrow and there is not much room for explanations. But there is a difference between our train of thoughts and our written language. Our thoughts are not so straight. We have reasons for the steps we take. Using a metaphor again, our thoughts are like side roads of a highway. If we integrated them all into our highway, the highway would be much longer and it would take much more time to reach our destination. This problem was identified in the analogue world before and they partly tried to fix it with the *-sign. Today we are living more and more in a digital world, so there is no need to retain restrictions from the analogue world. Annotations no longer have to be written at the end of a text and there is not one damn good reason why they should be that short.


My suggestion:
We need a new letter-symbol, an interactive one (in this blog post I will use *² for it). When reading an ePaper, I may wish to see annotations. I then click on the symbol and a text box opens up, overlapping most of the current page. The size and look of the box, the text symbol, the operation, the control functions, all this would have to be further discussed. Most of all, an international standard (W3C) would be very good to prevent compatibility problems between different platforms and devices. It would also make sense to be able to integrate other media (audio, picture, video).

I would describe the difference between such an annotation and a link as follows:
“Asterix to the power of two” is for “longer” explanations that are not worth putting on an extra sub-site. *² also has differing contents from a link– a link brings you mostly to external contents, whereas *² would mostly link to its own contents, providing a seamless integration into the main page (if supported by the author). This would make it possible to write short texts offering a lot of further information, which you could call up according to your interests and reading habits.


1st possible application:
While writing this down, I came up with the idea of creating a new letter symbol. The end of the preview sentence would be a good place to demonstrate my annotation idea. Imagine there would be a “*²” letter and when clicking on it, we would get the text: “The new symbol should have a high recognition value… should integrate harmoniously into the typeface…. should be accentuated by color, related to a link, but with an other color than a typical link, etc.” All information given in this annotation would be only for interested people. People who just fly over the text wouldn’t be disturbed by too many details. *² is in a certain way a stylistic device that can heighten the worth of a text when rightly used.


2nd possible application:
Another very good example is eBooks. Who is telling us how books have to look like? Wouldn’t it be nice to have a book showing us what we wanna see? Yes, I think it would! A text box with a tag adding function would be the answer. Before beginning to read, I would select/de-select different tags in the index. This would integrate some passages and remove others. My parents, for example, really like information about environment and  culture (as many others do), but I’m not that interested in it, so I would choose not to read that kind of environmental information. *² could bring customization to eBooks and allow it to be closer to different human tastes. Like all techniques, *² will have limits, but they will be further removed, compared to analogue books. Imagine a book where you can decide how much extra information you get and how detailed this information is, when learning something new.


3rd possible application:
Online newspapers could use *² to shorten their messages and at the same time present in-depth information. Conclusions could be “out-sourced” so that the well-informed reader can skip them. Here too, the author needs a sense of proportion (out-sourcing too much information is as bad as including it all). Or when they write about an opinion poll, they could give further details like, what type of people were interviewed, who was the sponsor, what the questions were, etc. In a rudimentary way, info boxes serve the same purpose as *², but *² would be better in a lot of cases, because it wouldn’t force the writer to limit their contributions that much.


Ideas for navigation and design:
I prefer a simple user interface where I have as much freedom as possible. It should be possible to choose different layouts and to design new ones. I’m dreaming of a text box design without buttons and continuous border crossover. The size should be proportional to the text size shown (20% shorter horizontally – 40% vertically). If the box is not big enough for the contents, I suggest adding a dragging function to move the text up and down (as on certain cellphones – otherwise: mouse wheel/arrow keys). Depending on how fast you move the text, you would get more or less far into it. A double click anywhere in the box should close it, except on a link (this would guarantee easy use for PC & smartphone user). I prefer an aesthetical design – not like Windows 95 – that enables me to add different buttons and scrollbars, if I wish to.


Conclusion:
The examples above show the many possibilities of *² and how it could better structure digital papers. The whole range of this idea is not visible at once (because of our “old thinking habits”) – but you should get it with some imagination. Other, further going ideas and uses should develop over time. *² has the potential of strongly affecting future digital writing styles. Unlike a common annotation, *² provides not only an addition, it can provide further extensions within a well-adapted frame. Digital technology is pretty young, we haven’t yet completely realized its potentials, nor what limitations have become obsolete.


PDF: Asterisk to the Power of Two – A Digital Upgrade

Creative Commons: Attribution-Share Alike 3.0 Germany

This is my concept for the Design Challenge Summer 09 from Mozilla Labs.

The question: “Reinventing Tabs in the Browser – How can we create, navigate and manage multiple web sites within the same browser instance?”


Tip: view the video full screen and in HD (if video is jerky, download it via this page or plug-in) – mockup 1, mockup 2, mockup 3

The following is a step-by-step explanation of my idea and gives more insight into it. I have already pointed out to some of these aspects in the video (Mozilla asked for short videos).


From ideation to solution:

First, I thought of replacing tabs by images in order to gain more space. But then I realized that tabs plus website-icons can contain much more information than a lot of small images do. The solution should also make it possible to handle a lot of tabs, including navigation. Another very important aspect was that I didn’t want to lock out people from Asia and Africa by creating a system that assumes a lot of computing power (they will probably still have slow computers with low screen resolutions for the next five years). I noticed that I was treading the wrong path and would not reach my goal that way – so I left it. “Normal programs can be minimized, why not do so with tabs too,” I thought. I soon recognized that it would not make much sense to use only single tabs, so that the idea of using tab groups lay at hand. Developing my idea and going further on my new path, I had some accompanying thoughts on how to implement it the best way. I came up with the following solution – which cost me some sleep (I was up thinking about the idea until 5 a.m.).


Structure and explanation:

From the very start, I wanted to disturb as few people as possible with my new concept.

They should not be forced to use my system, it should be more of a “if you wish you can, but you don’t have to” kind of invitation. In the end, the only thing I added was the small bar (Tab Group Menu) that displays when you move the cursor over the currently activated tab.

SingleTab




All other buttons are a logical development of my main concept and its structure (except for points 1 & 2 – I couldn’t resist submitting this idea, too).


Zoomansicht - Minibild 1



Zoomansicht - Minibild 2



Zoomansicht - Minibild 3



Erläuterung - Großansicht

1 – With Button No 1, you can switch between the different screen modes.

Normal Mode = shows standard Firefox display | Small Mode = shows only necessary items (including bookmarks on the top bar – see point 2) | Full Mode = equivalent to F11 mode.


2 – Here, Bookmarks are stored in the top bar with other control elements – when Small Mode is activated. There are only as many Bookmarks on display as there is space – starting from the left. Bookmarks that can’t be displayed because of space limitation are only visible under Normal Mode.


3 – Loading status


4 – Button No 4 is activated. The “Tab Group Menu” displays as soon as you move the cursor over the currently activated tab. Another button becomes visible when you activate button No 4: the “Minimize All Tabs and all Groups” button (see point 5 below).


5 – As the name already says, the “Minimize All Tabs and all Groups” button downsizes all tabs to minimized Tab Groups (see arrow No 13). Minimized Tab Groups are always on the right handside.


6 – The “Save Tab Group” button saves all tabs belonging to the group at the time you press this button – and can be processed later if needed. You can save Tab Groups in the same way as you save Bookmarks, the only difference being that you start a new folder instead of a Bookmark. All Bookmarks within a Tab Group belong to this one Tab Group. You can add tags to Tab Groups as you do to “normal” Bookmarks. Yet, you cannot retrieve Bookmarks from a Tab Group Folder in the same way you retrieve “normal”  Bookmarks using the URL Bar. The idea behind this is to prevent unwanted websites displaying as “normal” Bookmarks.


7 – Button No 7 is for text search within the Tab Group (see picture). The possibilities offered by this functionality are obvious.


8 – Button No 8 has a double function. First, it shows how many tabs are in the Tab Group. Second, when you click on it, it shows the list of all the tabs within the Tab Group. Since this list is a drop down menu, there is far more space available to show tab-related information than there would be with horizontal tabs.


9 – Button No 9 minimizes all Tabs in this Tab Group as well as the Tab Group itself. The icon of the website or the reference page that is highest in the hierarchy displays on the right side of the tab bar (see arrow No 13). I’ll explain further on how to build Tab Groups.


10 – Button No 10 closes all tabs within this Tab Group. In order to retrieve a Tab Group that has been closed by error I suggest an extra button on the new empty Tab Page that will come with Firefox 3.5.


11 – With the green arrow, you can minimize or retrieve single tabs. This is very useful when a Tab Group is minimized because you can still monitor it.


12 – Button No 12 closes single tabs – same advantages as above under No 11.


13 – Button No 13 shows a minimized Tab Group. You open the “Tab Group Menu” with a left mouse click on it – the arrow shows an activated menu.



How to obtain Tab Groups:

The automatic Tab Group generation is the core of my idea. To make it clearer I would like to use a small metaphor:


– You “plant a tree” in the browser when you open the first website.

– Each Tab you create from the reference page is a “branch” of this same “tree” and therefore belongs to the same Tab Group.


– When you start an empty tab or a Bookmark, you – so to speak – plant a new “tree” that can have as many “branches” as you wish.


– You also create a new “tree” when you start a further tab starting from an already existing “branch”. In doing so, the original tab used to create the new tab becomes a new “tree”. It sounds more complicated than it is.


Thanks to this method it is possible to put different websites together in one Tab Group

without the negative effect of having the group proliferate when you open new tabs. The following picture illustrates this using a Google Search.


Grouping-Tabs

Finally I think that there should be a drag & drop functionality for single tabs between the different Tab Groups – how it could look is an other question.


Conclusion

Each new idea you bring into the world can always be further developed. That’s why I have decided to stop here. Of course, I could integrate small pictures to reinforce the clarity of minimized tabs within their group. Or I could give a specific color to all tabs within the group, and so on and so forth. As a creative person you have to choose a form. I hope you like the one I chose, and I invite you to come along on this path with me.



Paradiesstaub


Mozilla Labs Design Challenge Summer 2009 – Minimizing Tab Groups – PDF

This work is licensed under a Creative Commons Attribution 3.0 United States License (http://creativecommons.org/licenses/by/3.0/us/)

Draft-for-Ubuntu-Gate-Search-pic1Short introduction:

My idea is to improve the search and treatment of data by taking only a few, easy steps. It consists in connecting several archive files, different search functions and “open with”.












How would it work?


For quick display of the search results, it is necessary to index and order the data. A program runs all the time in the background carrying out this task, and resumes work when work load is low. It only checks certain folders and takes into account certain file endings (path, size, name and further information recorded e.g. ID3 tags, GPS information within picture) and creates mini-pictures. At the end of the search, data selection could look like this in the home directory:

odt, doc, pdf, mp3, ogg, jpg


The program shouldn’t stop at that, but should also list the address book and the emails received if the user wishes to.

It should also be possible to switch the search function from local to Internet, to have access to the browser bookmarks in the search window and to the various search engines.

The search window is there to give quick access to the data the user is looking for and to ignore the rest.



GUI


bild-5


bild-8


bild-4


The search function can be implemented by mouse click or key combination. I suggest using Ctrl+Alt+F as a shortcut. It should be possible to drag and drop the search results (e.g. to copy them on a USB key).

The table below illustrates the search mode per key shortcut. It shows how easy it would be, and the resulting possibilities. I use the word Start to avoid writing Ctrl+Alt+F each time. The blue color is for the Internet mode.


Keys used Resulting action
Start (empty search window) + Enter

Opens home directory.
Opens standard website (according to browser pre-settings)

Start (empty search window) + “arrow down” Displays the last 10 documents used
Displays the last 10 websites browsed

Start (empty search window) + “arrow up” Displays the 10 programs used most frequently (displays the search list from bottom to top – the bottom hit is automatically highlighted)
Displays the 10 bookmarks used most frequently (same principle as in local mode)

Start (empty search window)

+ “arrow to the right/the left”

Changes search mode from local to Internet
Changes search mode from local to Internet (in Internet mode, you can also choose the search engine by hitting the “arrow to the right”). After search completion, you alternate between search modes by pressing just one key

Start + “any text”

Search engine displays first 10 hits
Displays website selection and possible bookmarks

Start + “any text” + Enter Standard program opens marked hit (first hit is automatically highlighted)
Program processes first hit (opens selected website/bookmark)

Start + “any text” + arrow down/up Mark switches between search hits
Mark switches between search hits

Start + “any text”

+ 2 quick hits “arrow down”

Jumps to the next 10 hits
Jumps to the next 10 hits (if it works)

Start + “any text” + “arrow to the right” + Enter Secondary program opens highlighted hit (by pressing again “arrow to the right” user selects another alternative program)



The search window should “understand” the following:


– It puts the files last or often retrieved higher up in the list.


– If the user writes for instance “Musician’s name” and “Music” in the search window, the results should be mostly music files.


If the user selects a music title and presses the Enter key, and a music program has already started, the new title should appear in the play list.


– The search engine should be able to carry out simple instructions, as long as there is no other file with the same name (“new mail”, “odt new”, “start gimp”, etc.)


It should be possible to choose index terms for certain folders like “m” for Music….


– Depending on the data displayed, the search should deliver differing information (e.g. with a big difference between a picture file and an address entry).


– The search system should cope to a certain extent with spelling mistakes!


– If the user selects “Archive file” for the second time (when an archive file is already open), the program will ask him whether to put the file into the existing archive.


– When surfing the Internet, user should be able to drag & drop all possible Internet search engines into the Ubuntu search window to add them to the search engine list.


If there is no entry in the search index, the program suggests a “complete standard search” for the term requested.



Possible search configurations


A right mouse click in the search bar gives access to the options. The user can then configure the folders/data and the order in which they appear (you could explicitly exclude folders/data – possibly directly through the “standard folder option” as well). Among other things, it should be possible to select whether to have “mini preview images” and whether the Internet search engine is allowed to submit suggestions for search.

It would be wise to encrypt files because the internal archiving and the structured treatment of personal data may disclose many details about the computer’s owner. Access to the encrypted search index should be possible only with root rights.



Conclusion


It is clear to me that it will probably be impossible to develop all the functionalities I am suggesting, yet I find it necessary to think about them and describe them as well. They may feed other people’s inventiveness and help us tread new paths together. The search method I have described would be a very powerful tool functioning on a rather intuitive basis. Computer use would become faster and more efficient. It could certainly be used in cell phones as well.

To make it short, I would be delighted to run my computer and other devices with the help of such a search window. I truly hope that some developer will be as enthusiastic about it as I am, and that he will turn this wonderful idea into reality.



Addition – Further ideas


Actually, I feel that two buttons should be added to the archiving program – “downsize pictures” and “email archive”. The last one would open a new email and attach the corresponding archive file.

The first one would offer the option to alter certain (previously selected) pictures. In a second step, the user could alter picture size and compression level to save disc space.


Several options should be available:

high/average/low compression/downsizing

– the selected pictures could be downsized in such a way that all the archive data do not exceed a certain data size (this function would make it much easier to send pictures via email, as there would be no more manual downsizinge.g. > 4 MB).


A picture preview would be very handy, too – to check picture quality after downsizing.


Dear readers, thank you for your interest. I hope that you will carry my ideas further into the world.


Greetings – to you and the world!

Paradiesstaub


Ubuntu Brainstorm – Vote for this idea now!

Draft for Ubuntu-Gate-Search – PDF

Ubuntu.com


logo-ubuntu

Ideas for a quantum leap towards more transparency in public life


A lot of information cascades down on us ahead of each election – pictures, posters, TV debates, etc. But what do politicians do the rest of the time? I could certainly try to collect information by reading the press and watching TV reports every day – probably all day long – yet I’m not that interested in politics (the news and a few websites usually cover my needs). The idea I’m presenting here would create more transparency and help people with an interest in politics to find the information they are looking for more easily.


– All the public debates in the House of Representatives should be filmed (ogg format) and be easily available in digital form to interested citizens (e.g. on an extra sub-website, archives, one for each debate) – free of charge.


– Each speech held (speaker’s reference at the bottom of each video film) should also be freely available in PDF format.


– The same applies to the list of all the representatives attending the debates.


– Another list should give the speech duration for all speakers (name/party: …. speech: 1:34 p.m. – 2:12 p.m.)


– All the documents used or referred to (government reports, etc.) should also be posted on these websites (no links to external contents because they could be deleted or altered).


– It should be possible to download all the information pertaining to a meeting/session (all the contents, video film and texts) in one package (zip file).


– I believe that the nation is entitled to having access to this information and that it should be broadly disseminated – this is why I suggest putting it under a Creative Commons License (CC License).


All this is certainly feasible and would bring far more transparency to public life. For instance, I can quickly check on-line a politician I don’t know. With such a system, it would be easier to track the course taken by parties/politicians and to form one’s own views, far away from the mainstream media. In Europe, this information system would also be a major improvement regarding the European Parliament, as very little of the debates filters through to the general public.


Ideas for a quantum leap towards more transparency in public life – PDF