Best Practices

Speaking One Language: A UI/UX Glossary for Designers and Developers

Mediacurrent Team — Wed, 09 Sep 2020 13:33:45 +0000

Speaking One Language: A UI/UX Glossary for Designers and Developers

“There are only two hard things in Computer Science: cache invalidation and naming things.” - Phil Karlton

Well, I don’t know much of anything about cache invalidation (I know someone who does though!) but I can tell you from experience that naming things is definitely HARD.

With a shared vocabulary, designers and developers can more easily collaborate with each other and move between teams and projects without having to learn an entirely new language. Over time, we have come to recognize and utilize a lexicon of terms that we collectively understand.

As a full-service digital agency, we have teams that concentrate within a wide variety of disciplines – from digital strategy to design to backend development and beyond. While we may be grouped together by discipline, day-to-day we’re most often working with cross-functional teams concentrated on solving specific problems for a variety of projects and clients.

Without further ado, I present you with Mediacurrent’s glossary of web design terms that we use to reference the different bits, pieces, and aspects of our projects. The first section includes general terms we use day-to-day. The second half describes common components, which work like individual building blocks of pages, that we use from our creative team’s component library, otherwise known as Rain.

General Terms Designers and Developers Use

Atomic Design

A methodology created by Brad Frost for breaking down the parts of your website using a chemistry analogy of atoms, molecules, and organisms that allows designers and developers to roll out higher quality, more consistent user interfaces quickly and efficiently.

Breadcrumb

A more common term, breadcrumbs are a string of links displayed near the top of a page that act as an index of sorts helping to orient the user to where they are in relation to other pages and sections of the site. They are also often hyperlinks, providing a secondary form of navigation to users.

Breadcrumbs on mediacurrent.com

Button

A button is an element on a page that the user can interact with to trigger an event. It’s usually used as a way to confirm an action that the user is taking, like downloading something or submitting a form, and it often stands out from the page, making it a good way to give direction to the user.

A button at the bottom of a form to send a message

CMS

A content management system, or CMS, is a software that lets a user create, edit, and publish content that makes up a website. It typically has a front-end user interface and a deployment system to publish to the site. Some examples include open source CMSs like Drupal and WordPress and proprietary ones like Sitecore.

Component(s)

In most of our conversations, “component” refers to a discrete piece of the front end interface (UI) of a website. Our library of common components is defined in a separate section below.

Content

Text and media elements (images, video, illustration, etc.) that make up components, pages, and websites.

Content in a Card Wide on the Mediacurrent.com Drupal page

CTA

Short for Call-To-Action, this is often a link or button that is the main desired user action for a particular section or piece of content.

A CTA on a resources page in the form of a button

Eyebrow

A small text label that is often used to categorize content. Typically this is placed above a headline, thus the “eyebrow” metaphor.

An eyebrow on a component that describes the content type

Gallery

A component used to display a collection of media items.

Pictures in a grid that make up a gallery component. In this case, the images open in a lightbox.

Header

The top-most portion of a web page. Often includes a logo and site navigation.

The header on Mediacurrent.com showing the logo, site navigation, and search function

Heading(s)

HTML tags that help give semantic meaning to text elements on a web page. Headings vary from H1 - H6 depending on the importance of text.

In this image from a blog, there are multiple headings include an H2 (Use Cases) and two H3s (A/B testing and Bulk Redirects)

List

A group of elements and/or components.

A list of resources that includes components and content

Mockup

Part of the design phase, this is the step where wireframes are given personality to align with brand guidelines and user persona research.

A mockup in Sketch showing layers and design elements

Paragraph

An HTML element that indicates a body of text, intended for displaying text created in a WYSIWYG editor.

A paragraph element seen in the HTML of a blog page

Teaser

Short amount of text used to entice or direct users to explore another section or page of the site.

Teasers driving visitors to learn more about participating and attending events

Viewport

The visible area of a web page on a device – think desktop, tablet, and mobile.

Mediacurrent.com homepage displayed on at a variety of viewport widths

Wireframe

Mostly a planning document, the wireframe is used to map out components and the types of content they contain. Annotations are often added to describe functionality, state changes, or personalization based on user type.

(From left to right) High fidelity and low fidelity wireframes

WYSIWYG

Short for What You See Is What You Get, a WYSIWYG is a common type of field in a Content Management System (CMS) that allows editors to add content to a page with varying degrees of style and element customization. Often editors have the ability to add bold text, italic text, change alignment, add bulleted or numbered lists, insert an image within the text, along with a variety of other controls. HTML source code can often be edited as well.

A WYSIWYG editor on Drupal, where the text formatting can be seen in the editor

Component Library Definitions

The components shown below can all be found in our Rain Component Collection (which are available for download at the end of this blog). They include desktop, tablet, and mobile versions, and when used in your project, can be customized to fit the look and feel of your brand.

Accordion

A heading paired with body text and a hide/show icon. Typically presented in groups as rows, the body text is hidden by default and the section can be expanded by clicking the container that includes the heading and icon. An accordion offers a nice way to declutter an otherwise long page of text and allows users to self select the information they are looking for most.

This accordion component is often used for frequently asked questions (FAQs)

Card

Serves as a teaser to a local or external piece of content. An image or video and a title are required. An eyebrow, subhead, summary text, and CTA link are optional elements that can be included at the editor’s discretion. Cards are often, but not always, presented as a list – see Card List below.

A card component with elements for any situation

Card List

A list of any number of Cards. Size and spacing are dictated by the number of Cards added and the size of the viewport.

3 card components displayed in a horizontal list

Card List Wide

A summarized list of content, provided by the most recently added by default. Common uses might be a search results page or a staff directory.

3 wide card components in a vertical list

Card Wide

Identical specs as the Card but presented horizontally at desktop viewports with the media on the left and the text elements on the right. Stacks vertically at mobile viewports. Unlike the Card, this component is used best individually to highlight a single item or piece of content.

A card component with elements stacked to the right

Carousel

Displays a group of Hero components in an interactive carousel using slick.js, which provides a variety of customization options. Also often referred to as a “slider”.

A component that allows users to navigate through multiple Hero components (see Hero below) one at a time

FAQ

Question and answer pairs with an optional link.

Styled headings and paragraphs in a component display question-and-answer information

Form

