~uglyduck/uglyduck.srht.site

8880cd48140784be004960cd5a864821d7b4efa8 — Bradley Taunt 1 year, 6 months ago d73014e
Add proper image links to older custom project pages
3 files changed, 9 insertions(+), 9 deletions(-)

M better-search-results/index.html
M blog-anonymously/index.html
M index.md
M better-search-results/index.html => better-search-results/index.html +6 -6
@@ 12,7 12,7 @@
    <header>
        <div class="container">
            <h1>Better Search Results<span class="blinking-cursor">|</span></h1>
            <p class="center">A UX experiment and case study re-thinking the design of search result layouts <br>Published by <a href="https://bradleytaunt.com">Bradley Taunt</a></p>
            <p class="center">A UX experiment and case study re-thinking the design of search result layouts <br>Published by <a href="https://tdarb.org">Brad Taunt</a></p>
        </div>
    </header>
    <main>


@@ 23,7 23,7 @@
        <p>For our baseline example we will use the <a href="https://duckduckgo.com/">DuckDuckGo</a> search engine. If you aren't currently using DDG as your default search engine, I recommend that you make the switch. Google has continually proven that they shouldn't be trusted with user data, nor do they have their customers' well being and privacy at the forefront of their priorities. I've <a href="https://bradleytaunt.com/stop-crawling-google/">talked about ditching Google in the past</a> if you're interested. &lt;/End rant&gt;</p>
        <p>This is what a default search result for the term "canada" returns:</p>
        <div class="img">
            <img src="default-search-results.png" alt="Default Search Results">
            <img src="https://tdarb.org/better-search-results/default-search-results.png" alt="Default Search Results">
        </div>
        <p>Overall the design is clean and focuses on exactly what the user cares about: the content. A quick, detailed pane is presented to the right of the top list results, giving the user an easy overview of the searched query. I have no real complaints about the visuals. The overall UX is a different story.</p>



@@ 33,12 33,12 @@
        <h2>Introducing page size results</h2>
        <p class="multi">Why not give the user the ability to instantly know how much data each listing will consume <i>before</i> they commit to actually visiting that website? By introducing a simple toggle filter at the top of the search results (I would advocate to have this <i>active</i> by default) you give the user a quick-and-easy way to see each listing's total page size. Take a look at the concept of this idea below:</p>
        <div class="img">
            <img src="page-size-results.png" alt="Page Size Search Results">
            <img src="https://tdarb.org/better-search-results/page-size-results.png" alt="Page Size Search Results">
        </div>
        <p>In the top right section of each listing the user can now see how "heavy" each webpage item is. By displaying the page weight, users have a better understanding of which sites will be faster and easier on their data caps - based on a very simple addition.</p>
        <p>An indirect consequence (but overall a great bonus) of this page weight element being standard, is companies would be forced to review their current websites/apps, as to avoid being flagged.</p>
        <div class="img">
            <img src="search-item-details.png" alt="Search Item Details">
            <img src="https://tdarb.org/better-search-results/search-item-details.png" alt="Search Item Details">
        </div>
        <h3 style="color:#002CFC;">&bull; Page Size Indicator</h3>
        <p>This element would show the final size of the entire webpage the listing is linked to. Default styling would display this as a minimal, grey text item. Webpages with a total webpage size of <a href="https://www.machmetrics.com/speed-blog/website-size-the-average-web-page-size-is-more-than-2mb-twice-the-size-of-the-average-page-just-3-years-ago/">1MB or greater</a> would be styled in a way to warn the user of a large download requirement. (Light red background to attract immediate attention)</p>


@@ 46,10 46,10 @@
        <h2>Scanning results</h2>
        <p>Having the ability to know the weight of a given listing is great, but what about privacy? Including an option to tell the user which listings will track, send your data to 3rd-party services, or display obnoxious ads should be more important than your data consumption. This can also be implemented with a simple UI:</p>
        <div class="img">
            <img src="scan-results.png" alt="Scan Search Results">
            <img src="https://tdarb.org/better-search-results/scan-results.png" alt="Scan Search Results">
        </div>
        <div class="img">
            <img style="border-color:#F5A623;" src="search-item-scan.png" alt="Search Item Scanned">
            <img style="border-color:#F5A623;" src="https://tdarb.org/better-search-results/search-item-scan.png" alt="Search Item Scanned">
        </div>
        <h3 style="color:#002CFC;">&bull; Ads Indicator</h3>
        <p>This tag element is added to listings that contain certain flagged advertisement scripts (Google adsense, carbon ads, buysellads, etc.). Advertisements don't necessarily mean a <i>bad</i> experience, so their styling is designed as more informational.</p>

M blog-anonymously/index.html => blog-anonymously/index.html +1 -1
@@ 27,7 27,7 @@
<body>
    <header style="background:pink;">
        <section>
            <img style="margin: 2rem auto 0;" src="computer.svg" alt="Computer Graphic">
            <img style="margin: 2rem auto 0;" src="https://tdarb.org/blog-anonymously/computer.svg" alt="Computer Graphic">
            <h1 style="padding-bottom:2rem;">Blog Anonymously</h1>
        </section>
    </header>

M index.md => index.md +2 -2
@@ 32,10 32,10 @@ The web is a bloated mess. I created these ever-growing directories to showcase 

## Popular essays & thought experiments:

[Better Search Results](https://uglyduck.ca/better-search-results/) <br>
[Better Search Results](/better-search-results/) <br>
A UX experiment and case study re-thinking the design of search result layouts.

[Blog Anonymously](https://uglyduck.ca/blog-anonymously/) <br>
[Blog Anonymously](/blog-anonymously/) <br>
Tips and tricks on how to blog anonymously across the interwebs.

[Frugal Web Browser](https://frugalweb.xyz) <br>