Difference between revisions of "AOO UX Design Exploration - Task Pane Content Panel - User Interface Design Proposals"

From Apache OpenOffice Wiki
Jump to: navigation, search
 
(29 intermediate revisions by 4 users not shown)
Line 1: Line 1:
== Task Pane Content Panel - UX Design propoals ==
+
== [[Sidebar]] Content Panel - UX Design propoals ==
For frame work part, use flat tab option to replace accordion effect based on Kevin's proposal.  
+
For frame work part, use flat tab option to replace accordion effect. <br />
For content part, use AOO icons replace Symphony icons. Create 3 proposals to show the status of ‘Unfolded/Folded’ in Content Panels, and also created 3 proposals for Content panel layouts:
+
For content part, create 3 proposals to show the status of ‘Unfolded/Folded’ in Content Panels, and also created 3 proposals for Content panel layouts:<br />
  
‘Unfolded/folded’ of Content Panel: 
+
‘Unfolded/folded’ of Content Panel: <br />
Proposal 1. Grey Title + Grey Panel 
+
Proposal 1. Grey Title + Grey Panel <br />
Proposal 2. Grey Title + White Panel  
+
Proposal 2. Grey Title + White Panel<br />
Proposal 3. Dark Grey Title + White Panel(Consistent with current AOO definitions)
+
Proposal 3. Dark Grey Title + White Panel(Consistent with current AOO definitions)<br />
  
Content panel layouts:  
+
Content panel layouts:<br />
Proposal 1. Gradient Color Background 
+
Proposal A. Gradient Color Background<br />
Proposal 2. Simple Line as spliter  
+
Proposal B. Simple Line as spliter<br />
Proposal 3. Emboss effect  
+
Proposal C. Emboss effect<br />
  
To combine these proposals, totally we have 9 options for Content Panel.
+
To combine these proposals, totally we have 9 options for Content Panel.<br />
  
 
{| class="wikitable"
 
{| class="wikitable"
Line 27: Line 27:
 
| [[File:AOO 40 Sidebar Option 3.png]]
 
| [[File:AOO 40 Sidebar Option 3.png]]
 
|-
 
|-
| Proposal B
+
| Proposal B. Simple Line as spliter
 
| [[File:AOO 40 Sidebar Option 4.png]]
 
| [[File:AOO 40 Sidebar Option 4.png]]
 
| [[File:AOO 40 Sidebar Option 5.png]]
 
| [[File:AOO 40 Sidebar Option 5.png]]
 
| [[File:AOO 40 Sidebar Option 6.png]]
 
| [[File:AOO 40 Sidebar Option 6.png]]
 
|-
 
|-
| Proposal C
+
| Proposal C. Emboss effect
 
| [[File:AOO 40 Sidebar Option 7.png]]
 
| [[File:AOO 40 Sidebar Option 7.png]]
 
| [[File:AOO 40 Sidebar Option 8.png]]
 
| [[File:AOO 40 Sidebar Option 8.png]]
 
| [[File:AOO 40 Sidebar Option 9.png]]
 
| [[File:AOO 40 Sidebar Option 9.png]]
 
|}
 
|}
 +
 +
Option 10:Gradient section title + Light grey panel + Simple line separators<br />
 +
[[File:Option 10.png]]<br />
 +
 +
Screenshots of Presentation editor with option 10<br />
 +
[[File:Screenshots of Presentation editor with proposal 10.png]]<br />
 +
 +
 +
== Overview visual information definition ==
 +
Including the gradient color, the background color, the border line, the font color, the font size and so on.<br />
 +
All the overview visual definition is based on font Arial 11. We set all distance and size based on that. If the font size has been changed, other distance and size should be also changed.<br />
 +
We use Win7 as OS reference, all systems effects that we mentioned in the proposal follow Win7. If the OS has been changed, the system effects should be also changed and follow the corresponding OS.<br />
 +
[[File:AOO4.0sidebar visual option size marking .jpg]][[File:AOO4.0sidebar panel visual option size marking .jpg]]
 +
 +
== Sidebar specific panel design ==
 +
