View Issue Details

IDProjectCategoryView StatusLast Update
0000758SOGoWeb Generalpublic2015-07-28 15:39
Reporterbertails Assigned To 
PrioritynormalSeverityminorReproducibilityalways
Status newResolutionopen 
Product Version1.3.0 
Target Version3.0.0 
Summary0000758: usability/accessibility issues
Description

Here is a text I had from one of our users, specialist of usability/accessibility questions at W3C:

  1. Text for New Event, New Task etc, and other places is very pale.
    Checking the contrast shows it is borderline - sometime I a test shows:

    • Foreground:#7078AF Background:#E6E7E6 - contrast ratio is: 3.4:1
      Other time it shows:
    • Foreground:#535D6D Background:#E6E7E6 - contrast ratio is: 5.4:1
      For WCAG 2.0 AA the contrast ration should be 4.5:1; for AAA it should
      be 7:1. I wold recommend the text is made darker.
  2. Keyboard navigation

    • Tabbing through the page I found some actions I couldn't do. I could
      add new events and tasks, but it wasn't obvious how to modify or delete
      them.
    • Sometime I seem to tab from R to L (eg calendar scroll control arrows)
    • I couldn't toggle between 'Date' and 'Calendars'
  3. Text size - very small by default. Zooming in FF3.6 quickly caused
    the text to slide behind the adjacent elements (see attached image).
    Seems the containers aren't resizing.

  4. Search - didn't seem to work (and has no 'submit' control)
    [Likewise with 'View']

Additional Information

I chose "major" for the Severity level as this is really understood like that by our organization and our users.

TagsNo tags attached.

Activities

francis

francis

2010-11-14 04:18

administrator   ~0001799

I fixed the contrast ratio.

2011-01-25 21:59

 

backgrounds_comparison.jpg (12,587 bytes)   
backgrounds_comparison.jpg (12,587 bytes)   
corradofiore

corradofiore

2011-01-25 22:26

reporter   ~0002046

Last edited: 2011-01-25 23:09

I'd like to elaborate more on this topic, particularly points 1 and 3, hoping I can be of help to developers.

BACKGROUND COLOR
I'm attaching a screenshot of the left column background in Thunderbird, Apple Mail and SOGo. As you can see, the background should be lighter to get optimal redability (as per point 1 above). The small font size doesn't help, unfortunately, so optimal contrast is paramount here. My suggestion is to follow Thunderbird's route.

I understand that the current background color helps yellow folder "stand out", but that problem can be easily fixed using blue folders or a darker border on yellow ones.

FONT SIZE
About font size (point 3), the problem is particularly bad when displaying the body of a message in plain text or in html without ay font-sizes specified. In this case, the default rule is applied, which leads to unreadable text unless you are 14 (see the 2nd screenshot):

body {
font-size: 8pt; / equals to 10.6px /
}

RECOMMENDED ACTIONS
1) change the defaults to 12-13px for listings and 14px for message body (a bit more than GMail, see screenshot), as suggested on http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-best-practices-from-the-best-blogs/ (point 6)

2) increase line height to 1.5 and limit line length to 584px (see suggested_font_size.png) for plain text messages. Shortening the line length is a common technique for increasing readability.

3) make easy for users to override font defaults, just as Apple Mail and Mozilla Thunderbird do (think of a panel in preferences).

I also agree the font size is a major flaw in current design: I'm planning to use SOGo for 500+ business users, but if they can't read their messages nor change font defaults, it's likely I will have to stick to Roundcube. Please don't take this as a rant - I know you're offering a great piece of software for free - I'm just reporting feedback from real users ;-)

2011-01-25 22:35

 

font_size.png (7,881 bytes)   
font_size.png (7,881 bytes)   

2011-01-25 23:07

 

suggested_font_size.png (34,806 bytes)   
suggested_font_size.png (34,806 bytes)   
corradofiore

corradofiore

2011-01-26 14:44

reporter   ~0002050

Last edited: 2011-01-26 14:48

I forgot to specify that I was testing on a Mac OS X 10.6 machine using both Safari and Firefox. Sorry for any confusion I might have generated.

As a rule of thumb, for better cross-platform compatibility I recommend to specify font sizes using px instead of pt. One pixel is one pixel on every screen, while a point is a measure of length which is converted to a certain number of pixels according to screen DPI number (which varies among platforms).

2011-02-13 18:14

 

corradofiore

corradofiore

2011-02-13 18:16

reporter   ~0002102

