Category: UI / UX (User interface and experience)

I replied to a comment here : https://dev.tiki.org/tiki-view_tracker_item.php?itemId=8071&threadId=10284&cookietab=1#threadId10286

I inserted two user tags and the display is wrong...

{CODE()}@john.chishugi{CODE}
Only john is a link and it is broken

{CODE()}@chibaguy{CODE}
Display the user full "real" name

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

I've just discovered the feature allowtableexpansion while using dev.t.o. Nice addition to the UI/UX!

However it seems to be that something needs tweaking still in its implementation in ((doc:PluginList)) [https://doc.tiki.org/PluginList-output-control-block?highlight=allowtableexpansion#Table\:_expand_table_number_of_items_found_optional_title|here] (specially compared to the implementation in ((doc:PluginTrackerList)).

Example of allowtableexpansion using PluginTrackerList:
https://dev.tiki.org/Spreadsheet#Open
Icon: fullscreen-like
It DOES work as expeced (even with floating autotoc and side columns)

Example of allowtableexpansion using PluginList:
https://dev.tiki.org/H5P#Open_or_Pending
Icon: play-like (imho, the fulllscreen-like icon as shown through plugintrackerlist is more intuitive)
It DOES NOT work as expeced (even with floating autotoc and side columns): nothing relevant seems to happen for the end user.

HTH

When Tiki is not completely set up and composer (vendor_bundled libs) not ready, Tiki shows only raw plain-text message when you access pages like tiki-admin.php or tiki-listpages.php

It shows only:
"Your Tiki is not completely installed because Composer has not been run to fetch package dependencies. You need to run 'sh setup.sh' from the command line. See https://doc.tiki.org/Composer for details."

It would be better if it used --default Tiki UI / theme-- some HTML + CSS UI displaying the message in a nicer way.

{syntax type="tiki" editor="plain"}
Since Tiki29 we have (for those where it work ;-) ) icons for each menu items.

This is nice and ok on the system menu where we have space around the menu items.
When you deploy a sub-menu it really start to be a lot of things in front of the eyes.

Overall the actuel implementation (not collapsable see related item) doesn't add a lot for the user experience.
By that I mean the following and this is my opinion (wearing glasses 🤓);

1. Does it make easier to find the right item the user is looking for in System Menu (one of the goal of having an icon instead of text) on desktop:
* Discutable, but let's say it improve a bit for the System menu so a little +.

2. Does it make easier to find the right item the user is looking for in the Settings Menu on desktop:
* Not really, the menu look really crowded without enough spacing and adding icons just make it harder to read.

3. Does it make easier to find the right item the user is looking for in other features sub-menu items on desktop:
* Not really, these are 3 to 8 menu-items adding icons just make it harder to read.

4. On Mobile...I could not test at https://29x.demo.tiki.org/tiki-index.php the menu is broken on mobile.

5. Does this help reclaiming space (another purpose of having icons is to display a little understanble visual small element instead of text): No, the collapsable option has been removed from the UAB. (😳)

6. Does this help with translations (another purpose of having icons is to display a little understanble visual small element instead of text): Yes icons help in a certain way. I'm not convinced as so far I still need to read the text to know where witll lead my clicking on a link.

At this point, where it is just nice to have icons, I think that having icons in ALL the menus should be optional... as it should have been in the first place.

See: https://ibb.co/Ps8YBhtb, https://ibb.co/4w5STNJW

Have a look at this older bug report.

It is being rendered like in the screenshot (attachments), completely illegible. My browser here is a current MS Edge on W10.

Without starting a new discussion on breaking layouts: If a page like dto writen not on ancient but fairly up-to-date Tiki versions renders like the screenshot: How can an admin protect his/her website from such? How can it be remedied? Sites as large as dto surely cannot be inspected page by page for layout errors.

Thanks
hman

To keep the whole (responsive) table in view in large displays, a CSS rule was added to break words (and other character strings like multi-digit numbers) anywhere in the string. This does help to narrow the table, but also makes content readability much worse in some cases. If a solution better than "word-break:break-all" can't be found, I would at least like it to be optional (a Look and Feel preference) so site admins who prefer better typography in scrolling tables can have that option.

