Justinmind

BLOG

Expand your prototyping knowledge

Top 10 terrifying web and mobile design mistakes: fright night!

Top 10 terrifying web and mobile design mistakes: fright night!


Prototyping and designing for web & mobile can be scary stuff, but these top 10 web and mobile design mistakes are beyond hair-raising.

Web design boo-boos and mobile app development disasters are, sadly, more common than a Simpsons Halloween special episode. In fact, users come across scary interface errors and usability nightmares on a pretty regular basis. This is perhaps not surprising – even armed with data from user experience research and usability testing tools, it’s nevertheless hard for designers to 100% predict how their website or app will go down with users. Of course, prototyping with a tool such as Justinmind will go a long way towards building better end products, but even the best prototype in the world won’t save your web or mobile app from dumb design disasters.

Here are 10 terrifying mistakes made by rookie (or not so rookie…) designers faced with web and mobile design challenges. Check them out… if you dare…

Snarky pop-ups

Pop-ups are tricky customers. Users tend to hate them, e-marketers embrace them and designers are stuck in the middle. In fact, when we ran an original Justinmind survey on pop-up windows the responses were split – 24% of respondents hated them, 22% loved them and the remaining 54% sat on the proverbial fence. On the positive side, a pop up does its job marvelously – it interrupts the user and forces them into acting; on the negative, users hate that, and engagement overall can plummet.

So pop-ups are tough at the best of times and there are arguments for and against. But one pop-up faux pas that will never be ok, not even for Halloween, is the snarky pop-up. You know the one we mean. We’re talking about pop-ups like this one below.

web-mobile-design-mistakes-popup

Image credit: Copyhackers

Disinterest in a product doesn’t make the user an idiot, and building a pop-up doesn’t make you the smartest e-commerce guru since like ever. It just means you built a snarky pop-up that makes the user feel bad towards your brand. D’oh.

Slow loading times

Users wait an average of 0.378 seconds for a page to load. Ok, so we made that statistic up, but it’s true that users hate to wait, and slow loading times can push up abandonment rates. Plus Google uses page load times as a ranking factor, so designers and SEO buffs should be equally committed to bringing load times down by following 3 simple steps:

  • Limit plug-ins
  • Optimize and compress images
  • Combine small images in CSS, and combine multiple CSS into one file

Follow our design and prototyping tips for how to make loading times less tedious for users in this post.

PS – users actually wait 4 seconds for a webpage to load and 3 seconds for an app


Download Justinmind today and prototype better designs!

DOWNLOAD FREE


Bad hyperlinking conventions

Clicking hyperlinks is the most common daily action users carry out online. Without hyperlinks the web wouldn’t be the web, just a bunch of isolated pages floating sadly somewhere about the Trans-Atlantic cable. Hyperlinks are central to our online experience and their design is critically important.

When it comes to formatting hyperlinks, designers are in a bit of a Catch-22: there are formatting options, such as on-hover links and adventurous link decoration, but nothing ever comes close to the traditional blue underlined link for click-through rates. It’s a tough call and hyperlink design is a decision that needs to be made based on multiple factors such as target user, device use and site/app objective.

Whatever you do, follow the basic rules, as we laid them out in one of Justinmind’s guest posts for Usability Geek

  • Don’t underline text that isn’t a link
  • Use different colors for visited and unvisited links
  • Make links accessible by writing semantic HTML
  • Write specific messages for your links, that indicate where the user will be directed (avoid uninformative phrases such as ‘click here’)
  • Keep linked phrases short, 3-5 words
  • Maintain overall style consistency and integrity across the site
  • Don’t put more than 100 links on any one page (Matt Cutts explains why)

Lack of perceived affordance

It’s no secret that we’re big fans of Jakob Nielsen and Don Norman in this office, so when they say that ‘perceived affordance’ is a big thing, it’s big. Perceived affordance refers to “actions you understand just by looking at the object, before you start using it”. For example, when you see a blue underlined link, you know it ‘affords’ clicking. When you see a checkbox you know it ‘affords’ checking or unchecking. Simple right?

