Web Design

State of Web Development (and Learning Online)

Posted on by Jon K.

So the State of Web Development 2010 is out and a few results are surprising. The one result for the sector one works in was interesting: in 2008 10% of responses indicated they were involved in education, while 7.7% for the 2010 results. Are there less web designing/development going on? Or have those previously been involved in web design now moved over to e-learning?

The Google Chrome browser use has grown over 15% over the year. When developers and designers start using a browser, this usually means the results will filter down to end users. Maybe this is the vanguard of browser change?

Only a third of designers/developers optimize for mobile devices. I interpret that as mobile devices are not a priority to develop for because either they aren’t seen as “mission critical” or that Mobile Safari or Mobile Opera browsers do a good enough job of interpreting website for the mobile platform.

The interesting thing is the early adoption of HTML 5 and CSS3 – which works surprisingly well out of the box on modern browsers. What’s disappointing about this series of results is how far behind LMS developers are from the useful tools in HTML5 (hello, canvas element!) and the usability of CSS3 (it’d be wonderful if we could write a CSS template to apply to learning space areas). I guess it comes down to the closed box system – if you’re paying for a closed box you shouldn’t be surprised when they close the lid too. I think the first LMS that jumps on the HTML 5 bandwagon will be a big winner – the canvas element alone will allow for easier ways to be creative and new ways to work on the web. Canvas Demos is a site that’s showcasing different uses of the canvas element – a lot of games are being drawn on the canvas it seems – but I’m sure you can see the ways that you could use this as a new method of getting input. Or perhaps, eliminating expensive web conferencing tools and brewing something a little more open source. Can you say interactive whiteboard?

1 Comment

Contrast

Posted on by Jon K.

I found this interesting quote over at A List Apart, a brilliant web design resource:

Design is largely an exercise in creating or suggesting contrasts, which are used to define hierarchy, manipulate certain widely understood relationships, and exploit context to enhance or redefine those relationships…all in an effort to convey meaning.

Isn’t this what we do with teaching? Use contrast to try and make a point, or to illustrate the difference between one concept and another? Is this what we are doing when we design instruction?

No comments yet

Balance

Posted on by Jon K.

I was reading ReadWriteWeb’s posting about finding design balance – specifically between aesthetics design and functionality. This tension is something educators find all the time – especially when you factor in pedagogy and/or andragogy. Educators should be looking for some window dressing as well as the view, meaning there needs to be some beauty with the functionality. Too often, teachers are too consumed with the content, and not the presentation. As we know from communication and media theory, the way the message is conveyed plays a role in the way it is understood. Back to the article… it puts out there that sometimes users prefer a more complex interface. Certainly we see this sort of techno-snobbery with the iPhone being accused of being a toy (at least at first) – I think there’s an elegance that exists with the iPhone (and iPod Touch) that is lacking in other phone interfaces. Does this idea shift to e-learning?

Are there instances where a more complex, and potentially more confusing, interface could benefit some learners? Certainly, I like the idea of instilling confusion in learners – personally I hate feeling confused, but it tends to drive me to understand whatever I’m confused about more. If I feel that way, maybe someone else out there benefits from confusion too? Certainly, you can go too far – as confusion for most people is a huge turn off.

No comments yet

Color

Posted on by Jon K.

Considering I’ve been back on the aesthetics bandwagon the past few days (further carving out a niche as someone put it in an e-mail to me) I began to think about color. First thing this morning, an article about choosing the right color for your website – which got me thinking about the right colors for learning spaces online. Typically, I see white backgrounds with black text and maybe some selected images (much like this blog I suppose!).  I’m fairly certain that the reasoning for this is twofold. One, it harkens back to text, and particularly textbooks – so by designing with a black and white scheme and fonts that recall texts, online spaces gain a level of authority. Two, typically, black and white design has been viewed as “classy” and it’s easier to get something to look good with a limited color palette (black, white and grey).

Of course, that requires an understanding of complimentary colors and color theory. Color Matters has a good page on color theory which for some of you will recall grade 5 art class. If you don’t want to be bothered with the theory, just want to get down to brass tacks, Color Scheme Designer will give you a good selection of possible combinations to use in your designs.

