Difference between revisions of "Sidebar Proposal by IBM"

From Apache OpenOffice Wiki
Jump to: navigation, search
(Created page with '{{User Experience Community}} {| style="border: thin dashed #CC2222; padding:5px; background:#FFDAB9" |- | Please do not edit this page unless you are the original author. Your …')
 
m (→‎Properties Panel: Fixed typos)
 
(11 intermediate revisions by one other user not shown)
Line 9: Line 9:
  
 
__TOC__
 
__TOC__
−
== Summary and Status ==
+
== Summary==
 
   
 
   
 
{| style="border: thin dashed #ff9900; padding:5px; background:#ffff99"
 
{| style="border: thin dashed #ff9900; padding:5px; background:#ffff99"
 
|-  
 
|-  
−
|We propose a sidebar way to organize the commands/UI entries on OpenOffice.org UI.  
+
|We propose a way which we call "Sidebar" to organize the commands/UI entries on OpenOffice.org UI.  
 
* All panels in OpenOffice.org can be docked to this sidebar.
 
* All panels in OpenOffice.org can be docked to this sidebar.
 
* Users can switch the panels via tabs beside the docked panels.
 
* Users can switch the panels via tabs beside the docked panels.
Line 21: Line 21:
 
* Current OpenOffice.org UI can be migrated to this UI easily and quickly.
 
* Current OpenOffice.org UI can be migrated to this UI easily and quickly.
 
* Users don't need to suffer the big changes and knowledge break, like what MS Ribbon did.
 
* Users don't need to suffer the big changes and knowledge break, like what MS Ribbon did.
−
* Provide a reasonable layout. More and more screens are wide nowadays. Put such UI on side will save the vertical spacing on screen and provide more spacing for editing.
+
* Provide a reasonable layout. More and more screens are wide nowadays. Put such UI on side will save the vertical spacing on screen and provide more space for editing.
  
 
|}
 
|}
−
 
−
Status: Complete
 
 
   
 
   
  
−
== Mockups ==
+
== Sidebar ==
  
−
 
+
'''Manage the panels with Sidebar'''
−
===1024x768 with full sidebar===
+
* All panels of OOo 3.1 can be docked to the side of editing area.
  
 
{| class="prettytable"
 
{| class="prettytable"
−
| [[Image:Martinu_-_General_Mockup_1_-_Home_sidebar.png|640px|thumb|Update: I know, this ocre color is ugly. I wanted to accentuate the fact that the upper (ocre) part of the sidebar is fixed. The lower part is dynamic.]]
+
| [[Image:IBM_Sidebar_Properties.jpg]]
−
 
+
 
|}
 
|}
  
−
* The size of the picture is 1024x729 pixels. I have taken 39 pixels away in height: it is the size of the taskbar in Windows 7, which will probably be the standard when Renaissance becomes reality. The two standard panels in GNOME would take even more vertical space: 50 pixels height.
+
Users can click on the icons on a skinny bar beside the panel, to switch between panels.
−
 
+
<BR>
−
* This layout leaves more space for the document than in OOo 3.1.
+
<BR>
−
 
+
Here is an example: switch to Style List panel.
−
+
−
 
+
−
===1366x768 with full sidebar===
+
  
 
{| class="prettytable"
 
{| class="prettytable"
−
| [[Image:Martinu_-_General_Mockup_7_-_1366x768_Full_home_sidebar_-_vertical_slides_panel.png|640px|thumb|It is so wiiiiiiiiiiiiiiiiide! I am surprised myself that the design works so well - seems it could be really productive!]]
+
| [[Image:IBM_Sidebar_Style_list.jpg]]
−
 
+
 
|}
 
|}
 +
<BR>
 +
<BR>
 +
<BR>
 +
'''Customization'''
 +
* Users can select which panels will be shown on Sidebar. Just right-click on the skinny bar and set on a menu.
 +
<BR>
 +
<BR>
 +
'''Be Compatible with current behaviors of panels in OOo 3.1'''
 +
* Users are free to dock the panels. They can dock the panels to the Sidebar, as what we are shown here.
 +
* Users can also dock the panels to bottom/top/left, just like what users can do in current OOo 3.1.
  
−
* The size of the picture is 1366x729 pixels. As in the precedent mockup, have taken 39 pixels away in height for the OS taskbar(s).
 
  
−
* Why 1366x768? It appears to be the tendency for laptop panels, replacing 1280x800, and it is an example of a 16:9 ratio screen resolution. More explanation in the detailed description.
+
== Properties Panel ==
−
 
+
−
* I should have made the "Slide Pane" larger. There is plenty of horizontal space for it. (It would take a lot of time to correct, so please imagine it!)
+
−
 
+
−
* It looks really ugly, but I tried to "toolbarize" the view tabs. (Normal, Outline, Notes, Slide Sorter) As a toolbar it can be moved around - vertical, for example, it would eat less space. But my main point is that now, toolbars can also be added on the same "line", therefore not loosing space:
+
  
 +
