CS 3382 Web Usability Design and Engineering

Week 13 The Meaning of Colours

2008-12-03T20:30:00.000-08:00

Since I'm interested of colors in web design, I've found an article, which is about the meaning of colors. Here is the link:
http://www.sibagraphics.com/colour.php

As the author mentioned, many reactions to colour are instinctual, universal and cross cultural boundaries. There were some statistics, according to a 1997 survey by Cooper Marketing Group, Oak Park, IL, power is represented by the color scarlet red for 25% of respondents, black for 17% and bright violet blue for 13%. More than 55% of those surveyed chose one of these three colors out of 100 colors. Fragility was most represented by pale pink (27%), white (9%), and pale lavender (9%).

The author also pointed out that adding textures too can alter colours. For example, a roughly textured surface makes a colour seem darker, while a smooth surface lightens the same colour. Besides, different colors have different meanings, depending on culture or countries. The following are some examples:

Red

European : Danger, love (hearts), excitement (for sale signs)
China : Traditional bridal colour, good luck, celebration, happiness, joy, vitality, long life, summoning, the direction South. Chinese saying goes "when something is so red, it is purple" - red purple brings luck and fame.

Orange

European : Autumn, creativity, harvest
Netherlands : Favourite colour (House of Orange)
Ireland : Protestants
USA : Halloween, cheap goods

In my opinion, we should choose colors carefully in our web design, even the web is for international use. When we use colors in text, make sure the text are readable easily and pleasing to the eyes.

Week 12 Guidelines for Designing a Good Web Site for ESL Students

2008-11-26T23:15:00.001-08:00

This week, I've surfed the web and found an article about web design guidelines. Here is the link: http://iteslj.org/Articles/Kelly-Guidelines.html

The author points out that one of those guidelines is to make your site friendly and fun to use. Its purpose is to make the site as attractive and fun as you can without making it slow. In this guideline, we need to consider two things. One is to make your pages as visually pleasing as you can without slowing them too much. How to do this? We always need to weigh "good-looking" vs. "fast-loading". We also need to remember to view the pages without images, to see how pleasing your page looks to people who don't download images and a visually pleasing text only page is also needed. The other thing we need to consider is don't annoy your visitors. Remember to ensure the visitors don't need to wait a long time for pages to download and display. Also we need to remember people don't like crowded pages, irritating color combinations, blinking text, animated images, excessive use of images and too much advertising.

Another guideline is to remember that what you think is true may not be true. Something we need to pay attention is:

don't assume people will enter your site through the main page.
even if your server is fast, not everyone will get your pages quickly.
don't assume all visitors using new browsers can view pages with Java and JavaScript. Some have either or both disabled in their preference settings by choice.

To conclude, I think we always need to think from the visitor's point of view. I agreed with the author that one important thing is to ensure the web pages aren't irritating. We should learn those irritating things from other websites when we find it, so we can avoid them in our pages.

Week 11 Web 2.0 – Just Hype or a Real Opportunity for the Public Sector?

2008-11-19T20:18:00.000-08:00

For the topic of Web 2.0, I've found an article, which talks about if Web 2.0 is just a hype or a real opportunity for the public sector. The link is:
http://www.eduserv.org.uk/~/media/pressrel/may08/Web%202%200%20FINAL%20pdf.ashx

As the author mentioned in the article, Web 2.0 provides web-based services and hosted communities. So the platforms are provided, we can share on anything and anyone, with not only our friends but with hundreds of millions of other web usersand organisations globally. It also provides the opportunities for some companies to actively taking part in these conversations. Some have even created their own online communities where their customers can interact with one another and the company itself.

Besides, the author also points out that the principles behind Web 2.0 are the same as those found in most public sector organisations' mission statements. So, in Web 2.0, public sector organisations can turn into true communities of interest and align their voice with that of the public. By taking part in online conversations, these organizations can build a better picture of how they're perceived by their customers, correct misconceptions and ultimately to improve customer satisfaction through enhanced communications and service provision. And the public sector can make use of technologies to let more customers participate and to meet the needs of different communities they serve.

