Difference between revisions of "Platform UI Differences"

From Apache OpenOffice Wiki
Jump to: navigation, search
(Differences: add aqua images)
(Differences)
Line 43: Line 43:
 
! style="background:#abcdef;" colspan="4" | Toolbars
 
! style="background:#abcdef;" colspan="4" | Toolbars
 
|-
 
|-
| '''Icons'''<br> ''The default setting'' || [http://mox.fidisk.fi/opensource/UI/differences/aqua-toolbar.png http://mox.fidisk.fi/opensource/UI/differences/aqua-toolbar-tn.png]  <br><br>a few biggish icons with text underneath  || a few icons || a few biggish icons with text underneath
+
| '''Icons'''<br> ''The default setting'' || [http://mox.fidisk.fi/opensource/UI/differences/aqua-toolbar.png http://mox.fidisk.fi/opensource/UI/differences/aqua-toolbar-tn.png]  <br><br>10-15 icons (30px * 30px) with text underneath  || a few icons || 10-15 icons (30px * 30px)? with text underneath
 
|-
 
|-
 
| '''Customization'''<br> ''How the toolbars are customized'' || [http://mox.fidisk.fi/opensource/UI/differences/aqua-toolbar-customize.png http://mox.fidisk.fi/opensource/UI/differences/aqua-toolbar-customize-tn.png]  <br><br>Main toolbars are customizable through right clicking, selecting '''Customize...''' and then drag-and-dropping. ''Much of the toolbar functionality in'' '''Inspector''' ''-tool instead.''  || '''Customize...''' in Tools -menu, also from toolbars. Shows a dialog. || Not editable / occasionally the same style as Mac OS X. ''NOTE: Also in Mozilla applications''
 
| '''Customization'''<br> ''How the toolbars are customized'' || [http://mox.fidisk.fi/opensource/UI/differences/aqua-toolbar-customize.png http://mox.fidisk.fi/opensource/UI/differences/aqua-toolbar-customize-tn.png]  <br><br>Main toolbars are customizable through right clicking, selecting '''Customize...''' and then drag-and-dropping. ''Much of the toolbar functionality in'' '''Inspector''' ''-tool instead.''  || '''Customize...''' in Tools -menu, also from toolbars. Shows a dialog. || Not editable / occasionally the same style as Mac OS X. ''NOTE: Also in Mozilla applications''
 
|-
 
|-
| '''Style'''<br> ''What the toolbar icons/buttons look like'' || '''No surrounding 3D "button" around the icon''', colors used sparingly, as few metaphors as possible. Icons are slightly "lifted" on top of the surface. || ??? || No button borders, richer colors,  icons in 3D perspective
+
| '''Style'''<br> ''What the toolbar icons/buttons look like'' || '''No surrounding 3D "button" around the icon''', colors used sparingly, as few metaphors as possible. Icons have subtle shadow. || ??? || No button borders, richer colors,  icons in 3D perspective
 
|-
 
|-
 
| '''Highlight'''<br> ''What the toolbar icons/buttons look like, when clicked'' || '''No highlight''' ''No visual change in the button'' || '''Light-bulb highlight''' ''buttons look like they are shining'' || Highlights with dark color to show the full button area
 
| '''Highlight'''<br> ''What the toolbar icons/buttons look like, when clicked'' || '''No highlight''' ''No visual change in the button'' || '''Light-bulb highlight''' ''buttons look like they are shining'' || Highlights with dark color to show the full button area

Revision as of 21:41, 2 March 2007

Contributors

  • Mox Soini: Mox

Introduction and History

This page is still a stub. Will fill later

Complementary and Related projects

The possible future UI Layout work is complementary and not overlapping with:

Goals

Document the differences in Platform specific UIs (e.g. Aqua/Mac OS X, Aero/Vista, Gnome/Linux, KDE/Linux Win32/Windows XP).

The focus is in stuff expressed in GUI guidelines (e.g. Aqua HIG, Aero xxx, Gnome UI SG,...) and stuff that is standard or preferred way of doing things, as exemplified by high quality applications on each platform (e.g. Apple Pages (iWork) on Mac OS X, MS Word (Vista Office), Abiword on Gnome)

Differences

The following lists the typical applications used on various platforms and the comparison screenshots from OpenOffice.org. The aim is to show that while there are similarities in these platform-specific applications, and much of the actual functionality is quite similar, the actual UI (i.e. how you accomplish those functions) has differences both on surface and in deeper levels.

Stuff to add (Mac OS X):

  • ok/cancel buttons: ok on the right side
  • ...
Platform specific UI differences
  Mac OS X (Aqua) Windows Vista (Aero) Ubuntu Gnome Linux
Application Menu
Location
Where the menu is located
aqua-menu.png

System wide menu in the top of the screen. Contents of the menu depend on which is the active window
In the top of the application window In the top of the application window
Icons aqua-menu-no-icons.png

No icons in the menu
No icons in the menu typically(?) icons in the menu
Preferences
Where the settings are located and what they are called
aqua-menu-preferences.png

Preferences... in the Apple -menu (system wide menu item), accessible with CMD-,
Options... in Tools -menu?? Preferences in Edit -menu
Toolbars
Icons
The default setting
aqua-toolbar-tn.png

10-15 icons (30px * 30px) with text underneath
a few icons 10-15 icons (30px * 30px)? with text underneath
Customization
How the toolbars are customized
aqua-toolbar-customize-tn.png

Main toolbars are customizable through right clicking, selecting Customize... and then drag-and-dropping. Much of the toolbar functionality in Inspector -tool instead.
Customize... in Tools -menu, also from toolbars. Shows a dialog. Not editable / occasionally the same style as Mac OS X. NOTE: Also in Mozilla applications
Style
What the toolbar icons/buttons look like
No surrounding 3D "button" around the icon, colors used sparingly, as few metaphors as possible. Icons have subtle shadow.  ??? No button borders, richer colors, icons in 3D perspective
Highlight
What the toolbar icons/buttons look like, when clicked
No highlight No visual change in the button Light-bulb highlight buttons look like they are shining Highlights with dark color to show the full button area
Dialogs (and Sheets)
Customize Toolbar
What kind of UI is used?
Opens a Sheet Opens a Dialog N/A or Opens a Sheet
Workflow (Task vs. other)
Interaction styles
Design goals
Target users
What kind of people are the applications designing for?
Normal people who want to do well designed documents with good layout. Not just word processing Word processing for the average Joe, lots of functionality Usability important, cleaned up UI
Templates
What is the purpose of the templates?
To learn/get ideas for good style/design, professional quality To have all the templates for all the possible occasions Get the templates you want from the internet repositories
Personal tools