Neither of those sites really talk about the psychology of color. The more I dig into it there isn’t much research that I would bet the house on, but Pantone has a good article about it as well. Well of course, Pantone will… they’re the biggest marketers of color (and consistent color) in the world. Is there real evidence of color psychology or is it just smoke and mirrors?

2 Comments

Type

Posted on by Jon K.

As part of the ongoing aesthetic interest I have, I discovered a link to this blog post that discusses the basic properties of type (and fonts). As I was reviewing it, I realized that a lot of textbooks are set in serif fonts (such as Times New Roman) and wondered if that had some psychological effect on how people viewed sans serif (such as Arial) type. Will my blog seem more “professional” or “academic” if I use a serif font? Recently George Siemens redesigned the elearnspace blog, moving from a sans-serif font to a serif font. I wonder if that has changed initial opinions of his blog?

Another conflicting idea is that online spaces should have fonts set in sans-serif type, because on screen resolutions are low, and serif fonts are not always displayed with the same clarity. When doing web design (not so long ago now), I usually defaulted to setting clients websites into Arial, Helvetica and sans serif. I wonder what impact that had on the end user?

3 Comments

Quick Thought About Bringing External Websites into the LMS

Posted on by Jon K.

Many modern LMS’s allow instructors and designers to bring external websites wholly into the learning environment, either by embedding them in an iframe or a windowed frame. I often wonder if doing this works for students, or is a hindrance. Should I link out and be explicit about where the student is going, or bring the content to the learning environment. The benefits of both are obvious to me.

An explicit statement of where students are going gives them a resource to draw on later – if they no longer are allowed to login to the LMS, they still have access to the learning resource. They can bookmark it and share it. Serendipity allows students to find new and different perspectives. The downfall is that it can be chaotic – too many open windows, too fragmented a learning experience, too much content can overwhelm. It doesn’t provide context, or context isn’t as immediate. Meaning can be fragmented.

Keeping links internal to the LMS provides a better guided road. Some students will be comforted with the idea that they don’t have to go all over the web to get information. The context of the information is a stronger connection. The user experience is more uniform, leading to less cognitive load. The downfall is that it can be too restrictive, too constraining and too much like school. Also, what happens when you can’t login? You’ve lost all your resources.

I think the way one works will put forth the way they design courses, and how the LMS is used. I’m fighting through this issue, and will struggle on as always.

No comments yet

10 Pages For Composition Education

Posted on by Jon K.

I’ve decided that I’d be totally remiss if I didn’t try to compile some sort of list of resources. So here they are (in no specific order):

1. Composition and the Elements of Visual Design is a well written article giving some basics around different techniques for composing photographs, but these techniques extend to document and website design as well.

2. The Principles of Design discusses several key issues in web design, and how those issues are echoed in print design. Pulling from the classics (balance, rhythm, proportion, dominance and unity), this article gives you a good overview of web design.

3. Composition and Design Principles from Goshen College is an interesting case – I nearly didn’t put it in the list because it’s an atrocious website (for instance, I’m not fond of mixing serif and sans-serif fonts on the same page for body text), but the information is great. As Google is fond of saying, “content is king”. It’s primarily targeted at people who might be teaching art, but my audience being mostly educators, so you should be able to relate. Also, you can sometimes learn from what not to do, which brings us to the next site.

4. 5 Common Visual Design Mistakes outlines some basic errors that designers make. Of course, rules are made to be broken, but when you are trying to communicate a message you need to ensure that  rule breaking is consistent with the message.

5. Principles of Design from About.com is a decent tutorial with examples and questions to cover the basics of design.

6. IBM’s Design Principles Checklist gives you 17 aspects of visual design that they intend to use in software design, but I think they translate to the web and page as well. To me, the last point is critical; cluttered design is one that will only confuse and distract from the content.

7. The Artist’s Toolkit provides a quick tour through the elements and principles of art, which also are applied in design and user experiences. After all isn’t what we experience with art a “user” experience?

8. Art, Design and Visual Thinking is an interactive textbook from Cornell University. Well, it’s interactive if you consider clicking on links an interaction (also the design is dated). This online book is tailored more to the art student, but the first few sections are an excellent and go into areas that other suggested sites don’t cover. Gestalt? Color psychology? Important concepts, but often glossed over or overlooked in primers on design. This site will give you language to dive deeper into an area of design that interests you.

