【Interaction design】11个令人抓乱的错误交互设计(11 Interactions Design Mistakes That Drive Us Nuts)

Interaction design can separate the quality sites from the rest of the crowd – if done well. If, however, there are glaring errors in the designs, it will only serve to irritate and frustrate the very people you’re trying to impress.
Here’s a list of my least favorite IxD mistakes that have left users disappointed, confused, and can even at times leave them a little angry.

缺乏对比(Lack of Contrast)


When browsing sites, we like to view designs that pop off the page with clean, crisp contrast. Contrast serves an important purpose – it helps make the content readable, and effortlessly guides users around the page. This is one of the most basic design concepts, and it’s surprising that some sites just don’t seem to get it!
Without enough contrast, either in the color palette or overall presentation, a site can look, at best, a little confusing; and at worst, unreadable.
Interaction Design Mistake Example:

疯狂的导航(Insane Navigation)

No matter how out-of-the-box your navigation ideas are, think of your users first. It’s not being boring. It’s being thoughtful and pragmatic. Take advantage of navigation design best practices and principles: clarity, simplicity, consistency and correlation.
Interaction Design Mistake Example:

非响应式的或者不良的触摸目标(Non-Responsive & Poor Touch Targets)

Responsive websites are vital these days, and there’s no excuse for creating a site that’s hard to use on your smartphone unless you’ve done tons of user tests and proven that a mobile-friendly site is not a necessity.
Interaction Design Mistake Example:

令人心烦意乱的音乐(Mind-Numbing Music)

It’s nice to put on some music in the evening and relax. Music can be great, at the right times. However, in 99.9% of cases, the right time isn’t when you’re browsing online.
Few things are more annoying than browsing a site and having an orchestral symphony blaring in your ear at the same time. It’s possibly just about excusable if you’re advertising your next album. But even then, only just.
Interaction Design Mistake Example:

毫无意义的弹出窗口(Pointless Pop-Ups)

Yes, they can really be irritating. Sign-ups! Everyone needs more sign-ups! However, there’s always a more elegant way to do your marketing. Pop-ups can be about as annoying as shouting children trying to get your attention. If you must use them, keep them simple, creative, and easy to shut down.
Interaction Design Mistake Example:

可怜的架构(Poor Structure)

I understand how tempting it is to try to be creative. After all, you want your design to stand out. However, when creativity just becomes one hot mess, it’s time to bring in some much needed organization instead.
Great designers are great communicators. Visual hierarchy and balance are some of the important aspects of creating a good first impression, shaping user behavior, and more importantly, effectively delivering the message beyond a web page.
Interaction Design Mistake Example:

棘手的排版(Tricky Typography)

—— 建立一个清晰的层次结构
—— 注意文本对齐方式
—— 限制字体的字号数量、类型和颜色
—— 必要时充分地利用空白
When I visit websites, I like to be able to access information quickly and easily. We’re not keen on confusing large lettering with difficult-to-read shadow effects. Trying to read words over a moving background, or struggling with teeny-tiny fonts that require a magnifying glass to view them.
Here are a few rules to help you brush up on the basics:
Build a clear hierarchy.
Pay attention to text alignment.
Limit the number of font sizes, types, and colors.
Make good use of whitespace where and when necessary.

笨拙的表单(Clumsy Forms)

—— 强调需要的字段
—— 必要时显示进度
—— 提供提示
—— 注意字段的长度
—— 使用先进的工具来定制表单元素
There may be times when you need to ask your users for information, and that’s fine. However, it’s not okay to present them with a form that’s overly long and far too time-consuming to complete. Nor is it a good idea to ask for the same information twice. Ask for exactly what you require, at a minimum, and don’t neglect cross-browser form styling.
Great web form interaction experience comes from clarity, conciseness, and consistency.
Here are a few tips:
Highlight required fields.
Display progress if necessary.
Provide hints.
Pay attention to field length.
Use advanced tools for customizing form elements.

没有用户反馈和数据的抄袭(Copying Others, Without User Feedback & Data)

It’s not necessarily a bad thing to take inspiration from someone else, but you need to ensure you’ve got the right feedback and data at your fingertips before you do so to make sure you’re designing something of genuine value for your target audience.
Interaction Design Mistake Example:

显著的不一致性(Glaring Inconsistencies)

It’s ok to mix-and-match styles to a certain extent. However, if the overall effect is just one big, ugly visual “clash” then it’s advisable to get back to the drawing board and start over.
Great IxD is consistent. It gives users a better understanding of how things work, making them feel in control of the situation and increasing their efficiency in working with a web page. As Jakob Nielson said, “The more users’ expectations prove right, the more they will feel in control of the system and the more they will like it.”
Interaction Design Mistake Example:

太多的动效(Too Many Effects)

The occasional well-positioned interactive animation can really lift the content of your site. However, burden your pages with crazy effect after crazy effect, and you’ll leave your audience feeling a little like they’ve entered the online equivalent of a lunatic asylum, or even worse.
This one is my crowned winner when it comes to madcap design… I challenge you not to feel a little unhinged after seeing it!
Interaction Design Mistake Example:

追逐趋势(Trend Chasing)

It’s good to stay a little on-trend. However, spend your days chasing the latest buzzwords and interaction design styles, and you’ll end up with a site that reads a little bit like a cliché. Dare to be different, if you can.

交互设计——四种正确设计的方式(Interaction Design – Four Ways to Get it Right)





4)测试测试再测试。如果你发现任何疑问,就进行测试!有很多用户研究工具可以帮助你发现在产品中用户受困或者分心的地方。a/b测试,分析眼 动跟踪数据,或者是直接让你的客户,同事和朋友尝试你的新设计。没有什么比真正的反馈更有价值,并且几乎没有一个更好的方法能如此改进你的交互设想。
So, that was my collection of my most hated errors in interaction design. Here’s a handy little list, reminding you how to get it right!
Be goal-driven. Don’t add an effect for the sake of it. Don’t choose a color palette, navigation item, or icon simply because you think it looks good. Look at the end-goal instead. What do you want your site to achieve? Once you’ve identified that, then hopefully, you should have a good idea about what interaction design you should be using..
Remember the human touch. If you’re the artistic type (aren’t we all!) the temptation is to create something beautiful, something outstanding, something that has never been done before. However, if nobody has created and used it yet, there might be a very good reason for that…namely, it just doesn’t work. Remember, the visitors to websites are humans. Create something that is designed to appeal directly to them..
Keep it consistent. Yes, websites should be spectacular. However, they also need to be usable. There will be certain conventions that you’ll need to follow, in order to make the site easy to navigate and simple to understand. Don’t go against the grain for the sake of being different. Instead, accept that there are certain rules you will need to implement to help your users access your site with ease..
Test, test, test. If in doubt, test! There are plenty of user research tools to help you define where users get stuck or distracted. Do a/b tests, analyze eye-tracking data or simply ask your customers, colleagues, and friends to try out your new designs. There’s nothing more valuable than genuine feedback and there’s hardly a better way to improve your interaction ideas..
Want to Brush up on Your Skills?

If you’re keen to polish up on your interaction design skills, here are some great guides, full to the brim with useful information to help you:
Complete Beginner’s Guide to Interaction Design.
Interaction Design Basics from Usability.gov.
Interaction Design Tactics For Visual Designers.
If you think I’ve missed anything, or you’ve got a pet peeve related to interaction design that you want to share, just leave a comment below!
No related posts.





your support will encourage me to continue to create!