#it’s hard to explain but i do this specific ask game based on intuition low-key~ felt like you’d get some comfort from these :> | Explore Tumblr Posts and Blogs

irrevocably-delicious · 5 years

Text

Cultivating an enjoyable video games experience with non gamers aka How do I get my non-gamer significant other to play games with me?

Video games.

Once a niche hobby of adult programmers in the 70s, before targeting 10 year old boys in the 80s and 90s, video games are now a mainstream hobby and entertainment product that has shown tremendous growth in the past 30 years. While films and serialized shows have shown some developments, with new technologies and the invent of streaming, the gaming industry has undergone a complete transformation in only a few short decades. Entire genres have been created, along with improved graphics, mechanics, and storytelling.

But with more people getting into video games now more than ever, the age-old question continuously resurfaces:

“How do I get my significant other to play video games with me?”

And it’s an understandable question! Games are an important hobby to some, and it’s nice to be able to share in that passion and joy with the person you love most. I completely understand this. I’m a cosplayer and I’ve definitely conned my boyfriend into pressing seams for me or sitting in hour long panels about EVA foam. It’s not exactly his number 1 priority, but we have fun together doing it, and he’s able to appreciate my craft a little more because of it.

Similarly, he’s not an artist, but he always helps me table in Artist Alley, gives advice on new prints to make (“If you’re going to make a niche DnD print, at least display it near the DnD stuff to be a conversation starter”) and stays up til 2am cutting stickers with me. It’s exhausting, but we have a lot of good memories from doing it together.

It’s nice to include your significant others in activities that bring you joy.

So how the hell do you convince your partner to engage with video games… if they never have before? And what kinds of games are going to give you the best experience?

Hi. Welcome. This is where I come in.

I’m not a gamer. At all. I’m awful at video games. Whilst my boyfriend was growing up and devouring every console he could convince his parents to buy, I was being a horse girl. No Halo for me today, sir, I have a showjumping class to attend. The only video game I would willingly participate in was Singstar during sleep overs, and that was because I was a musical theatre kid and knew this would be the only video game that I could completely decimate my peers with. Street fighter? No thank you. But I will wreck your shit with Stacy’s Mom by Fountains of Wayne.

But somehow, even though this is my upbringing, I have to acknowledge the fact that over the past 10 years I’ve actually played… a lot of video games. I think I’ve figured out the key. I think I’ve distilled the answer. Now obviously this is purely based on my experience, and everyone will have slightly different results, but I will now present you with my scientific anthropological findings of how you may be able to repeat this process.

“How do I get my significant other to play video games with me?”

Now I think there are two ways to go about this.

1. Play a video game together where both of you are holding a controller and in charge of some aspect of the game. Ie. Character, assistant, the right foot, etc.

Now I realize this seems obvious.

“You mean I can play a video game with my significant other by actually playing a game with my significant other??? Uhhhh yeah…. I WOULD THINK SO”

But hear me out. Out of the two ways you can go about this, I actually think this is the hardest way (I’ll explain why soon). My partner and I do not often play games together like this. What we usually do, and what I would be more likely to recommend is:

2. Play a game where you (the gamer) have the controller, and your SO participates or watches from the couch.

This is what my boyfriend and I usually do, and it’s the less likely of the two options to cause arguments, fights, and tears.

But let’s first look at option 1.

Playing a game together

Do you remember when you were in high school and you had to do a film study for a semester? And your teacher would explain all the different camera shots and angles and what they meant? A low angle shot where a character towers above makes them seem intimidating. A character cloaked in shadow indicates that the character is sneaky.

Your teacher told you all this, but in reality, all of these meanings were probably pretty obvious to you. You intuitively knew what they meant because you had been raised on watching movies. You were already familiar with this language of film because it had always been present in your life.

Well guess what? Video games have a language too.

And just like film, if you have played video games your whole life, you might be surprised at just how much of this language you have absorbed, and how much of this literacy is REQUIRED to play a modern video game.

The fact that triangle is always jump, x to interact, L2 to aim, R2 to shoot, circle to crouch, square to reload… all of that is assumed knowledge that you would probably have ingested over time, so it comes completely natural to you now.

Your SO doesn’t know any of this. They probably don’t even know that the L and R buttons exist. I didn’t. I still forget.

