Photo by Bekky Bekks on Unsplash

Why are we seeing such a rise in spatial tools?

Article incomplete…

Main take aways

• ITEM 1
• ITEM 2

When you assign yourself a name in nodenogg.in you are not creating a log in or are you identifying yourself this name purely establishes a local relationship between the device and your nodes. This is what enables you to add and edit your own node.

The relationship is a between a local storage pouchdb and your assigned name also stored in local storage. Then when you join or create a microcosm you can add nodes there with this relationship intake, you can also keep the device name between microcosms

All the data in your pouchdb is synchronised to a couchdb instance which is what enables other people to join the same microcosm and work together in real time in the same digital space. The data from each person is copied to everyones devices and the pouchdb/couchbd sync manages the changes. The data is currently not encypted but there is no way you can find out whos data belongs to who, unless you hack th couchdb and know the microcosm that was being used and the device name you provide was something identifiable.

Ok that's a basic introduction to the technology, the name you provide is never exposed to anyone else in the interface. This is very different to popular spatial tools such as Miro and Mural.

As you can see the people involved are shown by active cursors and their names. This has two issues, the first is the screen is so busy with cursors moving it can be very distracting, and second you can also identify who is moving what and who contributed what

In a workshop or session in which you ask a group to continue to a single space, the issue of being identified reduces participation and increases anxiety in what they contribute

During the building of nodenogg.in we have used a number of services to co-create together, the tools that identified contributions, OneNote, Google Docs, Slack impacted on both contribution volume and also in conversation with students they were very selective in their approach to contributing, they didn't want to look silly or not as good as others.

Yet when we ran feedback sessions using an etherpad in which students could create unidentifiable names (although exposed in the UI), the volume of participation increased and students felt freer to contribute, of course they had fun with the names and would eventually identify themselves normally. An example of this in actual system of hierarchy is is the idea of the HIPPO (Highest paid persons opinion), this can end up leading the direction of the idea generation, whether intentional or just by the fact you know they are the 'boss'.

Article incomplete…

Main take aways

• Being anonymous increases engagement.
• Being anonymous reduces anxiety.

Peter Secan

As nodenogg.in progresses, I keep seeing flashes of how it would help to organise, or be used in, my own thinking practices, and so I occasionally get frustrated with the speed at which I’m able to advance its capabilities. Still, I have to remind myself that I’m not running a research lab, and that I can only devote so much time to the project in the part-time allocation I have.

Whenever I discuss a concept or an approach to interacting with the nodenogg.in data I know its possible and could be fun yet I cant program as fast as I want, I have never professed to be a coder and whenever asked I always advise I’m not a coder I’m a hacker.[footnote]I also really like the term tinkering[/footnote]

50% of computer programming is trial and error, the other 50% is copy and paste. - Pawan Sharma

In order to take advantage of the realisation that I could–and should–build with proper semantic HTML in mind, as well as all of the Vue.js learning I’d personally undertaken coupled with a number of excellent conversations with Toby, I felt that a complete re-write was very necessary. This has instantly started bearing a lot of good fruit, as can be seen in these progress videos:

• 0.1.0 YouTube
• 0.1.9 YouTube
• 0.1.10 YouTube

Of course, the goal is to test this within the design studio thinking process as soon as possible, although the COVID-19 lockdown will negate that to some degree for a while!

Thinking about testing, I was reminded of Ken Kocienda’s book Creative Selection. He was an engineer at Apple who worked on creating Safari for macOS and the touch keyboard for what would become the iPhone (the ‘Purple’ project). It was a revolutionary piece of touch design that could, if gone awry, derail the whole project, as the Apple Newton’s hand recognition software had. When describing working on ‘Purple’, Kocienda mentioned the idea of ‘living on’: the day-to-day routine of using in-progress software as if it were a real product.[footnote]Other technology organisations have tended to use the terrible term ‘dogfooding’ for this concept. [/footnote]

So, as part of our new weekly chats, Toby and I have set aside some drivers to get us ‘living on’ nodenogg.in as soon as possible, which I hope will eventually lead to more people testing the alpha release. Regarding how we’re “living on”, I’m trying to keep the list of drivers as short as possible, as the intent is to release often and iterate. We don’t want to fail quickly, but this is a human-centred design process and thus the more humans involved, the better.

