Posts Tagged ‘ graphics

The Eye of the Beholder – Why We Prefer Rounded Corners Over Sharp Edges

Rounded rectangles are everywhere. You might think the reason they are so ubiquitous is because web and product designers’ minds are being controlled by an alien graphical design style ray that shows little chance of letting go. Or, maybe not. Beauty, in the case of the rounded rectangle, might be in the eye of the beholder – literally.

Apparently the visual system favors rectangles with rounded corners, making layouts, interfaces and presentation graphics easier to view and take in. Having a hard time believing that rounded corners make a difference, try this. Look at the images below. Which is easier to look at?

Attribution: uxmovement.com

The reason the circle appears more agreeable is because we are wired to prefer round to sharp edges (and by extension round to sharp things). Keith Lang at UI&Us quotes researcher Jürg Nänni on the eye-brain’s peculiar penchant for roundness:

A rectangle with sharp edges takes indeed a little bit more cognitive visible effort than for example an ellipse of the same size. Our ‘fovea-eye’ is even faster in recording a circle. Edges involve additional neuronal image tools. The process is therefore slowed down. – Professor Jürg Nänni as quoted by Keith Lang (see below)

Anthony Tseng at UX Movement presents two other examples where rounded corners aid and abet the perception of graphical information. The box diagram is a common graphical type used in organization charts and process diagrams. Note the differences between the rectangular and rounded lines. The curves add flow to the procession through the diagram.

Attribution: FMC Visualization Guidelines

In a second example Anthony Tseng shows how rounded corners not only guide the eyes but also act on the attention of the viewer. In what might be a great tip for instructional designers and artists notice how the use of the corner radius acts to focus attention on what is inside the boxes.

 

Attribution: Anthony Tseng

Rounded corners also make effective content containers. This is because the rounded corners point inward towards the center of the rectangle. This puts the focus on the contents inside the rectangle. – Anthony Tseng at uxmovement.com

 

Still wondering why we see so many rounded rectangles in objects around us?

Attribution: UI&Us

 

References

Tseng, Anthony, “Why Rounded Corners are Easier on the Eyes

Lang, Keith, “Realizations of Rounded Rectangles

FMC Visualization Guidelines

Rating 3.00 out of 5
[?]

Make Mine Comic Sans – Bad Fonts Aid Learning

Ransom note typography pays off in learningIf you are the kind of designer who cannot tell the difference between Times and Helvetica, you’re in luck. A recent study by a team from Princeton and Indiana Universities shows that educational presentations that are hard for students to read may lead to improved memory performance. In the technical jargon of cognitive psychology the reason for this counter-intuitive result is due to the heightened “disfluency” caused by poor typography that leads to deeper processing (or encoding) in the brain.

Many classroom instructors and and instructional designers assume that clearer, easier to read, media reduce the “friction” of learning and act to promote and accelerate the transmission of new ideas and skills. Not so, say Connor Diemand-Yauman, Daniel Oppenhiemer and Erikka Vaughan who penned the study soon to be published in the journal Cognition. In some cases, they assert, making material harder to learn actually improves long-term memory. What’s worse, they have the control group data to prove it.

“Many educators believe that their ability to teach effectively relies on instinct and experience. However, research has shown that instinct can be deceiving and lead to educational strategies that are detrimental to learners.” – Diemand-Yauman, et al.

Two studies were undertaken to test the hypothesis that “desirable difficulties” can lead to enhanced learning. In the first, twenty-eight participants ranging in age from 18 to 40 were asked to learn fictional taxonomic data similar to that found in biology classes. The disfluent media presented the material in 12-point Comic Sans rendered in 60% grayscale or 12-point Bodoni MT also in 60% grayscale. The fluent media used 16-point Arial rendered in plain black. (It should be noted that the author knows more than one professional designer who considers Arial to be at least as disfluent as Comic Sans, grayscale notwithstanding.)

Participants were given 90 seconds to memorize their fictional taxonomic data. For example:

The norgletti

  • Two feet tall
  • Eats flower petals and pollen
  • Has brown eyes

Each data set like the above was composed of three species of aliens, each with seven features, for a total of 21 items to be learned. After 90 seconds of study the participants were distracted for 15 minutes with another task after which their recall was tested (“What is the diet of the norgletti?”).

The results? Fluent learners successfully recalled 72.8% of their data. Disfluent learners scored higher: 86.5%! What’s more, differences between the two disfluent fonts were not found (probably because ugly is ugly).

“Similarly, many education researchers and practitioners believe that reducing extraneous cognitive load is always beneficial for the learner. In other words, if a student has a relatively easy time learning a new lesson or concept, both the student and instructor are likely to label the session as successful even if the student is unable to retrieve the information at a later time.” – Diemand-Yauman, et al.

