Editing for Design: The Happy Meeting of Editing and Creativity

 
In an earlier post, I talked about how the primary principles, support principles, and elements of design can be analyzed in a creative visual work.  Here, I will discuss how those same concepts can be applied in the editing of printed documents and web pages, creating a compelling intersection between art and practicality.

Here's a list of the aforementioned aspects of design:

PRIMARY PRINCIPLES

• Unity
• Hierarchy
• Variety
• Proportion

SECONDARY PRINCIPLES

• Scale
• Balance
• Rhythm
• Repetition
• Economy
• Proximity

ELEMENTS OF DESIGN

• Shape
• Space
• Line
• Size
• Color
• Texture
• Typography

(image source)

(How many principles of design can you identify in this set of way-finding icons?  What sorts of edits would you make, if any?)

Some of these ideas overlap, and some are more applicable to our current discussion than others.  Specifically, the following questions should be asked by both designers and editors when creating or analyzing documents on paper and the web:

Unity: Do all the aspects of the work toward the same purpose, or are some of them "at odds" with each other?

Hierarchy: Are elements of the image or document arranged in such a way that suggests that they should be interpreted in a certain sequence?  Is that sequence intended by the creator?

Scale: If diagrams or figures are used, is there a point of comparison to a known scale (such as a human scale) provided?

Balance: Is any asymmetry that appears in the work's layout intentional?

Rhythm: Do the elements promote reader/viewer eye movement in a desired manner and direction?

Color: Do the colors used convey the emotions intended by the creator?

Texture: Do the textures used in the images have the dramatic and aesthetic effects that the creator intended? Will the intended textures be perceivable in the work's medium? Do the textures used obscure the meaning of the image or document?

Prior to my work in usability and design, I had never given much thought to the overlap between aesthetics and usability/practicality.  I'd be interested on hearing your theories about why this intersection exists.

Change is Good: How I've Revised My Blog Layout

 
As you can see, I've changed many of the attributes of my blog.  In this post, I will explain how and why I made these revisions.

First, let's look at how my blog looked before the changes were made.

When I first created this blog, I spent a considerable amount of time going through the templates and decided that the simplicity of Blogger's Minima template would allow the reader to focus on my content rather than extraneous graphics, and I thought that most of the other templates could be too easily identified as being Blogger templates.  Being the non-conformist that I am, not only did I want a template that didn't look so "ready-made," but I also wanted to change the default fonts and colors right away.  I thought that the titles and links should stand out, so I chose bold colors that would look particularly vibrant against the black background.  My original typeface choice was Trebuchet because it's clean and simple, and it also isn't as commonly used as typefaces like Times and Arial.

Then I looked at the possible edits that I could make from the "Page Elements" section of the "Layout" settings page in Blogger.  Here's how it looked after my changes:

 

I was thrilled to find a gadget that made a cloud out of my labels, and I thought that the "Search" functionality and "Subscription" buttons would increase the usability of my blog.  I also changed some of the titles of the sidebar gadgets in order to make them sound like something I might say (as opposed to generic titles), and I added a little blurb about me so that people have some idea who's writing these posts.

In addition, I moved the default location of the attribution, time posted, and labels for the posts to the bottom of the posts to the top.  This way, the reader will know, upfront, who wrote the post, when it was written, and the topics it covers. 

Next, I decided that something had to be done about the column width of my posts.  In my search for guidance on this matter, I found an article called "Displaying Text on the Web: Are Narrow Columns Better?" that detailed a study on people's preferences for things like column width and typeface.  The writers found that people strongly preferred 400pt. and 640pt. column widths and that there was no significant difference in preference/readability between the Times and Verdana typefaces.  With that information in mind, I changed the column width of my posts to 640pt. by changing the appropriate CSS settings.  The result is shown below.

After that, I decided to play around with my color scheme and add a header graphic to my blog:

 

In my Visual Design class, I learned that you should aim to have no more than two colors (aside from black and white) in your website design.  I had three: green, blue, and purple.  I thought that, while I liked this color combination, it would be better to eliminate the green because it didn't go as well with the other colors nearly as well as blue and purple looked together.

