Interaction Design III:

“Discovery learning, representation, and explanation within a computer-based simulation: finding the right mix,” by Lloyd P. Rieber, Shyh-Chii Tzeng, and Killy Tribble

The purpose of the authors’ experiment was to explore how adult learners interact and learn during a computer-based simulation supplemented with explanations of the content. The experiment required 52 college students to interact with a simulation of Newton’s law of motion where they had control over the motion of an animated ball. In one simulation, feedback was presented in animated or graphical feedback while in the other simulation feedback was presented textually in numeric displays. Half the participants were given simulations supplemented with multimedia explanations to facilitate referential processing. One purpose of the study was to investigate ways to facilitate or improve referential processing as users interact with computer simulations.

The results show a significant improvement between pretest and posttest scores when embedded explanations were provided. The greatest improvements were shown when feedback was presented graphically as opposed to textually. Participants who were given graphical feedback along with embedded explanations demonstrated the greatest widest gaps between pretest and posttest scores than all other groups. In addition, learners who received graphical feedback exhibited less frustration than those who received textual feedback.

The authors’ predictions were proven correct: The inclusion of embedded explanations enhanced referential processing without interrupting the interactive nature of the simulation. This, in turn, helped learners reflect on their interactive experiences, and drew them to the most salient aspects of the exercise.

The fact that learners who received graphical feedback and embedded explanations excelled the most suggests the following conclusion: From a dual-coding perspective, the explanations and graphical feedback promoted representational, associative and referential processing. These results suggest that successful learning may occur in the context of exploratory, constructivist environments. To offload the cognitive demands and frustrations that are inherent in an exploratory environment, designers can provide well-timed explanations pointing learners to germane information.

Interaction Design III:

“The Cognitive Benefits of Interactive Videos: Learning to Tie Nautical Knots,” by Stephan Schwan and Roland Riempp

In their experiment, the authors aim to shed light on the relative impact of interactive vs. non-interactive video on the learning process.

The authors distinguish interactive media (i.e. “new media”) from non-interactive media as having the following characteristics:

• Non-linear structure (i.e. Hypertextuality)
• Consisting of multiple symbol systems
• Promoting interactivity and user control to determine what and how information is presented

The authors aspire to gauge the impact of interactivity and user control on learning. They state that a major advantage of media over direct experience lies in the ability “to intentionally shape, arrange, and optimize information with regard to the cognitive apparatus of its recipients” (295). Instructional designers can project only the information that is necessary for learning and leave out extraneous content thereby reducing germane cognitive load. On the flip side, if a presentation model is adopted where learners cannot pace a presentation in accordance with their cognitive skills, prior domain knowledge and metacognitive strategies, recipients may experience cognitive load anyway. By introducing interactivity in the learning context, the interplay of internal and external activities on the side of the learner is profoundly impacted. Kirsch and Maglio (1994), underscore the cognitive impact of user control on learning, stating that mental processes may be facilitated by reducing the number of mental processing steps. Others argue that interactive features increase the number of activities that learners must understand, thereby increasing cognitive load and outweighing the benefits of interactivity. The authors’ experiment hopes to shed light on the relative impact of interactivity given these contrasting arguments.

The experiment required learners to sit through 8 videos (2 X 4 factorial design). Four of the eight videos were interactive in nature and illustrated how to tie four types of nautical knots ranging in difficulty from easiest to most complex. The remaining four were non-interactive, illustrating how to tie each of the same knots. In the interactive videos learners could stop, rewind, fast-forward and view clips in slow-motion. The learner could stop the video midway through the video and practice. Learners were not allowed to control the non-interactive videos and could only practice each knot after viewing the entire video in full.

The results of the experiment illustrated that the inclusion of interactivity accelerated the process of skill acquisition. Learners made heavy use of the interactive features provided to reduce cognitive load, especially in the case of more difficult knots. Learners actively strategized to use interactivity to adapt the visual information to their cognitive processing needs. These processing needs were individual in nature, as indicated by the wide variance in viewing times across participants. Learning also proceeded in a more efficient manner because the interactive version allowed for learning to occur in line with the cognitive needs of the individual.

