Category: UI / UX (User interface and experience)

Using the supplied .htaccess file, when a non existent file and directory is requested for OThER than .htm files, a 404 is not generated and an unformatted version of the home page is opened. For example see uticacurlingclub.org/junk/junk.htm which generates a normal 404 which is redirected to a custom page, and uticacurlingclub.org/junk/junk.pdb which does not. I suspect this is an issue with .htaccess.

Site accessibility is a very strong argument to implement Tiki in governmental or public funded project.

The following is a bit overdoing it but look convincing.
{img fileId="1951" thumb="box"}

Having simply contrast and font size tool should be enough.

May be there is an open source project that can be integrated via composer ?

https://webaccess.berkeley.edu/resources/tips/web-accessibility
https://www.drupal.org/project/civic_accessibility_toolbar
https://github.com/mickidum/acc_toolbar
https://github.com/pojome/one-click-accessibility/ (wordpress plugins for ideas)

{syntax type="tiki" editor="plain"}
In the early days when Tiki Wiki was primarily a Wiki tool, keeping the **wikiactions** page actions button constantly visible at the top of Wiki pages made sense.

However, now this button often obstructs the user experience, drawing attention away from content with its contrasting color, even when only one or two actions are available.

While outlining the button (as discussed in the Matrix chat) would be a quick improvement.

I also propose we also enhance the admin settings at `tiki-admin.php?page=wiki#contentadmin_wiki-1`. Adding a __group selector__ under "Wiki top line location" would allow admins to choose which user groups see the page_actions button.

At tiki-adminusers.php (Admin users) there is a popover on the username that display the user information.
This popover should never overlap the username link.

While this work fine with the "usual" information it doesn't work when "user tracker" is used to store user informations (https://doc.tiki.org/User-Tracker) and have sections (tabs used).

{img fileId="1684" thumb="box"}

On Tiki24 we have an admin "Print Setting" page : tiki-admin.php?page=print

If I want the generate a PDF from the action menu (first preferences on the admin page) this is what I see:
{img fileId="1714" thumb="box"}

Wiki print, the main feature to enable everything print, is somewhere at the bottom ? and PDF generation is at the top, preferences that rely on it are place above it... frankly it really look bad for Tiki to release such mess for users. We should use tab and reorder things.

Another example, the preference "Show Page title" is placed under "PDF settings" however it is applied to both (common preference)

{syntax type="tiki" editor="plain"}
If Tiki is going to have System Menu item icons by default in new installations, probably all menu items should have one. Why only "Categories" in the system menu dropdown?

The same items in the admin pages aside menu have icons, so it should be just a matter of adding them to the system menu. Note: be sure these are added in a vendor-neutral way so that if the admin switches from Font Awesome to Bootstrap icons (or another icon set), they will still display.

As shown in the attachment, I have a floating TOC in 25.2 this worked fine but now in 25.3 if you scroll past Heading #5 the TOC scrolls up too under the browser links bar. Its proper behavior is to stay at the top of the window and always visible.

:update
If the window is scrolled more than ~2800pixels the toc starts to move up.
I'm using Firefox 118.02 on ubuntu

When we enable the ((doc:Notifications)) system in a real-world tiki site, with some sort of activity, we usually end up attempting to review the notification log (tiki-monitor-stream) with plenty of duplicated entries (a wiki pages was edited many times the same day, a tracker items was editted many times in the same time frame, etc.)

Some sort of low-hanging-fruit would be to expose the PivotTable UI (like the one we use in PluginPivotTable) to display those entries from your own tiki-monitor-stream data with usual default time-based aggregations by months, weeks and days.

This is related to the other similar feature requests to allow to use action log or activity stream as data sources to the ((doc:PluginPivotTable))

My 2 cents.

Using "Anchor links on headings" (tiki-admin.php?page=wiki&highlight=wiki_heading_links) you can enable having a link and an icon for it in your headings.

While it is awesome for certain headings (the higher one) it is very annoying for others (the lowers) and break design (adding an extra line to display the icon).

It would be nice to have a selector for this to select: H4 and above, H3 and above, H2 and above, H1 only).
(may need rewording).

We have a few boutons, menus and menu-items that are displayed in Tiki while there is nothing doable.

For example at : https://tiki.org/Donation

Some are just overloading the screen.
Some have a very little interest (informative)
Some have an informative value (but a button or an item menu is not the right way)

{img fileId="1250" thumb="box"}

--

Another example is the structure menu displaying __only__ an item for the page I'm on and clicking on it just doesn't do anything but reloading the page. (check as anonymous)

