Human Computer Interaction

Week 8: Display Design Display design

• Effective display designs must provide all the necessary data in the proper sequence to carry out the task

• Mullet and Sano's categories of design principles: – Elegance and Simplicity: unity, refinement and fitness – Scale, Contrast, and Proportion: clarity, harmony, activity, and restraint – Organization and Visual Structure: grouping, hierarchy, relationship, and balance – Module and Program: focus, flexibility, and consistent application – Image and Representation: immediacy, generality, cohesiveness, and characterization – Style: distinctiveness, integrity, comprehensiveness, and appropriateness

Ben Shneiderman & , Designing the User Interface:Strategies for Effective Human-Computer Interaction, Fifth Edition Samples of the 162 data-display guidelines from Smith and Mosier 11-3 & Catherine Plaisant, Designing the User Interface:Strategies for Effective Human-Computer Interaction, Fifth Edition Display design (cont.) • Field layout – Blank spaces and separate lines can distinguish fields. – Names in chronological order, alignment of dates, familiar date separators. – Labels are helpful for all but frequent users. – Distinguish labels from data with case, boldfacing, etc. – If boxes are available they can be used to make a more appealing display, but they consume screen space. – Specify the date format for international audiences – Other coding categories – background shading, color, and graphic icons

11Ben- 4Shneiderman & Catherine Plaisant, Designing the User Interface:Strategies for Effective Human-Computer Interaction, Fifth Edition Display design (cont.)

• Empirical results – structured form superior to narrative form – improving data labels, clustering related , using appropriate indentation and underlining, aligning numeric values, and eliminating extraneous characters improves performance – performance times improve with fewer, denser displays for expert users – screen contents should contain only task-relevant information – consistent location, structure, and terminology across displays important – sequences of displays should be similar throughout the system for similar tasks – sequences of displays should be similar throughout the system for similar tasks

11Ben- 5Shneiderman & Catherine Plaisant, Designing the User Interface:Strategies for Effective Human-Computer Interaction, Fifth Edition Display design (cont.) • Display-complexity metrics – Although knowledge of the users’ tasks and abilities is key to designing effective screen displays, objective and automatable metrics of screen complexity are attractive aids • Tullis (1997) developed four task-independent metrics for alphanumeric displays: – Overall Density – Local Density – Grouping – Layout Complexity

11Ben- 6Shneiderman & Catherine Plaisant, Designing the User Interface:Strategies for Effective Human-Computer Interaction, Fifth Edition Display design (cont.)

• Sears (1993) developed a task-dependent metric called layout appropriateness to assess whether the spatial layout is in harmony with the users’ tasks

11Ben- 7Shneiderman & Catherine Plaisant, Designing the User Interface:Strategies for Effective Human-Computer Interaction, Fifth Edition Web page design

The top ten mistakes of web-based presentation of information (Tullis)

11Ben- 8Shneiderman & Catherine Plaisant, Designing the User Interface:Strategies for Effective Human-Computer Interaction, Fifth Edition Web page design (cont.)

• Numerous guidelines for web designers are available on the Web and can be incorporated into your design process to ensure consistency and adherence to emerging standards. • Examples include, but are not limited to: • The Java Look and Feel Design Guidelines, Second Edition (Sun, 2001) • Sun’s Web Design Guide (Sun, 2008) • The National Cancer Institute’s Research-Based Web Design & Guidelines (NCI, 2008) • The World Wide Web Consortium’s Web Accessibility Initiative (WAI, 2008) • The Web Style Guide (Lynch and Horton, 2008) • There are numerous web sites that address web design, some of which were created as companions to relevant books: • Web 2.0 How-To Design Guide (Hunt, 2008) • Web Bloopers (Johnson, 2003) • KillerSites.com (Siegel, 1997)

11Ben- 9Shneiderman & Catherine Plaisant, Designing the User Interface:Strategies for Effective Human-Computer Interaction, Fifth Edition Web page design (cont.)

