This is a response to @TW_Tones post from Elephant in the room thread, specifically the parts about visuals and exposing TW’s capabilities.
I originally wanted to make it a reply but it grew and grew and I had to organise it in a more sensible manner. Below I am likely to criticize certain aspects of TW’s front page and its theme, please keep in mind I say it out of love and out of a particular point of view - conversion of visitors to users. I am not that great with being diplomatic in my words so I apologize in advance :).
My main argument is that how nicely the website looks and how easy it is for the visitors to understand what they see very quickly is extremely important for people to even give TW a try. Why I argue that? Because commercial businesses pay outrageous amounts of money for optimizing the smallest bits of visual design and removing the tiniest frictions from user experience to have tangible return in sales. And while TW is not selling a product, the idea is still the same - acquiring new users.
Let’s go!
To make a comparative analysis we need to find something to compare against, competition, preferably commercial because they must make sales to survive so there is a strong evolutionary pressure incentive to perform. I think there are two categories of products that best match what TW is: complex note taking apps (aka universal workspaces) and wikis. I’ll compare it against a few product I am aware of:
- Notion.so — An all-in-one workspace
- Nimbus Note — An all-in-one workspace
- Tana.inc — An all-in-one workspace
- Evernote — Note taking app
If you don’t feel like reading the detailed analysis I summarise my thoughts at the bottom.
How TW presents itself
Welcome to TiddlyWiki, a unique non-linear notebook for capturing, organising and sharing complex information.
Use it to keep your to-do list, to plan an essay or novel, or to organise your wedding. Record every thought that crosses your brain, or build a flexible and responsive website.
(A list of 9 image links)
Unlike conventional online services, TiddlyWiki lets you choose where to keep your data, guaranteeing that in the decades to come you will still be able to use the notes you take today.
(Links to 5 external sites)
(2 Quotes)
(Award)
What a user may pay attention to:
- One menu at the top and another menu on the right
- The menu on the right has a lot of buttons which look scary (most people seem to have an aversion to clicking things that look like they can make a change)
- The whole presentation itself is enclosed in a box that has a lot of redundant information at the top - scary buttons, yellow box with text, the timestamp
- Both the timestamp and repeating nature of the boxes in the middle give an impression that it’s some kind of blog
- Font is small
- In the first post there are a lot of links in the text and outside the text
How Notion.so presents itself:
(Hero image with a short marketing blurb and immediate call to action)
(It also has list of big name companies that use it)
(Followed by a bunch of attractive looking screenshots showing off various functions contrasted with short marketing blurbs expounding Notion virtues)
(Followed by a bunch of screenshots showing actual use cases + another call to action)
(Followed by a showcase of templates)
(Testimonials from big companies)
(Closing with another call to action)
What a user may pay attention to:
- The visual design is certainly modern - lots of empty spaces, big fonts with short text, no image buttons.
- A lot of call to actions inviting them to give it a try for free.
- Various use-cases presented in an attractive and clear way
- Uses a non-standard web font
- Fairly standard menu at the top with the important bits – Pricing, Try Notion free button, and a lot of content meant to showcase how cool Notion is.
- Call to action buttons is very contrasting against the rest of the page
What can we learn from it:
- Less is more - it has barely 20 words before it teases you with images
- Attractive screenshots of the use cases are a good way to show the power of the app
- Multiple call to actions to increase conversion rates
How Nimbus Note presents itself:
(Image Links to other Nimbus products)
(Hero image with short marketing blurb, that is also animated to grab your attention and immediate call to action, the image shows a mini screenshot of the app and sells the idea it works on all devices)
(Some marketing blocks selling Nimbus Note’s virtues)
(A short looping video selling the idea Nimbus Note can do everything)
(List of big name companies that use it with a marketing blurb to accompany it)
(Selling some features in a text manner)
(Testimonials)
(Another features and virtues blocks)
(Awards)
(Selling the migration feature)
(Cross-product selling)
(Selling that it can be used on any device)
(FAQ)
What a user may pay attention to:
- The visual design is certainly modern
- There is a lot of information, probably far more than needed (but I guess it works for them?)
- Many call to actions though they are less prominent than in Notion
- Fairly standard menu at the top with timportant bits – Pricing and call to action. The rest is on this page
- It mostly uses videos in place of images to showcase features
- It has few screenshots/videos of actual use cases, mostly just specific features
What can we learn from it:
- You can have too much information on a page and still have sales
- Videos to catch your eye
(Personal opinion: I think this site is aimed more at corporate decision-makers than individual users)
How Evernote presents itself:
(Big marketing blurb with a call to action)
(Hero image showcasing it works on desktop and mobile with list of features)
(A video showing usecases)
(Quotes from big papers praising the tool)
(List of features/virtues with screenshots of usecases)
What a user may pay attention to:
- The visual design is certainly modern
- All the important information is visible above the fold in not a lot of text. Also an attractive image with the app.
- Fairly standard top menu - with call to action, though no immediately visible pricing option is annoying
What can we learn from it:
- Less is more
- Call to actions
- Showcasing attractive usecases
How Tana.Inc presents itself
(Start with a teaser that contains some short marketing blurbs)
(Menu at the bottom)
(4 full-screen sections talking about certain features and virtues, accompanies with videos)
(Animated list of usecases)
(Testimonials)
(Tweets)
(Call to action)
What a user may pay attention to:
- Cutting-edge web design
- Loads of videos to catch your attention
- Can immediately lose interest after being confronted with a front page that takes forever to show anything (but if they do that then it’s possible it works for them)
- Lots of varied and nice-looking usecase screenshots
- The website is slow even on a fairly new and powerful PC
What can we learn from it:
- Sometimes less might be just too little
- Attractive use cases
Summary (tl;dr)
Keep in mind this is all my very subjective interpretation of these websites. And below are my subjective conclusions.
- One big difference between TW and the other tools I looked at is that TW isn’t integrated with a hosting service.
- A comparison to Wordpress would be prudent here – Wordpress.com sells WP with integrated hosting and has barely any mention that WP is open source and you can self host it, wherein Wordpress.org is the self-host-user hub that also mentions their own hosting.
- Perhaps looking more closely at Wordpress.org in the future might be a good idea
- Another big difference is that the front page for all the other tools is just that – a front page. In case of TW, tiddlywiki.com is:
- Front-page for the app
- Entry point for the documentation
- Live showcase of the app
- This is a problem – their concerns are opposite, any improvement in one regard negatively impacts others. No other app does that, they always have a separate design for the website and for the app.
Now before I continue there is one question that needs to be asked – who does TW want to be for? Right now I think it’s used by a very specific subset of people (which I can’t define but I have this intuitive sense based on everything). It’s perfectly fine to have a have high entrance difficulty to weed off people who’d otherwise not be capable of tinkering their way into TW bliss. But if the goal is to make it a viable alternative to all those tools I’ve looked at today for people who just want something that works… Well, here are some frictions and possible solutions:
- Overwhelming front page:
- Separate it into two, so one can serve existing users (documentation part) and one can be optimized for newcomers.
- Make it simpler so that it only shows what’s really necessary - which might require hiding some UI elements
- Modernize the web design
- Have prominent screenshots showcasing attractive and varied usecases for TW
- Not knowing where to start:
- There are too many options on where to start. Every other tool has one way to use them - a dedicated app. Wordpress has canonical Wordpress.com hosting and a list of 3 host providers they work with (but these can be treated like one since it’s the same way to host, just with different providers). TW could adopt as few as possible to be the canonical and most correct way of working with it (possibly single HTML file, Node.js and TiddlyHost) to reduce the confusion.
- And make it a prominent button, near the top of the page, visible above the fold as you open it.
- And a blank TW is extremely intimidating. It could be good to have a bunch of starter wikis with certain functional templates, and when you press the “Start Now” button you get the option to chose your goal.
- Not understanding what it’s for:
- I feel like “a unique non-linear notebook for capturing, organising and sharing complex information.” might be difficult to interpret for an average person, it is certainly for me.
- Perhaps part of the problem is how versatile TW is, which for the purpose of selling it to new users can be curbed a little bit.
And, for the last time, let me just reiterate – this is all my personal opinion, informed by my experience with web development but I am not a designer, not a UX designer and not a business analyst, it’s just all the stuff I picked up by osmosis which may or may not be wrong.
Okay, my brain is overheating now. This came out much longer than I anticipated.