Two design principles:<br />
 +
1.Icon style of sidebar in AOO 4.0. From UX point of view, to avoid the usability issues, we need to make sure the same icon for the same function in AOO and all the icons have the same visual style. So we need to use AOO icons in sidebar. For the buttons which did not have AOO icons, we will use Symphony icons.<br />
 +
2. UI controls in A00 4.0. Choose the one has more user-friendly interaction behavior. Symphony did lots of improvements based on the original Open Office, so the current behavior in Symphony is more reasonable choice, like Number Bullet, Line Style...<br />
 +
{| class="wikitable" style="background-color:#FFFFFF;"
 +
|-
 +
!
 +
!Document Editor<br/>contextual sections
 +
!scope="col" width="490" |Spreadsheet Editor<br/> contextual sections
 +
!Presentation Editor<br/> contextual sections
 +
!scope="col" width="320" |Dropdown List
 +
!Note
 +
|-
 +
!1 Text
 +
|[[File:Text-DE-22-aa.jpg]][[File:Text-DE-22-ab.jpg]]
 +
|[[File:Text-SE-23-aa.jpg|left|230px]][[File:Text-SE-23-ba.jpg|right|230px]][[File:Text-SE-23-ab.jpg|left|230px]][[File:Text-SE-23-bb.jpg|right|230px]]
 +
|[[File:Text-PE-24-aa.jpg]][[File:Text-PE-24-ab.jpg]]
 +
|[[File:Text-25-aa.jpg|left|145px]][[File:Text-25-ba.jpg|right|145px]][[File:Text-25-ab.jpg|left|145px]][[File:Text-25-bb.jpg|right|145px]]
 +
|
 +
|-
 +
!2 Paragraph
 +
|[[File:Paragraph-DE-32-aa.jpg]][[File:Paragraph-DE-32-ab.jpg]]
 +
|no need
 +
|[[File:Paragraph-PE-34-aa.jpg]][[File:Paragraph-PE-34-ab.jpg]]
 +
|[[File:Paragraph-35-aa.jpg|left|145px]][[File:Paragraph-35-ba.jpg|right|145px]][[File:Paragraph-35-ab.jpg|left|145px]][[File:Paragraph-35-bb.jpg|right|145px]]
 +
|
 +
|-
 +
!3 Slide Layout
 +
|no need
 +
|no need
 +
|[[File:Slide layout-PE-44-aa.jpg]]
 +
|no need
 +
|
 +
|-
 +
!4 Line
 +
|[[File:Line-DE-52-aa.jpg]]
 +
|[[File:Line-SE-53-aa.jpg]]
 +
|[[File:Line-PE-54-aa.jpg]]
 +
|[[File:Line-55-aa.jpg|left|150px]][[File:Line-55-ba.jpg|right|140px]][[File:Line-55-ab.jpg|left|150px]][[File:Line-55-ac.jpg|right|140px]][[File:Line-55-bc.jpg]]
 +
|
 +
|-
 +
!5 Area
 +
|[[File:Area-DE-62-aa.jpg]][[File:Area-DE-62-ab.jpg]]
 +
|[[File:Area-SE-63-aa.jpg]][[File:Area-SE-63-ab.jpg]]
 +
|[[File:Area-PE-64-aa.jpg]][[File:Area-PE-64-ab.jpg]]
 +
|[[File:Area-65-aa.jpg]][[File:Area-65-ba.jpg]][[File:Area-65-ca.jpg]]
 +
|Use AOO Icon to replace Symphony Icon in control on sidebar.
 +
|-
 +
!6 Alignment
 +
|no need
 +
|[[File:Aligment-SE-73-aa.jpg]][[File:Aligment-SE-73-ab.jpg]]
 +
|no need
 +
|[[File:Aligment-75-aa.jpg]]
 +
|
 +
|-
 +
!7 Number Format
 +
|no need
 +
|[[File:Number Format-SE-83-aa.jpg]][[File:Number Format-SE-83-ab.jpg]]
 +
|no need
 +
|[[File:Number Format-85-aa.jpg]]
 +
|
 +
|-
 +
!8 Page
 +
|[[File:Page-DE-92-aa.jpg]][[File:Page-DE-92-ab.jpg]]
 +
|no need
 +
|no need
 +
|[[File:Page-95-aa.jpg]][[File:Page-95-ba.jpg]][[File:Page-95-ab.jpg]][[File:Page-95-bb.jpg]]
 +
|
 +
|-
 +
!9 Position and Size
 +
|[[File:Position and Size-DE-102-aa.jpg]][[File:Position and Size-DE-102-ba.jpg]]
 +
|[[File:Position and Size-SE-103-aa.jpg]][[File:Position and Size-SE-103-ba.jpg]]
 +
|[[File:Position and Size-PE-104-aa.jpg]]
 +
|[[File:Position and Size-105-aa.jpg]]
 +
|
 +
|-
 +
!10 Graphic
 +
|[[File:Graphic-DE-112-aa.jpg]][[File:Graphic-DE-112-ab.jpg]]
 +
|[[File:Graphic-SE-113-aa.jpg]][[File:Graphic-SE-113-ab.jpg]]
 +
|[[File:Graphic-PE-114-aa.jpg]][[File:Graphic-PE-114-ab.jpg]]
 +
|[[File:Graphic-115-aa.jpg]]
 +
|All use Symphony controls in this panel, except color mode.
 +
|-
 +
!11 Cell Appearance
 +
|no need
 +
|[[File:Cell Appearance-SE-123-aa.jpg]][[File:Cell Appearance-SE-123-ab.jpg]]
 +
|no need
 +
|[[File:Cell Appearance-125-aa.jpg|left|145px]][[File:Cell Appearance-125-ba.jpg|right|145px]][[File:Cell Appearance-125-ab.jpg|left|145px]][[File:Cell Appearance-125-bb.jpg|right|145px]]
 +
|Use AOO Icon to replace Symphony Icon in control on sidebar.
 +
|-
 +
!12 Wrap
 +
|[[File:Wrap-DE-132-aa.jpg]]
 +
|no need
 +
|no need
 +
|no need
 +
|
 +
|-
 +
!13 Table Design
 +
|no need
 +
|no need
 +
|[[File:Table Design-PE-144-aa.jpg]]
 +
|no need
 +
|
 +
|}
 +
 +
