Ask / Submit
63

Ways to enhance text readability in Sailfish UI (incl. apps)

asked 2014-01-18 18:34:04 +0200

this post is marked as community wiki

This post is a wiki. Anyone with karma >75 is welcome to improve it.

updated 2016-01-15 17:10:07 +0200

This question describes an area of improvement in the Sailfish UI. Ideas on how to improve the situation can be given and voted upon as answers.

Edit. Updated the question to be relevant with the Sailfish 2.0 UI.

Text in the Sailfish UI is mostly displayed in white/light letters on dark background.The same appearance naturally extends to third party apps via Sailfish Silica (which is a good thing in that it makes the overall user experience consistent).

However, when reading any longer text, for many readers, dark text on white background is easier to read.

There should be an option to choose dark-on-light or a light-on-dark UI scheme, so that every user can have the UI that best suits them.

In what other ways could the UI be more readable/accessible to all users, including those with eyesight problems?

For visibility: Here's how to set the system wide font size:
https://together.jolla.com/question/16786/ways-to-enhance-text-readability-in-sailfish-ui-incl-apps/?answer=126441#post-id-126441

edit retag flag offensive close delete

Comments

1

It seems the answers are to be seen as alternative options to be voted: You should mention this in your question.

jgr ( 2014-03-09 23:17:17 +0200 )edit

@jgr, in this question I have followed the guideline given in https://together.jolla.com/question/4389/together-howto-question-answer-and-comment/ (top answer): Don't post your idea as a question, but come up with a question that your idea answers and then answer yourself with your idea.

I have since noticed that this has not become common practice, so it may be confusing. Maybe I'll edit the question to make it more clear. Still, this is not a vote to find the most popular alternative; the alternatives are separate ideas, they don't rule each other out, and you can vote both of them up or down if you wish.

Also, I'll make the answers wikis so it won't look like I'm just fishing for karma. :)

ssahla ( 2014-03-09 23:31:22 +0200 )edit
1

You write: "Text in the Sailfish UI is mostly displayed in white/light letters on dark background (with the ambience image showing through). App developers often adapt the same appearance for their apps". No, they don't. No app developers write in their apps "use white letters on a semitransparent dark background". They just use the Sailfish Silica components, which automatically uses the system theme (ambience). The app developer isn't trying to match the Sailfish look - on the contrary, it's actually very hard to avoid the Sailfish look.

ovekaaven ( 2014-03-10 02:17:22 +0200 )edit

@ovekaaven, you are right, thanks for the correction.

ssahla ( 2014-03-10 08:43:57 +0200 )edit

I suspect that the text is more readable on the higher resolution displays that Sailfish was clearly designed for ...

strongm ( 2014-03-10 11:11:03 +0200 )edit

11 Answers

Sort by » oldest newest most voted
40

answered 2014-01-18 18:34:16 +0200

this post is marked as community wiki

This post is a wiki. Anyone with karma >75 is welcome to improve it.

updated 2014-03-09 23:34:27 +0200

ssahla gravatar image

Add possibility of ambiences with light-colored background and dark text. This would make text easier on the eyes system-wide.

edit flag offensive delete publish link more

Comments

1

@Jaakko Roppola: After a long search I now re-found the scientific article supporting this quest: http://www.pnas.org/content/111/8/3170 – "Neuronal nonlinearity explains greater visual spatial resolution for darks than lights". So please, Jolla, reflect your design decisions in the light of visibility/legibility, not only of designer pleasure.

jgr ( 2014-03-25 01:49:40 +0200 )edit

This is possible, but only with ambiance RMP packages. See @Markkyboy's AllBlack for example.

jollailija ( 2015-10-03 18:12:36 +0200 )edit

@jollailija, no. @Markkyboy's AllBlack doesn't provide dark text with light background.

ssahla ( 2015-10-04 01:53:14 +0200 )edit

@ssahla The anwer was "add possibility of ambiances with light-colored background and dark text". That is allready possible, AllBlack is just an example of an ambiance with not-possible-with-UI-colors. It's possible to create an ambiance with any background and text colors.

jollailija ( 2015-10-04 12:15:37 +0200 )edit