If you access https://dev.tiki.org/Tiki20#Open_or_Pending_Blockers_and_Regressions , there's a button to Expand that Table. It doesn't work, as it used to until a few days ago. So navigation in the table becomes very difficult. If you turn off jqDoubleScroll then the feature works fine.
{img fileId="1298" thumb="box"}

{syntax type="tiki" editor="plain"}
As CSS and browsers have gotten more powerful, a page refresh shouldn't be needed to turn on and off fullscreen mode. Compare with the new color mode switch: the change is instant as the browser changes CSS variable values in real time. I think the same could be done to switch the visibility of the peripheral page sections.

When downloading file/files from the file gallery the actual download completes in ~1 second. The File Gallery UI download progress bar still thinks the download to progressing at a slower rate and shows 100% complete after 10 or so seconds.

I'm getting a 500 error trying to upload the screenshot so I'll attach

After a basic PluginListExecute with editable filters, once we submit an action, we are redirected to the page where all filters are duplicated. See GIF below:

https://cl.ly/0698c9a23f29

{img fileId="1365" thumb="box" width=640}
See https://tiki.org/forumthread73548-comments-on-blog-posts

The form element "select" in forms of Tiki Forum and in other features of Tiki is missing the term (selector) "custom-select" as part of the CSS class to render it correctly in the Bootstrap theme design.

Making this simple change would greatly improve and unify the UI of Tiki with the currently available Themes.

See attached screen shot of added term in inspector for Tiki Forum feature.

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

! How to choose the right software library for tiki.

