touring the sites

All:

I've just been doing my IPRs for the last bit of this class. Boy, I've really enjoyed the work we've all done in this class.


I feel Husam's design brief is outstanding. I've saved a copy and will be using it as a template going forward. I like his organization and direction.

I was Amy's IPR partner earlier in the class and her web site has undergone such a transformation. Before, her content was a wave of work all washed into the same corner. Now, she has a cohesive, organized narrative of her work at Mason. Go, Amy.

I think Lisa's work might be the most ambitious of all of ours. Her purpose is to teach people how to change their outlook, while standing on a street corner. She has to take inexperienced evangelists, educate them, motivate them and pus them out the door. Her content is the best of all of us. Once she finds the narrative in her site, she's going to have powerful work.

My project is now live at vinegar-hill.com. Someday, when I have a two days, I can really populate the site. So far, I have seven PDFs of the newsletters. Using inDesign, I've pulled out the content for one of those issues – and have about of a third of THAT on the site.

I think I know what I'll be doing during those snowy days this winter.

Thanks all. I'll see you in the next class.

go go video

I really enjoyed the video exercise. I layered my text above the video on my Flash piece, and it created an OK user experience.

I'm really looking forward to learning how to open/create video. Maybe I'm ready to become an auteur! http://harborsights.com/gmu/edit771/flash/video/video.swf

it's nearly hoops season

I forgot to show you my Flash piece. It's my name in lights, so to speak, on the basketball court.

enjoy.

http://harborsights.com/gmu/edit771/flash/tsakell_animation.swf

saturday morning redux

I really enjoyed our readings this week on animation. I felt like I'd known the 12 points of animation all my life, but just never had terms to put to the actions. I'd animated basketballs before, w/ sounds and shadows. It was a lot of fun setting the timing, trying to replicate gravity and "counting" -- the author used 2s, but I was breaking my bouncing ball loops into 5 frames up, 2 frames down. I'd make the shadow a circle w/ a Gaussian (dissipating) blur, and change the size of opacity, depending on how far from the ground the ball was.

The best part of the lesson was anticipation, one of those things we kind of know we want, but don't know how to do. The example was terrific; I thought I was watching a Tom and Jerry cartoon w/ a big bowl of Sugar Smacks in my jammies on a Saturday morning.

Lastly, I'm sorry the author never completed his explanation of the 12 principles. I'd like to hear more about Anticipation, Exaggeration, Secondary Action, Follow through & Overlapping Action, Straight Ahead & Pose to Pose, Staging, and Appeal.

Timing
Squash and Stretch
Slow in & Slow Out
Arcs of Motion
Anticipation
Exaggeration
Secondary Action
Follow through & Overlapping Action
Straight Ahead & Pose to Pose
Staging
Appeal
Solid Drawing

helllooooooooooo?

I'm calling out to fellow students in this class: EDIT 771. Please look at my work; what do you think?

I'm paying off a family debt and making a website for my dad's "old neighborhood" reunion committee. The group has always kept a paper newsletter, publishing about 2x /year. They're getting older, and interest is flagging, so I've offered to put the information online.

I'm back/forth over how to best offer the content. I like the idea of the Flash introduction, but switching to HTML inside. There's so much content: 6 issues, 8 pages, 20 images/issues.

I'm still having trouble in dreamweaver templates, but I think it's because I followed the tutorials too closely. I made too many areas in my template -- templatized. I'm going to go back in and "release" areas like H1 and main text. They'll be changing page to page.

So take a look, please. URLs in previous post. thanks.

so, what do you think?

Amy, Prof. Aird:

Please view my files here:

http://www.harborsights.com/gmu/edit771/survey.doc

http://www.harborsights.com/gmu/edit771/index.html

http://www.harborsights.com/gmu/edit771/community.html

I've loaded all the files to my EDIT 771 account, but you can't see them "in action" there. And, for some reason, I can't access my portfolios.gmu.edu this week.


Thank you.

thanks, dictionary.com

I went to the dictionary to find the word I wanted to use to describe this week's assignment: confounding.