The problems arise when there’s a lack of perceived affordance. That moment when you arrive at a webpage and you say to yourself “what am i meant to do now?” – that indicates a lack of perceived affordance. This can happen because of a number of factors – designing action buttons to look like adverts, hiding action buttons to achieve a minimalist aesthetic, etc. And the worst possible ‘fix’ is to try to fill the hole with lots of instructive text; just make actions understandable at first sight, make navigation patterns obvious and user pathways intuitive.

Find out more about affordances in this UXBooth post.

Experimental icons

While designers are prized (and paid) for originality and creativity, sometimes it pays to play by the rules. Icon use is one of those times, because more often than not a user’s comprehension of an icon is based on past experience, rather than affordance. Mess around too much with how an icon looks and you’ll twist users’ collective melons, rendering your GUI incomprehensible. For example, we’ll give you some Halloween candy if you can identify all the icons below (disclaimer: we won’t really).

web-mobile-design-mistakes-icons

Icons must convey meaning or action with a single glance; if you find during testing that you’re having to explain or label the icons on your interface then that’s a signal to cycle back and re-prototype. While there are few ‘universal’ icons (think the magnifying glass for Search), the aim should always be to create an intuitive user interface. There’s plenty of designer-led debate in this topic – check out Steve McCarthy’s great post “Do icons need labels?” as a start.

If you’re using Justinmind to prototype you’ll be able to drag and drop the full range of icons for just about any device from our UI kits, as well as import your own SVG icon files.

Automatic sound

OK maybe this is a pet peeve but websites that automatically play sound are annoying as hell. What about users who are browsing on the sly in the office?? And what if the user doesn’t share your taste in heavy metal, or Justin Beiber, or whatever? Yes, music may complement a brand strategy, but if it jumps out at the user unaware it’s going to create shoddy UX. Period.

That’s not to say all websites should be silent as a Halloween tomb. If you integrate sound into the design, follow the following principles:

  • make sound controls obvious and intuitive,
  • set the default mode to ‘Off’
  • label controls

Crappy error messages

If you’ve ever filled in an online form, chances are you’ve received a crappy error message. One that would only make sense to the person who designed it. One that tells you something is wrong, but doesn’t tell you what or how to fix it. It’s infuriating for users and leads to soaring abandonment rates.

Jakob Nielsen explained how to give good error messages way back in 2001, and the guidance still stands today.

  • Clearly indicate that something has gone wrong
  • Be in a human-readable language
  • Be polite and don’t blame the users
  • Describe the problem
  • Give constructive advice on how to fix the problem
  • Be visible and highly noticeable, both in terms of the message and how it indicates where things went wrong
  • Preserve as much of the user’s work as possible so that they don’t have to do everything over again
  • If possible, guess the correct action and let users pick it form a list of fixes
  • Educate users by providing links to pages with an explanation of the problem

Not giving feedback

Users are people, and people are social animals. So don’t be afraid to engage with your users like a human and give them feedback to their actions. Let them know when they’re selected an action, when a page or feature is loading, when an order has been successfully processed… in fact any user action should be accompanied by feedback. Don’t make users guess what’s happening with your site or app, because more often than not they’ll guess wrong.

Unusual navigation patterns

Users, according to Steve Krug, don’t want to waste time thinking when they’re using your site or app; they want to act and act fast. So any navigation pattern that deviates from either the norm, or the intuitive, is doomed to the UX trashbin. Excessive drop-down menus, mega menus, rotating homepage carousels and navigation patterns that dont work on mobile devices are all sure fire ways to scare users from your site.

Good navigation is the family saloon of web and app design: save your Porsche moves for the weekend and keep navigation predictable and dependable.

  • Keep top navigation elements to less than seven
  • Use descriptive anchor labels
  • Most important pages should come first and last in site architecture

And read our great advice on mobile navigation patterns for real users!

Unreadable text blocks

Question. How do you feel about having to read the text below?

web-mobile-design-mistakes-text

Pretty sad-sacky, probably. Presenting web users with a wall of undifferentiated text is a sure-fire way to kill their buzz, and studies show that users simply skip text presented like this. Designers and content producers have to focus on making text scannable, skimmable, concise and accessible by following established best practices:

  • bullet lists
  • short paragraphs
  • sub-headings
  • highlighted keywords

download-justinmind-prototyping-tool-banner-1

Cassandra Naji

About the Author

Cassandra is Marketing Content Editor at Justinmind

Leave a reply

Your email address will not be published. Required fields are marked *