Interaction Design is the discipline of defining the behavior of products and systems that a user can interact with. The practice typically centers around complex technology systems such as software, mobile device, and other electronics devices. Interaction design is often associated with the design of system interface in variety of media. Interactive voice response is an example of interaction design without graphical user interface as media.
Interactive Voice Response (IVR) is an automated telephony system that interacts with callers, gathers information and routes calls to the appropriate recipient. An IVR system (IVRS) accepts a combination of voice telephone input and touch-tone keypad selection and provides appropriate responses in the form of voice, fax, callback, e-mail and perhaps other media. Common IVR applications include:
Interactive Voice Response (IVR) is an automated telephony system that interacts with callers, gathers information and routes calls to the appropriate recipient. An IVR system (IVRS) accepts a combination of voice telephone input and touch-tone keypad selection and provides appropriate responses in the form of voice, fax, callback, e-mail and perhaps other media. Common IVR applications include:
- Bank and stock account balances and transfers
- Surveys and polls
- Office call routing
- Call center forwarding
- Simple order entry transactions
- Selective information lookup (movie schedules, etc.)
The Elements of Web Interface Design
Interface design encompasses three distinct, but related constructs--usability, visualization, and functionality (Vertelney, Arent, & Lieberman, 1990). Recently, a fourth component of interface design has emerged as a critical factor--accessibility. Interface design is most often associated with the development of Web pages, computer software, and multimedia, but is relevant to the creation of any instructional media or technical equipment.
I. Usability
Refers to how intuitively or easily your media item is navigated and processed (flow, sequence, instructions, download time). Note, this construct is the most inclusive of the three and is influenced by both visualization and functionality.
- Planning Presentation (flow, navigation)
Regardless of chosen media, it is generally a good idea to outline your instructional materials prior to production. These outlines may take many forms from storyboards to index cards to flowcharts.
a) Story Board
Storyboards were originally created to plan and script video programs but can also be useful to plan the content of computer screens. Storyboards allow one to design the look of their interface, consider common placement for navigation buttons, and make decisions about the placement of titles, text, and video. Alessi and Trollip (1991) recommend a sequential process of storyboarding: write essential instructional text, questions, and feedback; write scaffolding text, directions, navigational screen cues, and prompts; produce storyboard with text and sketches of graphic elements; check for overlap and design adequate space for any pop-up text or interactive elements that supplement the original presentation; describe time-dependent media that has a distinct start and stop point. Note, storyboard-like drawings can be captured or reproduced on Index Cards which allow designers to flexibly modify and adjust the sequence of their instructional materials. A large flat-top table or bulletin board will facilitate the shuffling and rearrangement of lesson components. The size of your storyboard sketch window should correspond to the technology delivery medium.
b) Flow charts
Flowcharts are useful for depicting the flow of lesson segments, web sites, or multimedia interactions, feedback loops, and extension tasks. Flowcharts contain standard symbols. A circle represents the start and end point in a flow, a square or rectange represents a step in the flow, and a diamond represents a decision point for the learner in the flow (e.g., choose a menu item, take a quiz, input variables into a simulation). Flowcharts are especially useful when developing new materials in a team, as everyone must reach consensus on major presentation and interaction sections in the media item.
- Navigation Samples
Before considering navigation options, it is highly recommended what we should do first on paper. What are the major topic headings? What are the sub-units? How many layers or levels of content are there? With sample chart in hand, we can create the most appropriate navigation technique. Some navigation technique as below :
a) Menu-tree navigation - represents a technique whereby information is structured under major topic headings and sub-headings. Users navigate down a particular path/hierarchy and back out of that path using visible menus. The menu and path remains visible and is evident at any point in the tree structure.
b) Tab-stop navigation - represents a technique whereby information is again structured under major headings and sub-headings, but the user accesses that information using a file-folder tab-stop metaphor. The major tab headings are always visible. Tab-stop navigation is more appropriate if your design includes hierarchical information with multiple sub-levels.
c) Index navigation - represents a technique whereby information is structured within an all-inclusive table of contents. All potential selections are visible. Sites with vast information contents employ this method so users will not be forced to "dig" through multiple levels of menus to find a specific piece of information (search engines provide a related option).
d) Pull-Down Menu - navigation employs javascripting to direct users to different parts of a web site. The old Volkswagen samples at right are particularly confusing. On the main menu screen, the user can choose pull-down selections from four main areas.Once a sub-topic is selected from a pull-down menu, however, the user is not given any indication of the sub-topic they have selected.
e) Page Turning - navigation is useful for creating tutorials or content structured according to units or chapters. It may be difficult to create an entire site with this navigation approach, but sections of a site are often accessed in such a manner. Page-turning navigation is appropriate if your design plan includes sequential, page-after-page information.
f) Iconic navigation - is a technique where the user can select a visual representation of specific items they wish to link to. Sometimes the icon is accompanied with a text label, sometimes it is not. For clarity, both text and iconic representations are recommended. When the main visual is selected, the subsequent, underlying page should also contain the icon to signal the learner as to the selected item.
g) Combining - navigation techniques may be accomplished with many of the above forms (e.g., hybrid form of menu-tree navigation and tab-stop navigation).
To get a "feel" for effective navigation techniques, it is useful to study the strategies employed by others. Some strategies are effective, while others are confusing. After designing the web site, it is a good idea to conduct a field test or "usability test" with sample users. Observing, taping, or interviewing these users can reveal potential problems with your selected navigation strategy.
- Scaffolding
Procedural scaffolds are instructions for using an interface or embedded cues/features that help someone use an interface. They take many forms. Interfaces with planning scaffolds allow students to: set goals and objectives, chart milestones and deadlines for projects, create storyboards, etc. Interfaces with regulating scaffolds allow students to: monitor their progress, receive feedback on their performance (e.g., online quizzing, interactive practice exercises), etc. Interfaces with evaluating scaffolds allow students to: critique one another's work, exchange documents to-from the instructor for revising, etc.
- Heuristic Evaluation
Heuristic evaluation is the most popular method for quick, cheap, and easy evaluation of a user interface design. Heuristic evaluation is done as a systematic inspection of a user interface design for usability. The goal of heuristic evaluation is to find the usability problems in the design so that they can be attended to as part of an iterative design process. Heuristic evaluation involves having a small set of evaluators examine the interface and judge its compliance with recognized usability principles (the "heuristics").
2) Visualization
Visualization is creating visually interesting and aesthetically pleasing media items while avoiding potentially distracting or unnecessary "bells and whistles." Verbal information holds no meaning if you have limited or no understanding of the language. Similarly, the arbitrary graphic symbol will not make sense if you have not been exposed to its meaning. When designing messages, a combination of both visual and verbal information is recommended to enhance clarity.
Tips for Designing Visuals
1. Carefully select your visuals on the basis of age, culture, and education.
2. The icons should clearly and logically represent the content they are linking to.
3. While a combination of visual/verbal information is suggested, do not overwhelm the learner with extraneous verbal information.
4. Use arrows or other visual cues to highlight important components of your visuals.
5. The largest item in a display will attract the most attention (e.g., the giraffe).
6. Understand the directionality of visual elements and their hidden meanings. Vertically-oriented visuals (e.g., city skyline) are best placed at the bottom of a page to draw the eye upward toward the instructional message. Horizontal visuals (e.g., camera) are neutral and stable. Visuals with diagonal lines (e.g., running) will pull the eye toward the direction of the line.
7. Visual animation should be employed sparingly for aesthetics (e.g., rotating "new" at right), but whenever possible to help clarify confusing concepts (e.g., differential acceleration of bike-chain at right).
Tips for Designing Text
1. Avoid the use of all capital letters for body text, because it appear that the text is shouting. It is okay to use CAPS for highlighting or for titles.
2. Text items in bold face or other style will command attention. Contrasted colors may also attract attention.
3. Text size should correspond with the average viewing distance. For every 8 feet in distance from the instructional text, add 1/4 inch to letter height.
4. Employ approrpriate type families on the basis of your message (i.e., serif vs. san serif), and avoid the use of too many font faces on one screen or throughout one site (e.g., arial, helvetica, times, courier).
5. Separate text adequately to enhance readibility.
6. Provide for adequate contrast between figure and ground (i.e., text and background).
Tips for using colors
Avoid the use of too many colors on one screen, especially font colors. Pay attention to the psychology of color (Holzschlag, 1999). Dominant red colors evoke feelings of passion, aggression, or danger. Blue symbolizes cleanliness and order or security and trust. Green is often associated with luck or nature. Brown can be used to represent the earth. White symbolizes purity and sterility, but death in many eastern countries. Black can be used to represent death and fear, or power and elegance. Purple represents royalty or spirituality. Yellow can portray hope and optimism or dishonesty and cowardice. Orange can represent energy and balance.
Screen Design- Balance, Layout
Art and Advertising tend to use dynamic, informal layouts to attract our attention. For instructional messages, a formal balance is recommended to avoid distracting the learner. To achieve formal balance, consider sketching your screens to resemble a large alphabetical letter or character (i.e., A, X, C, B, D, Y, E, O). Image and text objects are then designed to lie along the shape of the selected letter.
Focal Point
If you divide a screen into thirds, the "rule of thirds" states the learner will be attentive to those items placed near the intersecting lines.
Density
The best computer interfaces will not distract the learner with an overwhelming array of images, icons, text objects, or features. "Less is more," so strive for screens of average density.
Consistency
The best computer interfaces will maintain a consistent look. In particular, icons used for navigation should maintain one position to avoid confusing the learner.
Metaphor
In addition to using metaphors as a navigation technique, metaphors are useful to enhance screen design.
3) Functionality
Consider the functions or features of your media item and how useful they are for supporting a given task. When designing an interface or selecting a pre-existing interface, it is important to consider the functions or features of that interface. First and foremost, the functions of an interface should support your instructional plans or strategies.
4) Accessibility
is an emerging Web interface design topic; if not addressed, it will negatively influence Web site usability for users with certain disabilities; tools that help users access your site in alternative formats (e.g., text, aural, visual) provide for increased functionality.
Interface design encompasses three distinct, but related constructs--usability, visualization, and functionality (Vertelney, Arent, & Lieberman, 1990). Recently, a fourth component of interface design has emerged as a critical factor--accessibility. Interface design is most often associated with the development of Web pages, computer software, and multimedia, but is relevant to the creation of any instructional media or technical equipment.
I. Usability
Refers to how intuitively or easily your media item is navigated and processed (flow, sequence, instructions, download time). Note, this construct is the most inclusive of the three and is influenced by both visualization and functionality.
- Planning Presentation (flow, navigation)
Regardless of chosen media, it is generally a good idea to outline your instructional materials prior to production. These outlines may take many forms from storyboards to index cards to flowcharts.
a) Story Board
Storyboards were originally created to plan and script video programs but can also be useful to plan the content of computer screens. Storyboards allow one to design the look of their interface, consider common placement for navigation buttons, and make decisions about the placement of titles, text, and video. Alessi and Trollip (1991) recommend a sequential process of storyboarding: write essential instructional text, questions, and feedback; write scaffolding text, directions, navigational screen cues, and prompts; produce storyboard with text and sketches of graphic elements; check for overlap and design adequate space for any pop-up text or interactive elements that supplement the original presentation; describe time-dependent media that has a distinct start and stop point. Note, storyboard-like drawings can be captured or reproduced on Index Cards which allow designers to flexibly modify and adjust the sequence of their instructional materials. A large flat-top table or bulletin board will facilitate the shuffling and rearrangement of lesson components. The size of your storyboard sketch window should correspond to the technology delivery medium.
b) Flow charts
Flowcharts are useful for depicting the flow of lesson segments, web sites, or multimedia interactions, feedback loops, and extension tasks. Flowcharts contain standard symbols. A circle represents the start and end point in a flow, a square or rectange represents a step in the flow, and a diamond represents a decision point for the learner in the flow (e.g., choose a menu item, take a quiz, input variables into a simulation). Flowcharts are especially useful when developing new materials in a team, as everyone must reach consensus on major presentation and interaction sections in the media item.
- Navigation Samples
Before considering navigation options, it is highly recommended what we should do first on paper. What are the major topic headings? What are the sub-units? How many layers or levels of content are there? With sample chart in hand, we can create the most appropriate navigation technique. Some navigation technique as below :
a) Menu-tree navigation - represents a technique whereby information is structured under major topic headings and sub-headings. Users navigate down a particular path/hierarchy and back out of that path using visible menus. The menu and path remains visible and is evident at any point in the tree structure.
b) Tab-stop navigation - represents a technique whereby information is again structured under major headings and sub-headings, but the user accesses that information using a file-folder tab-stop metaphor. The major tab headings are always visible. Tab-stop navigation is more appropriate if your design includes hierarchical information with multiple sub-levels.
c) Index navigation - represents a technique whereby information is structured within an all-inclusive table of contents. All potential selections are visible. Sites with vast information contents employ this method so users will not be forced to "dig" through multiple levels of menus to find a specific piece of information (search engines provide a related option).
d) Pull-Down Menu - navigation employs javascripting to direct users to different parts of a web site. The old Volkswagen samples at right are particularly confusing. On the main menu screen, the user can choose pull-down selections from four main areas.Once a sub-topic is selected from a pull-down menu, however, the user is not given any indication of the sub-topic they have selected.
e) Page Turning - navigation is useful for creating tutorials or content structured according to units or chapters. It may be difficult to create an entire site with this navigation approach, but sections of a site are often accessed in such a manner. Page-turning navigation is appropriate if your design plan includes sequential, page-after-page information.
f) Iconic navigation - is a technique where the user can select a visual representation of specific items they wish to link to. Sometimes the icon is accompanied with a text label, sometimes it is not. For clarity, both text and iconic representations are recommended. When the main visual is selected, the subsequent, underlying page should also contain the icon to signal the learner as to the selected item.
g) Combining - navigation techniques may be accomplished with many of the above forms (e.g., hybrid form of menu-tree navigation and tab-stop navigation).
To get a "feel" for effective navigation techniques, it is useful to study the strategies employed by others. Some strategies are effective, while others are confusing. After designing the web site, it is a good idea to conduct a field test or "usability test" with sample users. Observing, taping, or interviewing these users can reveal potential problems with your selected navigation strategy.
- Scaffolding
Procedural scaffolds are instructions for using an interface or embedded cues/features that help someone use an interface. They take many forms. Interfaces with planning scaffolds allow students to: set goals and objectives, chart milestones and deadlines for projects, create storyboards, etc. Interfaces with regulating scaffolds allow students to: monitor their progress, receive feedback on their performance (e.g., online quizzing, interactive practice exercises), etc. Interfaces with evaluating scaffolds allow students to: critique one another's work, exchange documents to-from the instructor for revising, etc.
- Heuristic Evaluation
Heuristic evaluation is the most popular method for quick, cheap, and easy evaluation of a user interface design. Heuristic evaluation is done as a systematic inspection of a user interface design for usability. The goal of heuristic evaluation is to find the usability problems in the design so that they can be attended to as part of an iterative design process. Heuristic evaluation involves having a small set of evaluators examine the interface and judge its compliance with recognized usability principles (the "heuristics").
2) Visualization
Visualization is creating visually interesting and aesthetically pleasing media items while avoiding potentially distracting or unnecessary "bells and whistles." Verbal information holds no meaning if you have limited or no understanding of the language. Similarly, the arbitrary graphic symbol will not make sense if you have not been exposed to its meaning. When designing messages, a combination of both visual and verbal information is recommended to enhance clarity.
Tips for Designing Visuals
1. Carefully select your visuals on the basis of age, culture, and education.
2. The icons should clearly and logically represent the content they are linking to.
3. While a combination of visual/verbal information is suggested, do not overwhelm the learner with extraneous verbal information.
4. Use arrows or other visual cues to highlight important components of your visuals.
5. The largest item in a display will attract the most attention (e.g., the giraffe).
6. Understand the directionality of visual elements and their hidden meanings. Vertically-oriented visuals (e.g., city skyline) are best placed at the bottom of a page to draw the eye upward toward the instructional message. Horizontal visuals (e.g., camera) are neutral and stable. Visuals with diagonal lines (e.g., running) will pull the eye toward the direction of the line.
7. Visual animation should be employed sparingly for aesthetics (e.g., rotating "new" at right), but whenever possible to help clarify confusing concepts (e.g., differential acceleration of bike-chain at right).
Tips for Designing Text
1. Avoid the use of all capital letters for body text, because it appear that the text is shouting. It is okay to use CAPS for highlighting or for titles.
2. Text items in bold face or other style will command attention. Contrasted colors may also attract attention.
3. Text size should correspond with the average viewing distance. For every 8 feet in distance from the instructional text, add 1/4 inch to letter height.
4. Employ approrpriate type families on the basis of your message (i.e., serif vs. san serif), and avoid the use of too many font faces on one screen or throughout one site (e.g., arial, helvetica, times, courier).
5. Separate text adequately to enhance readibility.
6. Provide for adequate contrast between figure and ground (i.e., text and background).
Tips for using colors
Avoid the use of too many colors on one screen, especially font colors. Pay attention to the psychology of color (Holzschlag, 1999). Dominant red colors evoke feelings of passion, aggression, or danger. Blue symbolizes cleanliness and order or security and trust. Green is often associated with luck or nature. Brown can be used to represent the earth. White symbolizes purity and sterility, but death in many eastern countries. Black can be used to represent death and fear, or power and elegance. Purple represents royalty or spirituality. Yellow can portray hope and optimism or dishonesty and cowardice. Orange can represent energy and balance.
Screen Design- Balance, Layout
Art and Advertising tend to use dynamic, informal layouts to attract our attention. For instructional messages, a formal balance is recommended to avoid distracting the learner. To achieve formal balance, consider sketching your screens to resemble a large alphabetical letter or character (i.e., A, X, C, B, D, Y, E, O). Image and text objects are then designed to lie along the shape of the selected letter.
Focal Point
If you divide a screen into thirds, the "rule of thirds" states the learner will be attentive to those items placed near the intersecting lines.
Density
The best computer interfaces will not distract the learner with an overwhelming array of images, icons, text objects, or features. "Less is more," so strive for screens of average density.
Consistency
The best computer interfaces will maintain a consistent look. In particular, icons used for navigation should maintain one position to avoid confusing the learner.
Metaphor
In addition to using metaphors as a navigation technique, metaphors are useful to enhance screen design.
3) Functionality
Consider the functions or features of your media item and how useful they are for supporting a given task. When designing an interface or selecting a pre-existing interface, it is important to consider the functions or features of that interface. First and foremost, the functions of an interface should support your instructional plans or strategies.
4) Accessibility
is an emerging Web interface design topic; if not addressed, it will negatively influence Web site usability for users with certain disabilities; tools that help users access your site in alternative formats (e.g., text, aural, visual) provide for increased functionality.
