html-attributes-to-improve-your-users’-two-factor-authentication-experience

There are plenty of opportunities for friction in the user experience when logging in, particularly while entering a two factor authentication code. As developers we should be building applications that support the need for account security but don’t detract from the user experience. Sometimes it can feel as though these requirements are in a battle against each other.

In this post we will look at the humble element and the HTML attributes that will help speed up our users’ two factor authentication experience.

The default experience

When you implement two factor authentication for a web application, perhaps with the Authy two factor authentication API, you will need a form for your user to input the one time password you are going to send them. You might create something similar to the following HTML:

<form action="http://www.webdesignernews.com/sessions/check-2fa" method="POST">
  <div>
    <label for="token">Please enter the code you were sent:label>
    <input type="text" name="token" id="token" />
  div>
  <button type="submit">Check tokenbutton>
form>

This is a good experience already. The has a name and a unique ID and the is using the correct for attribute to explicitly associate with it, which is important for accessibility. You could also wrap the around the for the same effect. With a bit of CSS, this might look something like this:

A web page shown in iOS Safari with a two factor authentication prompt. The standard alphabetical keyboard is open.

However we can progressively enhance this experience with just a few more attributes.

Getting the right keyboard

On mobiles or devices with on-screen keyboards the first thing to notice is that we are presenting the full alpha-keyboard. One time passwords are made of numerical characters so it would be much better to present the user with a number pad.

You might think that switching the type of from “text” to “number” is the solution here:

    <input type="number" name="token" id="token" />

You would be wrong though. This does trigger a different keyboard on iOS, but it still includes a number of useless keys.

A web page shown in iOS Safari with a two factor authentication prompt. This time the keyboard includes numbers and symbols.

Changing the type of field changes the way the browser interprets that field. It could cause errors too; if the two factor authentication code starts with a zero a number field may drop that leading zero.

inputmode

The inputmode attribute changes the keyboard the browser should display without changing the meaning of the data the field collects. We want our to receive text input, but from the numeric keyboard. So instead, add inputmode="numeric"

    <input type="text" name="token" id="token" inputmode="numeric" />

inputmode has a number of other values, including “tel” for telephone numbers, “email”, “decimal”, “url”, “search” and “none” in case you want to render your own keyboard. This article on CSS Tricks has all the details you need for the different inputmodes.

Browser support for inputmode is good for mobile operating systems these days, but a couple of years ago it was in the wilderness. For older browsers there is another trick to trigger the numeric keyboard and include a bit of extra validation for free.

pattern

The pattern attribute allows you to validate the contents of an using a regular expression. Using the pattern [0-9]* tells the browser that we only accept numbers in the field and also triggers the number pad in browsers without inputmode support.

Our HTML looks like this now:

<input
  type="text"
  name="token"
  id="token"
  inputmode="numeric"
  pattern="[0-9]*"
/>

And the keyboard is a much simpler numerical input:

A web page shown in iOS Safari with a two factor authentication prompt. This time a simple keyboard of just numbers appears.

One thing that would make this form even easier to fill would be autocompletion of the one time password.

HTML autocomplete

According to MDN “autocomplete lets web developers specify what if any permission the user agent has to provide automated assistance in filling out form field values, as well as guidance to the browser as to the type of information expected in the field.”

In iOS and Safari on macOS we can take advantage of this to have the browser suggest two factor authentication codes that are sent to the device over SMS. Adding the autocomplete attribute with the value “one-time-code” will trigger this behaviour.

<input
  type="text"
  name="token"
  id="token"
  inputmode="numeric"
  pattern="[0-9]*"
  autocomplete="one-time-code"
/>

With this, our is complete and the experience for the user now looks like this:

A web page shown in iOS Safari with a two factor authentication prompt. There is also a message notification with a two factor authentication code and the keyboard is auto suggesting the code to be filled in.

Other useful autocomplete values

There are many autocomplete values available, covering everything from names and addresses to credit cards and other account details. For sign up and login there are a few autocomplete values that stand out as useful hints: username, email, new-password, current-password.

Browsers and password managers have very good heuristics to find login forms on web pages, but using the username and current-password values make it very obvious. You definitely want to consider using these attributes if you are building a login form with the username and password on different pages.

In a sign up form, make sure to use the “new-password” value as it triggers password suggestions in some browsers.

A sign in form in Firefox. The password field has suggested a strong password.

Autocompleting one time passwords in other browsers

This autocomplete behaviour only currently exists in Safari on iOS and macOS, but the Chrome team is investigating similar ideas to streamline this process. Currently there is an experiment with an imperative SMS Receiver API modelled on Android’s SMS receiver API. This would allow developers to extract the one time password from the SMS and, because it’s in JavaScript, instantly submit the form, saving the user more time.

At the time of writing this API is part of an origin trial which allows you to test it out and feed back to the Chrome team. If this interests you, sign up and give the API a whirl.

Better experiences through HTML

In this post we have seen that with just a sprinkling of HTML attributes we can improve the login experience for our users, particularly on mobile devices.

The element is one of the most interesting HTML elements we have access to. Depending on the attributes it can be a text field, a range slider, a file selector a button and many more.

If you are looking for an even better two factor authentication experience, then take a look at Authy push authentication which cuts out the copying of codes entirely.

Do you have any other tips on improving the login experience for your users? I’d love to hear them in the comments below or hit me up on Twitter at @philnash.

6-tips-to-improve-your-ux-portfolio

Oussama Horchani

Photo by Anete Lūsiņa on Unsplash

So you’re making your UX portfolio? Or, maybe you’re tweaking one you’ve had for a while. You’ve sat in front of your computer for hours and hours, trying to figure out…

  • Where do you start?
  • What do people want to see?
  • What will help make you stand out?

I’ve seen a ton of UX portfolios over the course of my career. And, I’ve interviewed a lot of UX hiring managers and recruiters … so I know how they think. Take a few minutes to read these six tips and make sure you’re addressing what’s important to the people looking at your portfolio.

1. Don’t be ambiguous about your skills as a designer:

Titles in the field of UX mean different things to different people. Don’t just put your title. Be specific about the skills you have. User interviews? Analytics? Prototyping? Facilitating? What are your hardcore skills?

2. Specify what kind of UX designer you are:

Yes, many people are a UX team of one. But, there are distinct areas of UX. Are you a Researcher, Experience Designer, Visual Designer, Content Strategist, Product Strategist, Front End Developer? You have to state the type of design you’re in.

3. Determine what type of role do you want in your future job:

It’s always more attractive to hear someone say exactly what they want. It seems like they are confident in who they are and where they are in their career. Be specific about what you want. Do you want to get into management? Do you want to put a skill to use that’s currently underutilized?

4. Describe what type of company do you want to work at:

Not everyone is cut out for a startup. Some people thrive in a big company and others have the life sucked out of them. Which are you? Get clear about this before you apply anywhere, so you can focus your energy into the positions that suit you best. Also, you’ll want to tailor your portfolio projects to these types of companies.

5. Decide if you want to specialize in a certain area of UX:

Do you want to do more of something? More research? More content strategy? Less visual design? Think about what you love doing right now and what you want to do less of. This will help you figure out what roles to actually apply to.

6. Double-check the projects in your portfolio:

If you say you are a user researcher, your portfolio better have at least one amazing research project in it. And it better be very detailed about the problem, method, process, insights, your specific responsibilities and contribution, and the outcome? Do you provide context for all the visuals?. If you say you have a skill but that skill isn’t reflected in your portfolio, then no one would believe you.

Also, if you’ve been stuck doing a type of work you don’t want to do in the future (eg. a specific industry), then try not to have your whole portfolio be representative of that. Try to have examples of work related to what you want to do in the future, even if that is a mock project you do on your own.

Finally, have someone proofread your portfolio. It seems obvious, but we’re all guilty of this. Catch those spelling mistakes that we all make, including me!

That’s all I have for you! I hope these tips help you improve your UX portfolio and avoid common mistakes that you definitely don’t want to make.

10-tips-to-improve-your-typography-skills

Are you ready to improve your typography and take your game to the next level? Wonder how? Don’t worry, we got you covered! Today we are sharing 10 Tips to Improve Your Typography Skills —the craft of endowing human language with a durable visual form.

“When typography is on point, words become images.”

Shawn Lukas

If you have heard the term typography before but have no idea what it is all about in this article, we will cover that for you. In this article, we will provide you with all the necessary tools and insight you need to improve and perfect yourself at all small and obscure concepts of typography so you can create the best looking website designs. For the uninitiated when you hear typography, you probably think it has something to do with the very complicated specialization, but that’s actually isn’t the case. Actually, every designer uses typography in one way or another when they design creatives.

The term typography is the art of designing, selecting, and arranging type to make words readable. 

The arrangement of the words involves a good understanding of selecting typefaces, line lengths, point sizes, leading (line spacing), and tracking (letter-spacing) and kerning (adjusting the space between pairs of letters). Type design is a closely related technique, sometimes considered part of typography. Oddly enough, most typographers do not design typefaces, and a lot of them do not even consider themselves typographers. Typography is also sometimes used as a decorative device, unrelated to communication of information.

So in nutshell typography stands for:

  • Style or appearance of text.
  • The art of working with text.

Now when you know what exactly this term stands for let’s see how to use typography more effectively in your design projects. You just need to follow our 10 tips to improve your typography skills:

Table of content

There are plenty of tiny details that, when put together, make for great typography design. Some of them are obscure other overlooked, but they are all critical for creating the “bigger picture.”

Context and audience

Typography - Context and audience

When you start choosing fonts, an essential thing to keep in mind and ask yourself is, “What is the main goal here?” 

There are plenty of font choices that will fit a specific need. Each individual font brings its own unique mood to the layout. Whether you choose a friendly, funny, serious, or business-themed font, this solely relies on your end goals and targeted audience. Every single font used has a specific character that conveys a different message to the reader. 

Classic fonts are often used to convey a strong personality and are commonly used for the more mature audience, while the more modern fonts have cleaner and neutral look, usually the better choice for the younger audience. If you choose a font that looks too fun, it will look silly for a business website, and users will hesitate to trust the company. Same thing if a product is meant for youngsters, too formal fonts may seem dull.

Bold fonts are mainly used for making statements and have the power to immediately capture the attention of the reader, the same way yours was captured with ‘s quote at the beginning of this article.

Utilize white space properly

Typography - Use of white space. Credit: benbate.com
Use of white space. Credit: benbate.com

The “whitespace,” also known as “negative space” is the empty space between elements in a composition. 

There are two sub-elements that make the “whitespace”:

Micro & Macro Whitespace

The space between significant elements in a composition is “Macro Whitespace.” It helps in giving the words “room to breathe.” “Micro Whitespace” is the space between smaller elements: between list items, between a caption and an image, or between words and letters — the itty-bitty stuff.

Using your white space evenly makes the content much more easy-looking and “scannable,” significantly improving your work. The thing about “whitespace” is as using silence in a musical composition. Without proportionate use of silence, the music turns into noise. Similarly, without “whitespace,” your design is unstructured and difficult to consume.

Appropriate Font Size

Typography - Appropriate Font Size
Credit: Simon Foundation

Choosing the proper font size is just as important as choosing the right type of font. You don’t want to be too big, but you don’t want it to be too small eighter.

How to choose a size when there are so many to choose from? Again, everything depends on the end goal. If you want your design to be expressing loud and clear bold statements or emphasize a specific word or sentence, you would most of the time want a bigger size but try using it sparingly.

If you are going for a more tender and subtle message, better go with a small or normal-sized font.

Use EMs or REMs

Typography - Em and REM
Em and REM

EMs and REMs are both essential units in typography, but how to know which one should you choose over the other?

EM units are based on the relative font size of the “parent” element. REM units, on the other hand, are based on the relative font size of the HTML element and act as a sort of a multiplier.

Most of the time, REM is going to be the go-to unit for you, but sometimes EM can be just as good and even better if you want the font to change based on the parent element. 

Relative sizing is a big selling point to EMs because it helps control the sizing of elements as they relate to others. EMs function as essential building blocks to website elements thanks to the fact that EM values compound.

Set Up a Hierarchy 

Typography - Font Hierarchy
Font Hierarchy

Beginners in typography often underestimate the necessity of using a hierarchy, and that makes their designs look poorly and unprofessional.

