Ask HN: What are weird and/or novel ways to do web UIs?

[louismerlin]

Do you know any websites that have weird UIs ? Something like a ZUI [1] for example.

[1] https://en.wikipedia.org/wiki/Zooming_user_interface

[zxcvbn4038]

I once worked at Chase Manhattan Bank and one of their internal networking teams had a web site for wiring requests. They didn’t want to work too hard so their UI was designed to make data entry as slow as possible, mostly by using huge multi-level drop down lists where the slightest twitch would make them collapse and you would have to start over navigating through them, repeat a dozen times for every run of cable, several runs required to make an end to end connection. It wasn’t custom programming, just taking full advantage of the browsers of the era’s inability to render the UI component for that. So I was building out a data center and needed Something like forty thousand cables run which translated into around one hundred and fifty thousand segments. I tried to give this info via a spreadsheet but they were steadfast that the web interface was the only way they could receive it. So I wrote a script to just post the data directly without going through the UI, ran it, and went home. Turns out all their web form did was e-mail the values to a half dozen people. The e-mail system was Lotus Notes (dates this) so each person got their own copy and there was a lot of overhead. The sudden influx of a million e-mail messages brought down Chase’s email system for two thirds of the country. They spent days clearing the mail queue and recovering - they had to fly in IBM techs with suitcases full of disk drives to add the storage needed. Everyone who received the wiring requests spent days deleting them with new ones arriving as quickly as they deleted the old ones. Then when things were finally normal again they asked me to resend them my spreadsheet.

[osullivj]

Wonderful story - thanks! I was at Chase Manhattan in London from 1997-2000, and remember the Lotus Notes system well. I had Win NT and Solaris desktop systems. There was an appalling timesheet system called Agresso, the most counterintuitive Windows GUI I ever encountered. I guess the lesson is that mgmt diktat in corp envs repeatedly inflicts crappy solutions on captive users. Plus ca change!

[riazrizvi]

Heroic! Lotus Notes was such a pile of junk. Every time I used it for the simplest task, the combative UI would cause my blood pressure to spike up. I would calm myself down by imagining the blissful life of the ex JPMorganChase IT boss who greenlighted the purchase, living off his giant kickback on some Caribbean island.

[jedieaston]

>(dates this)

Unfortunately, it doesn't.

https://www.hcltechsw.com/wps/portal/products/products-home/...

[AlphaWeaver]

This would be a good story for r/MaliciousCompliance!

[AndrewStephens]

Whole books could be written on the terribleness of Lotus Notes. For those too young to remember the 90s, LN really was as bad as everyone says, turning what should be simple (email, maybe a few custom forms) into swampy morasses of pain.

When intranet webapps came along everyone breathed a huge sigh of relief.

[shanemhansen]

I had to do something similar once with FRRs (firewall rule requests) as a F50. There is one official way of requesting a FRR. What that way is a matter of some debate. Theoretically you file a JIRA ticket with fqdn, ip/mask, port, protocol info. Anyways cutting a long rant short I eventually had to write a script to generate 100 SRC X 10 DST X 2 ports rules as csv pulled into a spreadsheet.

After a couple days it was assigned to an engineer for implementation and of course the first thing he did was unflatten it.

[simonebrunozzi]

> Then when things were finally normal again they asked me to resend them my spreadsheet.

Amazing story, and I'm sure they've learned their lesson :)

[choiway]

Great story...thanks for sharing!

[slothtrop]

Damn funny

[xRahul]

That has got to be the worst system to not have any type of stop gate in the API.

[TekMol]

This website uses scatterplots instead of lists to display products:

https://www.productchart.com

So on Product Chart, you can for example say "Show me 300 smartphones and put the price on the x-axis and the size on the y-axis".

It's a bit like you would lay out things on a table and then organize them by some criteria.

[oftenwrong]

I'm glad to see this site making progress and gaining attention. I remember it used to be "GNOD":

https://news.ycombinator.com/item?id=7465980

Also similar, and by another HN user:

https://diskprices.com/

https://battprices.com/

[philipodonnell]

