Difference between revisions of "AOO UX Design Exploration - Task Pane Content Panel - User Interface Design Proposals"
Doreentr0419 (Talk | contribs) (→Controls consistent issues proposal) |
|||
(6 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
− | == Sidebar Content Panel - UX Design propoals == | + | == [[Sidebar]] Content Panel - UX Design propoals == |
For frame work part, use flat tab option to replace accordion effect. <br /> | For frame work part, use flat tab option to replace accordion effect. <br /> | ||
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 /> | 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 /> | ||
Line 55: | Line 55: | ||
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 /> | 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 /> | 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 /> | ||
− | [[File:4. | + | {| 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 == | == Controls consistent issues proposal == | ||
Line 62: | Line 160: | ||
Summarize all 13 controls that will show both on sidebar and toolbar and give the design proposal.<br /> | Summarize all 13 controls that will show both on sidebar and toolbar and give the design proposal.<br /> | ||
− | {| class="wikitable" | + | {| class="wikitable" style="background-color:#ffffff;" |
|- | |- | ||
! Panel | ! Panel | ||
− | + | ! Control | |
! Sidebar(4.0 Design Proposal) | ! Sidebar(4.0 Design Proposal) | ||
! Toolbar(3.4.1) | ! Toolbar(3.4.1) | ||
Line 71: | Line 169: | ||
! Note | ! Note | ||
|- | |- | ||
− | | Text | + | ! rowspan=3|Text |
| 1. Font Color | | 1. Font Color | ||
| [[File:Text-23-S4.0.jpg]] | | [[File:Text-23-S4.0.jpg]] | ||
Line 78: | Line 176: | ||
| Change the color panel arrange layout from 10*10 to 8*13 to make the similar colors in one row. | | Change the color panel arrange layout from 10*10 to 8*13 to make the similar colors in one row. | ||
|- | |- | ||
− | |||
| 2. Highlight Color | | 2. Highlight Color | ||
| [[File:Text-33-S4.0.jpg]] | | [[File:Text-33-S4.0.jpg]] | ||
Line 85: | Line 182: | ||
| Change the color panel arrange layout from 10*10 to 8*13 to make the similar colors in one row. | | Change the color panel arrange layout from 10*10 to 8*13 to make the similar colors in one row. | ||
|- | |- | ||
− | |||
| 3. Underline | | 3. Underline | ||
| [[File:Text-43-S4.0.jpg]] | | [[File:Text-43-S4.0.jpg]] | ||
Line 92: | Line 188: | ||
| | | | ||
|- | |- | ||
− | | Paragraph | + | ! rowspan=4|Paragraph |
| 4. Bullets | | 4. Bullets | ||
| [[File:Paragraph-53-S4.0.jpg]] | | [[File:Paragraph-53-S4.0.jpg]] | ||
Line 99: | Line 195: | ||
| Use AOO icon to replace Symphony icon on Sidebar. | | Use AOO icon to replace Symphony icon on Sidebar. | ||
|- | |- | ||
− | |||
| 5. Numbering | | 5. Numbering | ||
| [[File:Paragraph-63-S4.0.jpg]] | | [[File:Paragraph-63-S4.0.jpg]] | ||
Line 106: | Line 201: | ||
| Use AOO icon to replace Symphony icon on Sidebar. | | Use AOO icon to replace Symphony icon on Sidebar. | ||
|- | |- | ||
− | |||
| 6. Paragraph Background Color | | 6. Paragraph Background Color | ||
| [[File:Paragraph-73-S4.0.jpg]] | | [[File:Paragraph-73-S4.0.jpg]] | ||
Line 113: | Line 207: | ||
| Change the color panel arrange layout from 10*10 to 8*13 to make the similar colors in one row. | | Change the color panel arrange layout from 10*10 to 8*13 to make the similar colors in one row. | ||
|- | |- | ||
− | |||
| 7. Line Spacing | | 7. Line Spacing | ||
| [[File:Paragraph-83-S4.0.jpg]] | | [[File:Paragraph-83-S4.0.jpg]] | ||
Line 120: | Line 213: | ||
| Use Symphony icons to replace corresponding AOO icons on toolbar. | | Use Symphony icons to replace corresponding AOO icons on toolbar. | ||
|- | |- | ||
− | | Line | + | ! rowspan=3|Line |
| 8. Width | | 8. Width | ||
| [[File:Line-93-S4.0.jpg]] | | [[File:Line-93-S4.0.jpg]] | ||
Line 127: | Line 220: | ||
| Make the control on toolbar consistent with sidebar. | | Make the control on toolbar consistent with sidebar. | ||
|- | |- | ||
− | |||
| 9. Color | | 9. Color | ||
| [[File:Line-103-S4.0.jpg]] | | [[File:Line-103-S4.0.jpg]] | ||
Line 134: | Line 226: | ||
| Change the color list to 8*13 to make the similar colors in one row. | | Change the color list to 8*13 to make the similar colors in one row. | ||
|- | |- | ||
− | |||
| 10. Style | | 10. Style | ||
| [[File:Line-113-S4.0.jpg]] | | [[File:Line-113-S4.0.jpg]] | ||
Line 141: | Line 232: | ||
| Make the control on toolbar consistent with sidebar. | | Make the control on toolbar consistent with sidebar. | ||
|- | |- | ||
− | | Area | + | ! rowspan=2|Area |
| 11. Fill Type | | 11. Fill Type | ||
| [[File:Area-123-S4.0.jpg]] | | [[File:Area-123-S4.0.jpg]] | ||
Line 148: | Line 239: | ||
| 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. | | 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 | | 12. Color | ||
| [[File:Area-133-S4.0.jpg]] | | [[File:Area-133-S4.0.jpg]] | ||
Line 155: | Line 245: | ||
| Change the color list to 8*13 to make the similar colors in one row.Use AOO icon to replace Symphony icon. | | 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 | | 13. Graphic-Color mode | ||
| [[File:Graphic-143-S4.0.jpg]] | | [[File:Graphic-143-S4.0.jpg]] | ||
Line 162: | Line 252: | ||
| Make the control on sidebar consistent with toolbar. | | Make the control on sidebar consistent with toolbar. | ||
|} | |} | ||
+ | |||
+ | [[Category:UX]] | ||
+ | [[Category:Visual Design]] |
Latest revision as of 16:08, 4 January 2019
Contents
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.
Option 10:Gradient section title + Light grey panel + Simple line separators
Screenshots of Presentation editor with option 10
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.
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...
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.