== Controls consistent issues proposal ==
 +
We should pursue the same behavior for the same control in one software, if we choose the Symphony behavior, we should apply it to all areas, such as toolbar, property dialog... At least we need to keep the first level UI elements on controls of sidebar and toolbar consistent for 4.0.<br />
 +
Summarize all 13 controls that will show both on sidebar and toolbar and give the design proposal.<br />
 +
 +
{| class="wikitable" style="background-color:#ffffff;"
 +
|-
 +
! Panel
 +
! Control
 +
! Sidebar(4.0 Design Proposal)
 +
! Toolbar(3.4.1)
 +
! Toolbar(4.0 Design Proposal)
 +
! Note
 +
|-
 +
! rowspan=3|Text
 +
| 1. Font Color
 +
| [[File:Text-23-S4.0.jpg]]
 +
| [[File:Text-24-T3.4.1.jpg]]
 +
| [[File:Text-25-T4.0.jpg]]
 +
| Change the color panel arrange layout from 10*10 to 8*13 to make the similar colors in one row.
 +
|-
 +
| 2. Highlight Color
 +
| [[File:Text-33-S4.0.jpg]]
 +
| [[File:Text-34-T3.4.1.jpg]]
 +
| [[File:Text-35-T4.0.jpg]]
 +
| Change the color panel arrange layout from 10*10 to 8*13 to make the similar colors in one row.
 +
|-
 +
| 3. Underline
 +
| [[File:Text-43-S4.0.jpg]]
 +
| [[File:Text-44-T3.4.1.jpg]]
 +
| [[File:Text-44-T3.4.1.jpg]]
 +
|
 +
|-
 +
! rowspan=4|Paragraph
 +
| 4. Bullets
 +
| [[File:Paragraph-53-S4.0.jpg]]
 +
| [[File:Paragraph-54-T3.4.1.jpg]]
 +
| [[File:Paragraph-54-T3.4.1.jpg]]
 +
| Use AOO icon to replace Symphony icon on Sidebar.
 +
|-
 +
| 5. Numbering
 +
| [[File:Paragraph-63-S4.0.jpg]]
 +
| [[File:Paragraph-64-T3.4.1.jpg]]
 +
| [[File:Paragraph-64-T3.4.1.jpg]]
 +
| Use AOO icon to replace Symphony icon on Sidebar.
 +
|-
 +
| 6. Paragraph Background Color
 +
| [[File:Paragraph-73-S4.0.jpg]]
 +
| [[File:Paragraph-74-T3.4.1.jpg]]
 +
| [[File:Paragraph-75-T4.0.jpg]]
 +
| Change the color panel arrange layout from 10*10 to 8*13 to make the similar colors in one row.
 +
|-
 +
| 7. Line Spacing
 +
| [[File:Paragraph-83-S4.0.jpg]]
 +
| [[File:Paragraph-84-T3.4.1.jpg]]
 +
| [[File:Paragraph-85-T4.0.jpg]]
 +
| Use Symphony icons to replace corresponding AOO icons on toolbar.
 +
|-
 +
! rowspan=3|Line
 +
| 8. Width
 +
| [[File:Line-93-S4.0.jpg]]
 +
| [[File:Line-94-T3.4.1.jpg]]
 +
| [[File:Line-95-T4.0.jpg]]
 +
| Make the control on toolbar consistent with sidebar.
 +
|-
 +
| 9. Color
 +
| [[File:Line-103-S4.0.jpg]]
 +
| [[File:Line-104-T3.4.1.jpg]]
 +
| [[File:Line-105-T4.0.jpg]]
 +
| Change the color list to 8*13 to make the similar colors in one row.
 +
|-
 +
| 10. Style
 +
| [[File:Line-113-S4.0.jpg]]
 +
| [[File:Line-114-T3.4.1.jpg]]
 +
| [[File:Line-115-T4.0.jpg]]
 +
| Make the control on toolbar consistent with sidebar.
 +
|-
 +
! rowspan=2|Area
 +
| 11. Fill Type
 +
| [[File:Area-123-S4.0.jpg]]
 +
| [[File:Area-124-T3.4.1.jpg]]
 +
| [[File:Area-125-T4.0.jpg]]
 +
| Use "None" replace "Invisible"."None" is easier to understand for user.But the changing string maybe cause other issues,e.g. ACC and so on.Need to discuss.
 +
|-
 +
| 12. Color
 +
| [[File:Area-133-S4.0.jpg]]
 +
| [[File:Area-134-T3.4.1.jpg]]
 +
| [[File:Area-135-T4.0.jpg]]
 +
| Change the color list to 8*13 to make the similar colors in one row.Use AOO icon to replace Symphony icon.
 +
|-
 +
! Graphic
 +
| 13. Graphic-Color mode
 +
| [[File:Graphic-143-S4.0.jpg]]
 +
| [[File:Graphic-144-T3.4.1.jpg]]
 +
| [[File:Graphic-145-T4.0.jpg]]
 +
| Make the control on sidebar consistent with toolbar.
 +
|}
 +
 +
