Addressing overlooked attributes of how digital design happens

I’m creating a visual editing platform for non-designers and designers alike to address three critical attributes of how the design of our digital world happens:

  1. Design is highly iterative and ad hoc.
  2. Digital products are continuously updated and rarely complete.
  3. Most design work is done by people without “design” in their titles.

Our tools often fail to recognize these attributes. …

Learn how to improve the design of digital forms

These best practices serve to provide a shorthand when designing forms. Make sure to always keep in mind your context to determine the best presentation. Like most things in design, there are often exceptions to best practices.

Use a label

Image for post
Image for post

Labels are imperative for accessibility. Screen readers communicate each label to users. Without proper labeling, forms are inaccessible to many people. Make sure every form field has a <label>, use appropriate HTML semantics, and use ARIA when necessary.

Reference

Avoid placeholders as a label

Image for post
Image for post

Using a placeholder as a label puts a burden on short-term memory. The label disappears as soon as the user starts typing, and the user must clear input text to expose the placeholder label again. …

Image for post
Image for post

Signup for the beta launch and be the first to try the app.

Over the last few months, I created an app that helps the whole team point out bugs, add feedback, and propose visual ideas. 🎨

NextUX aims to get the whole team involved in the design of their product or website by making it easy and collaborative. Everyone is a designer.

If you are interested in being the first to try it, signup for the beta launch at https://nextuxdesign.com/

Thank you!!!!

Learn how to design to change a mind

This article covers 3 conditioning techniques designers use to influence behavior. These methods are widespread and employed in almost every successful app. Use with caution.

1. Classical conditioning

Image for post
Image for post

Classical conditioning is a subconscious association technique that pairs a neutral stimulus with a desirable stimulus to create an associated trigger. After many successive pairings throughout time, the neutral stimulus can elicit a positive response without the desirable stimulus present.

Example of classical conditioning:

A user’s mobile device vibrates each time they order takeout from a food delivery app, eventually leading to an increase in orders.

  1. A user feels their mobile device vibrate after ordering.
  2. The user receives and consumes delicious food. …

Thank you for being one of the first 500 followers of NextUX. In under 2 months, I have published 11 articles on design and product topics. I really appreciate your support and feedback.

Latest articles:

Design Better Buttons

8 rules to help you design a better card user interface

A quick guide on creating a design system

Also, I am close to launching a tool that helps teams iterate, propose ideas, and point out issues. If you are interested in being one of the first to try it, sign up for the beta launch.

The do’s and don’ts of button design

This article illustrates better alternatives to bad button design practices to keep in mind when creating a user interface.

Limit one style per button type

Image for post
Image for post

All too often, websites and apps use multiple button styles for the same action type. Take inventory of how many buttons styles you use and pair it down to one style per type. Standard button types include: call to action (CTA), primary, secondary, tertiary, success, danger, link, etc.

Include event states and provide visual feedback

Image for post
Image for post

Button states like hover, pressed, and in-progress provide needed visual feedback to users. Without event states, users might get confused about what is or will happen upon committing an action.

Differentiate button types

Image for post
Image for post

Button types should be stylistically differentiated to provide visual cues of their hierarchy. A primary action should be more prominent than a secondary or tertiary action, and design actions that commit irreversible outcomes with extra intention.

Learn how to build a perfect card UI with these guidelines

Image for post
Image for post

Cards have exploded in popularity over the last decade due to the proliferation of online media and mobile apps. Unfortunately, user experience issues arise regularly from poor card design.

Image for post
Image for post
Elements of a card component

A card is a user interface component that provides a summary and an entry point to additional information. Elements of a card component include media objects, titles, subheadings, metadata, summary text, and actions.

This article presents guidelines to help you design better cards. Let’s get started!

1. Limit content

Image for post
Image for post

Limit summary content to under 100 characters or no more than two short sentences. …

The NextUX Medium publication surpassed 300 followers. I am grateful to every one of you and will do my best to deliver value through my writing.

Please let me know if there is a topic you would like me to cover. I created my most recent article after I was asked for my insights on design systems. I have a million topics I want to cover but I’d rather prioritize your interests.

Recent articles

Become a typography nerd in under 10 minutes

The most important thing I learned in art college

A quick guide on creating a design system

Also, I’d love your feedback on a design tool I am building.

Learn the basics of creating a design system in 6 minutes

I published the design system I created to illustrate concepts in this article (see link below). Feel free to use it in your work.

This article consists of 3 parts:

  1. Understanding design systems (what are they and when to create one)
  2. Creating a design system (creation process and activities involved)
  3. Additional considerations (other concepts and references to consider)

*I use the term “product” throughout this article as an umbrella term to describe a website, application, online service, etc.

Image for post
Image for post
I created the start of a basic design system to illustrate concepts in this article. Feel free to download the Sketch file or Figma file and use it however you like.

Understanding design systems

A design system is a unified language that helps a team solve problems consistently. …

Image for post
Image for post

I created a quick video to demonstrate the features of my app. I would love to hear your comments!

My goal is to make it easier and faster for teams to propose ideas and collaborate on digital projects.

If you're interested in being an early user, sign up for the beta launch here: nextuxdesign.com.

I appreciate your feedback!

Thank you!

Andrew

About

Andrew Coyle

Committed to helping others with design — Formerly @Google @Flexport @Intuit

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store