Tesmond's Useful Design

Discovered a "bug" with Googles Annotated Time Line. I developed a lovely performance monitor which would monitor a large number of tests across our servers. The number of test was planned to be ever increasing. Started off with 6 tests and everything was working fine. I added checkboxes to turn on/off the different tests using showDataColumns/hideDataColumns. This worked brilliantly. The tests grew until there were 11 tests in total. At this point one of the checkboxes started failing. It was using hideDataColumns(id) where id = 10 to hide the tenth data column. Unfortunately this caused lines 0 and 1 to disappear from the Annotated Time Line. It appears that if the value parsed is a string then it will interpret this as an array and so it is necessary to parse the values as integers. Thought I would mention this incase anyone else came across this.

Some organisations are highly developed, they recognise the pervasive way that their brand is influenced by all the facets of their organisation. Just take a look at Apple, a highly popular and very successful brand that recognises that high quality software, combined with high quality hardware combined with high quality customer service. This is all wrapped up with a website which provides a relatively low level of support friction . Sony sadly is not an example of a well structured support mechanism. Below I will provide an example of a poor customer service interaction I received with Sony, which started with failure of information in the website, this continue through to the Sony Centre store and resulted in disatisfaction in the Sony Centre, the Sony Support website and by proxy the whole Sony brand. If you search for accessories under the NEX camera system they list numerous items which are not appropriate for an NEX camera, however, I did not realise this until I purchased o

People don't read they scan -  Really? Every single web design book, and limitless online articles all advise you that people do not read they scan web pages. They cite tons of studies with scary statistics such as people will click the back button within 2 seconds, they will not read sentences and they will quickly browse your material. Because of these reasons all of the aforementioned articles recommend to re-write your body copy with this in mind, cut down the text as much as possible. Why do readers scan and not read? Is it the medium of web browsing that means you cannot read you have to scan? Many people point to studies showing that reading the same text on a computer takes longer than it does on paper. Well studies do suggest that this is true , but does this really mean that people only scan? One book on web design I have read recommended performing a ruthless cut of the details of an articles body copy. It is commonly stated that you should Start with the mos

