网页设计10大禁忌

原创 2007年10月02日 15:25:00

原文:http://www.smashingmagazine.com/2007/09/27/10-usability-nightmares-you-should-be-aware-of/

Sometimes you just want to get the information you’re after, save it and move along. And you can’t. Usability nightmares — which are rather the daily routine than an exception — appear every now and again; usually almost every time you type your search keywords in Google. In his article “Why award-winning websites are so awful” Gerry McGovern points out that “the shiny surface wins awards, real substance wins customers” and that is absolutely true. Nevermind what design you have, and nevermind which functionality you have to offer — if your visitors don’t understand how they can get from point A to point B they won’t use your site.

In almost every professional design (except from special design showcases such as, e.g., portfolios) you need to offer your visitors

  • a clear, self-explanatory navigation,
  • precise text-presentation,
  • search functionality and
  • visible and thought-out site structure.

And that means that you simply have to folow the basic rules of usability and common sense. You want to communicate with your visitors, don’t drive them away, right?

In this article we take a look at some of the usability nightmares you should avoid designing functional and usable web-sites. At the end of the article you’ll also find 8 usability check-points you should probably be aware of.

1. Hidden log-in link.

Backpack, 37signal’s one of the most usable organizational and project management tools out there, explains exactly what the tool can be used for, how one can use it and which features it has to offer. However, once you’ve signed up, you might need few minutes to find out what you should do to actually start using the tool.

Backpack Login

The “Log in”-link (hint: in the yellow box) should have a greater font-size — also icons would do the job. Every registered user has his/her own personalized page, however new registered users will need a while to find out how they can log in. As Lee in our comments said, “someone thats invested their time to sign up for a service will spend more than two seconds finding out how to log in.” Ok, but why should he/she? Why not just place the link somewhere where it’s visible? It sounds reasonable to us.

2. Pop-ups for content presentation.

Almost every modern web browser uses a popup-blocker to prevent pop-ups, ad blocks and further site content recognized as advertisement. Firefox, Safari, Opera and Internet Explorer make use of it — therefore the idea to use pop-ups to present the main content isn’t probably the most reasonable idea web-designer might come up with.

Adidas Pop-Ups

However, Adidas developers team seem to consider pop-ups as a creative approach for their target audience. It’s not clear what ImpossibleStory.com is actually about — most users will never find out; even we were too lazy to deactivate our popup-blocker.

3. Dragging instead of vertical navigation.

Actually, this technique — not a real nightmare, but very unusual — might become a new trend in the future. Dragging, as used from .pdf-documents, can also be adapted to web-sites. Fichey offers a Flash-based solution. Interesting approach, however you can’t bookmark specific parts of the site - a typical problem for Flash-based designs.

Fichey

An introductory info box on the start page of the site informs its visitors about the new way of navigation. The tool shows sites which are currently popular in social media. By the way, the displayed links don’t work - apparently, the tool shows the screenshots which are saved and embedded as images.

4. Invisible links.

Visitors have to know where they are, where they’ve been and where they can go next. If designers don’t present this information in an appropriate way, visitors can have serious problems with site navigation. Real Player had been using a bunch of invisible links for a while. Take a look at the picture and the labels below (originally created by Trenton Moss) — can you spot the links?

Real Player

1, 3, 4, 6, 7 and 11 are links, and 2, 5, 8, 9 and 10 aren’t.

5. Visual noise.

Often less is more. Visual noise is probably one of the most typical problems large web-sites’ designers have to cope with. And it’s extremely easy to get it wrong. As Overstock does.

Overstock

Bonus: It’s also not quite clear what is a link and what’s not. Overstock also uses a number of different link presentations and hover effects. Link or not a link? You might have a lot of fun finding out.

6. Dead end.

You can use different approaches to introduce your new web-service to your visitors. Scriblink welcomes its visitors with a pop-up and a Java-applet. Visitors have to provide some input to start browsing through the site.

Scriblink

Nothing helps:

  • clicking on “cancel” doesn’t help,
  • OK doesn’t help,
  • full-screen mode doesn’t help,
  • clicking somewhere else doesn’t help,
  • closing the browser window doesn’t work,
  • clicking on the question mark for help doesn’t work.

Unfair, really. We just wanted to see what the tool does…

7. Content blocks layering upon each other.

A typical problem which always appears if large Flash-movies are used on large web-sites. The site navigation is hidden; whatever users might be willing to browse to — they have no chance.

Photoimpact

The same problem on Yahoo.com:

Yahoo

8. Dynamic navigation.

What looks like a usable site navigation, shows itself soon enough from its worst side. Nevermind where you point your mouse pointer to — supporting images slide down and up and change the focus of the link you’ve clicked on. On the image below the link “history” was clicked - it moves away; and no, the sliding images aren’t linked to the page you’d like to browse to.

Brown University

The effect appears in both left- and right-side navigation menus. Visitors might need some time to find out what is happening. However, once the idea is understood, the navigation isn’t that hard to deal with.

Kabe243

The same idea on Kabe243. Bonus: visual noise at its best.

9. Drop-Down Menus.

Drop-Down menus are useful for web-developers and almost always get on users’ nerves. If you — as a designer — hide navigation items in a drop-down menu you can save yourself a large amount of vertical space; however users have to focus the mouse precisely to get to the section they’d like to visit. It’s not usable.

However, it can be even worse. If the distance between different levels of navigation is too large (for instance because some navigation items have more text) users have to move the mouse horizontally. If the mouse focus changes its vertical position, users have to start from the beginning.

2Advanced and Brita.net are excellent examples for these usability nightmares.

2Advanced

Brita

Notice: it took us a dozen of attempts to actually make these screenshots.

10. Blinking images.

