7 ms·

Show HN: FlakeUI

138 points by tearflake 2y ago

deleted 2y ago
[deleted]
alwa 2y ago
It reminds me of the glory days when “hypertext” was a term uttered with a straight face to great stroking of beards—HyperCard, exercises in nonlinear narrative, VRML-based “navigation,” Apple eWorld [0] and the like. > Would you like to bring a touch of adventurous spirit to your contents? I personally would not, but I’m really glad people more adventurous than I are still exploring the periphery of UI design! [0] https://www.macworld.com/article/223467/remembering-eworld-apples-forgotten-online-service.html https://www.macworld.com/article/223467/remembering-eworld-a...
- freeamz 2y ago
  Or that Apple space based file system back in the 80's. Try this a bit, it would be nice to be able to go directly to the grand-child, instead having to bring up the parent before going the child. Other wise can be a much better file naviation system then what we have. Especially on touch screen I would image.
drops 2y ago
a brilliant idea in the correct direction of naturally-organic UI, but the example site is rather slow in Chrome on an M3 Air
- freeamz 2y ago
  Runs pretty ok on Chromium (degoogled) on Linux with 8GB ram spec.
anorak27 2y ago
Reminds me of prezi[0]. It would be great if there is an open source version of prezi similar to reveal js. [0] https://prezi.com/p/p6evz0gdy5dr/ux-design-tips-for-product-managers-prezi-video/ https://prezi.com/p/p6evz0gdy5dr/ux-design-tips-for-product-...
- panglesd 2y ago
  Maybe you are interested in slipshow: https://github.com/panglesd/slipshow/ https://github.com/panglesd/slipshow/
unalarmed 2y ago
I'd like to suggest adding support for clicking and tapping for navigation. Having to drag feels unintuitive.
- chipaca 2y ago
  Thank you for the comment. I would not have understood "can be navigated using mouse" to mean "dragging". Also I hate that I can't select text on this. Probably because "dragging".
  - miningape 2y ago
    Exactly, clicking should be the default so the drag handler doesn't prevent users from highlighting text - I literally cannot read anymore without frantically double-clicking/dragging on the words in the text
- paxcoder 2y ago
  I think it would be pretty nice to be able to use the keyboard to navigate the UI (left/right arrow keys to "orbit the content", up/down to "zoom"). Using a pointer, I'd prefer to just be able to click on the oval to zoom into, maybe double-click to zoom back out a level, use the back button to go to the place I came from.