In my opinion, Web 2.0 seems to be an online trend when the maturity of the Internet grows. It surely can provide more services that reach more people internationally. So the companies should make good use of these services, so they can get more benefits from it.

Week 10 Key Differences between Yahoo Search Marketing and Google AdWords

2008-11-06T17:04:00.000-08:00

For surfing the materials of web marketing, I've found an article, which is about key differences between Yahoo Search Marketing and Google AdWords. Here is the link:
http://searchengineland.com/key-differences-between-yahoo-search-marketing-google-adwords-11112.php

The author of the article analyzed that there're some key differences between Yahoo Search Marketing and Google AdWords. First, both of them are different on usability issues. It's easier to navigate in Google's interface than in Yahoo's interface, since Yahoo's interface needs more clicking and needs more time to complete account related tasks. For example, advertisers are required to go to each advertisements group to make bid changes, instead of setting unique bids for multiple advertisements groups on one screen. Also, Yahoo takes slightly more time to load then Google, advertisers need to wait when they change pages frequently.

Second, both engines are different on editorial review. In fact, both of them have manual and automatic review processes. Some terms are needed to review manually while some terms can be automatically reviewed. In Yahoo!, depending on search volume and term sensitivity, so terms are manually reviewed. That means, terms are manually reviewed when they are high in search volume and have high impact. And terms are automatically reviewed when they are low in search volume and not very sensitive. Also, there is a key difference that on Google, advertisements go up on Google.com until they're manually reviewed and they're put on the entire Google network. On Yahoo!, advertisements go up on the entire network first and then are manually reviewed.

Third, they also have difference on trademark issues. In Google, in the US, advertisers can bid on trademarked keywords, but they're restricted from using trademarked terms in advertisement text. Whereas Yahoo!, advertisers are not allowed to bid on other companies' URLs or company names, regardless of trademark. However, resellers (affiliates) and non competitive information sites have some exceptions. For resellers, advertisers must be the ones who sell or facilitate the sale of trademarked product or service. For information sites, advertisers must provide substantial information about the trademark owner or its products and services, and can't sell or promote competitors' products or services. (i.e. consumer reports).

In my opinion, these engines play important roles for the marketing on the Internet. The companies and the web owners can choose and consider what engine they will use for accomplishing the purpose of marketing.

Week 8 Usability Testing Materials

2008-10-30T01:39:00.000-07:00

This week, I'm going to introduce you about the usability testing materials. Here is the link of the article:
http://www.infodesign.com.au/usabilityresources/evaluation/usabilitytestingmaterials.asp

As the author mentioned, there are 7-8 items we need to prepare for usability testing. The first one is the test schedule. We need to prepare and specify it, so everyone can follow the schedule and avoid someone will make hasty changes to schedules if no one knows. In the schedule, the author suggested that we can specify the date and time of each test session, together with the participant name. And we should make sure the schedule can be accessed and known to the relevant parties.

Also, we need to prepare the observer guidelines, since it's important that the observers are informed about appropriate behaviour. Script is needed to prepare too, as we can read a formal script to each participant in order to ensure that all participants receive the same information and avoid giving too much or too little information when we don't have one. Consent form is also needed to prepare for obtaining written consent from the participant, if we want the taping. This consent form should state exactly what we are taping and what the tape will be used for. The other materials we need is task cards. The written description of the task in the card allows the participants to refer back to the card when they are doing the task. If we want to randomise the order of task presentation, we should put the cards in the appropriate sequence before the participant arrives in order to give impression that the moderator is well-prepared. Moreover, there are the logging sheets needed for dropping down notes about what the participant does during the test. The logging sheets can be in free form or detailed ones. The author suggests to use mixed form - free-form sheets, with check-boxes at the bottom to note particular events. Questionnaire is optional to gather demographic information and to obtain subjective feedback and comments.

