Winter 2000
Art 333, Computers for Graphic Designers 2: Designing Visual Interfaces
A&A; 1051, MW 11:30 - 2:30
The interface, for our purposes, is the visual information layer that mediates the interaction between a person on the one hand and a computer on the other. By supporting dialog between the two, the interface makes it possible for people to take advantage of computer processing power with relative ease. Whether using an ATM, surfing the Web, or composing a document in a word processing program, the interface is the medium through which one is able to engage with the underlying computer system.
Because the visual interface cues the user to behavioral options when using a computer system, interface design is often called "interaction" design to emphasize the psychological and behavioral dimensions shaped by the interface. This course focuses on the use of traditional graphic design skills to create visual interfaces that are easy-to-use, appropriate, and engaging. We will critically examine issues in visual interaction design, exploring the analytical, behavioral, cognitive, and linguistic dimensions of designing for dynamic information environments.
This course is organized around a single group project which will last the duration of the term. Using the instructor-furnished map as your content source, you are to create a Web prototype of an online wayfinding product. How does interactivity change the way your users conceptualize and interact with the information at hand? Since your product is clearly to be used in support of the task of finding one's way-whether it be through a building, a city, or a specific transit system-how can you ensure an interface that is quick to learn, easy to use, and appropriate for its audience? We will use a structured development sequence that encompasses task analysis, interface prototyping, and usability testing to design the interface.
At our final critique you are to provide me with:
- A web prototype accessible through your IFS space
- A disk of all the HTML files comprising your site
- All project artifacts generated during design development-task study document, usage scenario, flow chart, paper prototypes, site architecture diagram, usability test plan and result summary-that will help me understand your design process. These artifacts must be neatly and chronologically organized so that I can ascertain the sequence of your development efforts.
Upon completion of this course, you will have gained experience in information structure and navigation, screen design, digital image editing, paper and digital prototyping, task analysis, usability testing, design specification, and presentation. Please note that this course does not emphasize skill development in the use of popular software programs, but instead focuses on the critical and analytical skills required to design such interactive tools.
| Note: Readings and assignments are due the class following the assignment date. | |
| Week 1: Course Introduction | |
| WED 1.5 | Review of syllabus, readings, and course requirements. |
| Week 2: Graphical User Interface Design & Project Introduction | |
| MON 1.10 | Slide lecture on graphical user interface design. |
| WED 1.12 | Project introduction. Team formation and guidelines for team interaction. Distribution of printed maps. Discussion of task based interfaces. Consideration of users and usage context in the design of task-based artifacts. |
| Homework | Prepare a written task study document that describes the user, usage context (environment), and key tasks, along with an analysis of the map (focusing on its strengths and weaknesses as a task-focused design artifact). Structure your study to focus on facts gathered, and implications derived from those facts.
|
| Week 3: Users & Tasks |
|
| MON 1.17 | MLK day, no class |
| WED 1.19 | Task study document due. Task analysis & development of task flow diagrams. |
| Homework | Develop a task flow diagram of a major task to be undertaken with your paper map. |
| Readings | Snyder, Ilana. . Explaining Hypertext
|
| Week 4: Hypertext, Scenario Development & Storyboarding |
|
| WED 1.24 | Task flow diagram due. Discussion of key characteristics of hypertext. How do the constraints of the World Wide Web affect your consideration of the task? In class, develop a written usage scenario that depicts a "typical" user undertaking the key task within the target environment. We will share the scenarios at the end of class. |
| Homework | Complete a storyboard depicting your major task sequence as a series of Web pages. |
| WED 1.26 | Storyboard due. Revise storyboard in keeping with review feedback. |
| Readings | Rettig. Part 5, Prototyping for Tiny Fingers
|
| Week 5: Paper Prototyping |
|
| MON 1.31 | Refer to your task study document, usage scenario, task flow chart, and storyboard to begin developing a paper prototype of your Web interface. |
| Homework | Develop one complete paper prototype for informal review on Wednesday. |
| WED 2.2 | Review of prototypes. In class, revise your paper prototype based on review feedback. |
| Homework | Continue revising your paper prototype for group critique on Monday. Anticipate potential errors in the user interaction and revise the design accordingly. |
| Readings | Norman. To Err is Human
|
| Week 6: Planning a Usability Test |
|
| MON 2.7 | Review of prototypes. In class, continue revising your paper prototype based on review feedback |
| Readings: | Gomoll. Some Techniques for Observing Users |
| WED 2.9 | Discussion of usability. Identification of potential problem areas in the proposed interface design. In class, draft a test plan describing the aspects of the design to test, and the specific methodologies for gathering feedback. |
| Homework | Continue developing your test plan.
|
| Week 7: Usability Testing | |
| MON 2.14 | Test plan due. Make sure all prototype pieces are in place for testing on Wednesday. |
| WED 2.16 | Usability testing with test subjects recruited from SOAD. |
| Homework | Summarize test results to present to class on Monday.
|
| Week 8: Design Review & Intro to the Language of Design | |
| MON 2.21 | Test result summary due. Representing web site structure with site architecture diagrams. |
| Homework | Prepare site architecture diagram for review on Wednesday. |
| WED 2.23 | Site architecture diagrams due. Each team is also responsible for turning in all design development materials to date (task study document, task flow diagram, usage scenario, storyboard, paper prototype, test plan, test result summary, and site architecture diagram). Each group will receive a mid-term grade based on your collective efforts (as evidenced by materials submitted).
|
| SPRING BREAK 2.26 to 3.5 | |
| Week 9: Digital Image Editing | |
| MON 3.6 | Digital image editing & screen design. File formats, resolution, and bit-depth. Bitmapped & vector based drawing programs. Typography for the screen. Antialiasing. |
| Homework | Develop a design for your home page keeping in mind the demands of design for the screen. |
| WED 3.8 | Critique of home pages. |
| Homework | Revise the home page design in keeping with critique feedback. |
| Week 10: HTML & Web Graphics | |
| MON 3.13 | HTML lesson. Basic HTML tags for text formatting; use of tables to control screen layout. Creation of text links. |
| Homework | Develop a design for your home page keeping in mind the demands of design for the screen. |
| WED 3.15 | Web graphics lesson. Web graphics file formats and considerations regarding palettes. Graphic links and image maps. |
| Homework | Continue developing your screen designs. Develop your primary functional screen in addition to your home page for critique on Monday. |
| Week 11: Graphic Design Review & Production | |
| MON 3.20 | Critique of screen designs. |
| WED 3.22 | Continued design development. |
| Week 12: Production | |
| MON 3.27 | Site production. |
| WED 3.29 | Site production. |
| Week 13: Preliminary Critique & Test Upload | |
| MON 4.3 | Preliminary site critique. |
| WED 4.5 | Uploading files to your IFS space. |
| Week 14: Final Production & Critique |
|
| MON 4.10 | Review final site online to ensure proper graphic placement of design elements and test all links. |
| WED 4.12 | Final presentations. (IMPORTANT: class meets in the Media Union Macintosh Training Rooms) |
| Grading | |
| Each group will receive a two grades for the term project. The first grade will cover all design development efforts up until spring break. The second grade will be based on the final site design. These two grades together will account for 85% of your individual grade for the course. The remaining 15% will be based on your class participation (especially during critiques), attendance, and attitude. Please keep in mind that as a studio course, the form my feedback takes is primarily in my spoken and written feedback (both formal and informal) regarding your work. Grades serve to "synopsize" that information. If at any time you have any questions or concerns regarding your performance or grade-to-date, please let me know. Your term project will be graded according to the following criteria:
| |
| Bibliography | |
| Castro, Elizabeth. Visual Quickstart Guide: HTML 4 for the World Wide Web. Berkeley: Peachpit Press, 1998. *Gomoll, Kathleen. "Some Techniques for Observing Users." In The Art of Human-Computer Interface Design, edited by Brenda Laurel. Reading: Addison Wesley, 1990: 85-90. *Norman, Donald. "To Err is Human." The Psychology of Everyday Things. New York: Basic Books, 1988: 105-140. *Rettig, Marc. "Prototyping for Tiny Fingers." Communications of the ACM. 37, no. 4 (April 1994): 21-27. *Snyder, Ilana. "Explaining Hypertext." In Hypertext: The Electronic Labyrinth. New York: New York University Press, 1997: 15-38. **Weinman, Lynda. Designing Web Graphics.2. Indianapolis: New Riders Publishing, 1997.
*coursepack reading | |
Top
©2000 Loretta Staples