Rich Archer's blog

Accessibility & Digital Signs - Part 4 Accessible Design

Accessibility & Digital Signs - Designing Digital Signage for Everyone PART 4: Accessible Design When thinking about accessible design interactive kiosks often come to mind. Interactive kiosks offer designers a lot of options when it comes to accessibility. In the last infographic, we talked about what you should know and consider before setting out to design an accessible solution. In this part, we’ll look at how design can help make your kiosk accessible. MAKE YOUR KIOSK EASY TO USE - ICONS, CONTRAST & FOCUS If you’ve ever used an interactive kiosk and been a little unsure what to tap next, then you’ve experienced a bad interface design. Good UI design is vital to a positive user experience, no matter who the user is. You can make the user experience better for those with disabilities by adding a few features. AN ACCESSIBLE OPTION Omnivex Moxie software enables you to easily create a solution that allows the user to customize how the screen looks. Let’s start with making an accessibility option. This is as simple as adding a button that says ““Accessibility””, or even better, using an icon. Icons are a universal visual language (more on that later) and, from a design standpoint, much more visual and can save space. A symbol or icon or the word ““Accessibility”” - both are good ways to identify there’s something here to make this experience better. HIGH CONTRAST OPTION So what are some options and controls you can add to your Accessibility menu? Features that help with the most common visual impairments are a good place to start. Again, use an icon, letters, or both. Providing people the option to adjust the contract so they can more easily read, adds a lot to their user experience. It’s easy to build layouts in Moxie and data-bind properties, such as background, fill color, text color, and be able to switch modes around at the press of a button. ADJUSTABLE FONT SIZE Add some options to adjust the font size. Predefined sizes, such as Regular, Medium, Large give you more control. But you can also add buttons that increase or decrease the font size with each tap, and set a limit on the largest font size possible, just so your overall design is still usable and cohesive. Ideally, your design will already . COLOR SCHEMES Color to a computer is just a hex code, and with Omnivex Moxie software, it’s very easy to data-bind the color of elements in your design and have those values change with the tap of a button. So why not have some more color schemes for those who see color differently? Whether it’s a black and white mode or a color-safe mode. Blue and orange is a good color combination for people with color blindness. Blue is a great color to use, as it usually looks like blue to most people dealing with color blindness - so blue and orange, blue and brown are good choices. Avoid red and green, green and brown, green and blue. USING ICONS - ICONS ARE A UNIVERSAL VISUAL LANGUAGE A famous American graphic designer, Paul Rand, created a version of the IBM logo with icons, visually lining up an image of an eye and a bee before the letter M, in the same characteristic style as their iconic logo. It’s a famous example of how we can use icons to communicate. Icons are great to use in kiosks, and they can help with accessibility. Just remember to use icons that are universal - don’t make people guess what they mean. And remember - all the rules of color and contrast apply to your icons as well! Don’t use an icon that will be difficult for people to understand. When using icons that are universal, such as an accessibility icon or an emergency exit icon, try to keep the colors consistent, so they are instantly recognizable. Don’t change something that’s not broken. DESIGNING WAYFINDING APPLICATIONS FOR KIOSKS - MAKE SURE THE DIRECTIONS ARE ACCESSIBLE Wayfinding kiosks are a very common digital signage solution that is widely used in shopping malls, campuses, and large facilities. Wayfinding kiosks guide people to where they need to go, so make sure the directions you provide are accessible. If people have to use stairs to reach certain destinations, point out in the directions the route is not accessible. Or think about labeling the buttons for accessible destinations - this will clearly tell the user which routes are accessible and which routes are not. View PDF of interactive design infographic!

Accessibility & Digital Signs - Part 3 Interactive Design