After reading the article that explain the best way to choose a software library for tiki (((https://dev.tiki.org/How-to-pick-a-software-library|pick_a_software_for_tiki))).

Related to the task ((https://avan.tech/item71402-Generate-Avatars-in-Tiki-until-users-upload-their-own|Generate Avatars in Tiki)), some research has been done to to try to find out witch libray will be good for tiki.
The choice of libray was based on some criteria:
- number of download
- number of dependances
- number of stars
- and easy to implement

The fist one is ((https://packagist.org/packages/multiavatar/multiavatar-php|Mutliavatar)), the library does not required extenal depences and everything has been design with a single class.
easy to use and generate SVG image with can be stored.

The sencond is ((https://packagist.org/packages/laravolt/avatar|Laravolt Avatar)) it has a large community and have more that 1M download.
It has been design to be used in laravel project but can be used in other project, but it has so much pendencies and some of symphony, knowing that tiki also used to dependcy of symphony.
It can generate PNG or JPG file or SVG.

And the last one is ((https://github.com/splitbrain/monsterID|monsterID)), it a good tool, but i realised that, all avatar are PNG file created and stored on a folder ready for use, with can be easy replaced by ((https://packagist.org/packages/multiavatar/multiavatar-php|Mutliavatar)).

Some library where design to be use only with laravel (most) or for wordpress.

The global navbar color assigned on tiki-admin.php?page=look is ''always'' applied, so when assigning a menu module and giving it a parameter like "navbar_class=navbar navbar-expand-lg navbar-light bg-light", when the global pref is "dark", this is the result in the page source: -+ <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-dark bg-dark" role="navigation"> +-

The combination of color classes causes problems for link colors, etc.

There are times when, because of the theme colors, both navbar-dark and navbar-light are needed, like when the topbar zone has a dark background and the page footer has a light background, so when a per-module color parameter is specified on admin-modules, it should __replace__ the Look and Feel global setting, not be added to it.

{syntax type="tiki" editor="plain"}
For anything that is not related to a user-caused physical motion (ex: dragging, swiping, gesturing, etc.), this operating system accessibility setting should be honored to disable any animation that is purely cosmetic.

https://dev.tiki.org/Bootstrap-4-to-5-Migration-Checklist is the only page that has any mention of "prefers-reduced-motion", but if the Tiki.org front page (and other pages / sites I've seen) is any indication, this is not actually implemented throughout Tiki for non-essential animations.

---

References:

* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
* https://webkit.org/blog-files/prefers-reduced-motion/prm.htm
* https://web.dev/prefers-reduced-motion/

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility also says:

> this method of switching animation off according to the user's preference can also benefit users with low battery or low-end phones or computers.

If you take a close look at a long bug report like my "umbrella bug report", you'll see that it bears so many comments, their display gets paginated. That's a good idea. But one would expect that the first comment on page "2" is one following the last on page "1".

But that isn't the case... The last on page 1 is dated August 31st, the first on page 2 is from August 22, 2020...

And yes, I did reload the page to be sure that I do not see old data...

Thanks
hman

When new Tracker fields are imported in a tracker, the "position" option is used for placing the new fields. If there is no ''position'' option, the default position is 0.

The usual use case is, they should be added below the rest. The lack of this possibility wastes a lot of time uselessly.

The label on the pagination tools at : https://dev.tiki.org/tiki-admingroups.php are not properly vertical aligned:

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

It may be there is some "legacy" styles (before bs4), once removed all align properly.

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

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

Finally it look ok

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

What do you think ?

---

Still ugly in Tiki25

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

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

Editing inline on the tracker list can be very handy and even a must for several use case where you need to update many items regularly.

On Tiki21, some fields need more room like the relation field.
Also inline editing save on tab change or return or submit.
It is pretty complicate and unsafe to select the right field just after you search for result as the saving process is already running.
https://share.vidyard.com/watch/HZfjqXGNVPZHszy6ae9X4p?

Also when you are in the middle of a list, the saving process move the display and the success remarks box is displayed awkwardly over your list

PS: By the way the url can inflate quickly as you use a filter, then another, then...

{syntax type="tiki" editor="plain"}
On a fresh Tiki27 => Trackers

{img fileId="3082"}

On the -+tiki-user_information.php+- -> text "__My Info__" is constructed from two strings: "Info" - which is loaded from -+language.php+- (this is OK) and with string "My", which is untraslatable.
Word "My" doesn't load from -+language.php+- (looks as constant).

I have learned that "support request" is now used just for paid support. But I need support not from external programmers, but from the very devs who wrote this. There is a (actually quite many, but I'll start with a prime example) string that is fed into tra() that I don't understand.

/templates/wiki_plugin/wikiplugin_snarf.tpl contains this call to tr() (via tr in curly braces) in line 1:
{CODE(Colors="Tiki")}
{tr}{$snarfParams.ajax|escape:html}{/tr}
{CODE}

What does that mean? Obviously it's a call to a PHP variable to be inserted in runtime. But why is the output fed into tr() and not one step earlier the contents of said variable? And how is this supposed to be translated? Of course, in language.php it could be directed upon itself (with key==value), but then why feeding into the translation function in the first place?

And as I wrote, this is just one example, more than half a dozen others are there, too... Enigma to me...

Thanks
hman

{syntax type="tiki" editor="plain"}
It stopped doing anything in master (aka main or trunk) recently for me. When you switch the toggle on, it just highlights the translatable strings on hover but clicking them does not open any dialog to translate these.

To reproduce apply this profile (or set the prefs manually):
{CODE(caption=>YAML,wrap=>0)}
preferences:
feature_multilingual: 'y'
feature_translation: 'y'
lang_use_db: 'y'
language: 'en-uk'
{CODE}

There are places Tiki ask to confirm "an" action but the action is not stated.
User should be told "what" is to be confirmed.

Here a video from Calendar, delete event.
{file type="gallery" fileId="1696" showicon="y"}

When you are on a modal (like when you "Save and Comment" a trackeritem in this tracker) you still can use the "Help" button of the toolbar.
It usually open a modal with help for Wiki Syntax and Plugins but in that case, you are already IN a modal and using it will close all modal and all your previous work is lost.

It is not possible to open a modal from a modal in Tiki (I most case if not all) therefor the action shouldn't be possible and so it shouldn't be allowed and lead to lost of data.