But setting up a hierarchy isn’t only used to impress your clients with your fantastic work structure, it makes everything a little bit more easy for you. Typographic hierarchy guides not only the audience but also to better focus on the more important points and makes it easier to differentiate them from the more simple and supporting parts.

Probably the most essential things in the hierarchy are position and alignment. You don’t have a well-structured hierarchy without mastering these two. The right positioning of the headings and the subheadings should be your top priority because they are the most impactful on the structuring your hierarchy. 

After you have figured the positioning and alignment of your headings and subheading, try to make your type stand out. The way to do this is to center it or set it outside of the regular margins of a page. This can make that type stand out within the hierarchy of a page.

Learn to Kern

Typography - Font kerning
Font kerning

In its purest form, kerning is the art of adjusting the space between two individual letters. The goal here is to equalize the appearance of the white space between letters, so they appear better in front of the eyes of the readers. This can be tricky for the beginner because there is no mathematic form or algorithm to use, so you really have to develop an eye for it.

The only automatic tool in kerning you can use is tracking. Tracking is adjusting the spacing uniformly over a given selection of a text and is just a thing to help you do the same thing you have already done but faster.

Learning this skill is not the most difficult thing in the world, but mastering it will automatically make you ahead of your competition because you would be able to make your own unique type.

Pairing Fonts 

Typography - Font Pairing
Font Pairing – Credit: Font Pair

Pairing fonts that compliment each other is an essential part of great results in typography designing. This is another thing that requires you to think outside of the box, but there is still a soft set of rules that you may want to follow.

Don’t be afraid to use unknown typefaces to you. Finding fonts that have style variants is a smart way to create nuance without unnecessarily overcomplicating your designs.

For example, a soft black Arima Madurai font combined with a light-colored background will make for a great pairing.

Experiment with a couple of your favorite fonts and also take inspiration from ads you saw before that made an impression on you and try to analyze what makes them work and use it.

Contrast is King

Typography - Typography - Contrast is King

The opposites attract each other; this is also the case in typography. If you want to add a creative tinge to your text and want it to stand out, then contrast is one of the best and easiest tools in your design arsenal you can use. 

Contrast is the second name for attention-grabbing. It effectively communicates the ideas you want to emphasize the most. Just as you need to know which font pairs well with others, you need to be aware and knowledgeable in using contrast to your advantage. 

Another example of great use of contrast like the one above is bold and rounded white typeface combined with a contrasting in style darker red one on a black background.

This way, the contrast in both style and color captures the reader’s attention exactly where you want it to be. To choose the perfect color contrast, you can always go for the traditional monochrome, or if you have been using it for too long and want something different, go for a full-color design. To ensure the color contrast doesn’t affect negatively on the readability, match the color of your font with the background as it creates a cohesive look.

Ensure Better Readability 

Of course, readability is important; after all, what is the point of making a complicated design. If all your audience sees is hard to read sentences? This may resolve in turning your audience off, leaving them with the feeling you take something away from them rather than giving them a good time looking at your work.

How to ensure better readability? Well… you just keep it simple honestly. Use simple words and phrases, also try to find short words. When readers “scan” through the words, they often tend to stay rather than leave, if there are short and simple words. That’s because this will take them less time to read, and we all know that nobody wants to waste their time.

Line Limit

Another way to ensure better readability is to have a line limit for your text. There are two “standards” of optimal line length for your body text. The first and the more popular one is 50-60 characters per line (including spaces). This is good for making short descriptions.  The second one suggests that up to 75 characters is also acceptable and even preferable in a lot of instances where you need to give a little bit more info. 

But why do you need to follow either of them, and what’s the downsides of violating these ranges?

An easy answer to this question is—your lines may appear either too wide or too narrow. If a line of a text is too long, the reader’s eyes will have a hard time. When the line length is difficult to gauge it becomes a problem and can affect negatively on the reader’s ability to focus onto the correct line in a large portion of a text. And if a line is too short, this also tends to stress the readers, making them start reading on the next line before finishing the current one, constantly making the eye travel back, breaking the reader’s rhythm, and potentially skipping important words.

Final Thoughts

Congratulations for making it this far through the article, now you are a few steps ahead on your journey in mastering typography. 

We hope these 10 tips to improve your typography skills have been useful to you. Share your opinion about the topic in the comment section and stay tuned for more.  

how-to-improve-your-design-skills

Plant

At Plant, improving our design skill is of high priority. There’s one thing I have come to realize about skills in general — there’s always room for improvement. No matter how skillful you think you are, there is always something new to learn. If you are looking for a way to improve your design skills, then you are on the right page. I intend to discuss the ways you can improve your design skills as a product designer.

No doubt, product design is a daunting profession. You always have to be on your toes to remain relevant in the profession. Old techniques are improved, and some become obsolete. New ones are introduced daily. For a field that’s always changing like this, improving your skill is a must. Follow the tips below to discover how to improve your skills as a product designer.

Instead of advising you to take criticism, I am saying you should pay attention to them. Well, I am sure you are wondering why I said so. That’s because feedbacks are powerful and can make or mare you. I have been in the shoes before, and I know how it feels. Not all criticisms are made to help you grow. Aside from helpful criticism popularly known as constructive criticism, there’s one devoid of good intend known as destructive criticism that is nothing but attack.

When you get critic feedback, you need to analyze it and see if it is a constructive criticism you should take, or whether you should wave it off if it is destructive criticism. Learn to know when to appreciate your skill to avoid feeling bad over feedbacks provided to make you feel bad. However, when you get an honest review of your work, appreciate them and learn how to avoid those flops in the future.

If you are one of the juniors in a team, your team members find it easier to criticize your work. However, as a senior member of a team or even the team lead, this becomes difficult as no one will want to be seen as challenging your work. What should you do in this case? Simple, take your work online to websites like Dribbble, and get others criticize it. Make do of the helpful feedback and disregard the others.

We all have our individual strengths and weaknesses. If you want to improve your design skills, you need to acknowledge this and become open to discussion with other designers. You might be asking why, right? In the past, I used to have this idea of being a know it all kind of person. I stick to a technique and wouldn’t want to learn from other team members because I see it as a sign of weakness.