Interaction Design III:

"Engaging by Design: How Engagement Strategies in Popular Computer and Video Games can Inform Instructional Design" by Michele D. Dickey

The article examines how instructional designers can employ strategies when designing educational games to engage players in "gameplay". Despite the motivational impact of gameplay in popular games, these same strategies have yet to be fully integrated in the design of educational games. The author examines the engagement strategies employed in popular games and aims to shed light on how they can be incorporated in the context of education.

Gameplay strategies may include role playing, narrative arcs, challenges, interactive choices and interaction with other players. Players may be required to use higher order thinking skills to play games. Games support intrinsic motivation and support discovery, observation, trial and error and problem solving (68). Games offer clear goals and immediate feedback with few negative consequences as a result of risks taken. The purpose of the author's research is to investigate how these characteristics of popular games might inform instructional design by comparing their engagement strategies to those inherent in instructional design. As a result, the author presents an overview of player point of view, the role of narrative in game design and methods employed in interaction design and gauge their relevance to instructional design.

Interaction Design III:

My Planet- Map It: More explanatory feedback, please

http://www.gogirlsonly.org/games/my_planet.asp

The Map It game in the My Planet section of the Girl Scouts “Girls Only” web site would benefit from design enhancements to improve levels of feedback, guidance and control.

The game is designed for users to create a prototype town while seeing the effect on air quality, open space and energy use. As users drag physical structures to the grassy space, the levels of open space, air quality and energy use go up or down in a gauge located at the bottom of the window.

While it is interesting to see that there is an effect on each of these factors as the town is being constructed, the site offers little explanation as to the relative impact each structure would have on these factors. For example, why would adding a factory to the town be worse that adding a stadium? It is difficult to understand why one structure is worse than the next. The degree of movement on the gauges isn’t significant enough to show major changes relative to what you’ve dragged. Also, the site poses a question: “What happens to the air quality when things are added? Why?” How are we supposed to know, when you don’t explain it to us? I certainly don’t understand why adding a parking garage decreases air quality. Cars decrease the air quality, but why would a garage? This leads me to believe that some of the representations are misleading.

The instructions of for how to use the site stay in a static window below the canvas. These instructions change to a description of each object when a user drags the item on top of the canvas. After the object is dropped to the canvas, the site should provide an explanation of why the object impacts air quality the way it does. In my opinion, the addition of explanatory feedback would improve the overall learning experience.

In addition, the degree of user control is curtailed by the design of the site. For example, users can drag structures to the canvas to see the impact on air quality, but cannot drag items off or relocate them on the canvas. The only way to remove items from the town is by wiping out all you’ve added and starting fresh. To make the “ideal” town, you have to redesign your town many times, and if you make a mistake, you’re stuck. By the end of the experience, you become more of an expert on dragging with accuracy than an expert on the relationships between air quality and energy use, unfortunately.

Interaction Design II:

"Designing for Interaction", Chapters 4-5

Chapter 4: What is Design Research?

Design research, according to Saffer, is “the act of investigating, through various means, a product or service’s potential or existing users and environment.” Designers use research methods to obtain information about users and their context in order to better develop solution for the audience in the intended environment. Research gives designers empathy when designing, so as to avoid designing solution that potentially could frustrate or embarrass users.

Research Methods:
Observations: These include the “Fly on the wall” technique, shadowing, contextual inquiry (i.e. shadowing while asking questions about behaviors), and the “Undercover Agent” technique where users are observed covertly.
Interviews: These include direct storytelling, where users are asked to tell stories about times they interacted with a product or service; developing an “Unfocus Group” where a group of experts are assembled in the field to explore a product or service from different viewpoints; role playing, where users are asked to play out different scenarios; extreme user interviews (e.g., working with someone who doesn’t use a service or product); or observing user habits and personalities.
Activities: Include users in an activity that involves making an artifact, (e.g., a collage, model, or drawing).

Chapter 5: The Craft of Interaction Design

Research models are used to organize the information gathered during research to inform the designer’s solution.

