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

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<p><a href="http://ift.tt/2perP9p">medium bookmark / Raindrop.io</a> |  </p>
<div>
<div>
<div>
<div>
<div><a href="http://ift.tt/2pOIK4S"><img src="http://ift.tt/2pTGvvL" alt="Go to the profile of John Duncan"></a></div>
<div><a href="http://ift.tt/2pOIK4S">John Duncan</a></p>
<p>UX Designer @Tabcorp Sydney. Fascinated by simplicity, colour and human behaviour. 🌴</p>
<p>May 3</p>
</div>
</div>
</div>
</div>
</div>
<div>
<div>
<div>
<div>
<div>
<div><img src="http://ift.tt/2pM5Rxb" alt="1*QwxkebxjQRZKN0d4rUcNXg@2x.png"></div>
</div>
</div>
<div>
<p><a href="http://ift.tt/VB3uTS">Dieter Rams 10 Principles</a> are a great way to describe “Good Design.” But what are the underlying techniques that help us achieve these principles?</p>
<p>There are plenty of techniques that make designs more <em>effective</em>. But few actually line up with Dieter Rams Principles. E<em>ffective</em> design often celebrates discovery and exploration. Company’s measure screen time and impressions, then build algorithms to manipulate customers.*</p>
<p>*<em>Not all discovery or algorithms are bad. Spotify do an amazing job of discovery </em><strong><em>without</em></strong><em> manipulating their customers.</em></p>
<p>But what about focus? Sites like Medium are built on focus, and it’s the reason we love it. That’s where Progressive Disclosure comes in. It creates useful, aesthetic, understandable, honest and, most importantly, focused design. It’s not new either, in fact its been around for more than 30 years!</p>
<h3>😕 Progressive what?</h3>
<blockquote><p>Progressive disclosure is an interaction design technique often used in human computer interaction to help maintain the focus of a user’s attention by reducing clutter, confusion, and cognitive workload. This improves usability by presenting only the minimum data required for the task at hand. (<a href="http://ift.tt/1Ertg4N">Wikipedia</a>)</p></blockquote>
<p>Don’t fret, even if you haven’t heard of it, you will have seen and designed to it. A common example is the navigation system on iOS (<a href="http://ift.tt/2pkixsd">Nested Doll Navigation</a>). There are so many features in iOS so there needs to be a simple way for customers to find them.</p>
<p>For example, turning on Wi-Fi on an iOS device is simple. Firstly the Settings screen focuses the customers on <strong>finding</strong> the right feature. The word <strong>Wi-Fi</strong> becomes the minimum amount of data needed. Even on the Wi-Fi screen available networks aren’t displayed until Wi-Fi is switched on. Why show customers available networks if their Wi-Fi isn’t even switched on?</p>
</div>
<div>
<div>
<div><img src="http://ift.tt/2pOHA9q" alt="1*do1FKnmLV2VWjfQQaBjAHw.png"></div>
</div>
<p>iOS Nested Doll Navigation</p></div>
<div>
<p>The journey moves from an abstract location (Settings) to somewhere specific (Wi-Fi). It requires a few extra taps to get to the feature, but it reduces the amount of thinking needed in each step. Facebooks search feature is a <a href="http://ift.tt/2ghIepN">great example of how a few extra steps creates a more focus</a>.</p>
<h3>🤔 Why’s it so great?</h3>
<p>As you’ve already heard me say it’s <strong>FOCUS</strong>. Remove all the distractions and letting customer get their tasks done! Banking apps make great use of progressive disclosure and staying focused. The last thing they want is for a customer to be distracted when transferring money. Distractions increase the likelihood of errors, which would need to be fixed by the bank.</p>
<p>Progressive disclosure creates a more obvious flow for customers (and <a href="http://ift.tt/2pk0Itz">obvious always wins</a>). Look at the checkout on any good ecommerce site, they have a clear path forward. Take it to the extreme and remove the entire checkout and you get Amazon. 1-Click checkout removes all the distractions of the checkout by using smart defaults. Customers setup their defaults once and never have to look at them again.</p>
<div>
<div><img src="http://ift.tt/2pTx6nG" alt="1*aCNuDmQytBUGjOTEl6mtOw.png"></div>
</div>
<p>Amazon 1-Click Checkout</p>
<p>Also it creates honest designs. Progressive disclosure moves secondary features from the main flow. Prioritising and evaluating features before you move them requires brutal honesty. Killing and reprioritising* features means asking those difficult questions. But what you’re left with is an honest product for the customers, not pretending to be something it’s not.</p>
<p>*<em>Design is iterative so just because something isn’t working right now doesn’t mean it won’t work down the track. But until it’s useful for the customer don’t force it.</em></p>
<h3>🚍 What to watch out for</h3>
<p>As with everything there are some keys to getting this technique right. The obvious one is don’t hide features that your customers need. Start off by identify and prioritising your users goals (if things are complex you can bust out a <a href="http://ift.tt/1OUYKXC">Task Model</a>). If you have analytics have a dig around to validate your prioritisation.</p>
<p>Once you decide to move a feature onto a secondary screen, test your labels and flow with your audience. Labels like “More” or “Advanced Settings” are pretty ambiguous and scare customers away. Put yourself in your customers shoes, try to uncover the words going around in their head. For example banking apps allows customers to transfer money. What are the keywords in the customers head? Are they thinking “transfer, transfer, transfer” or “send, send, send” or something completely different?</p>
<p>Finally, there’s the <em>business</em> side of things. If the <em>business</em> has invested in a new feature they’ll want it to be front and centre. Sometimes there’s a case for this, it could be a strategic advantage over the competition . Other times you’re distracting your customers.</p>
<div>
<div><img src="http://ift.tt/2pOQ6p8" alt="1*xkJ8yJAhox2MoRUmK6cIJA.png"></div>
</div>
<p>The Iconic Checkout</p></div>
</div>
</div>
<div>
<hr>
<div>
<div>
<p>Progressive disclosure 🤤❤️ might add a few steps to your design, but that’s not always a bad thing. Use it correctly and you have a powerful technique to keeps your designs focused.</p>
</div>
</div>
</div>
<div>
<hr>
<div>
<div>
<div></div>
</div>
</div>
</div>
</div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<p>Write a response…</p>
<p>prototypr.io</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div><a href="http://ift.tt/2perP9p">http://ift.tt/2perP9p</a></div>


Design technique: Progressive Disclosure – Muzli -Design Inspiration

Design technique: Progressive Disclosure – Muzli -Design Inspiration

Top Stories