»Cliowired

Professor Paula Petrik's Creating History and New Media is a graduate seminar at George Mason University that explores the conjunction of history and the digital world—what problems does the teaching of and presenting of history encounter? how can websites be designed so as to improve the study and learning of history?

Organizing design and process: Usability and Visual Hierarchy

April 2nd, 2007

Whenever I sit down to read the books and articles for class, I get really antsy. I want to go design something. I think part of the reason I prefer web design to being a historian is because I simply don’t have the patience to read as much as a historian should read. I like to be doing something. I like the process, sense of progress, near-immediate gratification, and the accomplishment of creation that web design offers. (Which is why I like the researching and writing aspect of being a historian, even though it’s a longer process.) So, sitting down to read this week, I kept flitting back and forth to tweak something on the project I was working on, to jot down questions that popped into mind, and to make notes for things to remember in later designs. Needless to say, it always takes far longer than it should for me to read any one of these articles. They also prompt me to re-think old projects and, unfortunately, worry that I’ve done things wrong. “Oh no,” I think, “I didn’t put in title elements in my links! Are my alt tags good descriptions or could they be better?” Fortunately, I think I get the concept of visual hierarchy that Luke Wroblewski discusses in his article “Visible Narratives: Understanding Visual Organization.” Not that it comes naturally or instantly, but I design a site, and then I look at it and think “something doesn’t look right, what is it?” It’s usually the visual hierarchy. I usually tweak and tweak and then eventually I think it comes out right. Now, at least, I have some terms for what I’m doing and maybe it will help to think about these concepts in a more strategic way at the beginning of a project. I also really want to design a circus poster now.

“Visual Architecture: The Rule of Three” by Carole Guevin showed how placement and interactivity among images guide a viewer through a web page (or printed page). I think, however, that until my graphic design skills improve tremendously, my websites will not be able to take full advantage of this tool. That said, of course one can use this concept with headings and text blocks and logos. I suppose there are levels of implementation of this rule of three: from basic visual structure to complex imagery. The underlying principle is the same—a visual guide through the page—but the implementation differs by orders of complexity. At least that gives me something to strive for and an area for improvement. Although, obviously, the article had a commercial bent, these concepts would still apply to serious historical work. You can still present the information so that it is visually clear and enticing, while drawing your readers to sections with your use of imagery (or titles, subtitles, etc).

