A Lifeline for LGBTQI Refugees: How Good UX Design Is Helping Save The Vulnerable


Creative Cloud

Micah Bennett is deeply passionate about UX. To her, user-centered design is more than a method to create better consumer products, it is a powerful tool to help some of the world’s most vulnerable people.

Before she became a UX designer at DesignMap, Bennett was a program officer at the Organization for Refuge, Asylum & Migration (ORAM) in San Francisco. There, alongside a team of advocates she developed the Rainbow Bridges pilot, a web portal and program providing online information and connecting LGBTQI asylum seekers with an international network of allies to effectively rescue and resettle them. It’s regarded as a blueprint for Chicago’s Rainbow Welcome program, established by former president Barack Obama, and the Rainbow Refuge program in Canada.

LGBTQI refugees are often fleeing persecution or even death in their home countries because of their sexual orientation or gender identity. Programs like Rainbow Bridges are rare and desperately needed. Bennett said, in redesigning the programs and systems that help these refugees, good UX design can become a lifeline.

“The systems of law and government are already designed, but they’re not necessarily human-centred design,” said Bennett. “The asylum application, the process, is not designed with LGBTQI refugees’ perspectives at the center. Re-shifting that focus can help get more people to safety as quickly as possible.”

Helping LGBTQI Refugees Poses Unique UX Challenges

Bennett identified some key challenges in building the pilot program both in terms of making sure the program website is covert and accessible via search.

The term LGBTQI may be familiar to many of us in the Western world, but it’s more complicated for people in countries where sexual and gender diversity are condemned or even illegal.

“Many of these refugees wouldn’t identify as LGBTQI when fleeing because that’s something that would get them killed in their home country. Many countries even block online search terms like ‘gay’ or ‘lesbian.’ The challenge became ‘how do you design something for someone to find, when there’s no universal language for search terms?’”

Bennett said putting the user first, using the terms and plain language they would use or most-directly identify with, was key for solving this challenge.

For many LGBTQI people living in countries where homosexuality is illegal, even using technology to access Bennett’s program could be dangerous.

“Many current online resources are made from a Western perspective and not designed for ‘covert situations.’ Users may be in a public computer lab, accessing the internet to find information about asylum, so obviously they’re not going to want something bright, with rainbows or it might put them in danger,” she said.

Many people also don’t have access to computers at all, relying exclusively on smartphones. This provided a unique opportunity for Bennett to go around government bans on search terms like ‘gay,’ ‘lesbian,’ or ‘trans,’ but it required some out-of-the-box thinking not-typical to refugee programs.

“We found, while some search terms are blocked, some gay dating and hookup apps were making their way through, and that became a place to put up an ad for our web resources and reach people via the underground channels they were already using to find community.”

Giving Refugees A Fighting Chance

Bennett led the pilot program before she was a formally-trained UX designer, but she applied user-centered design principles in her finished product. For her, it was about addressing a crucial problem facing the user, in this case the refugees she was helping. It was also her first step towards a big career change.

“I looked at the person at the center of this and their core needs,” said Bennett. “A lot of the refugee system is built around the concept of uniting families in big cities, but a lot queer refugees are fleeing their own families.”

By helping refugees settle in major cities, the program is giving them a shot at a happy life with access to a more open LGBTQI community.

Her experience designing Rainbow Bridges helped inspire Bennett to pursue UX design as a formal career path. Advocating for the user, these refugees, was her mission.

“Programs and systems should be built with the client’s considerations at heart. More often than not, these programs are built according to budget, or based on someone’s individual opinion about how things should look and work,” said Bennett. “The goal should be to help this person, and that should come before everything else.”

Rethinking Refugee Resettlement

Bennett says there’s a lot of work to do in revamping programs to help LGBTQI refugees. Many programs are focused on the legal or governmental aspects of the asylum process, as that is the expertise of their leadership. The role technology and design can play in serving refugee’s tactical needs and challenges is often missed entirely.

“I used to go to a lot of hackathons, where people would try to help my organization pro bono. Even with designers there, they often didn’t involve the very people they were designing for,” she said, reflecting on her previous career.

She says UX designers are in a unique position to do good.

“When you’re building something, UX designers can be the greatest advocates for users,” said Bennett. “There are so many tactical problems these refugees are facing – access to information, proving the persecutory conditions in their home countries, knowledge of their rights…To have UX designers involved gives me hope that we will provide these systems with tangible solutions.”

Read the full UX case study on the Rainbow Bridges pilot program. Micah Bennett recommends anyone looking to help reach out to Techfugees, a social enterprise mobilizing the international tech and design community to respond to the global refugee crisis.

Mr Bean Live: How An Animated Classic Tackled Facebook Live


Creative Cloud

The hapless hero Mr Bean has made us laugh for 27 years. Following the successful live action comedy series in 2001, Mr Bean launched a classic animated series and is currently the largest TV entertainment brand on Facebook with over 70 million fans. Recently, the team behind Mr Bean at Endemol Shine Group, worked with Adobe and the Adobe Character Animator CC (Beta) team to enable for the first time the animated Mr Bean to have ever interacted live with his fans.

Animation challenge accepted
Animation technology has come a long way from hand drawn sketches. New technologies, like Adobe Character Animator, are making it possible to animate faster than ever before, but that certainly doesn’t mean animation is an easy task.

The animated Mr Bean is quirky, but highly detailed. He isn’t famous for long-winded conversation. Instead, he is known for his over-exaggerated body movements and facial expressions. With this is mind, the Mr Bean designers knew they had a challenging task ahead of them. They needed to keep the quality of the animation as faithful to the Mr Bean character as possible but also animate Mr Bean on the fly, without a script, with millions of fans watching live. With these design challenges, the team turned to a game of charades to interact with the audience.

Illustrator CC was used to create the various hand shapes used in the charades game.

