Recently in Graphics Category

Mind Maps Gone Wild

| | Comments (0)

Scott McDonald on the Stuff Blog pointed out a great mind map parody on Flickr and I have to agree - it's really one messy mind map. I'll replicate the effect of this mind map in this history of English concept map (you can see the clean concept maps here).

Tree showing dialects of English in multiple colors and shapes

A few months ago, I claimed that many concept maps were unclear to me because the arrows were labeled. In the parody though, the labels are rarely labeled, yet I still read it as one hot mess. The problem here really is bad design. One, there's very little white space (because the only gap left was filled with a brain or a helmet, depending on the image).

Another is that a large multitude of shapes and color are used but not assigned a meaning. My entry did mention a comment that many maps associate different shapes with different concepts and that it may make sense to use a consistent scheme. Hmmm

Of course, we've all seen lots of happy messy mind maps full of a wild mix of shapes, images, colors and photos - like this mystery mind map from the Burnham Grammar School in the U.K. The original newsletter Web Site asks "Can you unravel the mysteries of the mind map? Clue: Year 7 trip..." My answer is alas "not very quickly."

That Text is Too Rich For Me

| | Comments (2)

There are a lot of tech trends out there to comment on, but one of the sillier, in my opinion, is the tendency for cut and paste to capture formatting as well as text. Capturing format is useful if you are moving a table or a paragraph from one section of a Word document. The same is true for text blocks in Photoshop and bullet points in PowerPoint.

But what about BETWEEN applications? The truth is that it's rarely so useful. Normally I want the data in the string (e.g. the URL or a portion of a Web page); rarely do I care exactly what font or color it's in. Imagine preserving formatting of text from 10 different Web sites in 1 Word document. It's not a pretty sight.

Yet I find myself constantly reformatting text from Web pages in Word, PowerPoint and even in my database (really - who cares about capturing format there?). Even Stickies - simplest text editor ever (virtual Post-it notes for the non-Mac audience) is not safe. I just had to unformat some text pasted from Word. Somehow, allowing formatting into a document now means it will be preserved in the paste operation.

The complaint of wanting consistent text formatting may sound trivial, but it does speed processing of reading if everything is a consistent font. Plus, it's not as ugly.

I do have a solution though - I just open a copy of BBEdit and paste the formatted text there will all formatting will be instantly removed (Yes!) and then copy and paste into the second application. In case you're wondering why I'm wasting a blog post on this...all I have to say is that 5 minutes here is less time than the cumulative time it takes to unformat or move it through BBEdit.

Why I Avoid Labeling Arrows on my Concept Maps

| | Comments (3)

I'm actually a big fan of diagrams (maps, family trees, bar charts) but I've always found the standard concept map (like the one below from Wikipedia) a little confusing

Concept map of Concept Map
Click Image to Enlarge

This is one of those concept maps where all the arrows are labeled with the relationship. Someone asked a linguistics group if they felt that the arrows should be labeled or not, and I do say not, but maybe not for linguistic reasons.

Normally when I create a diagram, I don't label relations per se, but just for a mini experiment, I redid a concept map in two versions, one my way and one like a classic concept map, labels and all. I noticed some things that made me understand why I don't like to label arrows/lines.

  1. The big one is that I think that I (and most natural map readers) are trained to infer relationships from the connecting lines/arrows. Only the labels on the objects matter. The labels on the arrows are redundant.
  2. Not just redundant, but distracting because they take up space in the diagram and interfere with my ability to process the concept map as a whole architecture. This is important for a diagram like a family tree where you track lines to find your first cousin.

  3. Not just distracting, but conflicting. In the Wikipedia concept map (of what a concept map is), the arrows are the same, but the labels may differ. I am receiving conflicting input on whether the relationship is the same or different.
  4. I'll also note that there is a conflict in classic concept maps on whether shapes change depending on object properties. Normally I assume that if a shape has the same format, it's the same kind of object. But if labels are different, I can't make that assumption. Do I have to infer from the text? and how?
    P.S.: I did find an example with different shapes but arrow labels. I think the shape cues makes it much easier to understand what's happening.