Accessibility & Digital Signs - Designing Digital Signage for Everyone PART 3: Interactive Design When designing solutions for interactive kiosks, you have a bit more flexibility to customize and personalize the user experience, making the solution more accessible for everyone. With kiosk solutions built using Omnivex software, you can easily add options to move menu buttons to more accessible areas, integrate a high-contrast color option, or allow users to increase font size. MAKE YOUR KIOSK ACCESSIBLE - PLACEMENT MATTERS! Before you start designing your interactive digital signage solution, it’s a good idea to find out how it will be used. What kind of display? Will it have a portrait or landscape orientation? What kind of enclosure will it be encased in? For wheelchair accessibility, kiosks that are sloped, usually between 15 degrees and 20 degrees, are generally recommended. Sloped kiosks at this angle are generally easier to use. When a person is seated in a wheelchair, the maximum height for a safe forward reach is 48 inches. If using a standing vertical kiosk without any slope, ensure your design doesn’t require the user to reach higher than 48 inches, or lower than 15 inches. Know where it’s going to be, what the kiosk is going to be standing on, and determine where on your touch-screen your accessible area is. If mounting a touch-screen on a wall, make sure it does not protrude more than four inches from the wall. The minimum height should be 27 inches and the maximum height should be 80 inches. ALSO NOTE that these guides change slightly depending on whether there is an obstruction in front of a kiosk so, like any design project, get as much information up front as you can! MAKE YOUR SCREEN OPTIONS ACCESSIBLE This is where finding out all the information on placement, kiosk model, the environment it will be placed in - can be put to use to designing an interface that everyone can use. Let’s start with the accessible part of the screen. We know the maximum safe forward reach of someone sitting in a wheelchair is 48””, so it’s important that any options on the screen a user will need to tap are within the accessible 48”” area.   View PDF of interactive design infographic!

Accessibility & Digital Signs - Part 2 Typography

Accessibility & Digital Signs - Designing Digital Signage for Everyone PART 2: Typography As designers, it’s important to know who we are designing for. Who is our audience? Most importantly, who is our client’s audience? When thinking about typography and accessibility, think about how it may look to someone with a disability, whether they are visually impaired or dyslexic or any other disability, and how you can use your design skills to make your design more accessible. WHAT FONT SHOULD YOU USE? KNOWING YOUR AUDIENCE IS KEY There’s really only one rule when selecting a typeface to use - know your audience. If you have a brand guide, then someone has determined the font you should use, and they’ve done that by doing the research into your brand’s audience and messaging and determining the font that best aligns with your audience. So stick with your style guide’s font. If you are able to select a font, or trying to determine what font to use, then where do you start? The ADA does not offer a list of compliant fonts, but rather offers guidelines. Fonts used in signs should be sans-serif, with limited styles - no italics or obliques. Script and decorative typefaces are also not recommended. Decorative fonts can be fun, and they can be great to use in ads for events or products - again, know your audience. If you are creating a sign that communicates information to the public, such as directions, wayfinding, regulations, etc., then it’s best to choose a font that meets accessibility requirements. WHAT MAKES A FONT ACCESSIBLE? IT”S MORE THAN JUST A TYPE You’ve probably heard this piece of advice before (we’ve already said it above, in fact) - when designing for accessibility, it’s best to use a sans-serif font. And it’s sound advice. ADA standards state that public-facing signs should use a sans-serif font. But what makes sans-serif fonts more accessible? And are all serif fonts equal when it comes to accessibility? INDIVIDUAL CHARACTER RECOGNITION It’s not as simple as just choosing a sans-serif typeface over a serif typeface. That’s important, but choosing the right sans-serif typeface helps. The design of characters in a typeface go a long way in determining a font’s accessibility. Avoid typefaces that use mirror opposites for some characters as well - lowercase letters d and b tend to mirror, as do lowercase p and q letters. Typefaces that have distinguishing characteristics in these letters are more accessible. ASCENDERS & DESCENDERS AND WHY THEY”RE IMPORTANT If you’re a typography geek, you know what ascenders and descenders are. But if you’re not, ascenders are the parts of lowercase letters that extend beyond the x-height of a font. Descenders are parts of characters that descend below the baseline. For people with disabilities, some letters can be confusing. Properly designed characters with prominent ascenders and descenders aid in legibility, as they help make their characters easily identifiable. Selecting a font family with distinct ascenders and descenders is a great place to start. KERNING FOR ACCESSIBILITY - ADJUSTING THE SPACE BETWEEN We can’t talk about the importance of unique character design without also talking about the space between letters in a font. Kerning is the space between your letters and, just like uniquely designed characters, can help a great deal with your design’s legibility. Tight kerning typically results in a lower legibility. Letters lose their uniqueness and the separate letter shapes become harder to visualize and distinguish. In extreme examples, such as the one above, people without disabilities would experience reduced readability. Font designers spend a lot of time designing their characters, but when deciding on a font, check the natural spacing between the letters, and look at how some letters naturally line up with each other. LINE HEIGHT AND LINE WIDTH In addition to the space between letters being important, the space between line in a paragraph is also important. Try to use line spacing of at least 1.5 times the font size. While paragraphs of text are not common in most digital signage applications, they do exist, especially in news story feeds and some types of announcements. Also, try to keep the width of your lines between 40 and 55 characters when laying out. View PDF of typography infographic!  