Creating simple but powerful animation
The first step to prepare Mr Bean for his livestream was to simplify the animation. The amount of detailed elements for the basic Mr Bean rig (think 1553 mouth shapes, 777 hand shapes, and 96 head shapes) was reduced to a more manageable number that could be brought together into a single Adobe Illustrator document. In the end, the completed character had 22 different hand shapes and 18 mouth shapes, including a stuck-out tongue and gritted teeth.

Mr Bean still needed synchronized hand and arm motions. By using animation cycles, his arms could animate independently or together with a mix of keyboard triggers and mouse movements and with a further stroke of the keys, his hands can animate simultaneously. Of course, Mr Bean’s trademark elbow patches make the 2D character more dimensional.

For a game of charades, Mr Bean’s varied hand gestures should appear as clearly as possible. Yet with a huge head and tiny hands, the challenge was to make the different gestures readable. The key for the design team was to fine-tune the timing so that each motion was slow enough for the audience to read, but quick enough to keep energy high and the fans engaged.

Enabling live reactions
Giving Mr Bean the ability to react live to fans’ comments depended heavily on his facial expressions. After animating a facial movement, Adobe Character Animator’s controls allowed the designers to attach that movement to a keyboard trigger. That way, the animators could control Mr Bean’s expressions during the livestream with the press of a button.

For example, anyone familiar with Mr Bean knows his trademark ‘glare,’ ‘squint,’ and ‘huh?’ expressions. By manipulating the upper and lower eyelids separately, designers could create a wider variety of Mr Bean’s signature faces. These eyelid movements were assigned to keyboard triggers and, at the end of the process, the team had created 34 triggers for Mr Bean’s in-the-moment expressions and actions.

To guide fans through the game, designers used Adobe After Effects CC to add a series of symbols to each charade. Icons such as ‘2-words,’ ‘film,’ or ‘repeat’ displayed on screen will help viewers identify when Mr Bean is doing a new charade or repeating himself.

Broadcasting the stream
Endemol Shine Group and the Adobe Character Animator team partnered with NewTek and Telestream to integrate cross-platform, machine-to-machine video using NewTek’s innovative Network Device Interface technology (NDI). The new processes enabled a seamless handoff of the live animation signal into Wirecast, Telestream’s live broadcasting software, as a camera source, which could then composite it with any other sources, graphics, or titles, and encode and stream the feed to Facebook.

With Telestream Wirecast, you can live broadcast your characters via Facebook or YouTube Live.

“It’s exciting to empower creators with a whole new set of tools for live video production, made possible by Adobe, and bridged by NewTek’s NDI technology,” says Andrew Haley, Wirecast Evangelist, Telestream. “Animation processes that used to take days or weeks to produce can be done in the moment, on-the-fly, and streamed live on Facebook, YouTube, Periscope and nearly any other streaming destination. It’s truly awesome stuff.”

On the day of the livestream, a team of seven people gathered to make Mr Bean come to life. A director monitored the game of charades and determined how Mr Bean will respond to the audience. An animator worked together with the voice controller to manipulate Mr Bean’s movements and reactions. A Wirecast switcher controlled the broadcast stream, and a community management team responded to fans’ comments on Facebook. This was broadcasted to over sixteen thousand viewers live and to over one million via the video replay.

Try your hand at creating your own animations with Adobe Character Animator and keep up to date with latest news about Adobe Character Animator and examples by following our blog.

Tell us what you think about #CharacterAnimator on Twitter or Facebook

The Essential Elements of Holistic UX


Creative Cloud

Header image: Stephen P. Anderson

Designing for user experience is something that has become a norm. Apps, websites, and products that fail to live up to user expectations and elicit emotions, such as delight or joy, continuously disappoint and lose their users. Everything from visual aesthetics to interactions and emotional connections must feel real to create an engaging and holistic experience that keeps users happy.

In this post, I explore the essential elements of holistic UX that you should consider when planning your designs. Remember, user experience is first and foremost about feelings.

What is UX?

Before we go any further, let’s agree on what UX actually stands for. UX is an abbreviation for user experience and it refers to all the aspects of the end-user’s interaction with a system, product, service or company. When we talk about UX in design, it has mostly to do with how a user feels about interacting with a system, which could be a website, a web application or a mobile app. This overall experience encompasses all the elements that together make up an interface, including visual design, text, layout, brand, sound, and interaction. A good UX coordinates all these elements to ensure they work in harmony and allow for the best human-computer interaction possible.

The Look: Credibility, Trust, Harmony, Spirit

It takes a user just a couple of seconds of viewing a design (before they even read a single word) to determine how they feel about it and their opinion about the trustworthiness and quality of what they’re looking at. The visual aesthetic of a design has an incredible power to either draw people in to dive deeper into the site’s content, or move on to something else (something that looks more credible and worth their time).

Holistic UX takes into account the importance of creating an interface that emanates trust and assurance. It also seeks to create harmony between all the aspects of a design. An interface that has a personality and evokes emotions through the use of colours, graphic elements, typography and other elements, helps to create a harmonious relationship with the user. A positive first impression is the only way to get the user to actually interact with a design.

The Feel: Creating the “Joy of Use”

One of the ways used to measure the success of a UX design is by applying the “joy of use” concept. In the simplest sense, the “joy of use” refers to a user’s emotions when interacting with a system. Does the user feel joy, or – more importantly – has the user had a successful experience? Joy occurs when the user is able to achieve their objectives easily and comfortably, the sought-after information is displayed in an easily digestible manner and the visual aesthetics meet the user’s standards.

Joy should not be mistaken with fun, though. There’s a big difference between these two emotional responses, and, needless to say, great UX designs don’t need to be fun to satisfy users’ needs. Would a bank website that looks fun elicit trust and credibility? Perhaps not. Giving the user what they want in a way that appeals to them is what we call creating the “joy of use.”

Usability: Functionality, Individuality, Predictability

