As Graphic Designers, we are often the first bridge between a project’s concepts and its earliest visual assets, and because of this, we must be completely mindful of our client’s goals. The easily overlooked second point is that understanding the capabilities of our own team — and how this translates into time, effort, and resources — is just as essential.

Of course, getting used to this only comes through time and experience itself, but there is one key skill we can cultivate to ensure we’re all on the same page: Active Listening helps us understand what others are thinking, not as words forming sentences, but as concepts building ideas. We can then translate these for everyone involved in the process; the white space you just described to your client is best understood by your team’s Frontend Developer as a 250px padding on top of a new section and as a consistent breathing space for QA to keep an eye on every new page of the App.

That’s where Contextual Translating comes in. Translation entails not only knowing multiple languages but also understanding multiple contexts. This is why learning a thing or two about HTML, CSS, and other coding languages is always a bonus for designers: experience in various environments is key to fully understanding the meaning of what’s being said and implementing the correct translation.

It may appear simple as all you have to do is learn and listen. In practice, it gets tough because you might have to deal with multiple translations at once, and you can end up thinking of solutions midway through instead of actually paying attention to what is being said — but don’t fret! That’s part of learning. Knowing when you’re slipping is one of the steps towards improving your Active Listening skill, too.

Here are a few more tips to get there:

Get a coffee with a friend — then actually listen to them while drinking it.

Talk about any topic with your friend, then make a brief explanation of what they just said using your own words, trying to match their ideas. It doesn’t matter whether you have it right or wrong; what’s important is that you practice listening and rewording, which you’re going to be doing a lot in this scenario.

Talk design to people who don’t do design.

Find ways to describe common design concepts without using niche-based words, such as typography, image ratio, or even pixels. Your average client may not be aware of what these words mean, so you must describe them in a way that they can understand — that, without misleading them. A common example happens when discussing the “size” of an image: you may be referring to its dimensions (height and width), but the receiver could be thinking about the amount of data it takes up on a hard drive (kilobytes, megabytes). In the end, they are both “sizes,” so which one are you referring to? This same idea leads to a third point…

Don’t give ambiguity a chance.

Paraphrasing is not a bad practice. In fact, it is often encouraged in many contexts to welcome expansive writing in order to explain the information being conveyed more thoroughly. (See what I did there?). Talking with clients and teammates is not one of such contexts, though, and relying on terms that are far too open to multiple interpretations can and WILL lead to inexactness, which is the first step down the dooming “redesign tunnel.” Try rehearsing what you’re going to say while paying attention to the words you’re using: is this the right way to describe what you’re trying to explain? Use Google to find meanings and synonyms, and most importantly, don’t place the entire weight of a sentence on a single term; make sure to spend some time describing and contextualizing keywords so that when you use them, there are already many hints of what these words mean, leading to an easier understanding.

Even though correct communication is a crucial component of efficient design, you’d be surprised at how often we struggle to consciously incorporate these fundamentals into our work. These tips act as small shortcuts we can easily keep in mind to ensure we convey the correct message, but there are numerous books out there that explain these and many more concepts in greater detail. There’s no reason not to learn about communication; it’s one of those all-around, super-effective skills that everyone should hone, regardless of their occupation.

Thanks for reading. Please feel free to share and don’t forget to subscribe to our newsletter below!

Suggested by our brains as we interact with the environment, and perfected by evolution, intuition on a daily basis is one of our best allies, giving us cues of how things should work without previous knowledge. 

Before diving deep, let’s start with the basics. 

Affordances 101

UX designers left the chat…

An affordance is a single attribute of an object, which invites the user to carry out an action.

A quick way to understand affordances is by thinking of all the potential uses we might find for an object. So basically, affordances are all around us. The reason why we grab (hot) coffee mugs from the handle and not from the cup, push and pull doors, and why we know how to roll but not kick a bowling ball is the effect of how our brain delivers us cues (affordances) to accurately assume how things should work.

How do we know we can do all of this? Because of their physical properties.

Physical properties play a key role to help us understand what are the affordances these objects have. Size, material, and shape for example will let us know if you can grab and throw the ball, or instead, roll it through the floor. These physical properties can help us understand what objects can do.

Affordance and luxury cars