Research Models include:

• Charts: linear flow charts, circular flow charts, spider diagrams, venn diagrams, spatial maps and matrices.
• Personas: Often designers derive personas, or archetypal people who use a product or service. Personas are derived from talking to users and are created from observing a common set of behaviors or motivations among the people they’ve researched.
• Scenarios: Scenarios are stories about what it will be like to use the product or service once created. Personas are placed in the context to bring a design to life. One common scenario is the first time user.
• Task Analyses: A tasks analysis is a list of activities required to execute an action that the design must support. Task analysis then determines task flows, where tasks are put in a sensible order. This step shows the logical connections between wire frames.
• Use Cases: Use cases attempt to explain what a certain functionality does and why.
• Wireframes: A set of documents that show structure, information hierarchy, functionality and content.
• Prototypes: Where all the pieces of the design come together , communicating what the devise would resemble.

Interaction Design II:

“Generative Learning Processes of the Brain” by Merlin C. Wittrock

Wittrock’s generative learning functional model contrasts from structural models of learning stating that the brain generates meaningful relations among concepts and between knowledge and experience. Unlike many other models of learning, generative learning does not focus on storing information. The model pays particular attention to the processes learners use to actively generate meaning by constructing relations between new or incoming information and previously acquire information. The model focuses on cognitive learning processes, like attention and motivational processes, like interests. It also focuses on knowledge creation processes, like concepts and the process of generation, including analogies, metaphors and summaries.

The generative learning model has been built on neural research. “Neural systems show self-direction, self-control, motivation and arousal. They receive, devote attention to and integrate multisensory information. They relate multisensory information to knowledge, experience intentions and purpose, all of which are sources of control that regulate the construction of meaning” (535).

For example, when students were asked to build summaries not using text from the exerpts, reading comprehension doubled. In conclusion, designing instruction where learners are asked to relate concepts enhanced understanding more significantly than designing instruction using sturcutral threories of learning.

Interaction Design II:

“The Animation and Interactivity Principles in Multimedia Learning” by Mireille Betrancourt

The authors propose guidelines on when and how to design multimedia for instruction based on a review of the existing literature on the subject.

The scenarios that supports the use of animation include: When a phenomenon is not easily observable in real space and time; when the phenomenon is too dangerous or too costly to realize in a learning context; and when a concept is not inherently visual. Animation can also be used to enable learners to explore a phenomenon.

The author asserts that in many cases the inclusion of animation does not add any benefit as compared with static graphics. Cases where animation does prove helpful, are:

• When animation requires user input to help learners make predictions about the behavior of a system and reach a deeper understanding
• When users have control over the pace of animation. This allows learners to process a continuous flow of information without experiencing cognitive load. Keep in mind, however, that novices often do not have sufficient knowledge to identify the most significant parts of an animation in order to monitor control effectively.

Other guideslines that designers should follow include:

• Ensure contiguity between verbal and graphic information and use signaling to reinforce important information and logical links.
• Consider differences in expertise and in visua-spatial abilities. Novices are assisted by animation in order to formulate a mental model, while experts already have a mental model developed.
• Guide learners’ attention to important information using arrows or highlighting, as novices tend to focus their attention on perceptually salient information.

Animations require a great deal of cognitive load to comprehend and may not elicit any benefit as compared to static graphics. Two conditions should be considered when decided whether to use animation:

• If the phenomenon depicted involves change over time and it can be assumed that learners would not be able to infer the transitions between static steps.
• Learners are novices and cannot form a mental model independently, or if constructing a mental model would required excessive cognitive load.

The author derives five design principles of instruction animation from literature and research:

1. Apprehension principle: additional cosmetic features unnecessary to understanding a phenomenon should be removed from representations; graphic objects should follow the conventional graphic representations in the domain.
2. Congruence Principle: changes in the animation should map changes in the conceptual model: not changes in actual behavior of the phenomenon.
3. Interactivity Principle: Information is better understood if the animation gives learners control over the pace of animation.
4. Attention-Guiding Principle: It is important to guide learners in understanding an animation using perceptually salient features.
5. Flexibility Principle: Instructional materials should include options to activate animation on command.

