Category Archives: Multimedia

All my posts related to Multimedia in Business Information Systems 4

Multimedia & Business – Movie OS

Science Fiction is a big source of inspiration for new technology development. Some gadget that became or are becoming reality after first appearing in movies include jetpacks, invisbility cloaking, GPS and holograms.

Computer Operating Systems depicted in movies and TV shows are often pure fiction that is added in post-production by graphic designers. However, despite these ‘Movie OSs’ often being scoffed at online, some believed that these could become inspiration for how future OSs could become.

Some examples of Movie OSs.

The Matrix Reloaded:

Jurassic Park runs on UNIX:

Hacking into the Department of Defense in Swordfish:

Predator’s Wrist-Computer UI:

And of course the famous genture-based UI from Minority Report, which could well be in consumers homes within the decade:

CSI New York uses Visual Basic to code up GUIs (hilarious):

Further Reading

Advertisements

Multimedia & Business – Zeo – Data on Your Sleep

Zeo is an example of how technology is allowing people to monitor their own health. Zeo’s technology measures sleep patterns, and produces easy-to understand charts that allow the user to see clear information about their sleep.

Clearly, a person would not be able to make sense of the data were it not for the user-friendly graphics. More examples of similar products include Fitbit and DirectLife.

Using cheap electronic sensors, the internet and friendly multimedia graphics, medicine may chance from being doctor-patient focused to more self-diagnosed.

Four Principals of Graphic Design – Lifehacker.com Evaluation

This week, I am reviewing the very useful software and productivity-related site lifehacker.com under the 4 pricipals of graphic design.

Lifehacker logo

Proximity

“Proximity refers to the distance between elements on a Web page and how the elements relate to one another”.

Lifehacker Homepage

By grouping related items together on the homepage, Lifehacker have managed to create a visually appealing page that uses the prinicipal of proximity well. Note the top links at the top of the page being grouped together, and note the individual articles being laid out after one another in logical fashion, with each article having a picture on the left, a description in the middle, and miscellaneous information on the right. A user can navigate through new articles every day in this consistent, logical page layout.

Alignment

Lifehacker Alignment

As we can see here from this screenshot, Lifehacker does a good job of aligning the different elements on one of it’s articles webpages. The different elements of the page, outlines in red above, line up nicely creating a nice, pleasant layout for the reader. The images in the ‘related articles’  on the right are nicely lined up also. The one element of the page that is not lined upto anything is the search box on the top right, this is alingned to the extreme right, which is consistent with most web users expectation of where to look for a search box.


Repetition

“The principle of repetition states that you repeat some aspect of the design throughout the entire piece”.

Lifehacker Repetition

As I’ve noted in the image above, some of the design elements that are kept consistent are the use of the dull green backround colour for highlighting white text in labels and titles, keeping the same sans-serif font throughout the whole website and keeping the article link layout the same for each article – note for example, the same timestamp, number of hits for the article and number of comments for the article are all in the same place and use the same logos in each article link. Again, I feel Lifehacker scores highly for consistency.

Contrast

“The principle of contrast states that if two items are not exactly the same, then make them different”.

Lifehacker Contrast

To highlight one aspect of where contrast is used, I’ve highlighted the different types of text above. Things to note:

  1. The big, bold article title
  2. The smaller, bold subheading
  3. The smaller, unbold text for the article content.
  4. The grey-coloured text for the heading on the right hand side.
  5. The grey box which makes the “#googlereader” tag stand out and differnetiates it.
  6. The slightly bigger text in black for the related article description.
  7. The tag cloud uses green text to differentiate the tage from other text on the page.

For more on the four pricipals of graphic design, see this article on C.R.A.P.

Multimedia & Business – Training

terminator-augmented-vision-reality

Augmented Reality is an exciting new area in which multimedia is having an impact that will become increasingly important in the future. The first time the general public became aware of the concept of AR was in the Terminator movies. Arnold Schwarzenegger’s Terminator was a deadly effective killing machine as a result of the tactical information his field of vision provided him.

