INFO 240 Module 8 Design Issues

consistency and uniformity

All users benefit from consistency in design and layout. On this course website, I make an effort to keep everything uniform for each unit. It makes it easier. You don't have to think. You should consider this when designing your own web pages. You should maintain consistency in colors and other design elements. The navigation should be consistent on each page. If you have a search form on your website, it should appear in the same location on each page. You should look at other websites and notice common practices. For example, where do you expect to find a search form on a website? It is very often in the upper right hand corner. What do you expect will happen if you click the logo or banner on a website? It will take you to the website's home page. Noticing these common practices and implementing them on your own website will give users a sense of familiarity, even if they have never visited your website previously.

font stacks

Because of the uncertainty about whether a user will have your particular font choice installed on their computer, you should use a "font stack" that gives a list of alternative fonts. For example: font-family: "Lucida Grande", Tahoma, Arial, Verdana, sans-serif; Notice that font names with more than one word should be enclosed in quotes. This font stack tells the browser that if the user does not have Lucida Grande installed on their computer, it should try Tahoma, then Arial, then Verdana. And if none of those are installed, it will use the default sans-serif font. In addition to the differences in available fonts on Windows and Mac, there are also differences in the way fonts are displayed in these operating systems. You will never be able to get everything to look exactly the same in every operating system and browser. However, this emphasizes the need to test in different computing environments to make sure that your web pages look professional and appropriate in each.

Google Fonts & @font-face

Fonts have caused headaches for web designers for years, but great strides are being made in this area. One example is Google Fonts [24] which allows designers to use an impressive collection of attractive fonts that will work without requiring that the font be installed on the user's computer. The @font-face directive also offers a solution to this problem...sort of. The idea is that you can upload font files to your server and use them in your pages without requiring that it be installed on the user's computer. However, with this solution there are also issues involving font licensing, browser compatibility, and font file formats. Feel free to experiment with these options mentioned or just keep it simple with an old-fashioned stack of web-safe fonts.

CSS Font Stack

a handy website for getting font stacks to use in your CSS.

Text Color Choices

The readability of your text is highly dependent on the contrast between the background color and the color of your text. You can never go wrong with black text on a white background. You should test your colors using a tool such as the Color Contrast Checker [26] from WebAIM. Appropriate color contrast is especially important to users with color blindness. This is a disability that is often forgotten about in discussions of accessibility. It is usually easier for all users to read a dark color on a light background than vice versa. However, circumstances may vary so it is always best to test your color combination using an online tool and through user feedback.

cultural issues

The visitors to your website may be from any location in the world and of any background. It's important to consider this when creating your website and content. They may be anywhere in the world - any native language - any culture. For the most part, avoid puns and metaphors. These might not translate well. Beware of offending due to cultural misunderstandings. Avoid big words or complicated wordings (The goal is communication -- not impressing someone) Use website analytic software [28] so you have statistics about your users' locations in the world. Below you will find a link to a presentation from the W3C that offers a good overview of some of the areas you should consider when designing websites. This has a lot of information and I don't expect you to absorb all of it. I just want you aware of this and thinking about it. We have to consider things like cultural differences in customs, symbolism, meanings, etc. when designing websites. Practical & Cultural Issues in Web Design

information architecture

Think about the ways that you have available for finding information on this course website. You have direct links to particular lessons and pages. You also have a search feature that allows you to enter your own search terms. If you need to find a blog post from several units ago and you just remember a few keywords, the search function may help you find this information. Additionally, you have several "jumping-off points" available to you. For example, you can click on a user's name to go to their profile. And then you could follow the link to view their blog posts. On other websites, you might have tag clouds available to you. Especially when you have a website with a lot of content, it is best to provide your users with many options for finding what they need. Not only do certain situations determine the appropriate method for finding information, there are also different types of information seekers. An analytical searcher is probably coming to your website with a specific purpose. They know what they want and they would like to go directly to it as quickly as possible. On the other hand, a searcher using a browsing method may want to explore and just see what they can find. Tag clouds and other jumping-off points are ideal for these types of Information architecture (IA) focuses on organizing, structuring, and labeling content in an effective and sustainable way. The goal is to help users find information and complete tasks. To do this, you need to understand how the pieces fit together to create the larger picture, how items relate to each other within the system.

search engine optimization

SEO the process of improving your search engine ranking for certain keywords. There are two components of SEO: on-site and off-site optimization.

Styling & Arrangement

Spacing Text Color Choices Arrangement

font choice

