Proposal by Cinly Ooi

From Apache OpenOffice Wiki
Revision as of 20:13, 15 May 2009 by Ooi (Talk | contribs)

Jump to: navigation, search

Design Proposal "Control Panel and More"

ux-ooo-logo-rgb-129-61.png

ux.openoffice.org

Quick Navigation

Team

Please do not edit this page unless you are the original author. Your feedback and comments are welcome in the Comments section below or on the ui@ux.openoffice.org mailing list.

The following design proposal is part of the collection of design proposals for “Accessing Functionality”, which is part of Project Renaissance.

Summary and Status

I am still in the state of uploading stuff to the wiki before reorganizing it. --thankx


This proposal

  1. explore the use of palletes to hold tools
    1. palletes are customized to the task at hand
  2. proposes a new view which shows all three components of a presentation (slides/notes/handouts)
  3. modify the slide sorter view to display notes/handouts
  4. proposes a new "Presentation Control Panel" for use with dual-display to provide facilities that enhance, track the presentation
  5. proposes a new "Master Page Design View"

You will note that there is no real "creative" element in this proposal. Most are just combining what I think is good idea from elsewhere, notably Apple KeyNote and IBM's Lotus Symphony, but sparkled with innovations that is, arguably, can be argued to be more than incremental innovations.

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.

Ooi-mockup.jpg

The main aim is to provide as much space for the Slide edit window as possible. This is achieved by exploiting the fact that most projectors are still using 4:3 ratio while monitors are increasingly using 16:9 ratio. This means we have more space at the left and right hand side of the slide, but less space on the top and bottom. Therefore, everything will be pushed to the left and right side where possible. Only items that users expects to be at the top/bottom, i.e., a menu bar, a one-row toolbar and the status bar.

Moreover, projectors are generally at lower resolution than some monitors. This should be exploited if possible.

Menu bar

Exactly like the current system

Tool bar

Preference is for old-fashion icon+tooltip, instead of the modern, larger icon+text version. The reasoning is users already know how open/save/print/zoom/cut/paste looks like, so there is no need for text. The space saved is given to the slide edit window.

Pallette Pane (The main focus of the design)

Although the display above shows only two pallete panes, there can be as many pallete panes as the user prefers. However, it is recommended that at most two pallete pane are used to minimize clutter.

All pallete pane can be detached into "floating" pane. Or it can be attached to these four positions:

  1. left/right edge of the main application window
  2. just above status bar
  3. just below the toolbar

When attached, it will be possible to reduce the pane to a single thin line which expands to the full pane when the cursor hover on the thin line. The action envisaged is like minimizing "task bar" on window. This effect is particularly useful for small screen size.

The pallette pane can contains unlimited number of palletes, and all palletes can be attached to any pane. Each pallete is a tab in the pallete pane. Some palletes are hidden and accessed through the menu button ("more...")of the pallete pane.

Slide Edit Window

It is the aim of this proposal to give it as much space as possible. At the bottom there will be tabs to select between the standard Slide/Note/Handout view. A new Combined view is introducted. This view shows all three Slide/Note/Handout together. A button named "master", at the right of the tabs give access to the master page view.

Detailed Description

Pallette

The Pallete is a collection of tools/information objects. Think of it like glorified toolbars.

I prefer pallete over toolbars because

  1. The useable area for hosting tools is larger in pallete
  2. Pallette can contain information object, toolbars generally do not
  3. The size of individual tools in the pallete are more flexible than tools in toolbars

In real life, the number of pallettes that is simultaneously open will be much less then the number of toolbars. Hopefully, this reduce clutter.

Pallete organization

Each pallete is organized to provide all tools needed for a particular task, e.g. text editing. Within each pallete, tools are organized into groups

Ooi-pallete.png


You can reorganized groups and minimize them as need be. Unless you put the pallete in "design mode", it is not possible to move individual object inside the pallete

Example Pallette

Text Pallette

Ooi-textpallette.png

This pallete is about manipulating text.

The top group show the available Text format, complete with how they look.

  1. To create new TextBox, user drag and drop the appropriate text-style they want into the slide
  2. The context menu is borrowed from Apple's keynote, because it is useful to have those features. OOo can of course rolls its own context menu.

The middle group allows the user to format the look and feel of the selected text in the slide. Note that the top part of the middle group is an information object, it only display information

The bottom group (minimized) controls the alignment of the text in the text box, and perhaps the alignment of any objects in the slide

Media Pallette

Ooi-mediapallette.png

This pallete is about inserting media (picture/movies/sound) into the slides.

The top part shows thumbnails of available media. Hovering the cursor above any thumbnail will bring up a bigger thumbnail, completed with controls you might want to use (play/stop). To insert the media, drag and drop into the slide

