TiddlyWiki5/tw5.com/tiddlers/UserInterfaceSketches.tid

title: UserInterfaceSketches
modifier: JeremyRuston

!Introduction

At its core, TiddlyWiki is a representation transformation engine with a cunning line in selective live updating. The engine could be used to build many different user interface experiences. The role of the core UI is not to be all things to everyone, it is just to provide a beautiful and compelling interactive experience for the activities that experience has shown to be popular.

!Principles

* The best UI is transparent: just the content, no chrome unless you need it
* Design for touch and mobile first, keyboard and mouse second, and play well with screenreaders

!Sketches

The basic idea is to preserve the page itself for the content, styled and arranged as the user wants. The interactive features necessary to use the application are overlaid when needed, and then get out of the way:

[img[Main Screen Sketch.jpg]]

Swiping in from the left of the screen reveals the primary navigation chooser, an explorable fisheye menu that gives you access to all your tiddlers, categorised and linked to make them easy to find.

The sketch below shows the main screen layout along with the contents of the //view switcher//. This allows the user to select between different ways of looking at tiddlers:

* As a packed mosaic of images and text (like the jQuery Masonry plugin)
* As a row of stacks for Kanban type sorting activities
* As a lines-n-boxes diagram, with a plugin mechanism for laying them out
* As a screensaver, where random tiddlers float up the screen
* As a timeline/calendar
* As a stack of cards that are sorted one by one
* As a horizontal row of columns
* As a vertical stack of tiddlers (like classic TiddlyWiki)
* As a zoomable user interface (like Cecily)
* As a command line (see below)

[img[View Switcher Sketch.jpg]]

!Command Line

The idea of the command line is to give people an environment that makes it easy to interactively process tiddlers, performing one-off imports and exports of data, or batch operations on many tiddlers at once. It was somewhat inspired by [[this wonderful experiment on reimagining the command line terminal|http://acko.net/blog/on-termkit/]].

[img[Command Line Sketch.jpg]]
Introduce plugin module mechanism See the readme for details 2012-04-30 11:23:03 +00:00			`title: UserInterfaceSketches`
			`modifier: JeremyRuston`

			`!Introduction`
Fixed docs to work with new wikitext parser Which turns out to be entirely a matter of inserting additional blank lines, which has the beneficial effect of making the wikitext a lot more readable 2012-06-04 11:25:54 +00:00
Introduce plugin module mechanism See the readme for details 2012-04-30 11:23:03 +00:00			`At its core, TiddlyWiki is a representation transformation engine with a cunning line in selective live updating. The engine could be used to build many different user interface experiences. The role of the core UI is not to be all things to everyone, it is just to provide a beautiful and compelling interactive experience for the activities that experience has shown to be popular.`

			`!Principles`
Fixed docs to work with new wikitext parser Which turns out to be entirely a matter of inserting additional blank lines, which has the beneficial effect of making the wikitext a lot more readable 2012-06-04 11:25:54 +00:00
Introduce plugin module mechanism See the readme for details 2012-04-30 11:23:03 +00:00			`* The best UI is transparent: just the content, no chrome unless you need it`
			`* Design for touch and mobile first, keyboard and mouse second, and play well with screenreaders`

			`!Sketches`
Fixed docs to work with new wikitext parser Which turns out to be entirely a matter of inserting additional blank lines, which has the beneficial effect of making the wikitext a lot more readable 2012-06-04 11:25:54 +00:00
Introduce plugin module mechanism See the readme for details 2012-04-30 11:23:03 +00:00			`The basic idea is to preserve the page itself for the content, styled and arranged as the user wants. The interactive features necessary to use the application are overlaid when needed, and then get out of the way:`

			`[img[Main Screen Sketch.jpg]]`

			`Swiping in from the left of the screen reveals the primary navigation chooser, an explorable fisheye menu that gives you access to all your tiddlers, categorised and linked to make them easy to find.`

			`The sketch below shows the main screen layout along with the contents of the //view switcher//. This allows the user to select between different ways of looking at tiddlers:`
Fixed docs to work with new wikitext parser Which turns out to be entirely a matter of inserting additional blank lines, which has the beneficial effect of making the wikitext a lot more readable 2012-06-04 11:25:54 +00:00
Introduce plugin module mechanism See the readme for details 2012-04-30 11:23:03 +00:00			`* As a packed mosaic of images and text (like the jQuery Masonry plugin)`
			`* As a row of stacks for Kanban type sorting activities`
			`* As a lines-n-boxes diagram, with a plugin mechanism for laying them out`
			`* As a screensaver, where random tiddlers float up the screen`
			`* As a timeline/calendar`
			`* As a stack of cards that are sorted one by one`
			`* As a horizontal row of columns`
			`* As a vertical stack of tiddlers (like classic TiddlyWiki)`
			`* As a zoomable user interface (like Cecily)`
			`* As a command line (see below)`

			`[img[View Switcher Sketch.jpg]]`

			`!Command Line`
Fixed docs to work with new wikitext parser Which turns out to be entirely a matter of inserting additional blank lines, which has the beneficial effect of making the wikitext a lot more readable 2012-06-04 11:25:54 +00:00
Introduce plugin module mechanism See the readme for details 2012-04-30 11:23:03 +00:00			`The idea of the command line is to give people an environment that makes it easy to interactively process tiddlers, performing one-off imports and exports of data, or batch operations on many tiddlers at once. It was somewhat inspired by [[this wonderful experiment on reimagining the command line terminal\|http://acko.net/blog/on-termkit/]].`

			`[img[Command Line Sketch.jpg]]`