Loading...
 

Tiki 25 UI Improvement Brainstorming

Preparing for Tiki25, this brainstorming is about the interface but doesn't get into WYSIWYG editor implementation and editor syntax issues, Vue.js, or page builder possibilities, etc. It's just about what goes where and how it looks and functions. The goal is to bring to Tiki some of the features and innovations of other platforms, etc. as well as make general improvements and updates.

Some ideas:

  • Overall
    • Meet WCAG accessibility guidelines (https://www.w3.org/TR/WCAG22/, https://webaim.org/)
      • Color contrast (fix default values and in themes — there are patterns of particular page elements and classes having trouble)
      • HTML problems — missing form labels, empty headings, empty buttons, empty links, broken ARIA menus (fix as part of Bootstrap upgrade)
    • Reduce/eliminate extra white space above the actual page. Any controls, icons, etc. (identify and list these) that stack vertically when activated should instead line up horizontally so they take up only one row. This is a problem on "presentation" type pages where there's an image or colored section at the top of the page, not to mention wasting space above the fold. (Themes or individual pages can add whitespace back as desired.)
    • Reconsider the size and placement of functional icons.
      • Thinking of the side column hide/show switch icons, for example. They seem quite small compared to such controls on other websites (compare to menu hamburger icons, for example). Also it's more standard for the icon to be attached to the center-facing edge of the moving column and move along with it rather than being stationary above it. Should it be moved?
    • Is it necessary to have a separate site icon and site logo? Why not just inform admins that the logo should scale nicely in all displays and layouts? This is quite confusing to new admins.

  • Horizontal page-top navigation
    • We need to figure out how to avoid having two nested navbars for page-top navigation
      • This results in two hamburger icons in top navbar
      • Unfortunately this is hard to avoid with Tiki's current code, which nests one navbar inside another when a menu is assigned to the module zone. The fixed-top navbar ("Bootstrap layout") has a hamburger icon by default. When a menu is added to that module zone it also has a hamburger icon unless it the default is turned off when the module is assigned, but then that menu doesn't collapse in small displays.
      • The current arrangement also complicates non-menu link coloring because the navbar links get their colors based on navbar-light or navbar-dark, but other links such as the log in link and Quickadmin icon don't.
      • This assumes that best practice is for a menu (navbar) and the entire top or topbar module zones to have the same background colors.
    • Horizontal navbars should be full-width navbars when site or page is full-width.
    • Brand / Site icon and Module Logo (link to the Home) [This is also discussed below.]
      • Site/Brand icon
        At tiki-admin.php?page=look#contentadmin_look-2 the admin can set the Site Icon and it will be used for the Bootstrap layout as the Brand (icon). This works when there is no Logo module set for the Top area. The size is not enforced and in some cases (like when using the Unified Admin Backend) a big brand icon will overflow other elements.
        However: This setting is expected to be moved from here to the admin-modules page. (to the module Logo)
      • Logo module
        The site icon is missing from the logo and it should be added there. As well it should be useable as the Brand bootstrap icon and size should be enforced when displaying it (in case of Brand usage as in the bootstrap layout).
        • I'm in favor of consolidating the site logo and icon. Having both is really confusing to new users, and sites should just use a logo/icon image that scales nicely (such as by using an SVG image) as is done on other websites.
    • Remove CSS menus ("suckerfish" menus) because features and functionality are now replaced by Bootstrap + Smartmenus.
  • Vertical navbar/menu
    • Option to display a vertical menu as an accordion
      • This brings the challenge of devising a multi-level accordion, but presumably that can be worked out.
  • Blogs and Articles
    • Enable putting a "featured image" at the top of the post or article, optionally with text (title and/or lead text) overlying it.
    • This can be done, probably, with the jQuery append function, but having a solution coded into these features would be best.
    • Mosaic or card array style of blog and article top page
      • Instead of just listing posts and articles vertically down a text-dominated page, have the option to display them more graphically in a grid, optionally with the post/article featured image.
    • Use larger user/author images with posts and articles (as the resolutions of displays have increased, Tiki's image specifications haven't kept up).
    • Update obsolete Bootstrap media class according to recommendations (use utility classes, etc.) and improve layout in the process.
    • "Article heading" section and blog should be div class="lead".
    • Articles: "Read more" link should be more prominent and, if possible, modified to comply with WCAG guidelines (maybe a text field on edit page to add specific text).
    • Articles regression fix todo: reinstate float around article image. [Done}
  • References:

  • Wiki features
    • Plugin Accordion
      • This seems like a natural addition as Bootstrap 5 makes it simple. The plugin could be very much like PluginTabs in terms of the editor interface.
      • Update: Done! Adrien coded the new PluginAccordion and it will be part of Tiki 25! Thanks.
    • Improve structure navigation
      • Just an impression that needs thinking through, but the arrangement of arrows, etc. probably isn't clear especially to new users. Is there a more standard approach?

  • Admin interface
    • Remove obsolete admin options (example: background color behind site logo).
    • Complete/fix/improve Unified Admin Backend (see Unified Admin Backend ).
    • Enable the option for themes to style the UAB.
    • Consolidate site logo preferences at the Admin Modules page, moving from L&F admin the ones remaining there. (see navigation about Brand icon / Site icon).
      • This means the site logo module would need to be used in the social layout also, as in the other layouts. This will fix the overlap in the Unified Admin Backend topbar.

  • My Account
    • Eliminate redundant information
      • User contributions to the website are listed twice
    • Remove broken features
      • "My level", for example. Maybe more.
    • Relocate content to make better sense — suggestions:
      • Move the Basic Data tab of My Info and also the content of Preferences to MyAccount
      • Rename "My Info" to "My site contributions" (for consistency changing the name from "User Contribution")

  • Related: Improve the initial experience (thanks, Horia)
    • Tiki default Homepage
      • This should be an attractive page that is a model for new admins/editors, including:
        • A nice page-top image maybe in a hero section
        • A row of cards
        • Anything else that can be used as a model and improves the first impression
    • An example top navbar
    • We should do a survey to see what's the most common/popular navbar placement, and see if maybe the fixed-top navbar should be the Tiki default

  • ...


-

Just indirectly related, but added here to keep it on the radar:

  • There was a suggestion to be able to easily create a "Black" version of the site's theme so the site can "go black" as a sign of social protest.
    • This serves a social purpose, but to expand the idea to cover more use cases, it might be good to think of this also as a way to have "dark mode" versions of themes, where people might like to have a dark version of a light-background theme because they like the theme overall and want to keep using it (although now dark), instead of switching to a separate dark-background theme, which isn't as clearly a statement or exactly a dark version of the site's theme, where you want to switch the colors but leave everything else as is. Tiki's Theme Customizer needs to be checked for this purpose, so that any theme can have a dark mode easily. If not , the dark version would have to be created in the standard way of assigning values to color variables and compiling. So the process to make a color-variant child theme, which can get involved if button colors, etc. need to be changed, should be tested again with Bootstrap 5 and documented. And, depending on user requests, some could be added to the package themes. (I like the idea of a "Blackberry" theme for Five Alive and Five Alive-lite ;-) . )

Keywords

The following is a list of keywords that should serve as hubs for navigation within the Tiki development and should correspond to documentation keywords.

Each feature in Tiki has a wiki page which regroups all the bugs, requests for enhancements, etc. It is somewhat a form of wiki-based project management. You can also express your interest in a feature by adding it to your profile. You can also try out the Dynamic filter.

Accessibility (WAI & 508)
Accounting
Administration
Ajax
Articles & Submissions
Backlinks
Banner
Batch
BigBlueButton audio/video/chat/screensharing
Blog
Bookmark
Browser Compatibility
Calendar
Category
Chat
Comment
Communication Center
Consistency
Contacts Address book
Contact us
Content template
Contribution
Cookie
Copyright
Credits
Custom Home (and Group Home Page)
Database MySQL - MyISAM
Database MySQL - InnoDB
Date and Time
Debugger Console
Diagram
Directory (of hyperlinks)
Documentation link from Tiki to doc.tiki.org (Help System)
Docs
DogFood
Draw -superseded by Diagram
Dynamic Content
Preferences
Dynamic Variable
External Authentication
FAQ
Featured links
Feeds (RSS)
File Gallery
Forum
Friendship Network (Community)
Gantt
Group
Groupmail
Help
History
Hotword
HTML Page
i18n (Multilingual, l10n, Babelfish)
Image Gallery
Import-Export
Install
Integrator
Interoperability
Inter-User Messages
InterTiki
jQuery
Kaltura video management
Kanban
Karma
Live Support
Logs (system & action)
Lost edit protection
Mail-in
Map
Menu
Meta Tag
Missing features
Visual Mapping
Mobile
Mods
Modules
MultiTiki
MyTiki
Newsletter
Notepad
OS independence (Non-Linux, Windows/IIS, Mac, BSD)
Organic Groups (Self-managed Teams)
Packages
Payment
PDF
Performance Speed / Load / Compression / Cache
Permission
Poll
Profiles
Quiz
Rating
Realname
Report
Revision Approval
Scheduler
Score
Search engine optimization (SEO)
Search
Security
Semantic links
Share
Shopping Cart
Shoutbox
Site Identity
Slideshow
Smarty Template
Social Networking
Spam protection (Anti-bot CATPCHA)
Spellcheck
Spreadsheet
Staging and Approval
Stats
Survey
Syntax Highlighter (Codemirror)
Tablesorter
Tags
Task
Tell a Friend
Terms and Conditions
Theme
TikiTests
Federated Timesheets
Token Access
Toolbar (Quicktags)
Tours
Trackers
TRIM
User Administration
User Files
User Menu
Watch
Webmail and Groupmail
WebServices
Wiki History, page rename, etc
Wiki plugins extends basic syntax
Wiki syntax text area, parser, etc
Wiki structure (book and table of content)
Workspace and perspectives
WYSIWTSN
WYSIWYCA
WYSIWYG
XMLRPC
XMPP




Useful Tools