RFC Request for Comment - color intuitions

[TW Tones]

Folks,

I have being playing with CSS and its integration into TiddlyWiki and realise there is more than enough opportunity especially with the new Custom styles by data tags etc... to realise a smart, subtle and intuitive interface.

This is not an idea for a theme, nor even just CSS but taking a range tiddlywiki tiddler and page elements, that change and provide a subtle variation particularly with colour, pale backgrounds, boarder style, thickness and shadows.

Examples may be

• A pail green background when a tiddler is in draft mode, 
• A Dark a green border if the tiddler begins with "New Tiddler" 
• A yellow boarder if the tiddler is an Orphan
• A Pale grey background if the tiddler an unedited shadow
• and many more

The idea is to take common facts about tiddlers or the wiki as a whole and use these to leave subtle messages to the user 

• We need not know the exact detail of such indicators, because if you use a consistent set they will become evident over time.
• This would be supported further, if we produce a de facto standard and shared it widely (or added to the standard distribution)
• They should be designed for light and dark themes and not influence the overall theme too much.
• Scanning down the story list it will be quick and easy to locate tiddlers based on these subtle colors
• When viewing or editing a tiddler various things will be evident that may not normally be visible, like this tiddler is also a tag.
• Using color and other elements, even just coloured shadows will not impact the layout in anyway.
• Perhaps something similar could be added to the standard list item so links suggest the tiddlers content as well.
• All this could be toggled on and off with a click.

So I started this topic for feedback and inspiration from the community, if you have any ideas such as the following please comment.

• Identify elements we can style in both view and edit mode
• Suggested meaning for things like dotted boarders
• Or meaning full associations with colors eg; red warning, green new, etc...
• What are the ways to identify these different attributes? eg no tags/tags  {{{ [{!!tags}is[blank]then[notags]] }}} {{{ [{!!tags}!is[blank]then[hastags]] }}}
• Indicating an over all wikimode?

To support this effort I have also built a library of more than 800 named colours, so a spectrum of colours can be used eg "Bigger tiddlers darker boarder" etc...

Regards

TW Tones

[TW Tones]

Here are Some additional elements for styling;

• Tag Color standards
• Tag Icons
• Tiddler Icons
• Tiddler color field
• Tiddler Class field

How would you suggest we use these?

What can you think of?

Regards

Tones

[bimlas]

TW Tones

I had a similar idea, but instead of tiddlers, I play with links. Import the attached JSON to https://tiddlywiki.com and create a tiddler with the following content:

* [[ReadMe]]: Internal link

* [[HelloThere]]: Already opened internal link

* [[$:/ControlPanel]]: Link to shadow tiddler

* [[$:/DefaultTiddlers]]: Link to overriden shadow

[bimlas]

Although I like the principle, I am afraid it is difficult to mark several conditions in one place. For example, if we were to play with the color of the border, we would need multiple borders, denoting all of them at once:

• The tiddler is a member
• Shadow tiddler
• Overriden shadow tiddler

We can also mark the properties of a tiddler in separate places, for example, its background color would indicate that it is a tag, title color would indicate shadow, and border would indicate overriden, but this would only lead to conflicts because it would not be clear which property to display where.

I have no idea about the solution, I just indicate that there may be such obstacles to implementation.

[JD]

Hi TW Tones, 

Like Bimlas, I've also applied this custom styling in my personal wiki through title links. 

In my case, specifically in the Timeline Macro, or any list that will call up <<timeline-title>>, I've personalized title links to show up like this.

 

Excuse the draft-y, unorganized picture (my personal wiki is disorganizedly organized)

I've set my <<timeline-title>> to do all sorts of detection to automatically add icons, buttons, text, or just a style to a tiddler link. In the above picture, here are detections, and icons/buttons/styles added:

• system tiddlers have a style, and are prefixed with a <<tree>> macro in a dropdown localized to that specific tiddler
• type:text tiddlers are styled in monospace
• tiddlers tagged tiddlywiki show the tagpill beside them
• tagged:ToDo tiddlers are prefixed with a button that will set/unset tag:ToDo-Done, 
• tagged:ToDo-Done tiddlers are line-through'ed, 
• external-link tiddlers (tiddlers with a field:URL) are prefixed with a button [[*]] that will open a new tab pointing to field:URL

...and so on.

Sorry if the above is a bit out of the topic, I just wanted to give a personal insight... through the building of these quite customized detectors, I've found the easiest way was for me to be able to add styles on the fly. If you think this is relevant, I can extract a bit of my wiki to give to you as a demo of the system I built.

-jd

[TW Tones]

Thanks Bimlas and JD for your feedback,

The customisation of links was only a later thought for me but you two have taken it a lot further.

Styled links certainly have their value at providing information about the tiddler the link references before opening it. If we go on to style the tiddlers once opened they should match a little.

Bimlas you say

Although I like the principle, I am afraid it is difficult to mark several conditions in one place. For example, if we were to play with the color of the border, we would need multiple borders, denoting all of them at once:

I am not sure this limitation is correct, that is why I put out this call to identify elements we may style, then map them to something useful. 

In your example of the boarder we could have system tiddler use a dotted black boarder and shadow system tiddler a broken black border. Tiddlers are either system tiddlers or they they are non system tiddlers.  If an unbroken border means regular tiddlers then we can use a set of colours to indicate perhaps state new empty tiddler, editing tiddler... or New/active/in active eg green yellow and blue, with red for attention. Thickness of the border could indicate something else. Style, Thickness and colour are three "dimensions available just for borders.