When I designed my header graphic, I wanted to convey the idea that traditional ideas about communication and text were being reevaluated in the context of New Media and the Internet.  To accomplish this goal, I took old-style text (similar to that created carefully by hand in the Middle Ages and Renaissance) and made it appear as if it was being viewed on a CRT monitor.  After I uploaded the image, I edited my CSS settings to remove the light gray border that formerly appeared around the blog's title.

Finally, I decided to change the default font in my blog to Times:

 

I changed my font to Times because I wanted to continue the theme of "the old being viewed in the context of the new."  Times has been a standard font in newspapers and magazines for decades, and I wanted to see how the "feel" of my content would change when presented in this typeface.  Right now, I think it helps to establish a sense of authority that helps to balance the light-hearted nature of many of my posts.  We'll see how I feel as time goes on.

As I learn more about HTML and CSS, I may test out my new skills by making some more changes to my blog's code.  Stay tuned!

What do you think of my changes?  Let me know!

Usability Crimes: Are You Guilty?

In my efforts to learn more about usability and web design, I found a blog post called "10 Usability Crimes You Really Shouldn't Commit."  I think the title is a bit redundant (Are there any crimes that really should be committed?  And are there any crimes that should kinda be committed?  Talk amongst yourselves.), but I thought it had some valuable information (along with an excellent use of illustrations).

Here are some points that I had never considered before:

Crime #6: A Background Image Without a Background Color

(screenshot from the article)

