Muscle Memory Optimized Fractal UI, designs I did back in 2010

I want to share some old designs I worked on back in 2010.

Then I was designing a completely new type of UI based on fractality of everything, together with our company adHD Oy Finland, together with Jyri Hovila, Taina Peltola, Jani Salminen and Aki Tåg.

Our company didn’t really take off, but we did a lot of design and some simple prototypes. We had ambitious plans, but we didn’t get any further than the planning stage and implementing some simple UI prototypes.

Our idea was to build a Linux based operating system, that would have completely new UI paradigm. Jyri had the idea of the Linux based operating system, and I was thinking about the UI side.

SuperYber konsepti.001

We were pushing away from the notion of computers having to imitate books, or other traditional media, like tablets and phones were doing back then. Where is the real intelligence in that? Or smart as in smart phone ?

It only smarts to use, trying to replicate old world paradigms like pages, tabs, files etc in a modern environment. We don’t have to anymore limit ourselves to something traditional with new digital platforms, so why cling onto old ways to think ?

We could create something for the purpose from the ground up, that is optimized for that use case, but instead it seems many just try to imitate already known analogue user interfaces, transferring those into the digital world, which to me doesn’t make much sense, except from the point of having familiar terms to work with and bring people in.

But those files, folders and floppies and all user interfaces paradigms we have been so used to back in the day in the physical world, are now dead. I mean, who uses folders anymore ?

floppy-disk-save-button-icon-65887

When was the last time you saw these? This used to be the universal icon for saving a document

They have went the way of the famous floppy disk as the save icon, young people don’t even know what a floppy disk is, and the same is with many UI paradigms we still stick to.

Fractal User Interface

Working together as a company, we had a problem, a problem all teams and companies have: how to share information efficiently? How to see at one glance how the project was doing and how the team was completing their tasks ? No current software we looked back then was able to provide that view, in a way that you could just see from a single page, a single glance, what was going on with your team and your project ?

I started wondering, why were so many team collaboration software (definitely back in 2010 at least) designed around the concept of books and pages and so on, that fit poorly in a web environment ?

Optimal situation would be to have an immediate visual overview of what is happening in your project, without having to go through different pages, tabs, issues and so on to see what is going on with the project. I wanted to have an immediate view onto how the project was doing, without having to dig any deeper in the UI.

I really wondered, why stick to old paradigm in the thinking of how things should be done ?

SuperYber konsepti.002

So I started to think outside the box, designing from the get go what would an intuitive user interface look like,  for seeing how a project was doing. It would naturally be built around the people connected to a project, and people completing tasks for the common nominator in the center, the project, that everyone would be committing work for.

SuperYber konsepti.003

I was starting to imagine this as a tree, taking something from the nature and starting to build around that concept in my mind. A traditional list, or box based UI didn’t feel like a natural choice, so we began from the very simple roots (ha!) of what it is to build an user interface and what would feel natural for the user.

The main UI was based around the idea of building an UI based around one usage paradigm:

Everything is Fractal.

Here we can see an design based around that concept, designed for a discussion forum app. It would use a fractal tree node based interface for displaying data:

fraktal_preview_01_full

Design for a discussion forum app (click for full version)

branch detail

Branch detail from discussions

The idea was that all data displayed in our UI would be based around fractal tree nodes, and that same structure would be repeated for different data all over the system. In the picture above, we show a design for a discussion forum, but this same model could be used for contacts, messages, files and all the data you have on your phone.

 

This would mean that only one set of UI paradigm would have to be designed, and that same UI model could be re-used all over. No more re-designing every part of the UI, just design one part really well and repeat that!

No more multiple types of menus, drop downs, windows, whatever you need in traditional UI to visualize data, but only one set of really well working interface that would be replicated all over the place.

Fractality of Usage Patterns

We wanted to go further with the fractality of the design, and not just represent it in the visuals of the system. We wanted the usage of the system to be fractal in nature.

This means, that you only have to learn a set of certain hand motions to do any action. And you could use these same actions in every context in the UI. This is sorely missing from modern UIs, where you have to constantly change your muscle actions, leading into not being able to program the muscle memory efficiently, not being able to learn and remember different parts of the UI instantly.

For example, when you learn a sport, or play a game, first you think about it, but the main goal is to be in a state of not thinking about the action being performed, just do it, flow with it.