I have to say that not all concept maps have labels on their arrows

At least I am not alone on this one. I am curious if that person was able to complete the research on arrow labeling....

Post Script

The link from D. Stong goes to a research paper describing the "rules" for making a concept map including the labels on the connections. It may be good theory, but I'm still not sure about the design aspect.

ALT Tags without Tears?

| | Comments (0)

I've been talking a lot about accessibility recently, but the one thing I have utterly failed to convey is that it's not as scary as it sounds. Sometime it can be relatively painless if you just know the right trick.

So I am going to switch up strategies and talk about some tips and tools I have found that make my accessification task easier. The first up is the infamous ALT Tag for images

ALT Tags "Reconceptualized"

The term ALT tag implies a scary HTML tag, but maybe it's better to think of it as a caption to use if it doesn't download. That is, if a user can't access the image (i.e. it doesn't download correctly or it's not visible), then the browser reads an alternate description.

Depending on your connection, I think we've all experienced a missing image for button or link, so wouldn't it be nice to know what it's supposed to be? Voilà the ALT Tag

How to do it

You can insert an image ALT tag in many tools, even if you don't know any HTML, usually by just filling out a description field in the image upload process. See the links below for inserting ALT tags in different tools:

Work Flow

I admit that if your course (or Web site) uses hundreds of images, then it will be a chore to tag them all at once. So...I don't usually tag them all at once. Instead, I try to tag them in small batches as the course is being developed.

Two strategies I have used:

1. If I am working on a Web site, then I tag each image as I create each page. I actually use Dreamweaver a lot even if the content will end up somewhere else (e.g. ANGEL, Drupal). Because the Dreamweaver ALT tag option is basically a form field in the Properties window (or the initial pop I get when I insert the image), I really don't have to touch the code that much (other to batch change the URL).

2. If you are working in Word first but converting to the Web later, it may make sense to just type in an ALT tag below the image as you insert it. When it comes time for the content to migrate, then the ALT tag will be there to be cut and pasted.

I've been using this process for the last 5 years now, so I can say that most images are used have some sort of ALT tag, and I don't spend too much time...unless I forget to tag as I add.

I know there are times when people are batch loading images to a site (e.g. some photo sharing sites) where it is very difficult to add an ALT tag. But I really think that should be the minority case since images are often collected and processed over the course of a period of weeks. Maybe I'm missing something though. That's why I have a comments section.

Color Blindness Filter in Photoshop CS4

| | Comments (0)

An accessibility tip I learned from the Photo Walk Pro blog is a new proofing tool in Photoshop CS4 which simulates two types of color blindness (or color deficient view).

How To

The simple how to is that you:

1. Open an image in Photoshop CS4.

2. Go to the View menu then Proof Setup then select one of the two Color Blindness options at the bottom of the menu. See Photo Walk Pro entry for screencaps.

3. To return to full color, go to View then Proof Colors.

If successful, the colors of your image will be reduced to just those seen by certain types of color deficient viewers - essentially shades or royal blue and yellow/brown. The two spectra images below are a simple demo.

Normal Vision Color Deficient
Spectrum from red to violet (and magenta) Spectrum altered to shades of yellow and blue

Besides showing you what a color blind user may see, this proofing tool is a chance to see if your informational graphics are coherent to a color deficient user. For example when the color coded labels of the fake K-12 site are proofed in a color deficient proof, almost all the changes in hue are lost and replaced with varying shades of olive brown.

Fortunately, the value contrast is sufficient that the labels can be read...even if the student might be confused with the instructions "Click the red one."

Full Color K-12 Labels

Fake Child Education site with Math Problems in red, Science labs in green, Word Games in orange, History in purple

Color Deficient Version

Same image as above but purple, red, orange changed to yellow or olive brown

Conclusion

I should point out that there are lots of variations among color deficient viewers, especially in terms of how red is perceived - I've seen reports that red = black or that red = brown. It is a clear demonstration of why many color deficient users fail to understand the excitement of autumn leaf colors or can't tell blue and purple apart.