In my opinion, those materials can help us to prepare well for usability testing and it's easier to make the testing process go smoothly. It's important to be well prepared, so it helps to get actual data from participants(users).

Week 7 Essential Components of Web Accessibility

2008-10-23T01:24:00.000-07:00

Since we learned and studied the accessibility parts this week, I chose an article, which introduces the essential components of web accessibility. Here is the link: http://www.w3.org/WAI/intro/components.php

So, the first question we may ask is, "what are the essential components of web accessibility?" As the author mentioned, these components include:

content - the information in a Web page or Web application, including: 1) natural information such as text, images, and sounds, and 2) code or markup that defines structure, presentation, etc.

Web browsers, media players, and other "user agents"

assistive technology, in some cases - screen readers, alternative keyboards, switches, scanning software, etc.

users' knowledge, experiences, and in some cases, adaptive strategies using the Web

developers - designers, coders, authors, etc., including developers with disabilities and users who contribute content

authoring tools - software that creates Web sites

evaluation tools - Web accessibility evaluation tools, HTML validators, CSS validators, etc.

The author also indicates that these components work together for achieving accessibility. The components are actually related. Below is a figure to show the relationship between them.

Web developers usually use authoring tools and evaluation tools to create Web content.
People ("users") use Web browsers, media players, assistive technologies, or other "user agents" to get and interact with the content.

And interdependencies between components exist, e.g. for alternative text on images:

Technical specifications address alternative text (for example, HTML defines the alternative text attribute (alt) of the image element (img))

WAI guidelines - WCAG(Web Content Accessibility Guidelines), ATAG(Authoring Tool Accessibility Guidelines), and UAAG(User Agent Accessibility Guidelines), these guidelines define how to implement alternative text for accessibility in the different components

Developers provide the appropriate alternative text wording

Authoring tools enable, facilitate, and promote providing alternative text in a Web page

Evaluation tools are used to help check that alternative text exists

User agents provide human and machine interface to the alternative text

Assistive technologies provide human interface to the alternative text in various modalities

Users know how to get the alternative text from their user agent and/or assistive technology as needed

After reading this article, I think those 7 essential components are really important and needed. For accessibility, the website should be designed to be usable to all people, even the disabilities. Therefore, the website needs to be carefully designed, developed and edited. It's the developers' job to design and maintain the website. The users are also involved, if those website design can base on users' habits and needs, etc, so the website can satisfy them. The content is presented to user and it is the information which users are looking for, so it is needed to be well organized and carefully designed. To ensure the design's quality, we need the technologies and tools (Authoring tools, Evaluation tools and Assistive technologies). And developers can follow the guidelines to check if the website design is considered to be accessible. There are also web browsers, media needed to support the design.

Week 6 SEO is simply following good web development practices

2008-10-15T20:55:00.000-07:00

I found an article for SEO guidelines. Here is the link:
http://csarven.ca/internal-seo-guidelines

For SEO, the author states that Meta keywords are not necessary, because the search engine indexers would determine the nature and the relevancy of the document and can't rely on what the document claims it to be for the purposes of accuracy. And the results gained from Meta keywords are negligible nowadays. In my opinion, although the Meta keywords are not important as the author said, there is no harm, we can still do it and don't need to put too much time for doing it. And there is another resource that provides that search engine like Yahoo still gives it importance.

On the other hand, choosing keywords is important. Just concentrating towards two or three keyword combinations which are precise and simple is enough. Since an increase in keyword density may not be a good indicator for the relevancy of a document and therefore it does not contribute to better rankings. That's really what I think. Users input words related to what they need to search through search engine. So in early stage of website development, we should analyze and study what they are always looking for for specific content, and we can then choose the keywords. Those keywords surely assist human searches.

As the author said, the search indexer starts to parse a page from the top and it is the search engine to establish the relevancy of the page as fast as possible. So the relevant and important content should be put higher in hierarchy in the HTML source order. This contributes to have higher rankings.

