small_Fcsqb5pWQAAzPIK.jpeg

thumbnail_Fcsqb5pWQAAzPIK.jpeg

Adobe acquires Figma, cue the memes 🤪

large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

<a href="http://ift.tt/2qMzMXx">UX Planet &mdash; Medium</a> | Tarun Kohli <img alt="" src="http://ift.tt/2qMBXdI">
A good design ain’t just about glossy buttons or fancy interactions. It’s about making a product experience useful and enjoyable for all of its users.
For every interaction with the UI, there are two choices- one can empathize with the users and design something that solves their problems. The other is of course easier — one can design as per their whims and fancies and force your end users to use it.
Just as one needs expert leadership to execute a business idea, one needs holistic thinking to flesh out all aspects of the user experience. Not merely the happy scenarios.
Generally, most of the designs cover all the happy scenarios like regular amount of data on the pages, successful messages, basic screen interactions but forget few important ones which have the potential to turn the user experience into Goldilocks user experience. Just right.
A Goldilocks user experience takes care of a user who is using the product for the first time to an expert.
One could bake the following questions/checklist in their design process to make sure that it covers all aspects of the user experience &#8211;
<ol>
<li>What would happen when the user lands on our product for the first time? How would the system help them get on boarded?</li>
<li>What would happen when they have been on boarded but there isn’t any data? What should be the ideal call to action then?</li>
<li>What if they were taking an action and it ended up in an error? What are some of the alternate flows for them to recover from the error?</li>
<li>What would the product show when it’s trying to load some data based on a user action? Animation if it’s a quick turn around time? Or, blank templates where data would show up? Or, something else altogether?</li>
<li>How would you like to show lot of data? Does it make sense for an infinite scroll? Or, shall we paginate the records?</li>
</ol>
These questions are over and above the other functionality related or happy scenario questions that are asked to get to the Goldilocks user experience.
Asking the above questions would lead you to design the below states. Here are all of them in detail with some examples.
<h3>First time use</h3>
Treat your first time user like a baby learning to walk. You need to hold the user’s hand and guide her towards her end goal.
It can easily be done by empathizing and thinking about all the possible actions a user can take to either onboard or start using the product.
We were challenged with designing the first time experience for <a href="http://mentorcloud.com/">MentorCloud</a>.
We had two options — to have the user login and then figure out how to add their interests. This would have caused the user to land on an empty dashboard. Or, seamlessly integrate adding of their interests experience at the first time use. This would have helped them see a relevant feed related to their interests on their dashboard.
We chose the latter and it made the world of difference for MentorCloud users.
<img alt="" src="http://ift.tt/2rmskQ4">
<h3>Empty State</h3>
There are times that we forget the cases when there might not be any data to show. This is one of the most common scenario which makes a pretty slick design take a fall on its knees.
Engineers typically solve this by showing informative yet unhelpful messages without any suggestions or call to action like “No Search Results Found” or “Sorry, no entries have been created so far”.
But, there is another way.
We could use this moment for a user to take an alternative action. Most of the scenarios lend themselves for a user to do something meaningful when there isn’t any data in the system.
Below is an example to design for such cases. We designed for a teacher to nudge students to become active when they haven’t enrolled yet. The design options were simple — either leave her wondering what she should do next or be a good Samaritan and light up her way.
We chose the latter.
<img alt="" src="http://ift.tt/2qMOVIC">
On similar lines, we designed the below screen for our product- AGORA. Here, she is encouraged to start a discussion when there isn’t an active one.
<img alt="" src="http://ift.tt/2rm6MTv">
<h3>Loading</h3>
It’s unfair to make people look at that boring white background while they wait to see some data.
This is where one could add some sparkle to the user experience and make it worth the wait.
<img alt="" src="http://ift.tt/2qMKLAo">
Let your user know that the wait is about to get over- any moment.
<img alt="" src="http://ift.tt/2rmzmnN">Credits- <a href="http://ift.tt/1JfRXGW">Nick Frost</a>
<h3>Lots of Data</h3>
Do you have lots to tell? Is your UI brimming with data? Like gigantic heaps of data?
If that’s the case then it’s prudent to take a pause and reflect how would the user navigate through the monstrosity of data.
Would the users like to see a list? Would they like to see the recent records first? Would they like to search? Filter? What all aspects of data would they like to see in this gigantic heap? There could be questions galore to understand the user’s perspective and design accordingly.
That said, the 2 most popular paradigms to solve this state is to use pagination or an infinite scroll.
An easy example could be a bank statement. A user wants see her bank statement for the past 12 months. With hundreds of transactions, its apt to use pagination which not only sorts the data into chunks but also looks clean.
<img alt="" src="http://ift.tt/2rm8Pap"><a href="http://ift.tt/1vI2jde">Asif Aleem</a>
<h3>Error</h3>
Yes, we all do mistakes and we all like to hear what went wrong so that we do not repeat it the next time.
An error state must be clear. Concise and with a little friendly tone. They should instruct what to do next.
Unlike this-
<img alt="" src="http://ift.tt/2rmeYDc">
A fatal error occurred. And to add to my horror, they expect me to be ‘OK’ about it.
Will you be able to recover that? YES! NO! MAYBE?
The right idea should be to show a helpful error with some call to action to either take an alternative route or fix the error.
For example, Hostmaker gives you information about what exactly happened. If you try to enter an address which is not available for hosting, they inform you that they are unavailable for service here.
What more? “Try a different address” prompts users to check for another address which might be available.
<img alt="" src="http://ift.tt/2qMFfxQ.">
I’m writing a design series to share my experiences and learnings as a designer. You can find my earlier writings here &#8211;
<ul>
<li><a href="http://ift.tt/2nihcS0">Why Lorem ipsum is the word we don’t talk about anymore</a></li>
<li><a href="http://ift.tt/2oAEwv4">Being HIPPO is ruining your design decisions</a></li>
<li><a href="http://ift.tt/2o1XVqT">How to Design Better User Experiences with Empathy</a></li>
</ul>
<img src="http://ift.tt/2qMzRKP" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2rm1xDp">How to design Goldilocks user experiences by keeping these states in mind</a> was originally published in <a href="https://uxplanet.org">UX Planet</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

How to design Goldilocks user experiences by keeping these states in mind

How to design Goldilocks user experiences by keeping these states in mind

Top Stories