Diagrams in an Online Course

| | Comments (0)

One of the courses I've been working on for a while is an upper-level engineering course. One of the "hidden" requirements is that students be able to provide sketches of problem scenarios. The idea is that a sketch can help students visualize an approach to a solution.

In a traditional course, the sketches are done in pen and pencil and handed in to the instructor. For an online course, it's different, because you have to digitize the images. So what to do?

Example Sketch

An example sketch might be something like the one below. If a pipe is .75 m, has an opening of 50 mm on one end and 85 mm on the other end, and the incoming water velocity is 3 m/sec, then what's the outgoing velocity? Here's the sketch:

ControlV.png Cylinder with arrow going in narrow end and another arrow coming out. Given measurements are labeled.

I should say that I was able to do this sketch reasonably quickly in a number of packages, but each of them required some learning especially for drawing lines and figuring out how to place the arrows. Also, to master these tools, you have to learn to navigate multiple pop-up windows. In other words, you have to be a little graphics saavy.

Vector Software

Engineering sketches lend themselves best to vector diagramming packages. My favorites so far have been:

Dia (Freeware/Windows)

If you're on the Windows platform, then the freeware Dia program may be a good answer for you. It does the basics (and that's all that's needed here), plus it has symbols of palettes just for technical types. What's also important is that it can export to other formats such as .png.

One quirk I found was that it tricky draw lines. As soon as you select the line tool, it starts a line (instead of you selecting a starting point). Fortunately, you can easily move the line. The other was that you had to right-click the line to find the arrows feature.

The following is a sketch produced by Dia.

Sketch in Dia

DrawBerry (Freeware/Windows)

A Mac version freeware sketcher is DrawBerry. It appears to be inspired by Dia, but it is not identical to it. It is also a 0.6 program and is subject to alpha behavior (including one crash) from time to time.

Other Freeware Packages

Listed on the Wikipedia List of Vector Graphics Editors Page

Gliffy (Web 2.0)

I've experimented with Gliffy.com, and it works well, but it appears that unless you get a "Pro" account, all images are open to the public. The base level is $5/month. Dia is cheaper and you can keep images or post them on the Web.

FYI - Photoshop.com looked interesting, but is not a vector drawing tool, so I wouldn't recommend it.

OmniGraffle (Mac Only)

If you want to pay some money, I do recommend OmniGraffle (and an early version may be installed on your machine). It's similar to Dia in that it's seemingly designed for technical types who just want to spit out a quick and dirty diagram.

Again, you can download specialized templates for free, and it has other features such as tool lines which quickly indicate how and objects are aligned. It is even better concept maps!

I would say that there is a little bit more of a learning curve because there are more features, but I don't think I could live without it. I wish I could say Microsoft Visio was the Windows equivalent, but it isn't.

Adobe Illustrator

The advantage of this is that it a professional level tool even though it is awfully quirky. For many simple diagrams though, this works just fine though (once you figure out how to "stylize" arrows). Another advantage is that there are plenty of online tutorials, and if you get a student discount, it could actually have a reasonable price tag.

I have to say that I feel like a user who needs more of a feature hit. If you have to have gradients, then you will be hooked on Illustrator. For the record, the diagram posted in this entry was done in Illustrator - it was the easiest to get "pretty".

Scan or Fax

Another answer is to either fax or scan a sketch...and I suspect some students will take us up on that option. The advantage is that you don't have to learn a software package, but you still have to upload the image. If you own a scanner, this will be fairly cheap. If you're a Penn State student, you may also be able to take advantage of lab scanners.

Faxing is easier, but probably more expensive. You either have to use phone minutes on your own fax or go to a copy store and fax (they charge per page).

A third option has been the Leapfrog Fly Fusion Pen which is a pen in which you write on special graph paper on a digital pen. The pen can store each page which you can upload to FlyWorld (yep a Web 2.0 service). It does work, but since I upgraded to Vista, FlyWorld keeps asking me to upgrade, but the upload became buggy.