This is why choosing a game to play together is so difficult. When you finally do choose one? You have to be patient. You cannot get annoyed when your SO has to ask every five minutes what jump is again. They may have difficulty navigating around menus and UI. They may have difficulty moving around in game. Side scrollers are pretty intuitive, but games that require you to position a camera? Ie. Most third person or first person anything? Oof. That’s hard. They might fall off a lot of bridges or stare at the ground a lot. This is a skill you have to build up. You have it already. They don’t. It’s important to remember that saying anything like “You can do it, it’s easy!” or “Why are you having so much trouble with this?” is NOT HELPFUL. It’s only going to make your SO feel stupid/bad. Remember, they don’t give a shit about video games. Their life has been just fine without them until now, and it will continue to be just fine without games. They are only doing this FOR YOU. So why would you want to make someone feel stupid for just trying to make you happy?

Treat them like a baby deer. Gently. Tentatively. You are slowly drawing them into the clearing. Any harsh comment will send them running.

Based on all this, here are some recommendations on games that work well to play with your SO.

1. Games you are SUPPOSED to be bad at.

You know how I just talked about how there are general conventions over controls? And that it can be frustrating for your SO to learn these whilst they come intuitively for you?

Well what if you eliminated that disparity by playing games where the controls intentionally make no goddamn sense? By playing a game with whacky controls, it evens the playing field. Your SO is learning and struggling with controls, but so are you! This way your stupidity is not humiliating, it creates a sense of comradery. There’s no shame, just silliness and fun. The game I played with my partner that made me first realise the genius of this was… Octodad.

Octodad is collaborative. It’s an absolute nightmare to control, but for once my boyfriend’s muscle memory was actually a detriment. He would instinctively go to move like he would in other games, but that’s not how Octodad works. So he was rewiring his muscle memory whilst I was just a blank slate.

“Trigger to grab things? Yeah sure. Why not? I don’t know any better.”

It also hits that sweet spot of being short enough that the silliness doesn’t grow stale, and has a sincere enough story that you do become invested in the fate of the octopus in your hands.

10/10 Octodad. Highly recommend.

Other games in this genre that I feel would be worth a look:

- Man Fall Flat

- QWOP

- Surgeon Simulator

- Super Bunny Man

2. Hey! It’s Nintendo!

Ah Nintendo. It’s where most children start, so it seems like a logical place for a burgeoning gamer to begin. But specifically, what I want to recommend are the range of excellent Nintendo party games that are simple to navigate, fun, and often cooperative. I can’t play an FPS, but Mario Kart comes very easy to me…. Or as easy as it does to anyone. Similarly, Mario Party requires almost no video game literacy, and you can introduce it to your SO as “It’s just a board game that happens to be a video game”.

Although we do joke about Mario Kart and Mario Party being “friendship killers” because of their competitive nature and how easy it is to sabotage other players. If you are worried about these games maybe causing to much distress, I would also recommend the tried and true Wii Sports or the more modern 1-2-Switch. It has a cow milking game! It’s fun! And you can laugh at one another as you make terrible dick jokes.

I DO NOT RECOMMEND SUPER SMASH BROS. THAT IS NOT AN INTRODUCTORY GAME.

If you really want, play it on co-op team mode.

In summary, when picking a game to play with your SO my general recommendations are:

- make sure the game has very simple controls and linear movement (if any at all)

- or have a game with bonkers controls so you can learn them together

- avoid competitive games to start. Or play competitive games that require no video game literacy. The best FPS or Tekken player is NOT going to win Mario Party. It’s just luck.

Playing games this way with my partner is fun, but not how we usually play games. This is because if I want to play a AAA title, or maybe a great JRPG I’ve heard about, I have to move on to the second method.

Playing games where the gamer has the control and the non-gamer watches/participates via other means.

This is how my partner and I generally play games. Because my partner is the one holding the controller, navigating the game, combat and menus, I am not required to have any of that assumed knowledge I mentioned earlier.

But how can you make watching a video game compelling?

It’s actually not as difficult as you might imagine, but you’re right in that it does rule out a chunk of games. If you have grand dreams of your non-gamer girlfriend fawning over your sweet League of Legends skills… then I think you need a bit of a wake-up call. Competitive online games, FPS and sports games (such as FIFA) are generally not fun to watch. This isn’t a blanket statement! Some non-gamers could find these fun. But generally, if you don’t know the skill it requires to perform certain moves or strategies, or are unfamiliar with even the basic rules… these games just look like a mess.

