Landing Pages -- Can TiddlyWiki Learn From Them?

Right. I’m gonna use two visual metaphors that I hope explicate the issue graphically …


1 - Advanced Yoga (TW Developer) … Once you know what you doing you can do this …


2 - Intermediate Yoga (TW Starter) … All learners need to work a bit before you get there …


My point? What is TiddlyWiki for?

I very much doubt most users ever need to master “leg behind the head.”

A comment, TT

2 Likes

Brave go at visualising. In part my original point of is most people don’t plan to be a yoga guru even if they may dream about it. In a similar way we want users to consider there value adopting tiddlywiki without becoming a tiddlywiki guru, unfortunately I think people see a tiddlywiki guru as a JavaScript coder and this turns them off even starting.

It makes me wonder if we introduced white through black belts like karate they would see the value in the intermediate belts without a belief in reaching black belt. Perhaps we should start a thread the TiddlyWiki achievement belts for example Understanding the Meaning of Karate Belt Colors or perhaps we have stars, or fishes and we display the fishes we believe we can handle.

… as an entry point it might work if an entrantee had free choice on belts / cats / stars / fish levels.

Just a comment, TT

Even here, I notice the plurality of ways of moving toward becoming “power users”.

Some people begin going to town with fields and table-like data structure, some with complex tag-based TOC and navigational structures, others with css and layout tweaks, others with transclusions and macros, others with various plugins…

I’d be reluctant to put these into any linear order, because any one of those development routes might be the most important learning path for a given user.

Grok Tiddlywiki is great at offering one careful more-or-less linear path, but it’s just one path – geared toward a certain kind of learner with certain kinds of tasks (managing notes as a new employee).

Touching again on original question, I do think a well-designed (graphically engaging, and readable) landing page is valuable… the challenge (as folks notice) is to find the balance between simplicity and power.

-Springer

3 Likes

yes, I said as much myself recently. Then we need to find another metaphor but one which ideally deals with both the plurality and the progressive levels.

Actually its starting to look like different paths , almost like snakes and ladders, where the snakes get you back to something you bypassed earlier.

  • Unfortunately snakes have too many connotation’s, including as sliding backwards.

I may be naïve, but I am confident we can find a model/metaphor which is useful to most people, and on which we could hang key documentation.

What about the TiddlyWiki galaxy model?

  • The many worlds model of TiddlyWiki?
  • This is the best fit I can think of so far. Because in reality tiddlywiki is many worlds and inhabitants ,and there are always more to discover. You can even build your own.
  • However as an astronomy / cosmology enthusiast I may be overstating the general utility of this metaphor.
  • An onion may work but they can be smelly :smile_cat:

Architecture of the TiddlyWiki galaxy model

  • Inner $:/core
  • Central bulge - Core Plugins
  • Outer bulge other plugin planets and
    • some Editions like “solar systems” ie “rotates around project management”
  • Spiral arms - different paths to follow outwards to a goal
    • Where different planets and solar systems arise
    • New Goal?, add new spiral arm and a path moving outward from the core
  • TiddlyWiki 5.3.x a new merging satellite galaxy ?
  • There ae also thousands of space memes we can play with
    • Including the tiddler “Babel fish” - TiddlyWiki’s Guide to the galaxy

Then people would accumulate stars and planets in various spiral arms.

Do I sound like a “mad man”, an “add man”?

This is not Off topic - Such a theme could be the theme for a landing page such that the metaphor indicates;

"There is more, much more, just explore".

Looking at landing page content;

Part of promoting TiddlyWiki is explaining the name,

In the process of developing a standard starter edition as above I wrote Its All in the name addressing this somewhat. Copy below.

  • a home landing page and modern look
  • attractive introduction to tiddlywiki helping people identify its use for them

Please also see my attempt to find a metaphor for tiddlywiki Landing Pages -- Can TiddlyWiki Learn From Them? - #37 by TW_Tones where The TiddlyWiki Galaxy may be a good one.

Is anyone here handy with annotating images?

Images my be copy written

IMO way to abstract. … The OP lists some landing pages with a “powerful 1 liner”, where all of them will also work for TiddlyWiki.

So we can steal them - remix and we would probably good to go.

The second brain - to own your thoughts. – done

Then there need to be some more detailed Edition links with a “call to action”

  • Test Online Buttons
  • Try yourself.
  • Download

and we are done.

What about:

"TiddlyWiki is,

A Recipe Book.
[Demo thumbnail]

A Personal Blog.
[Demo thumbnail]

A Second Brain.
[Demo thumbnail]

A Digital Journal.
[Demo thumbnail]

A Notetaking Wiki.
[Demo thumbnail]

TiddlyWiki is whatever you want it to be.

all saved into a single file, saved anywhere you want,

and it all starts here, with your first tiddler."

5 Likes

Nice! A very concrete overview of applications to convey the multitude and give the visitors actual starting points aligning with their interests, and with direct links to demos or editions for this.

I’ve just spent a couple of days (hours) with Obsidian… I suppose that’s nowhere near enough time to make an evaluation. The initial cosmetic appeal wears off quickly. The limitations emerge and while most are due to my lack of knowhow, I’ve found more promise of success with TW given that I want to move beyond the basics, despite my difficulty with the TW learning curve.

I see that TW has a development history and a rich community with experience. I feel what marketing there is, doesn’t do TW justice. It’s missing out there in the arena. What is most easily found are usually via 3rd party appraisals — “best note taking apps”, “alternatives to…”, etc. where the summation of what TW offers seems out of date and out of touch (reviews written by those who couldn’t make TW live up to their personal objectives?) I can see TW does what Obsidian sums up in key-words that match current trends. Obsidian is benefitting, having filled a conceptual market gap. For example a Sitepoint tutorial that targets those keywords, basically a plug for Obsidian.

