- Tweet button added to posts and pages
- Latest tweet from the official Eucalypt Productions Twitter feed
- Latest field update image now appears at double the original size
I am pleased to announce that we now have a gallery on the Southern Cross Free Trappers website. It can be accessed directly via http://freetrappers.org.au/gallery/ or visitors can simply click the new 5th menu link, aptly titled ‘Gallery’.
In order for an event to appear in the gallery, I simply need to add a ‘gallery’ tag to it. There was no point in simply adding all the past events as some do not yet have photos.
There has also been a couple of small changes to the Events page. It now shows all upcoming events ordered from the nearest to the most futuristic. Also, the sidebar has been completely stripped off to simplify the content presentation even further.
Finally, printing the newsletter will now produce a great hard copy product. The presentation in print media should look great now with photos/illustrations and their captions appearing centred (as on the website). See a PDF of Around the Traps – vol 23 for instance. Although a paragraph may spill over 2 pages, everything else should avoid a page-break.
I hope you like these new features.
Updates: 3/10/2010 –
Navigation bar received a text size-up. The Gallery is now also full width, with pagination in the footer area. Newsletter Archives has been given a major overhaul and now features a thumbnail image and an extract from each newsletter. As always, it’s free to subscribe.
Updates: 17/10/2010 – A revised home page was developed. The old design included the complete latest newsletter. From studying the Google analytics reports, I realised that there was no way to determine whether visitors were just looking at the site in general or genuinely interested in articles from the latest newsletter. This revamp has not only reduced the load on the home page to an excerpt of the latest newsletter, but also added the next few upcoming events in the side column. Finally, following ideas from Jeremy Keith’s book HTML5 for web designers, the code has been cleaned up a little and a start made on HTML5 semantics.
Last weekend, after much sweat and beers, we launched the new design for Steve Curtain’s eucalyptproductions.com website. What stemmed from my NED12 assignment was 10 problems and solutions to the original construction – I don’t think we can call the original a “design” since it wasn’t really thought about, it was merely put together and published.
Care to read The Secret to a Great Blog Redesign?
Problems with the original site
- lacking any search facility
- all (too many) sponsors presented in sidebar on every page
- large header graphic serves no real purpose, takes up a lot of space on every page
- navigation links are tiny and difficult to distinguish, several have too many words, and also the order of navigation items is illogical
- width of main content area is too narrow (405px), resulting in
- very tall pages to scroll through (too much)
- layout challenges for main content including graphics
- link to sponsor (Hard Shell Backpacks) is broken and lacking a logo
- shop is handled by external CMS (Zen Cart) – complete overkill
- at least double the maintenance of presentational CSS
- inconsistent look and feel
- too many steps to complete purchase
- lack of future upcoming events feature
- excess content (overload) displayed on home page (2 full posts, trailing graphic and a eucalypt definition)
- little thumbnail graphics linking to larger versions in ugly manner
Goals of the re-make
- add a search function: an input mechanism; a results page with excerpts.
- show only 1 sponsor at a time, rotate through on a random cycle, and hide them from home page
- make unobscured glossy hero images on front page only, and add a logo to the banner
- use client specified fonts
- check logo development guidelines
- re-organise content into logical hierarchy and make a nav bar:
- each primary button 1 or 2 words
- aim for 5 – 7 buttons maximum
- arrange items in order of client’s desire
- secondary pages on fly-outs from primary items
- remove sidebar, make main container 800px wide
- remove dysfunctional link
- internalise the shop:
- minimise additional CSS hooks
- use the same domain and general CSS and layout structures
- reduce the number of steps to purchase
- create an upcoming events feature so fans need to return to the site
- strip home page content down to fit 1 screen height:
- a single excerpt of the latest post
- list a few upcoming events on the front page
- use a Lightbox effect to enhance the visual experience all round
The process involved wireframe and prototype development, a lot of fresh ideas, stacks of consultation and meetings. We made some executive decisions on implementation. The prime one being to eliminate the character from the logo thereby reducing it to simply text. Having successfully addressed ten major problems in a single project, I am more than happy with the resulting website design.
Given that the content is largely a visual medium itself, removing distracting elements and careful arrangement of content pieces is crucial. I hope this clean design leaves no room for distraction and does well to focus visitors’ attention directly on the content. It is a flexible design and channels for new content have been established. Thinking ahead, I believe this design not only meets the needs of the client and visitors now, but will also meet their growing needs for at least a few years ahead.
Finally, the drawbacks at this stage include:
- a slightly ugly invoice is produced by the lack of a logo – there must be a way to insert that automatically.
- sub-domains such as shop.eucalyptproductions.com haven’t been implemented yet. Redirecting to permalinks is not easy.
- Update 25/10/2010 – shop.eucalyptproductions.com is now working, taking visitors to the shop!
So what do you think? Has a good job been done? What could have been done better?
- Bowman, D. (2003, June 2). A design process revealed. stopdesign.
- Retrieved August 25, 2009, from http://stopdesign.com/archive/2003/06/02/design-process.html.
- Instinct Entertainment. (n.d.). WordPress e-Commerce Plugin a WordPress Shopping Cart Plugin by Instinct.
- Retrieved August 27, 2009, from http://www.instinct.co.nz/e-commerce/.
- Tyson, M. (2008, September 26). Smart 404 for WordPress.
- Retrieved August 25, 2009, from http://michael.tyson.id.au/plugins/smart-404/.
Distribution of a multimedia project should have been one of the very first matters considered during the initial concept stages. The matters of distribution can have some very simple as well as complicated reasons for choosing one method over another. There are many contributing factors to determine the right delivery method:
- Target user group
- Client’s wishes and expectations
- Product’s limits and limitations
So far, common forms of distribution are:
- Optical discs
- CD-ROMs, DVDs, etcetera…
- a high speed internal network
- a mass distribution medium
- Hardware or embedded application
- embedded devices that are not normally associated with computer interfaces, i.e. organisers, kiosks, mobile phones, and etcetera.
Traditional distribution models
Alternative distribution models
Intranet versus Internet delivery
Some examples utilizing an intranet delivery include corporate orientations, Computer Based Learning (CBL), presentations broadcasting, video conferencing, internal video services (VOD), and interactive information systems (customer information stations and POS systems).
try before you buy.
Some applications use the internet as a delivery platform. For example, streaming media in real time, Flash, and Java web-related applications, all rely on a constant internet connection.
Although there are many methods for delivering web multimedia, we recommend using stable technology that works for the great majority of client machines. You risk losing your audience if they have to jump through hoops to access your content.
Content management is a system of organizing the delivery, storage and access rights of all the media components of an internet or intranet delivery system.
By the system administrator or broadcast administrator, content management is used to set-up and manage scheduled content or on-demand programs, channels, recordings, and file transfers among various media servers. This can include the setting up of group profiles or individual profiles, in other words allowing only certain groups or individuals to view certain media.
Typically these devices have no keyboard or limited input capabilities, and somewhat limited display capabilities and data storage. They are usually dedicated to performing certain functions or tasks only, and include mobile devices (personal organisers and mobile phones), home devices (appliances, home automation systems, home theatre systems, home security), automotive (GPS, in-car entertainment systems), and industry systems (information kiosks, ATMs, and cash registers).
Due to advancements in computer memory and CPU miniaturization, devices now have the capabilities to provide levels of interactivity and intelligence previously unheard of. We are also seeing not only the breakdown of input and output limitations, but also a merge of delivery methods, in devices such as the iPhone.
Embedded devices traditionally perform dedicated functions, and are designed with a specific embedded software application. The end user cannot modify such closed systems. We see embedded systems everywhere – at the cash registers, in industrial controllers, at home in our digital set top box. They are usually simple to use, sturdy, fast and reliable. Unfortunately updates or upgrades contribute to the problems of a throw-away society and are costly in both time and money. Hence the reason developers attempt to future-proof systems as much as possible.
The choices of delivery methods to best deliver products are constantly increasing. Choosing the right method is not always your choice. The best safe guard is to know right from the conceptual stage, what delivery method(s) you and your team will be designing for.
- The user issues instructions when performing tasks. For example, typing commands, menu option selection, touch screen, speech recognition, a combination of function keys, and etcetera. For instance, tell the time, print a file, find a photo… The main benefits of instructing are that it is quick and efficient. This mode of interaction is well suited to repetitive actions performed on multiple objects.
- Users speak or type in questions and a computer system responds with a text / speech reply as the output to the user. Examples of conversing activity models include search engines, advice giving and help systems. It is somewhat different from instructing models (which simply obey orders) in that it is more like 2-way communication. This more familiar way of interacting makes users feel comfortable and less scared. The con of the conversational model is that misunderstandings can arise when the system doesn’t know how to parse a more complex input question.
- exploring and browsing
- This model is based on a system that provides information structured in such a way to allow users to discover or learn things. Examples include CAVEs – similar to that from The Lawnmower Man – and Second Life (see whether Second Life failed or met expectations? and the benefits of using Second Life as an educational tool).
- manipulating and navigating
- Users interact and move within an environment of virtual objects and properties. For instance, the familiar scissors object found in word processing applications to perform a cutting of text. The manipulation model can exploit users’ common knowledge of how they move and manipulate objects in the real world. The term Direct Manipulation, coined in 1983 by Shneider, proposes that digital objects be designed so they can be interacted with in analogous to physical object manipulation. This assumes that interfaces enable users to feel they are directly controlling the digital object. The Wii Wheel used to control Mario Kart is a shining example of direct manipulation with immediate feedback. The drawbacks of direct manipulation include that not all tasks can be described by objects and not all actions can be done directly, some tasks such as spell checking are better achieved through delegation, and moving a mouse around the screen can be slower than pressing function keys to do the same actions.
These activity based conceptual models are potentially inclusive, i.e. they can be used together.
Then there are more specific object based conceptual models, that focus on the way a particular object or artefact is used in a particular context. In the ancient Egyptian Pharaohs’ burial chambers, treasures, pots, sarcophagus, and so on, are all artefacts of that time. A ballpoint pen is an example of a modern day artefact. When conceptualising objects for use in designs, we need to exercise extreme care in their use. Baeker et al (1995 p.583) propounds the act of artefact analysis as
carefully studying the ways that artifacts are used and understanding what features are responsible for their success and why.
The predominant conceptual models involved in a 3D video game such as Mario Kart on the Wii, are manipulating and navigating.
Described as one of the top 3 racing games for the platform, the game is controlled via Direct Manipulation of the packaged Wii Wheel providing tactile feedback, such as vibration, known as a rumble, when driving over terrain or crashing the various kart artefacts. Audio feedback comes from both, the hand-held remote for near sounds, and the system speakers. Visually, a 3D representation of the virtual race world is rendered on a regular 2D TV screen, with a third-person perspective – you can see your player in the vehicle. A semi-transparent map of the course is overlaid on the side of the screen, with additional rank and time information displayed in the corners, just like a televised car race.
The Windows virtual environment combines several conceptual models. It reuses the metaphor of the window frame and different panes to display various file types and programs that can be accessed from the computer. It also uses metaphors like the garbage bin for file disposal, and menus to make selections from. Several mental models such as the desktop as a workspace, the folders to organise files, and drag-and-drop to move files, are utilised. Navigational models including the back and forward buttons on a window toolbar, folder drill-down, search and history, are all present, particularly in more recent versions of the operating system. Instructing activities are often carried out by keyboard shortcuts (Ctrl + P instructs Windows to print). Conversing with Windows is perhaps better known to users exploiting the accessibility features of the system. Since every object you see through an operating system is virtual, we certainly spend a large amount of time manipulating and navigating within the Windows User Interface.
A modern web browser adds to the models listed above for Windows, with tabs containing separate workspaces within the one program. Bookmarks are yet another metaphor / navigation mechanism that provide fast recall of specific places. It really goes without saying that we employ the exploring and browsing conceptual models.
Downloading a file from the internet is a task probably most suited to the manipulation model of the drag-and-drop technique. This seems easier than associating an image of a downward pointing arrow and avoids confusion with other navigation hyperlinks. There could also be an instructional keyboard shortcut for frequent use and users.
Programming would generally fall into the instructing model. This could take any combination of forms, typing, speech recognition, menu option selection, function keys, and etcetera. There are several mental models, most of the metaphors are non-visual, and navigation is primarily driven by keystrokes, along with the act of coding. More than anything else, the programming language will determine which models are useful.
- Baecker R.M., Grudin J., Buxton W.A.S., and Greenberg S. 1995
- Readings in Human – Computer Interaction : toward the year 2000, Morgan Kaufman, USA
What sets multimedia apart from all other communications is interactivity. To create effective multimedia, a sense of interactivity between the user and the product must be developed. For an interactive multimedia system, these main criteria (a.k.a. the 4 Cs) have to be met:
- Consistency –
Use similar elements for achieving similar tasks
Collaboration between the user and application in the control of the multimedia experience, is required for it to be interactive. To fulfil this requirement, we can factor in mechanisms to: skip intro videos, advertising and credits; provide hints; replay events; time-out; provide content position control (scroll bars for text, media control buttons for audio / video); escape from certain areas or the program altogether.
Seamlessness and Synchronisation
In order to achieve a seamless project, synchronisation of events is both, of the utmost importance, and one of the hardest and most time consuming elements to work on. Seamlessness is dependent on how well the content is synchronised with the objectives and events of the project, including control of temporal components, content relationships, and spatial relationships. Bandwidth and network load limitations can cause delivery and distortion problems, and thus synchronisation needs extensive testing across many systems before release. Integrating more than 1 source of media may demand a lot of work to synchronise different rates and formats, to create a single final media. Use of non-standard drivers and plugins to overcome timing variations can affect synchronisation. Background music and images, and lip synchronisation also demand consideration to avoid distracting the audience from the main goals. There are 4 types:
- continuous synchronisation
- on-going temporal alignment of 2 data streams
- point synchronisation
- synchronisation of the starting points of 2 data streams
- intramedia (serial) synchronisation
- the control of the rate of display of a sequence of images within a single stream
- intermedia (parallel) synchronisation
- the coordination of 2 or more separate media streams
It is a combination of good design and the basic principles of Human Computer Interface (HCI). There are 3 basic models of intuitiveness:
- fundamental terms, images and concepts that are easily recognised, understood and remembered
- mental models
- appropriate organisation and representation of data, function, work tasks / activities and roles
- navigational models
- predominately for navigation, they involve consistency and speedy access, and facilitate comprehension
It takes time, patience, lots of testing, and most of all, researching your subject, to produce multimedia systems with good usability. The project needs to take on the persona or genre of the subject. Lacking this, the project will be missing a vital part and never have the look and feel required to attract the users.
- is common and familiar to users
- has only a single primary implication
- naturally and logically relates to the activity
- clarifies and facilitates
The basic principles behind an intuitive program are also known as the
Ten elements of a successful user interface (Mok, 1996).
- Natural constraints
- Modes of operation
Most effective is usually a combination of methods, including text, site maps / table of contents, icons, tabs, image maps, and others. More has been written about site maps and navigating the waves of the WWW for that medium.
Is it usable? The question is primarily asking whether or not the application is effective to use, easy to learn, and an enjoyable user experience. Still not sure? Try the Interactive Heuristic Evaluation Toolkit to determine usability and all the considerations for your chosen device.
Websites and multimedia products, unlike books, do not make good reading, in that users don’t fully read large amounts of text. Instead, they tend to scan quickly and pick-up on keywords, sentences and paragraphs, and skip over the rest. Use the “inverted pyramid” where the writer tells the conclusion immediately and then follows with details by including background material.
Chunk it! Yes, take that giant slab of text and, like a sushi chef, dice it up into small paragraphs, use subheadings and bullet lists, and even split it over separate linked pages. There, chunking makes it so much easier to digest = much more usable.
Only as a last resort, will people tend to read instructional or informative documentation. Because users turn to documentation as a last resort, it needs to:
- be easy to find
- have an abundance of examples
- allow printing or downloading the whole document
Let’s avoid annoying users with excess unnecessary scrolling. PDA’s like Palm Pilots have a screen size of 320×240 pixels and Windows CE has 640×240 pixels. Generally a modern standard PC can operate on 800×600 or 1024×768 pixels. Designing for the web, one must take into account various toolbars cutting into the height and width.
Print media primarily uses static imagery and words as the form of communication, whereas multimedia focuses on a variety of techniques, including sound, graphics, and movement. As such, in a multimedia presentation, keeping text minimal engages users more effectively. Less than half the screen should contain text, at least from a design perspective.
Further guides about using text
A guide for font sizes is to use about 10 to 12 point for body text. Superior headings should be double their inferiors. To maintain semantics, all headings should be larger than body text.
- serif, eg. Times New Roman, Courier, Garamond
- sans serif, eg. Arial, Helvetica, Verdana
- and decorative, eg. kids fonts, funky fonts, classic fonts
Sans serif fonts tends to encourage the eyes to meander all over the block of text, and have been used for headings. Traditionally, serif fonts have been used for large bodies of text because the serifs form a line that draws the eye onto the next word. However, given that we are rarely going to present a large body of text in a multimedia presentation, the freedom of font choice is upon the designer. It is far preferable to present a large portion of text as small, readable chunks.
For any given presentation, avoid using more than 3 different font faces. Also avoid use of italics on screen, as it can be very difficult for users to clearly and quickly read the text due to the fact that italics break across the pixel grid. Use some alternative methods to highlight sections and draw emphasis. Check out ilovetypography.com for not-so-bland articles on typography that’s all around you. Visit welovetypography.com and myfonts.com if you too have a thing for examples of sexy fonts, or typefaces…
In colour terms
Complementary colours, those directly opposite on a colour wheel, are a good choice for use as accent colour in your colour scheme. Interestingly, the shadow of an object will also contain the complementary colour. For example, the shadow of a green apple will contain some red. Either light or complementary colours are particularly useful for text when using dark backgrounds.
All good designs certainly take accessibility into consideration. So try this Accessibility Color Wheel (wheel.zip) to assist choosing background and foreground colour pairs with a suitable WCAG contrast ratio. Giacomo Mazzocato designed this fantastic tool, which also simulates 3 kinds of vision deficiencies.
Presentations also use colour to convey mood. You must research your target audience to colour your presentation accordingly, be that bright, primary, pastel, muted, earth tones or otherwise. More about colour theory at Color Matters if you’re interested. Also, a photo based palette generator (check this sample) courtesy of bighugelabs.com, and everything for colour lovers at colourlovers.com …
In addition to colour, several other graphic factors contribute to successful multimedia communication.
- Style – modern, art deco, postmodern, industrial, cartoon, anime, etcetera. Try to identify with the primary user group and carry the style throughout the presentation.
- Texture – wood, puff paint, metal, marble, sand, plastic, etcetera. Texture helps to set the tone, such as business-like, laid-back, formal, friendly, or casual.
- Line – generates feelings of chaos or control.
- Lighting – assists setting the tone and mood of the presentation. Low-key (deep shadows) or high-key light (bright and evenly lit) can set mysterious or light-hearted moods.
First, choose the best three sources found in the previous task.
Using whatever software or tool you think appropriate, record the following information about those sites:
- blurb/ summary / screen shot (this can be a direct copy of an appropriate abstract or introductory paragraph on the site: but make sure you record and reference it as such)
Again, using any useful software you have downloaded, or utilising your existing software, record this information on your computer in the way that you think will be most useful to you in terms of preparing for your third assignment (that is, in terms of how easy you will find it to access, retrieve, understand, contextualise and recall why you saved it – and with what!).
* LOG ENTRY:
Record this information in your learning log, and also detail how you saved this information, what software you used and why. (Allen, n.d.)
- Stephen Curtain
- Eucalypt Productions
This page is self-promoting the debut of Winter Dreaming, a film by Stephen Curtain. It includes a preview, a film synopsis, cast and crew summary, and a list of screening dates and venues for 2008. Also listed are target audiences and several potential purposes for usage of the film as an educational resource. The author, cameraman, and producer has a swag of credentials including various photographic and editorial jobs for the BBC, ABC, Australian Geographic, The Age, Wild and Rock magazines. He has works in the fragile environs of Antarctica and around the world, and as an environmental – outdoor education teacher.
- unidentified author
- Falls Creek Resort Management
This commercial website caters to Australian snow enthusiasts. Telemark is the form of free-heel skiing promoted annually at the festival. This report from the latest news on the mountain, has no author listed, but photo credits go to festival organiser, Justin Hams. The article starts with a sales motive, then an overview of a successful festival, mentions the interest in the screening of Winter Dreaming (which was over 3 years in the making) before moving on to details of the racing results.
- unidentified author
- Mt Baw Baw
This is a dedicated calendar event page for the Winter Dreaming screening. Full details of the event time, location and admission are specified, along with a contact email address for further information. Both this and the Falls Creek website are supporting the Keep Winter Cool initiative and both have an environment page. Although it is also a commercial snow resort, Mt Baw Baw’s website includes a Green Visitor page and more than a cursory splash on it’s environmental information. That being said, both the resort web pages fail to make the connection between the film screening advertisement and the initiative they are all supporting.
I like CiteULike but my search query isn’t exactly an academic paper. That’s why I used Connotea instead to store all these annotations. It can easily grab the HTML title based on the input URL. Connotea is simple and straightforward, even if the interface could be updated to web 2.0 standard.
Initial belles lettres
I’d been writing my own travel diaries and sending postcards to loved ones during my sojourns around the globe. Naturally I took up blogging, once I was aware of it. Way back in March 2005 I was about to start the next venture into a mysterious culture… Japanese! I started writing in the (Google hosted) blog o vfowler during preparations for my first work gig as an English language teacher. In 161 posts, such as Ending of Sleepless in Brunswick, and bike police, I began to indite some of my misunderstandings and musings for the next year and bit.
Fulfilling a personal multi-purpose
As a public travel diary, my first blog served several purposes brilliantly. First, it allowed me to communicate with family and friends back home. Second, it gave me a place to practise writing and publish some news style articles combined with my photos. I’d started my flickr account at the same time, so it was a great tie in. Third, my travel narratives sufficed as the base script upon which I proudly produced my DVD trilogy – something like a slide-show on steroids.
This blog that your reading right now, vfowler blog, didn’t have a lot of direction initially. Mostly it was my laboratory for experimentation in what was possible on a self hosted WordPress powered blog. With the bells and whistles of additional media formats (audio and video), mapping, tags, categories, search, monthly archives, RSS, podcasts and vodcasts, interactive polls, calendars, communications and so on… I guess this is a web 2.0 blog. Currently vfowler blog is doubling as my required course blog for NET11.
Blogs for others
I kicked off a blog for my English students to practice writing with a real audience. At http://hawthornenglishclass.wordpress.com is where most of my class first understand the term blog – I still find this amazing. Thanks largely to my best friend, I’ve come to learn the flexibility of WordPress as a Content Management System (CMS) and have been punching out a couple of sites for friends using it.
Citizen Journalism – unlikely
The News is NowPublic.com, albeit with a by-line of Crowd Powered Media. Generally I agree with James Farmer’s post Citizen journalism sucks, that there ought to be a level of professionalism associated with the term journalism. (Farmer, 2006) Sadly, I’d also concur that the average citizen is not very good at the skills involved. Only through teaching English as a second language have I come to realise how poor the average punter is with his/her first language. I studied photography at university and have some awareness of what makes a better photograph. Now the odds of the average camera wielding person producing an acceptable shot are improving. Still, my preference is to see the kind of photos that get into Lonely Planet publications rather than the rubbish that comes from my mobile phone camera. Needless to say, it frightens me when garbage is published.
Content is king
Whilst the average citizen isn’t skilled enough for publishing to a broad public audience, there are no fewer than millions of high calibre blogs out there appealing to our many niches and interests. Blogs are at home when new content is frequently published. Just like newspapers, one way to measure the quality of the content is by readership. The really great content is always forwarded on to others, similar to the way we discuss news articles that have impacted upon us. Although, how far reaching a blog post is, may be less important than reaching the right audience.
Farmer, J (2006 , October 5). Citizen journalism sucks. Retrieved August 18, 2008, from The Age Blogs website: http://blogs.theage.com.au/media/archives/2006/10/citizen_journal.html