Me watching someone play Overwatch: “Wow… I suddenly have motion sickness”

I find the most compelling games to watch are: Narrative driven

Think of all the games that are basically movies with some gameplay thrown in. Uncharted and the Tomb Raider reboot are just long form Indiana Jones movies. The Last of Us is a survival, drama, horror movie that makes you question your morals and how far you are willing to go to help humanity. The Witcher captures a rich narrative and lore comparable only to the Lord of the Rings films. The Yakuza series might be the best mob movie I’ve ever seen. All of these games are great and as engrossing to watch as they are to play. Lovable characters, compelling obstacles, and a good dose of spectacle keep them entertaining. Narrative driven games are my favorite to just sit and watch whilst my partner plays.

However, “narrative driven games” encapsulates thousands of titles, with some being more suited to watching than others. To help narrow down games that are enjoyable without a controller, I’ve narrowed it down into 3.5 sub categories.

1. Games with a looser/more predictable narrative, but the visuals are just so damn appealing

2. Choice based games – with the sub category of puzzle games

3. Mediocre games, but they’re fun

Each of these categories creates a uniquely different gaming experience, ranging from a cinematic “sit and watch” style, to a higher participation, more co-operative team based style. Let’s start with the first as it’s the easiest to define.

1. Games with a looser narrative, but engrossing visuals

Sometimes games will have a good story, but you’re just not sure if it’s good enough to sustain someone’s attention for 20+ hours. Maybe it’s a little predictable. Maybe you know the hero is destined to save the day. Will this be enough to hold my SOs attention?

And I think you are really the only one to answer that.

But let me first tell you about one of my favorite games, and probably only the second game I ever played with my partner.

DMC.

I fucking adore this game.

Eat my ass. It’s great.

But is the story that great? I mean it’s cool. Half angel, half demon boys. Long lost twin brothers. An evil demon who killed your father and has now essentially become a mob boss and corrupted your city. It’s cool. It’s interesting enough, but at the end of the day, you know Vergil is going to betray you. You know your cardboard cut out girlfriend(?) is going to be a liability. You know you’re going to defeat that demon boss with your big sword.

But god damn, if it isn’t a riot to watch. Devil May Cry has some of the most stylish and slick combat, that it’s really entertaining to just witness. You can cheer on your SO on as they climb up to a SSS ranking and maintain their combo over 5 whole minutes. The soundtrack is blasting. The level design and art direction are stunning. Watching Dante get dragged into Limbo is always an experience, and you’re never quite sure what you’re going to walk into this time. DMC still has one of the most inventive boss fights I’ve ever seen and I’m honestly waiting for another game to top it.

So, I think if your visuals are captivating enough… that can definitely save a game with maybe just a good to average story. It’s just a treat for the senses.

Other games I would put in this category would be:

- The Arkham games, particularly Arkham City and Arkham Knight. God the combat is just great to watch, with each punch really feeling brutal and heavy. The spookiness of Gotham is eerily beautiful, and finding all the easter eggs in the world is a real treat.

- The latest Spider-man game from Insomniac games

- Breath of the Wild – I just like… being in this game

-Nier Automata – this one is a bit weird. I wasn’t sure which category to put it in, but felt because of the interesting mechanics and gimmick of playing over and over again to reveal more of the world and story, I decided to put it here.

2. Choice based games

This is definitely my favorite type of game to play, and the one that I think is the easiest to engage with, despite the lack of controller in my hand.

The whole reason I started playing games with my partner is because he was playing a game and after a while I just… sat down… and started watching.

The game was Mass Effect 3, and I just became really involved in the story and the choices my partner was making. We have since gone back and played the entire Mass Effect series multiple times, and I feel it really exemplifies what is so fantastic about playing a choice-based game with a non-gamer.

Choice based games still allow your SO to be heavily involved. If you are letting your SO make choices, then they are still playing the game. Just because I wasn’t the one actively shooting Collectors does not mean I had no impact on our game experience. It was my choice to cure the genophage. My choice to spare the Rachni queen, and you can be damn sure that it was my choice to romance Garrus across the series. Choice based games are fantastic for keeping your SO engaged and the two of you can cultivate your own story and endure consequences together.

