DEV Community: invot

How to Know Thy User

invot — Mon, 09 Mar 2020 19:34:28 +0000

More often than not, the person using an application is represented by an icon that’s profoundly vague. It's a monotone stamp, devoid of any expression or recognizable features. This icon could not be further from the truth. The User is a unique individual with their own set of expertise and experience. They think. They feel. They probably drink less coffee than I do.

So I'd like to hear your feedback on how you go about getting to know thy user.

How do I best communicate with my hallowed Users and develop a relationship with them that's advantageous towards my goals?
What is important for me to know about them? Monitor size? Blood type? Favorite band? What, no matter the project, is essential knowledge? What else falls under the "it depends" category?
Which tools are available to make this process awesome for everyone? What is a "must-have" for creating that link between you and the User group?

What Chickens Teach Us About Color Psychology

invot — Mon, 10 Feb 2020 19:48:45 +0000

We like to think that we are the masters of our own destiny: that dspite a constant blitzkrieg of flashy, modern-world stimulation, we have sole governance over our thoughts and feelings. Our minds are a private, impenetrable chamber from which our thoughts spring forth. Our hearts and minds are inside of us. They belong to us. The outside world can't lay dominance over these things. Right?

We like to think this. A world where our wills can bend and fold to the whims of whatever stimuli we come across - now that's scary. Can a clever TV commercial really convince people to eat a hamburger? Can a mediocre, otherwise-uninteresting book actually force someone to murder John Lennon? Can the mere sight of a particular color change the way we think, feel, and behave?

I'd like to say no. But I can't. Because chickens wear sunglasses.

Let me explain:

During the 1950's, farmers realized that raising chickens under red light yielded a multitude of benefits: The chickens were less aggressive. They were happier, friendlier, and more productive. Not only did these chickens eat less, they also produced more eggs. Additionally, chickens basking under red lights were far less likely to engage in the pesky habit of cannibalizing one-another.

In short, happy chickens bathed in red light means larger profits for the farm owner. Unfortunately, the farm workers were not very happy working under red lights, as they struggled to see properly. So farmers devised an alternative approach: tiny, rose-tinted glasses.

This eyeware quickly saturated the industry. Afterwards, the price to produce an egg dropped to below a third of a cent. An entire industry had been forever changed.

So, if something as simple as red lenses can have such a profound psychological effect on chickens, could the same thing happen with people? Are we any wiser than chickens wearing sunglasses?

According to interior decorators, the answer is no.

Something as simple as the color of a wall can affect the way people behave, and how they see the world around them.

"Red is never boring," proclaims interior designer Denna McLaughlin. "A couple of big red chairs are inviting ... I also love red for drapery … it gives the room a soft red glow that makes people want to be together." Like chickens, seeing red invokes a clear emotional response in people. But unlike chickens, the color of blood doesn't always placate us. In a study where prison cells were painted various colors, it was found pink walls reduced aggressive behavior in inmates the most. Red, inversely, was associated with an increase in aggressive behavior.

"Color is all around us and even in our vocabulary. We say we feel ‘blue'," says interior designer and color expert Elaine Ryan. Colors and emotions are deeply intertwined in our psyche. Walking into a room decorated in blue can have a surprising impact: In these rooms conversions are quieter, workers are more productive, and pulse rates lower. Painting the walls blue will result in the room appearing smaller. Installing a blue floor will result in people feeling less hungry. This association between color and emotion reaches so deeply within us, “feeling blue” can literally prevent us from seeing other colors.

We’ve studied this phenomena since the Middle Ages, and scientists continue to study it today:

In 1996, scientists discovered the color of a placebo pills is reported to be a factor in their effectiveness.
In 2000, the city of Glasgow installed blue street lighting in certain neighborhoods and subsequently reported a reduced crime rate in those areas.
In 2014, scientists noticed that the color red affects time perception in men, but not in women.

It is a fact that our environment can affect our mood, our productivity and our creativity. Yet, this doesn't mean we cannot likewise influence our environment. The colors in our world definitely color us, so it’s important we deliberately color our world in return. Understanding how our surroundings impact our minds allows us to better enforce the independence of our thought.

Take a moment to realize that what you're feeling, and what other's feel too, is part of a collaborative effort between every creative force in the universe. When José Ortega y Gasset said “I am I, and my circumstance”, he was probably not thinking about chickens in sunglasses. However, little things, like the color of your computer's desktop wallpaper, can effect how you feel about your life overall. So don't only be be mindful of what you create, but also be mindful of the company you keep. What's around you is also inside of you.

Though it may be nice to believe that our minds are a fortress - completely unaffected by our surroundings - it's simply not true. And if someone ever asks me how I could possibly know that with such certainty, my answer is simple:

