Transparency &amp; Trust https://smarterpatterns.com/ en Algorithm Effectiveness Rating https://smarterpatterns.com/patterns/186/algorithm-effectiveness-rating <span>Algorithm Effectiveness Rating</span> <div> <div>Application</div> <div><a href="/index.php/taxonomy/term/6" hreflang="en">Communication</a></div> </div> <span><span>mattiealston</span></span> <span>Tue, 12/15/2020 - 00:00</span> <div> <div>Topic</div> <div><a href="/index.php/taxonomy/term/36" hreflang="en">Transparency &amp; Trust</a></div> </div> <div><p><b>Problem:</b></p> <p>In order to understand the likelihood of success, the user wants to know how effective the algorithm is before initiating an operation.&nbsp;</p> <figure><img alt="A screenshot of the page promoting the &quot;Picture This&quot; app" data-entity-type="file" data-entity-uuid="62f89f9b-a158-4961-b37f-7f17db8d1fa5" src="/sites/default/files/content-images/accuracy_score_PictureThis_2.png" style="width:100%" /> <figcaption>The "PictureThis" app boasts about its 95% accuracy rate, which is also implicitly being honest about its 5% failure rate.</figcaption> </figure> <p><b>Solution:</b></p> <p>The system communicates an effectiveness metric. For example, in pattern recognition operations&nbsp;this could be indicated in terms of what percentage of image capture inputs result in a successful match with the correct data points.&nbsp;</p> <p><b>Discussion:</b></p> <p>Obviously if a system communicates that it is less than 100% successful 100% of the time, that can undermine the confidence a user has in that system. But in the the long term, acknowledging the fallibility of a system is a vital part of building trust in it (as per <a href="/patterns/21/setting-expectations-acknowledging-limitations">Setting Expectations and Acknowledging Limits</a>).&nbsp;</p> <p>Quantifying the effectiveness with a score provides a couple of advantages over a vaguer, copy-driven approach. Firstly, if the metric is comparable to ones used by similar competitor systems, the user can easily establish how this system compares to others. Secondly, as the score is subject to change, this allows the system to track and communicate how it has improved over time — acknowledging initial shortcomings while establishing a trajectory towards increased success encourages the user to return later and engage further, as opposed to simply overpromising and underdelivering on first use, which can discourage further exploration.</p> </div> Tue, 15 Dec 2020 00:00:00 +0000 mattiealston 186 at https://smarterpatterns.com Algorithm Processing Status https://smarterpatterns.com/patterns/46/algorithm-processing-status <span>Algorithm Processing Status </span> <div> <div>Application</div> <div><a href="/index.php/taxonomy/term/31" hreflang="en">System Feedback</a></div> </div> <span><span>leighbryant</span></span> <span>Sun, 11/15/2020 - 00:00</span> <div> <div>Topic</div> <div><a href="/index.php/taxonomy/term/36" hreflang="en">Transparency &amp; Trust</a></div> </div> <div><p><strong>Problem:</strong></p> <p>The algorithm may take a while to deliver a result. While this is happening, the user wants to know what is taking place.</p> <figure><img alt="Example from Webscore AI of a progress bar updating status of task while the AI operates" data-entity-type="file" data-entity-uuid="0d78b25d-b172-48a0-b71d-571177665547" src="/sites/default/files/content-images/Algorithm_Processing_Status-webscore-ai-history.png" /> <figcaption>The AI-powered application provides both a progress bar and a more granular explanation for the time it is taking in note-form below the bar.</figcaption> </figure> <p><strong>Solution:</strong></p> <p>The system provides granular progress messages during calculations.&nbsp;</p> <p><strong>Discussion:</strong></p> <p>This is important both for the transparency of the system—to reassure the user that the system is operating and hasn't stalled—and to create the impression of an intelligent system with many moving parts. In some cases where there is no actual processing delay, it may even be beneficial to simulate one (as with <a href="/patterns/151/demonstrating-thinking">Demonstrating Thinking</a>). By contrast, sometimes it may undermine the overall impression of the system to expose its workings and over-explain (in which case <a href="/patterns/156/appropriate-magic">Appropriate Magic</a> might be deployed).</p> </div> Sun, 15 Nov 2020 00:00:00 +0000 leighbryant 46 at https://smarterpatterns.com Appropriate Magic https://smarterpatterns.com/patterns/156/appropriate-magic <span>Appropriate Magic</span> <div> <div>Application</div> <div><a href="/index.php/taxonomy/term/1" hreflang="en">Behaviour</a></div> </div> <span><span>leighbryant</span></span> <span>Tue, 09/15/2020 - 00:00</span> <div> <div>Topic</div> <div><a href="/index.php/taxonomy/term/36" hreflang="en">Transparency &amp; Trust</a></div> </div> <div><p><strong>Problem:
</strong></p> <p>A user wants to be awed, wowed, and amazed by a piece of software. Sidetracking to explain its workings can disrupt the flow of the experience and spoil the fun.</p> <figure><img alt="A screenshot of a conversational interaction with the &quot;WoeBot&quot;" data-entity-type="file" data-entity-uuid="ca7d0aa2-b3e2-49df-82b3-809fba9e333b" src="/sites/default/files/content-images/WoeBot_Appropriate_Magic_Edited_0.png" style="width:100%" /> <figcaption>The "WoeBot" encourages the user to think of it as human-like, to encourage a more natural, personal rapport, without diving into detail about how the AI that supports that persona works.</figcaption> </figure> <p><strong>Solution:
</strong></p> <p>When appropriate, the system should obfuscate the underlying algorithm and instead use playful language to suggest that the system is more than just a math machine—&nbsp;it's magical!&nbsp;</p> <p><strong>Discussion:
</strong></p> <p>This (obviously) is contrary to all other patterns around user education and transparency&nbsp;and so should be handled with care. That said, whatever we're designing&nbsp;we should be making deliberate choices about the presentation layer of an AI app. Even if the UI does little to try and steer the user toward&nbsp;a certain conceptual framework, the user builds a mental model regardless, which may be very different to the designer's&nbsp;intent. Whether it's transparent, magical, or otherwise, designers should see the opportunity to take the initiative in facilitating this mental model and not leave it to chance.&nbsp;
<br /> &nbsp;</p> </div> Tue, 15 Sep 2020 00:00:00 +0000 leighbryant 156 at https://smarterpatterns.com Before & After Comparison https://smarterpatterns.com/patterns/196/after-comparison <span>Before &amp; After Comparison</span> <div> <div>Application</div> <div><a href="/index.php/taxonomy/term/31" hreflang="en">System Feedback</a></div> </div> <span><span>mattiealston</span></span> <span>Fri, 05/15/2020 - 00:00</span> <div> <div>Topic</div> <div><a href="/index.php/taxonomy/term/36" hreflang="en">Transparency &amp; Trust</a></div> </div> <div><p><b>Problem:</b></p> <p>The user has submitted an artifact for processing, be it an image, sound clip, or video file, and wants to understand fully what effect the processing has had.&nbsp;</p> <figure><img alt="The &quot;Inpainting&quot; demo app shows a &quot;Before&quot; and &quot;After&quot; image in the UI" data-entity-type="file" data-entity-uuid="63b04bb5-a968-4ccb-af99-6f32ab090a8e" src="/sites/default/files/content-images/Before_%26_after_Inpainting_0.png" style="width:100%" /> <figcaption>This demo from Nvidia is so convincing that you might not even believe the "After" image had been edited if you couldn't compare it to the "Before"&nbsp;</figcaption> </figure> <p><b>Solution:</b></p> <p>The system presents the user with their initial artifact beside the processed version for comparison. On a desktop app, this may mean a simple split display. On a mobile app where screen real-estate is more of a concern, this could take the form of a slider that allows the user to swipe between before and after images, or a similar interactive device.&nbsp;</p> <p><b>Discussion:</b></p> <p>Although a very straightforward pattern, it is one that can be&nbsp;overlooked by designers. Losing sight (or sound) of the original content&nbsp;can present serious problems for the user in evaluating the effectiveness of the processing, or, if the effect is subtle, to even verify that processing has correctly taken place. The immediacy of comparison is key to reducing the cognitive load required of the user.&nbsp;In many cases even when the original content is presented with the processed version, the user is required to click in and out of each version via preview thumbnails, which makes direct comparison problematic. Likewise for sound clips or video, being able to quickly swap between before and after clips as they play (without restarting) aids the immediacy of comparison.</p> </div> Fri, 15 May 2020 00:00:00 +0000 mattiealston 196 at https://smarterpatterns.com Confidence Status https://smarterpatterns.com/patterns/31/confidence-status <span>Confidence Status</span> <div> <div>Application</div> <div><a href="/index.php/taxonomy/term/31" hreflang="en">System Feedback</a></div> </div> <span><span>leighbryant</span></span> <span>Sat, 02/15/2020 - 00:00</span> <div> <div>Topic</div> <div><a href="/index.php/taxonomy/term/36" hreflang="en">Transparency &amp; Trust</a></div> </div> <div><p><strong>Problem:&nbsp;</strong></p> <p>Users want to know how accurate results are when the system presents the results of a calculation.</p> <figure><img alt="A screenshot from the Trainline app showing likely seat availabilities based on AI" data-entity-type="file" data-entity-uuid="02639035-127e-4575-8b18-112d0ddc5741" src="/sites/default/files/content-images/Pattern_Confidence%20Status_Trainline%20BusyBot_Oct19.png" style="width:100%" /> <figcaption>The wording “Seats may be available” was chosen carefully and deliberately to suggest there is a degree of uncertainty in the train busy-ness prediction.</figcaption> </figure> <p><strong>Solution:</strong></p> <p>The system provides a visual indication of the confidence status of the calculation (as a percentage, by graphical indicator, or through another format).&nbsp;</p> <p><strong>Discussion:</strong></p> <p>When the operation of an algorithm is opaque to the user, it is hard for that user to assess how much trust to place in the calculation. Transparency in the algorithm is vital for the user to build a relationship of trust in the system. This transparency includes not just details of how the algorithm arrives at its results, but also honesty about its shortcomings. Displaying a confidence status allows the user to differentiate between reliable and unreliable outcomes, and to make more informed choices. It also works to mitigate the negative impression around inaccurate results and to amplify the feeling of success around accurate ones.<br /> <br /> <br /> <b>Other Examples:</b><br /> &nbsp;</p> <figure><img alt="A screenshot of the app Celebs Like Me showing confidence of match" data-entity-type="file" data-entity-uuid="6d940ef6-4971-40dd-b410-67b5e5e24a1a" src="/sites/default/files/content-images/Confidence_Intervals-celebslikeme_0.png" style="width:100%" /> <figcaption>A lookalike app displays a confidence status with each potential match to show how similar the system thinks its AI prediction is.</figcaption> </figure> <figure><b><img alt="Example of image recognition accuracy metrics (.93 and .98 on the images displayed of a laptop and a bottle respectively) to give users a sense of how closely the results match the system's parameters" data-entity-type="file" data-entity-uuid="2e8be7f7-e5c1-4bf4-a868-2e4fc69a0896" src="/sites/default/files/content-images/Confidence_Intervals-bingsearch.png" /></b> <figcaption>Another image recognition AI app displays a score for certainty of assessment.</figcaption> </figure> </div> Sat, 15 Feb 2020 00:00:00 +0000 leighbryant 31 at https://smarterpatterns.com Data Being Shared Flag https://smarterpatterns.com/patterns/266/data-being-shared-flag <span>Data Being Shared Flag</span> <div> <div>Application</div> <div><a href="/index.php/taxonomy/term/21" hreflang="en">Input Data</a></div> </div> <span><span>mattiealston</span></span> <span>Tue, 10/15/2019 - 00:00</span> <div> <div>Topic</div> <div><a href="/index.php/taxonomy/term/36" hreflang="en">Transparency &amp; Trust</a></div> </div> <div><p><b>Problem:</b></p> <p>When the system communicates data to third parties, the user wants to know what data is being shared and what is not.</p> <figure><img alt="A screenshot from the Youper app showing a set-up page with a label reading &quot;Private - not shared&quot;." data-entity-type="file" data-entity-uuid="d4bd086b-1edc-4fe4-ba38-00a9f82a6d1e" src="/sites/default/files/content-images/Data_being_shared_flag.png" style="width:100%" /> <figcaption>As part of the set-up process, Youper flags what data is being shared.</figcaption> </figure> <p><b>Solution:</b></p> <p>The system flags inputs to show this&nbsp;or otherwise tells the user what data is being shared and to whom.</p> <p><b>Discussion:</b></p> <p>Transparency shouldn't end with a vague story about data generically being stored and shared, rather it should be explicit about what particular data is being used for any particular purpose. Similarly, when data is not being shared, the user will also be reassured to know this.</p> </div> Tue, 15 Oct 2019 00:00:00 +0000 mattiealston 266 at https://smarterpatterns.com Dataset Explorer https://smarterpatterns.com/patterns/201/dataset-explorer <span>Dataset Explorer</span> <div> <div>Application</div> <div><a href="/index.php/taxonomy/term/16" hreflang="en">Display</a></div> </div> <span><span>mattiealston</span></span> <span>Thu, 08/15/2019 - 00:00</span> <div> <div>Topic</div> <div><a href="/index.php/taxonomy/term/36" hreflang="en">Transparency &amp; Trust</a></div> </div> <div><p><b>Problem:</b></p> <p>The user wants to understand how the underlying data used in a system is structured, how extensive it is, and&nbsp;comprehend&nbsp;how it is used by the system.</p> <figure><img alt="A screenshot of the &quot;Infinite Drum Machine&quot; app showing datapoints clustered by similarity. " data-entity-type="file" data-entity-uuid="32a77257-aecf-40d9-a391-7923c3c79132" src="/sites/default/files/content-images/Dataset_explorer_Infinite_Drum_Machine_0.png" style="width:100%" /> <figcaption>The "Infinite Drum Machine" provides a playful way to explore the data (in this case different percussive sound samples clustered by audio similarity) .</figcaption> </figure> <p><b>Solution:</b></p> <p>Alongside the core functionality provided by the system, there is an extra feature that allows the user to dive into the data itself and explore it from different angles, using filters and other controls to manipulate it. This may utilize an attractive <a href="/patterns/206/dataset-visualization">Dataset Visualization</a> pattern as part of this interface, that can provide a playful interaction in its own right. Alternatively, it might be a simple list or table, which holds less appeal for casual explorers (and indeed may be very daunting for them to deal with) but empowers serious users to deepen their understanding of, and expertise with, the system.&nbsp;</p> <p><b>Discussion:</b></p> <p>For some applications, exploring a dataset can be the very point of the system, and plentiful examples of these can be found. For others, where there is a dataset “under the hood” powering operations, it might not increase the utility of the application to allow users to explore the data, but it can be very effective at building trust in the system by exposing its inner workings. In addition, it can provide a compellingly pleasurable “bonus feature” that can drive additional engagement.&nbsp;</p> <p><br /> <strong>More Examples:</strong></p> <figure><img alt="A screengrab of the dataset explorer functionality in the Fontjoy application." data-entity-type="file" data-entity-uuid="b2e963c7-16ec-43ea-bdad-a98b4ce8c606" src="/sites/default/files/content-images/data_explorer_Fontjoy.png" style="width:100%" /> <figcaption>In addition to the core&nbsp;font finding feature, Fontjoy provides a dataset explorer that enables a deep dive into everything the system knows about fonts.</figcaption> </figure> </div> Thu, 15 Aug 2019 00:00:00 +0000 mattiealston 201 at https://smarterpatterns.com Dataset Visualization https://smarterpatterns.com/patterns/206/dataset-visualization <span>Dataset Visualization</span> <div> <div>Application</div> <div><a href="/index.php/taxonomy/term/16" hreflang="en">Display</a></div> </div> <span><span>mattiealston</span></span> <span>Mon, 07/15/2019 - 00:00</span> <div> <div>Topic</div> <div><a href="/index.php/taxonomy/term/36" hreflang="en">Transparency &amp; Trust</a></div> </div> <div><p><b>Problem:</b></p> <p>The user wants to quickly understand the general shape of the dataset used by the system, the extent of it, and what patterns might exist within it.&nbsp;</p> <figure><img alt="A screengrab from the &quot;Living Archive&quot; app from Google showing a visualization of different dance moves." data-entity-type="file" data-entity-uuid="a6c1cd5d-f8bc-44cf-b56f-0414cbc43abc" src="/sites/default/files/content-images/Dataset_visualisation_Living_Archive2.png" style="width:100%" /> <figcaption>The "Living Archive" visualization from Google is an insightful and attractive way to explore the catalogue of dance moves from choreographer Wayne McGregor.</figcaption> </figure> <p><b>Solution:</b></p> <p>The system provides an attractive visualization that takes all the underlying data or a subset of it, and renders it into an easily comprehendible visual. This may be a static image&nbsp;or, if interactive, it may form part of a Dataset Explorer.</p> <p><b>Discussion:</b></p> <p>In general, users struggle to understand what it means when data powers a system, especially when the reality is that that data is just a list of abstract variables. Using a visualization to illustrate the nature of that data is an incredibly effective tool for helping users build a mental model of the system. In contrast to the Dataset Explorer pattern, where users want to understand and validate the data on a granular level, here even if that visualization is a big picture simplification or only portrays a small subset of data, it can still be a very valuable asset to share.</p> </div> Mon, 15 Jul 2019 00:00:00 +0000 mattiealston 206 at https://smarterpatterns.com Demonstrating Thinking https://smarterpatterns.com/patterns/151/demonstrating-thinking <span>Demonstrating Thinking</span> <div> <div>Application</div> <div><a href="/index.php/taxonomy/term/16" hreflang="en">Display</a></div> </div> <span><span>leighbryant</span></span> <span>Sat, 06/15/2019 - 00:00</span> <div> <div>Topic</div> <div><a href="/index.php/taxonomy/term/36" hreflang="en">Transparency &amp; Trust</a></div> </div> <div><p><strong>Problem:
</strong></p> <p>The user wants to know that the system has conducted a complex calculation. If the calculation occurs too quickly, they might not believe that the calculation has been completed correctly or has been extensive enough in considering all the variables.</p> <figure><img alt="Screenshot of the Articoolo application mid-way through an action" data-entity-type="file" data-entity-uuid="23d49df3-a717-4da7-8e57-19c49556e867" src="/sites/default/files/content-images/Articoolo.com_Progress_Edited_0.png" style="width:100%" /> <figcaption>The Articoolo app uses a progress bar and explanatory text to demonstrate the AI is "at work", so the user is given the sense that "thinking" is happening.</figcaption> </figure> <p><strong>Solution:
</strong></p> <p>The system uses artificial wait times and progress messages to demonstrate that it is "thinking" and applying satisfactory effort to the calculation.&nbsp;</p> <p><strong>Discussion:
</strong></p> <p>While simplicity in an interface is often desirable, in some cases the appearance of complexity may be beneficial, even to the point of simulating some of that complexity. While the reality of a system's intelligence may result in effortless calculations and speedy response times, the perception of a system's intelligence is ironically often associated with the appearance of effort and slower responses.&nbsp;
<br /> &nbsp;</p> </div> Sat, 15 Jun 2019 00:00:00 +0000 leighbryant 151 at https://smarterpatterns.com Dreamlike Novelty https://smarterpatterns.com/patterns/271/dreamlike-novelty <span>Dreamlike Novelty</span> <div> <div>Application</div> <div><a href="/index.php/taxonomy/term/16" hreflang="en">Display</a></div> </div> <span><span>mattiealston</span></span> <span>Wed, 05/15/2019 - 00:00</span> <div> <div>Topic</div> <div><a href="/index.php/taxonomy/term/36" hreflang="en">Transparency &amp; Trust</a></div> </div> <div><p><b>Problem:</b></p> <p>Sometimes the user wants to be surprised, to be hit with a joyous wave of weirdness that disrupts their everyday existence and makes them question whether they are awake or are dreaming the strangest of dreams. They also want to laugh at bizarre&nbsp;notions, such is the nature of absurdist humour.&nbsp;</p> <figure><img alt="A screenshot of the app &quot;Artbreeder&quot; showing some dreamlike imagery it has generated." data-entity-type="file" data-entity-uuid="1eaf22a0-6bf1-4a73-aa53-d443ba1e2b3c" src="/sites/default/files/content-images/Dreamlike_novelty_Artbreeder.png" style="width:100%" /> <figcaption>Artbreeder combines images of everyday objects to produce dreamlike creations.</figcaption> </figure> <p><b>Solution:</b></p> <p>Machine learning apps can often output strange results, whether accidentally or by design — the interface should embrace this freakiness and share this with the user. This can be in the form of generative text, imagery, or video.&nbsp;</p> <p><b>Discussion:</b></p> <p>Many of us long to be tourists in the world of the weird. Now we can be confronted with and delighted by such alien creativity as emerges from machine minds.&nbsp;We have constructed a gateway into the domain of dreams!&nbsp;</p> <p>The reality is that any machine learning tool is going to take odd paths regardless, so, where appropriate, make it a feature not a flaw to expose the oddities. Beware, though, that what one person considers to be charming Dreamlike Novelty, another may consider horrible <a href="/patterns/226/anti-pattern-nightmare-fuel">Nightmare Fuel</a>.</p> </div> Wed, 15 May 2019 00:00:00 +0000 mattiealston 271 at https://smarterpatterns.com