In 2015, a button design may have cost the American brand Lincoln some bucks in their revenue after recalling from the market 13,574 cars because the engine start/stop button had to be moved. Why? -you may ask yourself- Well, it seemed like the drivers accidentally pushed the stop button while driving at full speed and I think everyone knows it’s not safe to turn off your vehicle while driving.

Affordances in the physical world are evident, their physical attributes provide hints of what you can do with them. In most cases, objects have a perceptible affordance, as their characteristics imply a specific action. That feeling we get when we look at a switch, a knob, or a red button.

A red button affords to be pushed, due to its shape, its color, and a pre-existing convention in human culture of pushing it when you are told not to. 

Designing affordances with the user experience in mind

In a digital environment, objects don’t directly influence human perception due to the lack of a 3-dimensional space in which we can interact with it easily. The job of a designer is to use visual cues to create objects/elements that produce an almost natural response by the user.

In 1988, Don Norman took the lead in implementing affordances in the context of human-computer interaction. Norman emphasized the need for explicit visual cues demonstrating the user what can they do with a certain device or widget within an interface. 

• Interactive Elements
• Scrollbars
• Command Buttons
• Links
• Icons

The previous are basic examples of elements that can be designed to help give the user sufficient suggestions of how they can interact with a digital interface.

What types of digital affordances can we find?

In a physical state, it is pretty straightforward to identify obvious affordances around your surroundings. The digital playground is a whole different experience, cues for the user to use the digital space intuitively are harder to provide on behalf of the designer as contrary to the real world.

1. Explicit affordances:  provide tangible cues with pretty straightforward actions for the user to notice. Labels are one example as they can indicate the functionality of a specific element.
2. Metaphorical: Sometimes thinking about real-life references can be a great idea if you are not sure how to carry out a certain functionality. They make clever use of skeuomorphism design to convey the functionality of digital objects making a relationship with a similar real-life object. For example, a floppy disk icon will tell users that it’s a save button.
3. Patterns: created mostly by users who frequently interact around the web establishing conventions. These affordances are fueled up by the user’s preferences. For example, clicking on a company’s website logo is an effective way of returning to the website’s home page. There is no logical reason behind this, taking into account the company’s logo doesn’t give any specific hint of this action, but still has been established as a convention across the internet. Using common patterns will help you meet users’ expectations.
4. Implicit/Hidden: these affordances are not that obvious for the human eye. These usually remain hidden until the user makes a certain action. One example is usually a drop-down menu that appears while hovering or clicking.
5. False: they suggest the user performs a particular action that will lead to a specific outcome, but, upon completing the action, either nothing or something unexpected happens. For example, an underlined text that isn’t a link.
6. Negative: this type of affordance indicates when you don’t have an affordance. An example of this is when you want to indicate that you can’t do an action, perhaps having a disabled button that doesn’t let you continue until you fill out all your form.

How can affordances impact radically on your user experience?

The role of UX in the digital transformation journey is to design expertly crafted and intuitive human-computer experiences that both engage and delight end-users. Through the knowledge and implementation of affordances, the user experience can be refreshing and intuitive or a messy and confusing nightmare, and because of this, it may be a tricky task. Users cannot carry desired actions if the objects do not afford them to. So we insist that UX designers MUST build web and mobile interfaces where users shouldn’t think twice about what they are doing. 

“When affordances are taken advantage of, the user knows what to do just by looking: no picture, label, or instruction needed.”
— Don Norman, Grand Old Man of User Experience

By understanding how users think, designers may implement the correct elements to produce the desired outcome on behalf of the user.

*Mark Zuckerberg strongly approves*

How can affordances add value to your business?

Now more than ever, the digital era is upon us with great pressure on business owners to adapt to the increasing demand for digital solutions that make people’s life easier every day. Companies must invest in modern and efficient solutions to adapt their business operations to the market trend.

A key element of the success of these investments is how well are received these new tools by the consumer. The level of satisfaction that is perceived by a consumer when using a digital service may refer directly to the user experience. Digital solutions must not focus only on delivering a good cost/benefit product to their consumers but also on making them easy and intuitive to use. After all, what good is having the latest and greatest technology if no one understands how to use it?

So… Why do we push red buttons?

Affordances are everywhere. As we shop, browse, interact, play, and learn, in other words, they shape how we see our world. Designers across all industries, from experts to first-timers, must have affordances in mind to create self-explanatory objects. Acknowledging affordances by following established conventions when designing digital interfaces, will speak directly to a user and help build a memorable and lasting experience. 