Accessibility & Digital Signs - Part 1 Color in Design

Accessibility & Digital Signs - Designing Digital Signage for Everyone PART 1: Color in Design There’s a lot to think about when it comes to creating accessible digital designs. If part of our design isn’t clear or visible to part of our audience, then why is it there? Part of designing with color is using color correctly so that the key message is clearly legible to everyone. Setting proper contrast between elements in your design helps, so let’s take a look at a few tips on how you can use color to improve the accessibility of your designs. CONTRAST RATIO - CONSIDER CONTRAST WHEN USING COLOR Contrast is the difference in perceived brightness (or ““luminance””) between two colors. When dealing with multiple objects, such as letters on a background, it is expressed as a ratio, and ranges from 1:1 to 21:1. The ratio helps you determine how legible your text is. This is a standard used extensively in website design, and can easily be applied to digital signs. Check out the infographic below for more information and examples on contrast. HOW DOES COLOR BLINDNESS AFFECT YOUR DESIGN? AND HOW CAN CONTRAST HELP? There are three main types of color blindness - red-green, blue-yellow, and monochromacy. Red-green color blindness is the most common, and falls into different categories: Protanopia (people can see no shades of red), Protanomaly (people can see some shades of red), Deuteranopia (people can see no shades of green), and Deuteranomaly (people can see some shades of green). Check out the infographic below for more information and examples on color blindness and digital signage. SELECTING COLOR - SOME TIPS FOR SELECTING COLORS IN YOUR DESIGN  Focus on your contrast ratio - make sure your design meets the 4.5:1 ratio. Think of everyone when creating your design - avoid color combinations such as green and red, green and brown - think of the different types of color blindness and how your color combinations may be seen by someone with color blindness. Check your design against a color blindness simulator to see if parts are murky or hard to distinguish between one another. View PDF of infographic!

Typography Matters - Tips for Type in Digital SIgnage

