Difference between revisions of "Proposal by Jörg Sievers"

From Apache OpenOffice Wiki
Jump to: navigation, search
(Cleaned it up, added name of the author)
(New header design)
 
(18 intermediate revisions by 2 users not shown)
Line 1: Line 1:
__NOTOC__
 
= Design Proposal [Add Proposal Title] =
 
 
{{User Experience Community}}
 
{{User Experience Community}}
 
{| style="border: thin dashed #CC2222; padding:5px; background:#FFDAB9"
 
{| style="border: thin dashed #CC2222; padding:5px; background:#FFDAB9"
Line 6: Line 4:
 
| 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  [mailto:ui@ux.openoffice.org ui@ux.openoffice.org] mailing list.
 
| 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  [mailto:ui@ux.openoffice.org ui@ux.openoffice.org] mailing list.
 
|}
 
|}
 +
= Design Proposal "Style Editing Directly at Toolbars" =
  
The following design proposal is part of the collection of design proposals for “Accessing Functionality”, which is part of Project Renaissance.
+
The following design proposal is part of the collection of [[Renaissance/Design_Proposals_for_“Accessing_Functionality”|design proposals for “Accessing Functionality”]], which is part of [[Renaissance|Project Renaissance]].
  
 +
__TOC__
 
== Summary and Status ==
 
== Summary and Status ==
<span style="color:DimGray">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.)</span>
+
If you want to use in text objects text styles for a style based/global formatting of your text instead of hard coded formats you need to open the ''Styles and Formatting dialog'' [F11] to be able to change the style there and a new dialog is being opened with several tab pages where you can make your changes.
  
Status: Request for Comments
+
Idea: After I have created a text object or editing a text in objects the ''Text Formatting''-toolbar is already opened. A simple ''Edit style''-function should highlight the toolbar (you maybe know it from Web 2.0 applications) and the changes you now directly making on the  ''Text Formatting''-toolbar will be stored into the style instead of being hard coded only for this box. You won't need for simple changes (color, font, size, italic, bold, ...) the additional dialog and all the tab pages.
  
<span style="color:DimGray">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”. </span>
+
Status: Request for Comments
  
 
== Mockup ==
 
== Mockup ==
<span style="color:DimGray">Please add your main “wireframe” mockup. For example: A mockup which shows the functionality for adding a slide in Impress.
 
  
 
{| class="prettytable"
 
{| class="prettytable"
| [[Image:ProjectRenaissance DesignProposalCollection Template EmptyProposal.png|640px|thumb]]
+
| [[Image:Mockup_1.png|640px|thumb]]
 +
 
 +
|}
 +
 
 +
{| class="prettytable"
 +
| [[Image:Mockup_2.png|640px|thumb]]
  
 
|}
 
|}
  
 
== Detailed Description ==
 
== Detailed Description ==
<span style="color:DimGray">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.</span>
+
=== What and How ===
 +
* The toolbar(s) need to have a simple, well designed button for ''Edit style'' (not on mock-ups)
 +
* After pressing that button ''Edit style'' items which can be used for change a text style needs to be highlighted and also the toolbar needs to be more in front (in the mock-ups used ''float''-feature of toolbars as one idea)
 +
* Also the style name should be displayed
 +
* the edit area needs to be locked but if an item on the toolbar is switched the text object should be changed like a live preview
 +
* The main toolbar, the slide panes ... should be put into ''the back''
 +
* If ''Edit style'' is pressed again the edit area should be available again and the toolbar should look like before
  
