Bug 31022 - EasyHacks: "About dialog" wording and layout are suboptimal
Summary: EasyHacks: "About dialog" wording and layout are suboptimal
Status: RESOLVED FIXED
Alias: None
Product: LibreOffice
Classification: Unclassified
Component: LibreOffice (show other bugs)
Version:
(earliest affected)
unspecified
Hardware: Other All
: medium minor
Assignee: Andrew
URL:
Whiteboard: target:3.6.0
Keywords: easyHack
Depends on:
Blocks:
 
Reported: 2010-10-20 23:54 UTC by Sebastian@SSpaeth.de
Modified: 2015-12-18 09:56 UTC (History)
6 users (show)

See Also:
Crash report or crash signature:


Attachments
Design for New LibreOffice About Dialog (233.21 KB, image/png)
2010-10-31 00:30 UTC, Andrew
Details
Design #2 (74.57 KB, image/png)
2012-02-20 10:18 UTC, Andrew
Details
Design #2 + Tweak (75.94 KB, image/png)
2012-02-20 10:20 UTC, Andrew
Details
Patch (52.16 KB, patch)
2012-03-30 10:15 UTC, Andrew
Details
Screenshot (76.35 KB, image/png)
2012-03-30 10:16 UTC, Andrew
Details
reworked patch vs. master (51.61 KB, patch)
2012-04-03 11:26 UTC, Michael Meeks
Details
icon-themes/brand/flat_logo.svg (23.87 KB, image/svg+xml)
2012-04-06 00:59 UTC, Andrew
Details
icon-themes/galaxy/brand/shell/about.svg (113.80 KB, image/svg+xml)
2012-04-06 00:59 UTC, Andrew
Details

Note You need to log in before you can comment on or make changes to this bug.
Description Sebastian@SSpaeth.de 2010-10-20 23:54:59 UTC
While the about dialog might be the least of our worries, I found the "help" menu looks currently pretty neglected and might deserve some love.

If you look at the current about dialog its layout looks pretty crappy:
Logo on top (ok), then plenty of white space (too much), then our version info (ok).

Then lots of text is crammed in a too small textfield that I have to scroll to read fully. The "Contributor credits" link below the textfield for example is preceded by "The Document Foundation acknowledges all community members, please find more info at the link below:" in the textfield, but I could not read that sentence unless I scrolled down the textfield.

The Contributor credits page leads to a "403", so I am forbidden to look at the contributors :-) (I bet you know that one and its planned to fix before the first proper release).

The link is followed by 3cm of white space, with an "OK" button, at around 2/3 height, followed by 3cm of more whitespace. So it seems that there are only 2/3 of the dialog being used, while text is crammed in a small scrollable dialog.

The dialog would look more nifty if the background image were actually spread out all over the dialog, so that the background arrows are visible in the lower right hand corner of the dialog, rather than at centimeter 3 (from the top).

So Action Items:
- remove some of the white space below the logo, I assume it comes from the background images with arrows.

- Don't let me scroll on that dialog, the text all fits easily on the dialog directly. Just put it there.

- Fix the Contributor Credits webpage to exist. Put the link directly after or in that sentence, e.g. like this: "The Document Foundation acknowledges all community members, please find more info at this link: [Contributor Credits]"

-Scale the background image over the whole dialog and not only the top 3 cm. Or put the top left background on the top and the top right background at the bottom at least.

-Dynamically size the dialog to fit the content, right now it looks very large and very empty (with the text being crammed in a scroller).
----------------------------------------------------------------------------
End of Bug Report, other random observations on the help menu items:


Why is the "license information" item separated by 2 separators from the rest? I would put it like that:

LibreOffice Help
What's this?
------------
License Information
About LibreOffice

----------------------------------------------------------------------------
Finally, I selected "What's this" and was puzzled as nothing happened, I seriously thought something was broken. Only then did I notice the cursor had changed and represented a question mark. I was still puzzled what this means and what I was supposed to do now? Wait more for things to come? "What's this? indeed" I thought. Only then did I recognize that I was supposed to click on UI elements in OOo. When I select this option for the first time, it would be nice if a help dialog popped up explaining what this is for and what I am supposed to do.

Sorry for combining several issues in this one bug report.
Comment 1 How can I remove my account? 2010-10-21 01:04:20 UTC
One more detail in the Help:About that we should fix sooner or later: Just drop the unnecessary version information that doesn't necesarily give any true information, especially the "build id". Or alternatively, make the build id actually mean something in LibreOffice. In OO.o, it adds no new information (unless one specificaly munges the build id in one's build, normally it is fixed and one-to-one corresponding toa specific OO.o version (milestone)).
Comment 2 Thorsten Behrens (allotropia) 2010-10-21 02:07:45 UTC
Adding easy hacks tag - code for this is here: sfx2/source/dialog/about.cxx
Comment 3 Andrew 2010-10-31 00:30:47 UTC
Created attachment 39917 [details]
Design for New LibreOffice About Dialog

