Posts Tagged

Design

Chobanification of Logos Online

Elizabeth Technology June 7, 2022

Logo art, just like any other art, goes through cycles.

The Fashion of Fashion

Fashion is cyclical. At first, something is new and fresh – after the excessively large straight leg or bell-bottomed jeans of the 90s, the low-cut tight-fitting jeans of the 2000s were a refreshing new silhouette. This continued into the 2010s, where the waist got higher but the jeans remained tight, and then finally the pants relaxed in the later 2010s with the revival of ‘mom jeans’, which are jeans that are less tight and higher-waisted by design. While this wasn’t full out JNCO jeans level pants, it was a reference to earlier designs, a sort of remix, old and new together. You see these cyclical design choices everywhere, not just clothing, and what was tacky and outdated five or ten years ago will no longer be tacky in twenty!

The principles of designing a web page are also cyclical. Some things will always remain the same – hamburger menus have stayed in fashion the same way buttons on jeans do. Others are constantly in flux – font choices, color rules, and general ‘feel’ come and go just like colors and fit of denim do.

Minimalism

The web went through a period where everything cool was minimalist. Every design website suggested that a minimalist design was more professional, and so many small up and coming businesses kept things narrow, black-and-white, and hidden until moused over. This is in heavy contrast to the free-for-all of the 2000s, where websites could be neon pink with blue text and totally unreadable. Customers, understandably, did not want to stare at that while reading blog posts or debating what to buy, and so breakout websites that made things somewhat less painful to look at ended up flourishing.

Of course, just like any trend, people were doing things outside of it and alongside it that accomplished the goal of a readable website, so not everything was minimalist, and the definition of ‘minimalist’ in a totally new space isn’t the same way you’d define a minimalist website today, the same way mom jeans are not JNCOs or bell-bottoms even though they meet the criteria of ‘not-low-cuts’.

Where 2000s minimalism was ‘there are no images, the website is nearly entirely black and white text’, 2010s minimalism was ‘all the buttons are hidden, the background is one large image, and the text is almost unreadably narrow, except sometimes for serif text which has broad diagonal lines’. This is also difficult to read in a different way. While users may spend more time on this site, they’re going to be spending that time looking for the button they need because it’s hidden by design, to minimalize the site.

Chobanification

Understandably, users get sick of this taken to an extreme. Just like jeans, it is possible to design a website that’s too tight, that’s too minimal. Fashion tends to lean harder and harder into an idea, taking it to an extreme beyond recognition, until it either mutates or someone comes up with something totally new and counter-culture. Websites that dared to stray from minimalism without looking like the sites of the 90s and early 2000s become the trendsetters, and thus Cooper Black begins to take over. Cooper Black is a fairly well-known font – it’s the same font on the Chobani logo, and it’s one of the defaults for Microsoft Word. While not perfectly readable (especially when small) it’s easier to spot when it’s just floating in space thanks to the line weight.

Just as more relaxed jeans were a response to pants getting tighter and tighter, seemingly with no rhyme or reason, this wide text is a response to websites doing the same with ever thinner, ever taller Calibri sans serif fonts that disappear into nothing on small screens and mobile.

The only problem with Cooper Black is that it’s incredibly recognizable. A lot of the tall, narrow fonts used on minimalist websites look similar, but not exactly identical. Even if you can tell that they’re approximately the same, the font itself is so ultimately brandless that it’s not noticeable. Like jeans, as a generic term – jeans are made of denim, and most are a shade of blue. When Cooper Black comes swinging in, the shape of the individual letters beyond the thickness of the lines is an immediate tell for the font. It’s the equivalent of one designer using teal instead of the standard indigo blue for jeans, and everyone else replicating that exact shade of teal. And it’s a nice shade, there’s nothing wrong with it, but when it’s used everywhere alongside beige, it can get kind of repetitive. Small companies use it. Large companies use it. It’s got a kind of 60’s vibe to it thanks to the mild warping of the letters, which leads to it being used in a lot of ‘feel-good’ brands that advertise their products for self-care. It also calls to mind the décor of the 60’s, so people working with wood and leather can also use it without it feeling out of place. For as memorable and striking as Cooper Black is, it’s surprisingly versatile!