A component that presents Infield Top Aligned form fields to the user. Frequently implemented with Drupal’s popular Webform module but also often integrated with 3rd party services like Eloqua, Marketo, Pardot, etc.

A form component requiring a name, email, subject, and message along with a button to submit

Gallery Carousel

A media gallery that presents a carousel of large images with thumbnails below. Accepts both images and videos of different sizes.

The thumbnail images below the main element can be used to navigate through the items in the gallery

Gallery Lightbox

A media gallery using the Colorbox jquery plugin or similar other plugins, which provides a variety of customization options, accepts both images and videos of different sizes.

When gallery items, like the ones shown, are clicked, the full item opens in a lightbox

Hero

A teaser composed of a large image with a headline. Often displayed at the top of a page. In some cases a hero may be a collection of items acting as a Carousel (see Carousel above).

A large visual component with optional text that is most often displayed at the top of a page

Map

A Google Maps embed. Presentation options include either a full width embed or a 50/50 layout with the map embed and address information as text.

The section of a page that displays a physical location on a map, with or without an address

Media

Image or video with optional caption text.

A large component to highlight an image or video with an optional caption to provide more information to users

Quote

A quote with author attribution. Often used to add testimonials to informational product and service pages. Quote text and author name attribution are required. A job title and headshot are optional.

A basic quote component with author attribution and image

Download our Component Collection

Along with this handy glossary, we have also packaged our collection of components as Sketch symbols that you can download today to jumpstart the design phase of your next project. The wireframes correspond with the information architecture that comes out-of-the-box with Rain but can be modified to suit your needs. Get them today by filling out the form below. Now, put on your galoshes and build some websites!

Mediacurrent Team Wed, 09/09/2020 - 09:33

Persona

Marketer

Services

Design/UX

Tags

Development.

Design

Best Practices

Marketing

Good Form: 6 Tips for a Smooth Sign-up Process

Cheryl Little — Fri, 15 Mar 2019 17:41:03 +0000

Good Form: 6 Tips for a Smooth Sign-up Process

A lot of effort goes into engaging your visitors to ‘Sign-up’ or ‘Contact’ you. You send them a warm and fuzzy invitation to complete the form, tell them all the great reasons why they should complete the form… but who likes to complete a form? Guarantee a smooth sign-up process and increase the completion rate of your webforms with these six tips.

#1 Make it Flow

Before you begin designing that web form, it is always good to create a User Flowchart. Working to establish the form completion process from start to finish, a flowchart will help you:

Determine what information is needed (and when)
Decide what actions and interactions are appropriate
Determine the order of actions
Make considerations for new patterns to aid the completion process

A User Flowchart can begin with a simple Flow Outline, which can then be placed in a flowchart diagram and later illustrated using low fidelity paper prototypes to find the most natural set of actions. When creating the outline consider the following:

The Business Objective

What is the main objective of the website for achieving successful completion of the form? (ie, we want to gather as many email addresses as possible.)
What is the required information needed from the person completing the form? (ie, we need their name and email, and since our site is only for adults we also need their birth date.)

The User Persona

Take advantage of the information gained from the User Personas to focus on the user’s various needs and considerations. What problem do they want to solve and how can this form help them?
What devices do they access most frequently to complete webforms? It’s good to know in advance if most of the users complete forms on their mobile phones and/or if they have inferior internet connectivity.

The Entry Point

When designing a User Flowchart, keep in mind the point of entry. Perhaps they arrive after clicking the Call to Action on the homepage. Often webforms are a part of an email or social media campaign, or the user arrives at the form after an organic search. The users should be treated differently based on where they come from, and may need extra context to reiterate the goal of the form to help them get orientated when they arrive. Consider all possibilities.

#2 Keep it Short and Sweet