'''The properties panel on sidebar'''
 +
* There are some sub-panels on properties panel. E.g. Text, Paragraph, Table, Area, Line, Graphic, Cell Appearance, Number Format, Master Page, Page Layout, Template, etc...
 +
* The properties panel will show different sub-panels for different context. E.g. When users are editing texts, the sub-panels like Text and Paragraph will be shown. When users focus on a slide, the sub-panels of Slide Layout, Template, and Master Page will be shown there.
 +
* So in most contexts, users don't need to switch between panels manually. They can get them on Properties Sidebar directly.
 +
<BR>
 +
<BR>
 +
'''Example: Editing texts'''
 +
<BR>
 +
Here is an example for the context when users editing texts. Text and Paragraph sub-panels will be shown on Properties panel.
 
{| class="prettytable"
 
{| class="prettytable"
−
| [[Image:Martinu_-_File_Menu_and_Toolbars_-_3_File_menu_and_slide_toolbar_in_1366x768_mockup.png|640px|thumb|Using widescreen space efficiently]]
+
| [[Image:IBM_Sidebar_Properties.jpg]]
−
 
+
 
|}
 
|}
  
−
+
<BR>
−
+
'''Example: The context when users select a page of presentation'''
−
 
+
<BR>
−
===800x600 with full sidebar===
+
When users select a page(click the thumbnail on Slide View or just click the blank on a page), the Layout, Master Page and Template will be shown as sub-panels on Properties sidebar.
−
 
+
<BR>
−
* If the vertical size of the Impress window goes under 700 pixels, the "Find a Command" group disappears.
+
Only recent 6 layouts and templates are shown on the panel.
−
 
+
 
{| class="prettytable"
 
{| class="prettytable"
−
| [[Image:Martinu_-_General_Mockup_3_-_800x600_Full_home_sidebar.png|640px|thumb]]
+
| [[Image:IBM_Sidebar_SDPage.jpg]]
−
 
+
 
|}
 
|}
−
 
+
<BR>
−
* The size of the picture is 800x576 pixels. I have taken 24 pixels away in height for a taskbar.
+
Users can get all layouts/templates via a pop up panel.
−
 
+
−
* I should have reduced the height of the slide pane at the botton, it is the same size as in 1024x768. Please imagine it a litte bit smaller!
+
−
 
+
−
* This mockup has 600 pixels in height, and hence shows how the design '''adapts to notebooks screen resolutions'''.
+
−
 
+
−
 
+
−
===800x600 with collapsed sidebar===
+
−
 
+
−
* In any resolution, the sidebar is able to collapse.
+
−
 
+
 
{| class="prettytable"
 
{| class="prettytable"
−
| [[Image:Martinu_-_General_Mockup_3_-_800x600_Collapsed_home_sidebar.png|640px|thumb]]
+
| [[Image:SDPage_Popup.jpg]]
−
 
+
 
|}
 
|}
−
 
−
 
−
* Here is a proposal about how the collapsed sidebar could work:
 
−
 
−
 
−
[[Image:Martinu_-_General_Mockup_5_-_800x600_Collapsed_sidebar_animation.gif]]
 
−
 
−
(Sorry about the poor quality, it's the first animated picture in my life...)
 
−
 
−
* The collapsed sidebar would allow to go under 600 pixels height.
 
−
 
−
 
−
 
−
===How the Sidebar Selector works...===
 
−
 
−
* This is a variation on the sidebar theme, where the "File" and "Tools" groups stay on top of the sidebar. It was also influenced by comments from Brian Fleeger and Corsbu.
 
−
 
−
[[Image:Martinu_-_General_Mockup_6_-_Sidebars_with_fixed_Files_and_Tools_groups.gif]]
 
−
 
−
(Animated gif, 3 frames)
 
−
 
−
 
−
 
−
===More Mockups... Writer!===
 
−
 
−
The focus of the call proposal is Impress. Nevertheless, Writer is interesting too, because it suffers more than Impress of the wide-screen trend. The page is mostly vertical (portrait), and there is no Slide Pane element. Two major differences!
 
−
 
−
The current Writer aspect eats up a lot of vertical space, and leaves huge chunks of unused space on the sides. Here is how Writer 3.1 looks like on a 10:9 wide-screen monitor (1366x768):
 
−
 
−
{| class="prettytable"
 
−
| [[Image:Martinu_-_Writer_3.1_mockup_-_1366x768.gif|640px|thumb|(Animated gif, 3 frames)]]
 
  
 +
{| style="border: thin dashed #ff9900; padding:5px; background:#ffff99"
 +
|-
 +
|Author: Ma Li
 +
|-
 +
|User Experience Designer | IBM Lotus Symphony                               
 +
|-
 +
|Locate in Beijing, China                                                                   
 +
|-
 +
|Mail: malicdl@cn.ibm.com
 
|}
 
|}
−
 
−
 
−
'''A vertical UI would allow to display more of the most important element: the page!'''
 
−
 
−
{| class="prettytable"
 
−
| [[Image:Martinu_-_General_Mockup_8_-_Writer_in_1366x768.png|640px|thumb|The Zoom should say 130% instead of 100%!  Compare the size of the page with the previous mockup.]]
 
−
 
−
|}
 
−
 
−
 
−
If we have 2 sidebars, we end up with the same zoom as in the first Writer mockup (100%), but with a 23% displayed page height increase:
 
−
 
−
{| class="prettytable"
 
−
| [[Image:Martinu_-_General_Mockup_9_-_Writer_in_1366x768_with_two_toolbars.png|640px|thumb]]
 
−
|}
 
−
 
−
 
−
Here comes the last general mockup. Unless other mockups, this one has almost everything:
 
−
* Toolbars, wich expand with text labels, as wide as possible,
 
−
* Ruler button, to show/hide the rulers easily,
 
−
* Zoom control, possible to type in zoom, or use left-click,
 
−
* Styles with preview,
 
−
* Sidebar, of course :-)
 