Obviously I love Mass Effect, but some similar games in this style would be:

- Until Dawn

- The Witcher

- The Persona series – but be careful! These games are long so may not be great as an introductory game

Visual Novels! – Visual novels are excellent for this! They’re purely choice based, and it doesn’t matter who is clicking the next button. For an added amount of goofiness, take on roles and do stupid voices. Do it. It’s great. Nothing makes me laugh harder than romancing an anime schoolgirl with an old man voice.

They’re short, but can be replayed for a different ending if you wish. My partner and I played Dream Daddy together multiple times and were avid about who our favorite dads were. I liked Robert and Craig. My partner liked Damian and Brian.

My partner and I have actually just started playing a new visual novel, but along with it being choice based, I would also classify it as a puzzle/problem solving game.

2.5 Puzzle/problem solving games

Puzzle games are great for a similar reason as choice-based games, as they keep your SO involved. Only this time they are helping to problem solve. Many times I’ve been able to figure something out before my boyfriend, so I can go “ohhhh take that, drop it here, then move that here” and it’ll work!

Currently we’re making our way through the Danganronpa series, which is a bit of a hybrid between a visual novel and puzzle game. It’s not a difficult game to control or navigate at all, so I could play it on my own, but I like playing it with my partner as we bounce theories off of one another and work together to solve a crime. I’ll remember certain pieces of evidence he doesn’t, or he’ll remember one throw away line from the opening 3 minutes of the game that is now an alibi. During free time, we’ll each pick a character to talk to, so we both get to learn more about our favorite characters.

“I wanna talk to Sakura because she seems sweet and I want her to have friends”

“Ok, then I’ll talk to Mondo because he seems funky.”

And so on. The process is collaborative.

Some games of a similar genre that might be fun:

- Catherine from Atlus

- Portal 1 and 2

- The Phoenix Wright series

- Resident evil 2 – this one is a bit odd, but resident evil 2 is almost a memory game as you work to remember all the things you’ve picked up, the pieces you need to unlock doors, and prioritize the weapons you’ll take with you. “No take the grenade rounds. If we’re going in the offices, we left that face hugger there, remember?”

Finally this brings us to our third category, and also the most difficult to explain. So I’ve just called it:

3. Average Games, but there’s just something enjoyable about them

Sometimes games are just… fun. Sometimes the story is alright, the gameplay is repetitive, but the characters and writing are just so inherently likeable or interesting that you can keep watching. For me, this whole category was created as a way for me to justify my fondness for the Saints Row series.

Saints Row is, on paper, pretty unremarkable. It’s a ridiculous series of games about a street gang coming into fame and eventually political power, and the outlandish things they have to do to climb that ladder. Often cited as a “GTA clone” the gameplay is repetitive and almost boring at times, with most of the missions falling into the “Go here, kill people” category. The world isn’t particularly pretty or interesting. It’s just a city. One that you’ve seen a million times if you’ve played any city-based open world game.

So why do I love this unremarkable series? Why am I oddly attached to these characters?

Ultimately, I think it comes down to the characters being written with a certain amount of honesty, and the interactions between them feel genuine and oddly heartfelt. I don’t really care about rival gangs or accumulating money, but if it lets me ride in the car and have another sing along with Pierce, then I’m going to do it.

I like the weird sexual tension between the Boss and Shaundi, which only seems to become more prominent if you play as the female Boss. I love Matt Miller and him ranting about his Nyte blayde fan fiction. I like finding out the Boss has read Jane Austen.

It’s just silly and fun, with a good amount of ridiculous spectacle. It’s definitely not a series that I could recommend. It just kind of appealed to something in me. I think there are lots of games that could fit this category. Most people will say that the Borderlands series is “Alright” but it has a lot of fun dialogue and characters who keep it entertaining. Similarly, despite lack luster reviews, I know a lot of people really enjoyed the 2013 Deadpool game because Deadpool was written just like he is in the comics.

This category is the hardest to nail, and you may go through several games that you think are “hilarious” or “crazy fun” that just don’t gel with your SO. That’s ok. As you play more, you’ll eventually be able to develop a sense of each other’s tastes and what will appeal to you.

General Advice in closing

TL;DR, here are some good parameters to stick to until you reach a consensus of what games your SO might enjoy.

- Games with a good story and compelling characters will always be entertaining