Well I was looking into adding a shift select on a checkbox table. After performing a quick search I found a jquery plugin . This was a great start, but I found it would not unselect successfully. I made some minor modifications and now it appears to work in IE9 and FF... (function($){   function toggleSelected(element, shouldSelect) {     $(element).attr("checked", shouldSelect);     if(shouldSelect){         $(element).parents("tr").addClass("selected");     } else {         $(element).parents("tr").removeClass("selected");     }   }     $.fn.shiftSelectTable = function(){     var $table = $(this);         $table.find(":checkbox").click(function(event){       var last = $table.data("jquery-shift-select-table.last");       $table.data("jquery-shift-select-table.last", $(this).get());             if(last == null || !event.shiftKey) {         $(this).parents("tr").toggleClass(&

So you have written an HTML5 site on your local intranet with some lovely CCS3 and run it up in Firefox and you feel smug, all your HTML and CSS are perfectly formed, but you run it up in IE9 and all the CSS3 goodness has gone away leaving your lack luster IE7 version of your site.   Why is IE9 running in IE7 compatibility mode? IE9 has a hidden setting that forces it to run in compatibility mode when it encounters any intranet websites. Microsoft have detailed this behaviour in a Blog about what they call Smart compatibility mode . You can easily switch off the compatibility mode for specific machines using the internet tools mentioned in the article above, but most of the time developers do not have the luxury of applying corporate wide settings of this nature. Avoiding Smart compatibility with X-UA-Compatible Luckily there is a single line of HTML you can that you can use to override this behaviour: <meta http-equiv="X-UA-Compatible" content="IE=edge,c

The company I am working for likes to support our product only on Windows platforms that are officially supported by Microsoft.  It certainly is easier to tell the client.  Well Microsoft has a nice website  for anyone contemplating IE6 support. Looks like if you are aiming at the Chinese market your website had better support IE6!

I heard a news story today which made me so angry I had to write about it here. Researchers of Chronic Fatigue Syndrome (ME) have received death threats from a number of ME suffers. Why would they do such a thing?  Aren't these researchers just trying to help them? The reason for the threats is the suggestion by a number of researches that the condition is a mental health problem and not an unknown virus, and can be potentially treated through psychiatric care. For some strange reason people are offended if they are told they have a mental health problem, but being told that they have a weak and feeble body is apparently fine. It is not even just a simple case of blame diversion, because there are other instances where the cause of a problem can be "blamed" on the patient but they accept it.  For example if someone goes to the doctor with back pain they may well accept the statement that the cause is the way you sit at your desk, every day your posture is causin

Pure rectangular grid design is unsurprisingly a very popular website design strategy.  It allows clean simple easy to follow patterns.  However, it takes good design skill to stand out from everyone else who is doing this. If appropriate you can stand out with a more "organic" style.  Although you will probably end up building this using some from of grids the result can give a more "natural" feel.  It is important in a less formal design style to use colour and contrast to guide the user appropriately and to not make the style distracting and confusing.  Another technique to allow this naturalistic style is animation. Appropriate animation is probably one of the most under used techniques, perhaps because it is difficult to pull off, but when it is done well, such as in the transitions in iOS and Windows 7 phone then it can really help guide context and application understanding. Found a nice little demo  that can help with a useful transition highlight effe

An extract from Why persuasive design should be your next skill set a simplified history of user experience Human-computer interaction  is about paying attention to people and their relationship with computing. Information architecture  is about making things findable. Interaction design  is about making things usable. Content strategy  is about making things meaningful. Experience design  is about making things seamless. Persuasive design  is about making things influential.

Interest blog post by MS on sandboxing iframes .  I previously mentioned iframes as a cheap and easy way of embedding information into sites which should retrict maintenance and compatibility issues as much as possible.  However, if the iframe is truly 3rd party and you do not have great control over it this sandboxing sounds great for reducing possibilities for your site's security being compromised by an iframe.

A nice blog entry on MSDN has alerted me to the document.hidden property to help with performance. It looks like this will be great for dash board and auto alerting webpages.  Have a few ideas on how to use it already :).

Just a little CSS3 example I quite like.  Using the "alpha" layer in the box-shadow allows a more universal reusable style as the background and border colours can easily be altered but the overall style remains the same.     .info {         background-color: Khaki;         border: 1px solid DarkKhaki;         border-radius: 4px 4px 4px 4px;         margin-bottom: 2em;         margin-top: 1em;         padding: 0.5em 2em;         width:20em;         box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;        -o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;        -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;        -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;            }   <div class="info">    Something slightly important here </div> Just posting this to remind me of some simple options to create nice shadows regardl

iFrames, do they even still exist? Well integration with systems isn't aways APIs, XML and JSON magically working in harmony.  Some times you have to integrate a web app into another site as quickly as possible, maintaining the sparation to avoid unpleasant upgrade costs. iFrames intially appear to be a great solution, but they do present a number of horrible problems.  The worst offender IMO is the height property.  Why on earth does setting the height to auto or 100% not allow the iFrame to fit the content it contains automatically?  This would seem the most logical and common option, who likes scroll bars inside scroll bars?  Well I guess those higher powers that design specifications seemed to decide that scrollbars are great. So far the best solution I have found so far is at Dynamic drive , a bit of JavaScript that automatically resizes the iFrame to fit the content.  However, a word of warning I found I had to make some minor pixel adjustments in the code, but otherwis

Just discovered a nice way to achieve all of those lovely CSS3 features on IE6-8.  Previously I had generally used an IE specific CSS and images (Yeah I know nasty right?).  CSS3 Pie uses a bit of JavaScript to "fix" the missing border shadow and linear gradient CSS properties in IE6-8. Now if we are fair IE7-8 can perform Linear gradients with a directX filter, e.g. progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff, endColorstr=#ffdddddd); But this is not perfect* and does not cover IE6.  If only everyone was on IE9, FF or Safari. *Anti-alias text issues, click behaviour can be effected etc.

At a dinner party recently after I revealed the fact that I was a software developer for a Library Management System the person asked me what I felt the future of books was.  Their interest was primarily in respect to what impact ebook readers like the Kindle might have to libraries and books. Well this is a pretty open ended question and I would like to divide this into numerous topic areas.  Although this blog post will only scratch the surface I am hopeful it will emphasis that it is a much more diverse future pattern than many "death of the library" posts are suggesting. I feel the main areas for discussion in terms of libraries and ebooks are as follows;  Fiction versus non-fiction,  public versus private libraries,  technology change in respect to electronic reading devices, first world versus the rest of the world, reference versus study material. Fiction versus non-fiction If we look at current ebook sales, verses physical copy sales we see and interesting fac

Wow the internet has come a long way, I remember when all the top designers were using 4-5 divs just to create rounded corners around a single page element.  Now with the magic of CSS3 you can create a beautiful "up-turned corners" with only one div! The basis of the up-turned corner is 3 angled shadow effects.  Now doing this with an image can be fairly effective, but not only is that "cheating", it is not the cleanest, simplest low bandwidth method.  With just a minor CSS trick you can have such an effect without images and all the extra bandwidth, late loading, etc issues that can occur. So how do you get 3 different shadow angles on a single DIV? The answer is to apply two classes to the DIV.  This way you can use the :before and :after selectors along with the content attribute to create 3 distinct shadows.  You can then use the transform property to rotate the before and after DIVs to create a lovely shadow on any CSS3 compliant browser. So our HTML is

Further research has shown me that if you "jailbreak" an iPad and purchase a camera adapter you can link it to external USB storage, which as I stated was one of my main problems with the iPad. However, this still does not endear me towards the iPad.  The fact that you have to "break" Apple's security restrictions just to perform what I would consider as required functionality is a big strike against the product.  If Apple dropped their restrictions then perhaps I could be tempted, but I prefer being supplied a device which I have more control over than one that operates in an Apple only paradigm... With Windows 8 rumoured to be available in 2012 Q1 I will find out if my wait was worth it, or if I should have been on the "Apple cart" this whole time.

I watched the windows 8 preview again and I cant wait to pick up a Windows 8 tablet.  I know the iPad 2 is already out, looks beautiful and is a relatively reasonable £400, but it is not quite for me.  There are several aspects I do not like, but mainly it comes down to two aspects. Fixed storage size.  If I purchase a 32gb model then that is all I have.  OK I could rip it open and put a new flash drive in, but not really the way I wanted to go... iOS.  There are many plus points, but overall I like the existing applications I use, I like the freedom of Windows and Android too much. Now you might wonder why would I not look at the Galaxy 10.1 and 8.9.  Well I have and lovely they are too, but again no USB storage, storage is fixed.  At the windows manufacturer conference the tablets all demonstrated the ability to connect to USB peripherals, and this for me is a very big deal! I have seen suggestions that a Sept 2011 release date for tablets is not out of the question...I know

As I work for a Library Management software vendor it is perhaps not surprising that I have some what of an interest in search technologies.  However, what I believe is surprising is the lack of interest many software packages seem to have in this technology.  In the "Information Age" search technology is perhaps the king of all technologies. Search technology has grown up a lot in the last few years, perhaps Google's dominance and wealth from being a market leader in this technology has elevated the lowly searches status, but quite simply I wonder why it has been neglected for so long. I remember a time of using multiple web search engines, Webcrawler was my early favourite, but Altavista soon became superior, then it was a 50/50 battle with Altavista and Yahoo, and then all of a sudden Google came from no where and won.  Anyway early searches tended to follow the wildcard boolean search paradigm.  i.e. you had to be very specific a search for child would not return an

It is considered somewhat of a typographic rule that “Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple column work, a better average is 40 to 50 characters.” What I am musing over is appropriate behaviour for web applications with "liquid layouts" and columns which can contain multiple lines of text.  Essentially the choice boils down to prescribing a value (or range) for the column to fit to, or allowing the text to fill the remaining view port space available, given sensible element spacing.  Perhaps it is better to create a simple pros/cons list and attempt to weigh up the balance in favour of one approach or another. Pros The end user is completely in control, they can adjust the view port to fit the text to the level of their choosing, a value that they are happy

Design being a reflection of the data function rather than user goal oriented I mentioned this is a previous blog, but my example was perhaps a little too far from home for most people so I will give an example of a Microsoft Excel behaviour that has been generating support calls for a very long time, and I truly do not know why it has not been changed. For as long as I can remember when entering a purely numeric value with leading zeros into Excel the zeros the column type automatically changes to number and the zeros are removed. Now I am assuming that if the column type is number then the values in the column can be stored more efficiently (as integers represented by bits rather than a strong) and that math calculations can be performed more efficiently and accurately. If this is the case then the turning into numbers has a potential data function benefit, but for the end user it is almost always conflicting with their goal.  Typing in a phone number or a barcode, which are su

I watched an episode quite a long time ago and was facinated to hear that apparently Florence Nightingale invented bar charts.  I found it interesting that it was in the early 1800s that bar charts were first used.  Well apparently William Playfair preceded her significantly with a published barchart in 1801, which given Florence Nightingale was born 1820 was defintely ahead of her. QI how could you, actually I have always wondered about some of the facts that make it on to QI, perhaps I should research more. For anyone interested in early visual representations of information then I found this site particularly interesting.

You throw our tea away, well that is upsetting but I will get over it, but seriously US to UK pricing is simply upsetting. Sony announced their new handheld games console at $299.  A quick currency conversion puts that at £182.58.  So where does Amazon's £279.99 price come from? Well I am not into handheld gaming consoles, but I am more upset by the principle of the matter...

From my experience the number one enemy to good UI and UX is when the interface becomes a reflection of the underlying data rather than the users perceptions and goals. I once had to test a piece of software that was meant to be an emergency application for when server access failed.  It was designed to run standalone and then the data could be uploaded to the server when it was back online so that network outages would have a temporary method to allow work to continue. Now the single biggest problem with this software is that the user interface was developed based on the steps the database required rather than the steps that the user should perform. Uploading the offline data should have been a relatively easy process but instead it was an extremely painful process demonstrating a huge lack of user empath throughout. Stage 1 was a form to define the offline data outage.  Then there was a second form where you imported the data files.  Then you had a third form to check the val

I am sure I am not the only person who has read about Apple's legal action against Samsung with some interest. Interestingly perhaps I have purchased both a Galaxy S and an iPhone 4, but I was certainly not confused about my purchase and I was certainly aware of the differences between the two phones.  Actually most people I know who know nothing about phones purchased an iPhone, those that did know something about phones made a conscious choice between primarily HTC, Apple and Samsung for the most appropriate phone for their purposes. Now I have no real knowledge of patent law, so I do not know how much of a case Apple have, but looking at the filing there are some minor technical inaccuracies, some design decisions that I consider significantly different and of the few similarities from my perspective I believe they could easily be explained with convergent design. Perhaps the most obvious "copy" is the green phone call icon.  Now, while you could easily claim they

Thought I would just mention that there is a general lack of empathy in the world.  The title phrase It can't be that difficult to do this, can it? This is often an upsetting phrase to here for a programmer.  It borders on insulting the programmers intelligence.  Ok it may be a few steps away from you're an idiot and you really should be able to do this easily if you had an ounce of intelligence, but it is not far away enough from this phrase that it does not have the ability to grate or offend.  A slightly more empathic phrase would be more a long the lines of is this possible, how much work would it take I can put together a word processor that would make those of the 60s look appalling with little work at all, but just because in my field a lot of the work of the 60s has dated fast I would not assume the same of other fields.  The first successful moon landing was more than 50 years ago I would never say to a rocket scientist in my ignorance of their tasks, landing o

I recently read an article by Bret Victor titled Magic Ink Information Software and the Graphical Interface .  It further reinforced to me several very important aspects of software design. It is vital to focus on the user's goals when designing UI interactions Failure to empathise with a user leads to significant design flaws Team contribution can lead to a design which is greater than any one designer can achieve A few pages into his article there is a critique on Amazons results design.  There are several salient points that can be taken away from the criticism, however, I feel there are a couple of incorrect design decisions, and perhaps not a coherent focus on the most important point. The main criticism was the inappropriate use of space and not providing the correct information at the correct point in time.  While this is a reasonable point to make, I feel a more advanced criticism would be to look at the user goals of someone viewing that information before moving on t

Well it took quite some time to get an X500 Toshiba laptop to connect to a Pioneer PDP-4270XD plasma TV, so in case you are suffering the same issue of no display being output through the HDMI socket you might like me find that the problem was due to an old bios...  Updating the BIOS was all that was required to get the system to output to the TV. Also to avoid vertical refresh issues it appears necessary to "extend the desktop" rather than mirror it to the TV.  Not sure why that is the case, might investigate this at a later date. During my investigation I undated the Nvidia drivers etc.  I have noticed that some of my HDMI cables do not work with the X500 laptop, but do work with other devices successfully, so if you are still having problems try another cable as well before you give up.

Lou Rosenfeld presented a fascinating talk at the London UX 2011 conference  titled Redesign Must Die.  Obviously this is quite a contentious heading for a talk presented to people who make their living from redesign.  He primarily presented the University of Michigan's website and its extremely regular redesign strategy.  Essentially asserting that the redesigns seemed limitless and a waste of money... Now one element that has always generally irked me when design projects for customers is that I have always felt they do not understand the potential for the software.  Actually more precisely it is not the customer's narrow vision, but more the sales/management idea that this should be so rigidly adhered to.  Essentially the customer will ask for exactly what they have already only incrementally improved, the famous quote attributed to Ford sums it up "If I had asked the consumers they would have told me they wanted faster horse...".  So when Lou talks of avoiding r

I really dislike the Windows Shake.  I have not yet been in a situation where I want to minimise all windows except for the one with primary focus.  I cannot think of a generally realistic situation where I would want to.  With the Windows Key shortcuts, the taskbar preview and the search feature this feature is certainly redundant for me. However I can accidentally trigger it when comparing information from 3 windows and do so perhaps once every 2 weeks, hence my joy in finding out how to turn it off. http://www.howtogeek.com/howto/windows-7/disable-aero-shake-in-windows-7/ Does involve not just modifying the registry, but actually creating reg keys, something that is fairly uncommon unless you are manipulating your own software, but hey never knock a solution to your problems.

Well my wife has an iPhone 4 and I have a Samsung Galaxy S.  I am not one of those petty fanboys so I feel I can comment in a relatively unbiased fashion about the differences between the two. Up until recently I felt it was a relatively even contest.  I loved that I could run flash on websites, and that I could run multiple tasks simultaneously, my phone was lighter and thinner than any case enclosed iPhone.  However, I did envy the iPhone's text rendering, as well as the mute switch on the side. There was one feature I thought I would be upset to not have and that was the camera flash.  The lack of a camera flash has not been that big an issue for me, especially as the iPhone's flash really does give everything a horrible yellow hue, which requires post photo filters before the picture is actually usable, in most situations the cameras are equal. However, Samsung recently released Android 2.3.3 on the Galaxy S and this update is amazing.  The biggest new feature is the

In a previous post I suggested that at a certain size hierarchies serve little purpose, actually this is not strictly speaking true.  Hierarchies of data have two effects they both simultaneously obscure and reveal useful data. They can help lead to serendipitous discovery through browsing, however, by an item appearing in one sub-menu and not another it can lead to useful data not being discovered if the archiver's mindset is different to that of the seeker. Librarian's have worked on classification systems since their inception and be it Dewey, Library of Congress or any of the more specialist scheme they all have their issues.  Someone researching a specific individual who has written poems, scientific literature and novels could have their work in very different locations in a Library or could all be grouped together depending on the scheme used. As you can see the archiver's choice of hierarchy directly effects the efficiency that the data can be retrieved and th

My lovely Sony DSC-F828 camera stopped charging the battery and started displaying an error message "For InfoLITHIUM battery only".  The manually helpfully told me that my InfoLITHIUM Sony branded battery was not an InfoLITHIUM battery. I obviously feared the worst that possibly my camera was possibly failing to detect the battery type and preventing me from using the camera.  I checked all of the contact points and performed a camera reset, but still my battery failed to function... Purchased a new battery and luckily have discovered that it was just the battery that had become faulty.  Woohoo no need to get a new camera. Ok there was some disappointment in this despite my complete lack of funds to purchase any replacement :).

I cannot tell you how many programming books I have read which drill in the importance of documentation.  Of course documentation is not always perfect, but I genuinely thought that every programmer realised it was vital to the health of a project that the documentation is as good as possible. Reading this sentence though suggests the Moodle development team have been reading a different set of books to me:- Normally, if you want a particular sort of setting, the easiest way is to look around the admin screens of your Moodle site, and find a setting like the one you want. Then go and copy the code and edit it. Therefore, we do not include a complete list of setting types here.  Moodle.org It is perhaps stranger still to me that the most important set of documentation the How to create a Moodle Block is still not up to date with the current version!  Luckily is you spend enough time looking around in the PHP code you can find the information you want, but this should not be the pre