I’m an infrequent visitor to London, so I try to make the most of my visits. I’d travelled for the British Unversities Film & Video Council Learning on Screen awards – in which I was a finalist – but had also managed to take in Damien Hirst at Tate Modern and Lucian Freud at the National Portrait Gallery. As I had an hour before my train home I popped into Selfridges’ food hall. For those who haven’t been: it’s fantastic; great fresh food, the finest chocolate. They also stock items you won’t find in your local supermarket, such as Joe & Seph’s Gourmet Popcorn. I’d not encountered Joe & Seph’s before, but was on the lookout for something a little different, and their caramel, pepper and chilli popcorn caught my eye.

The following day, I was at home watching TV and eating the gourmet popcorn. Now, I’m not a massive fan of popcorn, in cinemas I find it underwhelming and don’t usually finish the smallest of boxes. I start off grabbing small handfuls and then get progressively bored of it. The gourmet popcorn was different though. I found myself savouring each kernel. As I ate, a thought that had been forming in my mind for some time suddenly crystalised: I’d rather ‘pay more, get less, but better’. The gourmet popcorn is more expensive than run of the mill popcorn, such as Butterkist. As it’s more expensive you’ll probably buy it less frequently.  You also get less for your money, but, crucially, what you get is so much better. The quality massively compensates for the smaller quantity.

The intersection between popcorn and design

As I thought about ‘pay more, get less, but better’, it occurred to me that not only had I been doing this sub-conciously for a while with regard to purchases, but it was also influencing how I thought about design and development. In all of my recent projects I have been focusing on the core features that the user will need, rejecting or ditching anything that detracts from the accomplishment of the user’s main goal. The original scope of the Virtual ECG project (incidentally, the reason I was at the Learning on Screen awards) envisaged a tool testing the recognition of heart conditions from ECG scans and the complete process of ECG capture, including skin preparation. All of these things detracted from the core problem: teaching the accurate positioning of electrodes and connection of leads to produce accurate ECG scans – and so that’s the only thing the simulation does. It’s also in a current project – a room finding/mapping service for the university I work for – where I’ve been impressing upon people how important it is that the service does “one thing, but does it really well”.

A day later I was reading the ‘Design Principles’ chapter of ‘Steve Jobs’ by Walter Isaacson. Within was the design philosophy of the German industrial designer for Braun, Dieter Rams: “Weniger aber besser” – “Less, but better”. It turns out that Apple’s Jony Ive is a big fan of Dieter Rams, and subscribes to the “less, but better” philosophy. I was unaware of Rams before reading that chapter. It’s probable that I have been absorbing this creed by osmosis. I’ve only ever  bought  Macs, and have been using them since 1997. If you are going to have a design philosphy (and you probably should), then arriving at the one which informs the design of the products of the world’s biggest company is not a bad one to have.

You could see ‘less, but better’ as a version of the ‘Keep it simple stupid’ idea. But the way I see it is that it isn’t simply about rejecting complexity or reducing and restricting features for the sake of it. It isn’t about a simple rejection of feature bloat or feature creep. It isn’t about keeping things simple just to make your life easier. It’s about focusing on the things that matter most to your users and refining and improving them to deliver great experiences for your users. Doing this might make your life as a designer/developer more difficult, but you don’t matter, your users do.

So, there we have it, the route to satisfaction. If you’re buying popcorn, ‘pay more, get less, but better’, and if you’re designing/developing simply remember ‘Weniger aber besser – Less, but better’.

]]> http://www.brichards.co.uk/blog/less-but-better/feed 0 http://www.brichards.co.uk/lomography/norwegian-church http://www.brichards.co.uk/lomography/norwegian-church#comments Wed, 22 Feb 2012 21:53:24 +0000 Barry http://www.brichards.co.uk/?p=291 Continue reading →]]>

Accuracy can be the difference between life and death

