» All Posts «

Shiftx: Humanizing Web Design

Doug Gerber February 22, 2017 Branding & Design, Technology, Web Design & Development

Share Comment 0

This past weekend, Harvard Graduate School of Design sponsored Shiftx, a design conference that brought together several luminaries in the design field.

The one-day event was coordinated by Harvard Business School and Harvard College, and focused on the central theme of using recent shifts in design innovation to bring transformative change to fields including healthcare, fashion, education, and technology.

Designing for Humans

The speakers highlighted and reinforced recent methods and trends in human-centered design. They coalesced around themes of inclusivity, the democratization of technology, reframing the discovery process in identifying user pain points and success criteria, and cultivating trust into the framework of design. From the perspective of a web developer, this was an eye-opening experience.

As someone who takes the final concepts from designers and turns them into living websites, I found that this conference helped me to understand the transitional nature of taking information and creating a meaningful connection between the website and the user. Building websites is more than just code; it’s creating an intuitive mechanism that provides a comprehensive, sensorial approach to interactively deliver content. We want users to enjoy the experience of navigating our sites and, as contrived as this may sound, connect good emotions with good memories. The experience is an extension of you.

A website should feel welcoming, as if the user is being invited into someone’s home. At Jackrabbit, our designers do a great job of creating a welcoming and trusting space in their designs while clearly conveying our clients’ focus and intent. In turn, the developer team creates a living environment that reflects this space. The look and overall design of a website goes a long way towards making the user feel comfortable, but the devil is in the details, such as how it feels to hover over a link or button. For instance, there are many ways to show that an area may be clickable. This, however, is different from creating an experience where the user wants to click on the area. And the experience doesn’t stop there; what happens after the click?

Experiential Design

In the following example, I have a row of logo images. When I hover over them, my cursor changes from a pointer to a hand. This state change tells me that the image can be interacted with; I have no idea what’s going to happen when I click, but I expect something to happen. When I click, a box appears below and reveals information pertaining to the logo.

without animation

It’s a little jarring, right? It met expectations of something happening, but the delivery was abrupt. To smooth out this transition, we fade out the surrounding images to draw the focus of the user to the expanded content box, and add a little animation to ease the transition. I could just have the box pop back up and disappear, but that’s like slamming the door. Instead I apply the same animation in reverse order so that the box closes as smoothly as the way it opened. Another way to close the box is to hover over the “x” in the corner, which gives me a gentle wave, turns to a different theme color, and allows me to close the box in the same manner.

with animation

It’s a simple interaction, and doesn’t seem like it does a whole lot other than convey information. However, we don’t interact with objects in the real world in the same way. Car doors don’t suddenly open when we touch the handle. There’s the feel of the handle, the click of the lock, and the easy swing of the door, all within a quick response time. Similarly, these microinteractions are all an effort to humanize the usability of our websites. Design should inform and include the user and not feel like a burden. Technology implicitly promises and assumes expectations, and the design of that technology has to deliver in a meaningful way that makes the user feel connected.

0 Comments

There aren't currently any comments for this entry.

Leave a Comment