Mash-ups are web pages or applications that integrate complementary elements from two or more sources (for example, Craigslist and Google ™

11Ben- 10Shneiderman & Catherine Plaisant, Designing the User Interface:Strategies for Effective Human-Computer Interaction, Fifth Edition Window design

• Introduction – Users need to consult multiple sources rapidly – Must minimally disrupt user's task – With large displays, eye-head movement and visibility are problems – With small displays, windows too small to be effective – Need to offer users sufficient information and flexibility to accomplish task, while reducing window housekeeping actions, distracting clutter, eye-head movement • opening, closing, moving, changing size • time spent manipulating windows instead of on task – Can apply direct-manipulation strategy to windows – Rooms - a form of window macro that enables users to specify actions on several windows at once

11Ben- 11Shneiderman & Catherine Plaisant, Designing the User Interface:Strategies for Effective Human-Computer Interaction, Fifth Edition Window design

• Coordinating multiple windows – Designers may break through to the next generation of window managers by developing coordinate windows, in which windows appear, change contents, and close as a direct result of user actions in the task domain – Such sequences of actions can be established by designers, or by users with end-user programming tools – A careful study of user tasks can lead to task-specific coordinations based on sequences of actions – Important coordinations: • Synchronized scrolling • Hierarchical browsing • Opening/closing of dependent windows • Saving/opening of window state

11-12 Window design

Hierarchical browsing has been integrated into Windows Explorer to allow users to browse hierarchical directories, into Outlook to enable browsing of folders of e-mails and into many other applications. Hierarchical browsing in the XperCASE tool example here (now called EasyCASE with EasyCODE).

The specification is on the left. As users click on components (DoubleAttrWebAdapter), the detail view appears on the right in a Nassi-Shneiderman .

Ben Shneiderman & Catherine Plaisant, Designing the User Interface:Strategies for Effective Human-Computer Interaction, Fifth Edition Window design

• Image browsing – A two-dimensional cousin of hierarchical browsing • Work with large images • Overview in one window (context), detail in another (focus) • Field of view box in the overview • Panning in the detail view, changes the field of view box • Matched aspect ratios between field of view box and the detail view

11Ben- 14Shneiderman & Catherine Plaisant, Designing the User Interface:Strategies for Effective Human-Computer Interaction, Fifth Edition • Zoom factors: 5-30 – Larger suggests an intermediate view is needed • Semantic zooming • Side by side placement, versus fisheye view

11-15 Window design

• Image browsing (cont.) – The design of image browsers should be governed by the users’ tasks, which can be classified as follows: • Image generation • Open-ended exploration • Diagnostics • Navigation • Monitoring

11Ben- 16Shneiderman & Catherine Plaisant, Designing the User Interface:Strategies for Effective Human-Computer Interaction, Fifth Edition Window design

• Personal role management – A role centered design emphasizes he users’ taks rather than the applications and documents • Vision statement • Set of people • Task hierarchy • Schedule • Set of documents

11Ben- 17Shneiderman & Catherine Plaisant, Designing the User Interface:Strategies for Effective Human-Computer Interaction, Fifth Edition Window design

• Personal role management (cont.) – The requirements for personal role management include: • Support a unified framework for information organization according to users' roles • Provide a visual, spatial layout that matches tasks • Support multi-window actions for fast arrangement of information • Support information access with partial knowledge of its nominal, spatial, temporal, and visual attributes and relationships to other pieces of information. • Allow fast switching and resumption among roles • Free user's cognitive resources to work on task domain actions rather than interface domain actions. • Use screen space efficiently and productively for tasks.

11Ben- 18Shneiderman & Catherine Plaisant, Designing the User Interface:Strategies for Effective Human-Computer Interaction, Fifth Edition Color

• Color can – Soothe or strike the eye – Add accents to an uninteresting display – Facilitate subtle discriminations in complex displays – Emphasize the logical organization of information – Draw attention to warnings – Evoke string emotional reactions of joy, excitement, fear, or anger

11Ben- 19Shneiderman & Catherine Plaisant, Designing the User Interface:Strategies for Effective Human-Computer Interaction, Fifth Edition Color

• Guidelines – Use color conservatively – Limit the number and amount of colors – Recognize the power of color to speed or slow tasks – Color coding should support the task – Color coding should appear with minimal user effort – Color coding should be under user control – Design for monochrome first – Consider the needs of color-deficient users – Color can help in formatting – Be consistent in color coding – Be alert to common expectations about color codes – Be alert to problems with color pairings – Use color changes to indicate status changes – Use color in graphic displays for greater information density

11Ben- 20Shneiderman & Catherine Plaisant, Designing the User Interface:Strategies for Effective Human-Computer Interaction, Fifth Edition Color

11-21 Ben Shneiderman & Catherine Plaisant, Designing the User Interface:Strategies for Effective Human-Computer Interaction, Fifth Edition Data Art is an interaction designer at Nokia, who looks at how "complex interconnectedness" can be understood. He takes the data he collates and tries to create novel ways of showing it. The Remotest place on Earth

On April 18th 2009, the New Scientist published an article on a remarkable project developed by researchers at the European Commission's Joint Research Centre in Ispra, Italy, and the World Bank. The authors combined a series of maps to create a new of connectedness showing the most interconnected and remote places on earth. The maps are based on a model which calculated how long it would take to travel to the nearest city of 50,000 or more people by land or water. The model combines information on terrain and access to road, rail and river networks. It also considers how factors such as altitude, steepness of terrain and hold-ups like border crossings slow travel.

Paris Metro by Harry Beck

The significance of Harry Beck's map design of 1933 is widely recognized as one of the seminal works in Graphic and , and a major influence to all subsequent underground maps of the world. It's only when you see it next to its predecessor from 1932, with its convoluted geo-based arrangement, that the brilliance of Beck's design really comes to life, in a diagram that is as fresh and original as if it had been created today MY FLIGHTS, Commercial Airline Tracks, London. 2009

Data visualisation of a social network

On the first poster you can see the functions used, as well as additional information, such as age, educational background, family status, gender and how often they are logged in. In a glimpse, a view into the key demographic data available for every member's profile. The second poster gives you an overview of the geographic location of all members, based on a world map. The aim was to provide the management team with a tool that would allow a better understanding of the community members, rather than a just a simple scan of their database. Felix has also developed a flash based interactive tool that allows users to navigate through all the collected data. Travel Times on Commuter Rail

This map by Amanda Cox and Matthew Ericson from The New York Times represents the travel times, in minutes, from Manhattan to stations in the region's commuter rail system during the evening rush. Each alternating ring shows how much farther you can travel in an additional 15 minutes, while the different color nodes are indicative of how fast, on average, the train travels to reach that station (in m.p.h.): red (15-25), orange (25-35), yellow (35-45), green (45+). Travel times are based on trains departing Penn Station (New Jersey Transit, L.I.R.R.) or Grand Central Terminal (Metro-North) between 4 and 7 pm on weekdays. An average of the three fastest trains was used to capture the effect of express trains.

NYC Subway Map Redesign

Eddie Jabbour, Creative Director at Kick Design, New York, is a tireless advocate for a new map design and communication solution for the world's most complex subway system. The NYC subway is indeed a challenge by itself. It has the biggest number of stations in the world (468), the second longest network and it's seventh in daily passenger numbers.

But that didn't seem to intimidate Eddie Jabbour, who has produced a truly impressive proposal for redesigning the subway map. He has made it easier to see all the different lines and made it clearer to identify the stations. The new map has not yet been released in totality, but Kick Design has put some samples out, which look exciting. • Data is dynamics. Data is a live material in the sebse that it may be updated moment by moment. Live digital art depends on this constant refresh of the data source.

The challenge of data Artist enjoy working with things that are overlooked by others, and there are many instance of original work based on their handling of statistical and other forms of data. The major challenge is to provide such data with an interface that is appropriate and allows it to contribute effectively to the artist’s ideas. It also needs to help the viewer to see the data being used in a different context as well as making it accessible. The accuracy of the data being used in this kind of work is not compromised but the artists transform it, reconfiguring it on their own terms within a new kind of structure 1hr in front of the TV

This is a simple, curious and imaginative experiment. On Christmas 2006, bumblebee (flickr name) decided to build a visual summary of his son, daughter and cat's movements in their living room over a period of an hour. Imagination and data are two words that might not seem to fit very easily together. Data’s importance seems to come to the fore at a mundane level when there is a necessity to get a job completed. Its systems depend on a very materialistic view of the world where everything is measurable and a little bit predictable. On the other hand,imagination is needed at the beginning of any idea and is associated with innovation and progress. When imagination comes into play, expected the unexpected. 3D Dewey

Syed used one year's (2008) transaction data (books, DVDs, etc) from the Seattle Public Library to drive this visualization. Each particle/sphere is given properties, pertaining to each category/subcategory of the Dewey system it represents and the amount of checked out items in that category. This allows users to quickly view all the categories in a 3D space and differentiate which category had more traffic for the specific month and what sub- category was most popular. The visualization could also accommodate automatic updating to show popularity throughout the day at the library. A physics system is used to separate the nodes evenly on the surface of the sphere (via electromagnetic repulsion), while a specific algorithm clusters the category-related nodes together.

5 years Designerlist

To celebrate the fifth anniversary of the design mailing list at the University of Applied Sciences Potsdam, Germany, Matthias Dittrich, an interaction design student at the institution, developed a series of visualizations of the current email dataset. The aim of the work was to show when, and how fast were emails being replied. All emails of a particular weekday were shown in a 24-hour time strip. The replied emails are represented by an arc linking to the original email source. Shown here are snapshots of two different days analyzed in the study. Information collected from different places, and then made available to control events at one specific location.

GPS(global positioning system) information about the current location of large sea mammals. GPS data from taxis within a city. The location of visitors to a conference.

Technologies required:

•GPS receiver and transmitter. •Access to the internet, programmed to interpret and use GPS data. Making information accessible

The way in which information is presented can determine whether it is communicated effectively or remain opaque and remote, separate from the audience for whom it is intended. The reasons for this may be mainly to do with:

• The volume of other information that is competing for attention • The internal dynamic of the information as part of an ongoing story. • The significance of the information within the mind of the audience • The immediate emotional impact of what is reported. Q & A