Looking at about dialogs from other applications, I came up with a list of pieces of information that the LibreOffice About Dialog needs.

* Logo
  - For identity
* Version Information
  - This is more for developers but still important
* Summary of Application
  - The about dialog is *about* the program and so we should say what it is and what it does
* Homepage
  - Important is the user wants to find out more *about* the application
* Credits
  - It is important to recognise those devs who have contributed
* Copyright Statement
  - Whilst I am not as keen on this one, I recognise its importance


Using these pieces of information I created a design for a new about dialog. Starting from the top, we have the fading out triangle pattern that appears in most LibreOffice artwork, this is important from a branding and identity perspective as well as making it prettier :) I agree with Sebastian's point that the pattern should start top left and finish bottom right, which I have done. Next we have the logo; the only change made here is that it has been made larger to enforce the identity (which is relatively new) and make the text below not look as imposing. 

Next we have the version number, I removed the word 'LibreOffice' form the version string as it is repeated and I made the colour of the text a lighter grey as it is not as important to the user (as stated above), therefore it doesn't need to be as imposing; the version string should be aligned with the text of the logo. If the build number, or the libreoffice-build number, is made to be important (as Tor hinted at), this could be included by simply appending "(VERSIONNUMBER)" to the end of this string.

Next we have a short sentence that summarises LibreOffice (the reason for inclusion stated above). I made this string by taking various phrases from the website, and this can be changed for something more poetic :), this is justified so that the text boundary is aligned with the start and end of the logo above it. 

The copyright string sits below, which I shortened from a complex colleciton of legal jargon. This can be changed to something more appropriate, as I am not a lawyer, however I feel we need to keep it short and sweet - the LICENSE file is the place for the kind of language included in the current dialog. this text is a lighter grey, like the verison string, becuase it is not as important to the user. the text boundary and alignment is the same as the text above.

Next we have LibreOffice's homepage. The text size for this is increased, as well as its distance from the surrounding elements, so that it stands out - a user is quite likely to want to go to the homepage when opening this dialog. The actual link to the homepage should be 'linkified' so that when clicked it opens the homepage in the user's web browser - signified by the different colour of the URL.

Next we have the credits button. The reason I have turned the Credits link into a button is that whilst visibility of the homepage URL is important, users may want to type it in later, typically a credits page is one that is only viewed once and a user does not need to see. When clicked this should either go to the credits page online, or start the credits slider (currently shown by Ctrl-S-D-T, this should be changed).

Finally I have replaced the OK button with a Close button. We are not saying OK to anything, we haven't even been asked a question. I also agree with Sebastian's points about the dialog needing to be automatically big enough and dynamically resize - this should just happen.

Attached is this new design (far right), as well as (from left to right) the Firefox about dialog, the gedit about dialog, and the current LibreOffice dialog.


Any comments? If we can agree on a design I can start making it, though I don't have any C++ experience so I may need a little help (and time!) :)
Comment 4 How can I remove my account? 2010-11-01 01:56:33 UTC
I like the design in general, but I don't think the marketing phrase is necessary... BTW, note that the placement of logo and text probably should depend on whether the UI language is LTR or RTL.
Comment 5 Sebastian@SSpaeth.de 2010-11-01 06:14:34 UTC
I like the design. And I also like the marketing phrase. In the end this is the "about" dialog so it should at least shortly describe what LO is all about :).

:-). +1 from me (not that my voice counts anything)
Comment 6 Aaron P 2010-11-28 21:37:03 UTC
Hi,
I'm searching for some easy bugs to start working on and I'd like to work on this bug. Just wanted to check if we've agreed on a solution yet before I start writing it? Is the attached mockup what we want to go with?

