Objective of this lesson is to know how to properly design a web page for ease of use and meeting the user’s needs.
Web Page Design
- Easy to use
- Meets users needs
Main components to look at to get these objectives
- Graphic design
- Text
- Layout of page
Technical Considerations
- Not everyone uses the same operating system, check to see what they use and build to that
- Same with browsers
- Not everyone uses plug ins or has the most up to date ones
- Monitor size and resolution affect how your page looks
- People’s internet connections vary and this affect the page load times
All of these affect your users experience and enjoyment of the site you create
Download Speed
80% of US users have broadband, 20% do not. Where are the majority of your users. If they are slower you need to have pages that load with minimal time. Even with a broadband connection, slow loading pages will turn your visitors away.
Use tools like http://www.websiteoptimization.com/services/analyze to check your sites speed.
If using Joomla, only turn on the modules that you need. Each module consumes resources and since the pages are made on the fly, the more resources, the longer it will take for the page to be created and load. Use a subdomain to test what modules you want and see how they affect load time.
10 Second Rule
If your user cannot get a page loaded in 10 seconds or less they will generally move on to the next site that they are searching for. For that reason keep the total page load down to 60K. That includes you XHTML file and all associated graphics.
Do not use large graphics and shrink them with the height and width in IMG tags. Use a software tool to resize them and use the smaller graphic. Reuse graphics on pages since they will be in the users cache and the browser will grab them from there. Use Interlaced GIFs to have the picture come in fuzzy and then clear (it loads some lines before others). Use a graphic tool to break your large image into parts that will all load together. Graphics will not display on a page till 50% of it has been received so this trick gets them all displaying quickly.
References for Statistics
•ClickZ Stats: http://www.clickz.com/showPage.html?page=stats/sectors/broadband
•Broadband vs. Dialup:
http://www.websiteoptimization.com/bw/
These talk about where in the world high speed Internet is going in.
Graphic Usage
GIF
Best for flat line drawings of 256 colors or less (but millions of colors are available). They compress and decompress with no loss of quality (Losless compression). They allow for animation and for interlacing (every x amount of lines load first and then repeated till whole image is in). Also allows for one color to be transparent so that the background of the page will show through.
JPEG
Best for photographic images (most cameras save in this format). Use a graphic program to resize images from a camera as most are too large to be used on a web page. JPEG images are lossy, meaning bad compression (not like the GIF).
PNG
Uses the best from both. Compresses well, millions of colors, and transparency. However only newer browsers support them. Make sure what your users us supports it before using it.
Design Layout Considerations
Cluttered Design
Do not overfill a web site with graphics if they are not needed. Many users are not expecting sound when they go to a web site so use it only when needed. Use white space to break up the page. You can tell if you used white space the right way if it looks natural.
Chunking material on the screen keeps it from becoming to busy from large blocks of information.
Background Patterns
Backgrounds should be simple and not be overly repeating. Make sure any text on the page is readable against the background.
Color
If your site is to be viewed internationally be aware that in different cultures, different colors mean different things. Make sure that links change colors when they are visited so that the user will not loose his roadmap of where he has been. Dark text on light background is easier to read. Your total amount of colors used should be about 4 on a page and 7 on a site, not counting neutral colors (gray, black, white).
Above the Fold
Users tend not to want to scroll so important information should be kept at the top. If you have done research on the resolution the average user has on their monitor you can build the web site accordingly. When at all possible avoid horizontal scrolling by using fluid design rather than fixed tables.
Font Guidelines
One thing you will have limited control over is fonts. Different operating systems come with different fonts. Two web pages that list them for the Mac and Windows machines:
Font size should be consistent through the site except for navigation, headers, or other elements not part of main content.
The Font Face (or name) that should be used throughout the site would be serif, sans-Serif and monospace. Sans-serif is best used on web sites.
Text Guidelines
Make your text scannable by:
- Break it into sections with headings
- Use logical layout with structure and repeat throughout site
- Use lists, bold and italics to make some text stand out
- Use CSS to increase space between lines to make it readable
- Use no more than four screens of scrolled data
Content Considerations
Want people to return to your site, make sure the content is up to date, unbiased and reliable. Page content should include landmarks like breadcrumbs, subject headings, title bars and understandable URLs. It is a good idea to include contact information for the business as well as street addresses and phone numbers. This shows an interest in providing customer service.
Browser Challenges
Because standards are suggestions on how browsers should show things, there can be large variations on how pages look in browsers. Test your pages with different browsers and different platforms when ever possible.
Users With Disabilities
It is important to try to make your site as accessible to those with disabilities, especially when your site is a government agency. http://webair.org is a site that can help you learn how to do this.
Standardization
While Internet Explorer had the largest market share, Gecko based browsers (Firefox, Mozilla, Flock) are increasing market share as are others. Test your pages in multiple browsers. Because of standards not acting the same, it is possible to have the CSS/Dynamic HTML on your site not work.
Approaches to Differences
Aim for the lowest common denominator. Test your site in browsers or in sites that will show you what it will look like.
 | Designing the Moment: Web Interface Design Concepts in Action |
Posts
No comments:
Post a Comment