Is there a name for this kind of chart? It doesn't seem to be a scatterplot in the traditional sense because the axes aren't on a regular interval (If you look at adjacent phones the difference in prices aren't even).

Its more like a scatterplot with a grid overlay?

[porker]

OK this is awesome! Thanks for sharing, it fits my nerd-brain like a glove. Wish it would generalise to everything in life like my own spreadsheets (I say that as a compulsive data-collector)

[mirimir]

Wow, that is amazing !!!

But then, I love scatterplots.

[Fnoord]

So I checked the Smartphone section. Very limited amount of arguments. The visual representation is nice, but the Tweakers Pricewatch website [1] has a better search because it has better (more) arguments (they could however benefit from the scatterplot system).

[1] https://tweakers.net/pricewatch/

[justaguyhere]

Looks really nice! Wouldn't a simple table be a better option in this case though? I quickly got tired hovering over each icon (very small icons too) to look at the specs.

Looks very nice though.

[toddmorey]

An impressive implementation of a web UI is Figma:

Figma is written in C++ code then run in the browser by cross-compiling it to a subset of JavaScript known as asm.js. The asm.js subset is basically JavaScript where you can only use numbers (no strings, objects, etc.). This is all you need to run C++ code since everything in C++ is either a number or a pointer to a number, and pointers are also numbers. The C++ address space is just a giant JavaScript array of numbers and pointers are just indices into that array.

Of course wasm is more performant as it matures, but they’ve been at this since 2015 and I’m impressed by how responsive the app is.

https://www.figma.com/blog/webassembly-cut-figmas-load-time-...

[yakshaving_jgt]

I used to work at a company that behind the scenes had to use a web UI in a weird/novel way for their system to work.

This company's web UI would allow its users to initiate bank transactions. Nothing weird from the user's end. However, the company had to "approve" the transactions in real time, synchronously. The company could do all sorts of programmatic verification on the user, recipient, transaction, etc, but we had to actually physically press a button on the screen of a smart telephone to approve the transaction. There was no programmatic way around this.

Some programmers at the company came up with a robotic arm which could be controlled programmatically, which would do the telephone screen pressing for us.

I always thought that was pretty clever.

[namrog84]

Go spend 5 minutes here on pc desktop. http://cyberspaceandtime.com/Gaano9Y6KAU.video+related

I came across this site a few weeks ago. And it's quite unlike anything I've seen. And try to inspect the site using browser inspector. It's a very different ui than I've ever seen before.

[melvinroest]

This is a bit of an odd answer, even in a question that expects odd answers. That is because it sounds so normal, yet I have Googled for it and almost no one advocates for it. They do maybe advocate for it in terms of design, but I mean in making actual static websites.

Enter Google Slides: the product for your uncle Joe and aunt Lysa to create their own websites without knowing how to code!

I even have an example website for you that I made as it is a project that I'm working on in my free time. I already remade the website in actual HTML/CSS/JS but I was simply curious how well Google Slides would work. IMO, it has a thing or two over Sketch (such as displaying GIFs, having links) since I made the actual layout with Sketch, and then redid everything with Google Slides to do a side by side comparison (I went too far with this :P).

There are a few things to consider:

1. Every page needs to be made in its own slide show as you cannot have different document sizes.

2. You will be stuck with a slide viewer, but I figured for the industrious fellow, you could simply inject some JavaScript that disables that whole viewer when you iframe your Google Slides website.

3. There are zooming issues because the pages are of different document sizes.

4. The fact that you need to define document sizes is noteworthy in itself.

So yea, not super duper practical, unless you aren't a web designer and simply want a simple profile page online, but definitely weird :D

Example website / project that I'm working on (and recreated to the best of my abilities in Google Slides for fun): https://docs.google.com/presentation/d/e/2PACX-1vRxqg4SNv1Sl...

[ggerganov]

Not sure if this counts as weird or novel web UI, but I wrote a small library to stream Dear ImGui's vertex and index buffers to browsers via websockets, and just render them using WebGL's drawElements [0]. There a couple of examples linked in the README for anyone interested.

[0] https://github.com/ggerganov/imgui-ws

[thewway481]

it's just a proof of concept, but this web site discussed a few weeks ago absolutely blew my socks off:

discussion:

https://news.ycombinator.com/item?id=20929801

site:

https://3dforreddit.com/r/pics

From a comment:

"

How to use it Desktop: Click to start, WASD and mouse to move

Mobile: Dragging on left half of screen is move, right have is look

Append any subreddit to the url to switch subreddits

"

It should work in any browser but if you have a good GPU it will help a ton.

[ag8]

The rotating cube interface [1], where each of six parts of a form is on a different face of a cube.

[1] https://ux.stackexchange.com/questions/11229/is-this-rotatin...

[some1else]

It's like you're the only person who read the question.

[ssully]

I am losing my mind at this. I thought it would kind of interesting if it let me move the block around, but it has it's own rotation that you cannot control.

[rwmj]

This isn't a weird UI as such, but it's probably a technology that isn't explored enough. Back in the very early 2000s before Javascript was universally available, we wrote a CGI-based technology that worked by persisting the entire state of the page between clicks. It was a true widget-based server-side GUI, so you could build single page UIs by composing widgets such as buttons, labels, and more complex things, hierarchically (like native GUIs). The whole page would reload between clicks but everything was so lightweight and tiny that wasn't actually much of a problem, at least by the standards of the day.

It's all open source but probably doesn't compile on modern machines, and of course for extra fun we wrote the entire stack including the webserver, CGIs, cooperative threading, database layer and C libraries from scratch. From top to bottom this is the entire stack:

http://git.annexia.org/?p=monolith.git;a=summary

http://git.annexia.org/?p=rws.git;a=summary

http://git.annexia.org/?p=pthrlib.git;a=summary

http://git.annexia.org/?p=c2lib.git;a=summary

Edit: I should say that it's obsolete if you can make the nowadays reasonable assumption that Javascript can be used on the client side. It's more like "this is the crazy shit that a team of developers in their 20s with VC funding, disfunctional management and time on their hands get up to".

Edit 2: It was used in production for quite a long time, certainly until the 2010s. If you were in a UK school in the mid 2000s there's a chance you might have used this.

[regularfry]

Sounds a little bit like Seaside: https://github.com/SeasideSt/Seaside/blob/master/README.md

[zxcmx]

If I'm not mistaken this is pretty much how ASP.NET Web Forms work(ed). I think Java Server Faces (JSF) uses a server rendered component approach also. The giveaway being the need for a ViewState.

So for a long time this has been a widely used pattern! With today's dominance of (MVC || SPA) architectures I agree it's not as widely known as perhaps it should be.

[Doxin]

Last time I checked Gtk has a web backend, meaning you can run basically any gtk app with the right environment variables and it'll pop open a browser with the app rendered pixel perfect into it.

I don't really think it's useful as an actual web technology since you'd need to spawn a process, reserve a port, and keep a connection open for each and every user which seems like it wouldn't be workable.

It's a neat trick though.

[tiborsaas]

Check out http://hoverstat.es/

It's full of examples with unconventional design.

[tomglynch]

You might find some interesting examples by going through the websites here: http://brutalistwebsites.com

They definitely dont all have weird UI, but some do.

[dandare]

Inspired by zoomable interface https://uk.wikibudgets.org/w/united-kingdom-budget-2015

[brianpgordon]

I think briefly it was considered cutting edge to have your page content be delivered as an XML document, with an accompanying XSL or XSLT file to mechanically translate the XML into a full-fledged XHTML page suitable for rendering in a browser. I even saw it once on some public website, I think maybe for a Blizzard game? The content XML looked great; very intuitive. The XSLT stuff for translating into XHTML, well, not so much.

[yesbabyyes]

The Swedish election authority builds its website like this: https://val.se/

XSLT is quite different and really powerful. I helped a friend once, he wanted to import his iTunes Db to Qlik for analysis. iTunes keeps its data, with number of plays and all statistics, in an XML file. Qlik has XSLT support. So it was just a matter of a couple of lines of XSLT to get all the data into Qlik. It literally went from a complete headscratcher to done with half an hour of studying MDN's XSLT documentation and some experimentation.

[amoerie]

I helped maintain (and later started rewriting) a medical web platform that used XSLT for it's HTML exactly like you described. It was powerful for sure, but a nightmare to maintain, extend or add to.

This in house framework was written before the advent of major web frameworks (at least in C# at the time) so I can understand where it came from. In fact, I still consider it an impressive feat of engineering. But XSLT to this day makes me shudder..

[sesutton]

I'm fairly certain it was World of Warcraft. Also my AT&T router's UI does this, which probably explains why it's so slow.

[superkuh]

For the comment system on my website I wrote a perl script that tails the nginx logs for all instances of /@say/ in the file path of requests. Anything after a /@say/ is considered comment. So the UI for commenting on my website is like,

http://mywebsite.com/somepage.html/@say/Hey, neat somepage content, guy.

Some nginx redirects also included to take users to the comments page after submitting.

[Bilters]

I would say the website which shows you and tells you what you're doing in the browser; https://clickclickclick.click/

[Ruphin]

I worked on a project before that explores using non-traditional UI on the web:

https://overwebs.ruph.in (warning - sound and high bandwidth)

It emulates a game UI, and uses background video to simulate physical movement when navigating between pages. It also incorporates some controls that are unusual for normal web applications like keyboard controls (shortcuts like 'Esc' to go back, 'Enter' to open chat).

It's a pretty old and very experimental project so some stuff is in a semi-broken state. I should revisit it sometime and clean up.

[hazzamanic]

I really enjoyed navigating around this, good job!

[justusthane]

https://www.kickscondor.com is really bizarre.

Animated backgrounds, infinite scrolling, elements that are only partially visible until you mouseover them, and uses zooming interface for opening individual posts.

Feels like a bastard child of GeoCities and modern web.

[tontonius]

I like http://zombo.com/

You can do anything at zombocom

[iLemming]

Flash, really?