Interaction Design I:

“Information Interaction Design: A Unified Field Theory of Design,” by Nathan Shedroff

Information interaction design is the intersection of three disciplines: information design, interaction design, and sensorial design. Information design deals with transforming data into valuable and meaningful information, while interaction design is involved the creation of user experiences and is likened to storytelling. Sensorial design is the use of all techniques used to communicate to others through the senses, such as writing, graphic design, typography, and cinematography. It is essential that designers understand the important issues surrounding each discipline so that they can be employed correctly when communicating messages.

Information Design: The Understanding Spectrum describes how data must be manipulated and presented for learners to extract meaning from it. The stages of the spectrum are as follows:

Data - Information - Knowledge - Wisdom

Data must be organized, transformed and presented to have meaning and be of value. Such data that has undergone this transformation is known as information. Information is transformed into knowledge through interaction design, as it is largely participatory and acquired through integration of both the presentation and the mind of the audience. Wisdom is more abstract and personal than other levels of the spectrum. Little research exists on the ability of designers to facilitate wisdom acquisition.

Organization techniques to transform data into information include the following. It is advantageous for designers to employ multiple organization techniques to allow learners to locate the information according to how they learn best.

• Alphabets
• Locations
• Time or sequence
• Continuums
• Numbers
• Categories
• Randomness

Interaction Design: The Interaction Spectra lists properties which are characteristic of an interactive environment. These properties include the following:

• Feedback
• Control
• Creativity/Co-Creativity (i.e. creation tools)
• Productivity
• Communications
• Adaptivity- where the participant shapes the outcome

The article was helpful in understanding that a successful learning environment's design involves a critical blend of information and interaction design. For learners to locate and take advantage of information, it must be organized in an easily navigable environment. It is critical that new learners and repeat visitors are both equally able to achieve their learning goals by accessing the content they need efficiently. Having multiple data organization can help facilitate this goal. At the same time, because knowledge acquisition is participatory, learning environments must support interactivity. The Interaction Spectra includes a nice checklist that designers can follow to ensure that their learning environments support interactivity and learner participation. While not all learning environments will include all of these factors, each learning experience should involve at least one of the factors included in the Spectra to be deemed interactive.

Interaction Design I:

“Designing the User Interface” by Ben Shneiderman and Catherine Plaisant

The article provides guidelines as to how to improve poorly designed user interfaces which generate “debilitating stress and anxiety” (60). Some of these guidelines include:

• Standardize task sequences across similar conditions
• Make embedded links descriptive
• Use heading conceptually related to the content they describe
• Use check boxes for binary choices
• Develop pages that print properly
• Use thumbnail images to preview larger images.

In order to organize the display, designers can follow the following guidelines:

• Terminology, abbreviations, formats, colors, capitalization should be standardized
• Users should not be required to remember information from one screen to the next. Tasks should be arranged so that completion occurs with a few actions, minimizing the chance of forgetting a step.
• Users should be able to adjust the display of data to execute the task at hand.

Designers should know the skill set of users to design appropriately. Novices require sufficient “feedforward”, feedback and tasks with fewer steps to help build confidence. Experts require response time and non-distracting feedback so that they can get their work done quickly.

Designers should not overuse design decisions to gain user’s attention. Be sure that interfaces are simple, logically organized and well-labeled. Designers should follow the eight golden rules of interface design to guide them:

• Strive for consistency
• Cater to universal usability (novices and experts)
• Offer informative feedback
• Design dialogs to yield closure to give users a feeling of closure and accomplishment
• Prevent errors
• Permit easy retrieval of actions; actions should be reversible
• Make users the initiators of actions instead of the responders to actions
• Reduce short-term memory load

Interaction Design I:

Love Him or Hate Him- Barney spells Interactivity

http://www.barney.com/usa/jukebox.html

In exploring websites for children’s’ games, I was most impressed with the interaction design of Barney’s website. I felt the site facilitated age-appropriate interaction and provided excellent feedback for users.