One of the most prevalent myths about UX is that it is all about usability. Obviously, usability is one of the main facets of UX and its importance is unquestionable. However, UX design has a lot more to it than just ensuring a product is easy to use. Creating a meaningful, delightful overall experience is at the heart of holistic UX.

If users feel comfortable and happy while interacting with a system, it’s safe to assume they’ll continue to use it. How can we, as designers, make sure the designs we put out are pleasurable, immersive and accessible to users? A reliable method is to focus on nailing three key aspects: functionality, individuality and predictability.

It goes without saying that a design must be functional, solve problems and make life easier for its users. Yet, that is not enough to create an overall satisfying experience. Predictability and individuality also play an important role. A predictable UX means that all aspects of the interaction design set accurate expectations about what happens after a user taps, swipes or clicks on something before it actually happens. Predictability makes people feel more comfortable, gives them a sense of control and makes them move forward.

Finally, to really engage users, products need to possess a factor of uniqueness. By giving your app, product, or website a strong personality, you can help users empathize and connect with you, establishing an emotionally-driven relationship.

The Takeaways

The most important lesson designers need to learn is that good UX is not only about eliminating frustrations and solving problems, it’s just as much about being thoughtful, getting users absorbed in the experience and evoking positive emotions.

Making The Most Out of Audio: Designer Chris Mears on Sound in UX Design


Creative Cloud

Chris Mears

The internet used to be a noisy place. From dial up sounds to autoplaying ‘pings’ on websites, Chris Mears says we should all be thankful the user experience of sound has improved. As a freelance UX designer, big music fan, and editor of The UX Review, he’s been tracking how our use of sound in digital design has changed. Now he’s come up with some key considerations for UX designers who want to make the most out of audio in their work.

“Those of us of a certain age can probably all remember the classic AOL ‘You’ve Got Mail.’ Although fairly blatant in it’s delivery, it got the point across and eventually became habit forming,” he said.

“But in the early days of websites, sound was used fairly haphazardly with bad quality midi files autoplaying when you landed on a page.”

The Web Has Changed Its Tune

Mears says the context in which we’re accessing web content has changed from the days of pings and obnoxious beeps. Most of the time, our mobile devices are our focus, and where and when we use those devices impacts how UX designers should be integrating sound into their sites and apps.

“For instance, when using a device on the train it is very common that people will be also using that device to listen to music. Therefore this may impede any sound based feedbacks ability to be heard. In this often cramped situation a noisy phone is not likely to win you many friends either.”

He has a guiding principle when it comes to using sound in the 21st century.

“Short and discrete sounds which through repetition and familiarity can convey meaning to users. These are very effective [while causing minimal interference].”

Best Advice For Using Sound In UX Design

Mears has three pieces of key advice for integrating notifications and music into designs. He says, when integrated properly, “sound could help you win some key brownie points”:

  • Consider the context of your user’s task. You don’t want to be firing off alarm sounds if your app is primarily going to be used in a library or courtroom.
  • Consider if it is necessary. Will it add meaning to the interaction? Make sure there is a way to turn it off too.
  • Consider the hearing impaired. Remember – not everyone can hear so make sure you aren’t relying solely on sound to enable a user to know something or complete a task.

While he advises caution, Mears says sound can be a powerful tool to communicate on many different levels. A music lover, he’s observed how audio can affect a user’s understanding and even mood.

“It can be a more natural way to interact with things, as it’s one of our most prominent senses.”

More Crucial in The Future

Voice assistants, wearables, and non-visual interfaces are emerging as leading consumer technologies in our lives, and Mears says sound will again a more important role in how we design.

“It’s going to be the voice assistant that brings in the next era of sound-based interaction. Apple’s Siri and Google Now [offer] usable information in an audio format where arguably more standard input mechanisms would have taken longer,” he said, acknowledging that these devices still have a long way to go in replacing our visual interfaces.

More subtle is the way wearables are using sound. He says there’s a lot to be learned from how apps are integrating audio notifications in non-obtrusive ways.

“Apps such as Nike+ even cheer when somebody ‘likes’ your run on Facebook as a form of encouragement. It’s easy to see how sound can play an important role in helping people achieve their fitness goals by offering subtle reminders they are due to do some activity or are close to reaching their targets.” he said.

Sound has the power to enable users to have better and more seamless experiences, and who doesn’t like the sound of that?

See more of Chris’ work on his company’s website or follow him on Twitter.

Designing More Efficient Forms: Structure, Inputs, Labels And Actions


Creative Cloud

Someone who uses your app or website has a particular goal. Often, the one thing standing between the user and their goal is a form. Forms remain one of the most important types of interactions for users on the web and in apps. In fact, forms are often considered the final step in the journey of completing their goals. Forms are just a means to an end. Users should be able to complete them quickly and without confusion.

In this article, you’ll see practical techniques that have been gleaned from usability testing, field testing, eye-tracking studies and actual complaints from disgruntled users. These techniques — when used correctly — enable designers to produce faster, easier and more productive form experiences. There’s a way you can create and design your own prototypes: All you need to do is to download Adobe XD (for free) and get started right away. At the end of the article, you’ll also find new ways to design forms.

The Components Of Forms

The typical form has the following five components:

  • Structure
  • This includes the order of fields, the form’s appearance on the page and the logical connections between multiple fields.
  • Input fields
  • These include text fields, password fields, checkboxes, radio buttons, sliders and any other fields designed for user input.
  • Field labels
  • These tell users what the corresponding input fields mean.
  • Action button
  • When the user presses this button, an action is performed (such as submission of the data).
  • Feedback
  • The user is made to understand the result of their input through feedback. Most apps and websites use plain text as a form of feedback. A message will notify the user about the result and can be positive (indicating that the form was submitted successfully) or negative (“The number you’ve provided is incorrect”).

