|
摘要 Abstract
成功的电子商务网站与基于视觉和通信设计的网络运用网站需要加大对细节的关注。用户理解因为一个细小的问题而受到阻碍，这是极为不应该的。一个网站的运营和安排流程需要以设计为中心，在价值观的指导下做出最有效的网站运营模式,找到并解决各种注意事项,迭代测试和循环设计，这还远远不够。本文主要研究三大领域最佳实践的具体方面:网页设计体系结构或组织的细节,交互设计和安全问题的细节。 前言
不管你是否打算使用平面网站或交互式电子商务网站，你网站的整体外观和感觉的可用性将发挥主要作用。
网站是很重要的,人们可以快速、轻松地访问基本信息。设计应该以自然的方式呈现内容,有价值的利用色彩、布局和网站组织。
程序开发的最佳实践 一个有效的程序设计需要包括以下几个关键主题: 易于访问 以用户为中心的设计和可用性 信息架构和发现能力 优化搜索引擎(SEO) 导航设计 为用户设计 网络排版 错误管理 网站管理 易于访问
易于访问指导方针如下:
Successful e-commerce Web sites and Web-based applications with visual and communication design requires complete attention to detail. User understandings get damaged because of the smallest matters, an arranged process such as usage centered design guided by tough values is needed; to find and address all the assorted matters needing notice, iterative testing and cyclic redesign is insufficient. This paper surveys best practices in the detailed aspects of Web design in three broad areas: details of architecture or organization, details of interaction design and Security issues. Introduction
Irrespective of whether you are intend to use a flat 'brochure ware' website or an interactive e-commerce site, on the whole look and feel of your website will play a main role in its usability.
It is important that people to the site can quickly and easily access the essential information. The design should present the content in a spontaneous manner, making valuable use of colour, layout and site organisation. Best Practices in Web Development These key topics needed for an effective web design include: Ease of access User-centred design and usability Information architecture and find ability Search engine optimisation (SEO) Navigation Design Designing for the user Web typography Error Management Site Administration Ease of Access
The ease of access guidelines are the following:
1. Present equivalent alternative to aural and visual content. Content provide that, to the user when offered, basically conveys the same task or purpose as visual or auditory content. Equivalents text for visual and auditory content can be approachable to people showed in ways that are from several disability groups using technologies which are a kind of helpful.
2. Don't rely on color alone. Assure that text and artwork are intelligible when viewed without colour. In adverse, people who cannot disagree certain colors and users with devices that have non-color or non-visual displays will not experience the data. When highlight and background colors are too close to the same hue, they may not offer enough counterpoint when viewed using black and white displays or by people with different types of color shortages.
3. Use markup and style sheets and do so properly. Perverting markup for an introduction effect (e.g., using a table for layout or a header to change the font size) makes it hard for users with differentiated software to understand the establishment of the page.
4. Clarify natural language usage. Use markup that helps pronunciation or reading of brief or strange text. When content coders mark up natural language changes in a document, helpful technologies can mechanically change to the new language.
5. Create tables that transform gracefully. Assure that tables have requirement markup to be translated by approachable browsers and other user factors. Tables should only be used to mark up truly planar info, but not to present pages because that makes particular problems to users of cover readers.
6. Ensure user control of time-sensitive content change. Ensure that moving, flashing, scrolling, or auto-updating objectives or pages may be hesitated or blocked. People with cognitive or visual disabilities are unable to read moving text. Screen readers are unable to read moving text.
7. Design for device-independence. Use boasts that alter energizing of page elements via a kind of input devices.
8. Provide context and orientation information. Grouping components and providing context information about the kinships between elements is useful for all users. On the other hand, composite relationships between parts of a page may be hard for people with cognitive disablements and people with visual disabilities to translate.
9. Ensure that documents are clear and simple. Consistent page layout, recognizable artwork, and easy to understand language gain all users, but particularly people with cognitive disabilities and people whose first language differs from your own. User-centred design and usability
In usage-centered design, the idea is to get it essentially right by design right from the start. The advance to this Internet paradise was mapped out in a half century of the quality motion, which made out that you cannot test your way to quality. Testing comes too late and is essentially both incompetent and imperfect. You reduce developed defects far more efficiently with better manufacturing process up front than with better testing. You reduce usability defects in Web interfaces far more efficiently with better design up front than with testing and refinement later when the best you can do is find out where you went wrong.
That said, you should do serviceability testing anyway, because even with the best design process, you cannot maybe get everything right. There are just too many details to consider.
The twin pillars upon which usage-centered on approach is built are process and principles. First, the approach defines an orderly and efficient process by which the designer proceeds from problem to solution. Second, the process is guided by principles of what constitutes good design, design that is most likely to enable users to accomplish what they intend.
Traditional user-centered design for the Web is a bit like finding your way to a distant goal by starting in some focus and asking the people you meet along the way which way to turn and what road to take. The usage-centered design process is a map of how to get from here to there, and design precepts are the guideposts along the way. Just follow the map and read the guideposts, and you will have a good chance of getting where you are going more or less directly. Neither maps nor signs guarantee that you will not get lost or that you will reach your goal without any roundabout way or turning back, but, taken together, the process and the principles amend the odds. Information architecture and find ability
One expression of information architecture is particularly crucial for e-business: how the entire line of product oblations on a site is formed not only as presented to the customer but as integrated as a product power structure on the back end and in the rest of the business. Details of such establishment and even interactions between different structures can importantly affect serviceability and the likeliness of customer achiever. After infinite bedevilling experiences, I have resolved that many sites do little more than take the internal business concern or the structure of back-end databases cast it at the users. A product power structure that makes complete feel to the business or its database diligences can be express bunk to customers.
The most crucial thing about information architecture is to think like a customer: somebody who doesn't already know everything about the site. This is one of the reasons it's best to deal with content organization early in the process: you can think about content in the abstract, rather than thinking about the actual content documents you've spent the last month dealing with in reality. Search engine optimisation (SEO)
Your website is consistent and clear in its design, but is it visible to the internet at large? Good SEO practices are interlacing with web design. Practice optimization in addition to design and you'll make it easier for you or your customers' site to remain dominant in search engine results.
1.) Use title tags for all links. This betters the user's feel and makes it easier for Google as well.
2.) Use friendly URLs. The name of the URL in a website should always be related to the page it represents. This makes it more place able to visitors and easier to categorize in Google searches. If you have a page name that is several words, separate them with a dash or an underline.
3.) URL redirects. URLs without a “www” in the beginning should ALWAYS redirect to a “www” address. Not only is this the industry standard, but you risk missing half your inward links if you do not do this. Google will often read a site without the www as a different site than the one with the www. You can avoid this split with a redirect.#p#分页标题#e#
4.) Subject-wise, try and keep to one topic per page. This helps in defining a curious page title, description, and URL. You should adopt this when planning and carrying out headings, as well. The H1 tag should be used very meagerly; preferably only to mark the applicable topic. Use H2 and H3 tags for the sub-headings .
5.) /index pages aren't necessary (ditto for /home). For example: “www.mysite.com” should be your index, there is no need to redirect.
If you have an image or proclamation you need to put before the index, that can be achieved just as well with JavaScript, which has the effect of changing the interactivity of the site. Navigation Design
Navigation design is obvious: the chief organization of all expressions of site navigation. This is an area of web design and development where it's very easy to go extremely and terribly wrong like most best practice conceptions, deflecting the pitfalls is 90% of the combat.
“Scent” refers to information design which provides “clues” to help show the user where they are, where they've been, and how to get where they need to go. Planning your site should include careful planning to think about these processes.
“Noise” is a term I'm using to describe the opposite of “scent.” Noisy elements of design are those elements which take away or trouble from a user's needs. They may bring forth confusion or prevent users from following the path of action they need.
Always ensure that the navigation buttons are placed in the same place on all of the pages on the site. You should remember that every vivid you add to your website for navigational purposes increases the download time for the user. So keep your navigation buttons simple and recycle the same ones all over your site. It is now banal to have the company logo as a link back to the home page. Finding information
The key to the achievement of your website will be mainly based upon how effortless it is for users to find the data that they require. You should conceive admitting a site map and a search ability to help in the position of information.
Once a customer is browsing the site, you should use hypertext to provide appropriate linking to linked ideas or message. Try to predict what information users are likely to want next, but at the same time leave them free to make their own navigational choices.
If it's a large website consider the use of a breadcrumb trail to show users where they are within the website. The 'three click rule'
Bear in mind the 'three click rule' which means that users starting at your home page should be able to get to the information they require in three mouse clicks. While this is not always accomplishable, by taking it into report at the site design stage you are more likely to get close to it. Designing for the user
The key to designing a successful website is realizing the needs of your viewers and pondering these in your design. User interaction
Consider how the user may want to cooperate with the webpage, perhaps by selecting products or services that you offer or moving around the site using hyperlinks. Use linked text and short descriptions, and organise links into related topic groups.
If the page contains large amounts of text, keep paragraphs short to aid online reading. Ensure that the text is readable by providing sufficient disparity between the background and foreground colours. Ranking the information
Rank the information you want to display in terms of how important it is. Position the most important in the middle of the page, next important across the top, with the least important or static information in the left margin. Hierarchy of information
Don't make users navigate through too many layers of the site to find the information they want.
Provide outstanding navigation attentions so the user can quickly find the information they need. A standard navigation bar that is in the same place on every page enables the user to move quickly during the site. Exploit hypertext
Use hypertext to provide links that will enable the user to move easily around the site. They should also be able to return easily to the higher sections of the site.
A hypertext table of contents allows the user to pick the exact topic that they want to view. Amount of content
Consider how much content should be contained on a webpage. Avoid putting too much information on a page, as this may make it more difficult for the user to locate the information they need. Use links as a method of dividing content between pages. Web typography
Designing for the web restricts your font choices. If you specify a font that a user does not have, their browser will substitute a default font, changing the look of the page. Choice of fonts
The webpage will look clearer if you choose fewer fonts and type sizes.
Decide on a font for each different level of topic importance. For example, you should have a different font for page headings, section headings and body text. Effective use of different fonts for different levels of importance will guide the user through the content more efficiently.
Choose different size fonts of the same type throughout the site. Reliability will help you to develop a strong visual individuality for your site. Availability of fonts
The user's browser and operating system determine how a font will be displayed, so you can't be extremely sure how your page will look. In addition, if the font is not available, then the user's system will default to a criterion font.
Remember to use commonly available fonts and test your web pages on multiple platforms to see what effect these have on the overall appearance. Ensure the page is legible
The size and face of the type used on the page determines the readability of the text. Remember that it's harder to read on screen than from a paper copy, so keep fonts big enough to be well read online.
To make things easier for the user you can add more white space around the blocks of text and between lines, both of which will help with lucidity.
Make sure that you have enough contrast between your text colour and the background colour. Dark backgrounds frequently make the text difficult to read, so opt where possible for darker text on a lighter background. Error Management
The potential for errors in any miscellaneous assignment are endless, so I'm going to contain myself to a very simple example: a standard contact form. Possibly the most standard outlook for many sites is a means for the visitant to get through the site. Though furnishing a phone number and address is normally inevitable, it may not be the favoured means of communication for either party. Since email addresses are essentially a big, open allurement to spam, contact forms are left as the best method of determining a way for visitors to connect you.
When making a programming example of this form, all that's loosely dealt is the rudiments: how to gather the data in a form and send it to an end user. This is the core utility of a contact form, so it's reasonable that it's the first thing to be compensated.
Depending on how it's written, the program accounted above will do one of two things on being submitted: display a blank screen to the user, or show itself again, with the information presented removed from the fields. Neither of these options are particularly delectable by themselves, but they each serve a aim in providing best practice reactions to the users.
First, let's assume that the user is making a lot of errors. They're putting a phone number in the name field, gave a web address for an email, and left out their message entirely.
Without any data checking, this message may simply be sent off: the site owner gets useless information, and the visitor wonders why that criticized site owner never answers his email.
Apparently, doing a little data ensuring is good for more than just shelter: it helps make sure that you'll really get the data you needful from the form. Now, having assured this information, we want to let the user know that something just wasn't working quite right. But this is a necessity thing to do right. I'm sure we've all been to forms where one of the following happened:
The error message didn't tell you what your errors were, and requires you to use the Back button to return to the form.
The error message doesn't tell you the errors, and deleted all the work you did with the form.
The error message tells you what errors you made, but doesn't tell you that it also blanked the password field (which was fine.)
The error message informs you of an error which you wouldn't have made had the information been available before you used the form.#p#分页标题#e# Ideally, if an error is made with the form, the response will: Identify which fields included errors. Return the user to the form itself. Retain any information the user supplied in the form.
Preventing errors before they are made is possibly one of the most important aspects of error management!
“Error management” is actually a bit of a misnomer, when you get right down to it. Above, I cited an assumption in which a form is presented resulting in either a blank page or itself: while having the form re-appear following a user error is an absolute must, the blank page introduces an equally valuable scenario: the success response.
After all, “error messages” are merely a subset of all the responses a form might make having a useful success message is equally important. Site Administration
It may seem like long-term administration is a totally unlike issue from best practices in web development. After all, administration is pretty far removed from doing all the design, configuration, and exploitation work you've worked hard on!
However, you also need to admit that the huge bulk of the lifetime of most projects is the time after you've finished. Whether you're going to be maintaining the site yourself, passing it over to an assistant, or passing it off to the client, there are a lot of things you can do to help protect the site.
For yourself, you can demonstrate a style guide for the site: a list of pre-established styles and elements, what they look like, how they're used, etc. For myself, I use a custom piece of database-driven software which ties a database of elements and script shards for a given site to the guides for that site. This allows me (or anybody else) to readily browse either for the element I want or the appearance I want and grab the template code I need.
This kind of a tool helps you remember what you've done, even if you're looking at the site a year down the road and it can provide a guide for your clients or assistants to know what is expected for a given site. Security Issues Validation of input and output data
All data used by the website (from users, other servers, other websites and internal systems) must be validated for type, length and syntax and business. All data written as output needs to be safe to view in a browser, email client or other software and the integrity of any data that is returned must be checked. Utilising Asynchronous JavaScript and XML (AJAX) increase complexity and the possible attack vectors. Direct data access (and theft)
If data exists, it can potentially be viewed or elicited. Avoid storing data that you do not need on the website and its database(s) - for example some data relating to payment cards should never be stored.
Poorly developed systems may allow access to data through SQL injection compromises, insufficient input and output data validation or poor system security. Data poisoning
If user's can amend or delete data unsuitably and this is then used to update your internal systems, business information is being lost. This can be hard to detect and it is important that the business rules are examined and imposed to validate data changes to ensure poisoning is not occurring. If poisoning is not detected until well after it has occurred, it may be impossible to recover the original data. Malicious file execution
Uploaded files or other data feeds may not be what they seem. Never allow user-supplied input to be used in any file name or path (e.g. URLs or file system references). Uploaded files may also contain a malicious payload so should not be stored in web accessible locations. Authentication and session management
Websites rely on identifying users to provide access permissions to data and functions. If authentication (verification of identity, registration and logging in), authorisation (granting access rights) and session management (keeping track of the identity of a logged in user while they browse a website) can be circumvented or altered, a user could access resources they are not allowed to. Beware especially of how password reminders, remember-me, change password, log out and updating account details are handled, how session tokens are used and always have login forms on dedicated and encrypted (SSL) pages. System architecture and configuration
The information system architecture model should address the sensitivity of data identified during the requirements and specification phase of a website project. This may entail having separate web, application and database servers or involve bunching, load balancing or virtualisation. Additional security issues can be created through the way the live environment is assembled. Ample and safe logging, monitoring and alerting facilities need to be built in to allow inspect. Phishing
Phishing, where users are conned into believing some other entity is or belongs to your own organisation (email messages and websites are the most common combination), is best tackled through user education but the way the website is designed, its architecture and how it communicates with users can reduce the risk. Denial of service
Whilst malicious users might try to swamp the web server with a vast number of requests or actions that degrade its performance (filling up logs, uploading large files, undertaking tasks that require a lot of memory repeatedly) denial of service attacks include locking out valid user accounts or be caused by coding problems (e.g. memory leaks, resources not being released). System information leakage
Web servers, errors, staff, partner organisations, search engines and rubbish can all be the source of important information about your website - its technologies, business logic and security methods. An attacker can use such information to their advantage so it is important to avoid system information leakage as far as possible. Error handling Exceptions such as user data validation messages, missing pages and server errors should be handled by the code so that a custom page is displayed that does not provide any system information to the user. Logging and alerting of unusual conditions should be enabled and these should allow subsequent audit. |
 |
|||
| 网站地图 |