I think I'm well versed in web design, structure and process. When I saw our assignment was to create templates, wireframes and mockups, I went through my usual processes: a blend of Photoshop, Illustrator, Flash and Dreamweaver. But my end products didn't resemble the requirements.

As I pored through Prof. Aird's podcasts and tutorials, I became more and more confused ; nay, confounded. These processes were completely different from mine.

So I tossed my work aside, and went step-by-step through the buttons tutorials, then the template tutorials. In the end, I didn't have to unlearn what I already know, but I sure had to block my memory of it.

I've now learned a new – and efficient – way of creating buttons and templates. They're fast and clean. They may not be right – for me – in every instance, but I've learned something today!

How many days can you say that?

Thanks, Prof. Aird.

e-Learning Module Proposal

My e-Learning module will be a reunion website of “the old neighborhood” – south Harlem in the 1940s and 1950s. My father – and his friends and family – grew up, went to school and married in this neighborhood. Nearly all of them moved away, and year by year, some of them pass away.

But they all still talk about this neighborhood, which really exists only in their minds now. Like any community, the north end of Manhattan has changed and evolved. Gone are the places with which they can connect and visit – all but for the Church of the Annunciation. The group still meets at reunion masses each year, and holds reunion dances every few years.

The group stayed connected through a periodic newsletter a group of them produced. Usually, the newsletter was eight pages and contained feature stories from the old days, and photos from recent gatherings.

The group is aging now, and producing the newsletter became too much work for too few people.

As the age of Web 2.0 teaches us, websites aren’t always a product built by one, to be viewed by many. A community website can start with a core, and expand as the group adds contents and features.

My module will produce the content of those few newsletters, and invite the community to participate in ongoing discussions, plans and communications.

The group is elderly, and will require usability practices from Section 508 compliance. In meeting with some of this group, I’ve found they’ve missed the learning curve of the Internet almost completely. They’re at a level where they have difficulties opening PDFs in e-mails, and choosing in a complex navigation system.


I’ve been thinking about:

• Large point sizes
  
• Simple, clean navigation
  
• Large target areas for hyperlinks and linked images
  
• Brief text on introduction areas, with long content in detailed pages (like feature stories)
  
• Using a very simple design, as though this was a children’s project. The navigation would be a combination of words, images and symbols.
  

I see this project as a blend of modes: tutorial and a bit of instructional games.

I believe my design, imagery and the users’ high interest in the content will gain attention. I think an early, clean and simple introduction will inform the learners of the site’s objectives.

I see two challenges: Providing learning guidance and encouraging feedback.

If I can’t adequately teach the user to use the Flash-based tools early, I’ll lose them. One idea is to have a Google maps page, cleanly displaying the old neighborhood, and inviting users to “mark” their former home, job or school. If I can make this simple and engage the user, I’ll succeed.

Feedback is essential to the success of this project. For this to work, the community of the user must participate and own the project – not a few. If the chat board doesn’t fill with a few ideas, suggestions and participation, the site will wither.

I’m intrigued by two of Kevin Kruse’s ideas in Designing e-Learning User Interfaces: Chunking information and using multiple access points.

This audience may be unique. Web designers are encouraged to follow web standards in navigation and presentation, such as the logo goes top left and developing a navigation hierarchy going three and four levels deep. This group may not have any learned knowledge of the Internet. Yes, blue links are always a good idea (and this group would get underlined, blue hyperlinks), but perhaps this navigation should only go one-deep in each area; any more may be too complex.

I like the idea of multiple access points. Breadcrumbs would be a large help.

These are my early ideas. Thanks.

Evaluating online learning modules

In this assignment, I will briefly review a few of the e-learning modules presented by Prof. Aird, and quickly demonstrate why I chose to fully evaluate uncleFred.com.

Online learning modules need to consistently match the Internet’s rapidly-improving, Web 2.0 standards. The modules need to be professionally designed and attractive to retain a reader’s attention. A critical benefit of online learning is taking the reader beyond what he can receive on paper. Unless used interactively, PDFs and Power Point presentations are still simply paper products viewed on a monitor.

