Conclusion

Here are some of the things I found interesting in this course:

• The degree to which people are willing (or not) to read online:  The point was made in one of the readings that people do not like to read online.  Now there are a newspapers and magazines that host multipage articles; surely someone is reading them. On the other hand, much browsing is done for information gathering purposes. In those circumstances, it is probably correct to say that people do not want to wade through long paragraphs of information. So, when presenting fact based information, it’s probably better to do so with bullet points or some other easily scannable form.

 

• The assignment to design a website:  This was one of the earlier assignments. Even a simple web site requires a fair amount of thought. As the course progressed, we moved to more complex design methods. This was hard to react to without seeing an example of what such a scheme would look like. But the early assignment, which required you to map out the navigation, was simple enough to be able to do without much guidance.

 

• The blogs of others:  Some of these were very attractive and had interesting observations.  My concept of a blog is that you have to make frequent entries, even if they are not all gems. Some of the blogs do not follow this approach.

 

• Links and resources:  I enjoy being shown these when someone has already vetted them.  Annotated links:  the best kind.

Because the company I work for has certain existing standards for what its online design, I doubt if I’ll be implementing much from this course on its Internet sites.  However, we do have a few pages of text which could be rewritten to make them easier to scan or read quickly. Because we maintain English and French sites, changing text is a bit more laborious than it otherwise would be, since everything must be translated.

Here are some suggestions for future offerings of this course:

• Update the course description so that it matches the course more closely. This is the description that prospective students base their decision on as to whether to enroll.

 

• Let students change their Blackboard password. Yes, this is a short course by U of T standards, but that does not reduce the inconvenience of having to use a PW that must be looked up every time you want to login. And I can’t help but be aware of the steep cost of this course:  it is surprising that the university would not want to make access to the course as convenient as possible for its students.

 

• Configure Blackboard so that logging in to the course takes you to an active page, rather than an Announcements page that is not used.

 

• Provide more examples before asking students to complete assignments. Another approach might have been to give an early assignment to critique the design of a website or two, rather than having to design our own.

 

• Use the discussion board more, as a place for discussion rather than just for announcements. Responses to queries are best done on the board rather than by email; that way, all can benefit.

 

• Proof or edit the course handouts. I acknowledge that people vary in their sensitivity to unedited materials, but I for one found it difficult to get past this aspect. I’m not sure if the problem is typos, lack of editing – I only know that there is room for improvement here. For example:  Chapter 4, which tells us to “spell check and edit your work for proper grammar, punctuation….” (p.8):

p.1  it is important to bare in mind  (Chapter 5, p.2 has this same spelling)

p.2  Learners are more committed users over casual surfers

- how about:

Learners are more committed users compared to casual surfers

p.6  (Patrick Lynch article, Are your pages upside down?)

- is this article referenced somewhere else?  The information here is not sufficient to be useful.

 p.7 However, as yourself

p.7  … as a Cascading Style Sheet’s (CSS) or a PDF

- no apostrophe needed if this is not a possessive

p.8  He found that sites scored 27% higher than written in objective style.

- how about

He found that sites scored 27% higher than those written in objective style.

• Don’t distribute scanned materials, like the Design Principles pdf.  It raises questions about the copyright permissions of the material, and it is not that much fun to read.

 

• Consider collaborative assignments, where students work with each other. This is a good way to learn in an online environment.

Resources

One of the positives of this course was the resources that people provided.  I started to keep a list of them, especially as we will have our access to the discussion board cut off after the course ends. So here is my list. Thanks to all who contributed to it.  Please comment and add the ones I missed!

Dump the Drone

Designing engaging elearning courses

http://www.cathy-moore.com/courses/dump_drone.html

Visual Thesaurus

Create a word association map

http://www.visualthesaurus.com

10 typographical rules

http://www.owlsoup.com/foamtrain/rules.html

5 Common Visual Design Mistakes

http://www.articulate.com/rapid-elearning/5-common-visual-design-mistakes/

Web Pages that Suck

Self explanatory

http://www.webpagesthatsuck.com/

Elements of Great Web Design: The Polish

The design process

http://psd.tutsplus.com/tutorials/designing-tutorials/elements-of-great-web-design-the-polish/

Books about colour

J. Beaird, The Principles of beautiful web design

P. McIntire, Visual design for the Modern Web

Preparing the Grid

I was at a bit of a loss in how to prepare this assignment, as I am not a user of graphics programs.  I had a look at Paint, but didn’t see how to add the grid, and how I would then add the components that were expected?