(FYI - I may need some help to get started. I've just completed a successful build so will explore it to see how it all hangs together)

thanks
Aaron
Comment 7 Thorsten Behrens (allotropia) 2010-11-29 02:11:51 UTC
Aaron, please go for it - Andrew's proposal is a vast improvement over the existing state of affairs. Best place for help: #libreoffice on freenode.
Comment 8 Andrew 2010-11-29 05:06:05 UTC
On 29 November 2010 10:11,  <bugzilla-daemon@freedesktop.org> wrote:
> https://bugs.freedesktop.org/show_bug.cgi?id=31022
>
> tbehrens@novell.com changed:
>
>           What    |Removed                     |Added
> ----------------------------------------------------------------------------
>                 CC|                            |tbehrens@novell.com
>
> --- Comment #7 from tbehrens@novell.com 2010-11-29 02:11:51 PST ---
> Aaron, please go for it - Andrew's proposal is a vast improvement over the
> existing state of affairs. Best place for help: #libreoffice on freenode.
>
> --
> Configure bugmail: https://bugs.freedesktop.org/userprefs.cgi?tab=email
> ------- You are receiving this mail because: -------
> You are on the CC list for the bug.
>


Cool! Aaron, if have any questions about the design, please don't
hesitate to contact me :)
Comment 9 Shawn T. 2011-01-23 17:27:00 UTC
I kinda like the direction the Firefox 4 about box goes in, it puts a little more emphasis on the community side of the project rather than legal disclamiers. Maybe we could nick the layout from that, put in our mantra, and change the bottom links to "LibreOffice web site" and "Third-party legal notices" (license notices, etc) or something.
Comment 10 Andrew 2011-06-07 02:36:35 UTC
Hi, I would like to work on this, however I was wondering whether there was a way to not have to download and compile all of the LibreOffice branches?

For example, download the few necessary branches, and then maybe the writer branch so that I can test it?
Comment 11 Don't use this account, use tml@iki.fi 2011-06-07 03:21:36 UTC
Andrew, you are confusing branches with repositories. The LibreOffice source code is split up in several repositories, one of which is called "writer", and does indeed cotain code that gets used only (?) by the Writer functionality. But you can't build "just Writer" using just that repository. And in fact we will combine most of these separate repositories into one anyway, it has turned out to perhaps not be suich a good idea anyway to have many separate ones.

A "branch" is a different thing: inside each repository there is a set of branches. (By convention, the same branches (same name and purpose) are used in all the repositories.) The branch "master" is for ongoing free development, what will evenbtually become LibreOffice 3.5. The branch "libreoffice-3-4" is for bug fixing on the stable 3.4 version. Etc.

So, yes, you will have to build (most of) LibreOffice even if you just want to work on the Help:About dialog, if you want to see in practice how it looks. Sorry. Yes, the long-time plans are that it would be nice to be able to build for instance just enough to show the Start Centre (without being able to actually edit any Calc, Writer, Impress etc documents). And the use of several repositories was supposed to be a step in that direction, so that one then wouldn't have to download/clone all of the source code to work on just a part. But it is a work in progress.
Comment 12 Andrew 2011-06-07 03:35:34 UTC
Thanks for the informative response, I will see what I can do :)
Comment 13 Christoph 2011-06-13 05:11:32 UTC
Alternative design (and behavior) derived from the OOo rebranding 2010 (forget about the OOo graphics and the Oracle logo) which also considers the Splash Screen and the Start Center --> consistent appearance throughout LibO:

http://wiki.services.openoffice.org/wiki/User:ChristophNoack/Drafts/WelcomeCenter_2010

If there is any interest, then please comment on that issue, contact the Design Team, or reach out to the mailing list libreoffice-ux-advice.
Comment 14 Caolán McNamara 2011-08-19 14:53:51 UTC
Unaware of this issue I made some minor changes to the about dialog to remove masses of whitespace and fit the dialog to the text in the meantime, so its hopefully not as horrible as in comment #1. Though its still pretty horrible.

Note dialog code is now in cui/source/dialogs/about.cxx and dialog description is in cui/source/dialogs/about.src
Comment 15 Andrew 2012-02-20 10:18:31 UTC
Created attachment 57340 [details]
Design #2

Actually, looking back, my previous design was a bit boring.. here is one that is more exciting! :)
Comment 16 Andrew 2012-02-20 10:20:12 UTC
Created attachment 57341 [details]
Design #2 + Tweak

and another small tweak...
Comment 17 Stefan Knorr (astron) 2012-02-29 04:36:30 UTC
Hi Andrew,

I hope the following criticism is helpful in some way.
I personally do not like Design #2. It may be the fact that I really don't see why windows should close when clicking on their window background (which I find very unintuitive). It may also be the fact that certain things (like window decorations) should always be provided by the OS.
It may be the fact that I really don't like Adobe products (which always use such About dialogues).

The point is: could you see yourself going back to proposal one (which I think is great [1]), except of course for two things:
* adding the scatter motif in the background?
* adding some sort of build information – i. e. the build ID [2]


[1] Splash screens and About dialogues should hardly be the most exciting features of a product, so I don't think that's too much of a criteria here.

[2] There are people that like to look at about dialogues, but most of the target audience for About are QA people. For them, it's very important to be able to take a quick look at the exact build they have.
Comment 18 Andrew 2012-03-30 10:11:46 UTC
Okay so I have been working on this a while and have pretty much done it.