{img fileId="1861" thumb="box"}

In Tiki23 (and more) we have different name for what appears in the user name the same thing. (bolder if he is not English mother tongue)

{CODE(caption="This parameter is a caption" theme="default")}Caption{CODE}
{FADE(label="This parameter is a label" icon="y")}label{FADE}
{ALINK(aname="This parameter is a (anchor) Name")}Name{ALINK}
{button href="#" _text="This parameter is a label" _type="info"}

Etc... You understand the idea. Sometimes it may be different WITHIN the tool usage (one word in the Admin area, another on the wiki page, etc).

I don't want to argue about what do what and improve the exact terminology of things.
I want to improve the user experience by using consistent parameters so he feel less confused (Tiki is confusing... ?)

So when the user (not necessarily Admins) edit a page and add a plugin directly he doesn't have to look the doc to know if he should use; caption, label, name or title.

We may end with some "specificities" due to the real usage but it have to stop to be a Russian roulette. ;-)

A modal should show when you click the icon, but it doesnt. The modal contents load in a full page, and with limited functionality, such as not having a "save" button.

{img type="fileId" fileId="1291"}

Seen in Tikis 18 with r. 69798 and r. 69918

/templates/layout_fullscreen_check.tpl line 8: Broken icon call.
{CODE(Colors="Tiki")}
{self_link fullscreen="y" _ajax='n' _icon_name=expand _title="{tr}Fullscreen{/tr}"}{/self_link}
{CODE}

_icon_name is set to expand, without quotation marks around 'expand'. Whether _title is correct with a starting underscore I don't know. Also, there is no icon named "expand" (with quotation marks), but there is an "expanded", that is redirected to bullet_toggle_minus.png.

When you enter dto's preferences and want to set your location in your profile, you can no longer search for your town. Doing so yields this error message:

REQUEST_DENIED: You must use an API key to authenticate each request to Google Maps Platform APIs. For additional information, please refer to http://g.co/dev/maps-no-account

Looks like the code for that no longer interfaces correctly with Google...

I want to change the colours of buttons. Bootstrap has it's own colors for that (which I do not like), and I seem to be unable to change them. No matter whether I declare them in _variables.scss (which would load before bootstrap.scss - which in turn loads _buttons.scss) or in a separate file that gets loaded after bootstrap.scss, even when declaring them !important, bootstraps own colours always come through. Also, no matter whether I redefine a default colour or one of the dedicated colours like primary etc.

After some googling, this could be a bug in bootstrap. Since Tiki incorporated bootstrap, IMHO it's a Tiki bug now.

{CODE(Colors="Tiki")}
// Buttons
$btn-primary-color: #000000 !important;
$btn-primary-bg: #e7e7a1 !important;
$btn-primary-border: #999970 !important;
$btn-default-color: #000000 !important;
$btn-default-bg: #e7e7a1 !important;
$btn-default-border: #999970 !important;
{CODE}

They all come out, after transpiling, as #2255aa; or #212529; etc.:

{CODE(Colors="Tiki")}
.tiki-webmail .btn-primary, .tiki-cypht .btn-primary, .mobile.tiki-cypht .btn-primary, .inline-cypht .btn-primary {
color: #fff !important;
background-color: #2255aa !important;
border-color: #1c458a !important;
}
{CODE}

At dev on the buttons the light red is the main "call for action", "default action", primary background color button. The dark red is the secondary background color button.

When I edit/create an event in the calendar on dev.t.o at the bottom, this is what I see:
{img fileId="1497" thumb="box"}

Due to the placement buttons and the fact that there is 2 default action (primary color) the preview button seems to be the "default" one. That’s wrong UX.
"Save" should be the first (start - left direction) and only primary, "Preview" and "Copy to a new events" should come after with both secondary colors.

This is the same (worst) when editing a page at t.o (cancel doesn’t look like a "cancel" button, it is secondary):
{img fileId="1499" thumb="box"}

When I edit a tracker item this is what I have:
{img fileId="1498" thumb="box"}

The order is good but "Rename" and "Write together" have wrong colors. They should use the secondary color. (also the Lock button not shown here is primary color).

We should carefully design our buttons for a better UX.
Those elements a critical for new user approaching Tiki and partly explain why people feel uncomfortable and confused with Tiki.

Saying that Tiki is too big and there is too many options is just another way to say that the interface is too confusing. ?

https://uxplanet.org/focusing-on-buttons-e31d575953bd
https://courseux.com/best-practices-for-buttons-the-user-experience-of-colors/