@jollailija, ok, I misunderstood what you meant.

ssahla ( 2015-10-04 13:11:52 +0200 )edit
12

answered 2014-03-13 21:26:42 +0200

this post is marked as community wiki

This post is a wiki. Anyone with karma >75 is welcome to improve it.

updated 2014-03-13 21:26:42 +0200

tokaru gravatar image

What about letting the user switch between daylight and night mode?

In daylight mode the background would be bright (ambience image still showing through) instead of dark. Of course theme colors must change to a darker version of the original color for better readability.

So depending on the users' preference they could

  • permanently stick to the mode they like better
  • switch to daylight mode when they want to read longer texts
  • switch to daylight mode in the daylight
edit flag offensive delete publish link more

Comments

1

@tokaru FBReader does something similar and it kinda works. :)

MartinK ( 2014-03-13 23:23:09 +0200 )edit
1

@MartinK I know :) that's what inspired this suggestion. To be fair: FBReader only needs to do some black/white inversion, that's a little bit easier than doing the same for a complete theme ;-)

tokaru ( 2014-03-14 00:32:25 +0200 )edit
9

answered 2014-03-19 12:44:29 +0200

this post is marked as community wiki

This post is a wiki. Anyone with karma >75 is welcome to improve it.

updated 2014-03-19 12:44:29 +0200

jgr gravatar image

Give the user the choice to scale the system wide used font sizes or to set the font sizes.

(Yes, in some cases this may lead to texts shown incomplete. If possible, solve this problem by making text scrollable [pullable] within such UI elements [e.g. within a button of a given size]. However, in most such cases, only a little part of the text will be cut off and intelligible none-the-less. You could also introduce a gesture that temporarily resets the font size to default size for the whole screen.)

edit flag offensive delete publish link more

Comments

6

answered 2014-04-14 00:10:14 +0200

galacticginger gravatar image

Adding the option to change font size and boldness would greatly improve the readability for short sighted, elderly and visually impaired users. This is a standard in the IT industry. Thus I was a bit confused that it was not jet implemented.

edit flag offensive delete publish link more

Comments

6

answered 2015-10-03 04:06:28 +0200

Mika Hanhijärvi gravatar image

I do not aggree. Dark text on light background is not as good on eyes as light text on dark background. There is good reason why most of the devices whit display do have light text on dark background. Dark text on light background works well on paper because paper does not have any background light. But computer and mobile device displays are completely different issue because those do emit lots of light. That is not so big problem if you have good eye sight, but it is big problem if your eyes are not so good. Contrast between text and background is wery important. It is MUCH easier to read light text on dark background because pixels in text emit more light than pixels in the background. Just take any device which has display which supports high contrast mode, you will see that high contrast mode always has light text on dark background. I personally am blind now. When I did have eye sight left it was difficult or impossible to read dark text on light background because the background emitted too much light and dark letters where difficult to see. It was MUCH easier to read light text on dark background. Eyes also got much more tired when I tried to read dark text on light background. That is the reason why I started to use dark theme on my computer too. I have also used high contrast theme on desktop, it also has light text on dark background. I really can not aggree the claim that dark text on light background would be better or easier for the eye. Ofcourse it should be possivble to use ambiance light that if someone wants to do so.

edit flag offensive delete publish link more

Comments

That's why we have day/night mode, like the already mentioned FBReader.

Besides,

There is good reason why most of the devices whit display do have light text on dark background.

I would not go as far as claiming "most". And yes, there is a simple reason: because at some point in the past it was easier to implement. CRT screens are black by default. To make them display something, you need to modulate an electron beam. The CRT displays of early 1970s did not have a very good resolution. Trying to show a white screen would result in visible horizontal lines. Leaving the background black and showing the raster only in the displayed character was a lesser evil.

The early LCD displays, known from calculators, digital watches and personal organizers, had the opposite problem: they were white(ish) by default. Trying to display a solid black background was just as impossible as solid white on early CRTs. So they settled for a black text on a white background.

Nowadays we have a choice, and I can absolutely and unconditionally agree with the OP: in most situations, except for using the device in the dark, black-on-white is far more superior and desirable than the other way around.

