[libreoffice-design] LO Writer UI Analysis

Hi all

I had some free time today and thought I could contribute something to LO.
The following is an analysis of LibreOffice Writer with the aim to point to
UI and UX problems, and propose solutions.

Here is the blank screen shot I used for the analysis:
http://ubuntuone.com/1T26evMLE0Q1Sfvbc6LcnO


During the analysis, I tried to look at the UI from the point of view of an
average user - I guess that they are by far the biggest LO user group. An
average user is for me someone who uses a computer because he has to, but
who is not computer savvy. Think of your mom or a student ->
http://goo.gl/6Lqvh



1. Needed UI elements
=================
At first, I took a look at all visible UI elements and categorized them.

green = elementary
orange = sometimes needed
red = rarely needed

Image: http://ubuntuone.com/7TZkH1e7vo88B637NEIjEc

As you can see, there is a lot of orange and red. More than half of the
icons are less relevant for simple day-to-day tasks. I'm sure that there is
a large percentage of people out there who don't even know what some of the
red-marked icons are for.

### Proposed Solution ###
Till LO gets a new UI I think the most simple way to improve the Writer UI
is to remove or hide less used icons.

1a - Remove the area to grab a toolbar. Instead, choose the same toolbar
arrangement method as Firefox. The user has to right click on the toolbar
and select 'Customize'. Most users don't change the arrangement of the
toolbar, therefore there is no need to always display the grab area. My
suggestion removes clutter and hides an advanced feature without making it
too hard for a power user to guess where to find the functionality.

1b - Remove the 'Edit File' button -> useless.

1c - Remove the 'Page Preview', the user can still find it on a common
place -> the file drop-down menu.

1d - Remove the 'Spelling and Grammar' button. Why should there be two such
buttons?

1e - Remove 'Table', 'Show draw Functions', 'Navigator', 'Gallery' and the
'LibreOffice Help' buttons. They are all a bit special and not needed by
average users for most daily tasks. If a user wants to create a table, he
can do so using the table menu, no need to have it visible all the time.

1f - Remove the 'Styles and Formatting' button. Its an advanced feature -
normal users just ignore it -> no need to have it there - it clutters the
UI.

1g - Remove the button labeled 'Default' in the lower left corner. Its
label is unclear and the button adds no value to the UI (remember average
user point of view).

1h - Remove the 'Standard selection' and the save status button next to it.
Both don't add anything useful to the UI. If the document has unsaved
changes it can be viewed by looking at the much bigger save icon in the
upper left corner.

1i - Remove the small paper icons left from the zoom panel. I don't get
what it is useful for after trying them several times and guess that normal
users would struggle here too.

1j - Remove the much >>too small<< 'Navigation' and 'Previous/Next page'
buttons in the lower right corner.

1k - Move the 'Align Right' and 'Justified' text formatting button into a
little drop-down menu like done for creating a new presentation file from
inside Writer (upper left corner). This would clean up the UI a bit without
making it too hard to access the less used formatting options.

1l - Move the bullet and numbered list icons in one icon with a drop-down
like in 1k.

1m - Maybe remove the 'New', 'Open', 'Export directly as PDF' and 'Print
File Directly' buttons in the upper left corner. Reason: they are less used
compare to other buttons and can be very easily accessed by the file menu.
Secondly, the tasks they perform don't belong to the main task of this
application. Writer is about writing not about file handling.

1n - The other orange buttons are less used but should probably stay the
way there are right now till a better solution is found.



2. UI skim through - Icon recognizably
============================
When searching for a button, users skim through the UI. The different UI
elements are better recognizable if each icon has a simple, clear and
unique shape. To simulate how the user perceives the UI when skimming
through, I blurred the image.

green = easy to recognize
orange = possible, but takes a while to recognize
red = hard to recognize

Colorless image: http://ubuntuone.com/4pY6Sb1SOHFvXJKETjDfV7
Image with colors: http://ubuntuone.com/3YUqIEC6umBkeZutI80UWf

A lot of icons have a similar shape or are too detailed and therefore hard
to recognize. The elementary buttons are green - that’s good - but orange
and red dominate.
In the image without color you can notice that most thin lines and space
holders are invisible (I've marked them in the colored image with a thin
red line).

### Proposed Solution ###

2a - Keep the space holders but remove the visual thin line to separate
buttons. The current thin line is not useful when searching an element -
in contrary it clutters the UI.

2b - I think you already know it, but again: LibreOffice needs a new icon
set because the current set is hard to differentiate and looks - my
personal opinion - outdated.



3. Lines in the UI
=============
I visualized the lines that structure the UI but are not part of any button.

Image: http://ubuntuone.com/75eM3Kex30qhLqshd0oswK

As you can see, there are a lot of lines.

### Proposed Solution ###

3a - Remove the line beneath each toolbar. This would remove clutter and
give the UI a more settled character.

3b - Remove as many unnecessary lines as possible to further clean up the
UI.



4. Summary
=========
I've combined all images to give a better impression of the current UI
state.

Image without blur: http://ubuntuone.com/2GbweFTlHiYJQjpxa6atVf
Image with blur: http://ubuntuone.com/3vsf5conkUeIebI59h6pVM

The blur image is interesting because it visualizes nicely what a users
sees if he looks at Writer. He sees a lot of UI elements and a lot of lines
- everything seems pretty cluttered. The important parts are recognizable
but there is huge space for improvement.

To improve the UX I suggest to:
 * Remove or hide less used features
 * Drastically reduce the lines in the UI to make it clearer
 * New icons

Most of the suggested changes could probably be made without changing much
code, it's more about having other toolbar defaults in Writer before we see
in future a UI redesign. I suggest to improve the UX by using existing
widgets.

A clean UI --> easier-to-find program functionality --> happier users -->
good for LibreOffice


Hope I could help a bit and that the provided information is useful to you.

Regards
Thibaut

-- 
Unsubscribe instructions: E-mail to design+help@global.libreoffice.org
Problems? http://www.libreoffice.org/get-help/mailing-lists/how-to-unsubscribe/
Posting guidelines + more: http://wiki.documentfoundation.org/Netiquette
List archive: http://listarchives.libreoffice.org/global/design/
All messages sent to this list will be publicly archived and cannot be deleted