As a default font, it’s also more accessible than a number of professional fonts that could substitute it. For someone designing a brand logo for their microbusiness, the twenty dollars you’d have to spend on a font pack only to use exactly one of the fonts inside it is money that could have been saved with the use of Cooper Black.  

The Next Big Thing

Cooper Black rides a wave of non-minimalism in websites. It’s not obnoxious, but it’s not the same super-skinny fonts that came in reply to obnoxious websites. When people making their websites, logos, and other digital items get bored, I expect to see something thin and a little blocky come to the limelight in it’s place – cyclically, people aren’t going to go back to ultra-narrow, ultra-tall type fonts, but they may start using a similar font that’s less difficult to read in small sizes. Cooper Black hasn’t peaked, even though website designers and online denizens alike are beginning to notice how often it’s used.

Old-Style Pixel Art vs. Emulators

Elizabeth Technology December 24, 2021

Old Nintendo games look very different from what people remembered them as. They’re not crazy, or blinded by nostalgia – the games really did look a lot better.

The secret is the CRT monitor.

The CRT – and Pixels

A pixel is defined as the smallest controllable unit of an image on-screen. This has changed some over time! In old digital clocks, the bars making up the numbers would act as its pixels. In CRTs, it was little cubes where the red, green, blue, and white projection lights lined up to give that cube the right color.

Old-style living-room CRTs usually had a resolution of 480p. When you see a number followed by ‘p’, like 480p, it’s referring to the number of rows of pixels lined up top-to-bottom, so any screen could theoretically be 480p – it’s just more impressive the smaller the screen is. 480p was the standard for many late 90’s/early 2000’s games, because CRTs were widely available. CRTs weren’t bad, for the time! Rear-projection models could get huge, but the kind that blasted the image directly onto the screen was limited to a size of about 30”.

CRTs also had the unique ‘CRT grid’. Because of how CRTs work, the individual pixels didn’t connect to each other neatly like they do on modern screens – a small outline of darkness surrounds each pixel. The pixel inside said outline isn’t perfectly ‘square’, either, like they are on modern displays. If you get up close to a CRT screen (don’t, it’s bad for your eyes) you’d be able to see the three colors being projected onto the glass of said screen, and they form a squarish blob or a series of colored lines, depending on brand. When you back up, it looks like a picture, and your brain automatically fills in the gaps left by the un-connected parts. This is a huge part of why these games don’t look as good as they used to! Current monitors don’t have gaps visible to the naked eye between pixels.

Old Games

Game designers were able to factor this in to give the illusion that the image was much clearer than it was – Pikachu in 480P looked incredible back then, but terrible today in that same 480p. Nostalgia hasn’t clouded vision, Pikachu really did look a lot less blocky. The CRT’s rounded off pixel-corners meant that developers could fill those pixels in right to the edge and still get a polished, rounded appearance – your brain, as mentioned previously, is also filling in gaps for you, as a sort of optical illusion. They couldn’t make a perfectly smooth curve, so they let you do it.

In absolute terms, games looked slightly worse before they got much better. 3-D games especially. Two-dimensional sprites could be fudged – there’s only so many positions for the characters to be in, so animate a jumping sequence, an attacking sequence, etc. and you’re good to go. Those games often still look great on modern monitors. 3-Dimensional games had to build a doll that the player could control and view from every angle, which was a lot for early computers. Their saving grace was that CRT – characters could be flawed and un-specific without being unreadable. With CRTs in the mix, many people didn’t notice that the PS1 games looked very different from PS2 games at the time, unless they were fancy and upgraded their screen without also upgrading to the next console. With the benefit of hindsight, games that were only a few years apart do look really different: Resident Evil 4 doesn’t look too bad on a modern screen, while Resident Evil 2 looks noticeably dated in comparison! But at the time, Resident Evil 3 looked marginally better than 2, and 4 only looked a little better than 3.