"because chickens wear sunglasses."

12 Tips to Improve Accessibility

invot — Thu, 28 Feb 2019 20:07:59 +0000

It’s a common assumption that accessibility is only for people with disabilities. Though individuals with visual, auditory, physical, speech, cognitive and neurological disabilities should always be kept in mind, an accessible web should be designed for, and benefit, everyone. People with or without disabilities. Web users and web developers. Keep in mind that peoples' needs and preferences are wildly diverse. An accessible web gives your users the flexibility to access digital materials in whatever way they need or want to.

Concepts to Keep in Mind

Human beings are all different and diverse. Just as we celebrate the diversity of individuals in a cultural context, so should we design technologies that take diverse needs and preferences into account.

Accessible design is innovative design. The same design principles that make technologies accessible — semantic mark-up, intuitive information hierarchy, machine-readable text — are also principles that promote mobile design and a semantic web.

Technology has the potential to be a great equalizer — but inaccessible technology only further excludes people. Let’s embrace the potential of technology to let people be as independent, self-sufficient, and connected as possible.

The 12 Methods to Improve Accessibility

Below you will find a list of some key principles of accessible design. Most accessibility principles can be implemented very easily and will not impact the overall “look and feel” of your web site.

Provide appropriate alternative text

Alternative text provides a textual alternative to non-text content (such as pictures and images) in web pages. It is especially helpful for people who are blind and rely on a screen reader to have the content of the website read to them.
Provide appropriate document structure

Headings, lists, and other structural elements provide meaning and structure to web pages. They can also facilitate keyboard navigation within the page.
Provide headers for data tables

Tables are used online for layout and to organize data. Tables that are used to organize tabular data should have appropriate table headers (the
element). Data cells should be associated with their appropriate headers, making it easier for screen reader users to navigate and understand the data table.
Ensure users can complete and submit all forms

Ensure that every form element (text field, checkbox, dropdown list, etc.) has a label and make sure that label is associated to the correct form element using the element. Also make sure the user can submit the form and recover from any errors, such as the failure to fill in all required fields.
Ensure links make sense out of context

Every link should make sense if the link text is read by itself. Screen reader users may choose to read only the links on a web page. Certain phrases like “click here” and “more” must be avoided.
Caption and/or provide transcripts for media

Videos and live audio must have captions and a transcript. With archived audio, a transcription may be sufficient.
Ensure accessibility of non-HTML content, including PDF files, Microsoft Word documents, PowerPoint presentations and Adobe Flash content

In addition to all of the other principles listed here, PDF documents and other non-HTML content must be as accessible as possible. If you cannot make it accessible, consider using HTML instead or, at the very least, provide an accessible alternative. PDF documents should also include a series of tags to make it more accessible. A tagged PDF file looks the same, but it is almost always more accessible to a person using a screen reader.
Allow users to skip repetitive elements on the page

You should provide a method that allows users to skip navigation or other elements that repeat on every page. This is usually accomplished by providing a “Skip to Main Content,” or “Skip Navigation” link at the top of the page which jumps to the main content of the page.
Do not rely on color alone to convey meaning

The use of color can enhance comprehension, but do not use color alone to convey information. That information may not be available to a person who is colorblind and will be unavailable to screen reader users.
Make sure content is clearly written and easy to read

There are many ways to make your content easier to understand. Write clearly, use clear fonts, and use headings and lists appropriately.
Make JavaScript accessible

Ensure that JavaScript event handlers are device independent (e.g., they do not require the use of a mouse) and make sure that your page does not rely on JavaScript to function.
Design to standards

Ensure that every page is fully-functional even when the stylesheets are disabled. HTML compliant and accessible pages are more robust and provide better search engine optimization. Cascading Style Sheets (CSS) allow you to separate content from presentation. This provides more flexibility and accessibility of your content.

Dr Browsersupport: Or How I Learned to Stop Worrying and Target Evergreen Browsers

invot — Thu, 28 Feb 2019 20:03:05 +0000

As a developer, your work is your art, and you want to share it with the world. After countless hours, you polish and perfect your work. It's beautiful. It's ready.

This is why there’s no worse feeling than when a customer opens a link to your project and, with a quick poof, they’re staring at a scrambled rendition of your magnum opus. Both of you wonder why this is happening, but it quickly hits you: For whichever reason, your client has failed to sever ties with the dreaded beast that is Internet Explorer. They later mention the site also looks “off” on their nephew’s Tamagotchi.