−
 
−
 
−
{| class="prettytable"
 
−
| [[Image:Martinu_-_General_Mockup_10_-_Writer_in_1366x768_-_With_Styles,_ruler_button,_zoom.png|640px|thumb|A very usable Writer!]]
 
−
|}
 
−
 
−
 
−
 
−
== Detailed Description ==
 
−
 
−
* 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 on some subjects, I am using material I had already written - for example the "line spacing" 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:
 
−
 
−
[http://www.pcmag.com/article2/0,2817,2331000,00.asp Widescreen Laptops Get Wider]
 
−
 
−
* Laptop have topped Desktop computer sales since Q4 2008. So they can't be ignored.
 
−
 
−
[http://www.internetnews.com/hardware/article.php/3793341/Notebooks%2BTop%2BDesktop%2BSales%2BAhead%2Bof%2BSchedule.htm&cid=1282828729&ei=dYdTSd6zAYrGMtDtqJYC&usg=AFQjCNGDJlt9kS3ikN6vTq8p4xa0KzYhRg Notebooks Top Desktop Sales Ahead of Schedule]
 

Latest revision as of 21:57, 10 September 2021

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.

Design Proposal -- Sidebar -- By IBM

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

Summary

We propose a way which we call "Sidebar" to organize the commands/UI entries on OpenOffice.org UI.
  • All panels in OpenOffice.org can be docked to this sidebar.
  • Users can switch the panels via tabs beside the docked panels.
  • The properties which related to current context will be shown as sub-panels of properties panel.
Benefit:
  • Current OpenOffice.org UI can be migrated to this UI easily and quickly.
  • Users don't need to suffer the big changes and knowledge break, like what MS Ribbon did.
  • Provide a reasonable layout. More and more screens are wide nowadays. Put such UI on side will save the vertical spacing on screen and provide more space for editing.


Sidebar

Manage the panels with Sidebar

  • All panels of OOo 3.1 can be docked to the side of editing area.
IBM Sidebar Properties.jpg

Users can click on the icons on a skinny bar beside the panel, to switch between panels.

Here is an example: switch to Style List panel.

IBM Sidebar Style list.jpg




Customization

  • Users can select which panels will be shown on Sidebar. Just right-click on the skinny bar and set on a menu.



Be Compatible with current behaviors of panels in OOo 3.1

  • Users are free to dock the panels. They can dock the panels to the Sidebar, as what we are shown here.
  • Users can also dock the panels to bottom/top/left, just like what users can do in current OOo 3.1.


Properties Panel

The properties panel on sidebar

  • There are some sub-panels on properties panel. E.g. Text, Paragraph, Table, Area, Line, Graphic, Cell Appearance, Number Format, Master Page, Page Layout, Template, etc...
  • The properties panel will show different sub-panels for different context. E.g. When users are editing texts, the sub-panels like Text and Paragraph will be shown. When users focus on a slide, the sub-panels of Slide Layout, Template, and Master Page will be shown there.
  • So in most contexts, users don't need to switch between panels manually. They can get them on Properties Sidebar directly.



Example: Editing texts
Here is an example for the context when users editing texts. Text and Paragraph sub-panels will be shown on Properties panel.

IBM Sidebar Properties.jpg


Example: The context when users select a page of presentation
When users select a page(click the thumbnail on Slide View or just click the blank on a page), the Layout, Master Page and Template will be shown as sub-panels on Properties sidebar.
Only recent 6 layouts and templates are shown on the panel.

IBM Sidebar SDPage.jpg


Users can get all layouts/templates via a pop up panel.

SDPage Popup.jpg
Author: Ma Li
IBM Lotus Symphony
Locate in Beijing, China
Mail: malicdl@cn.ibm.com
Retrieved from "https://wiki.openoffice.org/w/index.php?title=Sidebar_Proposal_by_IBM&oldid=249021"
Personal tools