1 / 10

Web Usability

Web Usability. By Chao Liang Based on Jakob Nielsen’s Book “ Designing Web Usability”. Why web usability. The web continues to grow. A lot of people doing business on the web. It is very easy to access other sites if a user doesn’t like the one he/she is looking at.

Thomas
Télécharger la présentation

Web Usability

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Web Usability By Chao Liang Based on Jakob Nielsen’s Book “Designing Web Usability”

  2. Why web usability • The web continues to grow. • A lot of people doing business on the web. • It is very easy to access other sites if a user doesn’t like the one he/she is looking at.

  3. Web Design Principles and Common Errors • Principles: • Meaningful design rather than art or new technology. • Make it easy for users to perform useful tasks. • Gather real survey data from regular users. • Show some interests and creativities. • Execute these principles on your own site. • Common Errors: • No proper links to other sites, does not provide convenience for others to link to the site. • Design for their own pleasure, not for users’ needs. • Good for demo, but not easy to use, and long download time. • Not adapt to new style of web writing: emphasized, and create site structure to divide the site into different but connected pages.

  4. Page Design Standard • Focus more on content and limit navigation. • Include necessary amount of white space to separate the grouped content. • Rule of thumb: content- 80%, navigation+ads - 20% , simplicity over complexity. • Facilitate user-controlled navigation. • Use a single page design for all different display devices. Bad design: Navigation and ads occupy more than 20% of the page

  5. Page Design Standard Cont. • The page should be resolution-independent. • Wait for a year before using a new web technology and avoid non-standard codes. • Separate the presentation from the semantics. • The response time should be no more than 10 seconds.

  6. Page Design Standard Cont. • Stabilize the response time. • Show file size. -- color-coded links. • Keep download time as low as possible • Speed over design. • Low on graphic. • Limit the number of images used, and use the same one if it is ok. • Clearly state standard download time and page size.

  7. Page Design Principles Cont. • Make the top page meaningful. • Use ALT attribute to support old browsers. • Syntax: <input type="image" src="image.gif" alt= "a sunset picture" /> • Draw the first page quickly. • Limit the rendering time of tables, and split them if necessary.

  8. Links • Main forms of links: • Links for navigation purposes. • Links to the next page that is continuation of the current page. • Links to other sites of similar content. • Guidelines for the web links: • Keep the text simple and short and informative. • <a href=“…”>How to create web links</a> • Highlighted links.

  9. Links Cont. • Include link title. • <a title=“…” href=“…” /> • Information about the content of destination page. • complementary to the link text. <a title=“Master Student in CS” href=“www.chaoshomepage.com/intro”>Intro of Chao”</a> • Warning about the usage of the link:<a title=“Membership required” href=“https://www.acm.com/portal/index.cfm”> ACM</a> • Color-coded the links. • Standard: blue for not used and red for used • Link not yet visited and Link visited • Use a fixed url for all the links for the same page • Good links will add value to your site.

  10. Link and Style Sheets • Provide some free representative pages’ urls for linking if your site requirement a membership. • Example: http://www.ieee.org • Style Sheets: separate the content with the presentation. • Different forms of style sheet: • Embedded style sheet. • <style type=“text/css”><!-- .indent {margin-left: 3%} --> </style> • Linked style sheet. • <LINK REL=StyleSheet HREF="style.css" TYPE="text/css" /> style.css: indent {margin-left: 3%} • Pages must work with and without style sheets.

More Related