Did you know that the user has to have a particular font installed on their computer in order for it to display on your web page? This fact greatly limits the number of web-safe fonts available to you. The following table lists some fonts that are generally considered to be safe for Windows and Mac users. Windows Mac Sans-Serif W Arial Arial Black Impact Lucida Sans Unicode Tahoma Trebuchet MS Verdana MS Sans Serif M Arial Arial Black Helvetica Gadget Lucida Grande Geneva Trebuchet MS Verdana Serif W Georgia Palatino Linotype Book Antiqua Times New Roman MS Serif M Georgia Palatino Times New Roman Times New York Cursive W&M Comic Sans MS Monospace W Courier New Lucida Console M Courier New Monaco

copyright

A work becomes copyrighted the moment it is fixed in a "tangible medium." In other words, the moment someone publishes an original blog post, takes a picture, or records a song, it is immediately copyrighted. No filing or actions are required through the Copyright Office in order for a copyright to be issued. It is not legal to use any image you find on the Internet without permission. Everything is copyrighted. This should definitely be taken into serious consideration when publishing content on a public website. Images may be purchased from stock photo repositories such as iStockPhoto.com [2]. There are also websites that offer images that are free to use. Some content is licensed under a Creative Commons License [3] and may be used by others without permission. However, these licenses may prohibit certain uses, such as commercial use.

writing for the web

In some ways, good writing on the web is very similar to good writing in any other format. Clarity, conciseness, coherency, and consistency are several words that start with a 'c' and also describe good writing. These tried and true methods translate well to online environments. However, we know from research and our own experiences that reading on the web can be quite different from reading printed material. Users will read very little of the text available to them Users will only read about 20% of the text on a page on average (Nielsen, 2008 [27]). I wonder how many students have read this far into the lesson? People scan pages and skip around rather than reading everything in order. Chunk text into manageable portions. Use short sentences. Avoid "walls of text." Use headings and subheadings. Use lists and tables to present information. Highlight and bold important information. Use powerful images/graphics to convey important messages and draw the eyes. Use bold colors sparingly to draw eyes to important information and calls to action. Write clearly and concisely. Include the most important concepts FIRST and don't make them hunt. Web users prefer informal communication Try to be personable, while also maintaining professionalism. Use conversational language. Include information about yourself on the website. Don't try to impress - try to relate. Web users don't trust you The web is full of pranksters, scoundrels, and cheats (users are hovered over the back button waiting for a reason to leave). Don't use marketing mumbo jumbo. Don't make outrageous claims. Cite your sources when it makes sense. Don't make spelling or grammatical mistakes. Watch for anything that could undermine credibility.

Accessibility, Readability, & Professionalism

Of course, it is also possible to create image graphics to utilize fonts that may not be installed on the user's computer. However, this brings up accessibility and search engine optimization problems. If images are used for text, it should be done sparingly and the alt attribute should be used to provide a text equivalent. Otherwise, the text will not be communicated to users with visual impairments and search engines. You should consider readability when selecting fonts. It is tempting to experiment with all kinds of different fonts, but you usually can't go wrong with something basic like Arial or Times New Roman. Traditionally, it is believed that serif fonts, such as Times New Roman, are easier to read for paragraphs of text. However, this is not necessarily true on computer screens because serif fonts do not always display properly at smaller sizes. Regardless of which type of font you decide to use, high readability should be your first priority. You should be consistent with font choices throughout your website. For example, if you use Times New Roman for the text in the main content area on one page, it makes sense to do the same on all other pages. And you should limit the number of fonts utilized for aesthetic purposes. If you use several different fonts on the same page, it may look unfocused and unprofessional. It is a good idea to take a look at some popular websites and notice their font choices. Find a website with a font that you like and take a look at their CSS code (CSS->VIEW CSS in Web Developer toolbar). As an example, here's Facebook's font stack: font-family:"lucida grande",tahoma,verdana,arial,sans-serif; Google, as usual, keeps it simple: font-family:arial,sans-serif

Off-site SEO

