Articles tagged UI

image

It’s 2018. You’re making software. That means you’re making user experiences. And that means you’re dealing with UI designers. Even if you’re used to dealing with creatives in general, user experience design is still a more complex and nuanced engagement due to how directly involved the user is with that end experience, as well as the technology backing that experience. The UI team you hire is bringing creative, problem solving, design, interaction, and technology expertise to your project. And you need to manage that team and those skillsets while incorporating your own subject matter and product strategy expertise in a way that yields the best possible experience for your users. Basically, you don’t want your design feedback blowing the product up.

But your input will be required at many different points in the software-making process. Some of those points involve looking at designed mockups of what your website or app might look like. That can be an overwhelming or an underestimated task. We’re talking colors, fonts, organization of elements, page flows, interactive states, branding, imagery, and more. Even one seemingly innocuous piece of feedback can cascade into a less than ideal experience. Here are some tips for how to avoid that issue and get the most from your UI team.

Strategy vs. Tactics

As a stakeholder, you know your business and the specific business goals for this experience better than anyone in the room. That makes you invaluable to the end product. But that also makes you invaluable in a very specific way.

Giving strategic feedback instead of tactical feedback to a creative team helps them understand where a design might not be aligning with the business. If we only discuss feedback in terms of changing colors or fonts we’re not getting at the why a color or font should change. How does that color support our business goals? Is this font appropriate for our audience? How do the interactions on our site fit into a user’s workflow? Asking these types of questions of your creative team can go a long way to getting your app designed in a way that maximizes their expertise for compelling experiences and combines it seamlessly with your business goals.

Hierarchy vs. Size

The cliché design criticism is “make the logo bigger.” Which, of course, can be valid feedback. But instead of thinking about how big the logo should be right away, consider if the logo is the most important element on the screen.

That’s design hierarchy. Are the elements that are most important to your business and most important to your customers getting the right amount of attention in the right order?

Sharing what information is the most important to your message with the UI team can help them design a screen to draw the viewer’s eyes to the most important element in your message and then on to the next most important element, and so on, guiding them through the experience and the story. Sometimes this is done by making a logo bigger, but more often it is achieved by adjusting elements according to common Gestalt principals like proximity—adjusting the space between elements—continuation—visually connecting elements together—or similarity—grouping like elements.

Advertising Branding vs. Interface Branding

Most companies have thorough brand guidelines for print and advertising. However, most companies do not extend those guidelines to branding their digital applications. Often, this means the creative team needs to make assumptions and judgment calls as to how the brand should translate to a digital design.

We see this happen all the time. The UI team comes up with an innovative design that wields the brand in new ways, and the stakeholders are forced to kibosh it, not because they don’t like it or think that it’s innovative, but because they have no context for judging it. They feel it’s not in brand because there’s nowhere in the brand for it to be. It’s a tragedy.

The answer to that, obviously, is to extend your brand guidelines to user experiences, but in lieu of that, here are some general guidelines to consider with your UI team when translating a brand:

Color

One of the easiest ways to bring a brand to a digital platform is by implementing the colors of the existing brand. However, often, in digital applications, more colors are needed than exist in the brand. Digital applications may require more colors for error feedback, warnings, colors for alerting the user to changes, or large sets of colors to display data in visualizations. In that case, you should ask your UI team about the new colors and how they keep the brand’s essence intact, as opposed to judging the colors themselves based on vague personal aesthetics.

Typography

Years ago, you couldn’t use any font on the web except Arial. Today, more and more type designers license web versions of their fonts to be used in software and websites. Talk to your UI team about using the same fonts you use in other branded materials and securing the proper license. It’s worth the investment. However, if that isn’t a possibility, engage with your team and give them the freedom to put some thought behind what fonts will work best on a screen and fit with your existing brand.

Imagery

If your company already has a strategy for creating branded images across your existing materials, your UI team should be considering how to bring that over to your digital applications. When looking at design mockups, consider how imagery is being used, how it’s unique compared to the competition, and—just like every other design decision—how it supports your brand and your business strategy.

It’s 2018. You want to make intuitive, branded, and visually engaging software, and your UI team can get you there. But the process requires everyone involved to contribute according to their expertise. Ultimately, though, it’s your input around the business’s goals that will help your UI team make a great software experience for you and your customers.

Alex Carr is the Director of Creative Services at Maark, where he leads a team of illustrators and designers focused on marketing, branding, and product design for our clients.

Let’s Never Touch Anything Ever Again

At some point, the trend of everything as a device and the trend toward spatial interfaces must meet. That’s just Euclidean geometry. Or Calvinism. I always mix those up.

Of course, creating applications in the wake of either of these trends is difficult enough, but doing them at the point where they coalesce seems extremely daunting.

Enter Greenhouse. Its creators tout it as a “creative coding toolkit” for developers to more easily design unified spatial interface experiences that can move across devices. From the website:

Greenhouse is the only SDK available that enables creative coders and engineers to rapidly prototype spatial interfaces: multi-screen, multi-user, multi-device interfaces with gestural and spatial interaction. Graphics and geometry systems enable pixels to fluidly move and to be accurately rendered across any screen, plus networking and multi-application frameworks, which allow multiple users, applications, and machines to seamlessly interact.