A final scenario could be to use your camera to take pictures of an image, but can you deliver them to an instructor who may not want to incur the cell phone charges? You would have to extract them into some format.

Before I forget, there's also the Tablet PC option and the Wacom tablet option...which are great if you happen to own one of these.

Ultimately, we'll probably leave it to the student to decide how they want to deliver their digital sketches. I think they will be surprisingly resourceful.

Some Custom Tech Tags

| | Comments (0)

I am one of the many users who felt the need to create yet more TLT Tech Tags

Unicode

This version is the syllable /yu/ in Sanskrit. Dave also made one that was a therefore operator (⊃) symbol which resembles a sideways U.

Unicode240px.png

 

Accessibility

The & symbol in Braille.

Accessibility240px.png

Pixel Stick, my new BFF

| | Comments (0)

One of the niftier freeware Mac apps I've downloaded is "Pixel Stick" which as the Web site describes

PixelStick is a tool for measuring distances and angles on the screen. Excellent for designers or anyone who wants to measure a distance on their screen in any window or application.

In other words you can estimate image or window sizes without opening another application. Even though I'm hardly a graphics specialist, I have found this tool incredibly handy in the past six months.

Today, I'm designing a handout in Illustrator which uses some PNG screencaptures. I need to shrink them down, but Illustrator does not shrink PNGs very prettily, so I will probably have to do the shrinking in Photoshop. But with Pixel Stick, I can give a target estimate of sizes in Photoshop.

Another time, I had to capture a representation of a Mac cursor, and that is very difficult with the default screen capture option. Fortunately I was establish a size parameter with Pixel Stick. It's also good for estimating smaller window widths on a larger monitor.

But actually, my first use had to do with the Blogs at Penn State templates. As some of you have noticed, the widths of the different areas of a blog page are fixed and photos which are too wide get cut off. How wide is too wide? I didn't want to dig around the CSS, but with Pixel Stick, I was able to get some reasonable estimates and include them in the documentation. Definitely much easier.

I downloaded this on a lark and wasn't sure if I would actually use it - surprise.

My PDF Digital Signature

| | Comments (0)

Thanks to PDF and online forms, I think we've managed to streamline electronic forms, with only one minor gap - the actual signature.

Recently, I was asked to to "complete and return" a PDF agreement form which usually includes your signature. Interestingly I was given no fax number or other instruction (e.g. "mail"), so I was a little perplexed. If it were Penn State, I would print, sign and send it via Interoffice Mail.

But if speed is of the essence, you may need a different strategy. In this case, I opened the PDF file in a graphics program, then used my home graphics tablet to sign and date the document. Unlike paper signatures, I was given the chance to resize my signature art and redraw unclear numbers in the date.

FYI - This isn't the first time I've done this. Opening PDFs in graphics programs is very helpful for letting you fill in standardized information for new prescription order forms for your doctor so they can fax them in for you.

Not only can you avoid filling out the same information over and over, but the resulting type is much more legible than my actual handwriting.

Web Background Color Glitches for Penn State Logo

| | Comments (0)

My colleague Dave Stong posted an informative entry on the problems of adjusting the colors of images vs. what the browser displays.

Unfortunately, I know EXACTLY what he's talking about. I create a version of the Penn State logo with a navy blue background to go on a navy blue web page...but the colors are off enough that you get a dorky rectangle around the logo.

On the other hand if you put in a logo with no background color, the edge looks very jagged.

Dave recommends Firefox, but here's what I did for years in Photoshop.

1) Found an image of the Penn State logo and opened it up in Photoshop.
2) I used the paint can to change the background color to match whatever Web hex color value I wanted.
3) When I did a "Save for Web", I set the background color to transparent.

At this point you are left with a logo with a fuzzy blue edge, and the fuzzy blue edge blends in with the background of the Web page and the slight differences go away.

FYI - I eventually created a master file with two layers - a top layer with just the logo and a bottom one for the background color. This made switching background colors a lot easier.