网站用户体验整合设计-网站用户体验之网站建设行规常识

网站用户体验之网站建设行规常识

Post by 张美工, 2008-9-16, Views:

从web1.0到web2.0跨过这个几个年头的发展，网站建设已经不再是什么小数人的专利，所谓，国有国法，行有行规，随着网站设计的深化，行内人士根据网站用户的体验，总结出了一些行规常识，贴出来让一些刚加入网站建设的新人看看：

宣传网站的建议

· 确保每张网页的左上方出现logo。

· logo旁边出现标语或者是介绍企业特点的语言，比如说，“怕上火喝王老吉”是王老吉的标语。

· 创建favicon。Favicon就是出现在地址栏URL旁边的图形。

· 所有网页外观设计要一致。网站的颜色、布局要一致。

· 网站设置“联系我们”板块，包含所有关于你与公司的相关信息。

· 网页底部包含版权信息。

网站导航系统

· 网页下载时间控制在10秒之内（50kb，包括图片）。

· 相关的导航内容放在一起。

· 菜单栏选项使用常用的名称：主页，关于我们，联系我们，帮助，产品，避免出现时尚、流行的选项。

· 如果网站利用Flash，确保出现HTML版本，有些用户不喜欢眩目的网站。

· 网页底部出现简单的文本链接，这样用户就不必退回网页顶部。

· logo与主页进行链接（除去主页logo之外），另外所有二级页面要与主页进行链接。

· 展示网站浏览路线，就是指从主页进入各级页面的路径，比如说，主页 > 主菜单>次级菜单 > 二级页面。这样用户可以方便地操作网站。

· 如果网站内容太多，你可以提供站内搜索。网站主页的右上方可以设计搜索框，或者提供搜索页面，以及内部页面与搜索页面的链接。网站需要具备功能强大、免费的搜索引擎。

· 搜索框用来搜索网站内容，而不是所有网络内容。

· 创建常用的错误页面，页面中呈现站点地图，以及与网站主要内容的链接。这样，网站就不会流失链接无效或者URL输入错误的访问者。

布局与内容的设计技巧

· 网页顶部的内容应该是最重要的内容，请记住：好内容必须放置在顶部。

· 网页可以用表格布局，表格宽度用百分比设定，避免利用固定像素数字。这样网页会永远与显示屏相适应，不会出现水平滚动条。

· 优化网页，确保在800x600（最常用）分辨率状态下，网页呈现最佳状态。

· 网页文本内容颜色对比要明显：黑色文本搭配白色背景，或者白色文本搭配黑色背景。

· 网页避免出现太多字体，同时避免使用小字号的serif字体（例如Times Roman），这样的字体出现在电脑显示屏中，不便于阅读。Verdana是一种最适合网站的字体，因为它宽度大、整洁、易于阅读。

· 避免出现大段文字。利用有助于用户浏览网站的工具，比如，点式列表、副标题、关键词以及超链接等等。

· 网站避免出现以下特征：数字计数器、大量感叹词、全部大写字母、全部文本内容居中、大量动画图片、复杂的背景等等。

· 避免使用弹出框。弹出框类似于广告，会分散访问者的注意力。

· 在不同的浏览器以及分辨率状态下，测试网站。

网站文本内容设计方法

· 避免出现专业术语，保证所有浏览着理解网站内容，除非网站是为技术人员提供专业技术服务的网站。

· 阅读电脑显示器中的文字确实有一定难度，所以网站文字要少于印刷品文字的50%。

· 如果网页太长，就需要把它拆成几张网页，并且与这些网页进行链接。

· 网页文本字号不小于10pt。利用百分比指定网站字体，而避免利用像素，这样用户可以根据自己的喜好，利用浏览器文本选项，确定字号。

· 利用拼写检查程序。网站避免出现尴尬的拼写错误，这样会降低网站信誉度。

了解网站消费者的方法

· 征求反馈信息：“联系我们”的网页中出现反馈表格。

· 出版电子杂志，网站主页出现订阅方式。为用户提供有价值信息，鼓励他们与你联系。

· 利用投票系统以及其它工具收集营销资料。

链接方法

· 链接应该是描述性的，应该说明用户链接的地址，而不要仅仅出现“点击这儿”。

· 非链接内容，不能出现下划线。

· 网站链接内容应该出现下划线，并且网站所有链接内容的下划线颜色应该相同。

· 已访问的链接颜色应该不同，这样访问者可以了解已经浏览过哪些内容（未访问的链接最好使用紫色或者其它比较柔和的颜色），

· 当与Excel、Word、Acrobat等非HTML文件链接时，可以在链接附近增加一个小图标，这样更明显。

· 避免出现与“在建中”网页的链接。

· 确保链接的有效性，避免出现无效链接，这时你可以利用网上的免费工具。

· 运用图片链接时，使用ALT标签。ALT标签应该说明你所链接的内容。

利用图片的方法

· 优化图片。图片最好只利用.gif与.jpg格式，在保证图片质量前提下，尽量压缩文本。你可以使用网上提供的免费图片优化工具。

· 使用图片的缩小版本，并且使用户可以与它们的原版本链接。

· 避免出现与广告外形相似的图片，网站访问者会忽视这些图片。

· 利用图片的ALT属性，即使图片不可以链接。这样有助于不喜欢图片的用户浏览网站。

网站的搜索引擎优化:

· 创建简短、描述性的网页标题，促使搜索引擎用户点击网站链接。

· 创建包含所有网页的站点地图，并且与主页直接进行链接。搜索引擎机器人会根据链接浏览站点地图，把所有网页添加到索引中。