Digital signage is a key to unlocking many doors. Better engagement, quick and simple information sharing, powerful wayfinding, and more are all at your fingertips - but only if you make the most of your innovative digital signage solutions with fonts that make best use of them. WHAT’S YOUR TYPE? SERIF & SANS-SERIF FONTS - it’s all in the name. Serif fonts have small projections (called ““serifs””) that finish a stroke of a letter. Popular in print, and generally considered easy to read, as the serifs guide your eye to the next letter. Sans-serif fonts do not have serifs at the end of a stroke. Popular in digital, as the clean lines of the letters are clear on a screen. Sans-serif fonts have become the go-to for digital communications, as it’s thought sans-serif fonts display better in pixels with their cleaner edges, making them easier to read on screen. Serifs typically didn’t render well in the early days of computing, but new technologies have changed that, and serif fonts are starting to be utilized more on screen. Still, sans-serif seems to be the more preferred font type for digital communications, and ADA guidelines do require all important text on signage to be in a sans-serif font, and readability most likely is the reason. FONT SIZE MATTERS - SCREENS & RESOLUTION & AUDIENCE - oh my! There’s a few things to think about when trying to determine a good font size to use for your digital signage. Unfortunately, there’s no magic font size that works best for every layout, as digital screens vary in size and resolution. So how do you decide what font size to set? Generally, it’s a safe bet that small text will most likely not be readable, as the audience for digital signs is usually a good distance away from the screen. Larger text is usually better and ensures your message gets out there. Most applications use points as the unit of measure for text. When designing for print, designers know that 72 points is equal to one inch on paper - which means a font set to 72 points will be one inch in height when printed. But digital layouts don’t use inches as a unit of measure, they use pixels. So how do you determine the size of the text in pixels? POINTS TO PIXELS - a simple calculation. If you want to figure out how high your text will be in pixels, there’s a simple formula you can use - multiply your font size by 0.722. This formula gives you the height of your chosen font size in pixels in a standard one-to-one pixel ratio. If you’re designing for a final resolution of 1920 by 1080, a one-to-one ratio means your layout is also 1920 by 1080. But knowing how many pixels high your font will be can help you with your layout. RESOLUTION - how many pixels are you dealing with? Resolution is the number of pixels in an image. Standard HD screens have a resolution of 1920 by 1080 pixels, and this is a common layout size for digital signs. Set your font size relative to your overall layout size, and remember -- larger text is more readable. KNOW YOUR AUDIENCE - make sure your message is seen. Knowing your audience is important to ensuring your sign is readable and your message is heard. How far away are they? How big is the screen they are looking at? All are important factors to consider when trying to determine an appropriate font size. TO CAPITALIZE OR NOT TO CAPITALIZE - USING CASING EFFECTIVELY - does it make a difference? Studies have shown that all uppercase lettering reduced reading times by as much as 20%. Other studies have shown all uppercase lettering is easier to read. So what do you do? If you want to use all uppercase text, go for it! Just be conservative, and use it for text shorter than one line, such as headlines or labels and dates. It will stand out and provide the impact you’re looking for. FONTS, FONTS EVERYWHERE - BUT NOT IN YOUR LAYOUTS - keep the number of fonts to 2, 3 max. Try to limit the number of fonts you use to two, three max. Using more will result in unnecessary visual clutter and a less readable sign. Try using a sans-serif for headings and a serif for body, or use different weights of the same typeface. LESS IS MORE - KEEP IT SIMPLE - reduce clutter in your copy. It doesn’t take a paragraph to say what you could communicate in one sentence.   View infographic as PDF.

Digital Signage 101: Learning to Think Like a Designer

It wasn’t in the job description when you accepted your position, nor did you study the topic in college. But suddenly you find yourself in charge of your business’s digital signage. Are you prepared? You associate digital signage with graphic design. You associate graphic design with art. But is that right? And if it is, oh man, you’re in trouble—because an artist is the last thing you’d call yourself, at least in public or on your LinkedIn page. But hold on. You’ll be all right. With a slight shift in your thinking, you can likely handle many of your digital signage needs on your own. Crystal Clear Messaging The first thing to keep in mind is that while art is subjective, design is definitely objective. A painting can mean different things to different people and still be considered a great painting. In fact, the possibility for multiple, even contradictory interpretations may be one of the painting’s charms! In digital design, by contrast, such ambiguity only leads to confusion. Your message should be clear and easy to understand and crafted for a specific audience. Cool, vivid, stylish, or even flashy—these characteristics aren’t good enough by themselves. Their only worth is in their ability to clearly convey your message to the people who need it. So, before starting your next digital signage project, clearly identify who it is you’re trying to communicate with and what it is you want that person (or people) to do. Let the answers to these questions guide you in all of your design decisions.   Easier said than done, of course. The designers who succeed create good memories and strong attention spans. It’s those moments when designers forget or lose track of either purpose or audience that things go off-topic. So tape it to the bathroom mirror: everything you do in design should be to accommodate the goal you are trying to achieve. That isn’t to say that those in digital communications can’t be creative. Designers are problem-solvers—the most creative of the creative-types out there. They’re also extremely versatile, able to quickly transfer their skills to a variety of mediums: digital, print, UI/UX, Motion Graphics. As the famous designer Massimo Vignelli once said: “If you can design one thing, you can design everything.” Omnivex Can Help Omnivex offers complete digital communications solutions that not only meet but exceed our customers’ expectations. Services include consulting, project management, creative design, technical design, hardware selection, installation, training, and technical account management. Our unparalleled product expertise and experience ensure our customers receive the best solution for the best possible outcome.

Digital Storytelling with Data