To conclude, the relevant content with precise and appropriate keywords can contribute not only to SEO, but also the usability. This help visitors find relevant information after they search for keywords through search engine and they can find the website's information is usable to them. The higher and more relevant information are put in website's html source, the easier the search engine can find our website.

Week 5 Popular Fonts

2008-10-08T12:32:00.000-07:00

This week, I found an article which is about fonts. The link is
http://www.webaim.org/techniques/fonts/

In the article, the author points out that Verdana is one of the most popular fonts on the web. Because it has a simple, straightforward design, and the characters or glyphs are not easily confused for the visitors. For example, the upper-case "I" and the lower-case "L" have unique shapes, unlike Arial, in which the two glyphs may be easily confused. See it below:

Besides, for using Verdana, there is the spacing between letters. This make sure the readability when they are at small sizes.

Another popular font is Trebuchet MS. It has its own style and artistic feel. It is also readable, but some letters such as the ampersand (&), which may decrease readability. You can see this example below:

I think this type of font is really attactive, because its artistic style is different from other fonts. If we use them to be the heading in the website, it surely can draw the attention of visitor because of its appearance.

Georgia is also common on the web. It is a serif font, more along the lines of Times New Roman. For the size, it is wider than similar fonts meant for print design. Since Georgia is not the default text of the browser, the users can see and find that some styles has been applied to the font.

In my opinion, we should choose the fonts carefully for the web design. All we need to remember is that they should be readable. Also, the fonts we choose can attact visitor's attention and make the website's look different from the others.

Week 4 The Business Value of Web Standards

2008-10-02T02:53:00.000-07:00

This time, I read an article, which indicates that the web standards can bring us the business value. The link is:
http://www.adaptivepath.com/ideas/essays/archives/000266.php

First, web standard can help us to have a speed development. By using web standards, we can validate our pages through validation service. This shows us exactly where our errors are, reduces the time developers spend on quality assurance, and gives our site incredible consistency between browsers. In my opinion, it's true that it benefits to the site developer. Because this saves time for finding errors and lessens our development work, such as Quality Assurance. The speed development is important, because it ensures that the development is on schedule, provides cost-saving and saves time.

Second, using web standards simplify maintenance. The standards help us keeping visual design separate from content, but logically linked to each page. This clean separation makes it much easier for us to develop and maintain our pages, primarily because the division corresponds to most teams’ distinctions between design and editorial work. That makes the maintenance in the future easier. Since web site maintenance cannot be avoided, it's better that the clean separation is implemented between visual design and content for later improvement or changing of the website.

To conclude, by participating in standards development, it can bring business values to our site. Although we should spend lots of effort to achieve those web standards, the important thing is that the effort is really worth it.

Week 3 An Introduction to Information Architecture

2008-09-25T03:43:00.000-07:00

The article I introduced is about information architecture. The link of this article is:

http://www.sitepoint.com/article/information-architecture/

In fact, information architecture helps us take a look at the big picture -- the primary goal of your Website -- and achieve that goal by effectively organizing your site. So, how to organize the site? For organizing the information, the author points out that it will depend on variables such as your business goals, the size of your Website, its future growth and expansion plans, the audience(s) you target, and more. I totally agreed with the author's point. Depend on business goal, you know what the users search first, and decide the information at the top levels is related to what and the sub levels. So we should organize the content for different business goals. For the size of the website, if the site is big enough, you may have more categories to organize the website's content. The future growth and expansion plans also affect the organizing of the information, because we must plan for the change such as adding information under the information at the related top level, so those top levels may be provided. Also, the users that we target affect too. We should think from user's point of view, what they will search for in our website.

For the information provided in the website, the author points out that if the website's target user is end user, we should avoid using engineering or marketing jargon. It's possible that the target user don't understand the information after reading parts of it and so they can't find out what they need in the website.

And how to help the users find their way easily in our website? The answer is consistent and persistent navigation, along with helpful hints like creating homepage links through the logo. Keeping the navigation consistent and persistent let the users make use of it and don't feel confused easily. And the hints really help user in visual way.