pichlo ( 2015-10-03 21:51:06 +0200 )edit
1

@Mika Hanhijärvi, you have good points and you are speaking from personal experience. Can't argue with that; from your point of view, you are right.

I wrote my original post based on 1) what I have learned in working in graphic design (mostly in print) and 2) my personal experience. And I must admit there's no Truth here.

It's kind of "common knowledge" in graphic design that body text set with white on black doesn't work; if you do it in a magazine, you're sure to get feedback from (elder) readers: "Don't do this, it's impossible to read". But it's surprisingly difficult to find any backing to why it's so.

And it's certainly true that paper is very different from a screen.

I personally find it very difficult to concentrate on, say, a news article on my phone screen, with text laid out with white on black. I don't know exactly why.

One thing certainly is habit: books and magazines are set with black on white, and that's how I'm used to doing my reading.

But another important thing, regarding especially the Jolla phone, is reflections. The Jolla phone screen is not very good with contrast, and it's highly reflective. When I read white text on a black background, the background is like a mirror. It's white text on a mirror – very hard to see. On a white background, the reflections are far less visible and the black text stands out better from the background.

What all this amounts to, I think, is that the user should have a choice.

Based on your feedback, I'll edit the original question a bit to not be so black-and-white. :)

ssahla ( 2015-10-04 01:39:49 +0200 )edit
6

answered 2016-01-12 21:01:39 +0200

this post is marked as community wiki

This post is a wiki. Anyone with karma >75 is welcome to improve it.

updated 2016-03-15 20:10:34 +0200

Okay, the file controlling font size has been found!

In Sailfish OS size is controlled by the dconf key /desktop/jolla/theme/font/sizeMultiplier

All we need now is a GUI to change it. Anyone want to write a patch?

This is how you change it (write this into the Terminal):

dconf write /desktop/jolla/theme/font/sizeMultiplier value

value is a float. Default is unset or 1.0. (2.0 means two times bigger, 0.5 is two times smaller)

Also, you should modify another dconf value:

dconf write /desktop/jolla/theme/font/sizeThreshold 60

This will limit the maximum size of the characters. Default is 0 (unlimited).

For more info check out this article at Jolla Italia (here's a link to Google translate)

Thanksfor the hint, @fravaccaro!

Some screenshots with a factor of 1.4:

image description image description image description

edit flag offensive delete publish link more

Comments

:) I built this hack (along with Alien Dalvik font size changer and other tweaks) in my script, so far it's a cli UI, but a proper GUI is coming (there's already a 3rd party one on OR).

OpenRepos: https://openrepos.net/content/fravaccaro/theme-pack-support-sailfish-os Sources https://github.com/fravaccaro/themepacksupport-sailfishos/

fravaccaro ( 2016-01-12 21:50:36 +0200 )edit
3

I'm supriced that Jolla Italia wrote the instructions 1.5 years ago and, according to Google Search, were the only ones to ever post that dconf key in the world.

jollailija ( 2016-01-13 08:22:21 +0200 )edit

I added some screenshots to demonstrate the effect.

Sebix ( 2016-01-15 23:51:28 +0200 )edit

Thank you, @Sebix - very useful to know :)

Edz ( 2016-01-16 02:19:19 +0200 )edit

Thanks @Sebix!

jollailija ( 2016-01-16 13:08:50 +0200 )edit
4

answered 2014-03-19 18:38:16 +0200

Gabir gravatar image