· 确定每张网页的2-3个关键词（你认为用户会键入搜索引擎，寻找网页的词语），并且确保关键词经常出现在网页标题、叙述meta标签以及网页文字内容中。

· 创建链接页面。在链接页面中，与同意与本网站链接的其它网站进行链接。如果信誉度高的网站与本网站链接内容越多，那么本网站在搜索引擎中的排名就会越高

· 网站多使用文字内容，尽量减少使用图片、Flash、JavaScript。搜索引擎更喜欢文字内容，可以更快对网站做索引。

Tips to brand your website

· Include your logo in all pages. Position it at the top left or each page.
· Complement your logo with a tagline or catchy sentence that summarizes your business purpose. For example "Always low prices" is the tagline for Wal-Mart.
· Create a favicon. A favicon is that small graphic that appears next to the URL in the address bar.
· Have a consistent look and feel in all your pages. Use a color scheme and layout that are clearly recognized across your site.
· Have an About Us section, that includes all relevant information about you and your business.
· Include a copyright statement at the bottom of each page.

Tips on website navigation

· Design your pages to load in less than 10 seconds (50Kb maximum size, including pictures).
· Group your navigational options in relevant categories.
· Use common names for your menu options: Home, About Us, Contact Us, Help, Products. Avoid "clever" or "trendy" alternatives.
· If your site uses Flash, provide also an HTML version for users who prefer a less fancy, faster site.
· Provide simple text navigation links at the bottom of long pages, so users don't need to scroll back up.
· Link your logo to your homepage, except in the homepage itself. Put a link to your homepage on all your internal pages.
· Display a "breadcrumb trail"; it is basically the path from the homepage to the page where you are. A breadcrumb trail looks like this: Home > Section > Sub-Section > Page, and it greatly facilitates navigation.
· If your site is too big, provide Search capabilities. Include a search box in the upper right corner of your homepage, and a link to a Search page from your interior pages. Freefind ( ) offers you a free and powerful search engine for your site.
· Set your search box to search your site, not to search the web.
· Create a custom error page that displays a simple site map with links to the main sections of your site. That way, you will not lose visitors that have followed a bad link to your site or who have misspelled your URL.

Tips on Layout and Content Presentation

· Save the top of your page for your most important content. Remember: good content must flow to the top.
· Lay out your page with tables, and set the width in percentage terms instead of a fixed number of pixels. That way, your page will always fit the screen, without the need to scroll horizontally.
· Optimize your page to be viewed best at 800x600 (the most popular resolution at the time of this writing).
· Use high contrast for the body of your page: black text on white background, or white text on black background work best.
· Don't use too many different fonts in one page. Also, avoid using small serif fonts (like Times Roman): they are difficult to read from a computer screen. Verdana is the most web-friendly font, since it is wide, clean and easy to read.
· Avoid long blocks of text. Use tools that facilitate scanability, like bullets, subtitles, highlighted keywords, hyperlinks, etc.
· Avoid amateurish features like: numeric page counters, wholesale use of exclamation points, all caps, center justified blocks of text, excessive animated gifs, busy backgrounds, etc.
· Don't use pop-up windows. They distract your visitors and are immediately dismissed as ads.
· Test your site so that it looks good in different browsers and resolutions.

Tips on Writing for the Web

· Write in layman's terms so that everybody can understand your content, unless you're running a technical site for technical people.
· Reading from a screen is painful: use 50% less words than you would use on print.
· If a page is too long, break it into several pages and link to them.
· Don't use font sizes smaller than 10pt. for the body of your page. Specify your fonts in percentage terms instead of pixels, to let users set their own size preferences using their browser's text view options.
· Use a spell checker. Spelling mistakes are embarrassing and hurt credibility.

Tips to Know Your Customers

· Ask for feedback: include a feedback form in your Contact Us page.
· Publish an ezine and include a subscription form in your homepage. Give your customers valuable information and encourage them to contact you.
· Include polls and other tools to gather market intelligence.

Tips on Linking

· Make your links descriptive. They should indicate what the user will be linking to, as opposed to just saying "click here".
· Don't underline anything that is not a link.
· Underline your links and use a consistent color for them across your site (preferably blue).
· Use a different color for visited links, so that your visitors know where they've been (preferably purple or a more subdued tone of the unvisited links color).
· When linking to a non-HTML file, such as Excel, Word or Acrobat, make it evident, by including a small icon next to the link.
· Don't link to "under construction" pages.
· Make sure that your links work and that you don't have broken links. There are free online tools that can help you with this.
· If you use graphic links, don't forget to use the ALT attribute. The ALT attribute should describe what are you linking to.

Tips on how to use graphics

· Optimize your graphics. Use only .gif and .jpg formats. Make your image files as small as possible while maintaining acceptable quality. Use a free online graphics optimization tool.
· Use thumbnails (miniature versions of a picture) and make them clickable to the actual size picture.
· Avoid graphics that look like ads. People ignore them.
· Use the ALT attribute on pictures, even the image is not a link. It helps users with disabilities and people who have turned off graphics.

Tips to optimize your site for the search engines:
· Create short, descriptive page titles, to entice search engine users to click on your links.
· Create a site map containing all your pages, and link to it directly from your homepage. Search engine robots will follow the link to your site map and will most likely add all your pages to the index.
· Decide what the two or three main keywords are for each page (the words you believe search engine users will type to find your page) and repeat them often in your page title, description meta tag and page body.
· Create a Links page and call it Resources. In it, place links to those sites that have agreed to place a reciprocal link to your page. The more inbound links you have from quality sites with a topic related to your site, the better your site will rank with the search engines.
· Use more text than graphics, and minimize the use of Flash and JavaScript. Search engines heavily favor text and will crawl and index your site faster.