[[Category:UX]]
 +
[[Category:Visual Design]]

Latest revision as of 16:08, 4 January 2019

Sidebar Content Panel - UX Design propoals

For frame work part, use flat tab option to replace accordion effect.
For content part, create 3 proposals to show the status of ‘Unfolded/Folded’ in Content Panels, and also created 3 proposals for Content panel layouts:

‘Unfolded/folded’ of Content Panel:
Proposal 1. Grey Title + Grey Panel
Proposal 2. Grey Title + White Panel
Proposal 3. Dark Grey Title + White Panel(Consistent with current AOO definitions)

Content panel layouts:
Proposal A. Gradient Color Background
Proposal B. Simple Line as spliter
Proposal C. Emboss effect

To combine these proposals, totally we have 9 options for Content Panel.

Sidebar Options Proposal 1. Grey Title + Grey Panel Proposal 2. Grey Title + White Panel Proposal 3. Dark Grey Title + White Panel
Proposal A. Gradient Color Background AOO 40 Sidebar Option 1.png AOO 40 Sidebar Option 2.png AOO 40 Sidebar Option 3.png
Proposal B. Simple Line as spliter AOO 40 Sidebar Option 4.png AOO 40 Sidebar Option 5.png AOO 40 Sidebar Option 6.png
Proposal C. Emboss effect AOO 40 Sidebar Option 7.png AOO 40 Sidebar Option 8.png AOO 40 Sidebar Option 9.png