Most gamers never noticed that their old games were secretly ugly until many years down the line, in the modern era. Even that’s not a really fair statement – they weren’t ugly when they went in. It’s like trying to watch one of the old-style 3-D movies without the glasses, they were designed to be played on CRTs. We’re just noticing this now because emulators and ROMs for dead or missing games are more available than ever!  

Emulators

Nowadays, with our perfectly square pixels, Pikachu looks much more… square. In fact, everything from old games does. Old games had very limited computer power to work with, so little hacks and tricks like this kept the games running smoothly. Blocky Pikachu is barely noticeable, but leaving him without fine detail frees up enough space to add extra plant textures to the island. Unfortunately, ROMs bring the old game to life without its limitations – the CRT monitor’s grid isn’t easy to recreate in a visually appealing way.

The original games with this art style weren’t meant for modern screens. The consoles are producing the same images now as they did back then, it’s just much clearer. I’m sure when we get to a point where projection or VR games are common, these old “3-D” games will look like trash compared to real 3-D, and it won’t be an accurate representation of the way we played those games.

Right now, the best option to get those nice-looking characters back is to recreate the CRT’s grid over top of the image, which many ROM creators are reluctant to do – many players would rather have a slightly uglier game in high-res than a more attractive game in low-res.

As a result, players are unintentionally led to believe the game really was that ugly. It just wasn’t.

At least the audio still sounds the same!

Sources:

History of TV Pixels: From CRT to 8K

https://animoto.com/blog/news/hd-video-creation-sharing

https://discover.therookies.co/2019/05/09/a-brief-history-of-3d-texturing-in-video-games/

why it was better on CRT TV

UI Choices – Don’t Clickshame

Elizabeth Technology December 15, 2021

The phrasing of a ‘no thanks’ in dialogue boxes can be a real turn-off for potential customers.

Website newsletters, coupons, and other assorted pop-up boxes may ask you to sign up – and if you don’t, you click to decline the offer. Is it possible to word it in a way that changes the minds of customers?

I Don’t Want to Subscribe

In some businesses in Japan, employees are expected to gauge the response to an idea they had purely by tone. “Sure!”, “Sure.”, And “Sure… but it will be very hard.” are the only options, and ultimately, they are still all affirmatives – if the other person wanted to step on toes, they would make “sure…” sound like “sure!” and forge ahead, and they would have plausible deniability while doing it. Foreign business associates consulting with Japanese companies were sometimes a blessing because they lacked this context – they’d charge right in with a “no”. This took a lot of social pressure off of the middle managers who knew issues existed, had tried to bring them up before, but went ignored because of social rules stating they must minimize things, or phrase them in a way that isn’t unpleasant.

Being forced to say “I don’t like this” or “I don’t want that” is often uncomfortable, so many cultures have rules for how to say no. While not as extreme as Japan, even people in the U.S. would find it rude to just respond with “no”. This is why websites often say something like “No thanks” instead of just “No” or an X in the first place!

 It’s not rude, but it is short. As web design advanced, more and more websites began including the context; instead of a simple “no thanks”, they’d say “No thanks, I don’t want to sign up”. The decline then sounds human without being overly presumptuous, and it became the new standard.

More importantly, while these longer versions sound more human than simply saying ‘no’, it’s also reminding the more impatient users of what the box is for. Even if they didn’t read the pop up, they read the decline option before they clicked it. They know a newsletter or coupon is available now. This is a tried-and-true method. It’s neutral, professional, and clear.

Forced To Lie

Website designers strongly recommend simply stating facts when writing out the line, instead of trying to make the user feel guilty for clicking ‘no’.“No Thanks, I don’t want your newsletter”, or “No Thanks, I don’t want to stay up to date on X” are certainly easy to guess if that user declined to sign up for the service. These are statements of fact.

But not everyone follows expert advice! Where websites put themselves in danger territory is when they try to get sassy, or smarmy with their decline option. Websites, for seemingly no reason, will imply that their users are stupid, and have ugly clothes, and that they must enjoy staying that way if they don’t agree with whatever the box is pushing. If someone in a real, physical store told you that when you declined to sign up for email coupons, you’d probably leave a negative review!

They’ll tell users that they must hate fun, or want to live in their own little world:

Or more. There’s more, and a ton are worse. Barely anybody likes this. And yet websites still try it so often that there’s a term for it: Clickshaming! There’s a hashtag on Twitter, there’s a subreddit on Reddit, and there are tons of websites showcasing the worst of the worst when it comes to clickshaming.

Emotional Response

The theory is that by inciting emotion, they’ll catch people who are on the fence.

Tell the customer a joke, make them laugh, and they’ll like you more. Act busy in front of a customer and they’ll feel pressured to decide faster. Link up with good causes, and the client will feel better buying from your store, because they’ll be supporting those good causes indirectly. Emotions are very heavily tied into sales, and the feelings a customer has before, during, and after the pitch determines whether or not they actually go through with it.

When a website says “We’ll hate to see you go!” They’re trying to pull an emotional response, so that you’re more likely to come back. A good website designer tries to make the website feel good and comfortable to use. The problem is that “haha, you’re not leaving without spending money, right?” is only a joke if the salesperson can tell that their potential buyer finds that funny, and even then they have to deliver it right, or else it sounds desperate. Sarcasm during a sale is a delicate thing. A human could tell when it would be appropriate to deliver that line to other humans. Putting “Aw, you hate saving money?” in the bottom corner of a dialogue box doesn’t carry that joking tone, and so it comes off really aggressively.

Even giving them the benefit of the doubt, reminding customers that your product can be expensive (and they could save money) isn’t exactly the brilliant strategy it seems on the surface. As mentioned above, the option to leave the dialogue box is sometimes the only option the user is even looking at – those people want to get back to scrolling. Imagine having to click ‘I hate saving money’ so you can look at things you’re not even sure you want to buy yet. If they don’t leave out of spite, suddenly the website is on an uphill battle to sell something to this specific user, who’s been primed to think about saving money.

Emotional response is not a guaranteed hit, especially when the emotion is negative. Clickshaming is a bad idea!

Sources:

http://www.ediplomat.com/np/cultural_etiquette/ce_jp.htm

https://www.business2community.com/email-marketing/digital-marketing-advice-how-to-avoid-rude-email-subscription-options-02159662

https://www.klaviyo.com/blog/email-pop-up-tips

https://philolu.com/2018/03/01/clickshaming/

https://blog.hubspot.com/sales/how-to-use-emotions-to-sell

Bad UI – Button Edition

Elizabeth Uncategorized September 17, 2021

Do you want to make a button that suuuuuucks?

1) Make Sure There’s no Context.

Some buttons are self explanatory. “Check out now” could only mean the button goes to the checkout page. “View Location” sometimes leads to a map, or sometimes it leads to text, but either way, the user knows they’ll gain information about the business’s location when they hit that button. It would be bad practice to make the button lead to something other than it’s label, and it’s pretty obvious, so it doesn’t happen too often.

Similarly, it’s bad practice to label the button and then have no additional information surrounding it. That happens more often!

“Bowhair Frogs” on a menu with no dropdown options means nothing to viewers who stumbled upon the site. “Download Now” when the page doesn’t have any information about the actual download makes it seem scammy. The same goes for “Sign up now.” Sign up for what? The end user could guess it’d for the newsletter or something, but it could also be nearly anything else. Sign up to the website, for an account, maybe? Context is crucial. If you want to do a bad job, leave the buttons completely stranded in an enormous blank field, with no relevant instructions or text, and let the user guess what the button does or what it’s for.

2) Make the Options Vague.

I’ve covered this before in previous articles, but it’s really hard to overstate how much content viewers depend on clear, concise wording to make their choices. Just like context, content matters! A dialogue box is useless after clicking a button if it doesn’t sufficiently elaborate on what the button does. Make your options as clear as you can – ‘more words and clearer’ is better than ‘less words and not clear enough’.

3) Make the Button Visually Unresponsive to Clicks.

You might have noticed that many buttons simulate being pushed down when you click or tap them. That’s good design! It gives the viewer vital information, by letting them know that the button has indeed registered their input.