Moreover, search system should be planned well in information architecture, because a vocabulary of kewords for the site is served as the dictionary for the search. So the keywords searched by user will be checked against in the keywords in the dictionary and the result will display. From my point of view, if users type a similar word(not correct in spelling), the search should let them get away with all kinds of similar spelling. So the users can get the exact match in search result. That mean it helps the users find out what they need.

To conclude, I learned how to organize a site. It indicates the reason that we need those ways, and then give some ways and examples to us for reference. After reading the article, I think information architecture is the science because it needs us to follow some ways and steps to organize the site. On the other hand, I think information architecture is the art because the organized work can come from some creative ideas, for example, we may produce some information architecture deliverables like storyboards and paper prototype. Hence, information architecture is such a big topic that interest me most.

Week 2 Using Scenarios and Personas to Understand Your Customers' Needs

2008-09-18T01:59:00.000-07:00

Hi, everyone.Today, I want to introduce you about an article, called "Using Scenarios and Personas to Understand Your Customers' Needs".

The link is http://webmasterresources.suite101.com/article.cfm/user_experience_design

In the article, it points out that defining personas and creating scenarios can help the website team map the customer's needs to the website and the business requirements. So, the whole website design produced can satisfy the customers' needs.

When writing personas, one of the important things is to define one for each target group of audience. How to do it? Just concentrate on the primary target users we defined, then we can minimize the number of personas. For each persona, it can include:

Context - what the user wants to do in the site

Outcome - what the user wants to achieve in the site

Assumptions - what the user expects to do / have in the site

In my opinion, when there are so many personas to represent the users, it will only complicate the website development. Concentrating on the primary target users is a good idea to have a user-centered design, since those personas are representative enough.

When creating scenarios, we should focus on the activities the users might do first. Then, think about where the user might interact with our business, what services we can provide to them and what information they need to have. I think these processes are helpful, because the scenarios created can describe the user's interaction with the site if we follow those process to do. Hence, it helps to define the design's direction.

All in all, personas and scenarios are useful techniques to help us to understand our target users. They can provide us a clear picture of design direction and lead us to build a successful website.

Week 1 Usability and the Web: An Overview

2008-09-12T08:18:00.000-07:00

Since our course is about the Web Usability Design, I chose an article, called “Usability and the Web: An Overview” and share it with you. Here is the link:

http://epe.lac-bac.gc.ca/100/202/301/netnotes/netnotes-h/notes61.htm

The first thing you may ask is that, “what is usability?”. It means the site is both useful and usable for the intended audience. Hence, in the audience’s point of view, a usable web interface should be accessible, appealing, consistent, clear, simple, navigable and forgiving. Also, the web site is useful, e.g. the users are able to find the information they need in informational sites. Then, the remaining question is, how to define the intended audience, i.e. target users?

It’s easy to define a web site target audience. For instance, a software company target audience is developers. However, we still don’t know something about user needs, characteristics and abilities. The article provides that user survey is the most common way to use for audience definition. The survey may collect any or all of the following information:

user profile (demographic information, job or recreational preferences),
surfing profile (how do they use the Web),
site usage (likes, dislikes, task requirements), and
level of technology (hardware, browser type, connection speed).

From the survey, we know the needs of them and these help us to determine how to structure our content, message, and design. But it may not result in a representative sample, may be those dissatisfied with current site. Then the article also provides other sources which can be supplemented with the survey. The informal way is to use “quick and dirty” tests to provide some fast results, we can find the acquaintances or colleagues. In informal way, the following sources may be used:

customer lists (including marketing mailing lists or records of sales),
related organizations or associations,
e-mail discussion lists or newsgroups,
conferences and events,
temp agencies or focus group companies.

From this article, I learned that there is a close relationship between the usability and the web design. Since it’s the user to come to our site, it’s important to know their needs first and then we can have our design. So, it's useful that this article tells us how to define these target audience and find their needs.