Keep an eye on the main site for the latest alpha alpha build, and please do give any thoughts or feedback any thoughts via the discourse below.

Main take aways

• 'living on' nodenogg.in asap is going to key to pushing forward delightful design choices.
• Note that trusting software is also important, this needs to be considered.
• Will people put data into an alpha app (see point 2)

Bernard Hermant

✌️Who doesn’t love emoji ❤️?

These funky Unicode characters were all but unknown until the last decade but long before European embraced the Japanese Emoji. Many of us used a serious a keyboard characters to add emotion to our text messages this was my preferred smile was a semi colon followed the right parentheses :) (which is now auto converted on most systems to the emoji icon) but many used the longer version to include a nose :-). Pictograms have a long history themselves and this blog post would be amiss if I didn’t include some of the work of Otl Aicher.

Otl Aicher was a german Graphic Designer and co-founder of the Ulm Design School. His work on designing the 1972 summer Olympic design language via pictograms for representation and signage has gone on the influence design across the world. These pictograms provide short hand visual representations of more complex information.[footnote]I talk more about Data Visualisation in a previous article[/footnote]

Pictograms provide a shorthand and emojis add in the elements of emotion, play and delight. The history of emoji is embedded in digital technology

We now see emoji reactions being added to numerous platforms as a button to encourage the use of them as a response, some of this is in response to the Like button being initially universally annoying when someone posted of a tragic situation and you did know what to say all you could do to show support was to like the post. So gradually services like Facebook added more options.

In previous testing using etherpad we would use emoji to up vote ideas and comments on presentations.

IMAGE

Article incomplete…

Main take aways

• ITEM 1
• ITEM 2

Inside Weather

Once I was alerted to the fact that CouchDB existed I was really pleased with how it would fit into the tech stack. Firstly it is Apache Licensed.

It is web tech focussed with a focus on local data and although you can run it on a server, they also have a desktop application which means you can run the whole set up with local connections only, this connects to design principles of data ownership.

A group of makers / designers can just “spin up” and instance of nodenogg.in and there is no need for a centralised source of the data, it is stored on all machines with one of the devices managing sync. The data structure is JSON which is a great structure and also human readable, along with being able to almost mirror Vue data structures.

I installed CouchDB on a centOS box very easily, the other thing that was great was the document model over tables structure model for the data meaning that you can in fact build the schema as you go, this meant that my first few attempts at data structure wouldn’t cause headaches as this could also iterate over time.

PouchDB is a javascript implementation to connect to a CouchDB and the structure mirrors CouchDB. I was also able to quickly use the docs to get a Vue application talking to CouchDB.

The main issue for me was simply understanding where and how to import the library within Vue, there was a bit of time spent on Stack overflow and googling the ways to import libraries, I had some experience with this previously in my other Vue experiments but having also moved to use Vue cli via Vue ui this was much easier to do with the web interface to find and add to project.

I made a little video about the basic set up of my Vue projects at YouTube.

PouchDB is an open-source JavaScript database inspired by Apache CouchDB that is designed to run well within the browser.

PouchDB was created to help web developers build applications that work as well offline as they do online.

It enables applications to store data locally while offline, then synchronise it with CouchDB and compatible servers when the application is back online, keeping the user's data in sync no matter where they next login.

Main take aways

Edu Grande

Mini Browsers are everywhere. This 24ways article goes into much more detail on what they are and how to create them so I wont cover that ground.

Article incomplete

Main take aways

• Providing web app expriences that delight involves a lot.
• I think there is a need for an updated html boilerplate.

Juan Gomez

I knew keyboard shortcuts would always be a really important feature for nodenogg.in, I am a big fan of keyboard shortcuts, maybe that’s due to my macOS usage which always seemed to have a good focus on shortcuts and productivity, much more than Windows ever did. For me the main issue to consider with getting ideas out of your head and into any system is reducing cognitive loads.[footnote]TO REVIEW: Kalyuga, S. (2015) Instructional guidance: A cognitive load perspective. Charlotte, NC: IAP Information Age Publishing. Available at: search.ebscohost.com/login.asp… (Accessed: 25 December 2019).[/footnote].

Let’s take the post it note as the often default starting point for a design thinking process and as it becomes clearer to me that nodenogg.in is a co-creation[footnote]