Option 10:Gradient section title + Light grey panel + Simple line separators
Option 10.png

Screenshots of Presentation editor with option 10
Screenshots of Presentation editor with proposal 10.png


Overview visual information definition

Including the gradient color, the background color, the border line, the font color, the font size and so on.
All the overview visual definition is based on font Arial 11. We set all distance and size based on that. If the font size has been changed, other distance and size should be also changed.
We use Win7 as OS reference, all systems effects that we mentioned in the proposal follow Win7. If the OS has been changed, the system effects should be also changed and follow the corresponding OS.
AOO4.0sidebar visual option size marking .jpgAOO4.0sidebar panel visual option size marking .jpg

Sidebar specific panel design

Two design principles:
1.Icon style of sidebar in AOO 4.0. From UX point of view, to avoid the usability issues, we need to make sure the same icon for the same function in AOO and all the icons have the same visual style. So we need to use AOO icons in sidebar. For the buttons which did not have AOO icons, we will use Symphony icons.
2. UI controls in A00 4.0. Choose the one has more user-friendly interaction behavior. Symphony did lots of improvements based on the original Open Office, so the current behavior in Symphony is more reasonable choice, like Number Bullet, Line Style...

Document Editor
contextual sections
Spreadsheet Editor
contextual sections
Presentation Editor
contextual sections
Dropdown List Note
1 Text Text-DE-22-aa.jpgText-DE-22-ab.jpg
Text-SE-23-aa.jpg
Text-SE-23-ba.jpg
Text-SE-23-ab.jpg
Text-SE-23-bb.jpg
Text-PE-24-aa.jpgText-PE-24-ab.jpg
Text-25-aa.jpg
Text-25-ba.jpg
Text-25-ab.jpg
Text-25-bb.jpg
2 Paragraph Paragraph-DE-32-aa.jpgParagraph-DE-32-ab.jpg no need Paragraph-PE-34-aa.jpgParagraph-PE-34-ab.jpg
Paragraph-35-aa.jpg
Paragraph-35-ba.jpg
Paragraph-35-ab.jpg
Paragraph-35-bb.jpg
3 Slide Layout no need no need Slide layout-PE-44-aa.jpg no need
4 Line Line-DE-52-aa.jpg Line-SE-53-aa.jpg Line-PE-54-aa.jpg
Line-55-aa.jpg
Line-55-ba.jpg
Line-55-ab.jpg
Line-55-ac.jpg
Line-55-bc.jpg
5 Area Area-DE-62-aa.jpgArea-DE-62-ab.jpg Area-SE-63-aa.jpgArea-SE-63-ab.jpg Area-PE-64-aa.jpgArea-PE-64-ab.jpg Area-65-aa.jpgArea-65-ba.jpgArea-65-ca.jpg Use AOO Icon to replace Symphony Icon in control on sidebar.
6 Alignment no need Aligment-SE-73-aa.jpgAligment-SE-73-ab.jpg no need Aligment-75-aa.jpg
7 Number Format no need Number Format-SE-83-aa.jpgNumber Format-SE-83-ab.jpg no need Number Format-85-aa.jpg
8 Page Page-DE-92-aa.jpgPage-DE-92-ab.jpg no need no need Page-95-aa.jpgPage-95-ba.jpgPage-95-ab.jpgPage-95-bb.jpg
9 Position and Size Position and Size-DE-102-aa.jpgPosition and Size-DE-102-ba.jpg Position and Size-SE-103-aa.jpgPosition and Size-SE-103-ba.jpg Position and Size-PE-104-aa.jpg Position and Size-105-aa.jpg
10 Graphic Graphic-DE-112-aa.jpgGraphic-DE-112-ab.jpg Graphic-SE-113-aa.jpgGraphic-SE-113-ab.jpg Graphic-PE-114-aa.jpgGraphic-PE-114-ab.jpg Graphic-115-aa.jpg All use Symphony controls in this panel, except color mode.
11 Cell Appearance no need Cell Appearance-SE-123-aa.jpgCell Appearance-SE-123-ab.jpg no need
Cell Appearance-125-aa.jpg
Cell Appearance-125-ba.jpg
Cell Appearance-125-ab.jpg
Cell Appearance-125-bb.jpg
Use AOO Icon to replace Symphony Icon in control on sidebar.
12 Wrap Wrap-DE-132-aa.jpg no need no need no need
13 Table Design no need no need Table Design-PE-144-aa.jpg no need