Have you ever been to a two-year old’s birthday party? These days, chances are Barney will make a cameo, engaging the kids in song-and-dance frenzy for about two hours of non-stop activity. Parents can always count on Barney to get the kids moving and never disappoint.

I was curious to see how Barney’s virtual Dance-along jukebox compared to the dance parties I attended. The interactivity the site provided made me like it even better than Barney in the flesh!

Let’s compare the level of interactivity the site affords to Schedroff’s Interactivity Spectra which states that interactive experiences promote each of the following: Feedback, Control, Productivity, Creativity, Communications and Adaptivity.

Feedback: The site provides explanatory feedback at every stage using both symbols and audio. Arrows point to buttons that should be clicked along with an audio explanation. If a song is loading, Barney tells you “Your song will be ready in a minute,” along with a loading message. If you click the “?” button, Barney explains how to use all the buttons necessary to create your dance and customize your experience. There are no dead links or heavy-duty songs to load which create a delayed response in the application.

Control: The user is able to choose her character, the stage background, and the dance moves the character performs. The user is also able to choose the song to be performed.

Productivity and Adaptivity: The site includes a section of “More Features: With a Little Help from a Grownup”. In this section, kids can choreograph a dance, play it back and even send the recording to a friend.

Communications: This is my favorite feature of the site. The site is designed for kids to get up off their chairs and dance with Barney like they do at these birthday parties. Designers made the dance moves easy-to-follow and fun, at times requiring a prop like a blanket. Kids can choreograph a dance and play it back to practice it. I can see kids performing these dances together in groups, facilitating social interactivity as well.

All in all, Barney’s Dance-along Jukebox is a well-designed, age-appropriate site that will keep your kids moving until the next birthday party.

Interaction Design I:

Designing for Interaction, chapters 1-3

Chapter1: What is Interaction Design?

Saffer likens interaction design to the process of “connecting people through the products they use” (3). He describes it as an applied art, offering solutions to real problems in order to foster communications between humans, and to a lesser extent, between human beings and non-human entities such as a computer or digital device. Saffer stresses that interaction design creates connection between people through products and that the art is not about connecting people to the product itself.

Interaction design is a young field and is closely tied to a variety of other disciplines, including industrial design (i.e. the study of human interaction with machines), graphic design (i.e. the practice of creating a visual language to communicate content), user-experience design (i.e. the practice of looking at visual, interaction and industrial design and ensuring they’re in harmony), human-computer interaction, usability engineering and human factors. Interaction design falls entirely under the practice of user-experience design. Information architecture is concerned with how to best structure and label content so that users find the information they need.

While each of these disciplines is distinct, they overlap a great deal. To create a successful product, many of the aforementioned disciplines must work in harmony.

Chapter 2: Defining the Project

After a designer understands the problem that he or she aims to ameliorate through improved interaction design, he or she can follow one of four major approaches to find a solution. These four approaches are:

• User-centered design (UCD) – “Users know best”; Focuses on the needs and goals of users; Users guide the design process; Designers translate user needs and goals into a design. Pros: designers’ experiences can conflict with what users need from a product. Focusing on the user eliminates this conflict. Cons: Relying on users for design input can result in a product with a narrow focus.
• Activity-centered design – Focuses on the tasks that need to be completed; Users perform the tasks while designers create tools for the activities; Designers observe user behavior and are less interested in goals. Pros: All tasks necessary to perform an activity are accounted for in a design. Cons: Automating too many tasks can de-skill humans; focusing on single tasks can make designers lose sight of the “big picture”.
• Systems design – Users an established arrangement of components to create a design solution; Users are deemphasized in favor of context; Focuses on the parts of a system; Users set the goals of the system while designers ensure all parts of the system are in place
  Genius design – Relies on the skills and experience of the designer; Users validate designs while designs are inspired by the designers themselves.

Chapter 3: The Elements of Interaction Design

The basic materials involved in designing solutions are motion, space and time. “Movement through space takes time to accomplish” (47).

