{"id":34840,"date":"2016-04-05T05:00:27","date_gmt":"2016-04-05T12:00:27","guid":{"rendered":"https:\/\/creativemarket.com\/blog\/?p=34840"},"modified":"2024-04-10T23:39:44","modified_gmt":"2024-04-11T06:39:44","slug":"12-awkward-web-design-problems-and-how-to-fix-them","status":"publish","type":"post","link":"https:\/\/creativemarket.com\/blog\/12-awkward-web-design-problems-and-how-to-fix-them","title":{"rendered":"12 Awkward Web Design Problems and How to Fix Them"},"content":{"rendered":"
Web design has evolved tremendously from what it used to be, shedding off ineffective practices and replacing them with more efficient methods. Often what is currently known as a best practice or most revered design style, will shift out of vogue or be replaced with a more suitable approach. What’s left behind can quickly become out of place and leave an awkward feeling with your users.\nWebsites need to evolve and adapt to better serve its own goals and the goals of its users. This doesn’t mean that web designs should be restricted to only what is in style at that moment, but that web designers need to take into account what lessons have been learned by decades of use.\nHere are a few awkward web design problems that can stick out on your website, pivoting your designs in the past, and restricting your audience.\n
<\/span>1. Where Do I look!<\/span><\/h2>
<\/span>The Problem<\/span><\/h3>
\nYour site has no structure to its content. This could be the result of poor planning from the onset, or even the mismanaged growth of content within larger websites over time, but whatever the reason, give your user clear visual instructions – don’t leave them guessing.\n<\/p>
<\/span>The Fix<\/span><\/h3>
\nDefine your content’s hierarchy with your website’s goals in mind. If you are building a landing page with the sole goal of capturing e-mails, then make your design reflect this goal, build a visual hierarchy that leads your user to your call-to-action.\n <\/figure>\n \n<\/p>
<\/span>2. Wait, how do I get there?<\/span><\/h2>
<\/span>The Problem<\/span><\/h3>
\nBad and misguided navigation can plague a website’s pageviews. Standards in web navigation design are emerging, and the misuse of these is confusing for your users.\n<\/p>
<\/span>The Fix<\/span><\/h3>
\nDon’t reinvent the wheel. There is a reason that road sign iconography is fairly universally standardized, it primes users for what to expect and controls their reactions. This same idea should be applied in a website’s navigation design.\nThink about what the user is expecting and apply your design skills to execute a well-crafted interactive element. Avoid completely reinventing the wheel if you are expecting mass ease of access, boundaries can be pushed but always be aware of the relationship between deviant design ideas, and mass usability.\n <\/figure>\n \n<\/p>
<\/span>3. You sure<\/em> you need a splash page?<\/span><\/h2>
<\/span>The Problem<\/span><\/h3>
\nYou likely don’t need a splash page to your website, they are irritating to users and add an extra level of unnecessary interaction that is only required on specific websites.\n<\/p>
<\/span>The Fix<\/span><\/h3>
\nDon’t have one. Include this content into your website’s architecture or consider a less intrusive option like a dropdown.\n<\/p>
<\/span>4. Stop hijacking my experience!<\/span><\/h2>
<\/span>The Problem<\/span><\/h3>
\nYou web design has too many autoplay features.\n<\/p>
<\/span>The Fix<\/span><\/h3>
\nThere have been proven exceptions to this, like the auto-playing fullwidth video background, or parallax websites. But I would contest that these elements still restrict your users, be sure that your website’s goals support the implementation of these types of design elements and use them tastefully.\n <\/figure>\n \n<\/p>
<\/span>5. What does that mean?<\/span><\/h2>
<\/span>The Problem<\/span><\/h3>
\nYour website’s icons and reference imagery are inconsistent.\n<\/p>
<\/span>The Fix<\/span><\/h3>
\nRestrict your icons and stick to their initial definitions. If you first introduce a magnify glass to your users to mean “zoom†and not “search†continue that language throughout the experience, avoid haphazardly switching their definitions.\n <\/figure>\n \n<\/p>
<\/span>6. I’m on my phone, your website should be too!<\/span><\/h2>
<\/span>The Problem<\/span><\/h3>
\nYour website looks the same on a desktop computer, tablet, and mobile phone.\n<\/p>
<\/span>The Fix<\/span><\/h3>
\nMake it mobile responsive. Understand what your users are looking for when they are on their phones versus when they are on their computers; then restrict your designs and content to match their wants.\n<\/p>
<\/span>7. Your website nearly blinded me<\/span><\/h2>
<\/span>The Problem<\/span><\/h3>
\nThe colors on your website make no sense and are possibly stuck in an episode of Saved By The Bell.\n<\/p>
<\/span>The Fix<\/span><\/h3>
\nPull it together, restrict your color palette and define your colors’ role. For example, if you are planning to make all your links a nice shade of purple, don’t confuse your users by using that same purple on other non-interactive elements.\nPut your color palette to work for you, it’s going to be a massive asset in defining your website’s content hierarchy and crafting your user’s experience.\n <\/figure>\n \n<\/p>
<\/span>8. Does this ever end?<\/span><\/h2>
<\/span>The Problem<\/span><\/h3>
\nInfinite scrolling websites aside – your website is too tall.\n<\/p>
<\/span>The Fix<\/span><\/h3>
\nBetter organize your website with deeper pages to support a more fluid user journey. The chance of a user bouncing off your website increases the further they are required to scroll down, this is the very reason “the fold†is so important to consider during design and is considered such valuable digital real estate.\n<\/p>
<\/span>9. Your homepage is gorgeous! What happened to the rest?<\/span><\/h2>
<\/span>The Problem<\/span><\/h3>
\nYou designed the hell out your homepage, but phoned in the deeper pages.\n<\/p>
<\/span>The Fix<\/span><\/h3>
\nApproach every page with the same determination as though it was the homepage. Maintain your passion throughout the website, and approach each idea in isolation. Also remember to take a break, don’t let yourself burn out and compromise your website’s quality, save the next page for another day and attack it with a new energy.\n <\/figure>\n \n<\/p>
<\/span>10. Stop yelling at me!<\/span><\/h2>
<\/span>The Problem<\/span><\/h3>
\nYour website is still trying its best to give the user everything all at once.\n<\/p>
<\/span>The Fix<\/span><\/h3>
\nCurate your website’s content and don’t give each user the kitchen sink. Space out your content and be confident that your users will explore your site if given the right reasons. This means not every “special†element needs to be tightly fit above the fold.\n<\/p>
<\/span>11. So many questions!<\/span><\/h2>
<\/span>The Problem<\/span><\/h3>
\nYour contact form has more questions than my university finals.\n<\/p>
<\/span>The Fix<\/span><\/h3>
\nBe more concise by building more targeted forms. It’s not necessary to make one “catch-all†form, make your form as lean as possible and restrict the information you are asking for from your user. A user is more likely to complete a form that is well structured, well guided, and brief as possible.\n<\/p>
<\/span>12. Are you looking for me?<\/span><\/h2>
<\/span>The Problem<\/span><\/h3>
\nYour website’s design doesn’t reflect your demographic or your product.\n<\/p>
<\/span>The Fix<\/span><\/h3>
\nKnow your audience before designing. Do your research and find out what works with your demographic and how you can most effectively communicate to them. Your market is rarely “everyone†— despite your best intentions — and you will waste time and resources trying to speak to such a large crowd.\n<\/p>
![\"getpaidtowrite-banner\"](\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2016\/04\/10224016\/getpaidtowrite-banner-1.jpg.webp\")
<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"