The middle portion is about customizing the media. For movies/sounds, the user might be permitted to select to play only part of the clip in the presentation and to specify the an image in the movie to use as place holder in the slide. For picture, manipulation of the the colour (transparently, cropping etc) might be provided.

The bottom part is a dropdown box that allows the user to choose a different set of medias. OOo plugins can add items to this drop down box. The standard directory browsing is of courseprovided to show all media in a directory on the top part of the pallete. The main idea of the drop down box is to organize media and make them easier to find.


What happens if you have buttons that you are going to click on very frequently?

At times, user finds that (s)he has to click very frequently. In these scenario, moving the mouse to-and-from pallette is too troublesome. For these scenarios, you want the tools close to where it is needed. To do so, you click-and-drag the group you are interested from the pallete

Ooi-detachGroupFromPallette.png

Note that click-and-drag actually clone the group into a "floating" window, not detaching the group from the pallette. This means the user can simply delete the "floating" window after he is done with it. This approach is better than the floating toolbar because if you do delete it accidentally, it is likely that you still have the pallete display. Hence, you simply click-and-drag from the pallette again, instead of having to hunt for it in the menu system.

This system is meant to temporary put the tools you need near where you need it. It is not meant to be a replacement/alternative to the pallette system.

Creating new pallette | Editing the pallette

For advanced user, they can create pallettes.


After creating a new empty pallette, to populate the pallete, one can populate the pallete the traditional way, i.e., selecting tools from a dialog box. However, the pallette system will offer two other ways to populate the pallette:

  1. Click and drag groups from another pallette
  2. create a new group, but drag tools from another pallette

Ooi-createNewPallette.png


Future possibilities

  1. OOo's plugin can contribute new pallette
  2. Users save pallettes along with their documents or as a separate file, to share with friends


Slide Edit Window

Guide lines to align objects

The best way to help align objects with respect to another object/slide is to help guiding lines appear where appropriate. The reference model is the way Apple iWork's, with the following addition:

  1. Extra guiding lines, possibly on different colour, for the edge of the "printable area" defined by the template. This is useful to ensure all slides looks exactly the same, especially after user moves objects around.

Ooi-guidelines.png


Text wrapping

If is very useful to be able to wrap text around another object. There are two possible way.

The first way is to allow adjusting the left/right margin for individual line:

Ooi-textwrapping1.png

The second way (preferred method) is to allow user to make TextBox aware of the overlap between it's bounding box, and another object's bounding box. It will use this information to wrap around the object.

Ooi-textwrapping2.png

Apology for the mistake in the pictures. The object is on the right, not left




The observation I wish to exploit is the fact that Impress is normally used for presentation.

  • Most projectors still uses 4:3 format. A computer display normally uses 16:9 format. This means we have more space at the left/right of the screen to play. But the demand for space on the top/bottom are more pressing.
  • Most projectors are at lower resolution from a computer display. We can use this to allow users to display the full slide (the preferred mode) and use spaces around the display to host tools.
  • However, not everyone has a large screen. The popularity of so-called netbook means the small screen problem is going to stay. Therefore, it is necessary to allow hiding tools and other items to maximize the area for slide editing.

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.

Slide Sorter View

The Slide Sorter view will keep all its existing functionalities, plus :

Ooi-slideSorterView.png


Combined View

The presentation is made up of three components: Slide, Notes and Handouts. Why cann't we see ALL three at the same time? The Combined View make this happens.

Ooi-combinedView.png

Limited editing ability is available for all three components.

For smaller screen, as the mouse hover on the component, it will be enlarged for viewing and editing.


Master/Template creation

The aim is to make creating master slides/presentation template so easy that the user actually wants to design the master slides from scratch rather than using existing templates.

In the Standard Design Mode

context (right click) menu
  1. Add to slide master : For every object on the slide, its context menu will have a entry called "add to slide master". Clicking this will put the object into the slide master and this change will be propagated to all existing slides and new slides.
  1. Removing objects : If you right-click on an object which is on the master, you will get the following option
    1. Remove from slide master : Remove the object from the slide master. The changes affect the master, i.e., it will be propagated to all existing slides and new slides.
    2. Remove from slide : Remove the object from this slide only.

In the Master Design Mode

In this mode, no slide content is shown, only elements for the master. (to beef up)

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

Author / Team Member Contact (OpenOffice.org login name, used for email)
Cinly Ooi ooi

Comments

Community members, this is where your comments and questions concerning completeness and clarity should be written. Please add your OpenOffice.org login name to let us contact you via email.

Your space :-)

Personal tools