9. Design Psychology is a blog article I’ve referred to a couple of times over the last year or so, as a lot of what I do is web design dressed up as e-learning. While Andy Rutledge appeals to the commercial designer, the message shouldn’t be lost on educators. Educators are competing with commerce for attention, while we have content down pat (in fact content coming out our ears!) we may not design things in such a way as to hold attention or keep it. This post is a touchstone for me, essentially re-centering me when I’m far out in left field.

10. Aslam Memon’s Blog has 45 blogs and twitterers that provide design inspiration. That’s the biggest piece of composition education, looking at and analyzing designs you like, and seeing what was done to create them.

No comments yet

Aesthetics, AV and User Experiences

Posted on by Jon K.

I’ve been reading a fair bit about UX (User Experience) and it’s role in website design, and by proxy, online learning spaces. I’ve been thinking about how aesthetics have been important in this relationship and recently I’ve come to re-think my definition of aesthetics. Previously, aesthetics online only meant the visual: the look and feel of the website in question. Now, I’m thinking that motion and sound will become increasingly more important as we move from a static web to the motion web. YouTube is great for allowing people to share videos, but really, the skin that they wrap their videos in is horrible. Ugly. Vimeo, on the other hand has a much better looking (and in my opinion designed) interface.

Does that mean that design is an indicator of popularity? No, but eventually either YouTube will allow you to change the default skin (and they already allow some minimal customization) as a feature for it’s users or a competitor who allows more customization will begin to eat away at the dominance. If only YouTube allowed an easy migration path to switch between hosts? The real killer for YouTube is when it can no longer support the bandwidth required and people have videos interrupted or become basically unplayable. At that point, if it comes, people will switch to the better looking alternative.

To the same end, audio will need to be presented in a good looking player. Not only that, but it needs to be clear and audible. A lot of the problems I’ve encountered with poor audio have been with two aspects, the first is in the production of the audio (generally characterized by a flat AM radio sound) and the second being choppy intermittent transmission. Both do things that disrupt the user, by either being a distraction or an interruption to the processing of the core information. Ugly interfaces are often accepted as long as it works. When it doesn’t work… well things get bypassed entirely.

3 Comments

What I Learned This Week (Part 5)

Posted on by Jon K.

Finally, one of my major pet peeves with Google has been answered. Matt Cutts announced late in October that Google Docs now lets you do a bulk export. I’ve played with Docs a lot, but never considered it a real threat to Word in my workflow as I couldn’t get all of my crap off of the one system in one shot. Now I can. Thank you Google for doing the right thing.

Was listening to Martin Weller’s presentation for CCK09 about the Pedagogy of Abundance, and while Martin’s presentation content was great, the sound was difficult. It wasn’t the quality of sound per se, although it was a bit rough around the edges. I don’t know if it’s just me, or a combination of my background as a sound engineer and sensitive listener, or if it was just my mood, but the sound was off.

It got me thinking about the aesthetics of sound, and how sounds might be pleasurable or distracting, and how that works in a networked learning environment. Clearly, the aesthetics of the new media environments extend further than the visual realm and will have to be considered when developing e-learning courses and environments. With the ubiquity of good sound devices, we still will have to have quiet spaces from which to broadcast, or record.

I also found out about Sherlock, the Codec Detective. I’m not sure how Apple feels about the possible name confusion (although I’m not sure that Apple’s search is called Sherlock anymore either), but this is a great little utility that helps one figure out if they have a video codec installed or not. As everything moves towards Flash video, this sort of tool may not be needed in the future, but in the meantime it’s incredibly useful for me, as I switch between several different machines throughout the day and may need to edit video on any of them.

Visualization of data is a huge trend, and in my opinion only going to get bigger as text literacy declines in favour of visual literacy. I’m not saying text literacy will disappear; just that visual literacy becomes more important in the future. Flowing Data posted an interesting contest, to see if a correlation can be drawn between SAT scores and class size. The contest isn’t about the correlation per se, but it’s about the visualization and what comes of it.

No comments yet