This is essential in the emerging digital era, because it provides guidelines to users, for them to easily adapt to technological change. A strategy that includes user-led design will ensure your designs, communicate the affordances that best meet your end user’s needs, and will most likely ensure the intent of the application is perceived and actionable for all users. 

The reason why we push red buttons is the same as why millionaires buy expensive and luxurious goods because they can afford it.

Thanks for reading, hope you liked this post. Please feel free to share and don’t forget to subscribe to our newsletter below!

Whether you are starting out a new project or simply adding features to an existing one, there is a critical step in the process which usually causes some friction: the “Handoff”. It is considered the action of passing over the current state of the project’s design to the engineering team so the development process can start.

And that couldn’t be any more wrong.

What is commonly seen as a baton pass in a relay race should actually be compared more to a rugby match, where the team runs at the same time, backing up whoever is leading the charge. In this blog post we are considering the term design not only as UI or UX but as an architectural concept where the team designs collaboratively instead of only waiting for the designer’s input. Getting used to this idea of design as a team is not an easy task, here are some tips that can help you implement this format: 

Handoffs? More like Hands-on

Design doesn’t end when development starts, and development shouldn’t start when design is delivered. The Handoff is not the finish line, it is the road. Start collaborating with your team as early as possible, let them know what is on your mind. You can ask your team some of these questions to begin the designer-to-developer flow:

• Are there any back-end or front-end constraints that I should know of?
• What are the main points the development team is going to work on first?
• Is there anything I can share from the start that the team can use as a base?

Speak the same language

Agree on the terms used for the key concepts of the design, by getting team members to acknowledge the established terminology: Components or Widgets, Sliders or Carrousels, Toggles or Switches, etc. This way you’re making sure everyone’s using the same language. Optional: capture this in a document and share it with all the members of the team, this way it will be easier to remember these key concepts using the proper terms.

Check your team’s work – and yours

Most designers will usually agree that their role is to assure the frontend honors the constraints established by the design. You are more than just a supervisor, you should be also willing to constructively critique your own work. Be the first one to notice if what you delivered meets the expectations, even if your client has already approved it. What truly makes a product shine is not how fast and easy the design can be built, but the ability to evolve and adapt to the feedback given by all parties involved. Your first reviewers will be the developers, they are going to share their opinions and most likely will point out flaws that need to be fixed in order to make the design more scalable and re-usable. Take advantage of these opportunities to get closer to the best version of your design.

Prototypes are not almighty

Even if you create a functional prototype, it is hard to visualize the flow between all the parts of a completed design. Only when implementation starts, we can appreciate how things behave when they are connected and sharing data among them. These transactions are part of the design process too and because they are not logical until the components are alive, it is hard to detect those edge-cases that will mostly appear during a QA session. You’ll most likely have to redesign and adapt to these changes – and that’s perfectly fine. Regardless of your experience designing, you’re still human, and you can’t possibly know everything from the go.

Get familiar with your team’s work

You certainly do not need to know what is the difference between Angular and React to create a great UI design, but it will indeed help you and the project to have a better understanding of how much that 3D parallax video slider you’re designing is going to slow development down. Also, you don’t need to ask developers about everything, there is a trick to this: when you are designing something, think of how a user is going to interact with it. Is it easy to explain without moving your hands? If you didn’t immediately think “yes”, ask your nearest front-end buddy about it.

Think easy design

Your development team will be thankful not only for not adding shadows, bezels and opacities to everything, but in the long run, a simple, easy to develop design is going to be easier to polish as well. This reflects in a nicely built interface and a better user experience. Short reminder, if your design can’t be built, it won’t meet any user needs.

While this is not a design guidebook, there are a few last words on the topic that deserve being written: working in a comprehensive environment is not only good for the product you are building, but also healthy for the human beings working on it. We get stressed and tired when things are not clear, so even if it takes longer, even if you’d rather not be bothersome, always take some time to make sure everyone is on the same track regarding your design. Think of your team as part of the great user experience you want to achieve because, as a matter of fact, they are.

A couple of days ago I came across a great quote from Dieter Rams:

“Good design is as little design as possible. Less, but better — because it concentrates on the essential aspects, and the products are not burdened with non-essentials. Back to purity, back to simplicity.”