Another critical component of online learning modules is the ability to graphically use – and re-use – the same space. The module needs to use that interactive ability, either to pull information from other websites or databases (XML, RSS feeds) or deliver the reader to that information. This does not mean providing a user w/ a hyperlink into another window, which takes attention away from the module, but to deliver that information into the learning module. The fourth event of Gagne’s Nine Events of Instruction states this concept as: Present the content – chunked and organized meaningfully.

Online learning modules development teams must employ at least one design professional.

• A Health Professional's Guide to Pediatric Oral Health Management
  http://www.mchoralhealth.org/PediatricOH/index.htm
  
  
  • The home page has a clean design, and the objectives are clear: Learn about pediatric oral health, in this order.
    
    
  • This is a paper document online.
    
    
  • Navigation
    
    
    • The hyperlink Contents is a literal table of contents (with hyperlinks); call it Site Map.
      
      
    • This module also needs a (unifying) logo and search engine.
      
      
    • The glossary is useful.
      
      
    • The Module guide (the square numbers listing 1-7) meets the designer’s needs, but not the users. Once inside the site, the user doesn’t know what No. 4 is. The numeral’s rollover title is not sufficient; Javascript or animated GIFs could solve this problem.
      
      
    • The interior navigation is complete, but could be presented better in drop-downs.
    
    
    
  • The largest failing is the images: What a missed opportunity. The captions are listed as Fig. 1, 2, etc., though those numbers are not in the content. The user should be able to click on the images, and see a much larger version.
  
  
  
  
• How to be a gardener
  http://www.bbc.co.uk/gardening/htbg/
  
  This is a wonderful web site, which contains learning modules.
  
  The BBC brought in terrific designers and graphic artists. The opening page cleanly explains the purpose of the site, and following Gagne’s second event (Inform Learners of Objectives), you know what aspect of gardening you’ll be learning.
  
  Each module can work independently of the others – if the user chooses – or in a sequence.
  
  
  • http://www.bbc.co.uk/gardening/htbg/features/light_levels.shtml is a wonderful example of enabling the user to actually garden online (Gagne’s Event one: Gain attention ). The user can place plants in a garden, according to where the sun falls on his plot. The user can’t do this in a PDF! The user gets feedback immediately, and can reset to start over.
    
    
  • Learning the Latin names for flowers is actually fun in this “game.” The reader must recall prior learning as they make mistakes on the flower names, and actually learns most from his mistakes.
    
    In both interactive instances, the user can assess his performance immediately.
    
    The images, videos and graphics clearly demonstrate to a user what colors, sizes and heights different flowers and foliage should be.
    
  
  Faults: Each module reads Overview on the first panel. The user may be confused: is this the start of the stage, or the entire module? It should instead read: Title of Stage Name. Using numerals in the Table of Contents, without putting the name next to the numeral, is cumbersome.
  
  