Not wishing to hastily generalize their preliminary results to classroom conditions, Diemand-Yauman, Oppenhiemer and Vaughan arranged a study with 222 Ohio high school students (ages 15-18). In the high school study teacher-prepared instructional content (Powerpoint and worksheets) were reformatted (but not edited) using disfluent fonts or left unchanged. Different sections of the classes were randomly assigned to a disfluent or control group. Teachers were told that the study focused on the effects of different fonts in presentations to counteract the Pygmalion Effect. After the classes were presented in normal fashion exams were given along with a survey to assess whether disfluency affects motivation.

The results? Once again the disfluent group scored higher (m=0.164, sd=1.03; m=-0.295, sd=1.03; using Z-scores) and there was no difference between ugly fonts. Further, the survey revealed no motivational differences between fluent and disfluent presentations.

The authors warn that interpretation of the results and their subsequent application in the classroom be cautiously undertaken. First, the novelty and distinctiveness of the disfluent fonts might be a factor enhancing their “desirable difficulty.” Another issue is that the point at which a typeface changes from “desirably difficult” to “illegible” is not known.

The authors concede that there is a point at which “disfluent” pushed to its extreme becomes “impossible,” hindering learning altogether.

At present it seems as though the tonic effects of disfluency probably follow a U-shaped curve and that the exact parameters that affect the shape have to be teased out through further experiment.

Another question is whether this disfluent effect will be seen with other media as well. The authors of this study only considered typographic media, but one has to wonder if it is possible to obtain similar results with audio and video.

References.

Diemand-Yauman, C., et al. Fortune favors the Bold (and the Italicized): Effects of disfluency on educational outcomes. Cognition (2010), doi:10.1016/j.cognition.2010.09.012

McDaniel, M. A., Hines, R., & Guynn, M. (2000). When text difficulty benefits less-skilled readers. Journal of Memory and Language, 46(3), 544–561.

McNamara, D. S., Kintsch, E., Butler-Songer, N., & Kintsch, W. (1996). Are good texts always better? Text coherence, background knowledge, and levels of understanding in learning from text. Cognition and Instruction, 14, 1–43.

Oppenheimer, D. M. (2008). The secret life of fluency. Trends in Cognitive Sciences, 12(6), 237–241.

Sweller, J., & Chandler, P. (1994). Why some material is difficult to learn. Cognition and Instruction, 12(3), 185–233.

Rating 3.00 out of 5
[?]

Visual Oxymorons: Nonverbal Messages in Design

I don’t think this is much taught in Instructional Design courses, but the design of a presentation conveys information in and of itself to the audience. This is due in large part to the fact that all the elements of a course or presentation (including the presenter) constitute a Gestalt that is projected to the audience.

Good design matters because good design leads to clarity. And clarity facilitates perception.

The design elements often constitute the ground in the figure-ground relationship of the medium, but the whole package conveys a message. The medium is the message.

As an example of how design sends nonverbal cues to the viewer, take a look at the short talk by John McWade of Before & After Magazine. Although taken completely from the design world the example captures the effects of font, color and shape passed as a subliminal message to the unsuspecting eye.

It is not hard to cite these effects in educational media and presentations. How often does a slide, presentation or workshop exercise say “boring” or “we don’t care” or “this is not important” or “this is hard to understand” to an audience? Media evoke reactions from the viewer and the reactions are often affective in nature. Connie Malamed at the eLearning Coach puts it this way:

“This has strong implications for learning, because of the impact positive or negative feelings have on motivation, comprehension and retention.”

We design educational media for a reason. Well designed media lower the barriers to comprehension and assist the mastery of new skills. Things that detract from these goals include boring and inept graphics, awkward symmetry and poor layouts, illegible typefaces, abrasive or boring color schemes, and too much information.

For more information on good design see:

Before & After Magazine

How Visual Clarity Affects Learning,” The eLearning Coach

Visual Language for Designers

Rating 3.00 out of 5
[?]

Edward Tufte Presidential Appointment

THE WHITE HOUSE Office of the Press Secretary
FOR IMMEDIATE RELEASE, March 5, 2010:

“President Obama Announces More Key Administration Posts

Edward Tufte, Appointee for Member, Recovery Independent Advisory Panel
Edward Tufte is Professor Emeritus of Political Science, Statistics, and Computer Science at Yale University. He wrote, designed, and self-published The Visual Display of Quantitative Information, Envisioning Information, Visual Explanations, and Beautiful Evidence, which have received 40 awards for content and design. He is a Fellow of the American Academy of Arts and Sciences, the Guggenheim Foundation, the Center for Advanced Study in the Behavioral Sciences, the Society for Technical Communication, and the American Statistical Association. He received his PhD in political Science from Yale University and BS and MS in statistics from Stanford University.”

From ET:

“I will be serving on the Recovery Independent Advisory Panel. This Panel advises The Recovery Accountability and Transparency Board, whose job is to track and explain $787 billion in recovery stimulus funds:

‘The Recovery Accountability and Transparency Board was created by the American Recovery and Reinvestment Act of 2009 with two goals:To provide transparency in relation to the use of Recovery-related funds.
To prevent and detect fraud, waste, and mismanagement.
Earl E. Devaney was appointed by President Obama to serve as chairman of the Recovery Board. Twelve Inspectors General from various federal agencies serve with Chairman Devaney. The Board issues quarterly and annual reports to the President and Congress and, if necessary, “flash reports” on matters that require immediate attention. In addition, the Board maintains the Recovery.gov website so the American people can see how Recovery money is being distributed by federal agencies and how the funds are being used by the recipients.

Mission statement: To promote accountability by coordinating and conducting oversight of Recovery funds to prevent fraud, waste, and abuse and to foster transparency on Recovery spending by providing the public with accurate, user-friendly information.’

I’m doing this because I like accountability and transparency, and I believe in public service. And it is the complete opposite of everything else I do. Maybe I’ll learn something. The practical consequence is that I will probably go to Washington several days each month, in addition to whatever homework and phone meetings are necessary.”

http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0003e0&topic_id=1#

Rating 3.00 out of 5
[?]

The Dynamics of Confusion – or- When More Isn’t Better

Needles and haystacks and suchGeorge Siemens at elearnspace mentioned a remarkable site called Indexed in a recent blog post. Indexed author Jessica Hagy uses mathematical metaphors in sketches of relationships that span topics from consumption and arrogance to expectations, communications and perception. Hagy claims in her About page that Indexed “… is a little project that allows me to make fun of some things and sense of others without resorting to doing actual math.” To be fair to all the mathphobes out there, the mathematics is rather mild and, more to the point, Hagy’s adept skill at using Venn diagrams and xy-graphs reminds me of what must be one of the primary objectives we all face when creating technical graphics:  transform complex observations and relationships into simple and appealing visual designs. A good graphic after all is a data compression scheme. It’s no wonder then that it’s often easier for many people to remember the graphic than the explanatory text.

I wonder if the relationship between confusion and information is really parabolic? Hmm….

Rating 3.00 out of 5
[?]

Do Graphics Matter?

mm_learning

Although I find that teaching the history of a subject is often a big help in understanding its present state, recent reseach from Amsterdam suggests that using illustrations (drawings and diagrams) in the teaching of history might have no positive effect on learning. Dr Maaike Prangsma and associates looked at the effectiveness of using various illustrations in the teaching of history and found that no discernible differences could be found in test results between illustrated and plain text presentations immediately after the instruction was delivered or six weeks later. Interestingly, the students did say that on the whole the graphics made the learning easier, leading investigators to conclude that the illustrations might enhance the efficiency of the training. The British Psychological Society’s report on the study claims that:


“The key finding was that the nature of the learning task made no difference to learning outcomes. The plain text version appeared to be just as effective as the versions involving a diagram, drawings, or combination of the two. The researchers were surprised by this result and offered a number of possible explanations. For example, perhaps the initial text on the fall of the Roman Empire was so effective it undermined any possible differential effects from the learning tasks. Or perhaps graphics aid science learning because there are clear rules about what different signs and symbols mean, whereas history lacks these conventions and the students therefore didn’t know how to use the visual aids.”

In agreement with a basic philosophical tenet underlining this blog, the authors of the study concur that garnering a positive appreciation of the subject matter presented is not to be ignored:

“The goal of educational motivation is not only to make learning more efficient … or effective … but also to make learning more pleasant such that the affective learning experience is more satisfying and learners will want to learn more.”

Further information concerning this study can be found in rewiew here.

Prangsma, M., van Boxtel, C., Kanselaar, G., & Kirschner, P. (2009). Concrete and abstract visualizations in history learning tasks. British Journal of Educational Psychology, 79 (2), 371-387 DOI: 10.1348/000709908X379341

Rating 3.00 out of 5
[?]

The Danger of Gratuitous Animation

Researcher Stephen Mahar of the University of North Carolina, Wilmington, and his colleagues have tested the effect of routine garden-variety animations on the learning of new concepts. Often used by presenters and designers in classrooms and training sessions, these stock slide show animations commonly found in programs like PowerPoint might have a negative effect on student learning.

The team used two versions of a presentation prepared in Microsoft PowerPoint, one with animation, the other without. Students were shown one version of the presentation and tested for comprehension and recall. Apparently, recall of static graphics was much better resulting in higher test scores among the group using non-animated presentation. There are some questions concerning what precisely was being animated (that is, why was animation employed?) and what was the nature of the animation? Further, Mahar et al. go on to suggest that the animation acted as a distraction rather than an enhancement given the nature of the material being presented (factual and “incremental”). Mahar and et. conclude that although the animations were received well by the audience, the benefit to learning is not only missing, it is counter-productive.

The researchers caution that the study evaluated teaching new concepts and it is possible that training more akin to a procedure, method or technique might prove a better match for animated graphics. A follow-up study is planned.

A report of this study is published in the International Journal of Innovation and Learning (“The dark side of custom animation” in Int. J. Innovation and Learning, 2009, 6, 581-592 ). See also: “Less is More When Developing PowerPoint Animations.”

Rating 3.00 out of 5
[?]