Don’t ask for information that’s not needed. Your subscription or contact form — or any form that gathers basic information — should only ask for the bare necessities needed in order to accomplish that goal. People will usually stick around long enough to enter their name, email address and password. Anything more than that should be the absolute minimum amount of information needed, with further data obtained in follow-up communications or by implementing a multi-step form (see tip #3). No one enjoys completing a form, so keep it as simple as possible! Neil Patel found that three form fields was the optimal number. Pegasystems, a Mediacurrent client, leveraged third-party integrations on their Drupal 8 site to pre-fill form fields with data and improved the user experience for returning visitors.

Reducing the number of form fields can increase conversion rates by 26 percent.

Email Address

Forward thinking email form fields provide suggestions for fixes when the email address has been entered incorrectly. … Did you mean @gmail.com?
If you include an auto fix for mistyped email addresses you won’t need to require the user to enter it twice. Otherwise, it’s is a good approach to provide the extra guarantee that they’ve got it right.
When the form is for creating an account or signing up for a newsletter, a current practice is to use the email address for the account instead of providing a separate username. This will cause less frustration with creating one that is not already in use, as well as remembering it every time they login.

Name

The person’s name is really only needed in instances where account personalization or custom communication is used. A frequent approach is to provide one field for their full name. This is a bonus since some users may have more than two words that make up their full name, and one field takes less time to complete (especially on mobile devices). Check first to see if the system requires the first name to be isolated for marketing purposes.

Password

Enough with the 'confirm password' already! They will lower your conversion rates. Give the user the option to actually SEE the password they’re entering with a ‘show password’ toggle, and they won’t have to enter it twice.
Include a Password Strength Indicator. You can get creative with messaging to encourage users to try harder when creating a more secure password like Geeklist does: “Crack Time: 5 minutes”
Depending on the level of site security, another time-saving feature is the ability to never have to enter their password again with the ‘Remember Me’ feature.

#3 Multi-step Forms

Single-step forms are the most common type of form found on a website. Sometimes, however, using the minimum amount of fields will not accomplish the goal of capturing essential user data. Instead of simply adding more fields to your one-page form you should be aware of an important point:

Multi-step forms have been found to increase conversions by as much as 300% (without increasing website traffic).

Multi-step forms convert well for several reasons:

Simplicity

Through the use of progressive disclosure design techniques, we can improve usability when only the minimum data required for a task is presented to the user. Multi-step forms provide the ability to break up a longer form into manageable steps so the user is not visually overwhelmed with requirements at the beginning or during the process. By including only one or two questions per step with a manageable number of steps overall will improve the user experience and significantly increase the chance they will complete it.

Reduced Psychological Friction

Multi-steps with a simplified interface allow the opportunity to use low-friction language in order to reduce psychological friction. In order to encourage the user to become immersed with an energized focus on the activity, we must always seek to minimize disruptions and use language that puts them in a positive state of mind.

Orientation

Progress bars encourage form completion. The most common use of visual progress trackers is when conducting an online purchase since those are often broken into a multiple-step process. It answers the questions the user may have during completion:

How long will the form take?
What comes next?
Is anything happening?

Displaying the steps required to complete the form along with where the user currently is at in the process will help manage their expectations and keep them oriented throughout.

Investment

By using the approach of requesting general information at the beginning of the form and moving towards more sensitive information requests towards the end of the form, the user feels more invested and is therefore more likely to complete.

Conditional Logic

Longer forms will sometimes benefit by using conditional logic in order to personalize the experience. The user is provided with specific questions based on certain responses therefore eliminating irrelevant information retrieval while simultaneously obtaining more targeted data. Save them valuable time and customize their experience, and they will likely reward you by clicking the submit button.

#4 Make it Easy to Read

Including the labels and inputs, consider the context being used for all text on the page and work to ensure your font sizes are large enough to be legible on all devices. The amount of content on the page should be considered while also using best practices for accessibility.

Recent trends are a 14px font size at minimum.
When specifying a 16px font size for mobile devices, iOS will not zoom in when the user taps the field, because it’s not needed. This approach can be less distracting especially when there are multiple form fields on the page.
Consider the maximum amount of characters that will be needed in all cases to ensure enough room is provided to complete each field. For example, some zip codes in other countries use a varying number of digits.

#5 Inform Everything

Label All Things

The label of the form field you want the user to complete should ALWAYS remain visible. The labels can be placed outside of the field near the top, right, or left — or even better — use the Infield Top Aligned Label. This popular approach has been found to be the quickest to scan, has the best flow, and takes up less real estate. The labels are placed inside of the field, jumping to the top left corner as the user begins typing. Either way, at no point should the user lose sight of the information that’s needed inside of the field.

Inline Form Validation

Inform the user as they progress if anything has been entered incorrectly or if a field is missing information. Don’t make them click the ‘Submit’ button at the end of the form only to receive a bunch of red text telling them what they have to re-do.
Micro interactions such as a simple green check or a red ‘X’ along with a brief message as the user completes the form will improve the workflow.
Tell them if their CAPS LOCK IS ON.

Required or Optional?

Inform the user which fields are required and which are optional for the form to be accepted. An asterisk is often used to designate required information, but they are ignored by screen readers so make sure the required fields include the HTML5 ‘required’ attribute or the aria-required set to true.

Field Details

Explaining the information needed for each field is another great approach. If your Registration Sign-up Form will require a password with at least 6 unique characters with 2 of them numbers, tell them! Does the phone number field require a +, or a country code, or an area code? Tell them or show them.

Progress Bar

A form that’s broken into logical steps is easier to complete. If there are multiple steps that require multiple screens to complete, add a progress bar so the user knows where they are in the process.
If possible, add a link to the completed steps in the progress bar so the user can go back if needed.

Safety

Make your users feel safe during sign-up by informing them about your terms, policies, or rules.
Ensure them you will not share their information or spam their email.
Provide an easy way to cancel or opt-out at any time, without much effort.

#6 Must be Mobile

While optimizing your site for mobile devices, any forms on your site should also be carefully considered. Not only are the screens smaller, but often the connections are slower, and entering text can be a bit tricky, so reducing the number of required fields is especially important. Luckily, recent innovation for mobile forms have provided modern solutions and compression techniques that could actually encourage sign-up on a mobile device:

Predefined DropDowns

Whenever possible, avoid open input fields and provide a dropdown list instead for easier completion.
Dropdown selections should be written as they would normally display (ie, Credit Card expiry date: 01/20).

Collapsible Menus

This really helps when multiple offerings are available with details for each.

Predictive Search Fields

As the user begins typing the keyword, a list of possible results is provided.

Calendar Tools

Choose a calendar that is easy to use, with big targets that help to avoid user input errors

Combine Inputs When Possible

Providing only one field for a ‘Full Name’ instead of one for ‘First Name’ and one for ‘Last Name’ will speed up the form completion process and reduce user frustration.

Automatic Advance

The system should recognize when a date or email has been entered and take the user to the next field automatically, whenever possible.

Buttons That Engage

The ‘submit’ button should use a strong command verb that provokes emotion or enthusiasm, such as ‘Sign-Up Now!’
Use bright, engaging (and accessible) color combinations. Color changes on tap add even more visual information about the progress.
Ensure the tap target is large enough for users with big fingers or who have difficulty being accurate. Apple's iPhone Human Interface Guidelines recommends a minimum target size of 44 pixels wide 44 pixels tall.

Final Word

Achieving a smart form design isn't always easy, but it's well worth the effort.

What are some great examples of forms you've seen?

Editor’s note: This post was originally published on November 14, 2016, and has been updated for accuracy and comprehensiveness.

Cheryl Little Fri, 03/15/2019 - 13:41

Tags

Drupal

Design

Best Practices

Redirects

/blog/good-form-5-tips-smooth-sign-process/
/blog/good-form-5-tips-for-smooth-sign-up

[New ebook] Your Go To Guide For Website Accessibility

Ally DelGuidice-Bove — Thu, 31 May 2018 15:38:35 +0000

[New ebook] Your Go To Guide For Website Accessibility

At Mediacurrent, we believe that the web should be accessible to everyone.

Our new guide is designed for content editors, marketers, developers, and key stakeholders seeking to expand their knowledge of website accessibility, learn how a holistic approach to website accessibility can strengthen an organization, and take advantage of actionable steps to improve their website.

Topics include:

The Accessibility Lifecycle
Strategy: Data Drives ROI
UX & UI Designers: Gatekeepers of Functionality
Back End Dev: A Solid Foundation
Front End Dev: Bring the Pieces Together
The Integral Role of Content Editors
& more!

Download Your New Go To Guide For Website Accessibility:

Ally DelGuidice-Bove Thu, 05/31/2018 - 11:38

Tags

Redirects

/blog/new-guide-your-go-guide-website-accessibility/

Friday 5: 5 Myths Busted about Content Strategy

Mark Casias — Fri, 25 May 2018 17:32:11 +0000

Friday 5: 5 Myths Busted about Content Strategy

Happy Friday everybody! This week Ally DelGuidice-Bove joins us to talk to us about 5 Myths about Content Strategy.

Mark Casias Fri, 05/25/2018 - 13:32

Services

Tags

Mediacurrent Icon Library Development

Becky Cierpich — Wed, 28 Mar 2018 16:54:51 +0000

Mediacurrent Icon Library Development

It’s been said that a picture is worth a thousand words. In the digital age pictures, emoji, and icons are worth that and so much more. Emoji are considered by some to be the new body language. Google recently scrambled to fix a hamburger emoji that had the cheese depicted below the burger, a clear-cut culinary catastrophe and a faux pas that competitors Apple and Microsoft had not made.

It may seem to border on (or even exceed) the ridiculous to make adjusting a single errant emoji a company’s top priority, but users have strong feelings about this sort of seemingly negligible detail. These feelings don’t usually surface until someone pulls the rug out from under their comfortable experience, like Spotify did when it changed its icon’s color to a slightly different shade of green a few years ago, causing an uproar.

Emoji, and their cousin, the icon, are a big part of our digital lives whether we like it (or realize it) or not. These ubiquitous little buggers can charm and delight us or lead us dreadfully astray.

Why do icons matter?

There are a lot of uses for the noble icon out there in the digital world. At their best (and their simplest), icons are quick visual summaries of complicated concepts that make it easier for users to perform interactions with applications such as activating functionality and with content such as scanning text.

Users are busy and brains aim to be efficient by ignoring unnecessary items. So as UX designers, we aim to make their experience as clutter-free and comfortable as possible. Icons are a boon to this goal when used with discernment.

Why was it important for Mediacurrent to have our own icon library?

When redesigning mediacurrent.com, we knew we wanted to communicate succinctly and memorably to our audience, in a fresh voice reflective of our newest passions and the latest things we’ve learned. Freshly minted, custom-drawn icons were a key part of displaying our uniqueness as well as our values.

“Details matter, it’s worth waiting to get it right.”

- Steve Jobs

Just like the packaging design for the iPhone, or the detailed stitching on a good pair of jeans, attention to detail sends a distinct set of messages: We are passionate about what we do. We care deeply about the quality of the work we produce. We think it’s worth taking the time to do it right.

Another one of our core values is displayed proudly in an individual icon. The icon we created to represent “culture” is an abstract representation of a team of rowers. This analogy is well known within our company, as our success comes from teaming up and working closely together.

What was the process like?

We approached this internal work much like any other design project, in fact! Beginning with a miniature discovery phase we covered the following bases.

Gathered technical, functional specs. The icons were to be used not just on the website by developers and content editors, but by marketing and sales professionals in presentations and reports. What size and type of icon files would suit all of their needs and ideally, make their jobs as easy as possible?

Created and trialled prototypes. Various export files were produced and tested in the applications they were destined for to assess factors such as resolution, scalability, and the ability for users to easily change the color of the icons.

Performed usability testing. Once a concept for the export formats was determined, a small set of icons was generated for testing by a representative group of the end users themselves. Based on these prototypes, the users affirmed the design direction as well as the functionality of the icons.

Itemized deliverables. A full list of icons needed was created, complete with references to previous ways we have illustrated these concepts, and inspiration for possible new ways we could go about it. An hours estimate was created for the work, and resources were allocated to the task.

And now...the fun part!

Once a solid process had been validated, it was full steam ahead. The icons were lovingly crafted in a state of flow in Abode Illustrator using the pen tool. You can experience this nerdy “rush” yourself by playing The Bezier Game!

Of course, no creative project would be complete without peer review. We are very fortunate here at Mediacurrent to have a robust collection of brilliant folks from designers to digital strategists to marketing experts to many developers with backgrounds in design. We are committed to being available for each other for quick reviews any time a colleague is stuck or just wants general feedback. This is the kind of supportive environment in which excellence thrives.

Happily ever after

The icons stacked up steadily and now feature prominently in Mediacurrent’s latest sales and marketing materials as well as on our redesigned website. Favorites include those whose inspiration came from the realm of science fiction, fantasy beasts, and playthings.

What’s next for the icon library?

It’s not the end of the story for these icons! While they (thankfully) are not likely to have lives of their own like some emoji, we will continue to add to our set. We plan to release it under an open-source license on GitHub and will gladly take requests from the community for additional icons they might need as they use these in their own projects.

Becky Cierpich Wed, 03/28/2018 - 12:54

Tags

Services

Best Practices

UX Design Evolution: Top UI/UX Design Trends for 2018

Becky Cierpich — Mon, 08 Jan 2018 21:56:39 +0000

UX Design Evolution: Top UI/UX Design Trends for 2018

As we begin a fresh, brand-spanking-new year, several UX design practices and technologies stand out as the most exciting and relevant. While they are not all necessarily bleeding edge or super trendy, these considerations are becoming more and more vital to our clients and will be at the forefront in the year to come and beyond. Here’s an overview of what we’re watching, how the UX landscape is shifting, its impact on marketing and consumer experience, and what it means to you!

Data-driven UX

What do you imagine when you think of a “designer”? Likely an artsy sort of person comes to mind, a wizard who can wave a wand and bring all the users to the yard. But I’m here to tell you - it’s not wizardry. It is, in fact, science!

Across the industry, much like scientists, designers are conducting controlled experiments and collecting data to determine the best approaches for presenting information and guiding users through interactions with digital systems. Following the latest user research is to designers what keeping up with medical journals is to doctors.

It gets even better. Professional digital strategists and data analysts can review your business and your website and make sense of all of this data for you. From competitor analyses to SEO audits, they collate numerical resources to produce a set of measurements for success, and a plan to get there. This is the mana that fuels the designer’s sorcery - and it’s really just numbers...and OK, maybe a little magic.

Evolving Navigation Patterns

Speaking of data-driven design, after extensive user testing, Spotify ditched its hamburger menu in favor of a strip of icons and titles along the bottom known as “tab bar navigation.” This is something that Facebook had already done a few years prior. Again, after extensive testing.

Spotify tested the tab bar navigation pattern to see how it impacted user engagement. They found that users with the tab bar ended up clicking 9% more in general and 30% more on actual menu items. The tests also revealed that reducing the number of options in the tab bar increased the reach of Spotify’s programmed content, the company says.

It’s certainly worth noting shifts in application design when choosing responsive website navigation patterns following a mobile-first approach. Regarding the hamburger menu, Nielsen Norman Group has found through testing that “Discoverability is cut almost in half by hiding a website’s main navigation. Also, task time is longer and perceived task difficulty increases.”

But by all means, let’s not declare hamburger menus dead and gone. Like the world’s most notorious font, Comic Sans, there are appropriate and inappropriate uses for the familiar 3-bar stack. The purpose of navigation, lest we forget, is to help a user navigate a website. It answers the questions “Where can I go?” and “What can I do?”

With data in hand and your company’s vision for the future in mind, information architecture and navigation can be crafted to prioritize key actions and content. This can still sometimes mean a hamburger menu because not all companies are Spotify. Would you like fries with that?

Persona-driven UX

Hand-in-hand with data-driven UX, goes persona-driven UX. What is a persona? A persona is a made-up character synthesized from patterns observed in data collected from large numbers of users. Identifying key personas allows project teams to focus on the primary user journeys.

There is also the notion of building atypical or “Rogue Personas” which act as edge cases to help establish boundaries (in the case of the Internet Troll or Phisher), fail safes (in the case of the Bumbling Noob), and highly accessible experiences for individuals with vision, hearing, or cognitive impairments.

The data used to build personas comes from a number of sources including surveys, interviews, and analytics reports. The data is not only used to create profiles but to establish a set of goals for each persona. These goals are the stops on the user journey for which designers will build guideposts.

Once a design has been prototyped, user testing can be done with individuals who match the demography of the personas, to validate or refute the assumptions, and to gather useful feedback. At this stage of a project, it can really start to feel like a fun science experiment!

Assessing a design as it develops against the wants and needs of these meaningful archetypes is a powerful tool. Personas help us ask the right questions as we work to create user experiences and to answer those questions from the perspective of the primary personas, rather than from our own.

VUI - Voice User Interface and Accessibility

“Alexa, will I need an umbrella today?”

How many seconds would you save asking a question out loud rather than picking up a device to click or tap to get answers? Especially considering the distractions you may encounter on your device - it’s all too easy to sometimes forget why you picked it up in the first place!

The screenless user experience is on the rise. It is often more convenient for users to interact with technology hands-free, with no visuals required. Driving, cooking, hosting a party - why stop what you’re doing when you can utter a voice command or ask a question?

From Apple’s Siri and Microsoft’s Cortana to Google’s Assistant and Amazon’s Alexa, VUI is on the rise. It’s not only the UI for Apple’s AirPods, Google Home, and Amazon’s Echo, but it’s even being built into devices like speakers, televisions, vacuum cleaners, and lightbulbs.

According to Gartner, by the end of 2017, room-based screenless devices will be a part of more than 10 million homes. By 2019, they predict, 20% of user interactions with smartphones will take place via Virtual Personal Assistants. By 2020, they predict, 30% of web browsing sessions will be done without a screen.

As UX designers, we are constantly challenged to develop experiences that are consistent across a great many channels and VUI is just another of those - and a very exciting one! Interacting with Alexa can feel like a science fiction film come to life!

The good news is that websites built with accessibility for the visually impaired and with Search Engine Optimization in mind are already well-placed to be highly functional when approached through VUI. And good UX is good organization, so well-designed websites will play well with Alexa and her ilk.

More Personalized Experiences

Users of Amazon or other online shopping venues have long been accustomed to product recommendations based on their shopping habits. And certainly marketers know how to target us online with advertisements based on our browsing history.

Users of Netflix and other streaming services are happy to scroll through lists of content related to what they’ve watched previously. But as a result of significant progress in AI and machine learning, a whole new level of personalization is here, creating more intimate experiences for users that build trust and secure brand loyalty.

Entire teams at Spotify focus on analyzing songs and listeners through collaborative filtering, machine learning, DSP and NLP approaches. They are constantly crawling the web for artist information, scanning each note in every one of their millions of songs for acoustic signals, and modelling their users' tastes with cluster analysis based on their historical and real-time listening patterns.

It is Spotify’s data-driven playlists that set it apart from its competitors. As of last year, they had millions more listeners than their closest competition. Of course, Pandora’s Music Genome Project has been categorizing tunes based on hundreds of unique characteristics since the early 2000’s. But Spotify wins because of how they leverage their data to generate customized playlists for each user. For example, “Your Top Songs of 2017,” which can be a very emotional (or cringe-worthy) walk down memory lane!

Personalization is going ever deeper. Netflix recently revealed that it is leveraging technology to assess not only what shows to recommend to their users, but what images to display along with those recommendations, customized to each specific user’s taste.

As personalization becomes smarter and more ubiquitous, UX professionals will be able to design websites not only with persona-based journey patterns, but websites that learn and adapt to each individual user. Algorithms will decide what content is displayed based on the unique interaction history and behavior on the site for any given visitor, allowing for a truly customized experience.

Of course, any potential privacy concerns should be anticipated and addressed at the outset in a way that is subtle but readily available. Personalization, when done well, can feel warm and “right” - it connects the user to the service on an emotional level. “They know me.” The user feels welcome and at home with the technology. Of course this is good for business, but putting that aside, creating these kind of deep, human connections is the greatest joy the UX field has to offer.

In conclusion, as a new year dawns, it’s wonderful to be a part of a world of technology that is making people’s lives better: more convenient, more connected, more accessible to all.

Becky Cierpich Mon, 01/08/2018 - 16:56

Tags

Annotate to Communicate

Cheryl Little — Mon, 04 Dec 2017 15:34:05 +0000

Annotate to Communicate

Someone once said, “if you have to explain the joke, it takes the fun out of it.” Well, the same can be said for designing a website. Explaining the important and sometimes technical details can be a tedious process many designers would avoid if possible. But when it comes to communicating the form and function of the user experience through wireframes, explaining each element can make or break the project. It’s always a good idea to include annotations.

Types of Wireframes

First, let’s start at the beginning to avoid vague deliverables. Does every UX designer you’ve met create similar looking wireframes? There are about as many different styles of wireframes as there are websites on the world wide web, so chances are the term ‘wireframe’ by itself really isn’t saying much to your client.

Most folks understand a wireframe to be a basic layout for a web page, in shades of grey. But other than that, what else should they expect? Will it be a basic paper drawing or a functional computer drawn detailed webpage? Usually, the type of wireframe provided is based on the budget and pace of the project, along with considerations for the type of site to be built, the scale of the overall project, and the depth of the sitemap. Sometimes more than one type of wireframe is used when user testing is needed. Once the most appropriate wireframe approach has been determined for the project, it’s a good idea to convey the definition in your deliverable documentation. Here is an example:

Low Fidelity Wireframe

Can be paper sketches or computer drawn.
Abstract lines and shapes that represent spatial elements on the page.
No actual copy is used, just lines to represent text.
Descriptions for content and functionality (as needed) are included directly on (or near) the elements.

Medium Fidelity Wireframe

Shows the content framework, layout structure, and hierarchy of key elements using basic lines, shapes, and boxes to represent images, icons, etc.
Copy inserted where available, otherwise lorem ipsum is used as a placeholder.
Presented in shades of grey with no styles or graphics applied.
Functions have labels.
Descriptions for content and functionality provided in annotations.

High Fidelity Wireframe

More details are included for each component along with additional views for features like modal windows or dropdown filters.
May include specific typeface choices to begin to show hierarchy.
Spacing between elements is further refined.
Determinations between image vs. illustrations may be eluded to.
Remains without color.

Why Annotations are Important

So you’ve just created a beautiful set of wireframes, had a great client presentation, and they’ve approved them. Great job! But that’s only part of it. Just because you’re ready to share the wireframes with the developers so they can begin their technical discovery, it doesn’t mean they have the same shared understanding about them as you and your client. Often times in an Agile development process, not everyone involved is present for every meeting during the discovery process due to the pace of the project and/or budget. Even when everyone is present, we don’t want to make them rely on sheer memory alone for how each component is going to be built or how it will function. That’s where the ever-important Annotations come in. By providing fully annotated wireframes to both developers and your client will help to keep everyone on the same page for what to expect at launch.

The Art of Annotating

Once those medium or high fidelity wireframes have been created, it’s time to add the important information so we can ensure everyone has a clear understanding of the functionality that is expected for each component. The most important thing to remember when annotating your work is that it should speak for you when you’re not there.

Where Should The Annotations Go?

Typically, annotations are placed on the side or the bottom of a wireframe in a numbered list of descriptions with corresponding numbers next to the actual element on the wireframe. The language is kept brief in order to include as much information as possible within a limited physical space. It’s helpful to use color combinations that stand out from the wireframe to avoid confusion between elements. And when you have multiple audiences you need to address, it’s helpful to tailor your annotations by creating different sets for each.

Who Are The Annotations For?

Not that you need to include them all, but there are typically up to 5 different audiences who have different needs but may benefit from wireframe annotations:

The Client wants to understand how each element incorporates their business goals. When designing for Drupal, annotations are also the perfect place to highlight when certain components will be manually curated or fed automatically to ensure the expected maintenance after launch is clear.

The Front-End Developer wants to see where the images and icons are placed, what size and aspect ratio they are, defined page margins, amount of padding between elements, and the functionality for all interactive components.

The Back-End Developer can benefit from notes on image sizes, functionality for interactive components, manually curated elements vs. automatic feeds. They can also incorporate helpful tips for the content author with specific direction.

The Copywriter can write more freely if you’re able to provide recommended character counts for each section within the component: Title, subtitle, descriptive text areas, etc. Notes for optional elements will also improve the quality of the final copy. And when content will be auto-fed, note it so they can move on!

The Designer for those instances where wireframes and designs are handled by different people, it’s helpful to include design direction or live links to reference examples. You’ve been involved in conversations with the client during wireframe development and understand their vision. This is the opportunity to communicate that information.

What Information Should The Annotations Include?

Don’t think you’re being helpful if you annotate everything, without a cause. The last thing you want as an end result is a wireframe that’s so overloaded with annotations it looks like the plans for the next spaceship launch. It can actually be more confusing if too many notes are present. Smart wireframe design can alleviate the need for certain descriptive annotations when you include the descriptions within the titles of the element itself:

The title ‘Logo’ or ‘Icon’ sits inside of the circle.
The Button title reads ‘Optional, Editable Button’.
Required form fields have a red asterisk.
The opening ‘lorem ipsum’ descriptive copy instead starts with “This is an introductory paragraph that talks about scientific discoveries”.

What should you annotate?

Anything that is not obvious just by looking at the wireframe.
Conditional items: when and how to display them.
Cross-device differences. An example would be when an image may display on desktop but not on mobile. Or when an image may be replaced with one of a different aspect ratio on mobile, etc.
Logical or technical constraints: maximum image size, longest possible password field length, etc.
Any hidden details: content behind additional tabs, items in a drop-down menu, etc.
Functional items: links, buttons: expected behavior when the user clicks. This also includes how filters and form fields should respond.

Here are a few common areas of interaction states, feedback, and gestures that benefit from detailed annotations:

Dropdown Lists

Include the expanded states of the drop down menus on a separate page with annotations.

Dynamic Content

Explanations for things like search results listings, news content that will auto feed, image or video galleries, pagination.

File Uploads and Downloads

Provide interactions for the file upload. This may include things like file upload dialog, file upload progress bar, file upload completion notice.

Messages and Modals

Interactive feedback for form validation, confirmation, warnings, alerts, failed actions, errors, etc.

Numbers

Account for the longest number of digits that will be needed for any confined spaces. Example: Should it display as 100,000,000 or 100M ?

Titles and Labels

Account for the longest names potentially possible. Provide solutions for cases when the lines should not break: ie, within tables, accordions, filters, etc.

Tooltips

Provide visual reference and implied behavior for tooltips and try to account for the maximum characters that will be needed.

Gestures

Especially when annotating mobile wireframes, your intentions will not be lost if you add directional notes for specific gestures, such as:

Single-click (or tap)
Double-click (or tap)
Right-click (or tap)
Hover (provide mobile alternative)
Swipe
Pinch & spread
Drag & Drop
Default link for phone, email, map
External web links

Wrap it Up

Fully defining the wireframe process at the beginning of the project will clarify expectations for the client. Wrapping those completed wireframes in an annotated package will help to keep everyone involved working towards the same goals, and avoid disputes, disappointments, and costly reworks down the line.

Cheryl Little Mon, 12/04/2017 - 10:34

Tags

Dynamic Email Submissions for Webforms in Drupal 8

Chris Runo — Thu, 30 Nov 2017 20:14:17 +0000

Dynamic Email Submissions for Webforms in Drupal 8

Webforms in Drupal make for an easy way to get user submitted data. There are a handful of ways you can organize that data. You can even have the form submission data be sent to an email address. In some cases, you may want to have that data be sent to a different email address based on submitted data or a custom setting. Here we will go over one solution for getting webforms to submit submission data over email dynamically.

In this case, we'll start by setting up new webform and content type.

Setup the webform fields:

Create a new webform
Add the desired fields to the webform
Add a hidden field (we'll call this "Email Override" or "field_email_override")

Set up conditional email handlers on the webform:

Go over to the "Email/Handlers" tab and add a new Email
Set the "To email" to a default value
Go to the Conditions tab for this Email
Set the "State" to "Enabled"
Set the "Element" to "All"
Add a "Trigger/Value"
Select the "Email Override" field we created earlier and select the value as "Empty"
Add a new "Email" in "Email/Handlers" tab
Set the "To email" to the "Email Override" field in the select list
Follow steps 4-6 for this Email setting
Then select the "Email Override" field we created earlier and select the value as "Filled"

Set up the content type fields:

Create a new content type
Add a webform embed field and set the default value to the newly created form
Add another textfield (we'll call this "Email Submissions To" or "field_email_submissions_to")

Now that our configuration is all set up, we can get to the code snippets that will actually drive the dynamic email submissions.

First we want to set up a hook_form_alter() implementation to get and check the email submissions to field value. In a custom module do this:

/**
 * Implements hook_form_alter().
 */
function my_module_form_alter(&$form, FormStateInterface &$form_state, $form_id) {
  // Use regex to make sure we are using the correct form.
  if (preg_match('/webform_submission_my_webform_node_/', $form_id)) {
	// Get the node for the page the webform is on.
	$node = \Drupal::routeMatch()->getParameter('node');
	// Check that this node is valid.
	if ($node instanceof \Drupal\node\NodeInterface) {
  	// Get the value of the email submissions to field.
  	$email_override = $node->get('field_email_submissions_to')->getValue();
  	// Check that the value exists.
  	if (!empty($email_override)) {
    	// Form values for webform can not be set in hook_form_alter(), so pass to a validation function.
    	$form['actions']['submit']['#validate'][] = 'my_module_email_override';
  	}
	}
  }
}

Now that code is setup to get and check the email submissions to field value, we need to process that value and pass it to the webform using the hidden field we created in the beginning.

/**
 * Changes the TO email value depending on the parent node's email submission
 * field value.
 *
 * @param array $form
 *   Form array.
 * @param \Drupal\Core\Form\FormStateInterface $form_state
 *   From state from the form.
 */
function my_module_email_override($form, FormStateInterface $form_state) {
  // Get the node for the page the webform is on.
  $node = \Drupal::routeMatch()->getParameter('node');
  // Check that this node is valid.
  if ($node instanceof \Drupal\node\NodeInterface) {
	// Get the value of the email submissions to field.
	$email_override = $node->get('field_email_submissions_to')->getValue();
	// Check that the value exists.
	if (!empty($email_override)) {
  	// Set the value of email submissions to field to the email override field on the webform.
  	$form_state->setValue('email_override', array_shift($email_override)['value']);
	}
  }
}

With this, you should now be able to give your webforms the ability to dynamically set submission emails receiving address. This could be extended even further using taxonomy fields or select lists to get the email address. If you have any suggestions or other ways to accomplish this, please feel free to comment below.

Chris Runo Thu, 11/30/2017 - 15:14

Tags

Scheduling Content Changes in Drupal 8

Mediacurrent Team — Wed, 21 Jun 2017 12:33:25 +0000

Scheduling Content Changes in Drupal 8

Looking to schedule content for your Drupal 8 site? With Drupal 7, there are a few options available such as the Scheduler module or a custom-built solution. One of the main issues with Scheduler module is that it’s not very flexible, meaning the only scheduled operations that could be performed are to either publish or unpublish a node.

In Drupal 8, Scheduler module is still around, although still limited to only publish or unpublish operations. Of course, there is always the option to custom build a solution, but I’ve recently come across an even better alternative that provides a flexible way to schedule content changes. The Acquia-funded contributed module is called Scheduled Updates. In a nutshell, it allows you to perform scheduled operations on essentially any entity field values at a specific date/time. Another nice feature is that it allows you to configure multiple updates, such as publish a node at a specific date/time and then unpublish it at a later date/time.

To install and configure the module, follow the following steps:

Step 1: Download, install and enable

Download, install, and enable the Scheduled Updates module.

https://www.drupal.org/project/scheduled_updates

In a Drupal 8 composer workflow, the module should be added to your site’s composer.json and installed during the `composer install`.

The module can be enabled via Drush, such as `drush en scheduled_updates -y` or via the module list page.

Step 2: Configure Scheduled Updates module

Visit the configuration page under Configuration → Workflow.

For this example, we will be configuring a scheduled job to automatically set an Article node to `promoted` at a specific date/time. This will demonstrate a popular use case that is possible by this module.

Click on Scheduled Update Types
Click on Add Scheduled update type
Give it a label of “Article scheduled promote”
Choose `Entity Type` of `Content`
Set `Update Field` to be `Promoted to front page`
For `Default Value and Date Only Updates”, check the box for `Promoted to front page`. (This tells Drupal that when the scheduled update runs, that it should give the Article node a Promoted status). If we wanted, for instance, to unpromote an Article node, we would uncheck the box for “Promoted to front page”. Also, check the box for `Hide this field for a date only update.
In the Update Reference Options, choose the entity bundle that will be affected by this configuration. We will just check Article.
Under `Reference Field Options`, choose `Create new reference fields to enter updates.`.
Add a label for the field that will be added to the node, such as `Promote on`.
The `Update Limit` can stay at the default
Select an option for `Update Runner`. In most cases, `Latest Revision` is the best option.
Click Save.

Step 3: Manage Fields

If we go to the Article `Manage Fields` page, we can see a new field was created.

Step 4: Manage Form Display

If we go over to the Article `Manage Form Display` page, there are a few options, but for this tutorial, we can leave them unchanged.

Step 5: Create scheduled content

Now, we can create a new Article node and see the Scheduled Updates in action.

Click the “Add new Promote on” button
Enter a date and time when we want the node set to `Promoted to front page`.
Note, with most browsers, there is a really nice date picker for date/time selection.
Click “Create Promote on”.

Now that the scheduled update has been created, save the node.
It will be set to the `promoted` status once the scheduled update job runs during the next cron run.

Step 6: Perform scheduled content updates during cron run

The next time cron runs, we will get this message:

We can also see that the node is now set to the Promoted status on the node edit page.

Known issues:

Drupal is not guaranteed to run cron. Assuming Drupal has cron set to run every 3 hours, at the specified interval, such as 3 hours, cron will run cron every 3 hours if pages are being hit on your site, meaning if your site is getting enough traffic to get the pages hit that often.

To work around this limitation, and to make sure Scheduled Updates (or Scheduler for that matter) works properly, cron can be set on the server, assuming the server allows that sort of access. Depending on the timing and frequency of your updates, that will decide what cron setting you should configure on the server.

https://www.drupal.org/docs/7/setting-up-cron-for-drupal/configuring-cron-jobs-using-the-cron-command

For example, if you create scheduled content on 30-minute increments (one at 12:30 PM, two at 3:00 PM, three at 4:30 PM), you’ll most likely want to have the server automatically run cron every 30 minutes to be sure that cron is run at the right time to kick off the scheduled update.

Resources:

You can find further information at these resources:

https://dev.acquia.com/blog/drupal-8-module-of-the-week-scheduled-updates/28/01/2016/9621

In closing, I hope this blog post demonstrated the benefits of the Scheduled Updates module, such as it’s flexibility with entity field operations, robustness in adding multiple scheduled updates on a single node, and the ease of configuration and user experience.

Mediacurrent Team Wed, 06/21/2017 - 08:33

Main Image

scheduling_content_changes.jpg

Tags

Just Ask: Promoting A Culture of Asking Questions

Lee Nakamura — Tue, 31 Jan 2017 19:24:46 +0000

Just Ask: Promoting A Culture of Asking Questions

I don't remember how the topic came up when my wife and I were visiting with my parents last year, but for some reason, I asked if either of them liked the liver that my mom prepared every so often when I was growing up. As it turns out, neither of them did! I always thought that my dad liked it, and that was why we had it. If I had only asked a simple question back then…

As a developer, I'm sure I've managed to burn many hours over the years trying to figure out any number of sticky technical problems which, if I had just asked, someone could have helped me with. Perhaps I waited too long before I finally asked for help - or maybe I soldiered on until I found the answer all by myself. The trouble is, between Impostor Syndrome and an apparent social taboo against asking questions (not to mention ego), the pressure against asking questions can be enormous. One can easily drop into one or more of the following mindsets: “if I ask that question, I’ll look stupid,” or “they will find out that I really don’t know XYZ that well if I ask that question,” or “I figured this out once before - I can figure it out again!”

So how does a company - or an individual - foster an environment which promotes asking questions?

Make a Statement

For a company as a whole, I believe that management should state that "asking questions is a good thing" - be on the record with that message and state it often. During new hire orientation at Mediacurrent, this point is made both in the context of working through technical challenges during development, as well as when interacting with clients. (Concerning the latter, see Jeff’s excellent post, One Word to Save Your Project.)

Model a Culture of Asking Questions

Beyond stating that asking questions is not only OK but desirable, asking questions needs to be modeled by both management as well as the technical leadership - this reinforces that statement through leading by example. Here at Mediacurrent, the culture is very "pro" asking questions. I've seen everyone from the founding partners through every level of personnel ask questions. The most likely way to see this cultural emphasis play out at Mediacurrent is in our help channel in Slack. Of course, we also have specific client channels, as well as front-and back-end developer channels, and so on, where you’ll see questions specific to a particular project or domain. But on any given day, one might see questions in the help channel about hardware problems, Mediacurrent processes or procedures, apps or tools, etc. Having such a channel is a great way for our mostly distributed team to both get the help they need when they need it and for this important concept to be modeled.

Repeat, Repeat, Repeat

For everyone to be very comfortable asking questions, it really helps to see the behavior frequently modeled at all levels of the company. Many times!

The Result

For us, this has resulted in a stronger culture within Mediacurrent, a culture where collaboration and helpfulness are the rule, rather than internal competition.

If you also find yourself lucky enough to be part of a team where asking questions is encouraged and frequently modeled, then don't hesitate: just ask!

Every so often, asking a question can lead to an unexpected insight or benefit for the larger group. For example, as a young recruit at the Los Alamos Laboratory in 1943 (just one year after he had earned his Ph.D.), Richard Feynman found himself tasked with traveling to the Oak Ridge, Tennessee, uranium enrichment facility so he could go over the design of the plant. Why did he need to review the design? To make sure the facility was not going to blow up due to processing the uranium in an unsafe manner. During his second trip to Oak Ridge, Feynman was presented with a refined design based on the information he gave them during his first trip. His hosts laid out the blueprints for the facility for him to review - but he didn’t know what all the symbols on the blueprints meant! After internally debating what to do for a few minutes, he decided to take a stab in the dark and ask a question:

I take my finger and I put it down on one of the mysterious little crosses in the middle of one of the blueprints on page three, and I say "What happens if this valve gets stuck?" -- figuring they're going to say "That's not a valve, sir, that's a window."

- Richard Feynman, Surely You’re Joking, Mr. Feynman

Even though he had guessed at the meaning of the blueprint symbol, it turns out that Feynman had indeed identified a valve - a valve which, if it had gotten stuck, would have caused significant problems! It was back to the drawing board for the design, and a great example for the rest of us on the value of asking questions.

Additional Resources
Cheers to 10 Years! Mediacurrent’s 2016 Retrospective | Blog
The Best (and Worst) Question in a Drupal Sales Presentation | Blog
Establishing a Remote Workflow | Blog

Lee Nakamura Tue, 01/31/2017 - 14:24

Tags

Company Culture

Best Practices