- If the combat is long and takes up a good proportion of the game, it should be visually interesting to look at. If the combat is repetitive or boring to watch, it should clip along at a good pace and only come in short bursts. Bonus points if there’s party banter!

- Start with shorter games, then build up. It’s a big demand on someone to sit through a 60+ hour game for your first few attempts. Maybe put that Tales game on the shelf for now.

I’ve tried to keep this advice general, but obviously you and your SO will have different interests, and you should appeal to those. I love anime. I love hot boys. Due to these factors, I am more than willing to sit through a long form JRPG about two rival noble boys, as it appeals to my weeb sensibilities. This is not something I would expect others to be able to do.

I generally don’t like films about heists or organized crime. It’s just not a genre that appeals to me, so asking me to sit through Grand Theft Auto is probably not the wisest choice. I have played GTA5 for those that are curious, and it’s not my favorite. It’s definitely not bad, and I do expect other non-gamers would be entertained playing through the story of it. There’s definitely a good story there! It’s just not one that satisfies all of my needs. Just like how I don’t expect every person to love sitting through God of War or Jak and Daxter.

Getting to learn each other’s likes and dislikes takes time. Favorite movies can be a bit of an indicator, but transferring to a different medium complicates things. The most important thing is to listen to each other and be respectful. If your SO doesn’t like your favorite game of all time, that’s not a personal insult. You are likely just experiencing the game in a different way than they are, and they can’t relate to that.

Along with being respectful, obviously don’t pressure your SO into anything. Sometimes you’ll find that your SO might not want to play games with you because they had such an awful experience trying to play with their exes or other friends previously. I know I was really hesitant to ever pick up a controller again after an incident where I couldn’t navigate my character over a log, because I was not used to controlling a camera, and was made to feel really stupid and useless. I threw up my hands and said “Fuck this shit” for a long time. Your SO might be hesitant to play games with you because they worry that you’ll just get frustrated with how bad they are. You can reassure them that this won’t happen, but it’s still their choice to say no.

At the end of the day, it’s ok to have different hobbies. You don’t have to share everything. If you are lucky enough that your non-gamer SO might want to try playing games with you, then be kind, and be patient. When picking games to play together, try to pick something you can both enjoy. Go on a journey together. Have fun!

It’s a game after all.

#video games #gamers #storytelling #how do I tag this?#essay #advice #review #i write stuff #opinion #blog

176 notes · View notes

mariaaklnthony · 6 years

Text

The King vs. Pawn Game of UI Design

If you want to improve your UI design skills, have you tried looking at chess? I know it sounds contrived, but hear me out. I’m going to take a concept from chess and use it to build a toolkit of UI design strategies. By the end, we’ll have covered color, typography, lighting and shadows, and more.

But it all starts with rooks and pawns.

I want you to think back to the first time you ever played chess (if you’ve never played chess, humor me for a second—and no biggie; you will still understand this article). If your experience was anything like mine, your friend set up the board like this:

And you got your explanation of all the pieces. This one’s a pawn and it moves like this, and this one is a rook and it moves like this, but the knight goes like this or this—still with me?—and the bishop moves diagonally, and the king can only do this, but the queen is your best piece, like a combo of the rook and the bishop. OK, want to play?

This is probably the most common way of explaining chess, and it’s enough to make me hate board games forever. I don’t want to sit through an arbitrary lecture. I want to play.

One particular chess player happens to agree with me. His name is Josh Waitzkin, and he’s actually pretty good. Not only at chess (where he’s a grandmaster), but also at Tai Chi Push Hands (he’s a world champion) and Brazilian Jiu Jitsu (he’s the first black belt under 5x world champion Marcelo Garcia). Now he trains financiers to go from the top 1% to the top .01% in their profession.

Point is: this dude knows a lot about getting good at stuff.

Now here’s the crazy part. When Josh teaches you chess, the board looks like this:

King vs. King and Pawn

Whoa.

Compared to what we saw above, this is stupidly simple.

And, if you know how to play chess, it’s even more mind-blowing that someone would start teaching with this board. In the actual game of chess, you never see a board like this. Someone would have won long ago. This is the chess equivalent of a street fight where both guys break every bone in their body, dislocate both their arms, can hardly see out of their swollen eyes, yet continue to fight for another half-hour.

What gives?

