The Game UI Database, a comprehensive reference of game interface design

https://www.gameuidatabase.com/

by homarp • 6 years ago

609 101 6 years ago

gameuidatabase.com

asutekku• 6 years ago

In my opinion a bit better site covering the same topic: https://interfaceingame.com/

tenaciousDaniel• 6 years ago

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.

homarp• 6 years ago

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...

Neputys5• 6 years ago

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 :))

animal531• 6 years ago

Just recently I also found this one: https://videogameinterfaces.com/

It's a bit simpler, but I like its comparison based interface.

studius• 6 years ago

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.

nfin3• 6 years ago

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/...

pcen• 6 years ago

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/

swyx• 6 years ago

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

nfin3• 6 years ago

thanks!!!

gooses• 6 years ago

If you press 'Player Profiles' it takes you to the same page as 'Game Totals and Progress'

tinkrr• 6 years ago

Does this not violate copyright?

m12k• 6 years ago

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.

xgulfie• 6 years ago

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.

CodeArtisan• 6 years ago

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

zlsa• 6 years ago

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?

cma• 6 years ago

Should be covered by fair use as it is for education and couldn't be considered a substitute for the original.

codeulike2• 6 years ago

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"

dccoolgai• 6 years ago

Needs "Into the Breach".

xipho10• 6 years ago

We build scientific software (http://taxonworks.org/) where interfaces are notoriously bad. I feel the scientific community would benefit so much from a (sponsored?) program that paired game developers (or UI/UX specialists, or game psychologists) with teams building scientific software. For example we help describe species- while not quite the same thing, gamers do that everywhere, skinning, equiping, stat-min-maxing, etc., they are storing facts about entitites, and getting them served back to them, often in FPS time. Of course there are different considerations, but some of the ideas are identical, e.g. store, and retrieve lots of data, in as few clicks as possible.

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/

Neputys5• 6 years ago

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...

xipho10• 6 years ago

| 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.

petargyurov6• 6 years ago

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

Neputys5• 6 years ago

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.

klenwell• 6 years ago

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?

nexuist• 6 years ago

This is very pretty. Great job on the frontend.

andkenneth• 6 years ago

NZer here, interested to hear more about how you ended up doing that.

spondyl2• 6 years ago

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

Aeolun2• 6 years ago

That actually looks really cool! Are you planning to display the output in the UI as well?

OOPMan• 6 years ago

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 :-)

ThomPete• 6 years ago

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.

xipho10• 6 years ago

See comments/links above in this thread re our first community building event. All feedback is good feedback.

brianzelip• 6 years ago

Cheers to Pixo! As a UIUC alumn, it's great to see their work referenced on HN!

xipho10• 6 years ago

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.

areoform2• 6 years ago

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).

xipho10• 6 years ago

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 ;).

gfxgirl• 6 years ago

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

xipho10• 6 years ago

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.

chromanoid4• 6 years ago

I totally agree. Everybody who thinks game UIs are somehow good doesn't play games...

dzonga• 6 years ago

a lot of things would benefit UI wise if paired with game UI devs

chromanoid4• 6 years ago

I wonder how many games have dedicated UI developers. GUIs beside the game itself are often clunky, complicated and at best playful.

ampdepolymerase• 6 years ago

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.

andrei_says_• 6 years ago

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.

op03• 6 years ago

Textbooks could really use some of these elements - skill/tech/progress trees - area maps etc.

Minor49er2• 6 years ago

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.

Neputys5• 6 years ago

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.

Minor49er2• 6 years ago

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.

marapuru• 6 years ago

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.

DrSiemer• 6 years ago

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.

sh1mmer• 6 years ago

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

maxwelljoslyn• 6 years ago

You might be interested in the "operational logics and playable models" section on this page:

https://eis.ucsc.edu/analyses-and-approaches/

elefanten• 6 years ago

Probably not what youre looking for (because it’s a paid service and mobile games only) but gamerefinery.com has game feature datasets.

victor106• 6 years ago

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?

codeulike2• 6 years ago

The traditional ux pattern for 'enterprise' applications is "dont bother thinking about ux"

Hope that helps

phailhaus• 6 years ago

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.

aasasd• 6 years ago

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.

slmjkdbtl2• 6 years ago

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.

tomtheelder• 6 years ago

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.

slmjkdbtl2• 6 years ago

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.

mauricesvay• 6 years ago

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.

Der_Einzige• 6 years ago

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.

dexwell• 6 years ago

Thanks for recommending!

didip• 6 years ago

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.

drewgill• 6 years ago

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

Existenceblinks• 6 years ago

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.

will_pseudonym• 6 years ago

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

hohohmm• 6 years ago

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.

TheKarateKid• 6 years ago

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.

The Game UI Database, a comprehensive reference of game interface design

Related Stories