The Game UI Database, a comprehensive reference of game interface design
gameuidatabase.com
gameuidatabase.com
As scientists very rarely do we have the time or opportunity to think deeply about the UI/UX experience, we have to get things done, with minimal resources, for example over the course of funding for a 2 year grant. This project was a bit of an exception, and a lot of fun to be in: https://bioip.github.io/
I think the problem here is two fold: bad UIs and bad APIs. In the science world, there doesn't seem to be any abstraction between backend and frotnend -- the whole thing is one intertwined mess.
Scientists don't always write great software; they write scripts that get the job done quickly in a very specific way. Pair that with the lack of time that they have to wrap things in a GUI and you get a Tkinter/Qt app that is unmaintanable.
I'm currently volunteering with the NZ Department of Conservation. Here is a tiny preview [0] of an app that I have just started making for them. It's purpose is to aid scientists with processing camera trap images using machine learning. I'm building the UI using ElectronJS and Svelte, whilst the backend is a separate Python project.
I know the fad these days is to turn everything into a web app but my experience working with Qt really just demonstrated to me that a lot of web UI development is reinventing wheels from desktop UI but poorly and with more bugs and frustration.
That's just my perspective though :-)
I recently spent a year working on a Qt app for drawing circuit diagrams, aimed at nuclear engineers. I've lost count of the number of times I found myself wishing for some feature that React has implemented for years.
The parts of the code that were easiest to maintain were the ones that reinvented reactive UI: every modification to the underlying data called some "updateGraphicsView" function that would then re-render the entire thing. Not great for performance, great for avoiding bugs.
Seriously, for me Qt goes in the "never again" category.
Thanks for sharing this. I have a relatively simple Python script that I'm trying to package for a non-technical Windows user so, as someone whose experience skews toward web development, your comment caught my attention.
I just googled "electron svelte python" and found this write up:
https://medium.com/@abulka/electron-python-4e8c807bfa5e
Which references this Github repo:
https://github.com/fyears/electron-python-example
It all sounds pretty brittle. How are you managing communication between your ElectronJS frontend and Python backend? Any references you recommend?
As far as I understand, there are two ways to handle communication between the Python and ElectronJS:
1) Use inter-process communication. Basically, your Python app outputs to stdin and your Electron app consumes the output. Also works the other way. This is what I went with.
2) Use a Flask (or equivalent) local web server and have your app send requests to it.
I find method 2) a bit hacky and unintuitive for a desktop app. If you are planning on hosting your backend in the cloud this would be a decent solution, but I am not.
I had already done some work to turn my Python app into a standalone CLI tool using `click` [0] which made the interaction with ElectronJS very simple. I used `python-shell` [1] for the inter-process communication. I do think that I might not need this once I package my Python app into an .exe -- then Electron should be able to interact with it in some way without caring that it's built in Python.
You can take a look at my repo here, though it's still in its infancy: https://github.com/petargyurov/megadetector-gui
Nonetheless, is a great project and not so difficult to use, although not perfect, it worked perfectly for our needs.
> I sent an email to a specific conservation project, asking if they happen to need any software help at the moment and they did. We got chatting, agreed on some goals and I got working. I signed their volunteer agreement form which sets out some conditions (nothing unsurprising). That's it really.
For what it's worth I am not even based in NZ; I'm in the UK. Happy to chat in more detail if you want to know more (my email is in my profile)
After that I want to give the user an easy interface for training their own models (transfer learning using an existing base model).
What makes you say that it isn't getting traction? AFAIK, some huge companies are using it to create their apps.
I think it gets a lot of underserved hate, just because it's JS and because it isn't "truly native". People also love to chime in about its performance but 9/10 times that's down to a bad implementation, in my humble opinion.
The main advantages (over executing your app in-browser) to my knowledge:
1. You can execute native code outside normal browser sandbox
2. You get your own application window
God forbid you want to be in two Slack orgs at the same time, perhaps on different virtual desktops. Off to the browser version with you!
Re: moving away from Electron, not as far as I know. They had a major update a year or so ago to make some big efficiency gains by not running a separate Electron instance for each organization, but the new version is still in Electron: https://slack.engineering/rebuilding-slack-on-the-desktop/
One can hope that they'll take the iPad version and make some improvements to let ARM Mac users get that instead, but currently they've chosen to disable downloading it from the Mac App Store.
Further, much of the database is joypad controlled UIs
|Further, much of the database is joypad controlled UIs
Scientific software requires exploring data, one could imagine many interfaces where joypads, VRs controllers, etc. could be useful and more intuitive ways to do this exploration.
Most of them don’t do much user testing, and the ones that do seem to use user testing just to provide support for their preexisting ideas.
Real UX experts, and real rigorous UX design methods exist because I’ve taken classes in grad school that teach them. But it’s basically impossible to find people who know how to do that in the sea of graphic designers calling themselves UX experts.
It melted our fellow scientist's minds, without exception they were floored by the potential, and this a complete hack. https://github.com/bioip/vronto
I don't think we're saying they don't care.
It's a balance, right? I've been around long enought to see the UI/UX world emerge and become more defined, but some of that world is common sense that comes with experience. In my experience some UI/UX is hot-air, and in fact gets in the way of getting things done, but other bits/and insights are super useful. What I'm suggesting is to tease out specifics with reference to systems that others are familiar with- games.
As far as UI/UX world goes it has a problem of becoming fashionable, popular and somewhat profitable. This always attracts certain kinds of people and hot air. I'm sure you have plenty of your own examples in academia.
In our case our group is funded primarily by an endowement. We use (dogfood) our own software, therefor we are accountable to ourselves. We are also developing it for our friends, collaborators, and other scientists who have traditionally not had access to the types of tools we work on, we are accountable to them. The bits that exist are because our users need them, have co-designed them, and have given us a ton of feedback as to how to iteratively improve them. We don't have to sell ($) them a product (yes, we understand there are long term issues with growth, support, and sustainability that will take hard work to deal with).
We're fortunate enough to have time to think and engage with concepts that startups that must have to sell products must master, thus we can "dream" about what game interfaces might bring to the table.
This is an area I'd like to work on, if you have a project that could use someone like me please hit me up here (a comment with your email) or via twitter (@_areoform).
BTW, I'm fairly certain that the "github submit a pull request" model doesn't work for UI/UX. Consistency and tone matters, as does integrating feedback and cycling it. The idea of hitting issues piecemeal without some kind of overarching strategy feels like a recipe for failure.
Unless you have unified brand guidelines, a UI component library etc, such an effort seems like an exercise in futility.
One possible way of interacting would be to explore the API, and develop a proof of concept UI element with a bit of functionality, that plays off it. Perhaps in a context like this: https://github.com/jlpereira/tw_api_test.
We do have use various semantics throughout the project, randomly documented. Contributions to how best to organize and get beyond this are also welcome, along the lines of this issue: https://github.com/SpeciesFileGroup/taxonworks/issues/85.
Most of the time there isn't really an interest from the people involved because they just want to do the research and not add the work of getting a proper interface working ontop of what they already have to deal with.
The offer still stands though.
Game UX and UI are often incredibly good, including seamless gradual on boarding.
For example, rather than just a screenshot of the options menu for a given game, there should be tables listing all of the options and their possible settings. Rather than just an in-game screenshot, each UI element should be called out and detailed. For example, point out a health meter and explain what happens when the meter is filled, when it's low, etc. Same with the menus. What are the elements and what do they do? And so on.
There are also links to general gameplay footage for any given game, but various UI elements should have their timestamps called out, or even get their own videos entirely.
I really like how easy it is to navigate the site. Everything is tagged well. There's a lot of potential here.
All these things could show me the obvious choice when designing a health bar in a specific type of game or interface.
No website with screenshot (or otherwise UI based visuals) in collections has this searchable content.
So for me, as a UI designer, I would definitely benefit from more textual information.
I love the design of the site, but the first game I checked is Assasins Creed Black Flag, because I know that game has a very clever UI solution present in at least the early games in the series.
There is nothing in this site about that feature and you cannot explain it with a simple tag. The name "Game UI datase" suggests a bit more than mere tags.
For the interested, the UI solution I was referring to is how the functions of the buttons on the right side of a common joypad are communicated to the player. When one of the buttons is pressed, a short description of all their functions will appear in the top right, layed out in the exact position they have on the actual joypad. Press a modifier key that changes the functionalities of these buttons and their descriptions will change while the modifier key is pressed.
This ensures that you will never forget what all the buttons do, which is a common problem for me as I don't have a lot of time to play and can sometimes leave a game for months before picking it up again.
The website only shows the "empty/unpressed" state of this element of the HUD, skipping one of of it's most innovative features.
I feel they kind of complement each other:
https://www.gameuidatabase.com/gameData.php?id=127 and https://interfaceingame.com/games/my-friend-pedro/
or https://www.gameuidatabase.com/gameData.php?id=35 vs https://interfaceingame.com/games/the-legend-of-zelda-breath...
I'd love to see the same thing but delving into actual UI systems. So we have the 7 languages in 7 weeks, and 7 databases in 7 weeks. I'd like to see 7 UIs in 7 weeks.
It's a bit simpler, but I like its comparison based interface.
Does something similar exist for AppUIs?
Maybe dribbble.com, but
1) I think that dribbble it is mostly about imaginary designs (cool actually, but I don't get to see the best UIs that do actually worked / went in to "production")
2) the menu in dribbble lets you choose mobile/print/... instead of TitleScreen/LoadSave/SettingsMenu/...
https://pttrns.com/ http://uigarage.net/ http://ui-patterns.com/
xipho described a similar idea between video game designers/developers, and the scientific community here in this thread. [1]
[0] https://www.si.edu/sites/default/files/newsdesk/fact_sheets/...
DesignDoc focuses heavily on UI/UX in video games and is one of, if not my favorite youtuber. I bet he would love this website and maybe one day will mention it.
For example being able to find games that have certain movement mechanics and compare them would be amazing. Like “jump”, “double jump”, “sliding”, “ice surfaces”, etc
When GM announced that they were going to use Epic's Unreal Engine I was so excited because it seems that someone finally gets it.
Anyone know if any good resources that could help with any patterns on ui/ux for information dense screens/apps?
This is the main collection of articles: https://www.nngroup.com/articles/
And there's a tag for ‘design patterns’: https://www.nngroup.com/topic/design-patterns/
I've been meaning to re-read Nielsen's classic ‘Designing Web Usability: The Practice of Simplicity’, which I have in print from mid-2000s, translated. It's likely to be a rather intense return to the past, considering how both the design space and my understanding changed over the years.
Hope that helps
Controller HUD on mobile games. Often times the software joystick requires thumbs gymnastic, a major improvement is needed here.
The first is games where it seems stylistically appropriate within the aesthetic of the game. I'd argue Pokemon falls into this category somewhat, but that's definitely eye of the beholder. The flat UIs feel congruent enough with the world to me.
The second place you'll see flatter UIs sometimes is in the sort of "hub" UIs that many multiplayer games. They usually have a lot of functionality, are very much "out of game," and are incidentally normally built on web tech.
But for regular, in-game UIs? Not really IMO, not like it has been for apps.
And I agree there're places like "hub" where it's more disconnected to the game world, and you can say it's less important for those to use a very consistent style. I would argue these places should also be fun and game-like (or, the UI interaction feedback should match with some of the in-game feedbacks), but that's more experimental and a different subject.
Edit: obviously I'm not supporting this but this is the legal reality.