Week 5
10/1

Complete web site. Styling navigation, site architecture, optimizing the site for search engines and implement Google Analytics to track users. Activity: Build website using HTML5 Boilerplate. Activity: Style navigation links. Activity: Open up a Google Analytics account and apply it to your web pages.

Homework

Develop your portfolio website. Read chapter 13. This Midterm Assignment is Due: Next week for review and grade. Have it ready for presentation two weeks from now.

Materials

Additional materials for this unit can be found by following these links (30 pages):

• Information Architecture (IA)
• Styling the Navigation
• The HTML5 Boilerplate
• Search Engine Optimization
• Trouble Shooting
• Google Analytics
• 404 page
• Print Style Sheet
• Visual Literacy
• Homework

Goals

The goals of this unit are to:

• have been introduced to information architecture (AI)
• Understand taxonomies
• Create menus using lists and rollovers
• Conserve server requests by using sprites
• Incorporate SEO into web page design.
• Access site statistics using Google Analytics.
• Effectively troubleshoot documents.

Outcomes

At the end of this unit, students will have:

• Been prepared to seek a high-level overview of a web site’s navigational needs.
• Been exposed to taxonomies to help classify and organize the web site.
• Created menus using lists and image rollovers.
• Can conserve server requests by creating and using sprites.
• Know how to Optimize a web site for search engines.
• Have opened a Google analytics account.
• Are able to implement Google analytics on their web pages
• Track and make sense of the statistics.
• Troubleshoot a document when they get stuck.

Step-by-Step

Definitions

These are the terms that participants should be familiar with during this unit:

404 Page

The 404 or Not Found error message is aHTTP standard response code indicating that the client was able to communicate with the server, but the server could not find what was requested. The web site hosting server will typically generate “404 – Not Found” web page, when a user attempts to follow a broken or dead link, hence the 404 error is one of the most recognizable errors users can find on the web.

Information Architecture

Information architecture (IA) is the art of expressing a model or concept of information used in activities that require explicit details of complex systems. Among these activities are library systems, Content Management Systems, web development, user interactions, database development, programming, technical writing, enterprise architecture, and critical system software design. Information architecture has somewhat different meanings in these different branches of IS or IT architecture. Most definitions have common qualities: a structural design of shared environments, methods of organizing and labeling websites, intranets, and online communities, and ways of bringing the principles of design and architecture to the digital landscape.

User Interface design

User interface design or user interface engineering is the design of computers, appliances, machines, mobile communication devices, software applications, and websites with the focus on the user’s experience and interaction. The goal of user interface design is to make the user’s interaction as simple and efficient as possible, in terms of accomplishing user goals—what is often called user-centered design. Good user interface design facilitates finishing the task at hand without drawing unnecessary attention to itself. Graphic design may be utilized to support its usability. The design process must balance technical functionality and visual elements (e.g., mental model) to create a system that is not only operational but also usable and adaptable to changing user needs.

Interface design is involved in a wide range of projects from computer systems, to cars, to commercial planes; all of these projects involve much of the same basic human interactions yet also require some unique skills and knowledge. As a result, designers tend to specialize in certain types of projects and have skills centered around their expertise, whether that be software design, user research, web design, or industrial design.

Principles of User Interface Design

Principles of User Interface Design are intended to improve the quality of user interface design. These principles are:

• The structure principle: Design should organize the user interface purposefully, in meaningful and useful ways based on clear, consistent models that are apparent and recognizable to users, putting related things together and separating unrelated things, differentiating dissimilar things and making similar things resemble one another. The structure principle is concerned with overall user interface architecture.

• The simplicity principle: The design should make simple, common tasks easy, communicating clearly and simply in the user’s own language, and providing good shortcuts that are meaningfully related to longer procedures.

• The visibility principle: The design should make all needed options and materials for a given task visible without distracting the user with extraneous or redundant information. Good designs don’t overwhelm users with alternatives or confuse with unneeded information.

• The feedback principle: The design should keep users informed of actions or interpretations, changes of state or condition, and errors or exceptions that are relevant and of interest to the user through clear, concise, and unambiguous language familiar to users.

• The tolerance principle: The design should be flexible and tolerant, reducing the cost of mistakes and misuse by allowing undoing and redoing, while also preventing errors wherever possible by tolerating varied inputs and sequences and by interpreting all reasonable actions.

• The reuse principle: The design should reuse internal and external components and behaviors, maintaining consistency with purpose rather than merely arbitrary consistency, thus reducing the need for users to rethink and remember.