12 lead ECG (Electrocardiograph) scans are a common diagnostic tool for assessing damage to the heart. ECG scans are performed by a variety of different health care practitioners, who attach ten electrodes and leads to a patient to record the rate and regularity of heartbeats. Each scan produces a series of waveforms printed on graph paper. Expert interpretation of these printouts can reveal life threatening conditions, such as the symptoms of a myocardial infarction – in layman’s terms: a heart attack.

Therefore, it is important that ECG scans are recorded accurately. Inaccurate recordings have the potential to provide false positive diagnoses, leading to either, unnecessary treatment for non-existant conditions, or non-treatment of serious, possibly fatal, pathologies. Mis-placed electrodes and incorrectly attached cables – each cable should be attached to an electrode at a specific location on the patient’s body – are the most common causes of inaccurate ECG scans.

Practice makes perfect

Virtual ECG is an online, high fidelity, simulation that aims to reduce the incidence of inaccurate ECG scans by teaching accurate recording of ECG scans through practice. Learners attach the ECG electrodes and cables to a ‘patient’ and record an ECG. The simulation then generates an ECG recording comensurate to the configuration of electrodes and cables; utilising real ECG data, the simulation is capable of generating in excess of six trillion unique ECG scans. The result of the learner’s recording is overlaid with an expert’s recording for the ‘patient’. Where the learner’s recording does not match the expert recording, errors are displayed. Textual feedback is also given to help the learner understand their mistakes. Using the visual and textual feedback learners can assess where they failed to correctly configure the recording, make adjustments to improve their accuracy and re-record the scan. Learners are invited to repeat the process until they have mastered the skill.

ECG skills and knowledge have traditionally been taught in a didactic manner. While some courses provide access to physical simulation suites, access to them is limited by time and costs. As an online, virtual simulation, Virtual ECG provides a bridge between the theoretical and physical domains. Learners can apply theoretical knowledge, practicing and developing their conceptual understanding without the limits of time and location. Thus, learners are better prepared for physical simulations, and likely to gain more from those experiences. Furthermore, learners can re-enforce their learning and continue to practice virtually after a physical simulation, with a wider variety of patient body shapes.

Virtual ECG has been developed by the University of Glamorgan for use by both undergraduate nursing students and as CPD for existing healthcare practitioners. Currently, it features one ‘patient’ – a young, adult male. It is envisaged that ‘patients’ of both genders and a range of ages will be added.

For this project I was responsible for both design and development (using Flash and Actionscript 3). However, it would not have been possible without the input of Peter Lewis, a cardiac physiologist. Peter provided the academic and medical expertise required by the project. As with other healthcare simulations I have worked on, close collaboration between myself and the academic has been key to the project’s success.

Going head-to-head with Vinny Jones and Tintin

In February 2012 Virtual ECG was shortlisted for a British Universities Film & Video Council ‘Learning on Screen‘ award. In the ‘Courseware and Curriculum Award’ category it is in competition with an interactive educational CD-ROM for 7–13 year olds based around the Tintin film ‘The Secrets of the Unicorn. Further competition is provided by the British Heart Foundation’s ‘Heartstart: Skills for Life‘ training campaign, which is fronted in a UK television ad campaign by film actor and former professional footballer Vinny Jones.

The award results will be announced in a ceremony hosted by Lord (Robert) Winston at the BFI Southbank in London on April 26th 2012.

Access to Virtual ECG is currently restricted to University of Glamorgan students. For information about gaining access to the simulation please email brichard@glam.ac.uk.

Visit the Virtual ECG site: https://ecg.glam.ac.uk

So, you can now use SVG everywhere. But there’s one situation where it will cause you problems: when used in a responsive design in a Webkit browser, such as Safari (including the mobile version) or Chrome. Which is a real pity, as (repeating myself) SVG is great for responsive designs. Specifically, the trouble is that Webkit doesn’t report the height of the SVG images correctly.