mindcrime 2y ago
I really like this. And conveniently, I am just now working on creating a new personal website[1] + blog, and I could very well see using this for at least part of the site I'm building. The only nit that I really have is that my intuition was that I'd be able to select new "sections" (or "bubbles" or whatever they're called) by clicking or double clicking. Having to grab and drag isn't bad but it violated the "principle of least surprise" for me a little bit. But not exactly a big deal. [1]: https://www.philliprhodes.name https://www.philliprhodes.name
TechDebtDevin 2y ago
Nice!
threekindwords 2y ago
are you aware of this prior implementation [0]? it's now defunct, but may give you some ideas! [0] http://www.spicynodes.org http://www.spicynodes.org
- cdaringe 2y ago
  fun, but annoying to use. clearly not made for mobile!
remon 2y ago
There's a significant performance issue. There's no good reason for a few ovals and texts to stutter on my system. May be worth investigating.
- tearflake 2y ago
  May I ask, what machine you are running it on? On my Celeron (4GB RAM), things are OK-ish.
  - recursive 2y ago
    Intel Core i7, 48 GB, Firefox. Decidedly not "OK".
    - tearflake 2y ago
      I'm sorry, I really wouldn't know what's happening there. On my Linux, Chromium works the best, Firefox can pass, Opera is a bit slower, and Epiphany (is that the name?) chokes a fair bit. On i3, Windows things seem fine - I tried Edge, Chrome, and Firefox. On Mac, I somehow managed to get it working based on Lambda Test web interface feedback, but I wouldn't know the real use performance.
    - tracker1 2y ago
      i7 is meaningless... it could be a 4c/8t processor from over a decade ago that's slower then buttered toast today, or something much faster with big/little cores more recently.
      - mvdtnz 2y ago
        I don't think it's very likely that his 48gb machine is over a decade old.
        tracker1 2y ago
        Looks like it's an 8th Gen with mixed ram running single channel mode. The point stands though, the brand segment is meaningless over time. It's 5-6yo just before Ryzen got competitive with Intel. A current option should be noticeably faster.
kstrauser 2y ago
Make it themeable like Gabocorp[0] and the world will beat a path to your door. [0]https://www.webdesignmuseum.org/gallery/gabocorp-1997 https://www.webdesignmuseum.org/gallery/gabocorp-1997
QRe 2y ago
Kudos for building something new, fresh & exploring, experimenting. I don't see a scenario where this would be useful. It reminds me of exploded-view drawing but I don't see this being useful for textual content. Do you have an explicit use case? The example page, to me, looks very cluttered, overwhelming and IMO aesthetically unpleasing when reading on a mobile device.
- tearflake 2y ago
  Maybe a note keeping app?
runoisenze 2y ago
Nice work. I wonder how the experience would be in VR.
settsu 2y ago
This reminds me of the time a few years ago when mind mapping sites and apps exploded into popularity among the... "technorati" and sort of slightly seep into the wider online awareness but then seemingly, just as quickly, disappear into the background noise of the internet (I'm terminally online to a degree, especially when it comes to tech news—and have a pretty decent general awareness of pop culture trends—and can't recall having seen the topic referenced since the trend faded. But perhaps I'm just not in the right circles?)
- fellowniusmonk 2y ago
  People mistake a helpful "view" for a useful UI. None of these mind map, zoom first interfaces actually help with creating a global understanding. People take an occasionally helpful "view" for navigating items and then mistakenly believe it should be turned into an active interface for creation and editing. Graph/Mindmap views should only ever be a view and maybe a linking layer for nested text lists, actively operating in these interfaces is worse for global understanding and systems thinking. I suspect this is because mind maps don't actually map to how our brain stores information. Visual programming and even tools like KNIME work for stepwise workflow creation but they are not a good UI for new thinking, it's too much UI for novel idea generation and brainstorming, these interfaces are also useful for quickly understanding a DB structure. That's why they never take off and remain a niche tool for the small number of people who have brain structures that find them useful or are willing to bend themselves to an arbitrary interface.
lacoolj 2y ago
Seems to be a navigational flaw here - you can't get to any of the intermediate "sections" without manually going back one by one (other than "Home" to get to the absolute top) Otherwise, this is pretty cool and would be great for one-way traversing (maybe a quiz/test would do well here)
einpoklum 2y ago
I tried the example site. The way this notion is implemented right now, I don't see a benefit. One can barely see anything in the nodes other than the main one; nor can one distinguish them. TBH, even a tree of notes with titles, with collapse/expand controls, would probably have been more useful in emphasizing what FlakeUI offers. Verdict: thumb down. But - perhaps the example is only partial and perhaps this will develop into something more meaningful.
- deleted 2y ago
  [deleted]
chris_pie 2y ago
This is very similar to the idea of Zooming User Interfaces (ZUI) https://en.m.wikipedia.org/wiki/Zooming_user_interface https://en.m.wikipedia.org/wiki/Zooming_user_interface
waingake 2y ago
Have you seen / did you create this series on youtube? The final video lands on something very similar to this. https://youtube.com/playlist?list=PLsfH1Ahi4SzE-QmrsrtyZubGmi66iP45V&si=suUaku48tSxhuF__ https://youtube.com/playlist?list=PLsfH1Ahi4SzE-QmrsrtyZubGm...
jamesrom 2y ago
Kind of cool for a presentation deck. Sorely needs keyboard navigation support though.
humanfromearth9 2y ago
New feature request: support for nix flakes...
com2kid 2y ago
Super fun, but not being able to scroll text within an oval using the scroll wheel kinda sucks on desktop. The mobile UI is really slick though! I feel like this UI would be good for some sort of narrative game, where each oval is a room and things keep changing in each room.
monkeydust 2y ago
Liked this more than expected. Here's my possible use case. In a work setting I am constantly juggling between excel,PowerPoint,word and bunch of online wiki style tools When I have to craft something that requires information from these tools, like many, I end up creating a PowerPoint presentation. Gets the job done but never feels ideal given the one way directional nature of it, yes you can hyperlink but gets messy for audience. This style of navigation could help especially where you are layering the information across multiple themes (each theme say is a node). As audience you might go deep into one node quickly then zoom back out to understand how that node interacts with another.
thih9 2y ago
In practice surprisingly similar to switching between apps and tabs on modern ios + mobile Safari.
jeffhuys 2y ago
Makes me think of arguman[1] and kialo[2]. I discovered arguman maybe 10 years ago and have been thinking about it ever since. It's non-functional now but the source code is available. Maybe it's just my wishful thinking, but if we could map out every detail of an argument, maybe we could make progress faster, as a species. If this were incentivized well (like for instance polymarket), maybe with crypto rewards or something, this *could* take off. [1] https://github.com/arguman/arguman.org https://github.com/arguman/arguman.org - the website exists but is non-functional now [2] https://www.kialo.com https://www.kialo.com - feels like a dumbed-down version of arguman
- bflesch 2y ago
  interesting. I've been thinking about building something like this to provide a structured framework for social media discussions and argument chains.
- keyserj 2y ago
  I think if we could improve our ability to easily & precisely communicate arguments, that would be huge for humanity's ability to deal with problems. I'm building a tool[1] that I'm hoping can help with this, maybe be a successor (in some ways) to something like Kialo. It's critically missing suggestions/approvals[2], and perhaps a simpler interface[3], but I think that, for arguments about problems/solutions, the idea of grounding arguments within a cause/effect diagram is really powerful both for getting on the same page and for making concrete progress towards improving a situation (rather than arguing for argument's sake). I'd be happy to get your thoughts on it if you have any (I'll be making a HN post about it sometime soon^TM). [1] https://ameliorate.app/ https://ameliorate.app/ [2] https://github.com/amelioro/ameliorate/issues/11 https://github.com/amelioro/ameliorate/issues/11 [3] https://github.com/amelioro/ameliorate/discussions/541 https://github.com/amelioro/ameliorate/discussions/541
  - jeffhuys 2y ago
    > I think if we could improve our ability to easily & precisely communicate arguments, that would be huge for humanity's ability to deal with problems. I've been thinking the same thing, and also started working on it in the past. Whenever I voiced this (like here) others came to me saying they also thought of it as at LEAST a part of "the solution". You seem to actually have something going here! I'll take a look at your three links, a first look at [1] gives me goosebumps, you have no idea how happy I am that I'm not the only one that still has this top-of-mind, especially nowadays, no matter what side you lean towards. I can't really find the words to convey my elation here, so you'll have to do with a simple "wow, thank you!".
dvngnt_ 2y ago
Maybe the arrow keys could have a different color if you can actually navigate in that direction.
ramesh31 2y ago
Shades of ZigZag
sebastianmestre 2y ago
Runs slow as hell on my phone. Around 10fps. My phone is not great but drawing some circles and some text should not take 100ms. On any device.
asunnydev 2y ago
[dead]

138 points by tearflake 2y ago

deleted 2y ago

[deleted]

alwa 2y ago

It reminds me of the glory days when “hypertext” was a term uttered with a straight face to great stroking of beards—HyperCard, exercises in nonlinear narrative, VRML-based “navigation,” Apple eWorld [0] and the like. > Would you like to bring a touch of adventurous spirit to your contents? I personally would not, but I’m really glad people more adventurous than I are still exploring the periphery of UI design! [0] https://www.macworld.com/article/223467/remembering-eworld-apples-forgotten-online-service.html https://www.macworld.com/article/223467/remembering-eworld-a...

freeamz 2y ago
Or that Apple space based file system back in the 80's. Try this a bit, it would be nice to be able to go directly to the grand-child, instead having to bring up the parent before going the child. Other wise can be a much better file naviation system then what we have. Especially on touch screen I would image.

drops 2y ago

a brilliant idea in the correct direction of naturally-organic UI, but the example site is rather slow in Chrome on an M3 Air

freeamz 2y ago
Runs pretty ok on Chromium (degoogled) on Linux with 8GB ram spec.

anorak27 2y ago

Reminds me of prezi[0]. It would be great if there is an open source version of prezi similar to reveal js. [0] https://prezi.com/p/p6evz0gdy5dr/ux-design-tips-for-product-managers-prezi-video/ https://prezi.com/p/p6evz0gdy5dr/ux-design-tips-for-product-...

panglesd 2y ago
Maybe you are interested in slipshow: https://github.com/panglesd/slipshow/ https://github.com/panglesd/slipshow/

unalarmed 2y ago

I'd like to suggest adding support for clicking and tapping for navigation. Having to drag feels unintuitive.

chipaca 2y ago
Thank you for the comment. I would not have understood "can be navigated using mouse" to mean "dragging". Also I hate that I can't select text on this. Probably because "dragging".
- miningape 2y ago
  Exactly, clicking should be the default so the drag handler doesn't prevent users from highlighting text - I literally cannot read anymore without frantically double-clicking/dragging on the words in the text
paxcoder 2y ago
I think it would be pretty nice to be able to use the keyboard to navigate the UI (left/right arrow keys to "orbit the content", up/down to "zoom"). Using a pointer, I'd prefer to just be able to click on the oval to zoom into, maybe double-click to zoom back out a level, use the back button to go to the place I came from.

mindcrime 2y ago

I really like this. And conveniently, I am just now working on creating a new personal website[1] + blog, and I could very well see using this for at least part of the site I'm building. The only nit that I really have is that my intuition was that I'd be able to select new "sections" (or "bubbles" or whatever they're called) by clicking or double clicking. Having to grab and drag isn't bad but it violated the "principle of least surprise" for me a little bit. But not exactly a big deal. [1]: https://www.philliprhodes.name https://www.philliprhodes.name

TechDebtDevin 2y ago

Nice!

threekindwords 2y ago

are you aware of this prior implementation [0]? it's now defunct, but may give you some ideas! [0] http://www.spicynodes.org http://www.spicynodes.org

cdaringe 2y ago
fun, but annoying to use. clearly not made for mobile!

remon 2y ago

There's a significant performance issue. There's no good reason for a few ovals and texts to stutter on my system. May be worth investigating.

tearflake 2y ago
May I ask, what machine you are running it on? On my Celeron (4GB RAM), things are OK-ish.
- recursive 2y ago
  Intel Core i7, 48 GB, Firefox. Decidedly not "OK".
  - tearflake 2y ago
    I'm sorry, I really wouldn't know what's happening there. On my Linux, Chromium works the best, Firefox can pass, Opera is a bit slower, and Epiphany (is that the name?) chokes a fair bit. On i3, Windows things seem fine - I tried Edge, Chrome, and Firefox. On Mac, I somehow managed to get it working based on Lambda Test web interface feedback, but I wouldn't know the real use performance.
  - tracker1 2y ago
    i7 is meaningless... it could be a 4c/8t processor from over a decade ago that's slower then buttered toast today, or something much faster with big/little cores more recently.
    - mvdtnz 2y ago
      I don't think it's very likely that his 48gb machine is over a decade old.
      - tracker1 2y ago
        Looks like it's an 8th Gen with mixed ram running single channel mode. The point stands though, the brand segment is meaningless over time. It's 5-6yo just before Ryzen got competitive with Intel. A current option should be noticeably faster.

kstrauser 2y ago

Make it themeable like Gabocorp[0] and the world will beat a path to your door. [0]https://www.webdesignmuseum.org/gallery/gabocorp-1997 https://www.webdesignmuseum.org/gallery/gabocorp-1997

QRe 2y ago

Kudos for building something new, fresh & exploring, experimenting. I don't see a scenario where this would be useful. It reminds me of exploded-view drawing but I don't see this being useful for textual content. Do you have an explicit use case? The example page, to me, looks very cluttered, overwhelming and IMO aesthetically unpleasing when reading on a mobile device.

tearflake 2y ago
Maybe a note keeping app?

runoisenze 2y ago

Nice work. I wonder how the experience would be in VR.

settsu 2y ago

This reminds me of the time a few years ago when mind mapping sites and apps exploded into popularity among the... "technorati" and sort of slightly seep into the wider online awareness but then seemingly, just as quickly, disappear into the background noise of the internet (I'm terminally online to a degree, especially when it comes to tech news—and have a pretty decent general awareness of pop culture trends—and can't recall having seen the topic referenced since the trend faded. But perhaps I'm just not in the right circles?)

fellowniusmonk 2y ago
People mistake a helpful "view" for a useful UI. None of these mind map, zoom first interfaces actually help with creating a global understanding. People take an occasionally helpful "view" for navigating items and then mistakenly believe it should be turned into an active interface for creation and editing. Graph/Mindmap views should only ever be a view and maybe a linking layer for nested text lists, actively operating in these interfaces is worse for global understanding and systems thinking. I suspect this is because mind maps don't actually map to how our brain stores information. Visual programming and even tools like KNIME work for stepwise workflow creation but they are not a good UI for new thinking, it's too much UI for novel idea generation and brainstorming, these interfaces are also useful for quickly understanding a DB structure. That's why they never take off and remain a niche tool for the small number of people who have brain structures that find them useful or are willing to bend themselves to an arbitrary interface.

lacoolj 2y ago

Seems to be a navigational flaw here - you can't get to any of the intermediate "sections" without manually going back one by one (other than "Home" to get to the absolute top) Otherwise, this is pretty cool and would be great for one-way traversing (maybe a quiz/test would do well here)

einpoklum 2y ago

I tried the example site. The way this notion is implemented right now, I don't see a benefit. One can barely see anything in the nodes other than the main one; nor can one distinguish them. TBH, even a tree of notes with titles, with collapse/expand controls, would probably have been more useful in emphasizing what FlakeUI offers. Verdict: thumb down. But - perhaps the example is only partial and perhaps this will develop into something more meaningful.

deleted 2y ago
[deleted]

chris_pie 2y ago

This is very similar to the idea of Zooming User Interfaces (ZUI) https://en.m.wikipedia.org/wiki/Zooming_user_interface https://en.m.wikipedia.org/wiki/Zooming_user_interface

waingake 2y ago

Have you seen / did you create this series on youtube? The final video lands on something very similar to this. https://youtube.com/playlist?list=PLsfH1Ahi4SzE-QmrsrtyZubGmi66iP45V&si=suUaku48tSxhuF__ https://youtube.com/playlist?list=PLsfH1Ahi4SzE-QmrsrtyZubGm...

jamesrom 2y ago

Kind of cool for a presentation deck. Sorely needs keyboard navigation support though.

humanfromearth9 2y ago

New feature request: support for nix flakes...

com2kid 2y ago

Super fun, but not being able to scroll text within an oval using the scroll wheel kinda sucks on desktop. The mobile UI is really slick though! I feel like this UI would be good for some sort of narrative game, where each oval is a room and things keep changing in each room.

monkeydust 2y ago

Liked this more than expected. Here's my possible use case. In a work setting I am constantly juggling between excel,PowerPoint,word and bunch of online wiki style tools When I have to craft something that requires information from these tools, like many, I end up creating a PowerPoint presentation. Gets the job done but never feels ideal given the one way directional nature of it, yes you can hyperlink but gets messy for audience. This style of navigation could help especially where you are layering the information across multiple themes (each theme say is a node). As audience you might go deep into one node quickly then zoom back out to understand how that node interacts with another.

thih9 2y ago

In practice surprisingly similar to switching between apps and tabs on modern ios + mobile Safari.

jeffhuys 2y ago

Makes me think of arguman[1] and kialo[2]. I discovered arguman maybe 10 years ago and have been thinking about it ever since. It's non-functional now but the source code is available. Maybe it's just my wishful thinking, but if we could map out every detail of an argument, maybe we could make progress faster, as a species. If this were incentivized well (like for instance polymarket), maybe with crypto rewards or something, this *could* take off. [1] https://github.com/arguman/arguman.org https://github.com/arguman/arguman.org - the website exists but is non-functional now [2] https://www.kialo.com https://www.kialo.com - feels like a dumbed-down version of arguman

bflesch 2y ago
interesting. I've been thinking about building something like this to provide a structured framework for social media discussions and argument chains.
keyserj 2y ago
I think if we could improve our ability to easily & precisely communicate arguments, that would be huge for humanity's ability to deal with problems. I'm building a tool[1] that I'm hoping can help with this, maybe be a successor (in some ways) to something like Kialo. It's critically missing suggestions/approvals[2], and perhaps a simpler interface[3], but I think that, for arguments about problems/solutions, the idea of grounding arguments within a cause/effect diagram is really powerful both for getting on the same page and for making concrete progress towards improving a situation (rather than arguing for argument's sake). I'd be happy to get your thoughts on it if you have any (I'll be making a HN post about it sometime soon^TM). [1] https://ameliorate.app/ https://ameliorate.app/ [2] https://github.com/amelioro/ameliorate/issues/11 https://github.com/amelioro/ameliorate/issues/11 [3] https://github.com/amelioro/ameliorate/discussions/541 https://github.com/amelioro/ameliorate/discussions/541
- jeffhuys 2y ago
  > I think if we could improve our ability to easily & precisely communicate arguments, that would be huge for humanity's ability to deal with problems. I've been thinking the same thing, and also started working on it in the past. Whenever I voiced this (like here) others came to me saying they also thought of it as at LEAST a part of "the solution". You seem to actually have something going here! I'll take a look at your three links, a first look at [1] gives me goosebumps, you have no idea how happy I am that I'm not the only one that still has this top-of-mind, especially nowadays, no matter what side you lean towards. I can't really find the words to convey my elation here, so you'll have to do with a simple "wow, thank you!".

dvngnt_ 2y ago

Maybe the arrow keys could have a different color if you can actually navigate in that direction.

ramesh31 2y ago

Shades of ZigZag

sebastianmestre 2y ago

Runs slow as hell on my phone. Around 10fps. My phone is not great but drawing some circles and some text should not take 100ms. On any device.

asunnydev 2y ago

[dead]