Week 13 & 14

What are the characteristics of a well designed website?

• Well-organized • Easy to navigate • Attractive • Useful • Up-to-date • Interactive • Dynamic, engaging • Adaptive/responsive design

Below are a few principles, suggestions, and questions for improving your information graphics.

�� What is most important? �� Keep it simple. �� Show comparisons, contrasts, and differences. �� Is the language clear and easy to understand? �� Is the choice of typeface clear and legible at a glance? �� Is your title clear? �� Do your graphics require a legend to label the patterns and symbols you use? �� Is your documentation clear? �� Consider the limitations and opportunities inherent in your medium of publication.

Some key questions for data collection

�� What story do you want to tell? �� To whom? �� How do you want to reach them?

Edward Tufte, a speaker and author on infographics recommends that a high quality infographic should do the following

1. Have an important message to communicate 2 . Convey information in a clear, precise and efficient manner 3. Never insult the intelligence of readers and viewers 4. Always tell the truth

Before designing, establish the following:

- What communication problems the site is intended to solve - The target audience(s) - The objectives of the website in terms of content • Aim for a maximum of three clicks to find any item of information

What are the guidelines for navigational design? Aim for ease-of-use:

- consistent navigation across pages - legibility of text against backgrounds - understandable language - a link to the home page from any sub-page - minimal or compelling/logical vertical scrolling - Little or no horizontal scrolling

Visual analytics is a multidisciplinary field that includes the following focus areas:

-analytical reasoning techniques that let users obtain deep insights that directly support assessment, planning, and decision making; -visual representations and interaction techniques that exploit the human eye's broad bandwidth pathway into the mind to let users see, explore, and understand large amounts of information simultaneously; -data representations and transformations that convert all types of conflicting and dynamic data in ways that support visualization and analysis; and -techniques to support production, presentation, and dissemination of analytical results to communicate information in the appropriate context to a variety of audiences.

When designing a web page consider four aspects of presentation:

Contrast Repetition Alignment Proximity Design and development of the site should respond to the user's behavior and environment based on screen size, platform and orientation. A mix of flexible grids and layouts, images and an intelligent use of CSS media queries (technique for delivering a tailored style sheet to desktops, laptops, tablets, and mobile phones). As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities.

How Can You Use Information Design?

Here are just a few ways you can use information design: Tell Your Story Analyze Your Data Make a Plan Make Information Visible Simplify and Clarify

Design for your audience, not for you

If your audience doesn't get it, it's no good for you. Identifying your audience will help determine the tone of your language and the format of your publication. Design that is easy to understand can be better evaluated for its credibility.

Famous example where information design was used to tell a powerful, persuasive story on behalf of a cause.

In 1859, physician John Snow mapped deaths from a devastating cholera outbreak in London to determine its cause. Snow gathered data by talking to local residents. His map revealed a pattern of infections around the Broad Street water pump. Despite skepticism, he collected enough evidence to prompt officials to shut down the pump, after which the epidemic quickly ended. Snow's work promoting the idea that the disease was spread through contaminated water became a major turning point in the history of public health.

What are the guidelines for the use of graphic imagery?

In selecting images you should ask questions such as: • Is the image relevant to the theme or content? • What colors may be important to consider? • What is the purpose of the visual? • Is a photo meant to be factual or emotional, or both? • Does it have an engaging or informative composition? • Should a visual be an illustration or a photo or a video? • If animated, how does movement add information? • How long should time based information be? When combining several images on the same page you should ask: • Is there an idea or concept which links the images?

What is Information Design?

Information design uses pictures, symbols, colors, and words to communicate ideas, illustrate information or express relationships visually. Information design tells a story with pictures. Information design is about making your data: Clear It makes complex information easier to understand. Compelling Uses visuals that grab people's attention. Convincing People who might not be persuaded by raw numbers or statistics may be more likely to understand and believe what they see in a chart or graphic.

What kind of data is best presented as a chart, as a diagram or as a map?

Maps are useful for showing spatial issues or locations. Charts are useful for showing quantities and trends over time. Diagrams and flowcharts may best illustrate processes or relationships. How do you know what information to focus on and what to exclude?

What are the guidelines for typographic strategy?

Rules to remember - Choose fonts that • Fit the character of your site • Are easily readable on a computer screen • Are widely available across many browsers and operating systems - Provide alternatives for unsupported fonts on different browsers and devices

People use visual analytics tools & techniques to

Synthesize information and derive insight from massive, dynamic, ambiguous and often conflicting data sets Detect the expected and discover the unexpected - to learn! Provide timely, defensible, and understandable assessments Communicate assessment effectively for action

cause and effect infographics

These graphs explain causal relationships between various physical or conceptual stages; for example, the causes of the recession in the US and its effect on the global economy

Website Design needs to focus on

Usability, Accessibility and Content

How does the act of browsing and todays typical short attention span impact the way one should design a website?

We need to anticipate that viewers will decide within 3 seconds whether they will stay on the site or not, so the design needs to draw and maintain attention effectively. Pages full of clutter present a case of information overload and may make the viewer quickly move on.

What is gamification and how can it increase user interest?

a technique in which gaming mechanics are applied non-game activities to change people's behavior or to make it more fun and engaging for users. -ing a company's website can help make customers more interested in the business and more motivated to return to the website. It applies unique game design elements, such as custom quizzes, training interfaces and interactive elements, throughout your website. These interactive features help to drive engagement, encourage active learning and foster friendly competition.

Product infograpahic

can be seen on notice boards at factories and corporate offices, conveying information to all employees and visitors. Product infographics are also used by dietitians and in cooking schools to convey key procedures. Combining images with data makes it easier to comprehend large amounts of information in a limited space. understanding how to work your new food processor is simple if you look at the images on the back of the box. Imagine how difficult it would be without the images.

directional infographics

can navigate readers through information. Numbers, symbols, icons, diagrams, graphs, tables, arrows and bullets are used to communicate information. We all saw these infographics in our school days. Traffic symbols, scale maps and navigational aids on streets and highways are common examples. Numbers are used to indicate the distance, and dots, arrows and bullets are used as landmarks for directional aids.

Functional Design Aim for ease-of-use:

consistent navigation across pages legibility of text against backgrounds understandable language a link to the home page from any sub-page minimal or compelling/logical vertical scrolling Little or no horizontal scrolling

Quantitative infographics

convey statistical data to readers quickly and clearly. these graphics include charts, bar graphs, tables and lists. Statistical tools such as pie charts also help summarize complex data. Can be regarded as flow charts of an organizational structure that explain the hierarchy and responsibilities of different positions

chronological infographic

explain an event or process as it happened in time. presenting information on a timeline enabled readers to analyze the temporal relationship between various stages of a process. For example, a bar chart that shows the growth in sales of a particular product over a period of time is this.

Visual analytics

the science of analytical reasoning facilitated by interactive visual interfaces. People use visual analytics tools and techniques to synthesize information and derive insight from massive, dynamic, ambiguous, and often conflicting data; detect the expected and discover the unexpected; provide timely, defensible, and understandable assessments; and communicate assessment effectively for action. -synthesize -detect -provide -communicate