Designing a powerful app and keeping it simple at the same time is a hard task. Use cases, features, flows & interaction patterns add in to possibly turn your experience into a mess. But as designers & app makers, what can we do?

The answer sounds, well, simple: keep it simple.

Easier said than done though. Once you are sitting in front of a 10-pager spec sheet there is just no way in hell you can design something simple right? Turns out you can. You always can.

5 things to keep it simple

1. Cut out all ‘nice to haves’ from the spec sheet
2. Cut out all non-essentials from the spec sheet
3. Stick to a simple color palette
4. You don’t need flashy gradients, shadows, images, etc.
5. Stick to known interaction patterns and interface elements
6. Don’t burden the screen, stick to one interaction per screen

If you’re constantly adding in elements to make your app stand out, you’re not solving a problem, you’re just building an app for your portfolio.

A couple of great examples

Mailchimp — The powerful email & campaign app has hundreds of features yet they keep it super simple to use, uncluttered and fully responsive.

Treehouse — the tech online learning website has hundreds of courses, a large community and thousands of downloadable documents. Yet, the keep it simple. The interface is straight forward, no learning curve and they keep you focused on one thing at a time.

KISS

There’s a reason why Apple products sell massively: they keep it simple stupid. The Kiss princple coned by the US Navy back in the 60’s still stands true: avoid complexity to build a better product.

Have you used any over complex, horrible app recently? Let’s break them down below!

Have you ever asked yourself why do so some big (and successful) companies always seem to know how to keep users in love with them? Maybe you haven’t paid enough attention to Google’s doodles.

If you want to know the principles of any long-term, positive user experience, you better keep reading… or just sit there and look how others eat the pie.

According to a 2014 research, mobile users are five times more likely to leave a website if its layout isn’t optimized for mobile, basically because a “not optimized website” for smartphones’ devices means:

• A difficulty to read
• A difficulty to navigate
• A touch unfriendly layout
• A stormy delay to load

Technology development and digital research have lead us to one unquestionable revelation: user experience (UX) has a lot to do with the imminent success or absolute failure of any product. The way people perceive, feel and think about your brand image is the basis from where they might do one of two things:

1. Take action towards the establishment of a long-term, happy relationship with your business; or…
2. Take action towards the rejection of you, your product and all your family.

But how does UX really work and how can you put into practice effective strategies to improve your product?

Well, first you need to understand what do user experience implies.

When we talk about UX we’re inevitably referring to a conjunction of factors that combines between them to conform a major dimenssion: experience.

The same way you may hate dogs because your neighbour’s doberman bite you a few years ago, users consider not only your product’s features, price or design (objective elements) but how does your brand identity make them feel (subjective elements). Indeed, 88% of online consumers are less likely to return to a website after a bad experience (which is the same reason why you wouldn’t want to have a doberman playing around after being bitten).

Now, they’re two relevant points we can take out of this:

1. First, users have no mercy.
2. Second, users don’t care about how you build or design your products. They just expect your product to make them feel good (high level of satisfaction).

Let’s say that user experience is like a building which foundations can be more or less resistant depending on the strength of aspects such as:

• Usability
• Aesthetics
• Utility
• Human factors (memories, preferences…)

Which one is more important?

They all are, my dear Watson. They all build and improve connections between users-devices-products-emotions, which is exactly what you need if you want to establish positive user experiences. Remember: UX is a more complex concept than UI (user interface). We are not talking about the final product here, whatever it is; we are talking about the whole process behind, the formula that involves all interactions users make with your business, online and offline. So, how do you smartly play cards to make people love your product through UX?

Let’s see.

1. Always keep in mind the problem you are trying to solve. Design specific solutions for specific people

If you lose your house’ keys and your neighbor finds them, I bet the only thing you would ask from heaven (and from your neighbor) is to have your keys back as soon as possible because you really need to use the bathroom. You wouldn’t expect your neighbor to put the keys on a little box with a pretty red thread on it, you don’t need that.

To improve users experience around your product, you must always design considering one specific objective: to solve an user’s problem. No matter what are you trying to sell, they’re some questions you should be able to answer at any moment:

• What problem is my product going to solve?
• Who’s going to get the benefits of my product?
• What features does my product needs to be an effective (effective, not “impressive”) solution?

2. Pay attention to content (or die)