* <span style="color:DimGray">'''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.</span>
+
=== Why ===
* <span style="color:DimGray">'''Explain the rationale and assumptions''': If you decided to go for a certain concept, then please explain why you chose this.</span>
+
Instead of introducing a different dialog for editing the style of a text the well known toolbar is being re-used for it. Web 2.0 application doing this to save resources.  
* <span style="color:DimGray">'''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.</span>
+
* <span style="color:DimGray">'''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.</span>
+
  
== Additional Material and Mockups ==
+
From user experience view it makes sense not to introduce additional dialogs when doing the same work. The user just want to change the text. He wants to change it not for one text object he wants to do it for many in his presentation (or any other kind of document).
<span style="color:DimGray">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.</span>
+
 
 +
The main reason for changing the UI from my point of view would be to '''reduce complexity'''. Mouse clicks are a good metric to see how complex it is to get a job done. Also the items you will get and where you have to make your selection is a big complexity issue (e.g. to select a tab page when 3 are visible at that time is easy; to select the correct tab page when 14 tab pages are visible is more complex). I have marked these '''barriers''' in ther numbering below.
 +
 
 +
===== To date =====
 +
To edit a text style you need 5 clicks to change the font size.
 +
 
 +
After selecting Selecting the object...
 +
# context menu ('''secondary mouse click''') or Format / Styles and Formatting (which are 2 clicks) or F11 (no click, keyboard shortcut)
 +
# Select edit style ('''13th entry from 14''')
 +
# Switch to tab page Font ('''14 tab pages visible''')
 +
# Change the font size
 +
# OK on tab page
 +
 
 +
===== Future =====
 +
In the suggested way of doing it with toolbars you would need less (4) and won't have one of the '''barriers''' as in the today's behavior.
 +
 
 +
After selecting Selecting the object...
 +
# Clicking on new button ''Edit Style'' (or whatever it would be named)
 +
# Using the drop down box for the font size
 +
# Selecting the font size
 +
# Clicking on new button ''Edit Style'' (or whatever it would be named)
  
 
== Author or Team Working on This Proposal ==
 
== Author or Team Working on This Proposal ==
Line 42: Line 70:
  
 
|-
 
|-
| Jörg Sievers
+
| Joerg Sievers
| <span style="color:DimGray">OpenOffice.org Login Name</span>
+
| jsi
 +
|-
 +
| Jan-Felix Wittmann
 +
| jfwittmann
 +
|-
 +
| Lars Behrmann
 +
| larsbehr
 +
|-
 +
| Christian Jansen
 +
| cj
 +
|-
 +
| Andreas Bartel
 +
| andba
  
 
|-
 
|-
Line 58: Line 98:
 
|}
 
|}
  
<span style="color:DimGray">Your space :-)</span>
+
{| style="border: thin dashed DarkGreen; padding:5px; background:#c3ebae"
 +
|-
 +
|
 +
Hi Jörg,
 +
 
 +
if a user set e.g. the font size of a style to 10pt. How can he remove this font size setting from the style again?
 +
 
 +
Best Regards --[[User:OO@WorldWartWeb.com|OO@WorldWartWeb.com]] 07:06, 14 May 2009 (UTC)
 +
}
 +
{| style="border: thin dashed DarkGreen; padding:5px; background:#c3ebae"
 +
|-  
 +
|
 +
Nice question:
 +
 
 +
Same way but...
 +
in the step where you select the font size it should be also possible to reset the font size to default or selecting ''none'' in the
 +
''Edit Style''-mode.
 +
 
 +
Unsetting a style attribute in styles is also today a problem, so a common solution would also help there.
 +
 
 +
--[[User:Jsi|Jsi]] 10:08, 14 May 2009 (UTC)
 +
}

Latest revision as of 23:01, 26 May 2009

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 "Style Editing Directly at Toolbars"

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

Summary and Status

If you want to use in text objects text styles for a style based/global formatting of your text instead of hard coded formats you need to open the Styles and Formatting dialog [F11] to be able to change the style there and a new dialog is being opened with several tab pages where you can make your changes.

Idea: After I have created a text object or editing a text in objects the Text Formatting-toolbar is already opened. A simple Edit style-function should highlight the toolbar (you maybe know it from Web 2.0 applications) and the changes you now directly making on the Text Formatting-toolbar will be stored into the style instead of being hard coded only for this box. You won't need for simple changes (color, font, size, italic, bold, ...) the additional dialog and all the tab pages.

Status: Request for Comments

Mockup

Mockup 1.png
Mockup 2.png

Detailed Description

What and How

  • The toolbar(s) need to have a simple, well designed button for Edit style (not on mock-ups)
  • After pressing that button Edit style items which can be used for change a text style needs to be highlighted and also the toolbar needs to be more in front (in the mock-ups used float-feature of toolbars as one idea)
  • Also the style name should be displayed
  • the edit area needs to be locked but if an item on the toolbar is switched the text object should be changed like a live preview
  • The main toolbar, the slide panes ... should be put into the back
  • If Edit style is pressed again the edit area should be available again and the toolbar should look like before

Why

Instead of introducing a different dialog for editing the style of a text the well known toolbar is being re-used for it. Web 2.0 application doing this to save resources.

From user experience view it makes sense not to introduce additional dialogs when doing the same work. The user just want to change the text. He wants to change it not for one text object he wants to do it for many in his presentation (or any other kind of document).

The main reason for changing the UI from my point of view would be to reduce complexity. Mouse clicks are a good metric to see how complex it is to get a job done. Also the items you will get and where you have to make your selection is a big complexity issue (e.g. to select a tab page when 3 are visible at that time is easy; to select the correct tab page when 14 tab pages are visible is more complex). I have marked these barriers in ther numbering below.

To date

To edit a text style you need 5 clicks to change the font size.

After selecting Selecting the object...

  1. context menu (secondary mouse click) or Format / Styles and Formatting (which are 2 clicks) or F11 (no click, keyboard shortcut)
  2. Select edit style (13th entry from 14)
  3. Switch to tab page Font (14 tab pages visible)
  4. Change the font size
  5. OK on tab page
Future

In the suggested way of doing it with toolbars you would need less (4) and won't have one of the barriers as in the today's behavior.

After selecting Selecting the object...

  1. Clicking on new button Edit Style (or whatever it would be named)
  2. Using the drop down box for the font size
  3. Selecting the font size
  4. Clicking on new button Edit Style (or whatever it would be named)

Author or Team Working on This Proposal

Author / Team Member Contact (OpenOffice.org login name, used for email)
Joerg Sievers jsi
Jan-Felix Wittmann jfwittmann
Lars Behrmann larsbehr
Christian Jansen cj
Andreas Bartel andba
Real Name OpenOffice.org Login Name

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.

Hi Jörg,

if a user set e.g. the font size of a style to 10pt. How can he remove this font size setting from the style again?

Best Regards --OO@WorldWartWeb.com 07:06, 14 May 2009 (UTC) }

Nice question:

Same way but... in the step where you select the font size it should be also possible to reset the font size to default or selecting none in the Edit Style-mode.

Unsetting a style attribute in styles is also today a problem, so a common solution would also help there.

--Jsi 10:08, 14 May 2009 (UTC) }

Personal tools