So I listened to the extra critique that Astron had and whilst I see his point with [1] I don't feel making it more pretty is a bad thing :) However his point about the version stuff is important so I tried to make it very visible and copy-able.

So here is a first patch and also attached is a screenshot of what it currently looks like. Whilst it currently still has a window titlebar and the background is not transparent (this requires some further vcl work) it is definitely a start.

Critique on the patch is more than welcome as it is my first time contributing to LibreOffice (and I don't really have much of a clue with autotools xD)
Comment 19 Andrew 2012-03-30 10:15:20 UTC
Created attachment 59286 [details]
Patch

(This patch is for revision 938ddf379004d9696a005ed612994576e2d7cca0, any help with git on how to get this for the most recent commit would be appreciated as well!)
Comment 20 Andrew 2012-03-30 10:16:08 UTC
Created attachment 59287 [details]
Screenshot
Comment 21 Michael Meeks 2012-04-03 08:48:27 UTC
Am pulling the patch up to master, and having a look :-) thanks Andrew. Any chance you can post a suitable MPL/LGPLv3+ license mail to the developers list and link yourself into here:
http://wiki.documentfoundation.org/Development/Developers ?
Comment 22 Michael Meeks 2012-04-03 11:25:09 UTC
Sadly, I ran out of time to review it :-) the attached patch is substantially pulled up to master, but I get a lot of compile errors.

It'd help reduce this to keep basebmp's Color out of tools':

/data/opt/libreoffice/master/solver/unxlngi6.pro/inc/tools/color.hxx:117:23: error: candidates are: class Color
/data/opt/libreoffice/master/solver/unxlngi6.pro/inc/basebmp/color.hxx:38:7: error:                 class basebmp::Color

To do that we should fixup:

--- a/vcl/inc/vcl/svapp.hxx
+++ b/vcl/inc/vcl/svapp.hxx
@@ -42,6 +42,7 @@
 #include <vcl/apptypes.hxx>
 #include <vcl/settings.hxx>
 #include <vcl/vclevent.hxx>
+#include <vcl/rendergraphicrasterizer.hxx>
 class BitmapEx;
 class Link;
 class AllSettings;
@@ -276,6 +277,7 @@ public:
     static void                 SetAppName( const String& rUniqueName );
     static String               GetAppName();
     static bool                 LoadBrandBitmap (const char* pName, BitmapEx &rBitmap);
+    static vcl::RenderGraphicRasterizer  LoadBrandSVG (const char* pName);
 
     // default name of the application for message dialogs and printing
     static void                 SetDisplayName( const UniString& rDisplayName );


To have the same signature, return a bool and take a reference to the RenderGraphicRasterizer - since then we can use a forward declaration of that class instead of including the problematic chain of includes there I think (as for BitmapEx incidentally).

I'll attach where I got to - sorry, but dragged off on vacation :-)
Comment 23 Michael Meeks 2012-04-03 11:26:13 UTC
Created attachment 59444 [details]
reworked patch vs. master

I guess we need to add the right svg files too (perhaps I lost that from the previous patch) - it's all Andrew's work though ...
Comment 24 Stefan Knorr (astron) 2012-04-04 07:19:56 UTC
Hi Andrew,

I'll just admit that from the looks of it, the new about box is pretty darn great. Wonderful stuff.
(I have yet to see it in the flesh, though.)

Thanks for adding the version number, too.

I still think a Close button would be a good idea, but with the window-decoration free design that you plan, it clearly won't fit.
Comment 25 Andrew 2012-04-06 00:59:12 UTC
Created attachment 59576 [details]
icon-themes/brand/flat_logo.svg
Comment 26 Andrew 2012-04-06 00:59:47 UTC
Created attachment 59577 [details]
icon-themes/galaxy/brand/shell/about.svg
Comment 27 Not Assigned 2012-04-10 04:52:59 UTC
Andrew Higginson committed a patch related to this issue.
It has been pushed to "master":

http://cgit.freedesktop.org/libreoffice/core/commit/?id=8a3aae9b694deb2b41157509e84815a5b7fb7655

Resolves: fdo#31022 about dialog is suboptimal
Comment 28 Stephan Bergmann 2012-11-25 09:16:53 UTC
Just taking note that

  sal_Int32 aIdealTextWidth = aScreenRect.GetWidth() / 2.4;

makes the About dialog confusingly wide on a big screen -- much wider than a default-sized document window that it appears in front of.  (Though I have no idea how to come up with an always-pleasing formula for this.)
Comment 29 Robinson Tryon (qubit) 2015-12-18 09:56:00 UTC
Migrating Whiteboard tags to Keywords: (EasyHack)
[NinjaEdit]