Here’s Josh’s thinking: when you strip the game down to its core, everything you learn is a universal principle.

That sounds pretty lofty, but I think it makes sense when you consider it. There are lots of things to distract a beginning chess player by a fully-loaded board, but everything you start learning in a king-pawn situation is fundamentally important to chess:

using two pieces to apply pressure together;

which spaces are “hot”;

and the difference between driving for a checkmate and a draw.

Are you wondering if I’m ever going to start talking about design? Glad you asked.

The simplest possible scenario

What if, instead of trying to design an entire page with dozens of elements (nav, text, input controls, a logo, etc.), we consciously started by designing the simplest thing possible? We deliberately limit the playing field to one, tiny thing and see what we learn? Let’s try.

What is the simplest possible element? I vote that it’s a button.

This is the most basic, default button I could muster. It’s Helvetica (default font) with a 16px font size (pretty default) on a plain, Sketch-default-blue rectangle. It’s 40px tall (nice, round number) and has 20px of horizontal padding on each side.

So yeah, I’ve already made a bunch of design decisions, but can we agree I basically just used default values instead of making decisions for principled, design-related reasons?

Now let’s start playing with this button. What properties are modifiable here?

the font (and text styling)

the color

the border radius

the border

the shadows

These are just the first things that come to my mind. There are even more, of course.

Typography

Playing with the font is a pretty easy place to start.

Blown up to show font detail.

Now I’ve changed the font to Moon (available for free on Behance for personal use). It’s rounded and soft, unlike Helvetica, which felt a little more squared-off—or at least not as overtly friendly.

The funny thing is: do you see how the perfectly square edges now look a tad awkward with the rounded font?

Let’s round the corners a bit.

Bam. Nice. That’s a 3px border radius.

But that’s kind of weird, isn’t it? We adjusted the border radius of a button because of the shape of the letterforms in our font. I wouldn’t want you thinking fonts are just loosey-goosey works of art that only work when you say the right incantations.

No, fonts are shapes. Shapes have connotations. It’s not rocket science.

Here’s another popular font, DIN.

With its squared edges, DIN is a clean and solid workhorse font.

Specifically, this is a version called DIN 2014 (available for cheap on Typekit). It’s the epitome of a squared-off-but-still-readable font. A bit harsh and no-nonsense, but in a bureaucratic way.

It’s the official font of the German government, and it looks the part.

So let’s test our working hypothesis with DIN.

How does DIN look with those rounded corners?

Well, we need to compare it to square corners now, don’t we?

Ahhh, the squared-off corners are better here. It’s a much more consistent feel.

Now look at our two buttons with their separate fonts. Which is more readable? I think Moon has a slight advantage here. DIN’s letters just look too cramped by comparison. Let’s add a bit of letter-spacing.

When we add some letter-spacing, it’s far more relaxed.

This is a key law of typography: always letter-space your uppercase text. Why? Because unless a font doesn’t have lowercase characters, it was designed for sentence-case reading, and characters in uppercase words will ALWAYS appear too cramped. (Moon is the special exception here—it only has uppercase characters, and notice how the letter-spacing is built into the font.)

We’ll review later, but so far we’ve noticed two things that apply not just to buttons, but to all elements:

Rounded fonts go better with rounded shapes; squared-off fonts with squared-off shapes.

Fonts designed for sentence case should be letter-spaced when used in words that are all uppercase.

Let’s keep moving for now.

Color

Seeing the plain default Sketch blue is annoying me. It’s begging to be changed into something that matches the typefaces we’re using.

How can a color match a font? Well, I’ll hand it to you. This one is a bit more loosey-goosey.

For our Moon button, we want something a bit more friendly. To me, a staid blue says default, unstyled, trustworthy, takes-no-risks, design-by-committee. How do you inject some fun into it?

Well, like all problems of modifying color, it helps to think in the HSB color system (hue, saturation, and brightness). When we boil color down to three intuitive numbers, we give ourselves levers to pull.

For instance, let’s look at hue. We have two directions we can push hue: down to aqua or up to indigo. Which sounds more in line with Moon? To me, aqua does. A bit less staid, a bit more Caribbean sea. Let’s try it. We’ll move the hue to 180° or so.

Ah, Moon Button, now you’ve got a beach vibe going on. You’re a vibrant sea foam!

