{"id":65,"date":"2022-05-24T19:11:03","date_gmt":"2022-05-24T19:11:03","guid":{"rendered":"https:\/\/myweb.fiu.edu\/vmalesh\/?page_id=65"},"modified":"2022-05-24T19:11:34","modified_gmt":"2022-05-24T19:11:34","slug":"boingboing-net-a-ux-review","status":"publish","type":"page","link":"https:\/\/myweb.fiu.edu\/vmalesh\/reviews-samples\/boingboing-net-a-ux-review\/","title":{"rendered":"BoingBoing.Net &#8211; A UX Review"},"content":{"rendered":"\n<p>BoingBoing.net is, according to the Wikipedia page describing it: <\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>&#8230;[A] website, first established as a zine in 1988, later becoming a group blog. Common topics and themes include technology, futurism, science fiction, gadgets, intellectual property, Disney, and left-wing politics.<\/p><cite>Wikipedia; Boingboing.net<\/cite><\/blockquote>\n\n\n\n<figure class=\"wp-block-gallery columns-1 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"446\" height=\"238\" src=\"https:\/\/myweb.fiu.edu\/vmalesh\/wp-content\/uploads\/sites\/3769\/2022\/05\/boingboing-logo.png\" alt=\"\" data-id=\"69\" data-full-url=\"https:\/\/myweb.fiu.edu\/vmalesh\/wp-content\/uploads\/sites\/3769\/2022\/05\/boingboing-logo.png\" data-link=\"https:\/\/myweb.fiu.edu\/vmalesh\/?attachment_id=69\" class=\"wp-image-69\" srcset=\"https:\/\/myweb.fiu.edu\/vmalesh\/wp-content\/uploads\/sites\/3769\/2022\/05\/boingboing-logo.png 446w, https:\/\/myweb.fiu.edu\/vmalesh\/wp-content\/uploads\/sites\/3769\/2022\/05\/boingboing-logo-300x160.png 300w\" sizes=\"auto, (max-width: 446px) 100vw, 446px\" \/><figcaption class=\"blocks-gallery-item__caption\">The old Boingboing.net logo featuring the site&#8217;s mascot, Jackhammer Jill<br><\/figcaption><\/figure><\/li><\/ul><\/figure>\n\n\n\n<p>As a long-standing media institution, it should come as no surprise that this website offers an excellent user experience: aesthetically consistent, tonally engaged, and graceful in its simplicity.  <\/p>\n\n\n\n<p>Reviewing a site like BoingBoing is probably a fool&#8217;s errand.  BoingBoing has established its brand and has legions of loyal readers.  Nevertheless, it&#8217;s useful to consider alternatives even when everything seems to be ideal.  Consequently, a few recommendations can be found at the end of this report. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Criteria<\/h2>\n\n\n\n<p>My guides for evaluation, that is, the works I am citing directly are the basic web-writing guidelines provided by Usability.gov and a helpful article from canva.com I found titled &#8220;20 Web Design Principles to Follow&#8221; as well as Lynda Felder&#8217;s <em>Writing for the W<\/em>eb.  Both resources have similar dynamics, which I will describe as needed.  In sum, however, I&#8217;m looking at the aesthetics, the tone, and the ease-of-use for the Boingboing.net website. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Aesthetics<\/h3>\n\n\n\n<p>How does this website look?  Key concepts from usability.gov include: <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Use white space.&nbsp;&nbsp;<\/strong>Using white space allows you to reduce noise by visually separate information.<\/li><li><strong>Chunk your content.<\/strong>&nbsp; Chunking makes your content more scannable by breaking it into manageable sections.<\/li><\/ul>\n\n\n\n<p>Key concepts derived from the Canva.com article &#8220;20 Web Design Principles to Follow&#8221; include: <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Use the F (or Z) Pattern<\/strong>. <\/li><li><strong>Simple and Logical Page Navigation<\/strong>. <\/li><li><strong>Keep Your Design Consistent<\/strong>. <\/li><li><strong>Use a Complimentary Color Pallet<\/strong><\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Tone<\/h3>\n\n\n\n<p>How does this website sound?  Key concepts from usability.gov include: <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Use the words your users use.&nbsp;<\/strong>&nbsp;By using keywords that your users use, you will help them understand the copy and will help optimize it for search engines.<\/li><li><strong>Front-load the important information<\/strong>. Use the journalism model of the \u201cinverted pyramid.\u201d Start with the content that is most important to your audience, and then provide additional details.<\/li><li><strong>Use clear headlines and subheads<\/strong>. Questions, especially those with pronouns, are particularly effective.<\/li><\/ul>\n\n\n\n<p>Key concepts from Felder&#8217;s <em>Writing for the Web <\/em>include: <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Tell a Good Story<\/strong><\/li><li><strong>Use Active Voice<\/strong><\/li><li><strong>Write the Blog You Want to Read<\/strong><\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Ease-of-Use<\/h3>\n\n\n\n<p>How easy is it to navigate this website?  Key concepts from Usability.gov include: <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Use bullets and numbered lists<\/strong>. Don\u2019t limit yourself to using this for long lists\u2014one sentence and two bullets is easier to read than three sentences.<\/li><li><strong>Use images, diagrams, or multimedia<\/strong>&nbsp;to visually represent ideas in the content. Videos and images should reinforce the text on your page.<\/li><\/ul>\n\n\n\n<p>Key concepts from the  &#8220;20 Web Design Principles to Follow&#8221; include:   <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Simple and logical page navigation<\/strong><\/li><li><strong>Optimize buttons and calls-to-action<\/strong><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Evaluation<\/h2>\n\n\n\n<p>Boingboing.net looks very basic, which isn&#8217;t necessarily a bad thing.  It is text-dominant (it is a blog, after all), but the text is never presented as a dense, unassailable wall, and the headlines on the front page are broken up with images. <\/p>\n\n\n\n<p>Every page looks very similar, obeying the same top navigation-content-links model&#8230;except for one puzzling exception: the &#8220;About Us&#8221; page looks very 1990s.  Perhaps this is a quirky design touch, but it&#8217;s a bit confusing. <\/p>\n\n\n\n<p>BoingBoing.net follows an F pattern for readability (shown below) and uses a complimentary color pallet consisting largely of black-white-and red, perhaps as an allusion to the old joke (What&#8217;s black and white and red\/read all over?).  This simple combination of stark neutrals and bold red makes for an easy-to-replicate, un-busy presentation that makes reading the site very easy.  The design does not get in the way of the content. <\/p>\n\n\n\n<figure class=\"wp-block-gallery columns-1 is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"333\" height=\"411\" src=\"https:\/\/myweb.fiu.edu\/vmalesh\/wp-content\/uploads\/sites\/3769\/2022\/05\/BoingboingF-1.png\" alt=\"\" data-id=\"68\" data-full-url=\"https:\/\/myweb.fiu.edu\/vmalesh\/wp-content\/uploads\/sites\/3769\/2022\/05\/BoingboingF-1.png\" data-link=\"https:\/\/myweb.fiu.edu\/vmalesh\/?attachment_id=68\" class=\"wp-image-68\" srcset=\"https:\/\/myweb.fiu.edu\/vmalesh\/wp-content\/uploads\/sites\/3769\/2022\/05\/BoingboingF-1.png 333w, https:\/\/myweb.fiu.edu\/vmalesh\/wp-content\/uploads\/sites\/3769\/2022\/05\/BoingboingF-1-243x300.png 243w\" sizes=\"auto, (max-width: 333px) 100vw, 333px\" \/><figcaption class=\"blocks-gallery-item__caption\">Ad Block notwithstanding, Boingboing.net follows an easily discernible &#8220;F&#8221; pattern. <\/figcaption><\/figure><\/li><\/ul><\/figure>\n\n\n\n<p>Tonally, the whole website is usually aiming for &#8220;geek-hip&#8221; &#8211; the topics are in-line with the site&#8217;s mission (tech culture and politics) and focus on burning Teslas, movie trailers, and punk music.  Topics which, presumably, are of great interest to BoingBoing readers. <\/p>\n\n\n\n<p>The website is a bit light on navigability features within any given post. The posts are primarily short text excerpts, links, and embeds.  In this respect BoingBoing functions more as a content aggregator than a true blog or news site per se.   As such it might be better to have more obvious links. <\/p>\n\n\n\n<p>One way in which BoingBoing might better service its readers is to abandon its esoteric links in favor of clear access to external sites.  One article, &#8220;Restored first video of Smashing Pumpkins performing live in 1988 on public access cable TV&#8221; included two links and a video.  It was somewhat difficult to determine what action I, the user, should take regarding this content as the links were not completely descriptive. <\/p>\n\n\n\n<figure class=\"wp-block-gallery columns-1 is-cropped wp-block-gallery-3 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"975\" height=\"807\" src=\"https:\/\/myweb.fiu.edu\/vmalesh\/wp-content\/uploads\/sites\/3769\/2022\/05\/Boingboing-about.png\" alt=\"\" data-id=\"70\" data-full-url=\"https:\/\/myweb.fiu.edu\/vmalesh\/wp-content\/uploads\/sites\/3769\/2022\/05\/Boingboing-about.png\" data-link=\"https:\/\/myweb.fiu.edu\/vmalesh\/?attachment_id=70\" class=\"wp-image-70\" srcset=\"https:\/\/myweb.fiu.edu\/vmalesh\/wp-content\/uploads\/sites\/3769\/2022\/05\/Boingboing-about.png 975w, https:\/\/myweb.fiu.edu\/vmalesh\/wp-content\/uploads\/sites\/3769\/2022\/05\/Boingboing-about-300x248.png 300w, https:\/\/myweb.fiu.edu\/vmalesh\/wp-content\/uploads\/sites\/3769\/2022\/05\/Boingboing-about-768x636.png 768w, https:\/\/myweb.fiu.edu\/vmalesh\/wp-content\/uploads\/sites\/3769\/2022\/05\/Boingboing-about-800x662.png 800w\" sizes=\"auto, (max-width: 975px) 100vw, 975px\" \/><figcaption class=\"blocks-gallery-item__caption\">The jarringly inconsistent &#8220;About&#8221; page. <\/figcaption><\/figure><\/li><\/ul><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Findings<\/h2>\n\n\n\n<p>Boingboing.net has enjoyed a longevity few other websites have experienced. A media career of over 30 years obviously comes with its won narrative of success, and so my findings here must be understood as coming from a prescriptive &#8220;best practices&#8221; approach rather than a success which necessarily validates so-far-so-good experience. <\/p>\n\n\n\n<p>All in all, BoingBoing.net is a fun, hip blog with lots of exciting articles aggregated by knowledgeable curators and distributed via an eye-catching, easy-to-navigate front page.  <\/p>\n\n\n\n<p>Calls to action were somewhat ambiguous, however &#8211; perhaps a product of the site&#8217;s Gen-X authorship.  Some articles were simple re-posts with a sort of &#8220;hey, check this out I guess&#8221; attitude. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Recommendations<\/h2>\n\n\n\n<p>Boingboing.net might be better served with a firmer editorial hand and more descriptive links. <\/p>\n\n\n\n<p>For example, rather than simply having the word &#8220;this&#8221; link to a full-length article, have the entire sentence which describes the article serve as the link.  This fits in better with ADA compliance as well. <\/p>\n\n\n\n<figure class=\"wp-block-gallery columns-1 is-cropped wp-block-gallery-4 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"918\" height=\"214\" src=\"https:\/\/myweb.fiu.edu\/vmalesh\/wp-content\/uploads\/sites\/3769\/2022\/05\/boingboing1.jpg\" alt=\"\" data-id=\"66\" data-full-url=\"https:\/\/myweb.fiu.edu\/vmalesh\/wp-content\/uploads\/sites\/3769\/2022\/05\/boingboing1.jpg\" data-link=\"https:\/\/myweb.fiu.edu\/vmalesh\/?attachment_id=66\" class=\"wp-image-66\" srcset=\"https:\/\/myweb.fiu.edu\/vmalesh\/wp-content\/uploads\/sites\/3769\/2022\/05\/boingboing1.jpg 918w, https:\/\/myweb.fiu.edu\/vmalesh\/wp-content\/uploads\/sites\/3769\/2022\/05\/boingboing1-300x70.jpg 300w, https:\/\/myweb.fiu.edu\/vmalesh\/wp-content\/uploads\/sites\/3769\/2022\/05\/boingboing1-768x179.jpg 768w, https:\/\/myweb.fiu.edu\/vmalesh\/wp-content\/uploads\/sites\/3769\/2022\/05\/boingboing1-800x186.jpg 800w\" sizes=\"auto, (max-width: 918px) 100vw, 918px\" \/><figcaption class=\"blocks-gallery-item__caption\">Note that the word &#8220;said&#8221; links to a full-length article &#8211; a link reading &#8220;Lou Hinkhouse said in an article posted to SP Codex Wiki&#8221; would increase utility and clarity.<br><\/figcaption><\/figure><\/li><\/ul><\/figure>\n\n\n\n<p>SImilarly, while the websites politics and culture are assumed to be understood, some articles lacked an editorial or authorial judgment or statement.  While the reader can deduce what&#8217;s intended from a close read and via context clues, a novice reader might mistake something like a video post for an endorsement rather than a condemnation. <\/p>\n\n\n\n<p>In the end, any interference with the BoingBoing.net model would only be tampering with success, but as mentioned previously, considerations and evaluations are almost always worthwhile.  What&#8217;s true today for a website may not be true in 2 years, or even 2 months.  As a result, I offer these findings for consideration. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>BoingBoing.net is, according to the Wikipedia page describing it: &#8230;[A] website, first established as a zine in 1988, later becoming a group blog. Common topics and themes include technology, futurism, science fiction, gadgets, intellectual property, Disney, and left-wing politics. Wikipedia; &hellip; <a href=\"https:\/\/myweb.fiu.edu\/vmalesh\/reviews-samples\/boingboing-net-a-ux-review\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":3770,"featured_media":0,"parent":57,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-65","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/myweb.fiu.edu\/vmalesh\/wp-json\/wp\/v2\/pages\/65","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/myweb.fiu.edu\/vmalesh\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/myweb.fiu.edu\/vmalesh\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/myweb.fiu.edu\/vmalesh\/wp-json\/wp\/v2\/users\/3770"}],"replies":[{"embeddable":true,"href":"https:\/\/myweb.fiu.edu\/vmalesh\/wp-json\/wp\/v2\/comments?post=65"}],"version-history":[{"count":0,"href":"https:\/\/myweb.fiu.edu\/vmalesh\/wp-json\/wp\/v2\/pages\/65\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/myweb.fiu.edu\/vmalesh\/wp-json\/wp\/v2\/pages\/57"}],"wp:attachment":[{"href":"https:\/\/myweb.fiu.edu\/vmalesh\/wp-json\/wp\/v2\/media?parent=65"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}