Forms may also have the following components:

  • Assistance
  • This is any explanation of how to fill out the form.
  • Validation
  • This automatic check ensures that the user’s data is valid.

This article covers many aspects related to structure, input fields, labels, action buttons and validation.

Form Structure

A form is a type of conversation. And like any conversation, it should consist of logical communication between two parties: the user and the app.

Ask Only What’s Required

Make sure to ask only what you really need. Every extra field you add to a form will affect its conversion rate. Always consider why you are requesting certain information from the user and how you will use it.

Order the Form Logically

Ask details logically from the user’s perspective, not from the application or database’s perspective. Typically, asking for someone’s address before their name would be unusual.

Group Related Information

Group related information into logical blocks or sets. The flow from one set of questions to the next will better resemble a conversation. Grouping together related fields will also help users make sense of the information they must fill in. Compare how it works in the contact information form below.

Group together related fields (Image: Nielsen Norman Group)

One Column Vs. Multiple Columns

One of the problems with arranging form fields into multiple columns is that users will likely interpret the fields inconsistently. If a form has horizontally adjacent fields, then the user must scan in a Z pattern, slowing the speed of comprehension and muddying the path to completion. But if a form is in a single column, the path to completion is a straight line down the page.

On the left, one of many ways to interpret how the form fields relate when they are arranged in a standard two-column layout, versus on the right, a straight line down the page.

Input Fields

Input fields are what enable users to fill in a form. Various types of fields exist for the information you need: text fields, password fields, dropdowns, checkboxes, radio buttons, date-pickers and more.

Number of Fields

A rule of thumb in form design is that shorter is better. And this certainly seems intuitive: Less effort on the part of the user will lead to higher conversion. Thus, minimize the number of fields as much as possible. This will make your form feel less loaded, especially when you’re requesting a lot of information. However, don’t overdo it; no one likes a three-field form that turns into a 30-field interrogation. Displaying only five to seven input fields at a given time is a common practice.

Combine multiple fields in one easy-to-fill field. (Image: Luke Wroblewski)

Mandatory Vs. Optional

Try to avoid optional fields in forms. But if you use them, at least clearly distinguish which input fields may not be left blank. The convention is to use an asterisk (*) for required fields or the word “optional” for non-required fields (which is preferable in long forms with multiple required fields). If you decide to use an asterisk for mandatory fields, show a hint at the bottom of the form explaining what the asterisk is for, because not everyone understands what it means.

MailChimp’s mailing-list subscription form.

Setting Default Values

Avoid setting defaults unless you believe a large portion of your users (for example, 90% of them) will select that value. Particularly avoid it for required fields. Why? Because you’re likely to introduce errors. People scan online forms quickly, so don’t assume they will take the time to parse through all of the choices. They might skip something that already has a value.

But this rule doesn’t apply to smart defaults — that is, values set based on information available about the user. Smart defaults can make form completion faster and more accurate. For example, preselect the user’s country based on geo-location data. Still, use these with caution, because users tend to leave preselected fields as they are.

An intelligently preselected country in the checkout form.

Input Masks

Field masking is a technique that helps users format inputted text. A mask appears once a user focuses on a field, and it formats the text automatically as the field is being filled out, helping users to focus on the required data and to more easily notice errors. In the example below, the parentheses, spaces and dashes are applied automatically as the phone and credit-card numbers are entered. This simple technique saves time and effort with phone numbers, credit cards, currencies and more.

(Image: Josh Morony)

Desktop-Only: Make Form Keyboard-Friendly

Users should be able to focus on and edit every field using only the keyboard. Power users, who tend to use the keyboard heavily, should be able to easily tab through and edit fields, all without lifting their fingers off the keyboard. You can find detailed requirements for keyboard interaction in the W3C’s guidelines on design patterns.

Even a simple date-picker should adhere to the W3C’s guidelines. (Image: Salesforce)

Desktop-Only: Autofocus for Input Field

Autofocusing a field gives the user an indication and a starting point to quickly begin filling out a form. Provide a clear visual signal that focus has moved there, whether by changing a color, fading in a box, flashing an arrow, whatever. Amazon’s registration form has both autofocus and visual indicators.

Mobile-Only: Match Keyboard to Input

Phone users appreciate apps that provide the appropriate keyboard for text being requested. Implement this consistently throughout the app, rather than merely for certain tasks but not others.

(Image: Google)

Limit Typing (Autocompletion)

With more and more people using mobile screens, anything that can be done to prevent unnecessary typing will improve the user experience and decrease errors. Autocompletion makes it possible to eliminate a huge amount of typing. For example, filling out an address field is often the most problematic part of any registration form. A tool such as Place Autocomplete Address Form (which uses both geo-location and address prefilling to provide accurate suggestions based on the user’s exact location) enables users to enter their address with fewer keystrokes than regular input fields.

Labels

Clearly written labels are one of the primary ways to make a UI more accessible. A good label tells the user the purpose of the field, maintains its usefulness when focus is on the field itself, and remains visible even after the field has been filled in.

Number of Words

Labels are not help text. Use succinct, short, descriptive labels (a word or two) so that users can quickly scan your form. Previous versions of Amazon’s registration form contained a lot of words, which resulted in slow completion rates. The current version is much better and has short labels.

Sentence Case Vs. Title Case

In most digital products today, there are two ways to capitalize words:

  • title case: capitalize every word. “This Is Title Case.”
  • sentence case: capitalize the first word. “This is sentence case.”

Sentence case used for labels has one advantage over title case: It is slightly easier (and, thus, faster) to read. While the difference for short labels is negligible (“Full Name” and “Full name”), for longer labels, sentence case is better. Now You Know How Difficult It Is to Read Long Text in Title Case.

Avoid All Caps

Never use all caps, or else the form will be difficult to read and much harder to scan quickly, because there will be no variation in character height.

All-caps labels are very hard to read.