This one never came remotely near to crossing my mind.  However, I don't think it's as common as it once was to put text over a background image (and if I'm wrong about that, please correct me).  At any rate, color and its implications for readability is always important to keep in mind.

Crime #9: Telling People to "Click Here"

(screenshot from the article)

Here's the given description for this tip:

"The words click here have been around since the dawn of the Internet, but have been shunned aside in favour of more usable options. Using the words click here requires the user to read the whole sentence to find out what’s going to happen. Instead, describe what’s going to happen in the actual anchor link text."

What I find particularly interesting here is the idea that "click here" was, at one time, acceptable and commonplace on websites. Looking back, I realize that this claim is true, and it also occurs to me that I don't see it nearly as much as I used to. Perhaps this practice has fallen out of favor because we've become so accustomed to the idea of hyperlinks that we no longer need to be told to "click here"? Or is it because, as a society, we've lost patience for reading?

Crime #10: Using Justified Text

According to the article, "Justified text might look at neat and square to the eye, but it can generate some real readability problems, particularly for dyslexic users who can find it troublesome to identify words due to the uneven spacing of justified paragraphs."

Here's another one that I had never even considered, especially the part about dyslexia. However, justified text can be frequently found in printed texts, such as magazines and newspapers. Why is it acceptable to use this type of text alignment in print but not on the web? Could it be that web designers are more conscious of the possible needs of their audience than print publishers? And, if that's the case, does that mean that the Internet is a more democratic medium than print?

As always, feel free to share your thoughts on any of the questions that I have posed. Additionally, let me know how you feel about the various crimes listed in the article.

Viewing People Viewing Documents: Eye-Tracking and Usability

 
I just finished reading a very informative article, written by Lauren Cooke, about eye-tracking technologies and how they can be incorporated in usability studies.  It also details the patterns in which our eyes move when we read, whether the document in question is online or in print.

Eye-tracking data can be obtained through head-mounted or remote cameras.  In either case, the movement of the iris is recorded and subsequently analyzed using software that reveals the fixations (which "occur when the eye is focused on a particular point on a screen") and saccades (which happen when we "move the eye from one fixation to the next fixation") made by viewer.  The combination of fixations and saccades produce scanpaths that provide a more comprehensive picture of how that particular viewer went about visually analyzing the given document.  An example of what a typical scanpath of a printed text appears below.

(public-domain image, found here)

As Cooke explains, "Eye tracking as a methodology is based on Just and Carpenter's (1976) 'eye-mind' hypothesis: the location of a person's gaze directly corresponds to the most immediate thought in a person's mind."  Therefore, the data from eye-tracking studies can be applied in a variety of fields.  For example, such data has been obtained from pilots while they were flying planes, helping engineers to redesign cockpits to ensure maximum usability.  Studies are also being conducted to determine how people view PDA displays and other compact screens relative to how they go about visually analyzing material on standard computer screens.  Furthermore, eye-tracking data obtained from people reading printed documents reveal that font sizes smaller than 9 pts. and larger than 12 pts. tax the reader by degrading letter legibility and preventing words from being read as a whole entities, respectively.  People also tend to read at slower speeds, and temper their tendency to skip over words consisting of three letters or less, when reading complex material.

In addition to the information detailed above, eye-tracking data can, when combined with think-aloud studies, provide a great deal of insight into the problems people may experience when performing a particular task or looking at a given document.  People, in general, aren't very proficient at identifying and articulating their visual impressions, since people process visual data much quicker than they are able to consciously recognize and verbalize what they see.  Thus, eye-tracking and think-aloud data can be used to determine what areas of a document or interface are preventing them from accomplishing their goals.  Additionally, eye-tracking data can be used to determine people's general tendencies in their efforts to visually process the information that is in front of them.  For example, long paragraphs have been found to be less engaging than short ones, and people generally look at the top and bottom of a menu/list before looking at the middle portion.

If used properly, studies using eye-tracking technologies can provide valuable information for web and usability designers.  Data shows that people "do not necessarily follow the same scanpath for every type of Web site; instead, there appear to be universal scanpaths that people develop based on the function, genre, and design of a Web site."  Further research in this area may help designers to configure their sites to accommodate these various scanpaths.  Some of the findings detailed previously in the post can also be applied to web design, as can these conclusions drawn by researchers:

--People tend to read small type closely, but they're more likely to scan when reading text written in larger type.

--Readers often will not read the material that appears below an underlined headline.

--Eye movements are generally made in the shape of the letter "Z" when first looking at a website (i.e., starting at the top left-hand corner, then going to the top-right hand corner, etc.).  Readers are likely to make smaller "Z" patterns as they more closely examine the page after the initial scan.

--While objects that appear in isolation do draw attention, that attention is not sustained for as long as some designers may think.  Therefore, the isolated element that artists and designers want viewers to focus on should also be given another distinctive feature, like being drawn in a different color.

--People are more likely to read a story when they are given both its headline and summary than they are when presented with only its headline.

--Images 210 x 230 pixels or larger draw more attention than smaller images, and people are likely to click on images of the size 210 x 230 pixels.  This fact should be taken into consideration by web designers when creating icons and navigational links.

--If web designers want to provide related information (like a footnote or other explanatory note), they should place it near the text or image it is related to, instead of at the bottom of the screen.  The farther away viewers have to move their eyes in order to read the note, the less likely they are to read it. 

Does any of the data here (or presented in the article, if you've read it) surprise you?  Do you have any personal experience with eye-tracking and its applications?  Do share.

My Voyage of Self-Discovery using Google Sites

If you have a Google Account (and if you don't, you should consider getting one), you probably know that Google offers its users the opportunity to create sites (called Google Sites), for free, using its server space and web design tools.

Before I launch into my explanation about how much I learned about myself during the design process, as well as a description of my experience with Google Sites, I should really give some background information on why I designed the site the way I did.

I started out by taking this quiz on learning styles.  The quiz assesses you on four scales: active vs. reflective, sensing vs. intuitive, visual vs. verbal, and sequential vs. global.  Try taking the quiz and seeing what kind of results you get.

Here are my results:

My results make sense to me, especially when I consider them in combination with my Myers-Briggs type (INFP).  Perhaps I'll explore the connection between learning styles and Myers-Briggs types another time.

Based on my results, a person familiar with the scoring system (or someone who, at least, read this overview of the learning styles) would correctly say that I:

--  prefer to work alone, and I also like to take time to think about any topics presented and to process them sufficiently before taking action.

--  enjoy discovering connections between concepts and thinking about possibilities rather than merely learning facts.  I deal well with abstractions and appreciate innovation, and I don't like repetition or going through routine steps or calculations.

--  don't have any strong preference for visual presentations (videos, charts, illustrations, etc.) or verbal instruction (written or spoken words).  I appreciate both types of communication.

--  work best when I can see the "big picture" with regard to the topic at hand.  Then, I'm better able to understand the details and what those finer points do to "complete the picture."

Put it all together, and what does it spell?

I'm a very conceptual thinker who may not always pay attention to or appreciate the finer points of the topics presented.  I like to have time to absorb the material at hand before acting on it, and I also enjoy connecting concepts across disciplines and having the opportunity to structure my own "learning path."  Being exposed to the "big picture" before delving into a topic can be helpful, as well.

True, true.

So after I processed both the details and the overview of my learning style, I tried to figure out how a website designed specifically for someone like me would look.  I'd like to think that I did a pretty good job of not only coming up with a list of factors to consider, but also addressing those factors in the design of my new website, Before You Tweet…

Here's how I went about it.  Appropriately enough, I've included a screenshot illustrating each of these nine design factors.

-- To address my impatience with details, I put some quizzes on my site to compel the viewer to take some extra time to look over the finer points of the material covered on each quiz's reference page.

-- Reminders to attend to certain details, like saving one's changes on their Twitter Settings page, are also offered.  I find that I also benefit from receiving similar reminders in real life (more on that later).

-- I put important terms and main ideas in bold, allowing a global learner like me to quickly scan a page and get an overview of the major points covered on that particular page.   Bolding these items may also help the viewer to remember them, whether they be main ideas or details.

-- Because I have almost-equal preferences for visual and verbal presentations of information, I tried to include both in my site.  Illustrations are offered, along with written descriptions, for the step-by-step instructions, and videos are shown, where appropriate, as they can offer both visual and verbal representations of information.  Even if the video does not actually illustrate ideas through pictures, the audio portion of it does satisfy the word-related requirements of verbal learners.

-- Since global learners benefit from having the freedom to construct their own "learning path," I wanted to make sure that all subpages of the site were easily accessible from any page.  Thus, I put links to these pages in the left-hand sidebar of every page.

-- Global learners may also find it helpful to look at an overview of what they can expect to learn in a particular section.  Therefore, I made sure to include such overviews at the beginning of sections including multiple pages.  An overview of the entire site's contents is provided on the site's homepage.

-- To address the needs of reflective learners, I wanted to ensure that viewers did not feel rushed through the tutorial.  I encouraged them, at certain points, to take some time to play around/test out the featured aspects of Twitter before moving on.  At the same time, I tried to get viewers to see the benefits of looking at other sections, as well.  I also recognized that reflective learners prefer to "lurk before they leap" in online settings, since they like to think about things before speaking up or taking action.  Because of this, I reminded the audience that they can use Twitter as a strictly information-getting, rather than information-giving, resource.

-- On the "About This Site" page, I encouraged viewers to take notes, which help can help reflective learners to retain information by putting it in their own words.  In this way, they can take "ownership" of the material.

--  A right-hand sidebar, containing "Related Resources," is included on certain pages to address intuitive learners' need to imagine possibilities and discover relationships.  This sidebar can also be helpful for global learners, who appreciate seeing topics from different perspectives and discovering how they relate to things they are already familiar with.

To accommodate the thinking style of intuitive learners, I planned on having information about the theories behind a topic be linked to that topic's page but appear in a separate window.  That way, the supplemental information would be optional reading rather than part of the lesson, itself.  However, I decided not to implement this design factor in my site, since I thought that having extra information in both a sidebar and an extra window might result in "information overload" and, possibly, viewer confusion.  Furthermore, I felt that such an approach would be more appropriate for a site covering a broader topic, like social networking as a whole.

I also wanted to give users the opportunity to take notes directly on the site and save them in a private account, but Google Sites doesn't support this functionality.

While I was designing and creating the site, I, by necessity, had the results of my learning-style quiz very much in mind.  As I mentioned before, my results definitely made sense to me, and I related to the provided descriptions of my four scores.  However, these traits were never at the forefront of my thoughts, and I didn't have specific names for the ways in which I think, work, and learn.  As I reflect on my experience with discovering my learning style and designing my Google Site, I was reminded of the idea of "you have to name it to claim it," which basically means that once you have a name for some aspect of yourself or your life, you're in a better position to address it.    

As I worked on my site, I became more aware of how much my learning style affects how I complete tasks.  For example:

-- I took some time to really think about what I wanted to accomplish and how I was going to accomplish it, which is typical of a reflective learner.  I also made notes about possible layouts and things to include,  which helped me to map everything out before taking action.

-- I really enjoyed the process of looking for content for the "Related Resources" sidebars.  As I was adding those links to the site, I thought to myself, "I *would* actually like a site designed like this."

-- I had some frustrating experiences with retaining the changes I made on the "Manage site" page.  Why weren't the edits I made being reflected on my site?  Thankfully, it didn't take me too long to figure out that it was because I wasn't saving my changes before navigating away from each editing page.  I don't know what gave me the idea that I would just have to hit "Save changes" once before clicking "Return to site."  (Maybe it's because I'm a conceptual/global rather than detail-oriented thinker?)

-- I was also reminded of how helpful I've always found it to read the "In this section" overviews in my textbooks.  I just took it for granted that everyone benefited from such previews, but it's probably more accurate to say that some people find them more helpful than others.

Now that I have a greater awareness of my own personal way of going about things, I can do more to make greater use of my assets and compensate, where necessary.  I'll keep you posted on how these revelations affect how I go about doing the rest of my work.

I'm afraid Google Sites provided a few bumps in this road of self-discovery:

--  Finding an appropriate gadget for my site was harder than it should have been.  There are *so* many Twitter gadgets, and yet only a small percentage of them had any real practical use or relevance.  Does there really need to be a gadget for every celebrity (or "celebrity," as the case may be) with a Twitter account?  And every time I pulled the scroll bar down in hopes of revealing a useful gadget, the bar crept upward a little bit, indicating that there were still more gadgets to evaluate.  Google could have at least provided a count of how many gadgets matched my search criteria.  I know they can: they can count up how many millions of hits things get when someone does a search on Google's main page.

--  I had problems viewing my customized background image when I was logged in as the site's owner.  It's not that I couldn't see it: it's that I couldn't see it the way that I visitor would see it.  After I had finalized and uploaded my background, I panicked when I couldn't see the cute little birdie that was supposed to appear at the top of the page.  It turns out that the header that appears on the Editing pages encroaches on the background image, thus covering up the bird.  Much to my relief, when I selected "Preview page as user," the bird reappeared.

-- I had another problem with my background image.  When I tried to upload it, the "Custom" option for the background image was grayed out, making me think that I couldn't upload my own image when using the particular theme I had selected.  I then went through most of the other themes to see if the "Custom" option was available on them.  It wasn't.  I then went back to my original theme and hit the "Browse..." button.  It turns out that I could upload a background image under my original theme, after all.  Why would Google imply that that particular option wasn't available when it really was?

-- While creating quizzes was easier than I thought it would be in many ways, the directions for how to create one could have been more clearly written.  For instance, they should have covered the issue of permissions (i.e., how to allow or restrict access to the quiz), and they could have given the reader a more complete idea of what a "Form" is on a Google Spreadsheet.  I was left to figure out those details on my own.

-- I also didn't like how I couldn't change the font of the page header.  I could change the color and the header background, but not the lettering appearing in it.  Why?

I don't mean to trash Google Sites.  It's just that there are some frustrating aspects of using it.  But when I navigated through all the features and ways you can edit them, I thought it was pretty incredible that Google allows you to do all that without knowing any code whatsoever, and the WYSIWYG interface is incredibly helpful, as well.  I guess they do have to make some site features off-limits, since giving users any more power may compromise the security of Google's servers.

A few things that I particularly liked:

-- Editing the navigation sidebar was very simple.  I could indicate that a page was a subpage merely by pressing a few arrows on the "Configure Navigation" screen.

-- Google Sites has a special feature that makes it very easy to display YouTube videos on your site.  All you need is the code that appears next to the video.

-- Typing content on the pages was very easy, thanks to the word-processor-like interface.

-- Creating a new page for your site takes less than a minute, although I'm not quite sure why attachments and comments are enabled by default.

So that's my Google Sites story.  Be sure to check out the site and let me know what you think.  Or you can even Twitter about it.