Published on <a href="http://ift.tt/2oS0JIU">| Prototyping: From UX to Front End &mdash; Medium</a> Sophie Riwaters <img alt="" src="http://ift.tt/2p3sv0W">
Why do we even need UX in the first place? — The question is legit, but you don’t need rocket science to answer it.
Keep in mind, that you’re not the only one with an offer/solution to the problems of the user! If they can’t achieve what they want with your product or service, there’s a high chance they will end up knocking on someone else’s door sooner than you think.
User Experience Design comes from User-Centered Design or UCD for short. The core concept is all about calculating with the users’ needs right from the start when designing a product or service. You can read <a href="http://ift.tt/2is4bXo">about the basics</a> in detail and how they build up from my previous article.
When a product looks good, but it’s hard to use, then we can say that the UI design is ok but something is wrong with the UX. When it looks terrible but works like a charm, we can say the opposite. For the optimal user experience you have to focus on both, but since the topic is about UX let’s just stick with this part for now.
With that said, let’s put the first nail into the plank.
<h4>Don’t count on luck</h4>
The feeling of when you throw a paper ball trash can and actually nail the damn thing. It gets even better when your colleagues are there to witness it.
<img alt="" src="http://ift.tt/2p38Uhx">How it feels
Unless you’re Kobe Bryant, you should know by now deep inside, that it was out of pure luck.
<img alt="" src="http://ift.tt/2oRZGZj">The reality.
You want to avoid the whole term „Luck” when designing. This means, that every step you make should have a purpose. This might mean that you will loose time and money when trying to come up with a proper solution, but think of this as future proofing rather than a compromising.
<blockquote>„So sticking to the process of UCD will make sure that you avoid those lucky shots and score 10/10. „</blockquote>
<h4>Don’t make people feel stupid</h4>
Developing a product is one thing but using is another. This is where the UX designer comes into the picture. What seems logical for a developer <a href="http://ift.tt/2oS3TfL">doesn’t necessary fit the expectations of an end user</a>.
<img alt="" src="http://ift.tt/2p3svOu">
<ul>
<li>…make them suffer from endless reading</li>
<li>…force them to explain what they want</li>
</ul>
<blockquote>“A lot of times, people don’t know what they want until you show them” — Steve Jobs</blockquote>
<ul>
<li>…make navigation forced and confusing</li>
</ul>
It can be challenging to find the balance between freedom and guidance. What you can do is stick to the “<a href="http://ift.tt/2oRUDsa">Less is often more</a>” rule. This way the result should be clean and easy to understand with minimal guidance, letting the user to explore.
<img alt="" src="http://ift.tt/2p3sxWC"><img alt="" src="http://ift.tt/2oS5uCd">
<ul>
<li>…don’t let them go back</li>
</ul>
<blockquote>When you end up with a bad decision in a game of chess and wish you could make it undone.</blockquote>
It feels the same when users navigate through your time and you don’t have a back button.
<ul>
<li>…<a href="http://ift.tt/1raffII">make them wait</a></li>
</ul>
You might love your product, website, webshop as your lovechild, but the main goal of your users will always be <a href="http://ift.tt/2oSgvDx">solving the problem in the least amount of time</a>. When designing keep this in mind.
<blockquote>How can you manipulate time?</blockquote>
<h4>Above-the-fold is GOLD!</h4>
The first rule is that the Above-the-fold section is the most important because this is where they interact with elements in the first place.
<blockquote>“The above-the-fold is the segment of the screen that is shown without a single scroll action.”</blockquote>
It is so important, that visitors won’t even scroll down <a href="http://ift.tt/1Ik8NWI">if they consider your content waste of time</a> after inspecting this section. They’ll simply leave. This means that you have to position your key elements — mostly related to navigation — here. However this doesn’t mean that they don’t scroll at all. In fact there is a reason why <a href="http://ift.tt/2oSfgVa">“Long scrolling” turned out to be an awesome</a> feature in 2016. But ignoring the fold is a bad path to choose. What prooves this more, than an aggregated heat map from the Nielsen group was created after gathering data from <a href="http://ift.tt/2p3sw50">57.000 examined websites</a>.
As a UX designer, the physical locations of your screen elements are important.
In most cases, visitors browse your content from the top left to the bottom right, in an F-, Z shape. <a href="http://ift.tt/1rmQn9E">The Guttenberg diagram</a> represents those, who tend to navigate from top left to bottom right. <a href="http://ift.tt/1OOSAWt">The F pattern in practice</a> looks something like this:
<img alt="" src="http://ift.tt/2oS3MRk">The Gutenberg Diagram<img alt="" src="http://ift.tt/2p34Cqp">Z pattern<img alt="" src="http://ift.tt/2nVdsXw">F pattern illustrated with Heatmaps
Visitors have certain expectations before even visiting your site. You have to put the elements where they belong, in other words, where they’re the most expected.
This means you should ask yourself the question:
<blockquote>„Are my CTAs on the „critical path”?”</blockquote>
If the answer is YES, then you’ve done your first step in time optimization.
<h4>Size does matter!</h4>
Well to be fair, size and distance, <a href="http://ift.tt/1RIk6sW">according to Fitt’s law</a>. The time needed for a click to happen is defined by the size of the object and its distance from the pointer. But Fitt’s law involves more than graphical elements. When we consider text elements, it would look awkward to use large fonts just to point out that it’s clickable. What you can do is convert a whole sentence into a hypertext instead of a single word. This way the size is increased, <a href="http://ift.tt/1RGACI2">reducing the time to manage a click</a>. Also when the user moves the cursor to the target position, as soon as it get’s closer to the object, it will slow down to increase accuracy and avoid a potential misclick.
<img alt="" src="http://ift.tt/2p31DOZ">
<h4>Grouping</h4>
After Fitt’s comes Hick’s law. It says that if you have multiple objects in close proximity or multiple ones that function the same way, consider them as groups. With proper <a href="http://ift.tt/1MxAr2t">grouping, you can decrease the time</a> it takes for the user to run through your content.
<img alt="" src="http://ift.tt/2p3kKbF"><img alt="" src="http://ift.tt/2oSbif9">Less boring illustration of Hick’s law
<h4>Whitespace</h4>
Tweaking whitespace can have a direct impact on the intuitiveness of your design. <a href="http://ift.tt/1FiGuks">It eliminates the “crowded” feel</a> when the user interacts with your product by reducing the volume of information. Now it’s worth to note that not only text and certain graphical images hold information for the user. Pictures, videos, text and even navigation buttons hold information, that the user has to process.
<blockquote>Every single element of your product counts as information. The denser the information, the more confusing the end result gets.</blockquote>
<h3>Conclusion:</h3>
There are certain things you want to avoid when creating a new design. These can be:
<ul>
<li>hard to read content — not only the typography, but also the color of the text, CTA counts. Avoid using shades of grey, that fade away when changing presets of a screen, or in different view angles (with most TN panels)</li>
<li>areas that are hard to click — don’t make the user feel like it’s a sniper bootcamp out there, find the perfect size and distance</li>
<li>too many options — use grouping to tidy things up</li>
<li>no turning back — don’t slip on this banana, just don’t</li>
</ul>
Some of the good practices:
❤ home page is always accessible — this is a must have and it makes navigation so much faster. A simple “Home” button in the main menu, a clickable logo of your brand in the top left corner can save valuable seconds
❤ show them where they are — active tabs or navigation mapping can be very useful if they wish to go a step back
❤ easy to click areas — apply Fitt’s law to cut down any unnecessary movement and delay
Please write a comment, your feedback means a lot to me! Also sharing and recommending is a big motivation. I appreciate every help! ❤
<iframe src="http://ift.tt/2kZ4o5P" width="800" height="400" frameborder="0"><a href="http://ift.tt/2pIip9S">http://ift.tt/2pIip9S</a></iframe><img src="http://ift.tt/2oSk2lg" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2p3ej89">How to not suck as a ux designer?</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

How to not suck as a ux designer?

Top Stories