Alignment of Labels: Left Vs. Right Vs. Top

Matteo Penzo’s 2006 article on label placement suggests that forms are completed faster if labels are on top of the fields. Top-aligned labels are good if you want users to scan the form as quickly as possible.

Left-aligned, right-aligned and top-aligned labels (Image: UX Matters)

The biggest advantage of top-aligned labels is that different-sized labels and localized versions can more easily fit the UI. (This is especially good for screens with limited space.)

(Image: CSS-Tricks)

The biggest disadvantage to left-aligned labels is that it has the slowest completion times. This is likely because of the visual distance between the label and input field. The shorter the label, the further away it will be from the input. However, a slow completion rate isn’t always a bad thing, especially if the form asks for sensitive data. If you are asking for something like a driver’s license number or a social security number, you might deliberately want to slow down users a bit to make sure they enter it correctly. Thus, the time spent reading labels for sensitive data is insignificant. Left-aligned labels have another disadvantage: They require more horizontal space, which might be a problem for mobile users.

(Image: CSS-Tricks)

The big advantage of right-aligned labels is the strong visual connection between the label and input. Items near each other appear to be related. This principle isn’t new; it derives from the law of proximity, from Gestalt psychology. For short forms, right-aligned labels can have great completion times. The disadvantage is discomfort; such forms lack that hard left edge, which makes it less comfortable to look at and harder to read.

(Image: CSS-Tricks)

Takeaway: If you want users to scan a form quickly, put labels above the fields. The layout will be easier to scan because the eye will move straight down the page. However, if you want users to read carefully, put labels to the left of the fields. This layout will slow down the reader and make them scan in a Z-shaped motion.

Inline Labels (Placeholder Text)

A label set as a placeholder in an input field will disappear once the field gains focus; the user will no longer be able to view it. While placeholder text might work for two-field forms (a simple log-in form with username and password fields), it’s a poor substitute for visual labels when more information is required from the user.

(Image: snapwi)

Once the user clicks on the input field, the label will disappear, and so the user cannot double-check that they wrote what was being asked of them. This increases the chance of error. Another problem is that users could mistake placeholder text for prefilled data and, hence, ignore it (as Nielsen Norman Group’s eye-tracking study confirms).

Placeholder text as field label.

A good solution for placeholder text is a floating label. The placeholder text would be shown by default, but once an input field is tapped and text is entered, the placeholder text fades out and a top-aligned label animates in.

(Image: MDS)

Takeaway: Don’t just rely on placeholders; include a label as well, because once a field has been filled out, the placeholder will no longer be visible. Use a floating label so that users are sure they’ve filled out the correct field.

Action Buttons

When clicked, an action button triggers some activity, such as submission of the form.

Primary Vs. Secondary Actions

A lack of visual distinction between primary and secondary actions can easily lead to failure. Reducing the visual prominence of secondary actions minimizes the risk of error and reinforces people’s path to a successful outcome.

Equal visual weight versus visual distinction (Image: Luke Wroblewski)

Button Location

Complex forms usually need a back button. If such a button is located right below an input field (like in the first screenshot below), a user could accidentally click it. Because a back button is a secondary action, make it less accessible (the second form below has the right location for buttons).

Naming Conventions

Avoid generic words such as “Submit” for actions, because they give the impression that the form itself is generic. Instead, state what action the button will perform when clicked, such as “Create my account” or “Subscribe to weekly offers.”

Multiple Action Buttons

Avoid multiple action buttons because they might distract users from their goal of submitting the form.

The Reset Button Is Pure Evil

Don’t use a reset button. This button almost never helps users and often hurts them. The web would be a happier place if almost all reset buttons were removed.

Visual Appearance

Make sure action buttons look like buttons: Indicate that it is possible to click or tap them.

Shading indicates that it is possible to click. (Image: Vadim Gromov)

Visual Feedback

Design the “Submit” button in a way that clearly indicates the form is being processed after the user’s action. This provides feedback to the user while preventing double submission.

(Image: Michaël Villar)

Validation

Form validation errors are inevitable and are a natural part of data entry (because users are prone to making errors). Yes, error-prone conditions should be minimized, but validation errors will never be eliminated. So, the most important question is, How do you make it easy for the user to recover from errors?

Inline Validation

Users dislike having to go through the process of filling out a form, only to find out upon submission that they’ve made an error. Especially frustrating is completing a long form and upon pressing “Submit,” you are rewarded with multiple error messages. It’s even more annoying when it isn’t clear what errors you’ve committed and where.

(Image: Stack Exchange)

Validation should inform users about the correctness of text as soon as the user has inputted the data. The primary principle of good form validation is this: Talk to the user! Tell them what is wrong! Real-time inline validation immediately informs the user about the correctness of their data. This approach allows them to correct any errors faster, without having to wait until they press the “Submit” button to see the errors.

However, avoid validating on each keystroke because, in most cases, you simply cannot verify until someone has finished typing an answer. Forms that validate during data entry punish the user as soon as they start entering data.

Google Forms states the email address isn’t valid before you’ve finished typing. (Image: Medium)

On the other hand, forms that validate after data entry do not inform the user soon enough that they’ve fixed an error.

Validation in the Apple Store is performed after data entry. (Image: Medium)

Mihael Konjević, in his article “Inline Validation in Forms: Designing the Experience,” examines different validation strategies and proposes a hybrid strategy to satisfy both sides: Reward early, punish late.

  • If the user enters data in a field that was in a valid state (i.e. previously inputted data was valid), then validate after data entry.
  • If the user enters data in a field that was in an invalid state (i.e. previously entered data was invalid), then validate during data entry.

A hybrid approach: Reward early, punish late. (Image: Medium)

Protecting Data

Jef Raskin once said, “The system should treat all user input as sacred.” This is absolutely true for forms. It’s great when you start filling in a form and then accidentally refresh the page but the data remains in the fields. Tools like Garlic.js help you to persist a form’s values locally until the form is submitted. This way, users won’t lose any precious data if they accidentally close the tab or browser.