{syntax type="tiki" editor="plain"}
Buttons with a dropdown menu, such as the page actions button, have been changed in master compared to earlier versions, with different HTML. The earlier version is like this:

{CODE()}
<div class="blogactions">
<div class="btn-group">
<a class="btn btn-info btn-sm dropdown-toggle" data-bs-toggle="dropdown" data-hover="dropdown" href="#" title="Blog actions" aria-expanded="false">
<span class="icon icon-menu-extra fas fa-ellipsis-v "></span>
</a>
<div class="dropdown-menu">
<h6 class="dropdown-header">
Blog Actions
</h6>
<div class="dropdown-divider"></div>{CODE}

The code in master is like this:

{CODE()}
<div class="actions blogpostactions float-end btn-group">
<ul><li> <a class="btn btn-info btn-sm dropdown-toggle" data-bs-toggle="dropdown" href="#" title="Blog post actions">
<span class="icon icon-menu-extra fas fa-ellipsis-v "></span>
</a>
<div class="dropdown-menu">
<h6 class="dropdown-header">
Blog post actions
</h6>
<div class="dropdown-divider"></div>{CODE}

I don't know the reason for the change, but there is now, in master, a ul that doesn't have any class to remove the bullet. Was adding the ul necessary? (I think it's best to stick with the Bootstrap methods as much as possible.) If it was necessary, the ul should have the dropdown-menu class, for styling purposes.

{syntax type="tiki" editor="plain"}
While user create a tracker on the "Category" tab of the modal there is a "Categories" link.
If the user click on it he is thrown away from the page with nothing he just entered saved.
This should not happen.

The user should be warn he is leaving is editing and nothing was saved yet.

{img fileId="3061" thumb="box"}

A German court has ruled that websites that utilize Google fonts possibly violate the GDPR, and the owner of such a site is liable for that.

At first look, this sounds over the edge, but when looking deeper, the court's legal findings are stringent. If a website loads Google fonts, it makes the browser of users load the fonts from Google, thereby compromising personal data to Google.

If the user in question did not agree to this disclosure of personal data to Google (and the site owner can prove that), than it is a clear violation of the GDPR. The user then doesn't know about this disclosure of data, and cannot do anything to prevent this.

Therefore it is advisable that all demo Tiki stuff, including themes, be either stripped of Google fonts, or the fonts should be loaded directly from the site, or the users of such themes be told that the unaltered use of these themes comprises a GDPR violation, which can be fined (for companies) with up to 20 million Euro or 4% of a year's turnover (not profit!), whichever is higher...

with any of the menu modules on the left column if your mouse hovers a menu item with sub-items the pop-out sub-items float under the content of the centre column this obscuring them. The JQueryUI needs to put the pop-out sub menus on the top layer of the page. [https://dev.tiki.org/tiki-download_item_attachment.php?attId=824&display]

{syntax type="tiki" editor="plain"}
On tiki-view_forum pages, there is no space between the link text and the separator character. On tiki-view_forum_thread pages, there is a space on each side of the separator character. In wiki structure breadcrumbs, there is a space ''and'' a pe-2 class on the link text. Both for maintenance and for visual consistency, the same code should be used in all breadcrumb instances, it seems to me. My recommendation is (as always 😉) is to follow the Bootstrap pattern, in this case shown on https://getbootstrap.com/docs/5.3/components/breadcrumb/ .

{syntax type="tiki" editor="plain"}
Tiki.org, just updated to branch 29, is now also showing the cookie message and dark backdrop on every page load like dev.t.o is showing, not for very long but still this is an unacceptable visual glitch IMO. This pops up even if you have accepted cookies.

{syntax type="tiki" editor="plain"}
Recently at dev.tiki.org, the cookie consent form displays on every page load, even though I have consented to the default and selected "save preference". The form only displays for a few seconds but it shouldn't show at all for a user who has consented to cookies.

There's no point in the current page in a structure "breadcrumbs" being a link, because you're already on that page, and it's even kind of misleading because it might give the impression that, because it's a link, it refers to the ''next'' page in the structure, not the current page.

{syntax type="tiki" editor="plain"}
On the tracker field selector user you may have several users selected.
Exemple: https://dev.tiki.org/item7083-Set-up-wish-reminder-system

Unless you want to remove the last user, it is super not user-friendly to remove a user from the field. You have to delete all and re-assign them one by one without the one you wanted to remove.

That's a pain and forbid changes in many cases.

{mediaplayer src="display2146"}