I later discovered I was wrong and was actually not improving. While the other team members have discovered a new technique and are all using it, I remain with the one I know. However, the magic came when I became open to discussing and accepting others’ opinions. The experience though not a rosy one all the time, but will open you up to a lot of techniques you are not aware of. You’ll get to learn from the last person you expected, and that’s the joy of discussing with others.

In a world where we are now glued to our screens, reading a complete book can be a great challenge. The attention of many designers have reduced to the extent that they are only open to reading blog articles and when they become long, they will skip over and their reason — no time. Well, it is better you spend time to learn what will improve the quality of your design than remain stuck with the same old knowledge you have when others have advanced.

One thing you cannot deny is, a great amount of knowledge is hidden in books. What you read on blogs is just a fragment and, sometimes, a summary of what is in books. Why not get the knowledge from the direct source? If paperbacks are your problem, you can get most copies of popular books in ebook format — some are free, while some are paid.

Unless you push yourself out, you will remain in your comfort zone. And let’s face it, the comfort zone will, in most cases, make a mediocre out of you. If you want to improve your design skills, you have to do those things you are scared of doing. Take the bull by the horn, take up that project offer, learn that new thing, and dare to make mistakes. As you move out of your comfort zone, you will discover you are learning new things and improving your skills.

From the feedback you get and the knowledge you gain from reading books and learning from other designers, you can come up with new ideas of your own. When these new ideas come up, what do you do with them? Experiment them, of course! Try out your ideas. If you are not a key person in a project, you might not get the opportunity to introduce your new idea to the project you are part of. In this case, you can start side projects and put your new ideas into practice.

Trying out your new idea in a side project has a lot of advantages. Since nobody is funding it, you can afford to try out new things and make mistakes — rinse and repeat until you get the desired result without anyone being on your neck. It is also easier trying out a new idea in a new project since you will be starting the new project on a new slate.

5-ways-content-can-improve-your-websites?-accessibility-?-and-overall-ux

But the reality is that there are tons of relatively simple things you can do to make your websites more accessible. And they’ll not only make your websites more accessible to the disabled, but also significantly improve your user experiences for everyone.

But first, let’s be clear about our terms:

What’s accessibility?

Here’s accessibility expert Jennison Asuncion’s definition of accessibility:

Accessibility refers to designing and developing user interfaces that everyone, including people with disabilities, can independently consume and interact with.

Note that the stress here doesn’t fall specifically on “people with disabilities,” but everyone. That makes accessibility a natural concern for all of us involved in user experience design, regardless of discipline.

Now, on to the tips!

1. Use unique, meaningful button and link names

A page from Google's Nexus site—the link copy reads

Pretty easy to tell where that link will take me.

I can’t tell you many times I’ve had a mockup or prototype hit my inbox (or Slack) with 16 “learn more,” “read this,” or “see more” links scattered across it — and groaned.

Why? Because it’s horrible for users of screen readers, which typically allow people to skip from link to link on a page, ignoring the content in-between. It’s a highly efficient mode of navigation that helps screen-reader users quickly get where they want to go.

But how easy do you think it is for a blind or low-vision user to figure out which of those “learn more” links leads to the “more” they want to learn about?

And it’s actually not that different for sighted users. Think of all the times you’ve fired up a website knowing exactly what you’re looking for, but not quite sure where to find it. Do you read through all the content? Or do you simply hunt around for the right link?

You might scan through the headings and subheads first — after all, they’re bold and eye-catching — but you still have to live with the cognitive load of connecting those headings to the links below. But links tend to be pretty visually loud too, so wouldn’t it be even easier if every link told you exactly where it would take you without demanding I read all the other copy?

Writing accessible links and button copy

Do

  • Embed links in clear, specific language that tells people where the link will take them and why they might want to go there
  • Indicate if a link will open high-bandwidth media like a PDF or video within the linked text

Don’t

  • Use generic link or button text like “learn more,” “read this,” or “see more”
  • Embed links in even more generic terms like “this,” “this page,” or “here”
  • Link to “naked” URLs (i.e., www.thewebahead.net) unless there’s context that clarifies why that link is there

For more, check out the WebAIM article on links.

2. Add clear, useful alt tags to images

Alt tags also play a key role for screen-reader users on the web. Without these invisible bits of copy, there’s literally no way for low-vision and blind users to understand the content of images, data visualizations, and infographics. With alt tags, we can ensure that no one has to miss the information conveyed in our pie charts, hero photos, and infographics.

Back in the bad old days of black-hat SEO madness, alt tags were abused as just another method of stuffing a page with keywords. Which was horrible for users of screen readers. Just imagine reading through a blog article and hearing:

“CSS layouts let us CSS HTML tables table-based layouts tables web web design code markup floats inline inline-block block W3C web consortium…”

All in a screen reader’s eerily robotic tones.

Because of that abuse, search engines quickly moved to punish such “keyword-stuffers,” freeing alt tags up to do what they were always intended to do: provide useful information.

As with links, the key here is to make your alt tags clear, descriptive, and natural-sounding.

Closeup of blueberries

Simple enough to alt tag appropriately.

With many photos, this is a simple matter of succinctly describing the content of the image: “Closeup of blueberries.”

If your image contains text — and seriously, don’t do that — include the text verbatim in the alt tag.

Let yourself be stupid. Ignore everybody. Trust your gut. Be a jack of all trades. Stay busy.

For this image, your alt tag should include the text verbatim. (Which I created after seeing Tobias Van Schneider’s talk, “Side Projects Are Stupid.”)

If your image contains useful data, such as a bar graph illustrating mobile usage patterns, make sure the alt tag contains the same data: “95% percent of smartphone users view the same website on multiple devices.”

And I can’t pass up this opportunity to briefly rail against infographics: these massive images full of copy are horrible for accessibility, not to mention SEO.

Making graphical content accessible

Do

  1. Write image alt tags that succinctly describe the content of the image
  2. Use keywords/keyphrases that are relevant to your content, but only if they’re actually helpful in describing the image, and stick to one keyword/phrase
  3. Include the key insight of any data visualizations (such as bar graphs, pie charts, etc.)
  4. Build infographics with real HTML text, or a text-based alternate (i.e., a long-form post explaining the data)

Don’t

  1. Keyword-stuff your alt tags
  2. Publish infographics without a text-based alternate

