Exploring Humanistic UI

The term “humanistic” means to have a strong interest in or concern for human welfare and dignity. In design, we’ve used this phrase to describe fonts that seem like they could have been handwritten or have a strong root in calligraphy. Usually a sans serif, any font that is more personal and less robotic can be classified as humanistic. With open forms that lead the eye horizontally, humanistic fonts not only seem friendly but work better for the reader, as they are more readable than a lot of other fonts in smaller and longer bodies of text.

The idea of humanistic typography has been around for a while (basically since the invention of moveable type), but as digital design moves forward we are seeing trends of human-centered design in our field as well. There are more and more examples of web design that are not only more pleasing to the eye, but work better for the human that is experiencing them.

In my last article, we touched briefly on humanistic dialogue and how a simple friendly tone can have a very positive effect. However, friendly dialogue is just one component of a humanistic User Interface. User Interface, or UI, is basically all the design elements of a website: colors, typography, buttons, language; pretty much everything you see and interact with on a page. Not to be confused with User Experience, or UX, which is the more research-based study of how a user navigates through a site. While UI and UX intertwine and work together, UX usually deals more with wireframes.

A great example of humanistic UI is TurboTax. After a few years of slowing business, the company decided to have a total redesign in 2013. Year-tenured vice president Kurt Walecki began by assigning all 700 TurboTax employees to take 2 days out of the San Diego offices, go out into the field and talk to their key client- pretty much anyone in America. After surveying 1,400 residents of varying socioeconomic statuses, they found what Turbo Tax was missing: a tailored customer experience. According to Suzanne Pellican, vice president of experience design at Intuit, TurboTax’s core principle is to “have deep empathy for your customer.” Brad Smith, CEO of Intuit also stated, “We needed to think about emotions—how customers felt about our products and whether they take pleasure in using them.” What makes the site great is that it is unique to each user. I think today you can still see evidence of that human connection that they made in 2013.

Some examples of this humanistic UI on TurboTax are reassuring popup messages to nudge you along the process, expressionistic icons, colors that are bright enough to evoke happiness but also muted enough to not be stressful, a friendly rounded san serif typeface (Avenir) that works well on both screen and in print, card-based call to actions (or CTA’s), ease of going back a step/ saving your progress… and much more. All these elements make us feel that we are really having a two-way conversation with the site rather than just reading a long page.

(Thanks to Michael Moore for Invision for imagery)

*Fun fact, Avenir translates to “future” in French. Pretty fitting, right?

Along with TurboTax, some other examples of sites that I find friendly are:

Headspace

The large, easy to read typography, ample negative space, simplified illustrations, subtle motion, and conversational phrasing makes this site feel very organic. As you scroll down, illustrations appear and background elements move, making you feel like you are really interacting with the page.

(Thanks to Headspace for imagery)

Slack

Again this site evokes humanistic qualities with its lively illustrations and friendly typography. And we see an example of conversational dialogue in the menu item where the question is asked “Why Slack?” When clicked, that question is answered by the H1.

(Thanks to Slack for imagery)

One Shared House

This site feels very conversational. When “Watch the Documentary” is clicked, we are prompted with a message to sit back and relax. How humanistic is that?

(Thanks to One Shared House for imagery)

There are many variables that make up humanistic UI. One large component we’ve talked about is humanistic dialogue: language that feels like a natural conversation. Another is good user flow; it should be clear what the customer’s next step should be. This can be accomplished with transparent CTA’s, straightforward directions, and a (seemingly) simple layout. And of course humanistic visuals like illustrations and optimistic colors will make for a more welcoming experience. If we feel like we are having open interactions, that gives the site that much more depth and also gives the user a sense of trust – with synergy comes a better user experience. And if we can make something like doing taxes so enjoyable, imagine how much we could do with other everyday experiences, like online grocery shopping or paying bills? The limit does not exist!