With modern computer UIs, this is very difficult if you are not using the keyboard, as with mouse and other position based UI’s, you constantly have to keep your attention on the screen, and figure out what does what. This is not optimal for storing the actions into your muscle memory, as the actions are constantly moving into different places, and you cannot just forget about the context and perform similar actions without thinking.

fingerpos

Our UI was designed to be used primarly by hand motions, touch screens in mind back then. So that you would only have to learn a set of certain actions, and repeat those same actions in different contexts, all over the system.

This, I believe, would result in a UI where you can flow through the usage, without thinking about it too much.

Currently, for example, if I want to save this document, I have go through this thinking pattern:

  • What key is used to save this document ? Okay, ctrl+s in this app. Press that.
  • What if I don’t know or remember that key ?
  • Look through the menus. File ? Document ? Okay, it’s under Document in this app.
  • Go through the menus, that are always different for each app, so I have to move my focus into the menu and position my mouse exactly in the ‘Save’ position and click there.
  • Look at a message from the app, was my document saved or not ? Where is the application telling me this ? Oh, in the upper right corner in this context. Ok.

So many specific and accurate actions needed for such a simple action, if you don’t remember the keyboard shortcut. And keyboard shortcuts are perfectly fine, but in a mobile phone or a tablet, you don’t have a hardware keyboard to rely on.

So I have to constantly keep my focus on a simple action I repeat maybe hundreds of times a day, switching from app to app, then figuring out again where to exactly position my mouse cursor or my finger, and how to do that.

Why cannot there be a single paradigm and action to take care of this ?

The main problem is the changing paradigm, and the fact that I have to focus on the action to perform pixel perfect movements. This takes away from the main focus of performing whatever you are doing in a creative flow. It all can break the flow, and move you away from the state of creativity to a state of bafflement and possibly even forgetting what I was doing at all currently.

Universal Controller

In the center of our UI would be this controller, termed Chakana -controller, as it was based on this Inca Cross formation, containing within it the Golden Ratio and Pi, modeled after the Chakana:

 

This cross came to me from a south american friend back then, and we studied it and found that it contains within the ratios at least for the Phi and the Pi, so in a way it was information stored in visual formation. In traditional South American culture this formation was the basis for many architecture, music, design etc, and they had the idea that each direction represents some basic element of life.

So we took this design, and applied the idea that you could control the UI with 4 different major directions, each direction representing an universal concept, like ground, air, fire, water and other universal concepts, and then seek out how those concepts would map onto when working with documents or when sharing contacts, or other actions depending on the context you were working on.

vlcsnap-2017-07-19-17h21m23s546vlcsnap-2017-07-19-17h21m07s998

For example here you would see the chakana compass appear over a contact in your Today list, enabling you to share when selecting the upwards direction (Sharing, Air, Putting it out there, No-Time) modify when selecting down (Modify, Earth, physical action, the Now moment), see your call history (History, Past, Water) and also maybe see your future calendar contacts when selecting the right operation (Future, Fire).

Not all of these would of course map directly to these concepts, but we had the idea that if you remembered the general idea behind every major direction, you could then apply that to each operation in some sense, and you would always have an idea what direction you need to take in order to achieve some action that is related to that concept.

vlcsnap-2017-07-19-17h21m31s008vlcsnap-2017-07-19-17h21m35s952vlcsnap-2017-07-19-17h21m40s002

Here you can see some idea what these major directions could represent. The main idea was to map your muscle memory in a way to one direction, and then you could know what that specific direction does generally in different contexes.

Resulting hopefully in a more natural user interface, where you don’t have to read and understand all the time what you are now operating on, but creating a flow state through the usage. We never got to the phase of testing this in action, except some prototypes I implemented later for GeoKone (now OmniGeometry), but which I never put into production yet.

vlcsnap-2017-07-19-17h21m53s868

Solu Computers Implementation

I was kinda happy to see that Solu Computers were working on a similar user interface later. I actually worked there in late 2016 for couple of weeks, so I got to work on their UI for a bit too, but it just wasn’t my place to be at the moment, although their solution implements this fractal idea pretty much as I had visioned back then. So, hopefully Solu will get their computer and UI out :)

Future plans