A slightly more benevolent use of AR in the future will be in the area of training. Currently, training can be a source of information overload. In the video below, the mechanic sees only the information needed at the exactly time he needs it, to conduct the repairs on the vehicle.

The US Military created the PC shooter “America’s Army” in 2002 to give a realistic simulation of what military training and combat is like. For more information on how the US military is adapting computer games for training and simulation purposes, see here.

Multimedia & Business – Reference

As I’ve said before, data visualisation is becoming increasingly important as the amount of data grows and grows, yet our ability to consume information hasn’t changed with perhaps thousands of years. To make sense of this information overflow, effective multimedia can be uitlised in creative new ways. A example is the iPad app above, Elements. It’s hailed as one of the best examples of how the new tablet device from Apple can be used. Elements allows a user to rotate an extremely high quality image , in three dimensions, of all the elements on the periodic table. Apparently the creator burned out six high-end cameras taking so many photographs for this task! The effect is amazing:

Ryanair vs. Aer Lingus, the Deathmatch

For our multimedia assignment this week, we were given the task of comparing two of the three main Irish airlines’ websites in terms of usability. We are to compare the two websites under three separate heuristics, however, I’ve decided to also evaluate them under a fourth category – “first impressions”, as I believe this is crucial on the web as most casual browsers have ADD.

Ryanair and Aer Lingus are two of Ireland’s best known brands, and two very successful airlines in their own right. Aer Lingus is the old, established, more genteel company, and Ryanair is young (relatively speaking), brash and extroverted show-off, who’s ethos closely resembles the attitude of it’s outspoken CEO, Michael O’ Leary.

How closely would the respective company websites reflect the companies’ corporate images?

First Impressions.

– Aer Lingus’ website maintains the traditional Aer Lingus colours, that is to say green all over. This will be recognisable to their established client base who are familiar with the look from their aircraft over the decades. I wasn’t too impressed with the ad on the homepage however; the prices are in dollars. This is a commercial opportunity lost, as I could be interested in some of the offers but be turned off by the fact that I would have to convert the currency myself. On another day, the ad contains sterling prices.

Aer Lingus Homepage

One of the benefits of the web is localisation – Aer Lingus’ site should have detected that I was a visitor from Cork and displayed localised, relevant ads that have a laser-like focus with a maximum chance of converting me to buy something.

– Ryanair: is first thing that hits you when you on reaching the Ryanair homepage is it’s cheap and tacky feel. It’s contrasting yellow and blue colours and it’s flashy, JavaScript-ad laden interface are exactly what you would expect from a company with an attitude to business such as Ryanair’s.

Ryanair Homepage

It certainly fits in with the story of how the site came into being – two students in Dublin built it, and wanted £15,000 at the time for it. True to form, Ryanair bargained them down to £12,000 if my memory serves me correctly. Curiously, Ryanair’s logo of the woman and harp from it’s planes’ tailfins isn’t present at all on the homepage.

Right, now that the first impressions have been contrasted, onto the heuristics (and marks territory).

There are 10 main usability heuristics, drawn up by reknowned usability expert, Jakob Nielsen. They are:

1. Visibility of system status
2. Match between system and the real world
3. User control and freedom
4. Consistency and standards
5. Error prevention
6. Recognition rather than recall
7. Flexibility and efficiency of use
8. Aesthetic and minimalist design
9. Help users recognize, diagnose, and recover from errors
10. Help and documentation

Our assignment is to compare Ryanair and Aer Lingus’ under three heuristics of our choice. We are to book return flights for two adults for July 2010 from Dublin to London and evalute the two different sites performances. I am going to evalute Ryanair and Aer Lingus’ sites under:

1. Visibility of System Status

2. Consistency and Standards

3. Error Prevention

1. Visibility of System Status

Both Ryanair and Aer Lingus score highly under this heading, in my opinion. They both have a nice, clear, step-by-step process to ensure the customer doesn’ t get confused and back out of a transaction in the middle of a potential booking.

Ryanair Booking Process Breadcrumbs

Ryanair’s sales funnel

Aer Lingus Booking Process Breadcrumbs

Aer Lingus’ sales funnel.