3. Write clear and actionable error messages

A Google Docs error message, which reads:

What are these “megapixels” you speak of!?

There’s a lot to keep in mind when you’re building accessible forms. (As you’ll see in this article on building accessible forms.) But a key element for any content strategist—and your users—is error messaging.

As WebAIM notes, error messages:

Should clearly describe the errors that are present and, optimally, include cues or instructions for resolving them. For example, ‘Course number is not formatted correctly’ is not as helpful as ‘Course number must be a 3 digit number’.

When writing error messages, don’t just describe the problem, but focus on how to fix it. In most cases, you don’t even need to belabor the point that there was an error: just focus on the fix, and do it clearly and succinctly.

All your users, sighted and otherwise, will appreciate the clear guidance on what to do next.

Writing accessible error messages

Do

  1. Indicate that there was a problem (implicitly or explicitly, though implicitly is generally more efficient—see below for more on that)
  2. Explain how to fix it

Don’t

  1. State that there was an error without explaining how to fix it
  2. Refer to an entry as “valid” or “invalid” — this may seem perfectly acceptable in the abstract, since you’re simply stating that an entry doesn’t fit the requirements you’ve defined for a field. But in the concrete, you’re calling someone’s name or gender invalid. And that’s just … well, do I have to explain?

Error message for a last name field that reads

‍However you write error messages, for the love of humanity, don’t do it this way.

Implicit vs. explicit error messaging

As I mentioned above, all error messages should do two things:

  1. State that there was an error
  2. Explain how to fix it

But you can easily achieve both goals in one message by implying that there was an error. For example, we could state an error message in the following ways:

  1. Explicitly, without direction: Course number formatting is incorrect.
  2. Explicitly, with direction:Course number formatting is incorrect. Please enter a 3-digit number.
  3. Implicitly: Please enter a 3-digit course number.

Option 1 explicitly states that there’s an error, but doesn’t make clear how to fix it. Option 2 is also explicit, but adds a way to fix the problem, so it’s an improvement. Best of all is 3, which implies that there was a problem by explaining how to fix it.

4. Write clear, descriptive headings

Just as a screen reader allows people to skip from link to link, they can also skip between headings, ignoring the copy between.

Now, imagine that experience with the majority of websites out there. Do you think you could clearly infer the topic of every section of a given web page without referencing the body copy or links?

The Square website, with body copy removed.

Square’s homepage, stripped down to headlines.

Personally, my answer’s “sometimes?” To quickly run through the Square page above:

  • “Start selling today” — super clear. I get that this is where I’d get started if I wanted to.
  • “Start, run, and grow with Square” — clear … ish. Clarifying the object — your business — would’ve helped a lot here. Without context, it’s not obvious what you’re starting, running, or growing.
  • “Accept every way your customers want to pay” — Clear … at least until I get to “Stand.” What the hell’s that?

Write clearer headlines and subheadings

As an exercise, I’d suggest turning off all your non-headline copy layers (if you’re using a desktop app like Sketch or Photoshop) or briefly turn your

tags to your page background color (if you’re using Webflow).

Now read through all your H tags, asking yourself with each: am I being clear enough with this headline alone?

If your answer’s no, it might be time for a rewrite.

Sometimes, you have to embrace length

Note that aiming for clarity in headlines often means using more words. I realize that might run counter to your impulse to create “clean” websites, but it’s worth asking yourself:

Is it more important that this site look clean, or that it give people all the info they need?

5. Optimize your form content

Two form designs, one with labels above the fields, the other with labels within the fields

From Andrew Coyle’s excellent article, “Design Better Forms.”

Forms may not be sexy, but they are the heart of product design, and the right content can make them vastly more usable — and accessible — for everyone. Here’s a few ways to do that:

Do

  • Indicate which fields are optional in the form label (so screen readers will transmit that information in-line). I know we’re more used to marking required fields, but you should really only be using required fields, so there will typically be fewer optional fields to mark, and hence less clutter.
  • Make button copy specific to the action taken (don’t use “submit” — unless that’s actually what a person is doing, which is often the case with literary magazines and blogs that take external contributions).
  • Display basic helpful content. E.g., if a password has to be 9 characters long, use an uppercase letter, and a special character, tell people that! And don’t hide it in a tooltip.
  • Group related information. You’ve seen the standards: email and password, physical address, credit card info, etc. If it all comes together to form a greater concept, group it.

Don’t

  • Use in-field / placeholder labels, unless they translate into a persistent label on click (rather than disappearing), a common technique on Google sites.

A more accessible web is a better web for all

Making your website more accessible to the disabled has a fringe benefit: It can actually improve everyone’s experience of your websites.

After all, a screen reader skipping from heading to heading, or link to link, behaves a lot like we all do the on the web: not consuming everything, but scanning for the specific info we need.

If you’d like to learn more about accessibility, look for an accessibility meetup group in your area, check out The Accessibility Project, and follow Jennison on Twitter.

improve-your-css-with-these-5-principles


twitter logo
github logo
・5 min read

Writing CSS is really simple and straightforward, so why is there a need for principles and best-practices while writing CSS?

As the project scope increases and as the number of people working on the project increases, the problems become more and more apparent and can cause serious issues down the line. Fixing issues may become harder, duplicated code, complex override chains and use of !important, leftover / unused code (removed elements or features), code that is hard to read, etc.

Writing CSS at a professional level will make the CSS code more maintainable, extensible, understandable and cleaner. We’re going to look at the five simple and very effective principles that will take your CSS to the next level.



Naming principle

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

Properly naming and structuring your CSS selectors is the first step to making your CSS more readable, structured and cleaner. Establishing rules and constraints in your naming convention makes your code standardized, robust and easier to understand.

This is why concepts like BEM (Block-Element-Modifier), SMACSS (Scalable and Modular Architecture for CSS) and OOCSS (Object Oriented CSS) are popular among many frontend developers.



Low specificity principle

Overriding CSS properties is very useful, but things can go out of hand pretty quickly on more complex projects. Overriding chains can get really long and complex, you might be forced to use !important to solve the specificity issue and you could get really easily lost when debugging or adding new features.

/* Low-specificity selector */
.card {}

/* High-specificity selectors */
.card .title {}

.blog-list .card img {}