This is a critical lesson about color. “Blue” is not a monolith; it’s a starting point. I’ve taught hundreds of students UI design, and this comes up again and again: just because blue was one color in kindergarten doesn’t mean that we can’t find interesting variations around it as designers.

“Blue” is not a monolith. Variations are listed in HSB, with CSS color names given below each swatch.

Aqua is a great variation with a much cooler feel, but it’s also much harder to read that white text. So now we have another problem to fix.

“Hard to read” is actually a numerically-specific property. The World Wide Web Consortium has published guidelines for contrast between text and background, and if we use a tool to test those, we find we’re lacking in a couple departments.

White text on an aqua button doesn’t provide enough contrast, failing to pass either AA or AAA WCAG recommendations.

According to Stark (which is my preferred Sketch plugin for checking contrast—check out Lea Verou’s Contrast Ratio for a similar web-based tool), we’ve failed our contrast guidelines across the board!

How do you make the white text more legible against the aqua button? Let’s think of our HSB properties again.

Brightness. Let’s decrease it. That much should be obvious.

Saturation. We’re going to increase it. Why? Because we’re contrasting with white text, and white has a saturation of zero. So a higher saturation will naturally stand out more.

Hue. We’ll leave this alone since we like its vibe. But if the contrast continued to be too low, you could lower the aqua’s luminosity by shifting its hue up toward blue.

So now, we’ve got a teal button:

Much better?

Much better.

For what it’s worth, I’m not particularly concerned about missing the AAA standard here. WCAG developed the levels as relative descriptors of how much contrast there is, not as an absolute benchmark of, say, some particular percentage of people to being able to read the text. The gold standard is—as always—to test with real people. AAA is best to hit, but at times, AA may be as good as you’re going to get with the colors you have to work with.

Some of the ideas we’ve used to make a button’s blue a bit more fun and legible against white are actually deeper lessons about color that apply to almost everything else you design:

Think in HSB, as it gives you intuitive levers to pull when modifying color.

If you like the general feel of a color, shifting the hue in either direction can be a baseline for getting interesting variations on it (e.g., we wanted to spice up the default blue, but not by, say, changing it to red).

Modify saturation and brightness at the same time (but always in opposite directions) to increase or decrease contrast.

OK, now let’s switch over to our DIN button. What color goes with its harsh edges and squared-off feel?

The first thing that comes to mind is black.

But let’s keep brainstorming. Maybe a stark red would also work.

Or even a construction-grade orange.

(But not the red and orange together. Yikes! In general, two adjacent hues with high saturations will not look great next to each other.)

Now, ignoring that the text of this is “Learn More” and a button like this probably doesn’t need to be blaze orange, I want you to pay attention to the colors I’m picking. We’re trying to maintain consistency with the official-y, squared-off DIN. So the colors we go to naturally have some of the same connotations: engineered, decisive, no funny business.

Sure, this match-a-color-and-a-font business is more subjective, but there’s something solid to it: note that the words I used to describe the colors (“stark” and “construction-grade”) apply equally well to DIN—a fact I am only noticing now, not something done intentionally.

Want to match a color with a font? This is another lesson applicable to all of branding. It’s best to start with adjectives/emotions, then match everything to those. Practically by accident, we’ve uncovered something fundamental in the branding design process.

Shadows

Let’s shift gears to work with shadows for a bit.

There are a couple directions we could go with shadows, but the two main categories are (for lack of better terms):

realistic shadows;

and cartoon-y shadows.

Here’s an example of each:

The top button’s shadow is more photorealistic. It behaves like a shadow in the real world.

The bottom button’s shadow is a bit lower-fidelity. It shows that the button is raised up, but it’s a cartoon version, with a slightly unrealistic, idealized bottom edge—and without a normal shadow, which would be present in the real world.

The bottom works better for the button we’re crafting. The smoothness, the friendliness, the cartoon fidelity—it all goes together.

As for our DIN button?

I’m more ambivalent here. Maybe the shadow is for a hover state, à la Material Design?

In any case, with a black background, a darkened bottom edge is impossible—you can’t get any darker than black.

By the way, you may not have noticed it above, but the black button has a much stronger shadow. Compare:

The teal button’s shadow is 30%-opacity black, shifted 1 pixel down on the y-axis, with a 2-pixel blur (0 1px 2px). The black button’s is 50%-opacity black, shifted 2 pixels down on the y-axis, with a 4-pixel blur (0 2px 4px). What’s more, the stronger shadow looks awful on the teal button.