In September 2020 Omnivex hosted a webinar entitled "Digital Storytelling with Data" featuring Giorgia Lupi of Pentagram. She is an information designer whose work takes a humanistic approach to data. In her practice, Giorgia challenges the impersonality of data, designing engaging visual narratives that reconnect numbers to what they stand for: stories, people, ideas. Lupi was born in Italy and received her Master’s Degree in architecture at Facoltà di Architettura at Università di Ferrara and her Doctorate in Design at Politecnico di Milano, where she focused on information mapping. In 2011, she co-founded Accurat, an acclaimed data-driven research, design and innovation firm with offices in Milan and New York. She joined Pentagram as a partner in 2019. Every day Giorgia and her team, shape and design the different ways that clients access different types of information. They translate numbers into images, through data visualizations and through building interactive and digital experiences with this visualization. Watch the webinar below to learn more about Giorgia and how she approaches “Digital Storytelling with Data.”      

Ultimate Guide to Designing Awesome Digital Signage

The medium changes, art remains. The digital age has brought an untold number of new opportunities to artists. In the 1600’s an artist might sculpt clay or paint on large canvas. Today, some of the best artists are creating digital animations or designing apps.   Digital signage is one of those evolving mediums. It is an interesting mix of the traditional and the new age. While the concept of a sign is as old as civilization itself, a linked digital communications platform is something entirely new. Which means that if you’re reading this, you are working in somewhat uncharted territory. Never fear! The right designs are as aesthetically oriented as they are utilitarian. This necessity for form and function means that experienced professionals rely on a tightly knit group of core concepts to create masterpieces that pass internal review and look amazing in the field. Wait, what if you aren’t a digital design expert but have a network of digital signs you are tasked with creating content for – where do you start? Here’s The Ultimate Guide to Designing Awesome Digital Signage. Do Your Research The first facet of creating the perfect digital communication design is research! Start with a brand style guide and required content. Most organizations have brand guidelines and these are important for gaining insight into the colors and visual style considered acceptable by your company. If a brand guide is unavailable, it’s a good idea to create one. Use the guide to define color schemes, fonts, and rules around logo usage for your digital signage. Next, think about what you are trying to communicate and consider how that information is currently shared. Who is the audience? What are the important messages and content? What systems/feeds will the data and information on the digital signs come from? Create a Realistic Outline Outline exactly what kind of content is going to be included in the digital content solution. This provides insight into the scope of the project and how the material will be seen. One approach is to use a Content Matrix that you fill out with a comprehensive list of the different type of content each screen will display. This is important for designing the layouts for different screen sizes. Play Around Sketch Some Stuff Now comes the fun part! Start brainstorming potential ideas and putting pen to paper. It is a good idea to come up with several alternative designs and get input early in the process. Once the general details are mapped out it is important to set a timeline to keep the project on track. Think About Lorem Ipsum, I Mean Fonts Once you have agreed on the deliverables and rough outlines, start to research fonts. It is common to use San Serif fonts for headings and pair them with Serif fonts for body copy. Also, be sure to consider casing. When our eyes see all upper-case letters, it can be harder for them to make out the shape of the word because the texts become all blocks. Put Yourself in the Shoes Of An Observer Keep viewing distance in mind when creating your final design. A one-inch high font size is visible from around 20-25 feet. Think about where your audience will be standing and how they will be interacting with the message. Pixel density and monitor size also play crucial roles in the final visibility of the design. Use simple color contrasts and avoid overwhelming your audience. There is a fine line between a design that “pops” and one that is an eyesore. Put Everything Together and Present Gather all of your mockups get feedback. Ask yourself: Have I explored ideas fully? Have I given every idea I had a chance? Get some feedback. What do people like? What do people not like. Don’t take the feedback personal. Think of it as all objective. Afterwards, finalize the mockups for every single screen size. I do these in Photoshop at 72 dpi, 1920 by 1080 aspect ratio. Then it is time to start building. Think about how much of this can you can do in your Omnivex Moxie software. This make the design a little more flexible and a little easier to use. Now you should be ready to publish some killer designs! Omnivex is Here to Help Get an Omnivex digital design expert to help, visit https://www.omnivex.com/services today!

Why Typography Matters in Design