Steve Krug’s book Don’t Make Me Think: A Common Sense Approach to Web Usability is great. I love the use of cartoons and diagrams throughout to help illustrate his points. Unfortunately, as some of you may have gathered, I do suffer from a rather short attention span. Or at least, if I can’t find what I’m looking for in about 2 seconds, I flip or click or otherwise look somewhere else. I’m impatient, and I value my time. I think this is actually the most effective part of Krug’s message: that when presented with information (be it a whole web page or a choice of links or a button), a user should not have to think, or at least only think minimally. This is a very difficult thing to design for because you often know what you mean when you type “Take Action” (just to use a recent example that I’m struggling with. But, how do you ensure your readers/viewers know what you mean? His answer is usability testing. This is such a hard thing to do. I’m trying to work on it, to find a way to incorporate this into my design process. For now, it’s one of those goals, like accessibility, that, for now, I’m only meeting the minimum requirements. In my mind, once my designing skills are better then I’ll improve on these things. Soon, hopefully, soon.

And, finally, Douglas Bowman’s “Design Process Revealed” was actually one of the first articles I read when I started re-learning web design last summer. I think it’s an excellent process and one I’ve tried to adopt or at least make my own. I particularly like his tip about creating an Illustrator file and playing with various fonts applied to your key text in order to choose your ideal font. Not only is this a great way to visualize and compare the different choices you have, but it is also a great way to begin gaining familiarity with the abundance of fonts available to us. I suggested to John on his blog that he try to incorporate this method, especially the early brainstorming stage, into his process for our upcoming design project. This brainstorming really helps me to think of types of images I can use and which of those images might work well together. When these ideas are all written down on paper, it helps me to see what the possibilities are, and when I’m in the middle of the design and needing something extra, I can look back to it and say “A-ha, yes, a bird would be an excellent addition to this motif.” Or something.

I also suggested that Misha, who cracked me up with her title “Good Design Beats a Poke in the Eye,” use Bowman’s design process. I think I’m just a very process-oriented person. Otherwise I get too distracted and/or waste time fooling around with things that are extraneous to the task at hand. But, seriously, working through this rather straightforward process, even if you take some shortcuts, can really streamline your efforts and achieve what you’re aiming for with greater ease.

Marty wrote about Krug’s book in his post “Clean pages = pleasant experience,” and I noted how there are indeed a few examples out there of successful commercial websites. By successful, I mean successful in design. They are clean, easy to follow, and visually interesting and/or appealing. I also mentioned how the legacy of old websites that need redesign and the lack of time to devote to such an overhaul is probably the main impediment to many of these businesses undertaking such an endeavor. I sympathize with those designers, because I know that it is most likely rarely their fault that the web site looks the way it does —as odd as that sounds. They take their direction from non-design management and, unless they’ve been employed there for 10 years or so, they likely inherited an old design that the company already has too much invested in to be willing to take on a redesign that this new designer seems to think is so important. There’s branding, recognition, and other equities I’m sure that give these businesses tremendous anxiety about changing the face of their Web presence. Creating a beautiful, clean, well-organized, visually uncluttered but interesting and engaging website is much, much easier said than done.

Making the Web a more accessible place

March 26th, 2007

I probably should have read the reading selections in order, but alas I did not. Joe Clark’s article “How Do Disabled People Use Computers” was very informative and helped to put in context the later readings. I really liked his direct, honest approach, especially in raising questions about the terms we use to speak about disabled people (ie. “differently abled” which he says “seems to apply more to zoology, where, say racoons can climb trees but dogs can’t”). Refreshing as this was, his description of types of disabilities was informative and helps in thinking about designing websites for this diverse group of people.

It is true that I have given little thought to taking these disabilities into account when designing sites in the past. That said, I have always operated on the assumption that if you design a site cleanly and clearly, you are halfway there. This is somewhat true. Many of the 25 points in “Dive Into Accessibility” are things that I already do, or at least try very hard to do. For example, choosing a doctype, declaring the language, making the page title meaningful, presenting the main content of a page first, ensuring that colors contrast sufficiently, using title attributes on links, using alt tags on images, using real links (not javascript links), and then others of the points that relate to designing with tables which are for the most part moot, except for using table headings and captions and using them appropriately. These are all things I strive to do as part of my regular design process. Admittedly, my own website and projects I’ve done for class, I have been focused on other elements of design and have sometimes let these important elements fall by the wayside.

That said, it is especially helpful to hear a screen reader (at WebAIM). Wow. I had an incredibly hard time understanding that, and I imagine it isn’t easy and is quite frustrating for anyone needing to learn to do this after losing sight later in life. Also very helpful was the note, made in a couple of these articles, that screen readers will read filenames unless you specify a title or alt attribute. Again, I try to put these in my sites, but now that I understand how exactly they are used (other than the nifty visual tool tip that some see), I will certainly make an effort to ensure these tags are used and used properly.

One final note is that I did not really understand how learning disabled people use the Web. I went to a high school that had a special program for kids with learning disabilities, and I always thought that they read slower because they processed information differently. I didn’t think that it was that they couldn’t read at all. Dyslexia, I always understood, is a disability that one can learn to overcome or compensate for. I know there are others. Some people learn better by hearing than by reading, so couldn’t they get a screen reader? Until I understand more about how this group of people uses the Web, I cannot accommodate them. The suggestion that all websites should be illustrated, as Clark mentions, is indeed a “cure worse than the disease.”

I continue my discussion about learning disabilities and accessibility on Mark Stevens’ Learn More History AND Technology, and I raise some questions about our audience on Maureen Guignon’s CLIOblog. In the end, I think that there are sufficiently accessible websites and there are websites designed to be accessible. Which one you require is a matter of your expected and intended audience, and as Mark says, “It does not take a terrific amount of intellectual ability to figure out that reasonable accommodations should be made in order that “disabled” people may access web pages.” Here here.

Sketching out Ideas

March 18th, 2007

I’ve spent the past several days reading and mulling over the current class assignment: various restoration and other tricks with photos. I’ve taken examples from the Eismann book (Photoshop: Restoration and Retouching by Katrin Eismann), and I’ve played around with several photos. I think I’ve gotten the hang of cleaning up images, but I have to admit I don’t like hand-coloring. Maybe I need more practice to get better at it, but I think the results of my efforts don’t show how much thought and effort I really put into hand-coloring. The results are poor.

preliminary sketch My preliminary sketch for my image assignment website.

Thankfully, I had a stroke of inspiration when it came to the web design for this project page. Since I’m employed by the wonderful Center for History and New Media as a web designer, I feel utterly obligated to make a 200% effort on these design bits—that’s what I’m in the class for, right? To strive for better design? Well, I thought I would share with you part of my design process. I always start with a sketch, and this time I wanted to do something with a bit of a retro feel. No doubt inspired by the recent readings on such desgin (particularly by Cameron Moll), but also by the retro nature of my subject matter. These are, afterall, OLD photos. Some older than others, but hopefully my design can tie them all together with a fun, but still simple and elegant look.

I’m currently plugging away at it. I had to figure out a php thing I’d been trying to figure out for weeks, so can I have dynamically generated pages. Fortunately, with a stroke of luck a well-worded Google search turned up the perfect tutorial (and a pretty cool site: inobscuro.com). I’ve also been trying to create some cool artwork to go along with the page, and I’m trying to make sure it’s all coded correctly. Much work left to do…

Reading through some of the other class postings, I’m not the only one with a dislike of colorization and some difficulty with Photoshop (see Steven’s “De-Constructing History 2.0″). Discussing her process of image editing, Misha’s post “A bit of gray here and there” made me want to go back and do more…just as soon as I find the time.

Glorious Colors of Nature

March 14th, 2007

So, while on vacation, I actually did plenty of thinking about design. Not just while doing the readings but while walking around, walking on the beach, looking at the ocean, while driving. I noticed the incredible beauty of the colors of nature and how those beautiful colors would make awesome web palettes. Here are a couple of examples that I found particularly inspiring:

woodandwater Cool blues, greens, and browns.
driftwood Similar colors, but brighter and with a few lighter shades.

Photoshop Techniques

March 5th, 2007

I must confess I am short on time this week. My husband is back briefly on R&R from Iraq, and I selfishly want to spend ALL of my time with him. I know that in a few days’ time, when he is gone, I will mull over and work through these techniques we’ve read about this week— it usually takes me working on a project before such tools reveal their usefulness. I can read about a technique, but until I am working on a project and encounter a design issue (ie. how to achieve “x”), I cannot truly internalize the method. But it’s during one of these “design issues” that I have an a-ha! moment and remember a tool I’ve come across, find that book or web site, re-read the tutorial or example, and make brilliant progress in my work. Thankfully, we have spring break next week, when I can spend some extra time with these books and techniques and re-visit past and current projects with new ideas in mind. I do already have one idea, which I noted on Mark’s blog, that I can use the “wicked worn” look to great effect on my genealogy site, which one day will be much more than a sample page for our type assignment.