Also, I did not really know what this grid would or should look like, and we were not provided with a sample.  So, I did what anyone else would do in this situation: I googled it!  This led me to a number of tutorials on web design, which looked interesting, but too time consuming with a deadline coming up soon. So I focused on sites that might actually help me create a grid which I could then modify.

I found a site called A Padded Cell, which besides the clever name, was written in layman’s terms. It had an article called Using Grids in Web Design which was short enough to be useful.  There were a number of links at the bottom of that page, one of which lead me to the Grid Designer site, where you can design a grid and it will spit out the html and css code.  However, it didn’t produce what I expected, which was an editable document with grid lines.

So, although I found my investigation to be educational, it didn’t give me a tool that I could use.  So I went back to that old standby, Word.  I was not able to create a well-designed grid, but hopefully I incorporated some of the requirements into it.

NY Times Site

In the Chapter 6 reading, on p.3, we are encouraged to visit the NY Times site, for an example of how the deeper the user ‘drills down’ to tertiary level pages, the information becomes more specific.

I’m a frequent visitor to the New York Times site, and so this reading lead me to consider it from a design point of view.

 As one might expect from this site, it is print based. It resembles a print newspaper in that there are a number of columns, which vary from four to six.   It differs from a conventional newspaper in that instead of the columns being filled with articles, they are filled with links which take you to the article itself. For the articles that are linked to from the “above the fold” section, the first sentence of the linked-to article appears as well.

Although the site is heavily print oriented, there are more pictures than you would find in a print newspaper, and, of course, they’re in colour. As well, there are videos, the window for which are horizontally the width of two or three columns.

There is a row about midway down the entire length of the page that uses pictures to link to articles. This breaks up the text appearance of the page. Below the point, the site is pretty much text only, except for the ads.

Beyond the home page, the site does get more specific. For instance, there’s an article about vintage Fiats. The link of course goes to the article itself, which is displayed in a single, wide column. But as well, that page has ads that seem to be tailored to car enthusiasts.  There is also the MOST POPULAR list, which lets you access the most popular articles of the day.

The designers of this site have a challenge, because they are not the stars of the site. The design must be unobtrusive, so the content, which is the attraction, can shine. And yet it has to be easy to navigate, and not present obstacles.  I think they do this well –perhaps the proof of this is that I don’t usually consider that the site has any design elements at all.

Reading the Design Principles reading

One of the suggestions for our blog was to comment on the readings. I’m going to try to do this with the Design Principles reading which is part of this week’s material.

This reading begins by talking about contrast.  An example is given of a white square on a black background. Yes, this is an example of contrast, as is the second illustration with colored contrast. And contrast does make things stand out.

The same is true with size. Generally, we notice bigger things before we notice smaller things. But so far, this reading has not really told me anything that I would view as being other than common sense. I was hoping for something a little more complex, perhaps.

I did find this in the next section, which treats communication hierarchy. But I had a bit of trouble relating the written text to illustration 3.13. Is the author saying that we read from left to right, and therefore the R is the most prominent letter? I think also that the brighter colours are meant to attract our attention; it just happens that the letters on the left are also the most bright. Perhaps the idea here is that we don’t have competing design principles: both the size of the letters, their placement left to right, and their bright or muted colors work to have us view the R first and then the V, etc.

The next section treats visual language. I would have preferred a slightly longer treatment of this topic, as it is one that interests me. On the other hand, there are other readings that have been suggested to us, which may provide greater detail. I’m not sure why the author refers to the visual language, rather than just plain ordinary visual language. This is like calling English, the English.

Preparing the travel guide

When I was thinking about how to deal with this assignment, I wanted to make sure I was following the instructions, and I also wanted to go a bit beyond the requirements, so that the results would be more than just a list of links.

I first thought about the nature of this assignment.  The focus is clearly on writing for the web. I found this a bit odd, given that the course is about visual design and display, rather than about using words. Most of my experience is with words, and I took this course to learn more about something that I know little about, namely the visual aspect of presenting information. However, I was willing to focus on the verbal, since obviously it is an important part of a web page.

In thinking about how to present information, I thought about travel sites I have been to.  One of my favorites is a series in the New York Times, which is entitled to A weekend in, followed by the name of the location that is being treated. These pieces follow a chronological order and describe what the visitor can do, where to stay, where and what to eat, and what parts of town to meander in.  I had to decide whether I should a structure like this, which I liked but which was not my idea. Not that borrowing ideas was a foreign concept; most of human discovery and thought is done by building on the work of others. I decided that it was OK to use this concept, but I would not look at the New York Times during the period that I was preparing the assignment. That is what I did.

