{"id":828,"date":"2015-10-01T12:33:07","date_gmt":"2015-10-01T12:33:07","guid":{"rendered":"http:\/\/grapnel.net\/blog\/?p=828"},"modified":"2015-10-01T12:33:07","modified_gmt":"2015-10-01T12:33:07","slug":"the-eight-worst-ux-mistakes","status":"publish","type":"post","link":"http:\/\/grapnel.net\/blog\/the-eight-worst-ux-mistakes\/","title":{"rendered":"The Eight Worst UX Mistakes"},"content":{"rendered":"<p><script src=\"https:\/\/static.medium.com\/embed.js\" async=\"\"><\/script><a class=\"m-story\" href=\"https:\/\/medium.com\/@pkkoczorowski\/the-8-worst-ux-mistakes-coming-from-experts-692884971f80\" data-collapsed=\"true\">The 8 Worst UX Mistakes<\/a><\/p>\n<p>by \u00a0<a class=\"link link--primary\" dir=\"auto\" title=\"Go to the profile of Piotr Koczorowski\" href=\"https:\/\/medium.com\/@pkkoczorowski\" rel=\"author cc:attributionUrl\" data-user-id=\"15c7f0fb9998\">Piotr Koczorowski<\/a><\/p>\n<p id=\"63cb\" class=\"graf--p graf--first\">Have you ever asked yourself what UX is all about? It\u2019s about learning from mistakes. You can build a design around the idea of turning bad experiences into good ones.<\/p>\n<p id=\"072b\" class=\"graf--p is-withNotes\">We tend to follow the core principles of UX design, but sometimes they slip designers\u2019 minds, and it leads to mistakes that are becoming an integral part of most projects. <a class=\"markup--anchor markup--p-anchor\" href=\"http:\/\/en.wikipedia.org\/wiki\/Error_%28linguistics%29\" rel=\"nofollow\" data-href=\"http:\/\/en.wikipedia.org\/wiki\/Error_%28linguistics%29\">If UX were treated as linguistics<\/a>, I would say they no longer are mistakes\u200a\u2014\u200a<strong class=\"markup--strong markup--p-strong\">they became UX errors<\/strong><em class=\"markup--em markup--p-em\">.<\/em><\/p>\n<p id=\"c8f2\" class=\"graf--p\">To locate these errors, I reached out with the question \u2018What one UX mistake on websites drives you crazy?\u2019 to the following UX experts in the field: <a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/twitter.com\/paulolyslager\" rel=\"nofollow\" data-href=\"https:\/\/twitter.com\/paulolyslager\">Paul Olyslager<\/a>, <a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/twitter.com\/theUXswitch\" rel=\"nofollow\" data-href=\"https:\/\/twitter.com\/theUXswitch\">Frank Gaine<\/a>, <a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/twitter.com\/brad_frost\" rel=\"nofollow\" data-href=\"https:\/\/twitter.com\/brad_frost\">Brad Frost<\/a>, <a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/twitter.com\/stephenhay\" rel=\"nofollow\" data-href=\"https:\/\/twitter.com\/stephenhay\">Stephen Hay<\/a>, <a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/twitter.com\/andybudd\" rel=\"nofollow\" data-href=\"https:\/\/twitter.com\/andybudd\">Andy Budd<\/a>,<a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/twitter.com\/mollywolfberg\" rel=\"nofollow\" data-href=\"https:\/\/twitter.com\/mollywolfberg\">Molly Wolfberg,<\/a> and <a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/twitter.com\/heydonworks\" rel=\"nofollow\" data-href=\"https:\/\/twitter.com\/heydonworks\">Heydon Pickering<\/a>.<\/p>\n<p id=\"7c53\" class=\"graf--p\">Here is the list of <strong class=\"markup--strong markup--p-strong\">8 worst practices in UX design<\/strong>.<\/p>\n<h3 id=\"7e1b\" class=\"graf--h3\">Expecting the unexpected<\/h3>\n<figure id=\"0c7c\" class=\"graf--figure\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspect-ratio-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"1*zuirFPt4yTi7j3TnASJBmw.png\" data-width=\"222\" data-height=\"211\" data-scroll=\"native\"><canvas class=\"progressiveMedia-canvas js-progressiveMedia-canvas\" width=\"75\" height=\"70\"><\/canvas><img data-recalc-dims=\"1\" decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image\" src=\"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/800\/1%2AzuirFPt4yTi7j3TnASJBmw.png?w=625&#038;ssl=1\" alt=\"\" data-src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*zuirFPt4yTi7j3TnASJBmw.png\" \/><\/div>\n<\/div><figcaption class=\"imageCaption\">Paul Olyslager<\/figcaption><\/figure>\n<blockquote id=\"8f3f\" class=\"graf--blockquote\"><p><em class=\"markup--em markup--blockquote-em\">What one UX mistake on websites drives you crazy?<\/em><\/p><\/blockquote>\n<blockquote id=\"b849\" class=\"graf--blockquote\"><p>The unexpected. Performing an action (e.g. clicking a button) that does not result in a way I have thought it would.<\/p><\/blockquote>\n<p id=\"5a92\" class=\"graf--p\"><a class=\"markup--anchor markup--p-anchor\" href=\"http:\/\/www.paulolyslager.com\/\" rel=\"nofollow\" data-href=\"http:\/\/www.paulolyslager.com\">Paul Olyslager<\/a>, UX Manager at Nu3 shared with us one of the core reasons for all bad user experiences\u200a\u2014\u200a<strong class=\"markup--strong markup--p-strong\">the unexpected.<\/strong> Have you ever been irritated with something that works opposite to your expectations? Many websites have this problem, when their users don\u2019t know exactly what to do.<\/p>\n<p id=\"2796\" class=\"graf--p\">The creator of a hilarious website <a class=\"markup--anchor markup--p-anchor\" href=\"http:\/\/www.webpagesthatsuck.com\/\" rel=\"nofollow\" data-href=\"http:\/\/www.webpagesthatsuck.com\/\">Webpages That Suck<\/a>, Vincent Flanders, addressed this issue and coined in 1998 the term <a class=\"markup--anchor markup--p-anchor\" href=\"http:\/\/www.webpagesthatsuck.com\/mysterymeatnavigation.html\" rel=\"nofollow\" data-href=\"http:\/\/www.webpagesthatsuck.com\/mysterymeatnavigation.html\">mystery meat navigation<\/a>, which means designing webpage elements in such a way that they do not communicate their purpose\u200a\u2014\u200ajust like overprocessed food.<\/p>\n<p id=\"60e7\" class=\"graf--p\">Life shows it still happens. <a class=\"markup--anchor markup--p-anchor\" href=\"http:\/\/blog.usabilitytools.com\/case-study-optimalenergy\/\" rel=\"nofollow\" data-href=\"http:\/\/blog.usabilitytools.com\/case-study-optimalenergy\/\">One of UsabilityTools\u2019 clients<\/a> was a mystery meat butcher in navigation. Their front page featured an area, which had elements posing as call to action buttons asking people to Register Now. Through a click tracking study, they saw that people clicked on them too often, while the buttons <em class=\"markup--em markup--p-em\">didn\u2019t do anything<\/em>.<\/p>\n<figure id=\"83a4\" class=\"graf--figure\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspect-ratio-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"1*y7mShu5ua4yMO2-qiTSBDg.jpeg\" data-width=\"605\" data-height=\"258\" data-scroll=\"native\"><canvas class=\"progressiveMedia-canvas js-progressiveMedia-canvas\" width=\"75\" height=\"30\"><\/canvas><img data-recalc-dims=\"1\" decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image\" src=\"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/800\/1%2Ay7mShu5ua4yMO2-qiTSBDg.jpeg?w=625&#038;ssl=1\" alt=\"\" data-src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*y7mShu5ua4yMO2-qiTSBDg.jpeg\" \/><\/div>\n<\/div><figcaption class=\"imageCaption\">24% of these clicks did NOTHING.<\/figcaption><\/figure>\n<p id=\"4210\" class=\"graf--p is-withNotes\"><strong class=\"markup--strong markup--p-strong\">That made people quit the site, since they assumed it is broken<\/strong>. After changing the buttons into clickable ones, their conversion rate went up by<strong class=\"markup--strong markup--p-strong\">122%<\/strong>. A small usability fix, but influential.<\/p>\n<p id=\"226a\" class=\"graf--p\"><a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/twitter.com\/lukew\" rel=\"nofollow\" data-href=\"https:\/\/twitter.com\/lukew\">Luke Wroblewski<\/a>, an expert in mobile environments, mentions another abomination of unexpected design: The meat tornado.<\/p>\n<figure id=\"4fe3\" class=\"graf--figure graf--iframe\">\n<div class=\"iframeContainer\"><iframe loading=\"lazy\" src=\"https:\/\/medium.com\/media\/d9b1f94bb03f30c067825e6a87f963cc?maxWidth=700\" width=\"700\" height=\"250\" frameborder=\"0\" data-media-id=\"d9b1f94bb03f30c067825e6a87f963cc\"><\/iframe><\/div>\n<\/figure>\n<p id=\"972f\" class=\"graf--p\"><span class=\"markup--quote markup--p-quote is-other\" data-creator-ids=\"anon\">Hamburgers and kebabs in mobile are the Jessie and James of UX design\u200a\u2014\u200aprevalent and annoying.<\/span> <a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/lmjabreu.com\/post\/why-and-how-to-avoid-hamburger-menus\/\" rel=\"nofollow\" data-href=\"https:\/\/lmjabreu.com\/post\/why-and-how-to-avoid-hamburger-menus\/\">Luis Abreu describes how distasteful hamburger menus are<\/a>. They were supposed to be the fast food of navigation. However, they became harmful to our designs, as users are ignoring them and therefore do not discover all options.<\/p>\n<p id=\"eec8\" class=\"graf--p\"><strong class=\"markup--strong markup--p-strong\">Be clear<\/strong>. Make sure that every item in your project has a purpose, and that it communicates its purpose immediately.<\/p>\n<h3 id=\"1c14\" class=\"graf--h3\">You spin me round<\/h3>\n<figure id=\"108c\" class=\"graf--figure\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspect-ratio-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"1*RaZQuq4E9FeePtIGDzJy0g.png\" data-width=\"198\" data-height=\"199\" data-scroll=\"native\"><canvas class=\"progressiveMedia-canvas js-progressiveMedia-canvas\" width=\"75\" height=\"75\"><\/canvas><img data-recalc-dims=\"1\" decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image\" src=\"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/800\/1%2ARaZQuq4E9FeePtIGDzJy0g.png?w=625&#038;ssl=1\" alt=\"\" data-src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*RaZQuq4E9FeePtIGDzJy0g.png\" \/><\/div>\n<\/div><figcaption class=\"imageCaption\">Frank Gaine<\/figcaption><\/figure>\n<blockquote id=\"72db\" class=\"graf--blockquote\"><p><em class=\"markup--em markup--blockquote-em\">What one UX mistake on websites drives you crazy?<\/em><\/p><\/blockquote>\n<blockquote id=\"3703\" class=\"graf--blockquote is-withNotes\"><p>Those \u2018Top 20\u2032 websites, where you have to click a Next button and refresh the page to see each item in the list. Grrrr. They should just do a big long list on the one page.<\/p><\/blockquote>\n<p id=\"9e55\" class=\"graf--p\">Are you dizzy when you browse the web? I sure am. The growing abundance of clickbaiting pagination makes many <em class=\"markup--em markup--p-em\">nauseous<\/em>.<\/p>\n<p id=\"0bc7\" class=\"graf--p\">They exist to get more clicks and the page views. A terribly cheap way of exploiting your users. <a class=\"markup--anchor markup--p-anchor\" href=\"http:\/\/darkpatterns.org\/\" rel=\"nofollow\" data-href=\"http:\/\/darkpatterns.org\/\">A dark pattern in web design<\/a>. But it\u2019s not the only one.<\/p>\n<p id=\"9323\" class=\"graf--p\"><a class=\"markup--anchor markup--p-anchor\" href=\"http:\/\/bradfrost.com\/blog\/post\/carousels\/\" rel=\"nofollow\" data-href=\"http:\/\/bradfrost.com\/blog\/post\/carousels\/\">Brad Frost speaks of the bastard child of the merry-go-round family<\/a>\u200a\u2014\u200acarousels. They are supposed to bring \u201cfun\u201d to the user. However, they are badly executed, causing confusion and misinformation. Because of that, people tend to skip them.<\/p>\n<figure id=\"c06c\" class=\"graf--figure\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspect-ratio-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"1*MOR0fDF2mfePdkstKfKFbQ.png\" data-width=\"981\" data-height=\"282\" data-action=\"zoom\" data-action-value=\"1*MOR0fDF2mfePdkstKfKFbQ.png\" data-scroll=\"native\"><canvas class=\"progressiveMedia-canvas js-progressiveMedia-canvas\" width=\"75\" height=\"20\"><\/canvas><img data-recalc-dims=\"1\" decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image\" src=\"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/800\/1%2AMOR0fDF2mfePdkstKfKFbQ.png?w=625&#038;ssl=1\" alt=\"\" data-src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*MOR0fDF2mfePdkstKfKFbQ.png\" \/><\/div>\n<\/div><figcaption class=\"imageCaption\">The website <a class=\"markup--anchor markup--figure-anchor\" href=\"http:\/\/shouldiuseacarousel.com\/\" rel=\"nofollow\" data-href=\"http:\/\/shouldiuseacarousel.com\/\">Should I Use a Carousel?<\/a> provides you with the best answer whether you should use it.<\/figcaption><\/figure>\n<p id=\"fa1c\" class=\"graf--p\">If you need stats telling you why carousels are bad for your website, According to <a class=\"markup--anchor markup--p-anchor\" href=\"http:\/\/searchengineland.com\/homepage-sliders-are-bad-for-seo-usability-163496\" rel=\"nofollow\" data-href=\"http:\/\/searchengineland.com\/homepage-sliders-are-bad-for-seo-usability-163496\">Harrison Jones from Search Engine Land<\/a>, sliders are bad for both usability and SEO.<\/p>\n<p id=\"1154\" class=\"graf--p\">Remove image sliders, carousels, and clickbaiting pagination.<strong class=\"markup--strong markup--p-strong\"> Be clear <em class=\"markup--em markup--p-em\">and<\/em>honest, <\/strong>as no one wants to struggle with the dark side of web design<strong class=\"markup--strong markup--p-strong\">.<\/strong><\/p>\n<h3 id=\"f377\" class=\"graf--h3\">Immobile pages<\/h3>\n<figure id=\"8e07\" class=\"graf--figure\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspect-ratio-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"1*3WWP13ClYqyVipTlWsGiWw.png\" data-width=\"198\" data-height=\"199\" data-scroll=\"native\"><canvas class=\"progressiveMedia-canvas js-progressiveMedia-canvas\" width=\"75\" height=\"75\"><\/canvas><img data-recalc-dims=\"1\" decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image\" src=\"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/800\/1%2A3WWP13ClYqyVipTlWsGiWw.png?w=625&#038;ssl=1\" alt=\"\" data-src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*3WWP13ClYqyVipTlWsGiWw.png\" \/><\/div>\n<\/div><figcaption class=\"imageCaption\">Stephen Hay<\/figcaption><\/figure>\n<blockquote id=\"f115\" class=\"graf--blockquote\"><p><em class=\"markup--em markup--blockquote-em\">What one UX mistake on websites drives you crazy?<\/em><\/p><\/blockquote>\n<blockquote id=\"e239\" class=\"graf--blockquote is-withNotes\"><p>When I follow a link to your site on my phone, and I can only get to the content if I \u2018download the app\u2019. I\u2019m not going to download the app.<\/p><\/blockquote>\n<p id=\"9e3b\" class=\"graf--p\">Many a time upon entering a webpage was I greeted with a lovely message on my phone that I need to <em class=\"markup--em markup--p-em\">download a dedicated app for that.<\/em><\/p>\n<p id=\"1b11\" class=\"graf--p\"><a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/twitter.com\/stephenhay\" rel=\"nofollow\" data-href=\"https:\/\/twitter.com\/stephenhay\">Stephen Hay<\/a> from <a class=\"markup--anchor markup--p-anchor\" href=\"http:\/\/zerointerface.nl\/\" rel=\"nofollow\" data-href=\"http:\/\/zerointerface.nl\/\">Zero Interface<\/a> tells us exactly what happens in that situation: nothing. People quit the page and forget it ever existed.<\/p>\n<figure id=\"111a\" class=\"graf--figure\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspect-ratio-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"1*SJ3_IL4C4HW_qjiHWK3Xrw.jpeg\" data-width=\"891\" data-height=\"320\" data-action=\"zoom\" data-action-value=\"1*SJ3_IL4C4HW_qjiHWK3Xrw.jpeg\" data-scroll=\"native\"><canvas class=\"progressiveMedia-canvas js-progressiveMedia-canvas\" width=\"75\" height=\"25\"><\/canvas><img data-recalc-dims=\"1\" decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image\" src=\"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/800\/1%2ASJ3_IL4C4HW_qjiHWK3Xrw.jpeg?w=625&#038;ssl=1\" alt=\"\" data-src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*SJ3_IL4C4HW_qjiHWK3Xrw.jpeg\" \/><\/div>\n<\/div><figcaption class=\"imageCaption\">Thank you, Pintrest, for providing me with choice. It\u2019s rare.<\/figcaption><\/figure>\n<p id=\"4d9b\" class=\"graf--p is-withNotes\"><strong class=\"markup--strong markup--p-strong\">There is not much to tell about this issue\u200a\u2014\u200aany honest person should realise that<\/strong>. Acting with integrity towards your users is a must. Forcing them to download applications so they can browse your website is a shameful way of extorting statistics. And the claims that some websites aren\u2019t optimized for mobile browsers\u2026 stop right here. <em class=\"markup--em markup--p-em\">Don\u2019t.<\/em><\/p>\n<h3 id=\"9ead\" class=\"graf--h3\">theartofbadperformance<\/h3>\n<figure id=\"a5df\" class=\"graf--figure\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspect-ratio-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"1*otBs_virhD-XaBalybMQWA.png\" data-width=\"198\" data-height=\"199\" data-scroll=\"native\"><canvas class=\"progressiveMedia-canvas js-progressiveMedia-canvas\" width=\"75\" height=\"75\"><\/canvas><img data-recalc-dims=\"1\" decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image\" src=\"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/800\/1%2AotBs_virhD-XaBalybMQWA.png?w=625&#038;ssl=1\" alt=\"\" data-src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*otBs_virhD-XaBalybMQWA.png\" \/><\/div>\n<\/div><figcaption class=\"imageCaption\">Brad Frost<\/figcaption><\/figure>\n<blockquote id=\"7a64\" class=\"graf--blockquote\"><p><em class=\"markup--em markup--blockquote-em\">What one UX mistake on websites drives you crazy?<\/em><\/p><\/blockquote>\n<blockquote id=\"70a0\" class=\"graf--blockquote\"><p>Performance is perhaps the most crucial aspects of a user experience, but unfortunately it\u2019s largely ignored.<\/p><\/blockquote>\n<blockquote id=\"dd3e\" class=\"graf--blockquote is-withNotes\"><p>And it\u2019s largely ignored because it\u2019s invisible. Teams spend a lot of time polishing the aesthetic experience and enjoy diving into the latest development tools, but ultimately neglect how fast the experience loads and performs. It\u2019s up to us to prioritize performance in our projects in order to better serve our users.<\/p><\/blockquote>\n<p id=\"2414\" class=\"graf--p\">Bad performance ain\u2019t gonna receive no applause, says Brad Frost. It all narrows down to how fast we can operate the website. High page loading times yield devastating results. <a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/blog.kissmetrics.com\/wp-content\/uploads\/2011\/04\/loading-time-lrg.jpg\" rel=\"nofollow\" data-href=\"https:\/\/blog.kissmetrics.com\/wp-content\/uploads\/2011\/04\/loading-time-lrg.jpg\">KISSMetrics even created a great infographic showing you stats<\/a>, <strong class=\"markup--strong markup--p-strong\">which prove that a slow website equals death.<\/strong><\/p>\n<p id=\"eb38\" class=\"graf--p\"><a class=\"markup--anchor markup--p-anchor\" href=\"http:\/\/www.nngroup.com\/articles\/website-response-times\/\" rel=\"nofollow\" data-href=\"http:\/\/www.nngroup.com\/articles\/website-response-times\/\">Jakob Nielsen speaks how responsiveness is a basic user interface rule<\/a> that needs to be incorporated into every project you make. <strong class=\"markup--strong markup--p-strong\">Do not forsake performance for the sake of aesthetics<\/strong>. Slow loading times and heavy websites are the first detrimental factors that people notice. <a class=\"markup--anchor markup--p-anchor\" href=\"http:\/\/thenextweb.com\/opinion\/2015\/09\/23\/zzzzzz\/\" rel=\"nofollow\" data-href=\"http:\/\/thenextweb.com\/opinion\/2015\/09\/23\/zzzzzz\/\">Some long after the days of Flash websites<\/a>, which showcased creativity under the principle \u201cI can, so I will,\u201d but it\u2019s a pitfall.<\/p>\n<p id=\"8776\" class=\"graf--p is-withNotes\"><strong class=\"markup--strong markup--p-strong\">Be creative and usable.<\/strong><\/p>\n<h3 id=\"ca5e\" class=\"graf--h3\">Everybody hates reading<\/h3>\n<figure id=\"a490\" class=\"graf--figure\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspect-ratio-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"1*RaZQuq4E9FeePtIGDzJy0g.png\" data-width=\"198\" data-height=\"199\" data-scroll=\"native\"><canvas class=\"progressiveMedia-canvas js-progressiveMedia-canvas\" width=\"75\" height=\"75\"><\/canvas><img data-recalc-dims=\"1\" decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image\" src=\"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/800\/1%2ARaZQuq4E9FeePtIGDzJy0g.png?w=625&#038;ssl=1\" alt=\"\" data-src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*RaZQuq4E9FeePtIGDzJy0g.png\" \/><\/div>\n<\/div><figcaption class=\"imageCaption\">Frank Gaine<\/figcaption><\/figure>\n<blockquote id=\"c505\" class=\"graf--blockquote\"><p><em class=\"markup--em markup--blockquote-em\">What one UX mistake on websites drives you crazy?<\/em><\/p><\/blockquote>\n<blockquote id=\"e1ef\" class=\"graf--blockquote\"><p>I hate huge amounts of text without subheadings to summarize and divide up the text!<\/p><\/blockquote>\n<p id=\"1712\" class=\"graf--p\">Since we rely heavily on the Internet nowadays, reading is an essential activity. Because of that, rules and guidelines were created in order to make that task as pleasurable as possible\u200a\u2014\u200aespecially since people scan instead of reading.<\/p>\n<p id=\"cf46\" class=\"graf--p\">Some do employ them properly, but some forget that reading content should be <strong class=\"markup--strong markup--p-strong\">optimized<\/strong>.<\/p>\n<p id=\"e5de\" class=\"graf--p\"><a class=\"markup--anchor markup--p-anchor\" href=\"http:\/\/www.uxbooth.com\/articles\/design-for-readability\/\" rel=\"nofollow\" data-href=\"http:\/\/www.uxbooth.com\/articles\/design-for-readability\/\">UXBooth tells you that most designers put visuals before the content itself<\/a>, claiming it is destroying the value of the text. Later on, however, they advocate how both design and content can be optimized\u200a\u2014\u200athe right way to go. By optimizing typography, text division, order, and many more you can deliver the most pleasant experience to your readers.<\/p>\n<p id=\"8d9f\" class=\"graf--p\"><strong class=\"markup--strong markup--p-strong\">Content serves the web right now, so it is crucial to make it easy to digest.<\/strong><\/p>\n<p id=\"cfcd\" class=\"graf--p\">If you want to go in-depth with optimizing your text, have a look at this amazing piece from <a class=\"markup--anchor markup--p-anchor\" href=\"http:\/\/www.smashingmagazine.com\/2011\/11\/29\/the-perfect-paragraph\/\" rel=\"nofollow\" data-href=\"http:\/\/www.smashingmagazine.com\/2011\/11\/29\/the-perfect-paragraph\/\">Smashing Magazine telling you how to craft a <strong class=\"markup--strong markup--p-strong\">perfect<\/strong>paragraph<\/a>. We have been taught in our classes that paragraphs are the building blocks of every text, so let\u2019s make sure that their quality is awesome, or else the whole thing shall crumble.<\/p>\n<p id=\"7c37\" class=\"graf--p\">UX Movement shows how <a class=\"markup--anchor markup--p-anchor\" href=\"http:\/\/uxmovement.com\/content\/why-you-should-never-center-align-paragraph-text\/\" rel=\"nofollow\" data-href=\"http:\/\/uxmovement.com\/content\/why-you-should-never-center-align-paragraph-text\/\">center alignment<\/a> makes orphans and children cry, <a class=\"markup--anchor markup--p-anchor\" href=\"http:\/\/uxmovement.com\/content\/why-you-should-remove-orphans-from-your-body-text\/\" rel=\"nofollow\" data-href=\"http:\/\/uxmovement.com\/content\/why-you-should-remove-orphans-from-your-body-text\/\">and they also advocate that you should get rid of orphans entirely<\/a> (you know, those dangling pieces in the text, not<em class=\"markup--em markup--p-em\"> real<\/em> children).<\/p>\n<p id=\"cb4f\" class=\"graf--p\"><strong class=\"markup--strong markup--p-strong\">Give people a nice read.<\/strong><\/p>\n<h3 id=\"b8c7\" class=\"graf--h3\">Your forms are out of form<\/h3>\n<figure id=\"77f2\" class=\"graf--figure\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspect-ratio-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"1*L2CF7Noik2CiEgOcjmPCPQ.png\" data-width=\"198\" data-height=\"199\" data-scroll=\"native\"><canvas class=\"progressiveMedia-canvas js-progressiveMedia-canvas\" width=\"75\" height=\"75\"><\/canvas><img data-recalc-dims=\"1\" decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image\" src=\"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/800\/1%2AL2CF7Noik2CiEgOcjmPCPQ.png?w=625&#038;ssl=1\" alt=\"\" data-src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*L2CF7Noik2CiEgOcjmPCPQ.png\" \/><\/div>\n<\/div><figcaption class=\"imageCaption\"><a class=\"markup--anchor markup--figure-anchor\" href=\"https:\/\/twitter.com\/andybudd\" rel=\"nofollow\" data-href=\"https:\/\/twitter.com\/andybudd\">Andy Budd<\/a> from <a class=\"markup--anchor markup--figure-anchor\" href=\"http:\/\/clearleft.com\/\" rel=\"nofollow\" data-href=\"http:\/\/clearleft.com\/\">Clearleft<\/a><\/figcaption><\/figure>\n<blockquote id=\"69e8\" class=\"graf--blockquote\"><p><em class=\"markup--em markup--blockquote-em\">What one UX mistake on websites drives you crazy?<\/em><\/p><\/blockquote>\n<blockquote id=\"f7af\" class=\"graf--blockquote\"><p>As a user I get really frustrated when overly enthusiastic form validation tells me a field is wrong when I know it\u2019s right. This usually happens when I try to add an international prefix to a phone number, let\u2019s say, but I\u2019ve also had buggy validation tell me that my date of birth was wrong, which is especially annoying.<\/p><\/blockquote>\n<blockquote id=\"c71b\" class=\"graf--blockquote\"><p>A related frustration is when the page refreshes and some of the information you previously entered has been removed and it\u2019s not clear what\u2019s actually causing the error in the first place.<\/p><\/blockquote>\n<p id=\"02f0\" class=\"graf--p\">I have no idea why so many websites neglect web forms and leave them completely not optimized when their business heavily relies on them. You work in eCommerce? Imagine having bad order and delivery forms\u200a\u2014\u200ayour conversion rates are going to hit the ground so hard your business will lose its balance.<\/p>\n<p id=\"3b67\" class=\"graf--p is-withNotes\">Websites tend to lie to you that you need to undergo a \u201cquick\u201d registration process that will take only a minute, and 15 minutes later you still are trying to enter the right CAPTCHA at the end. Don\u2019t forget about re-entering your password every time, because it resets for security purposes.<\/p>\n<figure id=\"7ac0\" class=\"graf--figure\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspect-ratio-fill\"><\/div>\n<p><img data-recalc-dims=\"1\" decoding=\"async\" class=\"graf-image\" src=\"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/800\/1%2Am6DRAQmqtJFSnUL6z-Yakw.png?w=625&#038;ssl=1\" alt=\"\" data-image-id=\"1*m6DRAQmqtJFSnUL6z-Yakw.png\" data-width=\"463\" data-height=\"98\" \/><\/div><figcaption class=\"imageCaption\">Soo, hunter2 is out of question?<\/figcaption><\/figure>\n<p id=\"891d\" class=\"graf--p\"><a class=\"markup--anchor markup--p-anchor\" href=\"http:\/\/www.smashingmagazine.com\/2011\/11\/08\/extensive-guide-web-form-usability\/\" rel=\"nofollow\" data-href=\"http:\/\/www.smashingmagazine.com\/2011\/11\/08\/extensive-guide-web-form-usability\/\">Smashing Magazine comes to help with an extensive guide to optimizing your web forms<\/a>. Once you focus on three basic aspects of web forms (Relationship, Conversation, Appearance), you can fully understand the core principles of successful form design.<\/p>\n<p id=\"fbfa\" class=\"graf--p\">There is one thing\u200a\u2014\u200acheck out this website focused on <a class=\"markup--anchor markup--p-anchor\" href=\"http:\/\/badforms.com\/\" rel=\"nofollow\" data-href=\"http:\/\/badforms.com\/\">showcasing terrible forms<\/a> on the Internet, BadForms. What I found curious is the fact that the category \u201cGood Forms\u201d is actually <em class=\"markup--em markup--p-em\">empty<\/em>. Dear Internet, start optimizing your forms, thanks\u200a\u2014\u200aEveryone.<\/p>\n<p id=\"d518\" class=\"graf--p\">If you are desperate to find out whether your forms are <em class=\"markup--em markup--p-em\">good, <\/em>UsabilityTools offers <a class=\"markup--anchor markup--p-anchor\" href=\"http:\/\/usabilitytools.com\/sign-up\" rel=\"nofollow\" data-href=\"http:\/\/usabilitytools.com\/sign-up\">comprehensive web form analytics.<\/a><\/p>\n<h3 id=\"979e\" class=\"graf--h3\">Sign in? Sign OUT.<\/h3>\n<figure id=\"2263\" class=\"graf--figure\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspect-ratio-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"1*zcF-KRoVyAAtzO8NFsuwKg.png\" data-width=\"198\" data-height=\"199\" data-scroll=\"native\"><canvas class=\"progressiveMedia-canvas js-progressiveMedia-canvas\" width=\"75\" height=\"75\"><\/canvas><img data-recalc-dims=\"1\" decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image\" src=\"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/800\/1%2AzcF-KRoVyAAtzO8NFsuwKg.png?w=625&#038;ssl=1\" alt=\"\" data-src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*zcF-KRoVyAAtzO8NFsuwKg.png\" \/><\/div>\n<\/div><figcaption class=\"imageCaption\"><a class=\"markup--anchor markup--figure-anchor\" href=\"https:\/\/twitter.com\/mollywolfberg\" rel=\"nofollow\" data-href=\"https:\/\/twitter.com\/mollywolfberg\">Molly Wolfberg<\/a> from <a class=\"markup--anchor markup--figure-anchor\" href=\"http:\/\/www.uxsisters.com\/\" rel=\"nofollow\" data-href=\"http:\/\/www.uxsisters.com\/\">UX Sisters<\/a><\/figcaption><\/figure>\n<blockquote id=\"f9ae\" class=\"graf--blockquote\"><p><em class=\"markup--em markup--blockquote-em\">What one UX mistake on websites drives you crazy?<\/em><\/p><\/blockquote>\n<blockquote id=\"317a\" class=\"graf--blockquote is-withNotes\"><p>When I have to go through too many clicks to sign in! there\u2019s one banking site I use often, and I have to click THREE TIMES to even get to my login page. It\u2019s awful! If you\u2019re making people sign in to use your product, make it easily accessible!<\/p><\/blockquote>\n<p id=\"e0db\" class=\"graf--p\">Registering is a bane of many users. Not only registering should be quick and easy\u200a\u2014<strong class=\"markup--strong markup--p-strong\">\u200asigning in when returning to the service should be a breeze as well.<\/strong><\/p>\n<p id=\"43f8\" class=\"graf--p\">Do I hear faint \u201cBut it follows the 3-clicks principle\u2026\u201d in the background?<strong class=\"markup--strong markup--p-strong\">No.<\/strong> The 3-clicks rule is an obsolete relic that only illogically shuts down any design-related debates. <a class=\"markup--anchor markup--p-anchor\" href=\"http:\/\/www.uxbooth.com\/articles\/stop-counting-clicks\/\" rel=\"nofollow\" data-href=\"http:\/\/www.uxbooth.com\/articles\/stop-counting-clicks\/\">UX Booth orders you to stop counting clicks<\/a>, as the amount of pages you need to go through is not the issue\u200a\u2014\u200athe amount of effort required for each of them is.<\/p>\n<p id=\"7b1a\" class=\"graf--p\">Of course, the above is related to the browsing experience in general, but both the signing in and the general browsing face the same issue\u200a\u2014\u200abeing too strenuous for users. There are two solutions:<\/p>\n<ul class=\"postList\">\n<li id=\"3bcc\" class=\"graf--li\">If signing in takes too much effort because of the clicks you need to make, simplify it.<\/li>\n<li id=\"90f6\" class=\"graf--li\">If reaching information on your website can be done with two clicks, but requires tons of searching because of the abundance of tabs in the navigation menu, simplify it.<\/li>\n<\/ul>\n<p id=\"c6a3\" class=\"graf--p\">Generally, simplify it.<\/p>\n<p id=\"bafe\" class=\"graf--p\">That does sound like a good principle, right? Let\u2019s see the final point then:<\/p>\n<h3 id=\"04dd\" class=\"graf--h3\">Simplify<\/h3>\n<figure id=\"866f\" class=\"graf--figure\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspect-ratio-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"1*fpSFJ69ASwHB6fxktm0Q-A.png\" data-width=\"198\" data-height=\"199\" data-scroll=\"native\"><canvas class=\"progressiveMedia-canvas js-progressiveMedia-canvas\" width=\"75\" height=\"75\"><\/canvas><img data-recalc-dims=\"1\" decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image\" src=\"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/800\/1%2AfpSFJ69ASwHB6fxktm0Q-A.png?w=625&#038;ssl=1\" alt=\"\" data-src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*fpSFJ69ASwHB6fxktm0Q-A.png\" \/><\/div>\n<\/div><figcaption class=\"imageCaption\"><a class=\"markup--anchor markup--figure-anchor\" href=\"https:\/\/twitter.com\/heydonworks\" rel=\"nofollow\" data-href=\"https:\/\/twitter.com\/heydonworks\">Heydon Pickering<\/a> from<a class=\"markup--anchor markup--figure-anchor\" href=\"http:\/\/www.smashingmagazine.com\/\" rel=\"nofollow\" data-href=\"http:\/\/www.smashingmagazine.com\/\">Smashing Magazine<\/a><\/figcaption><\/figure>\n<blockquote id=\"4071\" class=\"graf--blockquote\"><p><em class=\"markup--em markup--blockquote-em\">What one UX mistake on websites drives you crazy?<\/em><\/p><\/blockquote>\n<blockquote id=\"3995\" class=\"graf--blockquote\"><p>Complexity is the most prolific enemy of good user experiences, blighting all kinds of users. Complexity is also one of the hardest things to fix after the fact.<\/p><\/blockquote>\n<blockquote id=\"cc53\" class=\"graf--blockquote\"><p>The only way to \u201cfix\u201d complexity is to axe features, so being the anti-complexity tzar means telling people their work has to be destroyed. Not an easy job. Good planning and the willingness to say \u201cno\u201d in the early stages of a product\u2019s life are the best way to reduce complexity.<\/p><\/blockquote>\n<p id=\"1674\" class=\"graf--p\">Complexity is <strong class=\"markup--strong markup--p-strong\">THE<\/strong> issue of all UX projects, and is one of the most common mistakes. Many designers don\u2019t see that their project is overloaded with features, even though they are core elements. Being critical towards your own work is difficult, as removing one part causes others to crumble, and this is the scenario we need to change.<\/p>\n<p id=\"4179\" class=\"graf--p\">The philosophy of <em class=\"markup--em markup--p-em\">all<\/em> modern projects gravitates towards this one rule\u200a\u2014\u200asimplicity. UXMag speaks <a class=\"markup--anchor markup--p-anchor\" href=\"http:\/\/uxmag.com\/articles\/the-complexity-of-simplicity\" rel=\"nofollow\" data-href=\"http:\/\/uxmag.com\/articles\/the-complexity-of-simplicity\">how hard it is to be simple<\/a>. If you want to make it, try following 10 principles UXMag proposes. They advocate being focused, as that will lead you to a clear product. <a class=\"markup--anchor markup--p-anchor\" href=\"http:\/\/www.smashingmagazine.com\/2009\/10\/07\/minimizing-complexity-in-user-interfaces\/\" rel=\"nofollow\" data-href=\"http:\/\/www.smashingmagazine.com\/2009\/10\/07\/minimizing-complexity-in-user-interfaces\/\">Smashing Magazine highlights many examples of changing projects by employing the rule of simplicity<\/a>. The results are often immediately pleasant to the eye, proving that the results are there.<\/p>\n<p id=\"9735\" class=\"graf--p\"><a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/uxmag.com\/articles\/the-dirtiest-word-in-ux-complexity\" rel=\"nofollow\" data-href=\"https:\/\/uxmag.com\/articles\/the-dirtiest-word-in-ux-complexity\">Remember\u200a\u2014\u200acomplexity is dirty.<\/a> Clean it all up and make your projects simple.<\/p>\n<h3 id=\"12f1\" class=\"graf--h3\">Just one thing<\/h3>\n<p id=\"4c6e\" class=\"graf--p is-withNotes\">Thanks to reaching out to UX experts, we could gather what actually bugs people on everyday basis. Some of abovementioned points appear to be painstakingly obvious\u200a\u2014\u200athe question is <strong class=\"markup--strong markup--p-strong\">why they still appear?<\/strong> The answer might be the fact that they became <em class=\"markup--em markup--p-em\">too integrated<\/em> with most of the designs, and that forced us to get accustomed.<\/p>\n<p id=\"806f\" class=\"graf--p\">That is a <strong class=\"markup--strong markup--p-strong\">terrible mistake.<\/strong><\/p>\n<p id=\"afee\" class=\"graf--p\">Never get used to bad experiences. Do your best to deliver and demand the most pleasant UX possible. Do it for both yourself and for others.<\/p>\n\r\n\t<div style=\"\">\r\n\t\t<a href=\"http:\/\/twitter.com\/share\" class=\"twitter-share-button\" data-count=\"vertical\" data-text=\"The Eight Worst UX Mistakes\" data-url=\"http:\/\/grapnel.net\/blog\/the-eight-worst-ux-mistakes\/\" >Tweet<\/a>\r\n\t<\/div>\r\n\t<script type=\"text\/javascript\" src=\"http:\/\/platform.twitter.com\/widgets.js\"><\/script>","protected":false},"excerpt":{"rendered":"<p>The 8 Worst UX Mistakes by \u00a0Piotr Koczorowski Have you ever asked yourself what UX is all about? It\u2019s about learning from mistakes. You can build a design around the idea of turning bad experiences into good ones. We tend to follow the core principles of UX design, but sometimes they slip designers\u2019 minds, and [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[6],"tags":[],"class_list":["post-828","post","type-post","status-publish","format-standard","hentry","category-ux"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2L8f5-dm","jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"http:\/\/grapnel.net\/blog\/wp-json\/wp\/v2\/posts\/828","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/grapnel.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/grapnel.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/grapnel.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/grapnel.net\/blog\/wp-json\/wp\/v2\/comments?post=828"}],"version-history":[{"count":1,"href":"http:\/\/grapnel.net\/blog\/wp-json\/wp\/v2\/posts\/828\/revisions"}],"predecessor-version":[{"id":830,"href":"http:\/\/grapnel.net\/blog\/wp-json\/wp\/v2\/posts\/828\/revisions\/830"}],"wp:attachment":[{"href":"http:\/\/grapnel.net\/blog\/wp-json\/wp\/v2\/media?parent=828"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/grapnel.net\/blog\/wp-json\/wp\/v2\/categories?post=828"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/grapnel.net\/blog\/wp-json\/wp\/v2\/tags?post=828"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}