Conversational Interfaces: New Ways Of Designing Forms

Recently, we’ve seen a lot of excitement around conversational interfaces and chatbots. Several trends are contributing to this phenomenon, but one in particular is that people are spending more time in messaging apps than on social networks. This has led to a lot of experimentation with supporting a range of interactions, such as shopping, in threaded conversations, often in a way that mimics messaging. Even as established an element as a web form has undergone a change under this trend. Designers are looking to transform traditional web forms into interactive conversational interfaces.

Natural Language Interface

Every interface is a conversation. Traditional forms (the ones we design every day) are quite similar to a conversation. The only difference is the way we ask the questions. But what if we designed our forms to ask questions in a format that more closely reflects real human (not machine) conversation? So, instead of communicating with a machine on its own inhuman terms, you would interact with it on yours. The form shown below creates a conversational context, facilitating understanding without relying on the traditional elements of web forms (such as labels and input fields).

This form design from Codrops uses a conversational pattern to better resemble the task.

Conversational Form

Conversational Form is an open-source concept that easily turns any form on a web page into a conversational interface. It features conversational replacement of all input elements, reusable variables from previous questions, and complete customization and control over the styling. This project represents an interesting shift in how we think about user experiences and interactions, leaning more towards text-based conversation to help users achieve their goals.

Conclusion

Users can be reluctant to fill out forms, so make the process as easy as possible. Minor changes — such as grouping related fields and indicating what information goes in each field — can significantly increase usability. Usability testing is simply indispensable in form design. Very often, testing with just a few people or simply asking a colleague to go through a prototype can give you good insight into how usable a form is.

Almost every household has an unsolved Rubiks Cube but you can esily solve it learning a few algorithms.

From Shoot to Sale: Part 2


Creative Cloud

In the first part of our lifestyle stock photography tutorial, Mat went over the preparation and set up for the photoshoot, and how to get the best, most natural images from your models. In this second half, we’ll dive into uploading your images to Adobe Stock, and how to make sure that you have the most relevant keywords so buyers can find your photographs.

With integrations into Lightroom CC and Bridge CC, you can quickly and efficiently upload content to Adobe Stock from directly within the apps as soon as you’ve finished your editing. Mat demonstrates the upload of his selection from the shoot via Lightroom CC and also directly via the Contributor Portal. Select only the best images from a shoot and ensure that each offers something different. Don’t submit multiple copies of the same image with different postproduction effects applied.

Keywording is one of the most important aspects of stock photography. Keywords are how buyers find images, so put yourself in the shoes of a buyer and think about what kind of search terms you’d use to find your photo. If you need a little help, our auto-keywording tool will automatically generate keywords for you. If you’re uploading from Lightroom CC or Bridge CC, you can also embed keywords in the file.

Remember that your keywords must be in order of importance, and cannot contain brand names like ‘iPhone’ or ‘Android’.

If your images feature a recognizable person or place, you will need to attach a model or property release. You can find model and property release templates on our HelpX page or on the Contributor Portal.

In Summary:

  • Submit images seamlessly from Lightroom CC and Bridge CC with our integration.
  • Think like a buyer when adding keywords. The auto-keywording tool in our Contributor Portal is a great place to start.
  • List your keywords in order of importance.
  • Don’t spam keywords! All of your keywords should be relevant to your submission.
  • You must obtain model releases for all recognizable people and property. That includes tattoos.

The beauty of stock is that once your content has been uploaded, it will continue to generate revenue for you for years and years down the road. Submit your images today and see more images from the photoshoot in Mat’s Adobe Stock portfolio.

From Shoot to Sale: Part 1

{$inline_image}
Creative Cloud

Buyers’ preferences change with the market and time, and we’re seeing an increasing demand for authentic and diverse lifestyle imagery. You don’t need to hire models or professional make up artists to produce beautiful, commercially successful images, but if you’re up for the challenge of putting together a professional set, there are few things you should keep in mind to get the most from your shoot.

Mat Hayward, Adobe Stock Contributor Relations Specialist, is an accomplished event and stock photographer. In this two-part tutorial, Mat walks us through a photoshoot he set up in this hometown Seattle and shares his tips for successful lifestyle images, from shoot to submission.

To prepare for your shoot, make sure all of your models sign releases. Without signed permission, you cannot sell your images as stock. If you are photographing recognizable buildings or landmarks, you may also need a property release. You can find release templates on our HelpX page or on the Contributor Portal.

It’s important to approach your photoshoot with a plan. Be prepared with a shot list, but take the opportunities as they rise to improvise.

Natural interaction and chemistry between your models is key for lifestyle imagery. Buyers are looking for photos that are believable and relatable for their audience. Set up the scene so you can tell a story, and ask your models to interact and capture the scene as it unfolds. If you are shooting food, prepare the food in advance, but let models complete the food presentation for those authentic moments that buyers are looking for.

In summary:

  • Create a shot list in advance to keep you on track, but don’t be afraid to improvise when the opportunities arise.
  • Get model and property releases for any recognizable people and properties.
  • Tape over any trademarks and logos, or make sure to retouch them in post-processing.
  • Set up the scene and re-shoot from multiple angles.
  • Let your models interact with each other to get authentic moments rather than static, posed shots.

In part two, Mat will walk through the submission process to Adobe Stock, including how to upload content seamlessly from desktop apps you are already using to edit your photos. He’ll also share his best tips for keywording your images so buyers can find your photos in our collection.

In the meantime, check out more images from the shoot in Mat’s Adobe Stock portfolio.

Creating Content with Bite


Creative Cloud