There’s quite a bit of discussion taking place in these threads — and I feel that the momentum needs to keep going. So close. A huge knowledge & experience resource exists.

Yeah, it has some great content for someone wanting a blueprint for that end result, but very quickly becomes laborious to adapt to one’s own need.

When I’m looking at new web-apps, for example, I often end up on the “pricing” page hoping to find what is offered at different tiers, to help me decide where to start. Maybe something along those lines could work? …branching off to niche landing pages offering distinct learning pathways, which can also be reached directly via different channels (reviews, alternatives-to, and popular search terms).

More random thoughts:
Obsidian doesn’t market itself as a “wiki”, but seems rather closely related. TiddlyWiki could enjoy a timely relaunch – simply as TW5, the way build your knowledge warehouse note-by-note. The sky’s the limit.

2 Likes

Food for thought:

I removed obsidian and joplin as these two have much large numbers, not sure why.

I’ve also used this before :https://rednotebook.sourceforge.io/ (not sure if their landing page is good)

Thanks
Lucas

1 Like

@Odin think this is a great start and I would like to have this as a template - but it would defintively need a linkcatcher with the action to switch to the normal layout if you click a link.

2 Likes

Thanks @JanJo @arunnbabu81 I don’t recall seeing @Odin’s prototype before, it’s very impressive.

I have experimented with a different approach: to put the landing page in the “before story” area, but position it behind any open tiddlers. The landing page also moves out of the way when any tiddlers are open by shrinking and fading.

Try it out here:

https://tiddlywiki5-git-landing-page-experiments-2023-jermolene.vercel.app/

The PR is on GitHub:

5 Likes

I made a quick demo of how this could make use of layouts.
http://szen.io/landing/

I think it is useful to get the landing page out of the way as fast as possible to start to work.
@jeremyruston, I am still fascinated with your federatial design because it illustrates the philosophy. Could we have a variant of this as a landing-page?

5 Likes

IMO while this is a neat animation, a new user might believe that this is the way a standard wiki behave, and I find text behind the main content to be very distracting. Maybe blurring the background and/or a back arrow in the bottom left would be better ? Love the design of the landing page tho, great job @Odin.

I think it would be great to add a scrolling animation when jumping to “get started”, because it’s not obvious that the page was scrolled. A sticky nav and/or a return to the top button in the footer would be great to navigate between the landing page section.

2 Likes

I think the landing page made by @Odin is the best target. Maybe the preview of tiddler with links that don’t work could be change it. I have doubts about what is the best replacement if there is it.

I think the use of link to trigger changes in the layout, it will result confusing to some users. How I return to landing page. There isn’t any warning about the link used as link to doc. Or if the link opens a tiddler in the story river (something unknown for newcomers) or it opens a modal dialog.

The Landing is positoned behind, however its links continue working.

2 Likes

Did you try that page on a mobile phone? It doesn’t work for me.

There is a wall of text in front of the small sections with the icons.

A small sidenote:
Have you seen the Memory Keeper — Help (clsturgeon.github.io) by @clsturgeon ? It is not a landing page, but it is amazing, simple and light. It can be turned out to a page layout. Only it is not responsive!

3 Likes

I think, this is a question of animation…which are not really defined yet when changing layouts. I think the best way of animating this would be a vertical wipe (in this case to the top). Then we could have a nice button to go back to the landingpage in the topbar

I think we’ve got broad agreement that we should adopt a landing page like Odin’s.

I hope there is also an understanding that Odin’s work is a quick mockup that reuses the existing tiddlywiki.com content, and so does not (yet) address many of the other criticisms of e.g. the Getting Started tiddler.

But the crux of the matter right now is that we don’t have a good way of switching between the landing page view and the ordinary TiddlyWiki view. In Odin’s original prototype, clicking the “Try it out!” button will switch back to the ordinary TiddlyWiki view, which I think works reasonably well (albeit there is no obvious way back).

The problem is figuring out the behaviour of links within the landing page content (and the related problem of handling permalinks).

It has been proposed that we should just automatically switch layouts whenever a link is navigated. But I think the user experience is terrible: an abrupt switch between two completely different contexts, with no obvious way to get back, and no relationship between the two contexts. No website in the world works like that.

Hence my prototype that I linked above: an attempt to combine the landing page more tightly with the ordinary TiddlyWiki view. I think it is promising; there is a consistent and coherent visual hierarchy, and everything works as usual from a TiddlyWiki perspective. From the perspective of a new user, the user experience is as if links were opening in a modal, which are a reasonably familiar user interface feature. But I acknowledge that it still needs plenty of work; for example, the animation won’t be to the taste of all users, and the internal links within the landing page don’t work at the moment.

From my perspective, the problem of combining the landing page with TiddlyWiki’s ordinary interface is critical. We do not have a viable path for giving TiddlyWiki a landing page unless we solve that challenge. There’s no point discussing improvements to the landing page prototype unless we have a viable path for deploying it.

Thank you! I like it a lot too, but I’m not sure it’s suitable for tiddlywiki.com. I think the issue again might be that that it is confusing for end users if we depart too much from the ordinary TiddlyWiki view. It would also be difficult to get good performance for the scroll effects (the Federatial home page is a simple static site without the full weight of TiddlyWiki itself).

It could be one of the ways that a standard wiki behaves when deployed as a website. It’s a pretty universal solution to the problem of making a conventional seeming website that can expand into a TiddlyWiki.

Blurring content is still a performance bottleneck for low powered devices so I’m wary of relying on it for a users first experience of TiddlyWiki. At one point we blurred the background of modals and found it caused problems for some users.