The secret heroes of UX Design ✅🆗

I am a huge advocate of User Experience (UX) design.

It doesn’t just pertain to UI and Web Design, UX is something that is very important to almost every designer.

The width that this design discipline can span is insane.

Throughout the rise of UX Design, there have been very specialized fields pop up within the discipline. UX has also cannibalized the Data Visualization, Information architecture, and User Interface design fields along with things like wayfinding and architecture.

You’d be surprised how many things that would you know a small bit about to help you do your jobs as user interface designers that these people know tons about.

Well I’m here to share a tiny bit of some things that help make UX design shine.

Placeholder States

The varying download speeds and performance of devices is as numerous as there are breeds of dogs. Someone who lives in another part of the world might have different connection speeds than your development team in Sunny California. Maybe the specs of one device can’t quite keep up with something designed for the *Latest and Greatest *device.

When a page fails to load, you end up with a large empty white screen. You don’t know if something had worked or if everything failed in your search for whatever was supposed to be there.

The use of placeholder shapes and content is helpful for showing what a user should expect to see when the content loads in. There’s a really good study on the effectiveness of these states, but I still feel it’s helpful for new visitors to a site or platform.

Designing for these empty states requires understanding first what might be empty or how something should look at it’s final display size.

It’s a simple idea that can take a while to implement. But this little attention to a micro ux piece will pay off. There are plenty of other pieces where placeholders can help the user find out what they are supposed to do with empty fields or know what to expect when they continue an action.

Confirmations

Sometimes I go to fill out a form to sign up for something, I type in my Username and Password only to be redirected to a screen that says I entered information into the form incorrectly.

Having messages that pop into view after a user has interacted with the content telling someone they’ve either done something right or something wrong will boost the overall interaction.

When someone is trying to achieve something by using the design, they want to have immediate feedback if that worked or not. You can get really creative with implementation like inputting a “chime” or “buzz” when something’s correct/incorrect, variations visually, a combination of everything happening. Etc.

“Get really creative with implementation like inputting a “chime” or “buzz” when something’s correct/incorrect”

If a person doesn’t know something was successful until the moment has passed, you might experience a lot of people abandoning the task due to the frustration.

Other things that could happen is over committing the action (like adding 50 tvs to your cart, thinking the button isn’t working) or missing vital information because something wasn’t checking if the forms was full and calling that to attention.

Just simple examples to this interaction.

Progress Tracking

I was doing a design where I had to show completion of a profile, which was labor intensive even after simplifying the requirements for completing it. This progress bar would show after someone had started a profile and was meant to encourage filling in the data completely. However, their current solution did not give the user any indication of how much more they had to fill in. Progress is something that we want to see any time we are doing a task. There are many ways to implement the amount of progress someone or something has achieved. You can have loading bars, percentage counters, page counters, step counters, meters, etc.

By giving someone a little bit of information of how far they’ve progressed, you fulfill a worry or expectation to satisfy any worry they have about spending forever on a task or piece of content.

Autofilling with Suggestions

One of the best features that have been implemented in search is the auto fill feature. This feature happens when filling in a text field and having the form show suggestions for filling out the rest of your phrase.

It’s not just held to suggesting within the form field sometimes suggestions can come in the form of tool-tips (pop ups that are attached to the element you are filling in) or after the search has completed to suggest variants of what others have searched that relates.

This pic is from my history as a web designer.

One huge project that spanned about 6 months and in the end the project fell apart due to circumstances outside of our control.

This feature has to be seen as an assistant rather than a hand-holder or “move-out-of-the-way-and-let-me-do-this-for-you” feature.

Even though these suggestions might be what they were searching for, sometimes a user’s search is specific and not relative to the suggestions.

Action — Reaction

I love pressing buttons.
I worked in the banking industry, and there was this overwhelming compulsion to press the really big red button under my desk.

Apparently that was the alarm. BUT… It made this really satisfying “Click” that I could feel as I pressed the button.

I accidentally pressed that every now and then just because of how satisfying it was to my need for fidgeting.* (I did later buy a pen that satiated this, an then much later, a fidget cube and that helped).*

But we all love to experience the satisfaction of pressing something just to see what it does.

Take my favorite example of this, Super Team Deluxe.

Their site has a lot of bouncy, bubbly, gooey ui interactions that are pure fun to play around with.

320 items added to the cart in this one interaction. Sorry Rogie, I just don’t have $2500 for a single pin design. (;

Much like the need for creating confirmations, you want to make sure that when someone presses something that it actually is doing something.

Simple things like micro animations help a user know that what they clicked on, submitted, or saved actually did something.

Micro Copy

Micro copy is the wording that you put in design elements that pertain to actions and captions to content that guide a user to do something. This copy is something that gets mishandled by a lot of designers that end up in charge of the wording that is used. The crime comes when you don’t explain exactly what the action will do. Having a button that says “click here” is not enough, you need to describe what clicking there will do. Using words like “Start a free trial” or “Download the PDF” work better than generic descriptions.

This also pertains to things like form fields where instead of having blank forms, you should be filling in placeholder text, captions, titles and form fields.

Microcopy is also for inline links. You can’t have a link without describing where or what the user is going through it. Using a link like: “why users shouldn’t give into confirm-shaming” is much better than “check our latest post”. So spending time on the small things here can make a huge impact on the designs you do. Look for articles on Micro Ux and you’re bound to see more. I’ll be going over a few more of these over time and you’ll see a few recurring themes in future emails for sure.

Hope this helps you with finding ways to improve the overall experience someone has when accessing your designs.

What has been the best examples you’ve seen of Micro Copy?


Looking forward to learning more design principles in 2018? So are we!

Come join other like-minded designers who are working at becoming masters of their craft.

Every week we go over ways to market yourself better by improving your design skills, your personal brand, and other topics to further develop as a great designer.

Tap either picture to get started investing in your design skills (:

Tap on either picture to get started at compassofdesign.com

By clapping more or less, you can signal to us which stories really stand out.

Darian Rosebrook

Brand Identity Designer for @itssomagnetic, running a design community at @compassofdesign. I write to help others grow their skills as designers.

Compass of Design

Some of the best design articles written by members of the Compass of Design Community to help you strengthen your skills in design, business/freelance, and marketing yourself.

Let's Get in Contact

* All Fields Required

Thank you!

I'll review the responses here and respond to you as soon as I can. Thanks!