What can we style?

• Links (as you two mentioned)
• Boarders around any element
• Tiddler
• Tiddler shadows
• Titles/title bar
• Icon
• Titles and button background/border and shadows?
• Title foreground color
• Icon or and/or Icon color
• Indicator on subtitle
• Special button on a toolbar
• I have one that indicates it has focus ie last navigated to or selected.
• Additional toolbar(s)
• Tag color and icon
• ....

While tags often group things and they are quite clear on a given tiddler, the user may wish to groups according to a field value where only one selection is valid at a time such as project name. 

• If all items belonging to one project have an element the same then locating them in links or open story would be helpful, as perhaps something to do with status. 
• Tiddlers and/or Projects may belong in a domain Home/Personal/Work/Club so being able to colour code a domain would be help full

We also have the icon, class and color fields on individual tiddlers.

• See  my attached special SVG image, that displays a color swatch for the currenttiddler in Question `{{||$:/PSaT/images/color-box}}

Possible new elements?

• Inner and outer borders
• Title Prefix/Suffix
• Subtitle buttons and labels

But I still wonder;

What is the most meaningful information we can share with the user via subtle (or not so subtle) indicators?

• eg; Tiddler size
• Assigned type or object-type eg task/note etc...

In addition to your list styling ideas, I have a way of placing button that operate on the current tiddler, in fact edit with a click or open for more options, perhaps a hybrid makes sense?

What colours mean what?

• Black is serious system
• Silver is code or explicit text
• Sand is like papyrus a writing surface
• Traffic lights and blue (in active)
• Green is go or new
• Yellow is in progress
• Red Finished?
• Blue is inert?

Subtle colors may not be visible to the sight impaired or colour blind but they should not make it difficult for them. Dots dashes and solid may be more useful to colour blind people.

More ideas please.

Thanks

Tones

On Saturday, 29 August 2020 14:42:04 UTC+10, TW Tones wrote:

[Birthe C]

JD,

Thank you for showing us. It is amazing. One quick view at your timeline and you will have lots of information.

Birthe

[PMario]

On Saturday, August 29, 2020 at 2:17:56 PM UTC+2, bimlas wrote:

...

I had a similar idea, but instead of tiddlers, I play with links. Import the attached JSON to https://tiddlywiki.com and create a tiddler with the following content:

* [[ReadMe]]: Internal link

* [[HelloThere]]: Already opened internal link

* [[$:/ControlPanel]]: Link to shadow tiddler

* [[$:/DefaultTiddlers]]: Link to overriden shadow

Hi,

I do like the idea behind "Shadow and Overwritten Shadow". ... That should really be much more visible in the core.

Thx fro sharing.

-m

[PMario]

Hi Foks,

Since there are different elements shown. I did an experiment some time ago for a different thread, that defined some colors for TW tables.

I'm kind of proud about the idea for styling different elements _and_ areas within a TW table.

The example used hardcoded styling, which is acitve as soon as a tiddler is visible. ... So the user "className" must be unique.

Examples attached.

Link to: Original thread.

have fun!

mario

[Brian Radspinner]

I really like this as an idea for a developer's plugin, but not as default styling. IMO, most of the mentioned styling is superfluous and distracting to a new user, or one who doesn't plan on using TW as a development platform.

If the idea that all tiddlers are just components that are technically all at the same level and can change levels at any time, I don't like the idea of making tiddlers look different outside of their content based on an individual's needs. System tiddlers are already separated by their titles and being relatively hidden, additional visual cues are redundant; unless you have a specific need to have a specific group of system tiddlers stand out for your own personal needs.

If any of this kind of styling were added to the default install, I would hope that they are not active by default, but made easily discoverable in the Control Panel by someone who is interested in having more meta information readily available.

[TW Tones]

Brian,

Nice to hear a contra-view however;

• No solution like the one discussed would be compulsory and unlikely even in the standard distribution
• In some ways I am proposing a defacto standard that a number of people agree to, you use it if you want too
• All elements should be selectable, and as I proposed they need to be subtle.
• Whilst I think developers may love it, I disagree with the suggestion that new users would not benefit from this, or even innocent users of a website that happens to be tiddlywiki.
• The reason is people do respond to subtle information even if not consciously
• The information should be of use to the user but we do not always know what is useful to the user ahead of time.
• Tags and view templates, title and groups or lists all can be of relevance to the user because that is the way tiddlywiki works
• Just as someone can choose a theme, they can a choose rich highlight mode or not
• I would argue, even promote such a solution that it would have far less impact on a user than changing the theme.
• You are saying "not outside there content", but I am suggesting bringing out hidden content, in ever so subtle ways.

I did not put the argument in my suggestion, but there is a science and cognitive basis to my proposal. One that recognises that humans can extract information even collected subconsciously, if that information is observable.  There is also a driver in the human mind to abstract knowledge then apply it in different places - this is a key feature of creativity.

if any of this kind of styling were added to the default install, I would hope that they are not active by default, but made easily discoverable in the Control Panel by someone who is interested in having more meta information readily available.

Of course, but time will tell if it is an advantage to the naive, new user.

Regards

Tones  

[TW Tones]

Another possible feedback

It you are aware, there is a changecount value added to, with each change of a tiddler in the current session. A Simple icon with 1-9 then + on tiddlers who have a change count value quickly displays which ones you are editing a lot in the current session. 

We can also review which tiddlers are in the current history list whether they are still open or not.

Regards

Tones