The Game UI Database, a comprehensive reference of game interface design(gameuidatabase.com)
gameuidatabase.com
The Game UI Database, a comprehensive reference of game interface design
https://www.gameuidatabase.com/
103 comments
> scientific software ... where interfaces are notoriously bad.
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.
[0] https://streamable.com/0ji1ii
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.
[0] https://streamable.com/0ji1ii
You realise it's possible to write a decent UI in Qt that isn't a dumpster fire from the codebase perspective right?
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 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 :-)
My personal experiences differs.
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.
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.
> I'm building the UI using ElectronJS and Svelte, whilst the backend is a separate Python project.
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?
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?
I think I came across that as well. I didn't like it.
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
[0] https://click.palletsprojects.com/en/7.x/
[1] https://www.npmjs.com/package/python-shell
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
[0] https://click.palletsprojects.com/en/7.x/
[1] https://www.npmjs.com/package/python-shell
Why not use something like gRPC or cap’n’proto to make the request/response stuff easier to manage?
Because it still requires request and response. The way you are doing request/response, or encoding the data is immaterial.
Some time ago I helped build a software that heavily used some python GIS libraries (GDAL, rasterio, etc) and we needed a UI for some windows users. We chose cefpython[1] to the job, as we could interface easily between the python and JS parts. The development experience is not so polished as of Electron though.
Nonetheless, is a great project and not so difficult to use, although not perfect, it worked perfectly for our needs.
[1] https://github.com/cztomczak/cefpython
Nonetheless, is a great project and not so difficult to use, although not perfect, it worked perfectly for our needs.
[1] https://github.com/cztomczak/cefpython
As far as quickly standing up an effective gui for python, I'd recommend gooey.
https://github.com/chriskiehl/Gooey
https://github.com/chriskiehl/Gooey
NZer here, interested to hear more about how you ended up doing that.
Pasting my answer from a similiar comment above:
> 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)
> 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)
This is very pretty. Great job on the frontend.
That actually looks really cool! Are you planning to display the output in the UI as well?
Thanks! Yes, I am. The intention is for the user to also be able to correct the output of the model.
After that I want to give the user an easy interface for training their own models (transfer learning using an existing base model).
After that I want to give the user an easy interface for training their own models (transfer learning using an existing base model).
How is Electron doing btw? I'm itching to use it in one project but it doesn't feel like it's getting any traction in the community for a long time now. Since it's a long term project I kind of get mixed feelings about using it.
This is my first project with it so I'm probably not in a position to provide much insight. So far development with it has been almost identical to coding a website, but maybe because I am yet to start on any OS dependant features.
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.
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.
On top of that, I already have a browser installed and each Electron app is a step for turning the Web into ChromeOS.
Is there any benefit to using electron vs a website with the same code? Especially if you want it to be free and accessible to everyone
I have built a couple Electron apps, one of which will be available as a commercial product soon.
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
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
You can even have multiple application windows! But VS Code is the only one I can think of that bothers.
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!
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!
That's just bad usability on Slack's part, not a technical limitation of the tech. Also, afaik Slack is/has moving away from Electron.
Agreed on the bad usability, but that's par for the course with most Electron apps. You get the laziest possible "stuffed a webpage in a window" UI. And maybe it's even a nice UI in some ways, but it's usually pretty clear that it's not native software.
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.
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.
Wait, you can execute say c++ using electron?
Spotify is an Electron app that's doing well. Also my own company's experiences with it have been good.
Spotify isn't an Electron app. It predates Electron and uses CEF ( https://bitbucket.org/chromiumembedded/cef , https://en.wikipedia.org/wiki/Chromium_Embedded_Framework ), like Steam.
I should have said Slack.
As a curious New Zealander, how does one volunteer with a government department? I had always assumed it would have to be strictly a contractor type relationship
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.
Ah, interesting! I had just assumed that most departments wouldn't have a process for handling this kind of stuff or that it would be considered more costly in terms of getting a signed agreement, coordinating etc etc
Games just as often as not have terrible UIs. Take Destiny 2 for example. It's a nightmare of right click (no indication that you'd want to right click). And in particular games are flash for flash sake. I love it for games but I wouldn't want my app I'm trying to be productive with to animate every tiny motion or throw out sparks when I click a button.
Further, much of the database is joypad controlled UIs
Further, much of the database is joypad controlled UIs
Right. But there are many games, many experiments to draw from.
|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.
|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.
I disagree. Designing ergonomic interfaces is too often too far from designing playful interfaces that support the gameplay. Game designers != UX designers. UX designers already are the "game designers" of applications. And unfortunately they are not that often part of game development teams.
I’ve worked with dozens of “UX designers” and they are almost always just graphic designers who realized that they can make more money calling themselves UX designers.
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.
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.
This is my experience too. True insights take hard work and time to gain.
I'm pretty sure (well certain) it's possible to do. We built a demo VR project to explore insect anatomy. It didn't get very far, was ultra crude, and we had no clue what to consider in the UI/UX of VR.
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
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
Sorry for the late reply, I lost track of my comment. Serious VR applications are around for quite some time now. There is a pretty huge research body on VR, usability in VR etc. Recent consumer VR makes it certainly more accessible but the already existing body of VR research is still applicable. IMO it's simply not a new frontier that game designers are necessarily the best experts in. Especially when you consider under which constraints games are developed.
I totally agree. Everybody who thinks game UIs are somehow good doesn't play games...
As long as you exclude UI/UX from "getting things done" it's going to be notoriously bad. Academia, government, enterprise all the same. There's no accountability to actual users and doing UX properly would turn the whole project on it's head so guess why no one cares...
| There's no accountability to actual users and doing UX properly would turn the whole project on it's head so guess why no one cares...
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.
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.
In that sense, personally, everyone cares. But when people have to operate in big org environments priorities change. Think about it, no one wakes up in the morning and thinks I'm going to make something terrifyingly hard to use today. No one invests or gives grants for something that "is going to be terrifyingly hard to use", right? And yet dominating majority of big org software is terrifyingly hard to use. The answer to why? I think is the point you are missing. Your suggestion is commendable, interesting but no number of references or examples are going to help make your next project better as well as that why.
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.
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.
I'm admit I'm not totally clear as to your point. If it is that software is terrible because it's not accountable to its users then yes, I agree, this is often one of the reasons why.
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.
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.
I am somewhat familiar with both, UI/UX and keep relatively apace with a few fields of research. Currently, I'm working to become good at front-end development.
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).
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).
We just wrapped up our very first community building event. https://github.com/SpeciesFileGroup/taxonworks_together_2020. You can track us down from there if you're interested. All our software is open source, and we have a ton of open issues ;).
Thanks! Will do.
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.
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.
That's a good point re PRs.
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.
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.
The issue is that it is hard to make money in scientific software, especially for life sciences. You usually get a bimodal distribution: really big, entrenched, and massive software firms and the rest have <100 headcount. There is no middle ground.
At First Principle we have tried to offer our design help for free for the scientific research community because we want to support the community. Whether robotics, ai or medical.
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.
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.
See comments/links above in this thread re our first community building event. All feedback is good feedback.
I think this is a great idea. Imagine the amount of time and unnecessary confusion this could save.
Game UX and UI are often incredibly good, including seamless gradual on boarding.
Game UX and UI are often incredibly good, including seamless gradual on boarding.
Cheers to Pixo! As a UIUC alumn, it's great to see their work referenced on HN!
It was great to work with Pixo. They developed the logo, and homepage, and we ran an experiment together where they built out an interface against our APIs. I learned alot about all aspects of software development from the process, and they learned a little about our science. Would recommend.
a lot of things would benefit UI wise if paired with game UI devs
I wonder how many games have dedicated UI developers. GUIs beside the game itself are often clunky, complicated and at best playful.
The amount of games and screens is impressive, but for a site calling itself a database, it should take things further. Mainly, there ought to be a lot more textual content.
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.
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.
I'm a UI designer for almost a second decade now. In short textual content is the last thing I need from a site like this. Forgive me but that is just a load of pointless academic pedantry.
I disagree. I've been a UI / UX designer for various pieces of software and the thing I miss in all the collected screenshots online _is_ text. It makes things more easily searchable and comparable. For example, is a health bar vertically or horizontally positioned? Top right or top left? What's the used color?
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.
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.
[deleted]
So form over content then?
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 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.
Textual content would be used to facilitate searching and to compare the UIs of different game interfaces. For instance, right now, I can't tell what the most common language is for UI buttons in RPGs or see what options are typically available for classic first person shooters without typing it up manually from the screenshots. This would be helpful for non-UI designers who want to make games.
In my opinion a bit better site covering the same topic: https://interfaceingame.com/
Thanks for the pointer.
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 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...
Wow that's a serious amount of effort someone put in to collect all of that. That's really cool.
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.
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.
Thank you too. Both really nice sites. At first Interfaceingame feels way better designed but after a while it becomes over designed somehow. Personally, I would choose Interfaceingame visual style and gameuidb nav and naming conventions. (edit: visual style as in clean not dark :))
Just recently I also found this one:
https://videogameinterfaces.com/
It's a bit simpler, but I like its comparison based interface.
It's a bit simpler, but I like its comparison based interface.
Awesomely put together with great menu!
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/...
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/...
There are a few still not behind a subscription model, UI pattern libraries is what you're looking for. Here are some examples:
https://pttrns.com/ http://uigarage.net/ http://ui-patterns.com/
https://pttrns.com/ http://uigarage.net/ http://ui-patterns.com/
good list - added these all to my growing list here: https://github.com/sw-yx/spark-joy/blob/master/README.md#int... hope that helps
nice list!!
thanks!!!
Though useful, this website appears to exclude mobile games entirely. The amount of screen space on big screens makes it a lot easier to design UI for. The true magic of UI design mostly happens in mobile games where devs cram an incredible amount of stuff into limited space while trying to maintain sanity. A big loss, without mobile games.
Does this exist but applied to industrial/aerospace/military interface design? The extreme example that always comes to mind for me is the Apollo Command Module [0], but all different kinds of more complicated/advanced interfaces exist, and I think that a joint learning effort between designers of those types of applications, and traditional software design, could yield amazing improvements for both sides, and every user of both types of systems.
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/...
[1] https://news.ycombinator.com/item?id=25316420
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/...
[1] https://news.ycombinator.com/item?id=25316420
Reminds me of one of my favorite youtubers, Design Doc: https://www.youtube.com/user/Warbot40
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.
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.
Thanks for recommending!
I’d love to see something like this for game mechanics, although that might be harder to achieve.
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
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
You might be interested in the "operational logics and playable models" section on this page:
https://eis.ucsc.edu/analyses-and-approaches/
https://eis.ucsc.edu/analyses-and-approaches/
Probably not what youre looking for (because it’s a paid service and mobile games only) but gamerefinery.com has game feature datasets.
I'd love to see this with virtual reality games included, that's a field where UI really matters but it's definitely harder to design it to be both intuitive and stylized
Great resource. It would be great to have the animations also. How games transitions from one screen to another, or how the UI elements are animated is what makes game UI so cool.
I wish enterprise software users/orgs liberated themselves from formal look and feel of GUI. Usual game softwares serve massive of users, and they are working great.
Games have some of the best UI designs I've ever seen, period. Not only are they beautiful and readable, but they give emotion and life to software. Apple used to do this with their skeuomorphics and animations, but it slowly disappeared almost entirely by now.
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.
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.
We are in the process of redesigning an enterprise application that is very information dense.
Anyone know if any good resources that could help with any patterns on ui/ux for information dense screens/apps?
Anyone know if any good resources that could help with any patterns on ui/ux for information dense screens/apps?
Not quite patterns, but I think writings of Jakob Nielsen and his company Nielsen Norman Group may be considered as applying to ‘dense’ interfaces by modern standards—as he's mostly known for his work from the 90s and 2000s. Their priority for the past twenty years is web, but not just casual-user sites, and IMO the principles are universal. Also he and the company have an ongoing series of criticism specialized on corporate intranets. BTW, a persistent theme is that interfaces should be tested on users soon and often—even if just with a few users and a cheap methodology, that's better than no testing.
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.
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.
I would recommend Edward Tufte's books on data visualization, which are themselves fantastic examples of how to visually arrange information to maximize understanding. "The Visual Display of Quantitative Information" is a great place to start.
The traditional ux pattern for 'enterprise' applications is "dont bother thinking about ux"
Hope that helps
Hope that helps
One sub category that needs a lot of attention is missing from the side bar:
Controller HUD on mobile games. Often times the software joystick requires thumbs gymnastic, a major improvement is needed here.
Controller HUD on mobile games. Often times the software joystick requires thumbs gymnastic, a major improvement is needed here.
Is there a trend of video game UI going flat? I've seen some Switch games that's ditching their stylistic UI and going for generic flat UIs, e.g. Pokemon Sword/Shield, and this makes me very sad, I hope they're just bad art direction. For app UI it's reasonable to go flat to maximize content readability, but for video games, where the goal is "fun", UI should also be fun, or at lease visually consistent with the game aesthetics, or even be a part of the game itself.
I'd say "sort of." I see flat UI designs in games in essentially two places.
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.
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.
Yeah it's definitely eye of the beholder. A congruent example I can think of is a lot of immersive 3D games going more minimal on the UI, using plain text overlay and no visible style, e.g. Ghost of Tsushima, where I think the UI style helped the goal of "immersive". I can see Pokemon S/S is going for a more realistic or immersive 3D world and can benefit from a more minimal UI, but to me visually it turns out to resemble too much to the typical "flat design", and my personal visual taste is stopping me from understanding what it achieved on the game design level.
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.
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.
If you press 'Player Profiles' it takes you to the same page as 'Game Totals and Progress'
Textbooks could really use some of these elements - skill/tech/progress trees - area maps etc.
Needs "Into the Breach".
Does this not violate copyright?
IANAL but it's probably covered by fair use. Otherwise "Let's Play Videos" on YouTube would not be possible(and they actually show all the content in the game, while this shows single screenshots). Same goes for games review sites, Metacritic, game wikis etc that all have screenshots. It's definitely not in the interest of a game publisher to disallow the internet to show off their game, but they probably can't legally stop it either way.
Let's Play videos only exist because publishers allow them to. They aren't fair use. They could drop the DMCA hammer tomorrow but they don't because it makes them money.
Edit: obviously I'm not supporting this but this is the legal reality.
Edit: obviously I'm not supporting this but this is the legal reality.
There are differing opinions on this from what I've heard. If the let's play video competes with the experience of playing the game then it seems like it would be as you say, but for many cases that would probably not be true. This is still not decided in court though and just because someone can DMCA someone else does not mean they are in the right legally. It would also be different in different countries, the free use doctrine and DMCA are a American concepts.
Virtual youtubers had numerous copyright infringement disputes with Japanese game studios for playing video games on stream.
Hololive[1], the biggest vtubers agency, had to settle agreements (and pay money) with Nintendo, Konami, and capcom.
[1] https://en.wikipedia.org/wiki/Hololive_Production
[1] https://en.wikipedia.org/wiki/Hololive_Production
IANAL, but I would expect that this could squeak by as Fair Use, considering the website is intended as a commentary on the various UI designs. If it's ever an issue, the fair use rationale could probably be improved by adding some descriptive text to each screenshot. In either case, the damages to the game publishers is minimal: what prospective game purchasers would see this UI database and choose to not buy the game?
Should be covered by fair use as it is for education and couldn't be considered a substitute for the original.
This is a good question and the first question I had in my head when I saw the site, especially as there is no info at the bottom of the screen other than "(c) Edd Coates 2020"
if you search, it fails to find anything, then click in the lower part of the window, you can't scroll up/down any longer.
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/