Why is that? The answer, like so many questions that involve color, is in luminosity. When we put the button’s background in luminosity blend mode, converting it to a gray of equal natural lightness, we see something interesting.

The shadow, at its darkest, is basically as dark as the button itself. Or, at least, the rate of change of luminosity is steady between each row of pixels.

The top row is the button itself, not shadow.

Shadows that are too close to the luminosity of their element’s backgrounds will appear too strong. And while this may sound like an overly specific lesson, it’s actually broadly applicable across elements. You know where else you see it?

Borders

Let’s put a border on our teal button.

Now the way I’ve added this border is something that a bunch of people have thought of: make the border translucent black so that it works on any background color. In this case, I’ve used a single-pixel-wide border of 20%-opacity black.

However, if I switch the background color to a more standard blue, which is naturally a lot less luminous, that border all but disappears.

In fact, to see it on blue just as much as you can see it on teal, you’ve got to crank up black’s opacity to something like 50%.

This is a generalizable rule: when you want to layer black on another color, it needs to be a more opaque black to show up the same amount on less luminous background colors. Where else would you apply this idea?

Spoiler alert: shadows!

Each of these buttons has the same shadow (0 2px 3px) except for different opacities. The top two buttons’ shadows have opacity 20%, and the bottom two have opacity 40%. Note how what’s fine on a white background (top left) is hardly noticeable on a dark background (top right). And what’s too dark on a white background (lower left) works fine on a dark background (lower right).

Icons

I want to change gears one more time and talk about icons.

Here’s the download icon from Font Awesome, my least favorite icon set of all time.

I dislike it, not only because it’s completely overused, but also because the icons are really bubbly and soft. Yet most of the time, they’re used in clean, crisp websites. They just don’t fit.

You can see it works better with a soft, rounded font. I’m less opposed to this sort of thing.

But there’s still a problem: the icon has these insanely small details! The dots are never going to show up at size, and even the space between the arrow and the disk is a fraction of a pixel in practice. Compared to the letterforms, it doesn’t look like quite the same style.

But what good is my complaining if I don’t offer a solution?

Let’s create a new take on the “download” icon, but with some different guiding principles:

We’ll use a stroke weight that’s equivalent (or basically equivalent) to the text weight.

We’ll use corner radii that are similar to the corner radii of our font: squared off for DIN, rounded for Moon.

We’ll use a simpler icon shape so the differences are easy to see.

Let’s see how it looks:

I call this “drawing with the same pen.” Each of these icons looks like it could basically be a character in the font used in the button. And that’s the point here. I’m not saying all icons will appear this way, but for an icon that appears inline with text like this, it’s a fantastic rule of thumb.

Wrapping it up

Now this is just the beginning. Buttons can take all kinds of styles.

But we’ve got a good start here considering we designed just two buttons. In doing so, we covered a bunch of the things that are focal points of my day-to-day work as a UI designer:

lighting and shadows;

color;

typography;

consistency;

and brand.

And the lessons we’ve learned in those areas are fundamental to the entirety of UI design, not just one element. Recall:

Letterforms are shapes. You can analyze fonts as sets of shapes, not simply as works of art.

You should letter-space uppercase text, since most fonts were designed for sentence case.

Think in HSB to modify colors.

You can find more interesting variations on a “basic” color (like a CSS default shade of blue or red) by tweaking the hue in either direction.

Saturation and brightness are levers that you can move in opposite directions to control luminosity.

Find colors that match the same descriptors that you would give your typeface and your overall brand.

Use darker shadows or black borders on darker backgrounds—and vice versa.

For inline icons, choose or design them to appear as though they were drawn with the same pen as the font you’re using.

You can thank Josh Waitzkin for making me a pedant. I know, you just read an entire essay on buttons. But next time you’re struggling with a redesign or even something you’re designing from scratch, try stripping out all the elements that you think you should be including already, and just mess around with the simplest players on the board. Get a feel for the fundamentals, and go from there.

Weird? Sure. But if it’s good enough for a grandmaster, I’ll take it.

http://ift.tt/2BnocDc

#The King vs. Pawn Game of UI Design

0 notes

elizabetdfhmartin · 6 years