Revision as of 14:47, 11 May 2009

Design Proposal [Martinů]

Summary and Status

How to use this template: Please write a short summary here to introduce the ideas in your proposal. For example, write a few sentences covering the highlights and the name of the proposed design. (Please delete this and all of the other gray explanatory text before you submit your proposal.)

Status: Request for Comments

After you consider the comments and questions in the comments section, revise your proposal for completeness and understandability. When you feel your proposal is ready for evaluation, please change the status above to “Proposal Complete”.

Mockup

Please add your main “wireframe” mockup. For example: A mockup which shows the functionality for adding a slide in Impress.

Detailed Description

This space is reserved for the detailed description of your design. Add anything you might find important for us to know. If you don't have any clue what this might be, then you will find some topics below.

• Describe dynamic behavior: The mockup above is something static. To better illustrate what will happen on the screen, describe what actions would be taken by the user and what would appear on screen.
• Explain the rationale and assumptions: If you decided to go for a certain concept, then please explain why you chose this.
• Highlight particular design ideas and alternatives: A concept usually incorporates many individual ideas. If you think certain ideas are really unique, then please highlight them. And if you think that there were other really good ideas which could not be implemented at the same time, tell us about them.
• List issues and open questions: Please list any issues you are aware of and open questions. Do not worry if your proposal or concept isn't perfect. If you have discovered any stumbling blocks or worries, then please provide this information right from the start. Maybe the team can help find answers/solutions.

• This proposal takes its roots in some basic ideas. I will detail some of them here.

• You may notice than some points are more detailed than others, regardless of their importance. One reason for it is that I am using material I had already written on some points - for example the "underline" part. Let's start!

A. Modern wide-screen resolutions

1. Laptops

• There is a clear tendency in screen resolutions in favour of wide resolutions. Laptops have almost all wide resolutions by now, the newest adopting even wider resolutions like 1366x768 (Dell Studio 15, Studio 16, Inspiron 15), which seems to be the new standard, instead of 1280x800, 1600x900 (Sony Vaio FW Series) instead of 1440x900, or 1920x1080 (Dell Studio 16, Sony Vaio AW-Serie) instead of 1980x1200.

• I just goggled around, just to find an article showing that the 4:3 to 16:10 to 16:9 is not my own fantasy:

Widescreen Laptops Get Wider

• Laptop have topped Desktop computer sales since Q4 2008. So they can't be ignored.

Notebooks Top Desktop Sales Ahead of Schedule

2. Desktop Monitors

• TFT monitors are following the same tendency as laptop screens. 1920 x 1080 is the new standard for big monitors, instead of 1920x1200 for the "old" wide-screen format, and 1900x1600 for the "old" non-wide resolution.

• This wider screen tendency has been around for some month, and shows no sign that it shouldn't be taken seriously.

• Don't blame me for screens getting wider, personally I don't like it! But these are facts, we can't ignore them. By the time Renaissance will be implemented, 16:9 will be more probably a standard than 16:10. 4:3 monitors will probably be hard to find.

3. Conclusion

