invisible design - the ux nirvana of responsive design and progressive enhancement

6
INVISIBLE DESIGN THE UX NIRVANA OF RESPONSIVE DESIGN AND PROGRESSIVE ENHANCEMENT HAL2L.COM • SEATTLE • MUNICH • PRAGUE • SHANGHAI

Upload: hackeragency

Post on 14-Jul-2015

311 views

Category:

Design


0 download

TRANSCRIPT

Page 1: Invisible Design - The UX Nirvana of Responsive Design and Progressive Enhancement

INVISIBLE DESIGNTHE UX NIRVANA OF RESPONSIVE DESIGN AND

PROGRESSIVE ENHANCEMENT

HAL2L.COM • SEATTLE • MUNICH • PRAGUE • SHANGHAI

Page 2: Invisible Design - The UX Nirvana of Responsive Design and Progressive Enhancement

Dieter Rams didn’t invent good design, but he described it. Well. So well that 30-odd years later, his “10 Principles Of Good Design” continue to ring true (with no signs of decay).

This is not an exegesis on Rams or his principles. That said, they offer a resoundingly good entree to our perspective on invisible design in the context of UX—especially as the technologies and functions available to designers allow for more and more control over the user’s experience from screen to screen, mobile to desktop to wearable—and from Leads to Loyalty.

IS YOUR DESIGN GOOD DESIGN?At the heart of good design is invisibility. Good design transcends aesthetics while living deep within how a product works and operates, manifesting itself in the look, functionality, feel and interface of the product—in how the user experiences the product. For our purposes, we’re not describing the realm of product or industrial design, but the well-traveled waters of email and site design. These properties are the most basic of digital structures; they are the products agencies spend much of their time designing and building for clients. And they are the properties most users spend the majority of their time interacting with.

At HackerAgency, we engineer and design with the goal of invisibility. Our aim is for all the decisions we make in font, tone, structure, function and form to fall away from the user’s experience. For the intent, function and UI to be so good that users take action, perform the desired task and move along the user pathway without even noticing how easy it was. For HackerAgency, invisible design is that place where the look falls away from the product, engineering a user experience with an almost unconscious feeling of comfort, ease and accomplishment.

DESIGN SHOULD DISAPPEAR

Page 3: Invisible Design - The UX Nirvana of Responsive Design and Progressive Enhancement

GET RESPONSIVE. DO IT NOW.

Responsive design, for sites as well as email, is about more than optimized viewing across devices and screen sizes. It’s about media queries adapting the content and function to the conditions of the device. And server-side components allowing faster loads over cellular networks. Plus, it’s about buttons replacing text links. :)

Put simply, it’s about creating a the best user experience possible, regardless of screen.

And when we talk about a Mobile-First approach—and progressive enhancement—it’s boils down to idea of pleasant accessibility. It’s about the user interacting with your site or email in an appropriate and useful way—and allowing the best functionality for whatever tech they’re employing at that moment.

It’s not about having them stop and notice how well you designed the site or email. Users don’t open sites and spastically resize the browser up and down to gauge and judge how well the content reconfigures or what adaptation occurs at which break points. We do that. Users don’t.

Bottom line: right now, responsive design is the best way to design a user experience that feels good and works well, no matter the device it’s experienced upon.

THE REALITY OF INVISIBLE DESIGNUsers just want things to feel right, function well and make it easy for them to do what they want to do. They usually only notice design when it fails to deliver one or more of these things.

Page 4: Invisible Design - The UX Nirvana of Responsive Design and Progressive Enhancement

FUNCTION INFORMS FUNCTIONALITY

progressive disclosure horizontal scroll persistent nav/button

Digital properties are about function. What is your intent in presenting your site or email to users? Is it a transaction? An enroll? An immersive experience? Before you begin designing, you must be clear about what specific tasks or goals you want the user to accomplish. And why.

This is where you’ll have to make some vital decisions. It’s also where progressive enhancement can (and should) help guide your decisions.

Progressive enhancement stresses accessibility, essentially offering functionality to your email or site from the ground up. What level of functionality is appropriate for the browser, screen size and/or device? How can you effectively layer additional functionality as the power of the user’s tech advances? And again, at the heart of your decisions: what will make it easiest for the user to accomplish the desired task?

With all the functionality CSS offers us (even in the body of an email), designers at HackerAgency ask not what they are capable of doing, but what is right to do for the user’s experience? The functional intent of the email or site leads us to good design—with progressive enhancement guiding what levels of functionality we layer on (and when).

What functionality is appropriate to help your user accomplish the task with minimal friction?

Page 5: Invisible Design - The UX Nirvana of Responsive Design and Progressive Enhancement

FOR THE FEELING OF

IT’S THERE

COMFORTFOR THE EASE OF

ACCOMPLISHMENTFOR OPTIMIZED EXPERIENCEON EVERY SCREENFOR DESIGN TO BESO GOODIT FALLS AWAY AND USERSDON’T EVEN NOTICE

WHY STRIVE FOR INVISIBILITY?

Page 6: Invisible Design - The UX Nirvana of Responsive Design and Progressive Enhancement

YOUR NEXT STEP

At HackerAgency, we are obsessed with results. We’re a global direct marketing agency with expertise across all media channels and a focus on the metrics that matter to the executive suite. Our success generating client ROI makes HackerAgency the leader in driving CRM programs and campaigns. From Leads to Loyalty, no agency on earth develops and deploys data-driven strategies and creative that engages and compels customers to take action the way HackerAgency does. We don’t just move the needle—we bury it.

If you’d like assistance in planning and executing your CRM acquisitions and/or retention marketing, contact Kristin Flor at 206.805.1500 or [email protected].