• Uncle Fred
  http://www.unclefred.com/
  
  I see this module as a blended example of tutorial and instructional game, as Kevin Kruse details in Skinning Cats: More than One Mode for e-Learning. The content is presented linearly, and cannot be taken out of order. The fun of the “game” reduces learner tension and great increases engagement.
  
  This is my favorite learning module once I understood the audience was not me, but my pre-school children. This serves the audience quite well, though it has some tragic flaws. Happily, they could be solved with a little effort and a little budget.
  
  
  • The presentation is engaging and simple for a young user: Learn how to draw! Yes, it grabs their attention quickly.
    
    
  • An early problem is the first page offers so many options without guidance. I like the categories: Draw this character, (about) Uncle Fred, instructions, legal, stats. These need to be organized better, and then the module will have the user follow a sequence. Informing learners of the lesson’s object through the sequence would improve the performance.
    
    
  • Take Legal and Stats out of the main box, and place them bottom right, under the box. Make them text links. They’ll be less prominent, and they should be. They’re not of equal weight. Also, add a contact link. What if you wanted to contact Uncle Fred?
    
    
  • Place the Uncle Fred link inside the image.
    
    
  • Place Instructions above the links to the characters, because I didn’t understand how this worked when I dived straight into drawing.
    
    
  • On Draw this Character links, eliminate the pencil and put a thumbnail of what you’ll be drawing. Also, make the entire row linkable – these are young users and they’ll have a hard time precisely clicking on that object. Give them a 175x22 target to touch.
    
  
  Now this home page still needs a clear set of objectives.
  
  I was certain I was going to draw like Uncle Fred – on the screen, using my mouse as a pencil. This is not the case. The user must draw with his own pen and paper, following Uncle Fred’s instructions. Uncle Fred needs to explain this on the home page. On the Instructions page, the text reads, All you need is pen and paper, but the user’s expectation is that they will be drawing online.
  
  From the start, show an image of a child with a pen and paper and you’ll reinforce the point. Create a message of follow along, and this module would capture the audience.
  
  The user is ready to draw. Under Penguin, text is on the left (Draw a box like this) and a static image (a drawn box w/ a pencil) is on the right. The user’s expectation is to wait for something to happen. When nothing does, he may try to “grab” the pencil with his cursor. Uncle Fred’s designer is relying on his static text (Draw a box like this) to provide the learning guidance.
  
  Uncle Fred’s graphics department could do this:
  
  
  
  • Animate the sequence in Flash. Have the words appear on the left, as if Uncle Fred’s writing: With your pen and paper, draw a box like this. Because children are the intended audience, the directions must remain simple. The animated “pencil” then draws the four sides of the box, and stops. The animated text would continue, Click here when you’re ready.
    
    
  • Repeat the sequence on every page. After the first frame, Uncle Fred doesn’t need to remind the user about pen and pencil because the expectation has already been set.
    
    
  • Every frame should be animated.
    
  
  I like how Uncle Fred draws a black-stroked circle in frame 2, which is faded in Frame 3, indicating a past action.
  
  What I found intriguing is how Uncle Fred would ink his images. He’d tell the user, Now color your picture. Here’s how I did mine. The project comes from a flat, one-dimensional image to a color explosion. You can imagine young user’s eyes going wide as creative inspiration hits them. Uncle Fred even shows different types of coloring styles.
  
  Users will be able to immediately assess their performance, re-do their images and practice. I think young users would retain Uncle Fred’s images and adapt them to their own images.
  
  In the end, users are learning drawing skills. They see how a cartoonist can draw complex images and shapes in layers and stages, and gain confidence as they develop their own skills.
  
  Dings: No back button. The explanatory text is still vague and isn’t hyperlinked: draw like this.

my simple logo

I thought the video podcast on logos was pretty cool. I liked how Prof. Aird focused on circles, different colors and opacities.

I looked at my screen and drew a blank after the first ball I drew, then thought about my project: Vinegar Hill. So I tried a simple logo (that’s the assignment, right?) and thought about what could represent the brand.

I decided to try and go w/ a simple hill (get it, text in the hill), and wrap Vinegar around it.

Looking at it now, I should probably wrap a few more balls in there, to make it look like a big hill among hills. And perhaps a sun behind it.

I kind of like it. How about you?

musings on a final project

I have an idea, and I wonder if I can marry it to this course project.

My father is on a reunion committee for his old neighborhood. For years, they put out a newsletter a few times a year, maybe 8 pages at a time. In it, they'd report on what's new w/ friends and neighbors, write long feature stories about the good old days. Like any good community publication or web site, they ran a lot of photos of the parties and dances.

Dad's 76 now, and the group found the newsletter to be too much work to continue. He asked me if I'd put together a website of all the past issues.

I've collected the PDFs, and there's a surprising amount of content. I thought about how I could lead the audience through site, where Flash would be a welcome and enticing element.

I thought this might be a good project for this class. After EDIT 526, I'm acutely aware of web accessibility, and this is a prime audience. In their late 70s, this group needs larger type sizes and clean navigation. Most of this group has missed the Internet completely, and needs strong navigation with few choices.

Do you think there's a way to make this project work?

expectations

Boy, am I excited about this course.

I'm taking this degree to fill in the holes in my education. I'm a self-taught corporate webmaster. After a career as a newspaper editor, I jumped into the interactive world. All my education has come through long nights w/ my nose in books and browsers, learning through example and trial-and-error. Now, people come to me for answers and explanations on interactive topics.

Which is fine, but I've never had anyone to go to with my questions. Thanks to classes like these, now I do.

Thank you.