.blog-list .card.featured .title {}

#js-blog-list .blog-list .card img {}



Browser and specificity

One of the benefits of following the low specificity principle is performance. Browsers parse the CSS from right to left.

Let’s take a look at the following example:

Browsers parse the selector like this:

  1. Find all img elements on the page
  2. Keep selected elements that are the descendants of .card class
  3. Keep selected elements that are the descendant of .blog-list class

You can see how high-specificity selectors impact performance, especially when we need to globally select generic elements like div, img, li, etc.



Using the same level of specificity

By using low specificity CSS class selectors in combination with BEM or one of the other naming principles mentioned in the previous section, we can create a performant, flexible and understandable code.

Why use CSS classes? We want to keep the same level of specificity, stay flexible and be able to target multiple elements. Element selectors and id selectors do not offer the flexibility that we need.

Let’s rewrite our previous example using BEM and keeping specificity low.

/* Low-specificity selector */
.card {}

/* Fixed high-specificity selectors */
.card__title {}

.blogList__image {}

.blogList__title--featured {}

.blogList__img--special {}

You can see how these selectors are simple, understandable and can be easily overridden and extended if needed. And by keeping them low-level (a single class), we are guaranteed optimal performance and flexibility.



DRY Principle

DRY (Don’t repeat yourself) principle can be also applied to CSS. Duplicated code in CSS can cause code bloat, unnecessary overrides, reduce maintainability, etc. This issue can be fixed by structuring the code appropriately and having high-quality documentation.

Storybook is a great free tool that enables you to create an overview of available frontend components and write high-quality documentation.

/* Without DRY Princple */
.warningStatus {
  padding: 0.5rem;
  font-weight: bold;
  color: #eba834;
}

.errorStatus {
  padding: 0.5rem;
  font-weight: bold;
  color: #eb3d34;
}

.form-errorStatus {
  padding: 0.5rem 0 0 0;
  font-weight: bold;
  color: #eb3d34;
}

Let’s refactor the code so it follows the DRY principle.

/* With DRY Principle */
.status {
  padding: 0.5rem;
  font-weight: bold;
}

.status--warning {
  color: #eba834;
}

.status--error {
  color: #eb3d34;
}

.form__status {
  padding: 0.5rem 0 0 0;
}



Single responsibility principle

By using the single responsibility principle in our CSS, we can ensure that our CSS classes are easily extended and overriden. Let’s take a look at the following example.

.button {
  padding: 1rem 2rem;
  font-size: 2rem;
  border-radius: 0.2rem;
  background-color: #eb4934;
  color: #fff;
  font-weight: bold;
}

.button--secondary {
  border-radius: 0;
  font-size: 1rem;
  background-color: #888;
}

We can see that if we want to extend .button class with .button--secondary, we are doing lots of overrides to achieve what we need, when we only want to apply a different background color and keep the default styles.

The problem is that our .button class is having several roles:

  • Sets layout (padding)
  • Sets typography (font-size,font-weight)
  • Sets presentation (color,background-color, border-radius)

this makes our CSS classes very hard to extend and combine with other CSS classes. By keeping this in mind, let’s use BEM and OOCSS to improve our CSS.

/* Shared styles */
.button {
  padding: 1rem 2rem;
  font-weight: bold;
  color: #fff;
}

/* Style extensions */
.button--radialBorder {
  border-radius: 0.2rem;
}

.button--large {
  font-size: 2rem;
}

.button--primary{
  background-color: #eb4934;
}

.button--secondary {
  background-color: #888;
}

We have broken down our button styles into several classes that can be used to extend the base button class. We can optionally apply the modifiers and add new ones as the design changes or new elements are being added.



Open/Close principle

software entities (classes, modules, functions, etc.) should be open for extension, but closed for modification.

We’ve already used the open/close principle in the previous examples. All new features and options need to be added by extension. Let’s take a look at this example.


.card {
  padding: 1rem;
}

.blog-list .card {
  padding: 0.5em 1rem;
}

The .blog-list .card selector has few potential issues:

  • Some styles can be applied only if the .card element is a child of .blog-list element.
  • Styles are forcibly applied to the .card element if placed inside the .blog-list element, which can produce unexpected results and unecessary overrides.

Let’s rewrite the previous example:

.card {
  padding: 1rem;
}

.blogList__card {
  padding: 0.5em 1rem;
}

We’ve fixed the issue by having a single class selector. With this selector, we can avoid unexpected effects and there are no conditional nested styles.



Conclusion

We’ve seen how by applying these few simple principles we have significantly improved the way we write CSS:

  • Standardized naming and structure, and improved readability by using BEM, OCSS, etc.
  • Improved performance and structure by using low-specificity selectors.
  • Reduced code bloat and improved code quality with DRY principle
  • Flexibility and maintainability by using open/close principle
  • etc.

Thank you for taking the time to read this post. If you’ve found this useful, please give it a ❤️ or ?, share and comment.

One last thing:

Now reaching over 3 million visitors per month, DEV is the fastest growing software development community in the world.

It’s free, open source, devoted to the open web, and will never have popups or a pay wall.

Get Started Now


adrianbdesigns profile

Adrian Bece

React, Frontend, Magento 2 certified developer. Magento PWA Studio contributor. Rock and metal music fan. Reads Dune, sci-fi novels and Calvin & Hobbes. Creates amazing interfaces @ prototyp.digital

Classic DEV Post from Dec 12 ’18

improve-remote-collaboration:-5-techniques-for-ux-designers

Our friends at Miro — a visual collaboration platform — are experts when it comes to managing distributed teams. Today the Miro team shares five high-impact processes to improve collaboration and communication when it comes to distributed or remote UX designers.

Leading tech companies are the first to test out innovative methods of work, so it’s no surprise that they’re also beginning to be more distributed. This approach allows them to attract the best talent worldwide while reducing costs.

However, being distributed can create new challenges, especially for UX design and research teams who often rely on rituals and methods that are hard to replicate online — i.e. customer journey mapping and clustering research findings on a whiteboard to syncing with product and development teams.

To help UX designers overcome communication barriers that arise from working within a distributed team, we’re digging deep into how other leading tech companies are solving these problems and making it work.

1. Empathize with your teammates to build trust