Controls consistent issues proposal

We should pursue the same behavior for the same control in one software, if we choose the Symphony behavior, we should apply it to all areas, such as toolbar, property dialog... At least we need to keep the first level UI elements on controls of sidebar and toolbar consistent for 4.0.
Summarize all 13 controls that will show both on sidebar and toolbar and give the design proposal.

Panel Control Sidebar(4.0 Design Proposal) Toolbar(3.4.1) Toolbar(4.0 Design Proposal) Note
Text 1. Font Color Text-23-S4.0.jpg Text-24-T3.4.1.jpg Text-25-T4.0.jpg Change the color panel arrange layout from 10*10 to 8*13 to make the similar colors in one row.
2. Highlight Color Text-33-S4.0.jpg Text-34-T3.4.1.jpg Text-35-T4.0.jpg Change the color panel arrange layout from 10*10 to 8*13 to make the similar colors in one row.
3. Underline Text-43-S4.0.jpg Text-44-T3.4.1.jpg Text-44-T3.4.1.jpg
Paragraph 4. Bullets Paragraph-53-S4.0.jpg Paragraph-54-T3.4.1.jpg Paragraph-54-T3.4.1.jpg Use AOO icon to replace Symphony icon on Sidebar.
5. Numbering Paragraph-63-S4.0.jpg Paragraph-64-T3.4.1.jpg Paragraph-64-T3.4.1.jpg Use AOO icon to replace Symphony icon on Sidebar.
6. Paragraph Background Color Paragraph-73-S4.0.jpg Paragraph-74-T3.4.1.jpg Paragraph-75-T4.0.jpg Change the color panel arrange layout from 10*10 to 8*13 to make the similar colors in one row.
7. Line Spacing Paragraph-83-S4.0.jpg Paragraph-84-T3.4.1.jpg Paragraph-85-T4.0.jpg Use Symphony icons to replace corresponding AOO icons on toolbar.
Line 8. Width Line-93-S4.0.jpg Line-94-T3.4.1.jpg Line-95-T4.0.jpg Make the control on toolbar consistent with sidebar.
9. Color Line-103-S4.0.jpg Line-104-T3.4.1.jpg Line-105-T4.0.jpg Change the color list to 8*13 to make the similar colors in one row.
10. Style Line-113-S4.0.jpg Line-114-T3.4.1.jpg Line-115-T4.0.jpg Make the control on toolbar consistent with sidebar.
Area 11. Fill Type Area-123-S4.0.jpg Area-124-T3.4.1.jpg Area-125-T4.0.jpg Use "None" replace "Invisible"."None" is easier to understand for user.But the changing string maybe cause other issues,e.g. ACC and so on.Need to discuss.
12. Color Area-133-S4.0.jpg Area-134-T3.4.1.jpg Area-135-T4.0.jpg Change the color list to 8*13 to make the similar colors in one row.Use AOO icon to replace Symphony icon.
Graphic 13. Graphic-Color mode Graphic-143-S4.0.jpg Graphic-144-T3.4.1.jpg Graphic-145-T4.0.jpg Make the control on sidebar consistent with toolbar.
Personal tools