Anyone who loves live-action shorts, series, podcasts, or gaming videos knows that the place to go for fun and entertaining content is Rooster Teeth. The streaming pioneers produce as much media each week as a broadcast cable channel. All production is done in-house for the company’s popular shows, including Red vs. Blue, RWBY, Immersion, The Rooster Teeth Podcast, and Million Dollars, But….

Brian Behm, Rooster Teeth’s Motion Design Director, joined the company five years ago and has watched it grow exponentially. Nearly all of the company’s 275 employees use Adobe Creative Cloud for teams to ideate, produce content, and deliver fun and addictive videos to its 30 million YouTube subscribers, 5 million unique monthly visitors to RoosterTeeth.com, and 2 million registered community members.

Brian Behm

Establishing a brand identity

After moving to Austin, Texas, Behm sent a reel of his motion design work to Rooster Teeth. His timing was perfect and the company brought him in to work on a couple of rebranding projects and the rest of Red vs. Blue season 9.

“At the end of those projects I sat down with the CEO to look at the pipeline and we figured that there was another month of projects for me,” says Behm. “Five years later, the list just keeps growing!”

Red vs. Blue

When Behm joined as employee number 14, there wasn’t even an art department. Everyone was a generalist, and the company was just starting to move into specialization. In addition to helping build the art department, Behm put together a visual language for how the company talks about its brands on screen. Today, the Rooster Teeth art department produces a range of content, from merchandise designs to visual effects for the brand’s films.

“I’ve touched a little bit of everything over the years and it’s been fun,” says Behm. “It’s really awesome to know your work will be seen by millions of people.”

The Rooster Teeth way

Rooster Teeth’s audience are fans of anime, gaming, comedy, and “geeky” content. The brand is smart with a bit of a “tongue-in-cheek” style. The Achievement Hunter and Funhaus channels are places where people love watching others play video games. The team designs the content with a sense of humor that makes people want to hang out there, like they’re hanging out with their friends.

To produce the volume of content that Rooster Teeth is known for Behm and the team are constantly working in Creative Cloud for teams. The software is installed for every person in the organization that needs it, providing anytime, anywhere access.

The motion design team spends a good chunk of time in Adobe After Effects CC, as well as Adobe Photoshop CC and Illustrator CC. For audio work, Behm creates music in Logic or Garage Band and then bounces that out and builds the rest of the sound mix in Adobe Audition CC. The editorial department relies on Adobe Premiere Pro CC for video editing and designers in merchandising live in Illustrator CC and Photoshop CC for their design needs.

“We would be at a loss if we didn’t have access to Creative Cloud for teams,” says Behm.

The proof is in the projects

Rooster Teeth recently re-launched its Let’s Play channel. People tend to binge watch Let’s Play videos from across a network of creators, so we wanted to create one identity for the brand to make the individual videos feel connected. We landed on an idea to create funny four-second bumpers with an early-MTV animation vibe that were branded “Let’s Play” and were not specific to any single creator.

Let’s Play Disco Ball

“We wanted to create a couple hundred bumpers so it was an ongoing project,” says Behm. “We did them relatively quickly with all of them going through an Adobe After Effects CC post workflow. It’s probably been one of the most fun projects I’ve done in my career.”

Let’s Play Banana Fight

Future growth mindset

The Rooster Teeth IT department also appreciates being able to easily ramp up and ramp down with contractors, who often work in-house. With Creative Cloud for teams, it’s easy to assign access using the Admin Console while they’re working on a project, and turn it off when the project is complete.

Behm looks forward to taking advantage of the collaboration and accelerated workflows enabled by Creative Cloud. “I’d like to get all of the assets needed for each show’s branding into Creative Cloud Libraries,” he says. “I’d also like to do more with the integration between Premiere Pro CC and After Effects CC.”

In addition to his work at Rooster Teeth, Behm hosts a motion design Twitter group called #MoChat that meets on Tuesday nights. He enjoys diving deep into topics and learning from other designers. “There are so many people from that group who have made me a better designer,” he says. “When you’re around great designers it pushes you to work harder so you can keep up.”

Learn more about Adobe Creative Cloud pro video tools

Learn more about Adobe Creative Cloud for teams

The Creative Approach to Stock Photos


Creative Cloud

Imagery is an essential part of brand content. It visually communicates the stories that draw audiences in and thereby build a business base. For most organizations, access to quality visuals like photographs comes in the form of stock images — a source that often gets a bad rap.

The stereotypical stock image is an overly-posed, emotionless picture. However, a new generation of stock photographers is contributing more authentic and eye-catching photos than ever before. They are creating powerful imagery that captivates audiences and shares distinct messages.

When it comes time for businesses to use these images creatively, who better to give advice than the people who first brought the photo to life? We interviewed three of the most innovative stock photographers in the business. Here are their tips for creating stand-out projects from ready-made photographs.

Balance ideas across messaging and images.

Ryan Longnecker, an outdoor landscape and travel photographer from Los Angeles, suggests designers select abstract images to accompany literal messages in the copy and vice versa.

“When you have an obvious image and pair it with a strong and clear point, the two aspects either don’t match and conflict, or they match too well and compete,” he says.

A fine balance exists between a project’s imagery and its messaging. Try pairing more abstract images with literal messages and literal images with abstract messages. ADOBE STOCK / RYAN LONGNECKER

The opposite is also true. Abstract messaging points partner well with more obvious images. “When an image is really literal and it’s paired with messaging that’s a bit more abstract or emotional, it allows the viewer to anchor themselves in something,” Ryan says.

Experiment with cropping and extension.

“While not a new or exciting concept, cropping is an unbelievably simple yet effective tool,” Jacob Lund, a stock photographer based in Copenhagen, says. “You can really change the look and feel of an image by experimenting with different crops.”

While not a new idea, cropping an image creatively can change the entire focus and feel of the photo. ADOBE STOCK / JACOB LUND

Designers are used to cropping images down to get the size and focus they need for their layouts, but extending an image can be just as effective.