A big part of achieving alignment on a remote team is thinking about how different cultures work, and encouraging teammates to ask questions and be proactive communicators. Supporting your team and understanding their communication style will help keep everyone on the same page.

A good way to find out what works best for each individual is to ask the team to create personal manifestos. Each person outlines their preferred communication tools, ways to give and receive feedback, and even pet peeves. This simple exercise can encourage everyone to be more open and vulnerable, and gives teammates some context for understanding each other.

Erin Casali, Design Principal at Automattic:

“Certain country cultures create different expectations, and certain languages, when translated to English, might subtly change the tone. In some cultures, discussions tend to be very dry and factual; short sentences, sharp language, no acknowledgment of context beyond the specific answer. For someone who comes from a different culture, this can be read as very distant, detached, even rude or impolite; but it’s just a cultural difference.”

2. Create rituals & establish a source of truth

Distributed teams don’t have the opportunity to share quick updates by a watercooler or during lunch. And if they work in different timezones, it’s generally harder to sync and react quickly if there are any blockers. Distributed teams are more prone to working in silos and struggling with miscommunication because some real-life conversations can naturally happen in different hubs. However, it’s hard to communicate the outcomes of these conversations to people in different locations. Establish regular rituals for the whole team to share updates, insights, and concerns and document anything that happens at the meeting or even outside of it when it affects the whole team.

Prianka Rayamajhi, Lead Product Designer at Pinterest:

“We have our regular rituals like grooming sessions and retros. Also, having a source of truth or a living history of its accomplishments is vital for a team. Having some sort of outline of your team’s process is really going to give your team purpose. I think it’s important to start mapping out those sorts of processes.”

3. Protect your time from empty, actionless meetings

It’s okay to leave a meeting if you don’t know why you’re there within the first five minutes. Another best practice is agreeing that all the meeting hosts must have an agenda when they are sending invites — that way, everyone has a chance to prepare for the meeting and spend time efficiently. Some meetings are hard or impossible to eliminate, so another good tactic is to block time on your calendar for focused work — alone or together with your team.

Ben Holland-Arlen, Senior UX Designer at BOLD:

“I’m sure many people have this calendar problem where their life is in 30-minute chunks all day long, with a 30-minute lunch. If me and my team are all working on the same problem, wherever we are – we’ll turn on the camera, have a quick discussion for 20-30 minutes, then keep the camera on for a few hours while we’re working. It’s been amazing because it feels a lot more like when you’re working side by side. It’s so powerful and so simple.”

4. Mimic the in-person collaborative experience

A lot of people working within distributed teams experience a fear of missing out. They wish they had a mentor or a friendly chat with a teammate who is remote or located in another hub. It’s harder for distributed teams to bond, cheer each other on, or learn from each other, so setting some time for mentorship calls, ‘Friday wins’ meetings, our even virtual happy hours can be a good idea.

Summer Kim, Head of Research at WhatsApp:

“It is important to have local leadership for your team in the remote office. And also encourage and help people to find great mentors (it could be more than one or two) in the local office as well as the headquarters. I’ve had many mentors, coaches, and advisors throughout my career, and I think it is particularly important for those who are working from remote offices.”

Exchanging tools, techniques, and insights is critical for improving any team’s productivity, but it’s especially important to be proactive about it in distributed teams. In general, it’s hard for information to travel across several hubs and timezones.

When you’re having one of your team rituals, make sure key insights are recorded in a central hub that every team member can refer to synchronously or asynchronously. Encourage comments and questions. Capturing the conversations that happen in remote meetings is key to keeping everyone aligned and moving forward as one team.

Jessica Drizin, Senior UX Researcher at Upwork:

“A lot of our job is empowering the design and product teams to conduct their research. We started implementing a weekly research review, which is open to researchers and non-researchers, so designers and product managers that want to take more ownership of their research can join in. We listen to what problems they’re working on, any methodology that they propose, and we offer advice around the best methodology, or even if research is warranted at that stage.”

Conclusion

At the end of the day, you can’t avoid the challenges that arise from working within a distributed team. However, you can lean on the tactics that other successful companies use regularly to make collaboration work effectively for them. Of course, don’t shy away from tweaking these processes as needed, and make an effort to customize them so they work for your specific team. Good luck and happy collaborating!

Ready to level up your remote collaboration and better connect your product teams? Join us and the fine folks from Slack, Atlassian, LinkedIn, Dribbble, and more at Distributed 2019, a free virtual summit for product teams, hosted by Miro.


Find more Community stories on our blog Courtside.
Have a suggestion? Contact stories@dribbble.com.

Learning about type doesn’t need to be daunting.

Dave Smyth

Choosing a typeface is a critical part of any design project, but there’s more to typography than picking a couple of nice-looking fonts and hoping for the best.

Learning about type can be daunting because it’s such a broad topic. There are lots of rules/best practices and it can be difficult to know where to begin.

Traditional typography resources are a good start but, if you’re working on the web, there are more things to consider. How will the type work across a range of screen sizes?

There’s no quick fix, but here are 20 top resources for web typography today.

The websites listed below will help you to truly demystify typography. Learning the rules to follow (and later break) will seriously up your type game.

Practical Typograph

A brilliantly thorough pay-what-you-can online book from Matthew Butterick, covering all sorts of typographical details. There is a font-switcher at the bottom of the site, which is a lovely (and appropriate) design detail.

The Elements of Typographic Style Applied to the Web

A useful guide on applying the techniques from Robert Bringhurst’s famous book to the web. From Richard Rutter, co-founder of Clearleft and author of Web Typography.

Typewolf

One of my all-time favourite typography educational resources. The newsletter is full of weekly inspiration and the headline product, the Typography Checklist, is incredible.

Rafal Tomal

Rafal has put together a fantastic typography course at an accessible price point. Well worth a look.

Better Web Type

A free course to accompany Matej Latin’s typography book. This site features some great articles on typography, too.

OpenType Features in CSS

OpenType features let you access a range of settings and alternate characters, such as superscript, ligatures and kerning. These won’t be available in all fonts, especially free ones, but this is a handy reference.

These tools can help you decide and improve on typographical choices.

Modular Scale

If you want your font sizes to feel coherent, rather than random, a scale can help.

Tanaguru Contrast Finder