If you check out the demo I put together you can see the problem. There are three SVG images on the page (rendered by Raphaël). All three are set to 100% height/width using JQuery. The containers that hold each SVG have their widths set in percentages, this maintains the ratios of the layout as the page re-sizes (the height should look after itself automatically). Which is where Webkit’s failure to correctly report the height of the SVG causes problems. The height of the SVG is always reported far larger than it actually is. Which means the containers end up being far too tall for the SVG they contain. You can see this in the demo. The green areas show the space between the actual edges of the image and where Webkit thinks the edges are. This is seriously problematic for responsive layouts, as it breaks them completely.

I’ve reported this bug to the Webkit project. But it takes time for bugs to get fixed, and more time still for those fixes to find their way into the browsers on people’s computers.

Happily there’s a workaround. Once more, it’s JQuery to the rescue. The answer lies in using the Window.onresize and Document.ready events to calculate this formula: (original SVG height / original SVG width * current SVG width). This gives the height in ratio for the current SVG width. We can then use this value to control the container height – and negate the Webkit SVG height bug.

Here’s the code to I used to fix the bug (NB ‘#floor’ is the id of the main SVG in the demo page):

function fixWebkitHeightBug(){

var svgW = 658;
var svgH = 500;
var curSVGW = $(‘#floor’).width();
var newSVGH = heightInRatio(svgH,svgW,curSVGW);
$(‘#floor’).height(newSVGH);

function heightInRatio(oH,oW,nW){

return (oH / oW * nW);

}

}

$(window).resize(function() {

fixWebkitHeightBug();

});
$(document).ready(function() {

fixWebkitHeightBug();

});

It’s not great having to use JQuery to fix issues like this, but it works; and that’s all your users will care about.

The first thing to say is that they can be tricky little things to work with. Support is currently provided via vendor prefixes (-moz, -webkit, -ms, -o). Since Safari 5+ the syntax has been standardised across all browsers for defining them:

background: -vendorprefix-linear-gradient(top, #170d42 0%,#6e80ff 50%,#000000 100%;

However, if you want to support earlier versions of Safari you’ll need a different syntax:

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#170d42), color-stop(50%,#6e80ff), color-stop(100%,#000000));

You could work out the code for a gradient yourself, but you’ll probably find it easier to use a generator, such as ColorZilla’s Ultimate CSS Gradient Generator.

Where you may run into problems, as I did, with CSS3 gradients is when using them for backgrounds in sites using a responsive design approach*. With a responsive approach the content reflows as the browser window size changes. Unfortunately, CSS3 gradients are rendered once, when the page renders. This can leave the gradient too short or too long for the page content. Sometimes, in certain browsers, it can tile in a very ugly fashion.

If you refresh the browser *after* re-sizing the browser window, the gradient will re-draw correctly. Now, we don’t want to force a refresh of the page, but we can force the browser to re-draw the background by using JQuery.

JQuery to the rescue. As ever.

Using the Window.resize event in JQuery we can re-set the background property of the element (this site uses a CSS3 gradient on the background property of the html element):

jQuery(window).resize(function()

{jQuery(“html”).css(“background”,-moz-linear-gradient(top,  “#170d42″ “0%”, “#6e80ff” “50%”, “#000000″ “100%”), -webkit-gradient(linear, left top, left bottom, color-stop(“0%”,”#170d42″), color-stop(“50%”,”#6e80ff”), color-stop(“100%”,”#000000″)), -webkit-linear-gradient(top,  “#170d42″ “0%”,”#6e80ff” “50%”,”#000000″ “100%”), -o-linear-gradient(top,  “#170d42″ “0%”,”#6e80ff” “50%”,”#000000″ “100%”), -ms-linear-gradient(top,  “#170d42″ “0%”,”#6e80ff” “50%”,”#000000″ “100%”), linear-gradient(top,  “#170d42″ “0%”,”#6e80ff” “50%”,”#000000″ “100%”), “#170D42\9″);

});

The code above may cause some text editors to huff and puff about a syntax error (Dreamweaver, I’m looking at you), but you can ignore this. The standard JQuery syntax for .css() requires speech marks around the value of the property, but if you do this with the list above the code will fail. You do, however, need to put speech marks around the hex and percentage values to avoid problems with invalid characters.

Thus, our gradient is re-drawn to match the size of the html element. There’s a slight bug in Firefox, in that the gradient doesn’t re-draw to the full extent of the html (Safari re-draws correctly).

*I don’t regard this site as being truly a ‘responsive site’, more optimised for devices using responsive approaches.

The biggest change for me is that, after ten years, I decided to completely overhaul my identity. The old logo and brand was no longer working for me, it had ceased to represent the nature and focus of my work. So, my first task to was to create a new visual identity for myself; which I think is, possibly, the hardest job for a designer.

With a new identity designed, I started to think about what I wanted from my site. My previous sites were all-Flash affairs. Sometimes, the content on them felt almost secondary to having a platform to demonstrate my Flash skills in creating interesting interactive experiences. This time though I wanted simplify things and put the focus on my work, rather than on the site itself. This thinking led me into switching from a Flash based to an HTML based site using WordPress.

The drive towards simplification was partly driven by my experience of updating and maintaining Flash based sites in the long term. No matter what clever XML based system I devised for updating the content, it wasn’t user friendly enough to keep me updating the site in the long run. Inevitablity, over time, the site would become out of date. By moving to WordPress the update process will be more user friendly, and updates will be more frequent.

Additionally, the Flash sites weren’t flexible enough in the long run. They were highly flexible within the parameters I set at the beginning, but adding fucntionality outside of those parameters would require a lot of effort re-writing code. It’s no surprise therefore, that when time is precious and client work takes precedent over your site, that those updates would not happen.

One of the attractions of Flash in the past has been level of control over layout and design it offered, especially when compared to table-based HTML designs (back in the day) and inconsistent implementations of CSS. The development of standards compliant browsers, such as Firefox and those based on Webkit, has done much to give designers control over layouts. With the development of HTML5 and CSS3 designers have much greater control over, and flexibility with, layouts than before. Re-developing my site in HTML gave me the opportunity to explore these technologies.

Mobile Safari and iOS also influenced my thinking, especially with emergence of responsive design. Though this site has been optimized for smart phone browsers, it is not a fully responsive site. It has, though, given me enough experience to apply fully responsive techniques to a project I’m currently working on.

If you have any thoughts about my site and work, please feel free to get in touch via email or Twitter.

Glamorgan goes global

In 2010 the University of Glamorgan was the first Welsh university (and one of the first ten UK HE institutions) to launch an iTunes U site.  A world class repository of free learning material, iTunes U features content from the world’s leading educational cultural institutions, such as Oxford, Cambridge, Open University, Harvard, MIT, Moma, The National Gallery, Tate Gallery and many more. iTunes U has provided Glamorgan with an international platform to showcase the excellence of both its academics and students.

iTunes U has been a big success for Glamorgan. In the first 18 months in excess of 1 million items of video, audio or PDF content were downloaded and 2.5 million people visited the site. Following metrics developed by Coventry University, this delivered an advertising value equivalent (AVE) of £8 million for the first 18 months. This figure also includes the value of local, national and specialist education press coverage generated by the site. All of which provided global reach and exposure that Glamorgan would not be able to afford through conventional marketing channels.

The global reach of iTunes U has also had unexpected benefits for Glamorgan students. Hollywood screenwriter Diane Lake (credits include the Oscar winning film Freda) heard a live radio play produced and performed by students and staff of Glamorgan (The Terrifying Tale of Sweeney Todd) and published on iTunes U. She was so impressed by the radio play that she wrote a script especially for the drama students and staff. The Casebook of Violet Strange provided a unique opportunity for students from a provincial UK university to work with an established Hollywood writer.

Bringing the site to life

A small project team was created and given nine months to gather and prepare content, obtain copyright clearances and create the iTunes U site. All of which was in addition to the daily responsibilities of each person’s job. My role was multifaceted, with responsibility for all design and technical aspects of the project and for the preparation and conversion of multimedia content into iTunes U compatible formats.

It was my responsibility to select and implement a technical platform that would serve content to Glamorgan’s iTunes U site. Following investigations I selected Podcast Producer, part of OS X Server, running on a Xserve. In order to configure Podcast Producer for Glamorgan’s needs I created custom workflows and dynamic, custom title sequences using Quartz Composer.

For the design of the site I was asked to create a fresher, younger look which departed significantly from the University’s existing corporate brand. This look was applied throughout the site, on collection covers, in PDFs, in a support site and on content title screens.

A lot of the content available at launch was converted from pre-existing multimedia content made for e-learning projects at Glamorgan. This required me to re-work interactive content into movies, extract audio and edit animations. A good example of this re-purposing is the Alien Worlds content. Some of the re-worked content required the addition of voiceover soundtracks to replace text based content. For this Sue Burnett, Production Manager, and I auditioned drama students from the University of Glamorgan and its partner college, the Royal Welsh College of Music & Drama. Under our direction the best students provided voiceovers and introductions for some of our most popular content, such as our language learning material.

The success of Glamorgan in setting up an iTunes U site with a small team, and in such a short time scale, led to Apple asking Glamorgan to talk about their experiences at Apple Leadership Events in Wales, Manchester & Rome. In support of this I was required to produce high impact, visually led presentations for Pro-Vice Chancellor Prof Clive Mulholland to deliver at these events.

I delivered a version of these presentations (with Sue Burnett) at the Greynog Colloquium (a HEWIT and WHELF organised event for Welsh HE institutions) in 2011. The slides for this presentation are available on Slideshare.

University of Glamorgan on iTunes U
University of Glamorgan iTunes U Support Site
University of Glamorgan on iTunes U Twitter page

It’s ok to kill the patient; and it might just make you a better nurse

(A virtual patient that is.) Managing pain in post-operative patients is a key skill for nurses. Failure to control and reduce pain during recovery from surgery can have dire, sometimes fatal, consequences; DVT and pneumonia are just two of the potential resultant complications. However, due to the obvious inherent dangers, student nurses cannot take full responsibility for the recovery of patients on a ward. This leaves a gap in experience between pain management theory taught in the classroom and ward placements under close supervision of qualified nurses.

Virtual Pain Manager (VPM) is an online high fidelity simulation which bridges the gap between theory and practice. It simulates the use of a Patient Controlled Analgesia (PCA) machine with a post-operative patient. Students are first taught pain management theory in the classroom, then they are given access to the simulation. The student nurse must control and reduce the patient’s pain sufficiently, ideally within 48 game hours so that the PCA may be withdrawn, and subsituted for oral analgesia. If after 72 game hours the patient’s pain remains high, or is not under control, then the student nurse is judged to have failed. If the care is neglient, this can lead to complications, and possibly death.

In the real world such an outcome is, shall we say, ‘highly undesirable’. Yet there is often more learning in failure than success. In the virtual world student nurses can replay the simulation again and again, each time adopting different strategies and observing the outcome, good or bad, of each. But always with the knowledge that even if the patient dies nobody has actually been hurt.

What happens to a patient’s respiration rate when you inject 5mg of Morphine?

That’s just one of the dozens and dozens of questions that I asked Gareth Parsons, the academic I developed VPM with. Incidentally, that was one of the easier to answer questions I asked Gareth, other questions tested Gareth’s knowledge to the full. Creating a complex interactive simulation, such as VPM, requires a close working relationship between the academic and designer/developer. The knowledge of each specialist must be harnessed to create an engaging experience that also fulfills the learning objectives.

Building VPM required me to understand how parts of the body, such as the heart, lungs, stomach, brain and eyes interact in the presence of morphine and/or pain. I also had to understand complex processes such as pharmacokinetics to be able to reproduce them in the virtual patient.
Underlying the user interface is a complex model of the human body that controls and reacts to various stimuli: chemical, physiological and psychological. Built using OOP methodology in Flash Actionscript 3, the interactions between morphine and respiratory rate, sedation, pain relief, nausea, blood pressure, pulse, the agression of the patient’s pathology and more are played out as in a real human.
The data for the simulation is held in an external XML file, allowing the academic to create multiple patient scenarios easily. As such the simulation difficulty can be adjusted to provide more challenging situations for the learner. Each scenario is also randomly effected by the simulation engine, encouraging real learning and application of knowledge, as opposed to learning to beat the scenario through repeat play.

VPM über alles

In 2009 VPM received a comendation in the Jorum Learning & Teaching Competition at the Association for Learning Technology conference. You can view my VPM conference presentation on Jorum. Following this VPM was made available as an Open Education Resource for other educators to use. This led to interest from across Europe, with a German translation nearly ready for release, and interest expressed in a Portugese version.

Experience VPM for yourself at http://vpm.glam.ac.uk

So, why does an eclipsed moon appear red?

Alien Worlds is series of seven animations which explain various celestial phenomena, from solar and lunar eclipses to retrograde orbits of planets and the structure of the Sun, helping us to understand our universe and our place in it.

The animations were the result of collaborations with science educators Martin Griffiths, Toby Murcott and Mark Brake and editor Sue Burnett; supplemented with my own detailed research into each phenomenon. At the outset of most eLearning projects I have little or no detailed knowledge of the subject. In order to produce effective eLearning solutions though, it is vital that I develop an in depth understanding of the material; if I don’t understand it, then I will not be able to communicate the subject to the learner. Therefore, I spend a lot of time talking with the academics, and reading around the subject. The academics were consulted regularly as each animation progressed from sketched storyboard, through full artwork to final animation. At every stage they were consulted to ensure the accuracy of the work.

In 2008 the Structure of the Sun animation received second place in the Intrallect Learning Object Competition at the Association for Learning Technology conference. This was particularly satisfying as this was the most ambitious of the seven animations. Although there is plenty of information online about the Sun, most of it is text based, with illustrations tending to be crude, simple diagrams of limited benefit to learners. In addition, to obtain a full understanding of the Sun learners must trawl multiple websites. In contrast the Structure of the Sun provides a comprehensive, and highly visual, explanation of the Sun from the core through to the surface and atmosphere. This made the comments of competition judges particuarly pleasing:

Extremely visually attractive, it succeeds in conveying a great deal of complex information in a very user friendly way.

I feel that this is an effective and appropriate way of teaching this complex subject, and I found it extremely engaging and enjoyable to use.

I found myself reflecting on its content long after I’d completed working through the object.

To iTunes U, and beyond!

Originally, the animations were designed in Illustrator and Photoshop and animated Flash for the alienworlds.glam.ac.uk website. In 2010 they were re-worked, with a voiceover replacing the text, and released as movies for free download on the University of Glamorgan’s iTunes U site. Immediately they were featured by Apple on the UK iTunes U store homepage, and occupied the top 100 UK downloads for weeks.

Download Alien Worlds from iTunes U or visit the Alien Worlds website.

Bridging the gap between business and academia

Run by the University of Glamorgan’s business incubation facilty (GTi) G-Blog was set up to provide links between entrepreneurs and academics. Funded by the Joint Information Services Committee (JISC) Business and Community Engagement, Collaborative Tools Programme, G-Blog gives local businesses access to University of Glamorgan expertise.

In addition to designing the logo for the project, GTi also asked me design and build the website. Following a consultation period to ascertain GTi’s needs for the project, WordPress was chosen as the most appropriate CMS solution.