Nowadays, investing on online content (text, graphics, videos) may be a better option than investing on traditional online advertising, not because banners aren’t effective but because doing marketing through content makes easier to give users what they really want: useful information, value.

Today, all big companies have a blog, videoblog or produce original graphic content (mostly presented on an emotional language) because they know users are more likely to click on something that promises to help them improve their lifestyle somehow for free. Actually, 82% of consumers enjoy reading content from company blogs while 70% of users learn about a company through their blog rather than ads.

3. Be multi-screen (because users are)

If you haven’t realized of how users tend to look for information about a local business on their smartphone or tablet, then you’re definitely being a caveman on the digital era.

Statistics say that 63% of people use multiple devices to find local businessesand 90% of them take action making a purchase or contacting the business if they find relevant content. Why? Well, it’s pretty simple to understand: yesterday, people saved their lives on CD’s or USB’s; now, they just carry them on their pockets, and that means they want to have access to information no matter where they are. That’s what internet came to teach us: that ubiquity is an universal right.

4. If you’re going to develop an app, make it right. Otherwise, please don’t torture your users

If you are going to invest on an app development to boost users interaction towards your brand, or maybe just as an alternative to your website’s mobile version, you better know what you’re doing.
People download tons of apps everyday which they immediately delete or maybe just keep on their devices but never use (basically, because they were too busy to delete them immediately). They’re two reason why this may happen:

• They’re hard to use apps
• They’re consistently different from the website original design/layout

Familiarity is as important as usability. A lack of seamless across devices confuses users; actually, 83% of consumers say that seamless between mobile/desktop devices is somewhat or very important.

5. Ask, test and validate

You can’t establish the effectiveness of your UX strategy if you don’t evaluate your methods, and you can’t have a clue of what do users want from your product if you don’t ask them. ESPN.com revenues, for example, increased on 35% after they decided to incorporate users’ suggestions on their homepage redesing.

Of course, consumers are like girlfriends and boyfriends: they don’t always know why do they love us, so it’s our deal to discover it and do something to keep them by our side, and that’s why testing and validating is so important. First, you test what users “should” like; then, you validate, improve and keep what they really like.

6. Remove unnecessary features

If you find out that those “cool features” you developed with the same love a mother would put in raising a child doesn’t work the way you imagined… just let it go, for common good. Otherwise, testing and validating would be a lose of time and resources.

Users may tell you they want your product to be available in all colors and textures, but eventually you will realize they tend to purchase it only in black and white. Keep what users use.

7. Include a “First Time” experience on your website

Do you remember what happened when your mom had her first smartphone?

Do you remember how sad she was because that touchscreen didn’t seem to care about her nerves?

Do you remember how happy she was when you explained her how to turn that hostile touchscreen into her friend?

Leaving first time users to their own is never a good idea, not only because they may feel that your product (website, app, whatever) is so much hard to use and, therefore, just leave it, but because consumers may perceive a lack of interest from your brand towards their needs and expectations.

8. Do smart email campaigns

If clients have given you their email address, you should definitely be grateful because you have a good point in your favor, just don’t ruin it sending irrelevant information users don’t even care. Remember that Unsubscribe button is just down there, waiting an opportunity.

 Statistics say that 8 of 10 consumers who signed for emails from a brand over the past six months made a purchase based on what they received; obviously, you must create an email campaign focused on what do users need (users’ problem) to remember them a few times a week that you have the better solution.

9. Make users feel they matter

There’s a good reason why Google changes it’s doodle every year to give you a happy birthday message: they know it makes you smile.

User experience depends on your ability to take users’ side, to make them feel you care about their feelings. If you design your product based on a specific solution for a specific problem, users should feel comfortable choosing you over hundreds of alternatives, not confused or abandoned. As a matter of fact, the top reason why customers leave a company according to a research leaded by the Rockefeller Corporation is that customers believe you don’t care about them (68%).

10. Always highlight what matters on your website

Do not play with users’ patience. Research says that not finding relevant information leads 79% of people to search for another (better) site in order to complete a specific task, which could be (sadly for you) a purchase.

Conclusion

According to research, companies currently not conducting UX testing will be doing it in the next 12 months, and that’s because developing a product you don’t even know how do users perceive is completely irrational. You can invest thousands of dollars on prototypes, features and redesign projects and still receive the lowest ROI of business’ history, but investing just $1 may return up to $100.

It’s common sense… just eat the pie.