• Motion: Motion is often a trigger for action, while the triggered action or feedback generated often involves motion as well.
• Space: Motion occurs in both 2D and 3D space. Often interaction design involves a combination of physical and digital space (e.g. manipulating a control vs. downloading a file).
• Time: All interactions take place over time. Interaction designers should be aware of the time interactions take.

Appearance is also a critical part of interaction design as the affordances of a design provide clues for the user as to how they are to interact with a device. Other import factors to consider when designing for interaction are texture and sound.

Laws of Interaction Design:

• Moore’s Law: Every two years, computer processing power with double
• Fitt’s Law: The time it takes to move from a starting position to a final target is determined by two factors: the distance to the target and the size of the target. Clickable objects should be a reasonable size. Edges and corners of screens are excellent places to position menus and buttons. Pop-up menus can be opened more quickly than pull-down menus.
• Hick’s Law: The time it takes for users to make decisions is determined by the number of possible choices they have. Users will more quickly make choices from one menu of 10 items than from two menus of 5 items each.
• The Magical Number Seven: The human mind is best able to remember information in chunks of seven items
• Tesler’s Law of the Conservation of Complexity: Complexity is inherent to every process. At the point beyond which you can’t simplify a process you can only move the complexity from one place to another.
• Poka-Yoke Principle: When designers put constraints on products to prevent errors, forcing users to adjust their behavior and correctly execute an operations.
• Direct and Indirect Manipulation: Direct manipulation refers to the process where digital objects are manipulated directly in order to mimic an action that might be performed in the physical world. In indirect manipulation, users use a command or menu option to alter an object.
• Feedback and Feedforward: Feedback is some indication that something has happened as a result of interaction. Feedforward is knowing what will happen before you perform an action (i.e. cues or messages). Feedforward allows users to perform an action with confidence because it gives them an idea of what will happen next.

Favorite Quote from Larry Tesler when asked about the personal qualities that make a good interaction designer: “Enough confidence to believe you can solve any design problem and enough humility to understand that most of your initial ideas are probably bad. Enough humility to listen to ideas from other people that may be better than your own and enough confidence to understand that going with other people’s ideas does not diminish your value as a designer.”

Characteristics of Good Interaction Design:

• Trustworthy: Before using a tool, you must trust it can do the job
• Appropriate: Design solutions must be appropriate to the culture, situation and context in which they are used.
• Smart: Products need to prevent users from making mistakes or from working harder than necessary.
• Responsive: Responses from devices should be immediate and uninterrupted.
• Clever: Design solution should be intelligent but not condescending.
• Ludic: Design solutions should be playful and pleasurable.

Information Design:

Vojtechblau.com: Addressing Design Patterns with Success

http://www.vojtechblau.com/

The Vojtech Blau website puts the user in control to explore the degree and type of information they want. At the same time, the information is presented in a digestible manner, never overwhelming the user or deviating from the goal of the site.

The ultimate goal of the Vojtech Blau site is to sell tapestries. In turn, a design decision was made to display an image of a tapestry in the forefront, no matter where you are in the site. Small blue arrows pointing upwards display in the lower-right corner of each tapestry image which can be clicked to display a panel of information about each tapestry, including the name of the tapestry and when it was woven. These blue arrows are predictably in the same place and serve the same purpose on every tapestry image. The information is at the user’s disposal and never takes away from the beauty of the tapestries.

Within each of the five sections of the site, text information displays on top of a small portion of the tapestry in a semi-transparent panel that is collapsible and then expandable on command. This enables visitors to view the entire tapestry on command. The amount of text visible is only enough to fit within the physical constraints of the tapestry, again, never distracting eyes away from the beauty of the art. To view remaining text, users click a scroll arrow at the foot of the window. I like how related information is available within a section and indicates a logical flow of information. For example, in the “About Us” section you are able to click a link to view “Our History” which is located at the foot of the text panel. I appreciate not having to scroll through the entire “About Us” section to be able to click this link. At the same time, I like that this link displays at the foot of the panel, as opposed to in the menu section along the top of the site, eliminating a spatial contiguity issue. Logically, one would read this section after the “About Us” section, so the link should go at the foot of this window.