You’ve worked hard to get to where you are with your signage project. With your team, you have decided on just the right copy. Perhaps you’ve gone through several color choices to land on just the right hue. No doubt it has been a big project. Unfortunately, all of this work you put into relaying your message can be in vain if your audience never gets it. I recently gave a presentation on the how typography helps achieve essential design goals. Let's dive into some of the insights and tips we discussed in that lesson to get a fuller understanding of the importance of typography. Cut the Extraneous Input In my webinar on this topic, I showed a digital sign filled with all kinds of problems. If I hadn’t been presenting on it, I would have wanted to avoid it altogether. The sign wasn’t the problem, of course, the typography was. As a reader, it was nearly impossible to tell what the designers wanted me to get from the piece. There was no immediately apparent hierarchy that could have signaled to my brain what information was necessary and what was less so. The core of the problem was that there was too much on it. To better serve the audience, I would recommend cutting everything that does not communicate information. If it doesn’t get us to the preferred condition, let go of it. Typography Tips Effective typography tells the audience what's the most essential information on the screen before they even realize it. In fact, the best typography should go unnoticed by those who don’t love design. It should work seamlessly. Here are a few ways to make that happen: Check Your Brand Guide Does your digital signage match the rest of your brand, or does it seem out of place? An excellent brand guide tells you what fonts, colors, size, and spacing to use. If you do not have a brand guide yet, take this opportunity to build one. Stick to Sans Serif In your brand guide, you may have both serif and sans serif fonts. Serifs are the little marks at the ends of letters. Sans serif fonts, like Arial, do not have these marks. For digital signage, it’s typically best to stick to sans serif fonts, as they tend to be more readable. Pair Fonts If your sign needs to convey a lot of information, you need to make a hierarchy that’s easy for readers to identify. Consider using your sans serif fonts as headers and serif fonts as body text. When in doubt, use Arial. Establish a set of rules about this hierarchy or consult your brand guide. Remember that you can also use different weights, like bold, to communicate the visual authority. Three-Font Max It’s great to pair fonts, but don’t overdo it. Try to stick to just two or three fonts per project. Too many can make the screen chaotic, like in the example above. Font Size Matters In the digital signage world, the size of the typography is key to readability. If you're not sure, go bigger. Think about the distance the sign will be from your audience. If they are about 20 to 25 feet away, consider a one-inch height. The further away you need your audience to be, the bigger the font needs to be. Consider Casing At first thought, it may seem like a great idea to use all-caps on your sign. However, that can make it difficult for people to see the full shape of the word. When possible, avoid typing whole words in upper-case. If you need to communicate that a particular piece of information is vital, try a different weight instead. Thoughts on Spacing Spacing is perhaps the most crucial part of making your typography useful. In my work, I use line heights to guide my spacing choices. For example, if you have big chunks of text, you may want to put two line heights in between each. Furthermore, you can use a grid to ensure that your spacing is even. If spacing is even slightly uneven, it can be a significant distraction. Play with your alignment a little, but know when to stop fiddling with it. Less is More Don’t take a paragraph to say what you could communicate with one sentence.   Read our PDF on Fonts, Colors and Contrast!

Podcast - Create Better Digital Signage By Blending Data with Design

Designing today’s digital signage is more than thinking about filling the screen. It’s about the how and why of the information and data being presented. (And actually, don’t fill the screen. White space is your friend.) Pro AV Podcast host Shelby Skrhak sat down with Rich Archer, Creative Lead at Omnivex, for a nuts and bolts discussion about the philosophy of design and how data makes the difference in effective and good-looking digital signage. Archer joined the design team at Omnivex three years ago, after spending two decades in design, marketing, and communications. With an educational background in architecture and experience in graphic design, Archer saw an interesting intersection of two schools of design thought coming together in digital signage. “I don’t think I could find a better merge of data and design than digital signage with the applications of it we build here at Omnivex,” Archer said. Archer uses this blend to influence his design approach and offers tips for doing the same. “Thinking of the how and why of graphic design was just like thinking of the how and why of architecture for me,” Archer said. “Thinking about the how and why we build houses for certain scenarios, clients, climates… that applies here.”    

Pages

Subscribe to RSS - Rich Archer's blog