Off-site optimization primarily deals with generating links to your website. Google gives a huge weight to the number and quality of links that direct to your web page. Additionally, the keywords contained within the link can be valuable as well. It used to be the case that if you typed "click here" into Google, the first result was for Adobe Reader. Now, why did Adobe Reader's web page rank so highly for this search query? It didn't say "click here" anywhere on the page! The answer is simple: there were many, many, many links all over the web that looked like this: Click here [31] to download Adobe Reader. It is assumed that the words used to create a link describe what that particular page is about. This wasn't actually true in this case and Adobe was ranking for a useless search term. But it demonstrated the power of using keywords in links. For example, if your website sold computers, you would have wanted links created with "Buy Computers" as the link text. This doesn't hold quite the value that it once did. But it can still have some impact on search rankings. There are many strategies for acquiring "backlinks" to your website — too many to discuss in this brief overview. But the best way to get people to link to your website is to provide quality content that people want. If people enjoy your content, they will share it with others and do the work for you.

on-site SEO

On-site optimization deals with the structure and content of your web pages. You should use the appropriate elements to provide semantic meaning and provide text equivalents that communicate the "aboutness" of your content to search engines. You should do some research and find out what keywords people are actually typing into search engines to find the type of content that you are providing. You can use a tool like the Google Keyword Planner [30] to get this information. Once you have identified these keywords, you will integrate them into your content and HTML code. These are some important on-site items to consider when optimizing for Google: The <title> element - For obscure keywords, you can rank simply by adding them in the title. However, the keywords used should truly represent the "aboutness" of your page content. The meta description element - Google will often use the description you provide in their search engine listing. The domain name - It was once the case that simply buying a domain name with your keywords would shoot you straight to the top of search engine rankings. Such as, if you were selling computers, you would want buy computers.com. Although, the domain name does not hold the weight that it once did, it is still a valuable way to help your search engine ranking. Heading elements - Adding your keywords in your <h1> - <h6> communicates that this is the topic of your page and thus relevant to the keyword search. However, again, your page content should actually reflect this. Use your keywords throughout the page. Going overboard and adding your keywords constantly is called keyword stuffing and will penalize your website in Google rankings. However, dropping your keywords into sentences here and there throughout your website is a good strategy for success. Add your keywords to alt and title attributes where appropriate. When doing this, it must also serve accessibility purposes. So, if the keywords do not reflect the actual content, they should not be used. Some of you that have prior experience with HTML may have noticed that I didn't mention the keyword meta element. Adding meta keywords do absolutely nothing to improve your Google ranking. Google has publicly stated that keywords entered in the meta tag are not included in their ranking algorithm at all. Since so many users will likely arrive at your website from a search engine, it is important to think about this when designing every page. Every page should be a "landing page". Don't anticipate that people will arrive at your website through the home page. It's important to include navigation on every page. Don't leave your users stranded.

Arrangement

The decisions you make about your text content should be made with your users in mind. Most users prefer to scan the web page for information rather than butting their heads into a wall of text. You should avoid long paragraphs of text and instead break up your content into manageable chunks. Use headings to clearly identify sections of your content and use tables and lists to structure content logically. Additionally, it is not a good idea to justify your text. Not only does it often look a bit goofy, it has also been shown to cause difficulties for users with dyslexia. What is aesthetically pleasing is often synonymous with what is highly readable and usable (although aesthetics are, of course, subjective). Provide enough white space, make sure there is appropriate contrast, and keep it clutter-free to make reading your content a pleasant experience. Designing crisp, clean, and logical pages will improve the experience for all users.

Spacing

Tracking and leading are terms traditionally used in typography to describe spacing. Tracking is the space between characters, which in CSS is called letter-spacing. p { letter-spacing: .0625em; } Leading is the space between lines of text, which in CSS is controlled with line-height. If your font-size was 13px high and you set a line-height of 16px, that means that you are creating 3px of leading in your text. p { font-size: 13px; line-height: 16px; } The appropriate spacing that should be used varies with different fonts and circumstances. You should experiment with spacing on your web pages to improve readability. The Golden Ratio Typography Calculator [25] can come in handy for choosing the best line-height for your text.

typography

Typography is the art of placing type on a page — traditionally this means for the printed page. Although typography for the web presents new challenges, the basic goals remain the same: high readability and aesthetic quality.

accessibility tips

We've been talking about accessibility quite a bit throughout this course. You've read as I harp on about providing text equivalents and semantic information. Here are few rules about accessibility: Use the alt attribute in all images to provide text equivalents for graphic information. Use captions and describe the structure of your tables. Use the title attribute for links. Use meaningful link text. Describe the destination so people know where the link will take them. Use the "for" attribute in form labels. Use HTML elements that provide proper semantic meaning for the content. Don't use tables for design. There are more, but these are some of the most important. Following these rules allows screen reading software for people with visual impairments to more easily parse your web pages and extract meaning for the users. But not only that, these rules also help optimize your web pages for search engines.