It’s a delicate tightrope we walk as developers: we want to build rich, cutting-edge experiences while at the same time invite everyone to the party. In a world where consumers are unsure what a computer even is anymore, where people can access the web from their mirrors, watches, and even their shoes, how can we ensure we are providing the best experience to everyone? And how can we politely break the news to those holding on to their dusty 386 tower that we need to move on?

For most developers the concept of Cross-Browser Testing is nothing new. In recent years, as web rendering engines have largely found consensus on how to operate, it’s becoming a more permissible task to avoid. What renders properly in Chrome will likely render just the same in Firefox, Edge, and Safari (on OSX anyway). That is because all these browsers share a common trait: They’re Evergreen.

The term "evergreen" refers to the release strategy. Evergreen browsers are updated frequently in the background, constantly aligning their compliance with the latest Web Standards and also adding proprietary features. The version of an evergreen browser lost its importance, because an evergreen browser is expected to run on the most recent version.

What is an Evergreen Browser? - Adam Bien

The reasons to keep your browser up-to-date are far-and-wide. However, there are a few reasons why someone might browse through the nostalgic lens of IE9 or Netscape: they either don’t know they need to update or they don’t know how. The majority of the sites they visit may still be functional, and may provide no cue that anything is wrong, though the console quietly fills with errors behind-the-scenes. Nobody told them how or why they should use a better browser!

Developing modern web applications that maintain compatibility with older browsers is admirable, but it ultimately leaves your projects stuck in the long-forgotten age of MySpace. New technologies exist so we can use them, not just supplement their functionality with polyfills.

Prompting to Update

Web usage statistics show that a vast majority of web users have already adopted an Evergreen browser. For desktop users, all new machines come with an Evergreen browser pre-installed. For mobile devices, they are the only option. In fact, as of January 2019, browsers that do not auto-update account for less than 2% of web traffic.

However, this 2% should not be brushed off so quickly. It’s important that we build a better web for everyone. So, for anyone running an unsupported browser, it’s important to inform users to upgrade.

By either prompting the user that your application will not work properly in an unsupported browser, or by flat-out barring their access with a prompt, you’re drawing a hard line in the sand that needs to exist: The world is constantly changing. The world-wide-web is changing even faster. Update or be left behind. It’s dangerous not to.

Browser Sniffing

Browser sniffing (also known as browser detection) is a set of techniques used to determine the web browser a visitor is using, and to serve browser-appropriate content to the visitor. Though this practice is still somewhat common, its usefulness is exclusive to non-evergreen browsers.

Older developers might recall the most common way to employ browser detection. IE allowed developers to target older versions using conditional comments. For the time, it was a glorious work-around to the massive inconsistencies that existed between versions.

<!DOCTYPE html>
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->

The example above applies a conditional class to the HTML element, allowing you to load stylesheets, scripts, and other assets that target a specific version of a browser.

Feature Detection

Thankfully, the web is now a very different place. Versioning is much less meaningful in newer browsers. Developers don’t write applications to spec for a specific browser. Instead, they employ specific technologies, or features. Only browsers that support that set of features can properly run their software.

Feature detection (also feature testing) is a technique used for handling differences between runtime environments (typically web browsers or user agents), by programmatically testing for clues that the environment may or may not offer certain functionality. Feature detection is arguably more reliable and future-proof than other techniques like browser sniffing and browser-specific CSS hacks.

if ("geolocation" in navigator) {
  navigator.geolocation.getCurrentPosition(function(position) {
    // show the location on a map, perhaps using the Google Maps API
  });
} else {
  // Give the user a choice of static maps instead 
  // Or prompt them to upgarde their browser
}

Feature detection allows software to take an inventory of the technologies it uses, allows for graceful degradation, and can provide detailed reasons as to why something is unsupported in the User's current environment – along with detailed steps on how to address the issue.

Final Words

It’s hard roping off your work from a certain audience, prompting them to instead adhere to your standards. Something about forcing a user to do something to their system feels very… un-developery. But the importance of this is paramount: Polyfills only go so far, and security issues abound in older browsers. Giving users a free pass to use dangerously outdated technology includes a hefty price-tag for all of us. The amount of additional code required to run a modern site in a non-modern browser can double its footprint and slow the experience for everyone - even those using modern browsers. Let’s use the time we’ve traditionally spent crying over IE’s strange implementation of web technologies and instead: develop.

Resources

Modernizr is a popular feature detection library that tells you what HTML, CSS and JavaScript features your user’s browser has to offer.
Feature.js is another fast, simple and lightweight browser feature detection library written in plain JavaScript.
has.js is another popular alternative for feature detection.
MDN’s Web Docs offers a great tutorial on how to implement feature detection into your project.
feature-detect is a node package that provides feature detection support for Node.js or Io.js compatible environments. It is not intended to provide feature detection support in browser environments.