I still have plans to implement parts of this UI, maybe for OmniGeometry or Geometrify in the future. Hopefully I will find somebody to help me implement this, so this is also part of why I want to share this information, so I can show people some of our plans.

Anyway, this was enough of past plans made in 2010, hopefully soon I will be able to implement these designs :)

This was inDigiNeous, aka Sakari, signing off!

Advertisements

GeoKone.NET 0.98.02 Released – Now Supports Mouse/Touch Input!

GeoKone.NET - Shattering Geometry!

GeoKone.NET – Shattering Geometry!

Mouse input! Yes, finally GeoKone.NET supports mouse/touch input for the following adjustments:

  •  Move Formation
  •  Scale Formation
  •  Rotate Formation
GeoKone NET 0.98.02 - The Action Toolbar For Selecting Mouse Adjust Mode For Primary Button

GeoKone NET 0.98.02 – The Action Toolbar On The Left For Selecting Mouse Adjust Mode For Primary Button

The new Input Adjust Toolbar can be used to Select The Action that the First Mouse Button is bound to adjust. The second mouse button always moves the formation. This allows you to move the formation around, while easily rotating and scaling the formation also.

You can also use the keyboard shortcuts 1, 2 and 3 to select the active toolbar action.

This is a Game Changer :) As Moving/Rotating/Scaling the formations with the mouse allows much more natural expression than before was possible. This also enables almost animation like scaling and rotation effects to be found while exploring geometry that creates interference at different rotation and radius points.

Mouse Input Testing

Mouse Input Allows Much More Natural Placement .. Who would have thought about that? :)

Contains also bunch of bug fixes and usability improvements, thanks for people who have reported any bugs or feature requests! :) Check out full ChangeLog for more details.

Accurate Circles Bubbling Under

Accurate Circles Bubbling Under

 

Now browse to http://GeoKone.NET and Start Creating Sacred Geometry!

 

GeoKone.NET 0.98.00 Is Alive! :: Layer Style Formation Selector, Filled Shapes & New UI Looks

Excited to announce a new version of GeoKone.NET, 0.98.00! This version brings the new Layer Style Formation selector, a more professional looking User Interface, new parameters for the formations and lots of small improvements and bug fixes.

New UI Layout with the Layer Style Polyform Selector

New UI Layout with the Layer Style Polyform Selector On The Left

Major new feature is the Layer Style Formation selector which allows you to preview the formations in their thumbnail containers when editing. This also allows Arrangement of Formations, allowing you to control in which order the formations are drawn. Use keys ‘[‘ and ‘]’ to arrange formations!

The new User Interface style is targeted more towards graphics designers, focusing on clean and unobtrusive looks, allowing you to focus more on the content instead of the UI.

Creating Hexagon Patterns, Showcasing Filled Shapes

Creating Hexagon Patterns, Showcasing Filled Shapes

Another new feature is that it is now possible to fill the formations with a solid color, allowing even more flexible visualizations to be created. The keyboard shortcut ‘h’ toggles filling of shapes!

Drawing of Lines can also now be disabled, which means you can example only draw the points of a formation, and not the lines connecting the points. The keyboard shortcut ‘-‘ toggles drawing of lines.

This version introduces the following new Keyboard Shorcuts:

'[': Send Formation Backward
']': Bring Formation Forward

'-': Toggle Drawing Of Lines
'H': Toggle Fill Formation

'1': Decrease Number Of Child Points Ratio
'2': Increase Number Of Child Points Ratio
'3': Decrease Fixed Number Of Child Points
'4': Increase Fixed Number Of Child Points

The performance should also be increased a lot compared to previous versions, as there has been big internal changes in the way things are handled. Lots of small improvements and bugfixes also! Still, I had to let go of some of the optimizations I had made, because they were causing problems in the drawing, so not as fast as I would have still hoped for, but it’s better than the previous versions.

Whew! This has been a big release for me, comprising of changes made in the past three months, including an almost complete rewrite of the core logics. I hope you like it, and expect more improvements in the future, eg. Mouse Interaction will be coming at some point! :)

Here is a Psychedelic Starfish to promote this release, this was created with assistance of GeoKone.NET and the Final Cut Pro Kaleidosscope feature. Now go to GeoKone.NET and Start Creating some Geometry!