All in all, this site provides excellent clues as to how to present information in a limited amount of space. The site also serves as a great example of how to use logical symbols to guide users in controlling their journey through a site. The information presented never takes away from the beauty of the tapestries presented at every stage.

Information Design IV:

Realtor.com: An example of stellar information architecture

When you open a listing on Realtor.com, the information is presented in such a way that makes the site far superior to other sites in this subject area. The site makes good use of hierarchy. When you go to Realtor.com there is no question where you need to input data to initiate a search for a home. Then when you select a listing the information on the home is well-organized and easy to locate. Take the listing below:

http://homes.realtor.com/search/listingdetail.aspx?ctid=79921&ml=3&mnp=29&mxp=29&typ=7&sid=e44476afa2a848a6bec7c80f8214f51f&sdir=0&sby=3&pg=1&lid=1083153517&lsn=4&srcnt=31#Detail

When you open the listing, you are presented with four tabs to choose from: Listing Details, Maps & Directions, Photo Gallery and Neighborhood Info. Organizing the listing information into tabs saves significant screen real estate and avoids clutter. Other sites combine all of this information on a single screen. Realtor.com is one of the few sites that will map the listing on a map in the Maps & Directions section enabling you to zoom out to see the "big picture" or zoom in to view more detail.

Information Design IV:

Designing for Interaction, Chapter 6, by Dan Saffer

Interface design is a component of interaction design, and represents what the user sees and experiences. Saffer likens the user interface to “the tip of the iceberg” of the overall interaction design, as the majority of interaction occurs behind the scene. While it is only a single component of the overall interaction design, it is a critical piece as the interface design gives a “voice” to interaction design. In fact, if users do not find the interface comprehensible, usable and pleasurable, they will not reap the benefits of the functionality afforded by the device.

Visual interface design consists of two parts: visual organization and personality. Interface design should “inspire user input and guide system output”. It involves devising a layout that provides structure and hierarchy and identifies what is important to the user. It involves creating a visual flow that directs the users eyes in a logical progression. Some tips for directing user attention is using contrasting fonts or colors or positioning and aligning related objects together. Visual designers must choose appropriate typefaces and follow typographical guidelines for legibility and style, and use color to provide cues for users while creating personality and tone. The bottom line is designers should find the right affordances in elements of design so that users know what to do.

Saffer does an excellent job of describing the interplay between interaction design and interface design. We all have visited websites that display information in the form of a lengthy page of text. In these cases I do not bother to read the text or continue exploring the information available. If the information isn't organized in a way that allows users to access what they need, when they need it, users won't stick around to try to find the answer. This renders the information almost meaningless and underscores why good interface design is so critical.

Saffer describes interface design as enabling this "visual organization" of information. Isn't this also known as information architecture in other articles we've read? Do some authors use these terms interchangeably?

Information Design IV:

"Designing Interfaces" by J. Tidwell

Overview /About Patterns:
Patterns are defined as physical or functional features that improve the usability or comprehensibility of a tool. Patterns are likened to best practices for designers to alleviate tensions which negatively impact user experience. An example of a pattern or solution to a design problem is using a card stack to present a lot of information in a small space or to use a pan and zoom feature to show the “big picture” as well as details on demand. Sets of patterns make up a pattern language.

Patterns are used in a particular progression where decisions regarding scope are made first (i.e. information architecture), followed by page design (i.e. interface design) and then details of interaction with forms (i.e. interaction design).

Information Design IV:

"What is a sign," by C. Pierce

In this excerpt the author provides an explanation of signs as belonging to one of three universal categories: icons, indices, and symbols. Icons serve to convey a likeness to the things they represent by imitating them. Indications, or indices show something about things, on account of their being physically connected with them, like a guidepost, which points to the road that should be taken. Symbols are arbitrary signs, which have become associated with their meanings by usage such as language. In all reasoning, we have to use a mixture of icons, indices, and symbols. In fact, reasoning is defined as an interpretation of signs of some kind.