If you want to confuse users or accidentally generate multiple inputs, make it unclear if the button’s registered their input. No color changes, no animations, no nothing. The user will know their order has gone through when they get the email, right? That’s what bad designers say. When checking out from smaller websites, you might notice a screen warning you not to click the button again, or not to navigate away from the page until it’s complete, and that’s because this is still a very real issue with payment portals. Impatient users or users with slow internet would hit the button multiple times. They’re not necessarily at fault – that’s exactly what you would do to a button in real life if you thought it hadn’t responded!

4) Make the Button Very Small.

Experts say that the smallest you should make a button is about 10 mm by 10 mm, or 26 px by 26 px. This is about the same area as the tip of an average person’s index finger. This is an absolute minimum size! Customers viewing your site on mobile literally will not be able to push the button if the button was any smaller – their phone could pick up the input around the button and could misunderstand what they’re asking it to do. It’s also harder to hit something if you can’t see exactly where it is, and that little micro-button is well hidden underneath the user’s finger.

4.5) Make Small Buttons Close Together

One of the things that makes shopping at Amazon very fast and smooth is that the buttons are all gigantic, and they’re all pretty far apart. People new to designing webpages for mobile might assume that putting their smaller yes/no buttons close together would make the mobile experience more pleasant, when in reality, it’s the opposite. People like some amount of spacing between buttons, especially if they’re small. You can have small buttons, and you can have buttons close together, but too small and too close creates an unpleasant user experience. Pick one!

5) Make it Unclear What Options the End User Has

Write the ‘exit’ option in white text, or put the ‘x’ in a very light gray in the upper right corner. Don’t put a background, don’t draw attention to it, wait for the user to scroll over it as they jiggle their mouse in a fit of rage. Similar rules apply to ‘go back’ and ‘cancel’ options. Ads do it all the time! Do you like ads?

You could also make the website’s default page a ‘sign-up’ option, and make the log in option small, at the bottom of the page, so users aren’t sure if they’re in the right spot to log into their account. Remember, most users don’t like to read, especially if they’re trying to get somewhere fast – sometimes, highlighting something is the only way the end user ever actually sees the option. If you want to irritate or confuse your users, make it unclear where they’re supposed to actually look!

Twitter does this right. Twitter has both their log-in and sign-up buttons on the same page, one right under the other, and they’re the same size. Even though the ‘sign up’ option is highlighted, the right button for logging in is directly underneath it, so the user’s eyes are still drawn to approximately the right area. Meanwhile, on other platforms with Google and Facebook’s new ‘log in with (PROGRAM)’ buttons, the ordinary log-in button sometimes gets shuffled to the bottom of the pile. You’ll see Sign Up, the spaces for email and password, Log in With Google, Log in With Facebook, and then finally, at the bottom, the regular login button. Which then takes users to the next page so they can, y’know, log in. This isn’t ideal design, especially if the website’s older than the Google option – users may accidentally create two accounts before they realize what they’re doing.

6) Make it Unclear What’s Clickable or Unclickable

Here’s an otherwise great example of a sign-up box. It only appeared halfway through the article, it has both an ‘X’ and an “I’m not interested” button, and it doesn’t take up the entire screen. The only possible issue is that the larger text doesn’t necessarily look like a button – but given the context, it doesn’t really have to look exactly like a button, and it does highlight when I hover over it. This is a good example. I know it’s a button when I interact with it.

How do you do it wrong? Hide text, don’t allow the text to highlight when the user hovers over it, or otherwise obscure its true nature.

You could also write unclickable/uninteractive text in underlined blue as emphasis, instead of just the underline. Is your website’s primary color blue? This is still a bad idea – users understand underlined blue to be hyperlink text, so if you really want to highlight, do it in your secondary color. You could give unclickable words a hover-over option, which sounds good for things like word definitions, but can get really frustrating on mobile. They see a word, they think it leads to another page, they click it. If the hover-over is poorly configured, it won’t do anything. Well-configured hover-overs can still be frustrating on small screens, so nailing other aspects of your web page is critical if you plan to use them. Make the experience as mobile friendly as possible, and the desktop aspects will follow.

Sources:

https://www.smashingmagazine.com/2012/02/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/

https://medium.com/nextux/design-better-buttons-6b64eb7f13bc