Notice that for both sites, the current step in the process is highlighted differently to the rest, which is useful feedback for the user. Aer Lingus’ version is easier on the eye, while Ryanair’s is plain but functional.

2. Consistency and Standards

2.1 Ryanair’s Booking Process

Ryanair Flight Details Entered

Fill in fields to kick off the booking process.

Ryanair Outbound Flight Details

Ryanair Return Flight Details

Outbound and return slight details are detailed in the above format. I think this is nice and clear, and the colours and fonts are consistent throughout.

Ryanair Services Page

This Services Page is the next step in the process. Again, the colours, font and the small images such as the picture of the plane, are consistent throughout.

Ryanair Billing Page 1

Fist half of the billing page ‘above the fold’ i.e. what’s visible without scrolling down.

Ryanair Billing Page 2

This is what’s visible ‘below the fold’. Again, I think this page ranks highly in terms of consistency and standards. The process of booking a flight is linear in nature and is quite straightforward, and I think they have this quite user-friendly as it is in their best interest to maximise sales.

2.2 Aer Lingus’ Booking Process

Aer Lingus Flight Details Entered

Aer Lingus’ flight details dialog box that starts the booking process. This is consistent with the look and feel of their homepage, above.

Aer Lingus Select Dates Screen

This is the ‘Select’ screen for Aer Lingus. I like this page, it’s easy to see exactly what flight you are choosing and the price for each.

Aer Lingus Select Dates Screen 2.1

Aer Lingus Select Dates Screen 2.2

Somewhat confusingly, the customer is then taken to this page, still part of the ‘Select’ step of the booking process. It displays pretty much the same information as the previous step. This could have been included in a confirmation screen just before purchase – I would regard this as a deviation away from the standard online sales process, and as such, a poorly thought out sales flow.

Aer Lingus Price Screen 1.1

Aer Lingus Price Screen 1.2

Step 3 of the sales process, “Price”. Again, consistent and standard.

Aer Lingus Passenger Screen 1.1

Aer Lingus Passenger Screen 1.2

Step 4, “Passenger”. The passenger enters all their details necessary to book. Again, consistent and standard layout.

Aer Lingus Payment Screen 1.1

Aer Lingus Payment Screen 1.2

Aer Lingus Payment Screen 1.3

Aer Lingus Payment Screen 1.4

Step 5, “Pay”. This, again, is consistent. There is quite a lot of data entry in this step and the previous, this could have perhaps been better thought out.

This is as far as I’ve taken this exercise, to avoid having to purchase a ticket!

Both airlines deserve high marks for consistency and layout in their design. Aer Lingus’ is definitely more attractive, let contains more steps than necessary in my opinion; while Ryanair’s is more cheap and tacky, but let’s you but with the minimum required information.

3. Error Prevention

Going through the sales process, it was interesting to note the different approaches to error prevention. Here’s an example from Aer Lingus:

aerlingus_error

Ryanair’s approach to error prevention is somewhat different. There is one particular screen relating to selecting travel insurance, where you have to scroll thorugh a dropdown list to opt out of selecting the insurance. This is very misleading and sneaky on the part of Ryanair – the first instinct most people would have, particularly if they were in a hurry, would be to pick their country and move onto the next step.

ryanair_bad_dropdown

Ryanair also differ somewhat in their highlighting of user errors – they highlight the empty text field in red rather than Aer Lingus’ more suble approach of showing the blank fields on a message box at the top of the page.

ryanair_error

Well that’s the end of my evaluation, hope you enjoyed it!

Multimedia & Business – Presentations

Multimedia has transformed the way in which people communicate in business. PowerPoint presentations and data visualisations are two prime examples.

Steve Jobs, above, delivers a keynote speech near the end of January every year, which is closely watch by millions of industry observers, Apple customers and fans. It’s the benchmark to which others aspire to in delivering effective presentations.

Data Visualisation is increasingly important in the world of business, as data sets grow ever larger. From simple charts in a spreadsheet, to beautiful data visualisations such as the one below, multimedia has a big impact on how we humans will consume complex and vast amounts of information into the future.

For a stunning example of how multimedia used effectively can be used to highlight data, see this video by Hans Rosling at Ted.