The above video also comes from their website and shows various users working across multiple devices without touching them, moving elements from one screen to the next like conductors or wizards. It’s pretty cool, although the actions still seem overly deliberate and tentative. But that’s just the state of an art that hasn’t yet met the legal definition of life.

All I know is that right now I’m sitting at an archaic desk at the risk of blood clots and a shortened lifespan, pounding away awkwardly at a keyboard with wrists riddled with carpal tunnel. So the idea is exciting to me.

Since the Dawn of Marketing, companies have tried to get our attention. Tried to get in our homes. Tried to get in our heads. Intrusive bastards.

Then software came along, and suddenly we were living and working inside products in a way that we never really had before. I mean, sure you plough a field inside a John Deere tractor, but you’re relationship with that product is a bit more circumscribed than, say, your relationship with Microsoft Windows.

And then software became the portal to the Internet.

And then the Internet became the world.

And that made software our portal to the world.

Of course, there are uncountable interworking, siloed, and antagonistic software experiences for navigating this connected world. Apple is famous for attempting a high level of control of the connected experience with its products, but even that is pretty confined compared to how many software hoops must be jumped through in a connected world.

Lately, it seems as if companies want a little more, though.

Facebook Home wants to be our filter for the entire mobile experience, regardless of the device we use.

Xbox wants to be our filter for the entire home entertainment experience, regardless of our TV and set-top boxes.

And Google Glass, well, it wants to be the filter for our entire experience. Google was never one to think small.

There are a couple of ways you can cut this cake. Certainly, there’s something to be said for simplifying our interactions with an increasingly complex and connected world. But there is also something uncomfortable about everything we do reduced to data points for companies to sift and capitalize on. But we’ve always been willing to offer that for a certain level of returned value. Then there’s the whole danger of extreme parochialism where we can’t see outside the bounds of our own individual connected experiences. But we can be pretty parochial anyway without all that.

Maybe it’s just a matter of companies hitting that “right” balance between helpful doorman and manipulative creep…which I guess is to just give more than they take. Or at least seem to be giving more than they take.

But then again, when they are the filters for our experiences, “seem” takes on a whole new meaning.

I guess my mood today is “cynical” and “rambling.”

Photo credit: Brandon Cripps, Flickr

I Will Write this Post Again in Ten Years

It has become a long-hallowed writing tradition to write about how the written word is dead. Every decade it’s for a different reason. Every decade it’s an overreaction.

My turn.

Every device is getting smaller, which is great for the sake of convenience, but that means smaller buttons , whether physical or virtual, which means writing more than a few lines of text on that device is cumbersome and not worth the effort.

Everything’s going touchscreen, an amazing, intuitive interface for navigating and moving elements around. It’s a step forward in almost every way except text input, which is one of its lowest priorities.

Everything’s going multimedia, with pictures and videos being one of the predominant ways we communicate and consume content on the Internet.

Our correspondence is shortening to ludicrous levels. Twitter character limits, Facebook status updates, micro-blogging. We write as little as possible. And then we abbrvte even frthr.

Creating high-quality pictures and videos is becoming easier than writing an essay, thanks to software advances that have democratized those media, much like writing itself was democratized in the past.

Poor text.

All that’s left is for Dragon Naturally Speaking to come up with a program that transforms your spoken word into pictures and video.

As a writer, this entire post pains me.

Or, more accurately, as a borderline fogey, this entire post pains me.

I look forward to writing this post again in ten years.

Photo source: Crunchy69, Flickr

Minority Report for the Majority

I can’t wait until we finally get the interface technology from Minority Report…so that we can stop talking about getting the interface technology from Minority Report. When that 2002 Steven Spielberg movie hit, we were all entranced by the way Tom Cruise interacted with the digital world in real-world space. Aside from just looking cool, there were two reasons for that.

First, it just seemed so right. I mean, why am I using a semi-orb of plastic and a plank of buttons to navigate a screen in a totally different plane or, these days, why am I just using the surfaces of my fingertips to interact with digital space behind glass?

Mostly, though, the reason the tech was so fascinating was because the men behind it were actual MIT scientists, led by John Underkoffler, who had been experimenting with the idea in a much more primitive way and used the movie money almost as an R&D budget to forward progress on the idea enough to give the movie (and the technology) more of a reality.

And now the tech has made a much bigger leap into reality. The company Oblong, of which Underkoffler is the chief scientist, has finally commercialized some of that technology to make video and data more easily sortable and analyzable in a natural way. You can read more about that here.

Also, here’s a link to a 2010 TEDtalk from Underkoffler, where he talks through the ideas and progress from the pre- and post-Minority Report days and even demos the system for the audience.

The most exciting thing about this is how much more accessible the power of computers can be to the everyday person. Touchscreens made it so that an 18-month-old can intuitively navigate a computer system without ever having seen one before, so just imagine what real-world interfaces could do for people who have spent their entire lives interacting with the real world.