designers and developers will need to learn to co-create cooperatively. This is not the same as collaboration, where small or large teams work on a certain product or outcome. Cooperative work involves multiple individuals and groups working within a common environment or infrastructure, and helping support that network or infrastructure for mutual benefit, while working on different objectives or outcomes.

Some steps of process - post its

• Get the system out of the way, Great ideas really fly when in 'flow' state. Post it notes are a good example to follow.
• The barrier to use is as low as possible.
• Post its have an inbuilt character limit[footnote]Depending on your hand writing size[/footnote]
• They start as a collection tool.
• And then can become a spatial tool.

The process is never that linear when making something like nodenogg.in I am just chipping away at little bits of core functionality and I initially saw the needful keyboard shortcuts to allow quick connection and connection delete mode.

I was mainly thinking about the fact that after one connection was made this mode was turned off, so this would allow 2 handed control of the spatial view using the keyboard and mouse together to rapidly connect nodes and it would help me learn the necessary code for implementing keyboard shortcuts in Vue and Javascript. It was after this that the idea for quick creation would help with the cognitive load concerns I had when testing the initial input mode where students would open one node and just type only into this, the act of finishing and creating via buttons was way to slow and distracting.

So a purely practical starting point, I decided a good rule of thumb would be to follow the path a person is already familiar with so this would be to use well known shortcuts. On macOS these use the Cmd key followed by a letter so for example Cmd + n would mean new and this is what all macOS apps follow as convention, however to create these and it turns out that the Cmd key is apparently not considered a modifier key or at least it seems now that it is the Meta key which maps to cmd (macOS) and the windows key (Windows). But as nodenogg.in runs in a browser, I would need to disable any default behaviour of the shortcuts, this would be wrong, taking over these commands just because a person is at that specific URL would not be delightful.

So I proceeded to map to the Ctrl Key, I thought initially that I would use the keys c and v although usually used for Copy and Paste I felt that it might map to faster human interactions, this worked well initially in terms of muscle memory, aka my hands where often use to these two commands. A bug then appearing at this stage where I would end up editing the previous data entry, it took me a while to realise what was causing this, I had set the editor text entry to get focus on opening so you could start typing straight away however now the keyboard shortcut was so fast that the editor “heard” the shortcut and started editing the previous entry as the new entry was not yet ready, clicking the button and typing was fine but the shortcut messed this up, so what I did was add a slight delay on the focus so the system was ready for input at the right time, it was a nice distraction and fun hack to deploy.

Of course I went to test on Windows and stupidly realised that the default key for Windows is Ctrl and so on windows these shortcuts would be conflicting. I next decided to move to the Shift key, why I did this before option or alt I am not sure now. I also decided to stick to c and v and that people would grow accustomed to this and then added z and x as Create and Close, next to c and v as Connections and Delete Connections. Of course I hadn’t considered what would happen when you typed a Capital in the note editor panel, so we did a bit of testing with the rule to not use capitals, if you did use a capital the system would try to perform said shortcuts which would usually close the editor. I also tried a new approach as I wanted to have a universal approach with a modifier key and swapped to Ctrl + 1 /2/3/4 again not considering on Windows this switches tabs in a browser. I then moved to the Option or Alt key. Adding Option plus and minus to zoom in was rather satisfying as it helped resolved the boundaries issue where you could drag something off the edge and quickly added the infinite canvas function I wanted, small win which I hadn’t even considered, this involved a little SVG canvas research.

keycode.info

I might revisit META + Enter to close the window however I would need to work out how to target windows with another shortcut and this would mean moving between OS would have different actions where as in fact sticking to a universal action Option + Return could make this more useful not only for the people using nodenogg.in but also in explaining how to use nodenogg.in

Main take aways

• Sometimes things you think are simple take time.
• Keep up on the blog (more than you think) !
• Try and keep notes on even small changes as recalling exact details was hard
• Git versioning in gitlab can show progress (obviously) maybe something to visualise for PhD write up too.

This morning I was fortunate for Doug Belshaw to give me some time on his microcast thought shrapnel to discuss and talk about the latest iteration of nodenogg.in and the practice based PhD it sits within. Please do take a listen and of course feedback welcome.

Main take aways

• Always good to explain what you are doing.
• Want to do more podcasts talking about project in 2020
• Found some more bugs