• Why all this text about wide-screen resolutions? Well, because in all the UI discussions and drafts I have seen by now, it has not been taken into account. While people are working mostly on vertical sheets of paper (I'm speaking mostly of Writer) screens get wider and wider and the UI doesn't adapt and takes vertical space away, leaving big chunks of the screen unused, left and right of the virtual sheet of paper. (And this empty space is filled with the depressive "Battleship Grey" application background color!)

• Personally, I also regret that the target or the proposal is Impress: Impress is an exception in OOo because the “paper” will be mostly horizontal. But as most people using OOo will use Writer, and a fewer proportion Impress, I really think that the design should be adapted to wider screens, if we want to archive a UI uniformity between the OOo applications. Most thoughts about my design proposal were targeted to Writer – I was surprised that the design seems to works really well in Impress, too.

• I wonder why the resolution for these drafts is 1024x768: try to by any consumer laptop or TFT with this resolution nowadays - it's almost impossible! 1280x768 or even the new 1366x768 would make much more sense.

• This template, if viewed in a maximized window with a 1280x800 resolution (my case), is hard to read. The lines are too long!

B. Competitors

1. Microsoft Office

• If you are not familiar with Microsoft's new "Microsoft Fluent User Interface" aka "Ribbon", here are some very interesting links where you can find more information:

• Microsoft Office 2007 UI presentation:

The Microsoft Office Fluent user interface overview

• How does the Ribbon scale down?

Scaling up, scaling down

• A great video about the creation of Office 2007 new UI:

The story of the Ribbon

This last link is a video about the design of the ribbon interface. It shows many interesting UI prototypes, as well as useful data.

• I was specially interested by the vertical "ribbon" UI drafts.

(I think the examples are small and a case of fair use, thus no being copyright infringement. If you think I'm wrong, please remove them or contact me.)

Microsoft Office 2007 Draft 1

Microsoft Office 2007 Draft 2

Microsoft Office 2007 Draft 3

(Wiki problem... I can't find out how to go to the next line after inserting images...)

The video “The story of the Ribbon” includes useful data about user interaction surveys. Basically, the data describes the most used commands in Word, Excel, Powerpoint, and if the interaction was done with the mouse or the keyboard. I hope that the "OpenOffice Improvement program" will soon provide data of comparable quality.

Microsoft Office 2007 Data 1

Microsoft Office 2007 Data 2

I would like to highlight one detail about the “The story of the Ribbon” video. At one point (Minute 48), the narrator tries to explain why they didn't end up with a vertical design in Office 2007.

The arguments given by the narrator couldn't really convince me, and my paranoid nature ended up believing that they already had in mind that some day, it would be possible to use the vertical space for displaying... ads! And that may have been one good reason for making the UI horizontal, leaving a lot of space for vertical advertising. We will see what happens with Microsoft Office "Web" 2010.

What I personally like a lot in Office 2007 is that there is a lot of text. I don't remember icons very well, and as I could observe while watching to ordinary people using computers, neither they remember the signification of a lot of icons – except the classical B, I, U, font, paragraph alignment, save and print.

To be honest, in Writer, despite using it quite a lot, I never know which one is Font Color, Highlighting, and Background Color. An icon with text, or even text only would really be much more useful to me than an icon only. Even Office 2007 has too much icons and not enough text for me. Look at Windows 7, for example. It has much less icons and more text than previous Windows versions. To me it is much better.

2. RedFlag RedOffice 4.5

Have a look here for a swf presentation of the RedOffice 4.5 UI.

Or here for my older review of 4.0 beta.

I don't understand Mandarin, but Google translator helped me a little. New features of version 4.5 seem to be mainly support of Office 2007 file formats, new color management, and smaller UI changes. But please don't take me as a reliable source of information about RedOffice !

Though I couldn't use it a lot due to evident linguistic limitations, I like the RedOffice UI very much. It is obvious that the RedFlag team made a great job.

However, due to the compactness of the Chinese writing , it seems difficult to adapt the UI without major changes.

3. IBM Lotus Symphony 1.2

I am not really convinced by the sidebar in Lotus Symphony. First reason is the rather poor screen space management. For example, if there is an UI element everybody knows, it is the Font dropdown menu. There is no need to write "Font:" on it... Same thing for other really obvious UI elements. (It is the same, but not that worse, for Microsoft Office Mac 2008)

The other reason I'm not convinced it that in many cases the sidebar simply duplicates the normal toolbar elements. In some cases, it is even worse: the Font Styles dropdown menu, for example is absurd. It is just more complicated and less intuitive than the traditional [B] [I] [U], without any other advantage - it even doesn't take less space.

4. Sidebar width

Here is an image I pasted together last February, as I was working on my first design.

C. My proposal: "Martinů"

1. Sidebar selector

The main problem that came out designing a vertical IU is: how to select the content of the sidebar? In the "Story of the ribbon", for example, there are some funny design proposals:

• leaving the tabs horizontal on the whole screen width
• grouping a text menu at the bottom of the sidebars

Both of them are imperfect, and at first I didn't want to have icons only, because it takes a long time to the users to learn what they mean, and text is more intuitive.

My first "sidebar selector", a mixture between the one in RedOffice and the Preferences dialog in Firefox looked like this:

The problems of this sidebar selector were: to keep its vertical size (height) acceptable, I had to limit the elements to 6, which is not enough. With 9 Elements, it was too tall. For the curious, the whole sidebar in this old design (for OOo Writer) was like this:

File:Martinu - OOo Renaissance Mockup - Sidebar for Writer old draft.png

The main flaw of this old design is that the group labels are under the group. Very unintuitive! The main Idea did not change in the current proposal, though.

Finally I had to accept leaving out the text, and adopting an approach which was more like The GIMP, Apple Pages or Microsoft Office Mac, with small icons. I still think that text is important, and unlike in the software I just named, the name of the current sidebar should be clearly displayed.

When the mouse goes over an icon in the sidebar selector, the text should change (maybe a very fast, smooth blend effect) and be displayed transparently (as in the the "add new slide" feature), until the user clicks "definitely". Maybe color themes could be used to help identify each sidebar with its title and icon.

A single left click on the text ("Home", "Slides", "Draw", ... all the blue area) should pop down a menu with a list of all the possible tabs.

The lightening ↯ icon (or whatever, ▼ / ▾ are more standard) is a button with general sidebar options - equivalent to the right click. It should display a menu with these kind of options:

┌────────────────
│ Undock Sidebar
│ Duplicate Sidebar
│ Close Sidebar (only if there are more than one)
│ ────────
│ Sidebar preferences
└────────────────

Wiki detail: The </poem> thing doesn't seem to work!?

2. Sidebars

The proposed organization I have for Sidebars is the following:

A. Home
B. Slides
Layouts | Master Pages
C. Effects
Transition | Animation
D. Draw
E. Insert
All | Table (| Chart)
F. More
Options | Notes (| Navigator)
(G. Navigator)
(H. Search)
(I. Gallery)

2.1 Sidebar A. Home – The "File" Group

I don't see real advantages in using a special menu for file operations, as in Office 2007 or RedOffice. More, it has a drawback: some buttons like "Save" or "Print file directly" should be always present in my opinion. So that in these office suites, these buttons need to be duplicated in toolbars. At the end, it causes duplication in UI elements, and clutter.

My option is to have a two or three lines menu group, featuring the most used actions:

The "Round Orange +" button would give a dropdown menu of all less used options, in this example:

┌────────────────
│ Recent Documents
│ Wizards
│ ────────
│ Reload
│ Versions
│ ────────
│ Properties
│ Digital Signatures
│ Templates
│ ────────
│ Preview in web browser
└────────────────

How to know which elements to put directly accessible in the menu group, and which one in the "Round Orange +" menu? Well, as no one has a perfect answer to this, the best thing would be to wait for the results of the "OpenOffice Improvement program".

Therefore, the proposal at it is now is not at all intended to be anything reliable, it's only a vague idea, which should be improved by real user data as base.

The round "Help" button (which may have a text label) should show the content of the "Help" menu in current OOo versions.

The two printer icons shouldn't be looking the same. One is the "Print File Directly", the other the standard "Print…" dialog.

NB. The "File" group is compact and doesn't have a title because some days, I think that the "File", as well as the "Standard Tools" group should be placed above the Sidebar selector, thus be always visible.

Additional Material and Mockups

Please share everything you might think is important to better understand your proposal. Perhaps you also have other ideas which are not directly related to “Accessing Functionality”? You might add further documents, Internet links, or additional mockups - e.g. showing a workflow or different states of the software.

Author or Team Working on This Proposal

Comments

Your space :-)