Last edited: 2011-02-13 18:17

Attached a modified version of the WebServerResources folder, including a couple of changes to CSS. Most notable are:

  • Bigger font in the login panel

  • Top menu is taller and easier to click (following Fitt's Law). The default height is really too low to be easily targeted by the mouse pointer.

  • Top menu and command bar fonts use text-shadow for better contrast with the background and easier readability

  • Reworked left column:
    1) Lighter background for better contrast
    2) Accounts' names are presented with a different font and no icon to make it easier for the user to spot them among other lines
    3) New icons without dotted lines = less clutter on the screen. This mimics the appearance of all mail clients on Mac OS X and of RoundCube webmail.
    4) Selected folder is more visible (darker background, text-shadow)
    5) Used quota indicator is cleaner

  • Search input field has rounded corners (on Webkit / Gecko), to make it easier to spot it.

  • Drag handlers have gradient background with a slight 3D appearance, to make them "stick out" and hence afford dragging. To be fair, the 3D appearance is probably not yet enough, but it's a start.

  • The selected message row features now a much more bright blue background, to make it easier to find (the benchmark for legibility was iTunes application). The background color is actually a CSS3 gradient.

  • Both HTML and text-only messages now are rendered in 16px Helvetica / Calibri / Arial font. This is perhaps the most outstanding change from the original version and I think it deserves a bit of explanation. As far as I'm concerned, email is my primary tool when I'm at work. I must be able to read it with good speed even at 7 PM, after I've been in front of my monitors for ten hours, or in a train under far-from-optimal lighting. Font-size is the primary tool to achieve easy and FAST reading under those conditions, and that's precisely why I bumped it up so much. A bit of tuning is still needed under Windows XP (TO DO).

  • I changed also the default "enter mode" in CKeditor (http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.enterMode) to make it use BR tag. A one-line break is the expected result of hitting Enter in any email applications, that's it.

2011-02-13 18:18

 

sogo_alternate_theme.jpg (325,830 bytes)
janfrode

janfrode

2011-02-13 19:49

reporter   ~0002103

This change looks strange in Opera 11.01. The 3 panes are seprated by a bright blue border. i.e. the '|' and '-' in the below ascii art are bright blue:

l |Message list
e |--------------
f | Message body
t |

alessio

alessio

2011-03-23 13:15

reporter   ~0002290

This is a big work! Thanks Corrado, it should be a theme alternative for sogo ;-D
Not only for mac users!

francis

francis

2011-04-15 19:28

administrator   ~0002388

I changed the default "enter mode" (P => BR). Thanks for the suggestion Corrado.

fsayd

fsayd

2015-07-28 15:39

reporter   ~0008785

We also face problems with interface usability. Some of our users complain about the small text size. Although it is possible to zoom in the page using the browser functionality, users ask for an option to resize the text from the SOGo interface.

I think that it is a major issue because limits the SOGo usage by users with vision problems.

Thank you

Issue History

Date Modified Username Field Change
2010-08-19 22:01 bertails New Issue
2010-11-11 22:16 ludovic Severity major => minor
2010-11-14 04:18 francis Note Added: 0001799
2011-01-25 21:59 corradofiore File Added: backgrounds_comparison.jpg
2011-01-25 22:26 corradofiore Note Added: 0002046
2011-01-25 22:27 corradofiore Note Edited: 0002046
2011-01-25 22:35 corradofiore File Added: font_size.png
2011-01-25 23:06 corradofiore Note Edited: 0002046
2011-01-25 23:07 corradofiore File Added: suggested_font_size.png
2011-01-25 23:09 corradofiore Note Edited: 0002046
2011-01-26 14:44 corradofiore Note Added: 0002050
2011-01-26 14:48 corradofiore Note Edited: 0002050
2011-02-13 18:14 corradofiore File Added: WebServerResources_1.3.5a_20110213.zip
2011-02-13 18:16 corradofiore Note Added: 0002102
2011-02-13 18:16 corradofiore Note Edited: 0002102
2011-02-13 18:17 corradofiore Note Edited: 0002102
2011-02-13 18:18 corradofiore File Added: sogo_alternate_theme.jpg
2011-02-13 19:49 janfrode Note Added: 0002103
2011-03-23 13:15 alessio Note Added: 0002290
2011-04-15 19:28 francis Note Added: 0002388
2014-03-20 00:35 ludovic Target Version => 3.0.0
2015-07-28 15:39 fsayd Note Added: 0008785