To make your type as legible as possible, you’ll want to check the colour contrast against its background. This is a great tool to help with that because if your background colour doesn’t meet the accessibility criteria, it suggests lots of close alternatives.

Font Playground

This tool lets you experiment with variable fonts and their different feature sets.

Font Style Matcher

If you want to match the style of fallback fonts as closely as possible to your preferred font, this is the tool for you. Seeing the two fonts overlapping each other is a handy feature.

There’s more to life than Adobe Fonts, Google Fonts and Monotype.

Use & Modify

A collection of “beautiful, classy, punk, professional, incomplete, weird typefaces”. They’re all open-source, so you can do with them what you please.

Open Foundry

This is another collection of high-quality open-source fonts.

Font Stand

I love the concept of this site. Rent a font at 10% of its standard price for 12 months (so pay 120% total), then you own it. Forever. The months don’t even need to be consecutive. A brilliant concept for accessing fonts that might otherwise be out unaffordable.

Typewolf

I know, this was mentioned above…but it’s such an excellent site for type inspiration. Especially if you’re looking for pairing inspiration — a fantastic resource.

Typespiration

Created by Rafal Tomal (mentioned above), this site features lots of great font combinations. More importantly, it demonstrates some beautiful setting of type to inspire you.

Font Combinations Library

A collection of eight Google Font combinations, with downloadable Sketch and Adobe XD templates.

FontPair

Lots of Google Font combinations to preview on this site. Handily categorised by the font classification (serif serif, sans-serif serif, etc).

Typ.io

What sets Typ.io apart from many other sites are the HTML/CSS snippets that demonstrate how an effect has been achieved. The site also lists where the fonts are available from.

Variable fonts are picking up some traction, but many designers are yet to use them. Depending on the font, they can be set in many more ways than their traditional counterparts.

These two sites introduce a range of variable fonts, show what can be done with them and where they’re available from.

Axis Praxis

Variable Fonts


There are lots of resources to get you started here, wherever you are on your typographical journey. Type on the web has many nuances and CSS developments mean there are always new things to learn.

If there are other resources you’ve found to be particularly useful, I’d love to hear about them in the responses.

improve-customer-experience-with-scenario-analysis

Imagine this situation. Your company has asked you to investigate and recommend a new marketing technology. For the sake of conversation, let’s say a podcast hosting platform that will integrate with your website. You complete some initial research, talk with some colleagues, reach out to your LinkedIn network and identify a list of potential providers and some basic cost information. You make your recommendations and your leadership team gives you the green light to complete the due diligence and make a final recommendation. 

After the initial review, you narrow the list down to a select group you want to learn more about. You go to each provider’s website but there’s no real way to interact with your shortlist of providers. You send a few email messages to general mailboxes but the response is slow or not at all. There are no phone numbers on the sites or any chat options for the providers on your short list. Eventually, after more searching, you finally find some phone numbers. You call up the providers, but you cannot reach a person. In one case, there is voicemail and you leave a message. In the other, the message tells you the representative is away and will not be responding to voice mail for at least a week. You call back and are informed there’s no one else to talk with. 

In the age of the customer and the engagement economy, successful companies are customer-centric and proactive in how they address the customer experience. Today customer experience is a competitive differentiator for every company. A Gartner Customer Experience (CX) study declares: “Customer experience is the new marketing battlefront. More than two-thirds of marketers responding in the study indicated that their companies compete mostly on the basis of CX. And in two years’ time, 81% say they expect to be competing mostly or completely on the basis of CX.”  A study by VisionCritical claims that by 2020, the customer experience will overtake price and product quality as the key brand differentiator. 

Think about the above situation: The prospective buyer is frustrated. The prospective provider has potentially lost a long-term customer. Most people once they select a platform and complete the integration are unlikely to switch. As a potential provider, had you employed scenario analysis you might have been able to anticipate these types of experiences and put processes in place to avoid them. 

Are you ready for customer experience to be your differentiator? If so, then one valuable step is to tap the power of scenario analysis. 

Scenarios describe a set of possible events. They are powerful tools for understanding potential business situations, such as customer experience, and then developing appropriate strategies for each of them. The value of scenario creation is that it allows you to consider a range of possible outcomes and drivers of change. This is extremely helpful for improving customer experience. If you can anticipate a potential customer experience problem, you can modify your business process before the problem occurs and costs you a customer.

Scenario analysis focuses on analyzing possible future events. The use of scenarios by companies is not new. Companies have been employing the concept of scenario analysis since the 1970s, and it is an essential capability for any company invested in and aspiring to achieve agility. 

The fundamental ingredient for scenario analysis – whether to anticipate, plan and improve customer experience or some other aspect of the organization – is developing the scenarios. Creating scenarios is both art and science. The science side of the process requires data and timing information. Scenarios to support real-time marketing and customer experience can be created based on the answers to the following types of questions. 

  • What data can change regarding customers, the market, and the competition? By how much?
  • What data are predictive of a key prospect or customer behavior?
  • What data are essential for effectively engaging with customers and prospects?
  • What data are required to support a consistent cross-channel customer experience?

Imagination is all you really need to use scenario analysis. The goal is to create as many different combinations of potential events as you can conceive. Then, by analyzing each potential scenario, you can assess its likeliness to occur and decide what, if any, proactive action is necessary. Join my upcoming session at MarTech East in Boston to learn more about the principles of and process for creating and analyzing your scenarios, with a focus on using this approach to make the customer experience one of your competitive differentiators. 

More about the MarTech Conference


Opinions expressed in this article are those of the guest author and not necessarily Marketing Land. Staff authors are listed here.



About The Author

VisionEdge Marketing, founded in 1999, and is recognized as one of the pioneers and authorities in the Marketing Performance Management (MPM) discipline. The company specializes in helping companies apply data, metrics and proven best-in-class practices to accelerate growth, create customer value and improve performance.
Laura and VisionEdge Marketing are all about making marketing an engine of growth for organizations. Martechexec selected Laura as one of the top 50 women in marketing technology. Laura is honored to be among the Top 20 Women in Business according to the Sales Lead Management Association. Engagio identified Laura among the top marketing operations leaders to know. Laura has served on the University of Texas McCombs School of Business Masters of Marketing Science Advisory Board.