CSCI 672/490

Project 1

Spring 2001


Icon Design


ASSIGNED  DATE:

January 18, 2001

DUE  DATES:

Phase 1: January 30, 2001 (strictly by beginning of class)
Phase 2: February 6, 2001 (strictly by beginning of class)
Phase 3: February 15, 2001

You are part of a development team charged with producing a new telephone interface for an upcoming color version of the Nokia 9110 Communicator (see Figure 1).

9110es2.gif (8248 bytes)
Figure 1.  Nokia 9110 Communicator

You have to develop the full set of icons to be used on a toolbar. This is a new product and so there is no set house style.  Since it will appear on a new platform, it does not have to follow any particular set of user-interface style guidelines--however you should follow general design guidelines related to icons and color (see class handout). The platform will support color on a high-resolution bitmapped monitor, but icons must be suitable for use on grayscale as well as color screens - design in grayscale first, then add color. Text may be used if required. Each icon needs an unselected and a selected state.


Phase 1 (back to top)

The following is a list of all the functionality required (you may choose a form other than an icon to provide the function but you should justify your choice):

  • toggle between two callers (call-waiting)

  • disable call-waiting

  • forward current call

  • forward all calls

  • put caller on-hold

  • place a 3-way call (conference call)

  • redial last number

  • call return (call last caller)

  • ring back (ring when a busy number becomes available and immediately connect)

  • check voice mail

  • open previous voice message

  • open next voice message

  • delete current voice message

  • reply to current voice message

  • forward current voice message

  • open telephone book

Icons should be designed on 64x64 grids. Try to draw them as clearly as possible.

Submission Instructions for Phase 1:

Create an HTML document that includes:

  • course name and number

  • instructor name

  • due date

  • project number and title

  • developer names

  • certificate of authenticity: <one of the following>

  • We certify that this deliverable is entirely our own work. 

  • We certify that this deliverable is our own work, but we received some assistance from: 
    <Name(s) of non-team mate(s) you worked with> 
    <Describe nature of collaboration>.

  • your icons in color (marking clearly the functionality of each icon) 

  • your icons in grayscale (marking clearly the functionality of each icon) 

  • On the due date, submit one printed hardcopy to the instructor and softcopies on three floppy disks

    Note:  In order to make your document printable, keep it all in a single HTML page.  Of course, you should format it appropriately.  For improved usability, consider inserting a table of contents.


    Phase 2 (back to top)

    Evaluate the designs produced by two other groups. Try to assess them using the following to help you:

    • Is the meaning of the icon clear?

    • Is color used sensibly and consistently?

    • Will the icon's meaning still be clear in grayscale?

    • What is the overall effect of the icons when viewed together?

    • How original are the designs and is the originality effective or simply novelty for novelty's sake?

    Also consider linguistic issues and general design guidelines related to icons and color (see class handout).

    Submission Instructions for Phase 2:

    For each design you evaluated, create one HTML document that includes:

    • course name and number

    • instructor name

    • due date

    • project number and title

    • evaluator names

    • certificate of authenticity: <one of the following>

      • We certify that this deliverable is entirely our own work. 

      • We certify that this deliverable is our own work, but we received some assistance from: 
        <Name(s) of non-team mate(s) you worked with> 
        <Describe nature of collaboration>.

    Also include (cut and paste) the original document containing the icons being evaluated.  Within this document interject your feedback.  Make sure that your comments are clearly identifiable as such and cannot be confused with the original text--if any.  Focus on usability, i.e., making it easy for the reader to look at an icon together with any feedback you might have on it.

    On the due date, submit one printed hardcopy to the instructor and softcopies on three floppy disks

    Note:  In order to make your document printable, keep it all in a single HTML page.  Of course, you should format it appropriately.  For improved usability, consider inserting a table of contents.


    Phase 3 (back to top)

    Study the feedback provided by your evaluators.  Make any adjustments you think are necessary to your designs.  

    Create an HTML document that includes:

    • course name and number

    • instructor name

    • due date

    • project number and title

    • developer names

    • names of evaluators (group A and group B)

    • certificate of authenticity: <one of the following>

      • We certify that this deliverable is entirely our own work. 

      • We certify that this deliverable is our own work, but we received some assistance from: 
        <Name(s) of non-team mate(s) you worked with> 
        <Describe nature of collaboration>.

    This document should also provide a linguistic analysis of your icons (e.g., what are the lexemes, how they are combined, etc.).  

    It should also discusses use of color and other issues that contributed to your design decisions.

    Finally this document should clearly present the evolution of each icon together with the feedback that contributed to this evolution.  Each final icon should be accompanied by a justification of its design (e.g., how was feedback used to evolve the design; if you disregarded some feedback, explain why you did so).  See example from an earlier semester.  

    Make sure that your HTML page works in environments that are filename case-sensitive (e.g., Unix).  

    On the due date, submit one printed hardcopy to the instructor and one softcopy on a floppy disk

    Note:  In order to make your document printable, keep it all in a single HTML page.  Of course, you should format it appropriately.  For improved usability, consider inserting a table of contents.

    _________________________
    Last updated: Wednesday, February 07, 2001 17:14.