What is your UI/UX design and development pipeline?

News & General Discussion
1

Hi all -

Designing a good-looking and user-friendly UI seems to be combination of UX/UI-specific knowledge (which components go where for an intuitive experience), design knowledge (these corners need to be rounded because the rest of the design tends towards rounded looks - but it should be offset by square images here and there), and programming knowledge (hey, can you make this window bounce a little bit when it appears and throw in some particle effects while you’re at it?)

Rare, it seems, is a person who combines all three!

So, I’m curious - what is your experience with designing nice-looking UIs? How do you bridge the gap between programmers who lack artistic vision and designers who couldn’t handle a “Hello, World!” line? The two clearly need to be working together somehow but even talking to each other would only get them so far (for example, how do you explain to a programmer just how much something a window should bounce when opened or exactly how the color of particle effects should change over their lifetime?)

I’m guessing one way is to sit them down together and have the developer code while the artist gives immediate feedback and tweaks things in real time - but how would that work in a virtual team?

Do you find yourself hiring UI/UX specialists? If so, can they usually write code as well as design attractive solutions?

Looking forward to hearing from you.
George

2

Draw it on paper. Implement a rough version. If somebody instinctively presses a button or clicks where they expect a control to be, I move the control towards there to get the layout of each bit. I always try to keep controls in an obvious location. There’s no need to reinvent the wheel with that kind of stuff; what works, works.

As for talking to the programmer, maybe it’s better to get them to create a basic framework that lets you control effects like that, and provide you a tool to use so you as the designer can tweak those things yourself. Unity makes that stuff really easy.

But really, the key thing in UI design is user feedback- they’re the ones that will have to use your product’s interface and so they should be commanding a large portion of it. Be careful not to fall into both programmer’s “the button exists and is functional” and designer’s “It looks great but where’s what I need to press?” traps.

3 Likes
3

So… I am one of those you mentioned. My primary focus for many years is/was UX/UI, but I am also an engineer and artist/animator, so I can and do build everything end-to-end. On most teams I have worked on in the last decade or so, the teams were large enough that there multiple people in a discipline. For example at Disney, there were usually at least 3 and up to 5 folks in UI. Usually a lead, UX, UI designer, UI artist. (sometimes split and/or shared duties depending on the skill mix). On those, I usually focused on implementation, vfx and prototyping. (but would do other things and needed). I would be the guy that figured out how to execute specialized UI and how to do it as inexpensively as possible (resource wise). Engineering would do the actual wiring/functionality. Tech Art was the functional role I had there. Currently, my team is much smaller. I still do the same sort of thing though, just a bit wider. We have a killer UI/UX guy, who does design side of things. I handle some design, some art, all the vfx/animation and most of the structure and some of the engineering. But is a small team, about 8 folks total, where previously our team was 50.

Ultimately, you kind of have to structure things around your team’s skill sets and skill mixes. Any UI/UX designer worth a damn will know how to technically set things up, manage assets, and work within Unity’s UI. I would say that is an expectation. They should also be able to effectively communicate what they need done to the engineer(s), if they aren’t writing code. If an engineer is not visually oriented, they should be able to follow detailed instructions/examples.

Mainly the trick is find out where the skill break is, and over-communicate at that hand-off. Also, you can have the engineering side build things in way that passes back control to UI. For example, if you want some sort of animated transition, have the engineer set up everything, with placeholder animation. Then UI can just go in and adjust things. We have occasions where engineering is ahead of us on certain features, so we will provide a grey box layout, they can do all the wiring, and we then just go in and polish that. Or if we are ahead, we’ll build the whole thing out, and they will just do the wiring.

Again, things don’t have to be set in stone, it will depend on skill sets, and may vary from feature to feature depending on how much work each person has on their plate. A UI person may not be able to code (most do to some degree), but they should know their way around Unity expertly, and be able to build animators, particle systems, etc. And a coder may have no visual taste at all, but they should be to follow well written instructions/examples. On larger teams, you can have folks like Tech Artists who specifically bridge those gaps.

5 Likes
4

What’s a good open source or free example project for an options menu made with uGUI? I’m looking for something to learn from, but I expect most things on the assetstore to be garbage on the code side. And if I was qualified to really tell which examples to follow and which to avoid, then I wouldn’t be looking for something like this in the first place.

I know @TwiiK made this one:

But I haven’t looked at it yet.

And I’d also be interested in what you think is a good best practices example from UX side. I frequently trip over games having no conventions for certain things. Like, are subtitles under game or under audio? Why do some games divide between graphics and display settings? etc. etc.

Edit: I thought of another question: how does one make a sensible choice between the tradeoffs of going for a more classic menu approach or for making a scene of 3D objects that represent thematically related realworld objects. Like for example the inventory screen in “The Forest” has a nice “haptic” feel to it.
I feel like old retro games sometimes put more effort into providing some continuity accross the different screens and phases of a game. Jagged Alliance, Syndicate Wars, and Mechwarrior Mercenaries are games that I remember to have had pre-rendered “rooms” (to a degree) in which you did your menu interactions. Haven’t played those in a while though.
I see a lot of appeal in that approach, but also potentially huge problems when it comes to iterating on the design. Like when you want to add a button to something that is a complex hardsurface model that add’s crazy percentages on the time to put that in, compared to a standard menu of “glowing stuff floating in the air”. Is this a time-sink to better stay away from?

5

No idea about projects that are well done. Honestly every project I have been on handles the code differently. Best practices are going vary heavily depending on the type of project. Basically, consistent messaging and design language is a good thing. Its also good to build to what users are already used to.

I certainly prefer diegetic UI as much as possible, but again, it is going to depend on the game, and amount of time the user needs to spend with UI. For example a game that you spend most of your time running around in world, minimal is better, if spend a lot of time in the ui (mobile rts, multiplayer with short rounds, etc…) you want to jazz it up and make it more fun for the user.,

2 Likes
6

“Like for example the inventory screen in “The Forest” has a nice “haptic” feel to it.”

It looks nice… until you think about it… I’m being chased mutants… let me open up my inventory… ooh look I’ve setup it up all nicely on this blanket, where the fuck is my beating stick now.

Stuff like that is better for stationary inventory UI’s that can checked… not a movable players inventory. 7dtd used to have some nicer styled GUI’s for player inventory it was a toolbelt, … look alright and fitted into the theme. It’s gone abit backwards GUI and looks like some uninspired slop now.

"What’s a good open source or free example project for an options menu made with uGUI? "

I got a few useful code snippets and ideas at one point for doing my own pause menu from…Unity Asset Store - The Best Assets for Game Making

Wouldn’t bother with the audio approach that has… go with setting up unity’s audio master mixer, and sub group mixers and control those for the audio options.

“Like, are subtitles under game”
put it under audio. be different :slight_smile:
If the audio options has mute, or sound is off, subtitles are forced on by default… which is also an option… options options options…

“Is this a time-sink to better stay away from?”
If you are asking then probably yes, otherwise you’d just do it because you think it would work well and look good, I think probably better to get things working in a way that looks and functions well but didn’t take a huge amount of time to do and change if need be, good UI/UX is the least appreciated thing especially if there isn’t gameplay/content to bring people back to playing again and again.

2 Likes
7

As someone who both codes and has 20+ years in UI/UX dev I would simply give the artist a bunch of sliders, image slots, color pickers and gradients in the Inspector so they could tweak to their hearts content.