| Huge images (or auto-playing videos), especially in the header / hero section. |
Uses up lots of data: expensive and slow. |
Heavily optimise images, don't auto-play video. Be aware of the cost (in data and time) of your images. |
Use image optimisation tools. Get ideas from Lara Hogan's Optimizing Images chapter of Designing for Performance |
| Parallax |
Janky: processor-intensive, especially on mobile. Causes scrolling issues. |
Don't use it. Have static images breaking up the content instead. |
Make a plan for ditching parallax. |
| Off-canvas navigation |
Hides your content from users, removes information scent. |
Review your IA, use a different style of navigation. |
Review the IA, sketch new navigation styles. |
| Low contrast text |
Not very readable or legible in low light, or for users with poorer eyesight. |
Up the contrast. |
Use some colour contrast checking tools. (e.g. Lea Verou's contrast ratio, ) |
| Carousels, especially auto-playing ones. |
People often ignore them (like they do with ad banner blindness), seldom interact with them. Many have accessibility issues. |
Don't use them! Or at least let the user move the slides, and provide labels that give them a reason to use it. |
Make a plan for how to ditch your carousels, and how to explain it to the bosses. |
| Share Widgets |
Interactive widgets slow down a page, and can block loading of the rest of it. Share buttons add weight to a page and are seldom used. |
Remove social media sharing widgets entirely, or replace them with simple link versions. |
Make a plan for what to do in own work. |
| Relying on custom fonts in your design |
Custom fonts can be slow to load, or fail to load at all. |
Make sure your site works great with the generic serif or sans-serif system fonts. |
Remove custom fonts from your site and see what changes you need to make. |
| Loading screens |
Hides a bigger problem: your site is too slow! |
Conduct a thorough performance review of your site. |
Use WebPageTest and Google's Page Speed Insights to get some ideas for improvements. |
| Single Page websites |
Can result in large, heavy, pages. That means slow and expensive, especially on mobile. More difficult for people to share a specific part of the page. |
Split it into several pages. |
Make a plan for splitting it into several pages. |
| Ghost buttons |
They don't offer proper affordance as a button, and often aren't visually distinct from other interface elements. |
Make buttons look like buttons. |
Redesign some existing buttons in your work. |
| Thinking in pages |
Focus shits to look and feel as opposed to content |
Concentrate on systems design with reusable modular components |
Concentrate on modular design |
| Static prototypes |
Still thinking in pages and a print-like mindset |
Move to in-browser design, utilizing rapid and style prototyping |
Use tools like Invision. Use HTML. |
| Over-reliance on grid systems |
Generic grids (Boostrap, Foundation, etc) are neither a good representation of a site's content nor its design. |
Consider content out layouts |
Simplify your grid |
| Modal/overlay |
Terrible for keyboard users. Impede flow through site. (Ok for image galleries?) |
In almost all cases, there is no need to force users into specific actions. Rather, show the content that you were going to put into an overlay within the page |
Consider collapsible UI elements or dynamic inline elements. |
| Text over images |
Produces unexpected results if length is not ideal. Obscures images. Tricky with responsive design. |
Flow text around images. Do you actually need that image? |
Redesign image/text layout |
| Fixed positioning |
Performance killer if you are using js. Interferes with scrolling. Can take up a lot of screen real estate especially on mobile. |
Use natural element flow |
Remove fixed positioning (especially on mobile). |
| Hiding information behind hover states (or even worse, clickable js elements) |
Makes information inaccessible to non-mouse users |
Don't hide information |
Consider why info needs to be hidden. Is it really necessary to have? |
| Typography |
Too many font-size and family declarations |
Very hard to maintain |
Keep font variations to a minimum. Use a typographic scale like Modular scale or Type scale |
| Pagination |
Large datasets can lead to confusion (where am I?). |
Only use when it is not possible to display all the data on a single page/screen or when the dataset is in some way ordered. Do not use when you don't want the user to pause for navigating to the next page. |
Reconsider / redesign pagination controls. |
| Infinite scrolling |
Removes sense of control from user (no endpoint). Not easy to discern information. Inefficient. Poor performance. |
Consider cumulative search filters |
Allow user to narrow down interest/search. See So You Think You’ve Built a Good Infinite Scroll |
| Animation |
Obscure navigation interactions, annoying banner ads, Flash intros. Performance and bandwidth killers |
Micro animations can improve user experience, eg. communicating status, adding affordance, showing status. |
Use where appropriate. |
| Forms |
What element to use when. "Designed" inputs. Inappropriate inputs. |
Use appropriate inputs for desired user behaviour. |
Look at the forms you have designed and see if they can be improved. |
| Login |
forcing login. Social login. Which one did I use. What if one ceases to exist. Only Facebook / Twitter, etc. |
Consider specific use cases for login |
Evaluate and reconsider logins on your sites. |
| Responsive Web Design |
🧌 |
Make separate sites for: mobile, tablet, desktop, watch, and fridge. |
Figure out that this one is a joke. |