Instead of cropping an image tighter, designers can extend it wider or higher and digitally create the missing part of the image. “With tools like Photoshop’s Content Aware Crop, you no longer need to be a Photoshop wizard to extend photos creatively,” Jacob says. “If the job is more advanced, we usually do a mixture of cloning and stretching existing parts of the image.”

Make stock images your own.

Stock images are most powerful when used as a foundation for a design project. Instead of downloading, dragging, and dropping, photographers suggest designers combine multiple stock assets to create new art.

“I really recommend working with classic methods like cutting the photos in pieces, merging different photos and structures, and playing around with colors, graphics, and typography to find new, beautiful ways to present the image,” Felix Rachor, a Berlin-based fashion, beauty, and celebrity photographer, says.

When designers take a stock image and modify it into something new, they give businesses the opportunity to share their unique perspective with others, align stock images more effectively with their brand, and ensure they’ll never have the same imagery as a competitor.

Don’t lose sight of visual trends during the editing process. For example, raw, natural images are trending. Cropping this photo emphasizes its natural look and feel. ADOBE STOCK / FELIX RACHOR

Stock photographers take photos with the latest visual trends in mind. Don’t lose sight of those trends as you edit their images. Here are a few our photography experts suggest remembering:

  • Low-fi is the new high-fi. Look for raw qualities in your images.
  • Be careful how much you retouch skin. The plastic look is out. Natural is in, and less is more.
  • Use collage style layouts to feature multiple images. Juxtaposing images at a variety of angles can create a more interesting viewing experience than scrolling through slides.
  • Color is making a comeback. Vintage filters have been popular over the last several years, but now there is a call for vibrant color. Try enhancing the colors in your photos and creating powerful color contrast.

The power of stock.

Gone are the days when stock images were boring and standard. With photographers creating more and more unique photographs each day, stock provides an opportunity for designers to have easy access to a wealth of dramatic imagery. With the right tools and creative touch, designers can make those assets their own. A stock image can be the basis for impactful and effective business designs. Learn how your team can use work from world-class photographers at stock.adobe.com/teams.

Better Understanding Users Through Ethnography


Creative Cloud

They’ve been called superpowers—ethnographic research skills that empower user experience designers to better understand their users and the motivators that drive them, ultimately leading to a more holistic design.

Rather than putting yourself in your user’s shoes, ethnography encourages researchers to observe users as they walk around in them—noting from a distance their behaviors, preferences and beliefs.

It’s a practice rooted in anthropology that has spread to other disciplines over the years, especially across the social sciences—the field where user experience researchers play. Ethnography uses a methodical approach to observe people and cultural groups in their “natural habitat.” This could be in their homes, at their places of work, on their commute, at the gym, etc. These observations are combined with other data points to create a more all-inclusive approach to design.

“Ethnography is a vital tool that gives executives a real-world understanding of people’s preferences, motivations and needs by examining the environments buyers inhabit and the cultural and societal forces that influence their behavior,” wrote Jonathan Dalton, CEO and co-founder of Thrive Consulting.

Ultimate UX + the Ethnography Superpowers

Rick Damosa, a UX strategist and researcher at Key Lime Interactive, recently wrote a piece identifying what he believes are the top superpowers of ethnographic studies.

Empathy – The golden ticket of UX design, Damosa notes how empathy is required in order to understand a user’s perspective and “evaluate how stimuli in the environment could impact their behaviors, emotions, and actions.” He points to a VR study that observed the presence of physical symptoms like fear and joy with symptoms of simulation sickness to understand how even virtual environments can “impact users in a very real and physical way.”

Listening – Noting how researchers are often the “conduit” between end users and product teams, listening becomes vital. Listening is the key to data collection in ethnographic research. Damosa ties listening closely with post-observation interviews, writing that, “documenting and actively listening to insights allows researchers the ability to follow up specific and targeted questions that get past the superficial layer.” He advises to researches to talk less and listen more.

Curiosity – Without undermining the importance of research fundamentals, Damosa writes that “at the core of every truly gifted researcher is a tireless sense of curiosity.” This curiosity is key to peeling “back the proverbial layers of the onion” to achieve greater insights into not only how, but “why users behave the way they do.” He sees curiosity as the ultimate motivator and encourages ux researchers and designers to rediscover your sense of curiosity—even, and perhaps especially, in familiar environments.

To practice, Damosa recommends taking a moment to observe people as they walk by at your local mall. “What sort of patrons do you see? What are they hoping to achieve? What do they seem motivated by?”

Types of Ethnographic Studies

There are several ways the above can be achieved. This infographic from Acquity Group, a customer experience consulting agency, breaks down a process for user-centered design and ethnographic research into three types of ethnographic research methodologies.

  • Field work – The traditional approach to ethnography where researches observe users as they go about their daily lives over a period of time usually lasting anywhere from one hour to several weeks
  • Digital ethnography – A faster approach, this method uses technology to interact with online communities
  • Photo ethnography – Provides users with a camera or capturing system and asks them to take photos of his or her life and record notes, allowing a researcher to observe one’s day to day through their own eyes

User design researches embracing ethnographic techniques may use one or a combination of the three to gather data about a user group—but the key takeaway is that in each of these studies, researches are embracing a “fly on the wall” approach to gather insights in real time.

Why Ethnography?

Ethnographic research invites UX professionals to stop thinking solely about how a user will engage with a product and instead also at how this product might fit into a user’s day-to-day life. It challenges the observation of people on their own and within groups, noting how different environments and groups of people may influence a user’s behavior—for example, how a user engages with social media at work might look much different than how they engage with that experience at home.

Combined with other qualitative and quantitative research methods, ethnography can help to find and establish a deeper meaning. By understanding psychological, social and cultural motivators and influencers, designers can create products that fit more organically into a user’s life and lifestyle.

All you have to do is open your eyes and observe.