Sometimes you just want to read the content of a web-site you are visiting. And you can’t. To fight against the banner blindness advertisers make use of animated ads — usually animated .gif-images or Flash-movies. In both cases it might become extremely hard to focus on reading if such images are blinking all around the content.

Digital Web Magazine, an excellent online magazine we read on a regular basis, has a disturbing animated ad on the left side of every article.

Digital Web

Future Nightmare?
Pointing the mouse instead of clicking.

Dontclick.it, an interesting experiment in interaction design, explores a clickfree environment. It wants to explore how and what changes for the user and the interface once you can’t rely on the habit of clicking.

Dontclickit

Within this interface you won’t find any buttons. Instead you navigate the contents in a different way — by pointing the mouse to the areas of the site you are interested in. What sounds like an interesting approach might soon become a usability nightmare - just imagine web-users trying to open external links in a new browser window; besides it’s interesting to know how exactly users will be able to, let’s say, open a list of links in new browser tabs (updated to clarify why we’ve put Dontclick.it in this post).

8 Usability Check-Points You Should Be Aware Of

  1. You don’t use pop-ups.
    Pop-ups interrupt the browsing session of the visitors and require an instant feedback. Respect your visitors.
  2. You don’t change users’ window size.
    The same argument as the one against pop-ups holds. Some browsers, e.g. Internet Explorer, saves the browser dimensions and uses them for further browser sessions. As Ben Bodien commented, “it’s just plain inconsiderate to assume that you know better than the user how their software environment should be configured?”
  3. You don’t use too small font sizes.
    Long passages are harder to read, and to read brief sentences readers need more time. It holds also for links, buttons, forms, search boxes and other elements. Good news — in Web 2.0 the opposite is the case.
  4. You don’t have unclear link text.
    Links have to be precise and lead to the destination they describe. Ambiguous link descriptions should be avoided.
  5. You don’t have dead links.
    There are too many of them anyway; why would you want to point your visitors to a dead end?
  6. You have at most one animation per page.
    If blinking images are wide-spread through the site, it’s extremely hard to focus on one single site element. Give your visitors an opportunity to perceive your content. Using animated ads, don’t place them right along your articles.
  7. You make it easy to contact you.
    Maybe because you just don’t want to be contacted, but If visitors do want to get in touch with you, but can’t find any contact information, you lose their interest and trust. Disastrous for online-shopping, a missed opportunity for the rest.
  8. Your links open in the same window.
    Visitors want to have control over everything what happens in their browser. If they’d like to open a link in a new window they will. If they don’t want to, they won’t. If your links open in a new window you make the decision which is not your decision to make.
 

相关文章推荐

推荐 10 款 CSS 框架,网页设计就是这么简单

程序开发人员和网页设计人员掐架的事情常有听说,程序员们总是为自己设计不出来漂亮的网页而纠结。不再郁闷,因为开源帮了你,下面为你介绍11款相当不错的CSS框架,专心做程序吧,网页设计交给开源帮你。CSS...

开发者必看:2014年网页设计的10大发展趋势

如何让网页设计更具现代感?2014年网站设计又会有怎样的变化趋势? 12月份对即将过去的一年中网页设计发展进行回顾,总会发现很多让我们感到欣喜的变化。去年我们同样预测了2013年互联网设计出现的...

推荐 10 款 CSS 框架,网页设计就是这么简单

程序开发人员和网页设计人员掐架的事情常有听说,程序员们总是为自己设计不出来漂亮的网页而纠结。不再郁闷,本文即将为你介绍10款相当不错的CSS框架。 1、CSS网页布局框架 Elastic 简单的 ...
  • geekone
  • geekone
  • 2011年05月21日 10:24
  • 262

2015 Top10 最成功的网页设计趋势(业界主流设计思想)

如果你打算在2015年重新设计你的网站,那么你可能有必要了解设计优秀网页的趋势。尽可能早地考虑网页设计特点是一个好主意。   你决定的任何网页设计都必须是高度可用、直观的,并且它应该满足市场和用...

200组精彩网页设计模版10

  • 2009年04月14日 18:31
  • 10.21MB
  • 下载

9大最佳实例助你建设完美的404网页设计页面

一个网站建设上的404 错误是服务器在请求资源找不到的时候发生的。一个设计合理的404错误页面不仅仅是网站Web Design完整性的一部分,还是网站的可用性的重要体现。好的404错误页面设计可以大大...

响应式网页设计需要考虑的5大预算因素

【编者按】本文作者Brad Frost,纽约数字互动广告公司R/GA的移动web战略家和设计师、前端开发工程师。作者主要对响应式网站和单独的移动网站进行了简单的比较,并总结了建设响应式网站的一些预算考...

网页设计制作九大“要点”

大家在上网的时候,看着别人的精彩主页难免心里痒痒的,但自己精心布置的个人主页,如果在不同的浏览器中呈现不同的面目,搞得一塌糊涂的话,你的个人主页恐怕也真成了“个人看的主页”了。下面将以FrontPag...

色彩心理学对网页设计有多大影响力?

原文链接 http://www.199it.com/archives/360535.html 根据网站Kissmetrics网络数据分析结果表明,当我们观察颜色的时候, 我们的眼睛会将消...

韩顺平_轻松搞定网页设计(html+css+javascript)_第23讲_js三大流程控制(顺序流程、分支控制、循环控制)_js调式技巧_学习笔记_源代码图解_PPT文档整理

文西马龙:http://blog.csdn.net/wenximalong/ js基本语法——三大流程控制 循环控制 听其名而知其意,就是让你的代码可以循环的执行。 案例: 编写一个程序...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:网页设计10大禁忌
举报原因:
原因补充:

(最多只允许输入30个字)