The assignment did not ask for any visuals, or at least, I hope it did not.  The focus seemed to be entirely on writing style. Nonetheless, I noticed that some of the others made heavy use of pictures in their work. And there was no doubt that these pictures enhance the appeal of the sites that they have created. So hopefully I did not miss something in the instructions to this assignment that required the use of pictures.

Because I wanted my site to be more than just the story, I decided to include a list of resources on a second page. That way, the story could entice the reader to develop some interest in the location, and also give them the hard facts when it came time to make some choices or arrangements. I think I would have missed something if I had just provided the resources. The travel sites that I most like are those that tell a story, or bring a human element into the picture. In doing my research, I came across a number of sites which were simply lists of hotels, each with an address and phone number, but not even a link. I wondered who would find such a site of any use.

So how do users read on the Web? –Well, they don’t…

I noticed this sentence in this week’s reading (Chapter 4). Sometimes blanket statements should be used with a bit of caution. This is an example of one such case. Have you ever read a newspaper column online?  Or an article from the NY Times weekly magazine?  When I read things like this, I read them.  I don’t scan them.

When I’m looking to buy a battery for my watch, I scan the store listings.

But I’m not always looking to buy batteries.

A miscellaneous web site design

This week, in fact, by the end of today, we’re putting together a design for a web site.

I will use a hierarchical structure, because this is what we most often encounter, and it would be useful to structure such a site as a learning exercise.

However, in terms of the way we could organize and access information, I am much more interested in the approach and described in David Weinberger’s book, Everything is Miscellaneous.  The idea behind this book is that technology now allows us to structure information in an unstructured way. Since that sounds contradictory, I will try to explain. The book uses the analogy of a library, where the books are placed in a certain order, using a structure such as the Library of Congress Classification System or the Dewey Decimal System. In the case of a physical object like a book, we don’t have much choice.  It needs to have a physical location if we’re going to be able to find a later.

With electronic data, we don’t have to assign a particular place to each object. However, we still need a way to access, retrieve, or find it. And our criteria for finding the object may be different from the next person’s. Technology makes this ability to retrieve a piece of information according to the users’ way of viewing it possible. We can do this by tagging the objects using metadata.  So, for instance a web page that lists information on visiting Rome could be tagged with a number of tags: Italy, Classical architecture, Roman Catholicism, Michelangelo, the Vatican, the Spanish steps, etc. A search engine on that site would retrieve the page if any of those search tags were chosen by the user.

The organizational structure described in our Chapter three reading that comes closest to this approach is the database structure (p.10). However the third bullet in the database description talks about the importance of a flowchart which would show how the information is organized and connected. In a miscellaneous structure, there would not necessarily be connections between the items. Some of them might share the same tag, of course, but there would not have to be links between them from an organizational perspective.  Maybe the last bullet in that list, which has no words besides it, represents this concept.

I don’t think you could design a web site that used only this structure, unless it was just a search engine site. But it would be an interesting alternative on a site, as a way to accommodate users’ differing associations with the same information.

Spaces after a period

I am just getting a document ready for online publication.  I had reviewed it, and added a 2nd space after each sentence-ending period.  Sentences the have only one space after the previous period look crowded to me.

I then gave the document to our in-house graphic designer, to add some colour to it.  When I got it back, I noticed she had removed the 2nd space at the start of each sentence.

Apparently, the two-space approach is now outdated.   Their style guidelines indicated one space after a period – that’s how they do it for all docs, whether online or printed.  The designer remembered the days of two spaces, but that was eight or nine years ago.  She didn’t know the design reason for the change – this was just how it’s done now.

A little bit of googling reveals that the two spaces dates back to the days of non-proportional fonts – each letter taking up the same amount of space as every other letter.  Like what a typewriter does.  With proportional fonts, apparently, we no longer need this.  But I’m not sure why.  If a period takes up less width than a w, would you not want to make sure that you had lots of space after the period?

Another suggestion mentioned that varying space betweenwords.  But that only applies if you have right justified the doc.

Here is a bit of research on the subject:

http://www.webword.com/reports/period.html

I’ll probably leave the doc at one space, as I should respect the standard that we use.

1st assignment

Now I know not to Save a Discussion Board posting with the intent of finishing it later.  The Save Draft button  does not actually save a draft; or, if it does, there is no hint as to where it has been saved.

And you can’t paste a Print Screen item into a posting.

At 1st glance, I don’t see that the  Blackboard interface is any improvement over the WebCT one.  In fact, I find it overly complex.  Why does it take an extra click to open a DB posting? If you click on a posting, you would expect the posting to open. But it doesn’t.  You get another screen where you see the same posting title, which you then have to click on to get it to open.