Since I have some eyesight problems I would like to suggest the following.

  1. in the latest update (1.0.4.20) there is a very better keyboard. The letters are extremely more readable than before for people like me with eyesight problems. White letters on a dark background are very good. The best would be an option to have a keyboard similar to the N9 one: completely black with white letters, but the latest Sailfish keyboard is fine too. Suggestion: if you choose to change the keyboard layout in future updates, please keep an option to set a keyboard layout like the 1.0.4.20 one!

  2. it would be useful in order to reduce eyesight problems to have some accessibility option like the ones we have in iOS 7.1, they are very good (I don't know how Android is about this subject). Specifically I mean options to set contrast, to decrease the white point, to darken system colours (as I stated before, keep an eye to iOS 7.1).

Please consider eyesight difficulties in your future updates, it's important for people like me. Maybe we aren't a very big number, but we exist and use smartphones!

edit flag offensive delete publish link more
3

answered 2014-01-18 18:34:39 +0200

this post is marked as community wiki

This post is a wiki. Anyone with karma >75 is welcome to improve it.

updated 2014-03-09 23:34:43 +0200

ssahla gravatar image

Add alternative, light-backgrounded themes for app developers to use, and make guidelines that suggest using dark-on-light themes in places where there is lots of text (notes, discussion boards, mail & messaging, long lists, app documentation, to name a few.)

edit flag offensive delete publish link more

Comments

1

Not an option. Apps (at least those that follow the Sailfish UX guidelines) don't have their own themes. They're not supposed to. If you want apps to look different, don't ask app developers to add theming. You're supposed to create a new ambience.

ovekaaven ( 2014-03-10 02:04:33 +0200 )edit

Actually, I'm asking for more themes (namely, an inverted or dark-on-light) to be included in Silica, so that developers can choose. Or, more possibility of variation within the default theme.

I'm not a developer, so I may make mistakes with the terms, sorry.

ssahla ( 2014-03-10 08:37:03 +0200 )edit

I think it is a great idea, that there are standards defined by an Ambience that do not only specify the parameters for the operating system UI but also for the apps UI. I would love it, being able to change for example contrast settings by defining an Ambience and see this change automatically being pushed forward to the very last app on my device.

jgr ( 2014-03-19 12:58:26 +0200 )edit
2

answered 2014-03-14 23:14:14 +0200

spacenewt gravatar image

Linking here my request of automatically inverted ambience color scheme here as a possible solution: https://together.jolla.com/question/32547/feature-requestambience-with-automatic-inverted-color-scheme-for-better-contrast/

edit flag offensive delete publish link more
2

answered 2015-10-03 12:01:32 +0200

I'd suggest using an ambiance like @Markkyboy's AllBlack. It makes the background black and the text white, like in N9. The downsides of this are that your wallpaper is just black and all text is white (highlighted text looks the same as all other text).

edit flag offensive delete publish link more

Comments

@jollailija - I have been playing around with this lately. I've manually added bolder fonts in 2 system font folders. I see a few minor problems in doing this, one is some app names in launcher are turned into dots, like "ScreenTapS..." for example, personally, I can live with that type of minor discrepancy.

I did notice though, by changing 2 of the main system fonts, I can at least discern the difference between myself and a recipient in a text message, the recipients text is somewhat bolder than mine, where as before I could barely read either, let alone distinguish at a glance.

I've made a patch, it installs, it shjows in patchmanager, but it doesn't activate/apply - I think my unified_diff.patch is the problem, I had a real hard time trying to get that right data into the file, after maybe 30 or 40 attempts, I've given up for now, my head hurts - I need help to make the patch apply.

Ultimately, some form of Font Control entry in the Settings menu would be good, just like most phones have settings for fonts; small, medium, large, HUGE......we need this for SailfishOS - for me, it's becoming a must, but I've realised by having a slightly bolder font in the general UI, I'm not reaching for my reading specs just to use my phone - now this I like! :)

I have requested further help on TMO and so I'll ask here as well. I will post my request on this page as another answer for visibility.

Edz ( 2016-01-01 19:05:57 +0200 )edit

@Markkyboy As I commented elsewhere, since font sizes are not hardcoded (instead of pixel amounts, they are specified as Theme.fontSizeMedium for example), dynamic font size should be easy to implement
About the bold font, I haven't installed a bold font, instead I just added font.bold = true to, for example, the launcher (and multiplied the font size by 1.2). I removed the elide (Calen...) and instead set boundaries for the text and made it wrap over multiple lines. I like the result. App names don't go over each other, and even 4-line app names look nice

jollailija ( 2016-01-02 13:36:18 +0200 )edit
Login/Signup to Answer

Question tools

Follow
12 followers

Stats

Asked: 2014-01-18 18:34:04 +0200

Seen: 4,507 times

Last updated: Dec 03 '18