{"id":6552,"date":"2022-04-29T10:26:19","date_gmt":"2022-04-29T10:26:19","guid":{"rendered":"https:\/\/www.uxdesigninstitute.com\/blog\/?p=6552"},"modified":"2024-01-16T14:17:09","modified_gmt":"2024-01-16T14:17:09","slug":"fun-side-of-ux","status":"publish","type":"post","link":"https:\/\/www.uxdesigninstitute.com\/blog\/fun-side-of-ux\/","title":{"rendered":"Exploring the fun side of UX"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Trends are a dominant force in the design world and the latest rising trend in UX is fun. You may have noticed that some everyday apps and websites have added more colourful and somewhat silly features to help brighten up their service and add some joy into the user\u2019s experience.\u00a0 While it\u2019s not a new phenomenon by any means, the fun side of UX is out and proud and here to stay.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To some people, design can be a very serious thing. Using sombre colours to demonstrate professionalism and practically using a template approach to images, it used to be difficult to distinguish the homepage of any websites from the other if their logos and names were removed. In the same way that we can see gentrification affecting cities and towns, <a href=\"https:\/\/uxdesign.cc\/the-unexpected-gentrification-of-user-experience-81f5d0cb6a40\" target=\"_blank\" rel=\"noopener\">UX gentrification<\/a> means that all products face the danger of looking the same.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Be we can be serious about the fun side of UX. How can we make a product usable <\/span><i><span style=\"font-weight: 400;\">and<\/span><\/i><span style=\"font-weight: 400;\"> entertaining?\u00a0<\/span><\/p>\n<section id=\"promotion\" class=\"promotion-content-raw inlinepromo inlinepromo_professional-diploma-in-ux-designp-1 my-4\" style=\"\">\n\t<div class=\"w-container\">\n\t\t<div class=\"row align-items-center\">\n\t\t\t<div class=\"col-md-12 promotion-info\">\n                <a class=\"link-content\" href=\"https:\/\/www.uxdesigninstitute.com\/courses\/ux-design?utm_source=blog&amp;utm_medium=blog_panel_pdux&amp;utm_campaign=blog_promo\" style=\"\">\n                    <p>[GET CERTIFIED IN UX]<\/p>\n                    <span>Take our Professional Diploma in UX Design course<\/span>\n                <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n<h3><span style=\"font-weight: 400;\">What is fun UX?<\/span><\/h3>\n<p><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">Perhaps we could credit Clippy or Clippit, the paper clip Office Assistant who first debuted\u00a0 in Microsoft\u2019s Office 2000, with being an early example of fun UX. Created to be helpful to people who were unfamiliar with the workings of letter writing in Office, as people became more fluent in tech and computers, Clippy soon became a nuisance and was <\/span><a href=\"https:\/\/www.artsy.net\/article\/artsy-editorial-life-death-microsoft-clippy-paper-clip-loved-hate\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">drastically killed off in 2007<\/span><\/a><span style=\"font-weight: 400;\">.\u00a0<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9531 size-full\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2022\/04\/Screenshot-2022-04-25-at-14.59.33-1-1.png\" alt=\"Clippy - Microsoft Office\" width=\"1940\" height=\"1090\" title=\"\"><\/p>\n<p><span style=\"font-weight: 400;\">However, from puppy-eared filters on Instagram stories to celebratory animations on project tools, fun UX is now everywhere.\u00a0<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"font-weight: 400;\">Where did it begin?<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Emoji<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">The origins of emoji &#8211; or emoticons, as they were known for a time &#8211;\u00a0 can be linked back to three starting dates. In the 1960s, the Russian novelist and professor Vladimir Nabokov suggested in\u00a0 The New York Times that \u201cthere should exist a special typographical sign for a smile \u2014 some sort of concave mark, a supine round bracket&#8221;. In 1982, the computer scientist Scott Halman suggested that we could use : &#8211; )\u00a0 and : &#8211; ( to replace text, which would later influence the Wingdings Microsoft font.<\/span><\/p>\n<p>However, it was in and around 1997 that emojis that most of us are familiar with first appeared. A Japanese telecommunications company released the SkyWalker DP-211SW, a mobile phone that came with, allegedly, the first-ever set of emoj. The 90 black and white images were 12 by 12 pixels and they covered the basics: numbers, sports, time, moon phases, the weather and, of course, the Poo emoji.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6556\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2022\/04\/first-emojis.jpeg\" alt=\"Shigetaka Kurita&#039;s emojis\" width=\"844\" height=\"475\" title=\"\"><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">With the popularisation of instant messaging, like MSN and AOL,\u00a0 and the increase in mobile phone use at the turn of the Millennium, the emoji became more commonplace. <\/span>The emojis that we are most familiar today can be traced back to Shigetaka Kurita designs, which first appeared in 1999 on the Docomo mobile phone. Apple wouldn&#8217;t introduce their own emoji keyboard until <span style=\"font-weight: 400;\">\u00a0November 2008 on the iPhone OS 2.2. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Today, roughly <\/span><a href=\"https:\/\/www.weforum.org\/agenda\/2021\/06\/emoji-count-is-increasing-diversity\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">3,500 emojis<\/span><\/a><span style=\"font-weight: 400;\"> come pre-installed into Apple and Android keyboards and <a href=\"https:\/\/www.wired.com\/2016\/10\/new-yorks-moma-acquires-first-ever-pixelated-emoji\/\" target=\"_blank\" rel=\"noopener\">Kurita&#8217;s\u00a0<\/a><\/span>176 emojis are now on display in Museum of Modern Art\u00a0 in New York City as a typographical timepiece.<\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">GIFs\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In May 1987, the first GIF appeared on the internet. Created by CompuServe\u2019s Steve Wilhite, the still image of an airplane that appeared to be moving through clouds was the first of its kind; an image file that wouldn\u2019t lose quality when shared.\u00a0<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-6557 aligncenter\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2022\/04\/first-gif.gif\" alt=\"\" width=\"400\" height=\"149\" title=\"\"><\/p>\n<p><span style=\"font-weight: 400;\">The first run of GIFs was limited to a palette of 256 colours and could only last a few seconds.\u00a0 As people became more familiar with them in chat rooms, instant messaging systems and social media, they could design their own without any time or colour limit. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">In 2013, Google created a search engine specifically for GIF files and in 2015 Facebook made it possible to use these files on social networks, with Twitter following suit in 2016. In 2018, Revolut, the payment app, allowed users to attach GIFs to their transfers to make <\/span><a href=\"https:\/\/blog.revolut.com\/making-payments-social-with-gifs\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">\u201cthings friendlier, more social and dare we say it, more fun!?\u201d<\/span><\/a><\/p>\n<section id=\"promotion\" class=\"promotion-content-raw inlinepromo inlinepromo_professional-certificate-in-ui-designp-1 my-4\" style=\"\">\n\t<div class=\"w-container\">\n\t\t<div class=\"row align-items-center\">\n\t\t\t<div class=\"col-md-12 promotion-info\">\n                <a class=\"link-content\" href=\"https:\/\/www.uxdesigninstitute.com\/courses\/ui-design?utm_source=blog&amp;utm_medium=blog_panel_text&amp;utm_campaign=blog_promo\" style=\"\">\n                    <p>[GET CERTIFIED IN UI DESIGN]<\/p>\n                    <span>Take our Professional Certificate in UI Design course<\/span>\n                <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n<h3><span style=\"font-weight: 400;\">Filters<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">While Facebook had the ability to recognise and tag people in photos on their platform since 2010, facial recognition and augmented reality really kicked off with Snapchat. While Snapchat is known as the pioneer of accessible AR, all credit is owed to the Ukrainian startup Looksery, which specialised in face tracking and face modification for real-time videos.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Snapchat bought Looksery in 2015 for a light fee of US$150 million and introduced Snapchat Lenses, which used AR technology to integrate 3D elements into camera phones, and instantly became a hit. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">By detecting people\u2019s faces and then mapping and digitally modifying them, people morphed into puppies or bearded and tattooed versions of themselves. It became an all-consuming pastime for some users so, of course, Facebook followed suit and launched Instagram Stories in 2016.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Any scroll through Instagram Stories will see that there\u2019s an AR filter for every occasion. When our options used to be limited to a handful of Superzoom effects &#8211; the emo-tastic falling leaves, a confetti downpour of love hearts, the flashes of paparazzi cameras and flames &#8211;\u00a0 users can now create their own. From simple quizzes to face altering effects that turn you into Yoda.\u00a0\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Since 2020, Zoom has become a staple part of online communication at work and at home. While some of us dreamt of faraway places during lockdown, the <\/span><a href=\"https:\/\/blog.zoom.us\/filters-reactions-lighting-features-zoom-meetings-2\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Zoom filters <\/span><\/a><span style=\"font-weight: 400;\">use Livecam Avatar software that allows us to turn into pirates or, quite famously, a cat. The \u201cI\u2019m not a cat\u201d Zoom call became a warning and a moment of comic relief for us all.\u00a0<\/span><\/p>\n<div class=\"embed-yt ratio ratio-16x9\"><iframe loading=\"lazy\" title=\"Lawyer uses Zoom filter by mistake - &#039;I&#039;m not a cat&#039; - BBC News\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/qcnnI6HD6DU?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">Nowadays, the use of AR technology is so commonplace that toddlers love them, although it\u2019s mostly adults who choose to be held by Shrek or to become a member of One Direction. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">In an interesting twist, Facebook announced in November 2021 that they would no longer use facial recognition as they had \u201cmany concerns about the place of facial recognition technology in society\u201d.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><span style=\"font-weight: 400;\">Getting serious about fun<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">While some people may argue that fun isn\u2019t an everyday necessity, fun UX helps people lighten up. Just like Clippy tried to do in the 90s, fun UX can help people make their way through the workload or make work not just <\/span><i><span style=\"font-weight: 400;\">seem<\/span><\/i><span style=\"font-weight: 400;\"> fun but actually <\/span><i><span style=\"font-weight: 400;\">be<\/span><\/i><span style=\"font-weight: 400;\"> fun.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">A great example of the celebration marker in Asana. Whenever a task is completed, a dazzling unicorn rocketeers across the screen, congratulating the user for getting things done. What started as an April Fool\u2019s joke in 2015, soon became a staple part of the project management app because it made people so happy.\u00a0<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-6558\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2022\/04\/Asana-unicorn.png\" alt=\"Asana unicorn\" width=\"1024\" height=\"587\" title=\"\"><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">In fact, people loved the Asana unicorn so much that in 2016, they added <\/span><a href=\"https:\/\/blog.asana.com\/2016\/03\/new-celebrations\/#close\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">a yeti, a narwhal and a phoenix <\/span><\/a><span style=\"font-weight: 400;\">to the celebrations creatures list to keep them company. Why?<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\"><em>\u201cNot only did our users adore the unicorn and his rainbow contrails, we\u2019ve come to see them as a manifestation of the amazing collaboration that happens on Asana and the great results teams produce every day,\u201d<\/em> they wrote on their blog.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><span style=\"font-weight: 400;\">Connecting to other people\u00a0<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">There will always be some people who use emojis or gifs to soften the blow of a cruel message but it can also allow people to connect on a more human level. Since the \u201clike\u201d reaction to Facebook and LinkedIn statuses was upgraded to include happy, sad and angry faces, we could connect to people more accurately. So instead of liking a redundancy announcement, you can show your disdain instead.\u00a0<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-6559\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2022\/04\/Screenshot-2022-04-26-at-09.44.20.png\" alt=\"LinkedIn reactions\" width=\"994\" height=\"474\" title=\"\"><\/p>\n<p><span style=\"font-weight: 400;\">In the messaging app <a href=\"https:\/\/slack.com\/\" target=\"_blank\" rel=\"noopener\">Slack<\/a>, which is commonly used by workplaces, a full range of gifs and emojis is available. This means that colleagues and bosses can give a quick response &#8211; praise hands gif, dancing lady, massive thumbs up &#8211; to any message shared without having to think of an appropriate text reply. Although a very simple gesture, it allows for a dash of personality to shine through while keeping a lighthearted atmosphere in the group chat.\u00a0\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Stronger connections lead to stronger relationships, even if that connection all comes down to a good gif.\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Empty states and error screens<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">One area where fun UX regularly pops up is when a screen has no content or when things go wrong. Empty states are most common when people are first using a product. They explain what\u2019s missing and instruct users what to do next.\u00a0 For example, if you get a new phone and you have no messages in your inbox, an illustration will tell you that there\u2019s nothing to see here and you should send someone a text.\u00a0<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-6560\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2022\/04\/UXArchive.png\" alt=\"Nothing to see here - empty state screen\" width=\"2836\" height=\"1596\" title=\"\"><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">Similarly, if an error occurs in an app or on a website or you lose internet connection, fun UX can step up and soften the blow of the technical issues. For example, if you use a URL that no longer exists, the website might use a ghost animation &#8211; or a sad llama &#8211;\u00a0 to tell you that what you\u2019re looking for is no more and how to find it.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This is a very common and clever use of fun UX, so much that <\/span><a href=\"https:\/\/dribbble.com\/tags\/funny_empty_states\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Dribbble<\/span><\/a><span style=\"font-weight: 400;\"> even has its own tag dedicated to funny empty states.\u00a0<\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><span style=\"font-weight: 400;\">Don\u2019t force the fun<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Clippy was perhaps vilified because he popped up every time you used Microsoft Office assuming that you always had entry level abilities to write letters or create excel sheets. Users had no choice when it came to Clippy but people have a choice now.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">On Facebook or LinkedIn, no one is forcing you to display your emotions in a post reaction \u2013 the standard \u201clike\u201d button is still functional. Asana allows users to <\/span><a href=\"https:\/\/asana.com\/guide\/help\/tasks\/celebrations\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">opt out of the Celebrations <\/span><\/a><span style=\"font-weight: 400;\">animals if, for some reason, mythical and magical animals aren\u2019t their thing. Filters on Zoom have to be manually activated but, more importantly, they have to be manually deactivated too.\u00a0<\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><span style=\"font-weight: 400;\">When can we play?<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Fun, as ever, is subjective so implementing any new features into a product will require some <a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/usability-test-how-many-users\/\">usability testing<\/a>. Seeing how users respond to your new designs will determine if your plans are really fun or simply wacky. Asana\u2019s unicorn is &#8211; once again &#8211;\u00a0 a great example. While it was intended as a joke, the positive response meant that the Celebrations feature became a permanent and adored fixture.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">All of these features are fun because they\u2019re unexpected. They add a spontaneous flash of colour to daily chores without coming across as overbearing or try-hard. Even though UX design values consistency, if fun was a consistent feature in everyday products, our everyday tasks would suffer. Unless, of course, fun is the sole purpose of the product.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">So if you want your product to have a fun side, figure out at what point the user needs it most. Do they need to be cheered on as they make their way through their weekly chores? Do they need help with delivery messages in a light and breezy way? Will they appreciate a fun diversion if your product is experiencing some tech issues?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">By testing the waters and not overdoing it, smattering a little bit of fun into your product can go a long way. Whether you are giving your product a new lease of life or hoping to connect with your users on a new level, start small and build upwards from there.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">And if you ever are concerned that you\u2019re taking too far, ask \u201cWhat would Clippy do?\u201d and do the opposite.\u00a0<\/span><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>It&#8217;s time to get serious about the fun side of UX. How can we make a product usable and entertaining?\u00a0<\/p>\n","protected":false},"author":24,"featured_media":6553,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[278],"tags":[316],"class_list":["post-6552","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-fun-ux"],"_links":{"self":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/6552","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/comments?post=6552"}],"version-history":[{"count":11,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/6552\/revisions"}],"predecessor-version":[{"id":9761,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/6552\/revisions\/9761"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media\/6553"}],"wp:attachment":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media?parent=6552"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/categories?post=6552"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/tags?post=6552"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}