Archive for the ‘Levels’ Category

How to really build great web apps

Friday, August 12th, 2011

Paul Boag wrote this blog post on Smashing Magazine which forced me to write a counter post.

As a UX professional who has worked on some the world’s leading web apps for clients such as: Tesco, Lloyds Banking Group, Legal & General, EON Energy, National Lottery, Bupa, Boots, Directgov and Argos, I feel obliged to offer my 2p on this subject matter.

I will dissect some of Paul’s statements from his post which I have issues with.

I seem to mostly or heavily disagree with most of the things which Paul wrote here, hence this is likely to be a long post. Apologies in advance.

I’m not intending to disrepute or lessen Paul’s profile with this post. I’m rather hoping to create a meaningful discussion on the topic, with hopefully some good additional replies from people in the know.

Disclaimer: I respect Paul as a family man, web consultant, accessibility evangelist, an eloquent speaker and a very entertaining podcast presenter. However, not necessarily as a ‘web apps expert’ though. :-(

So here we go.

Paul says: ‘A better web application for your business’

From the very start this article has confused me. Paul talks about ‘my business’, which I am likely to be very familiar with. The rest of the article follows on to talk about things which do not really make sense against this title.

Paul says: ‘Are you fed up with hearing about yet another Silicon Valley Web application built with fairy dust and funded by magic pixies?’

This is like one of those generic old school advertising lines? Something like: ‘Need a new hoover? Argos has 30% on all hoovers this weekend!’ If you don’t need a hoover, you should not listen basically.

Why would anyone be fed up with someone else starting a new business or building a web app? We all have a choice to use or not use things which we want to use or like. Options are a good thing.

Not sure who this article was aimed at. Paul kind of broke the first rule of writing a good article. Who’s your audience here Paul?

Paul says: ‘I have identified three secrets that seem to make things go a lot smoother:
Focus on user tasks and not features,
Don’t try to solve everything and
Ask the right questions early on.’

Paul, there is nothing really ‘yours’ about these ‘secrets’ you have ‘identified’. Also, these three generic statements don’t necessarily help with anything as they are too … generic.

Asking oneself the right questions requires quite a lot of insight, wisdom, experience and attention from the designers. Most designers don’t have those as they are usually not close enough to the business.

Paul says: ‘Focus On User Tasks, Not Features’

Focus on users’ tasks is kind of what most people do anyway, but many web apps have arguably become really big because of their … features.

Often a time I have come across teams of business users saying things like: ‘We would have opted to procure App A, but App B was the only one that had the crucial feature we needed, hence we went bought it.’

Many times real business web apps have many user tasks which need completing on the regular basis.

Think of GMail, Google Calendar, Basecamp, Facebook, Amazon, etc. They are fully featured and comprehensive tools. Even Twitter, seamingly simple one has a lot of complex, subtle whiz-bang which makes it work the way it does.

Many of the ‘simple’ features require very heavy and clever back end processing to work properly, so they can be simple from the UI perspective, but complex to implement (which means time, money and know-how required).

This is why Facebook, Google and Twitter all took 4-5 years to development to gain global visibility.

Paul says: ‘Take a step back’

I have found that observing the way users carry out tasks currently can often lead to some skewed results.

Users within businesses are often required to ‘hack around’ an existing process and work around existing apps which are badly designed.

Observing them leads to engineering bad practices into the new web app solution. Also it tends not to be innovative.

When Google released GMail, it completely confused me at first, but a week later I was loving it and today swear by it. It’s completely the opposite of what ‘observing the users’ would achieve.

GMail, however, is very much hated by some people who are die-hard Outlook users, hence GMail rolled in some Outlook like views too, adding additional features to keep everyone happy.

Sometimes we are required to design brand new things for business too, so there is no existing process to observe in the first place.

Speaking to people who are interacting with the application on daily basis is usually impossible due to time and availability constraints in most businesses I have worked at.

Paul says: ‘Make user testing part of the development process’

Sure thing.

How would you do this in an environment where there are 12M users for your web app?

Users are also scattered all around the country and the world often, making wide enough insights virtually impossible.

Paul says: ‘Don’t Try To Solve Everything’

Even the most useless businesses prioritise and have project managers which usually (in my experience) try and narrow down the scope of an app, as opposed to doing the opposite.

Furthermore, in my experience, businesses are limited by their technological capability to do many things, hence I find myself battling to get features in as opposed to take them out of scope.

Therefore, in my experience, this is almost a completely obsolete statement.

Paul says: ‘Sometimes Technology Is Not the Answer’

Fair enough. There are many management issues in many UK companies. I studied management at a Master’s degree and understand that most managers in UK are self-taught people who try and get by from day to day.

However, there are very good reasons why (larger) corporations require workflow features for example.

They are exactly the ‘business problem’ which Paul opened the article with.

And they are pretty hard to solve because of all of the reasons I outlined already.

Paul says: ‘Make It Expandable’

Here Paul recognises that things are complex – good!

However, I would not be so sure that a ‘plug-in’ architecture is exactly the solution to the problem.

Having worked on WordPress installs with around 20-25 plug-ins installed on them (for a relatively small business) I have realised the short comings of such web app internal architecture.

God forbid having to do this with a much larger business.

The solution which we had devised for entire Tesco.com architecture had nothing to do with plug-in architecture, but all to do with good old object orientation.

Paul says (in ‘Ask the right questions early on’): ‘Make sure you have all the facts before beginning.’

Hah! This is a straight case of classic double think.

How can you have all the facts to start with and have a need to ask additional questions?

This is exactly one of the big problems with software engineering and design.

Often a time even the most experienced professionals do not know the exact answers to almost any of the questions asked.

This is why research, analysis and investigation is required and why people get paid so much money to know how to do this properly.

Knowing which questions to ask is half of the game and the winning solution.

Which questions was Apple asking when designing iPad?

Many times the answer to the question of ‘Will this application get internal approval?’ depends on things like: budget, top level stakeholder, company’s current share price, internal politics or competition and may not be anything to do with application design at all.

Points 1-4 Paul makes in the ‘Ask the Right Questions Early On’ are arguably the most superficial and least worrying issues to deal with in a typical web app.

They can have impact on the cost and choice of staff going forward and are important from that point of view, but don’t usually complicate matters too much.

Exception may be the authentication topic, which is currently causing even the mighty Google a whole load of problems in making it universal. But what Google are looking to do is to unify dozens of web apps built by different teams under one universal login, which they are hoping can be a universal login for the entire planet. A completely different scope of the problem to deal with!

Paul says: ‘Learn From Your Mistakes’

Oh thanks! That’s a new one there Paul. Even birds on trees sing this old song in many aspects of life (e.g. think about the UK Government currently talking about learning lessons from police not protecting the UK people for example).

Your mistake here was that you should have never published this article as it makes you look average, just like you should have never attempted to create a web app  like GetSignoff.com as it failed for the same reasons you outline in your article.

The issue is that sometimes there are no 2nd chance to correct your mistakes, so there might be little point in learning from them.

What now? Do I write an article about it?! ;-)

8 reasons not to build your own CMS

Thursday, February 18th, 2010

As you work within software engineering environment, you will realise that a single software solution solving all business problems simply does not exist.

A typical Content Management System (CMS) tries to do exactly that and that’s why every single CMS sooner or later fails to deliver.

Here are some practical reasons why you should not attempt to develop your own CMS.

It won’t meet users’ needs

Chances are that the CMS you build will not work for the businesses you target, as you are unlikely to have a wide enough view upon the industry’s needs, unless you are very experienced.

Because of this reason you will find yourself all the time having to extend your solution to accommodate the needs of the new clients you find.

This defeats the purpose of owning an off-the-shelf solution which would automatically work for your next client and simply require an appropriate theme to make it look and feel right.

It’s too much work

The idea of having a pre-built CMS arose from the notion that it’s less work to be customising an existing solution, rather than building from scratch every time a customer needs a CMS.

In reality however, to build even a semi-appropriate CMS requires:

  • a substantial development effort
  • much thinking from User Experience point of view
  • significant amount of testing
  • catering for many different types of user flows and scenarios
  • dealing with all types of content publishing online
  • considerations about deployment and support
  • security concerns

It won’t be a standard solution

On top of the above difficulties, you are also going to come across various complications on how to make any working solution you come up with conform to various standards and guidelines such as the ones from W3C.

This is likely to be a fairly complicated matter to achieve and will require in-depth knowledge of all those standards.

Furthermore, your solution ought to be future proof in this respect and easy to change so that it can be made to be conforming with future emerging standards, such as HTML5.

It won’t be extendible fast enough

If you are building your own solution, it is unlikely to be easy to extend fast enough to satisfying your client’s requirements, even if it is using a plug-in architecture.

The reasons for this will be because you are unlikely to have enough resources available to develop, deploy, test and make components reusable for future needs.

You are also likely to be working on specific scenarios, rather than addressing a more generic problem, so your extensions are likely not to be easily reusable from client to client.

It won’t be tested well enough

A CMS which has been in use for 5 years is likely to have gone through very rigorous user scrutinisation and feedback by now.

Your new CMS will be fresh of  the boil, featuring many bugs which are hard to test, unearth, replicate and fix.

All these bugs will need to be fixed if your product is to see long term success.

This means more time spent on:

  • developing
  • regression testing
  • re-deploying
  • issuing out bug fixes and updates
  • dealing with feedback and bug reports
  • having unhappy customers who are slowly losing faith in your product

Do you really need to be spending time on this, or is your time better invested working with a well tested solution which you might be extending for a particular purpose?

It won’t be easily changeable

This is the main point that made me want to write this article, as I want to change my own CMS, but now have to come up with my own future proofing solution for it.

The main reason is the fact that some of the well ranked URLs on my site might have to change under the new solution.

This is a really bad idea from SEO point of view as the site is likely to lose out on some interesting Google ranking.

The only solution is to spend more time writing .htaccess rules to ensure that the old URLs are redirecting to new URLs in the most appropriate manner and making sure that Google does not see the two URLs as duplicated content.

It won’t add any value

Probably one of the most important points to make is that the work you might want to do on building your own CMS is likely to be a simple replication of already well developed functionality, existing for free out there on the web, and meeting all the above requirements.

So the main question to ask yourself is: ‘Why am I really trying to re-solve a problem that has already been solved before?’

If you can really find a good enough reason for this and think that you have the resources to do it better, then go-ahead and develop your own CMS.

Chances are that the invested effort will not produce anything significantly better than an already existing solution on the market.

Create content, not functionality

For most part you are better off using your valuable time creating valuable content, rather than invaluable functionality.

Using an existing platform, which is altered to suit a particular need is a much easier and saner approach than building something from scratch.

If you can populate an existing CMS with good content, it will be much better than building a new CMS with poor content inside it, as the time is likely to be dedicated to building the functionality, rather than writing the content.

Conclusion

If you are thinking of embarking on the road of custom building a software of any kind, you are best off thinking of a fairly simple, specific solution for a particular problem.

Building a functional CMS is actually one of the most complicated tasks in the arena of online tools, and by no means a good place to start from.

You are also going to be in direct competition with million and one other CMS solutions, including many excellent ones such as Word Press, all the time.

The real question is: ‘Is it worth it and how does your solution differ from already existing, well-tested and fully functioning CMSs on the market?’

Semantic uses of <img> HTML tag

Saturday, November 28th, 2009

What is it for?

According to W3C:

“The IMG element embeds an image in the current document at the location of the element’s definition.”

It is pretty clear therefore that we can use <img> tag in order to put images into our web pages.

This tag at one point revolutionised the web, as it brought images to it.

As time has moved on images and video dominate the web and the above simple guideline from W3C is nowhere near enough to tell us how we should be using this tag.

Appropriate uses

For content, not design

<img> tag should be used only for images which are directly related to the content of the given web page.

Any design related imagery, such as background tiling or component wrappers should be coded as part of an external CSS file and included via background CSS property.

Image source locations

Images are files which reside on server of some sort in order to be accessible by the end user.

In recent years it has become commonplace to use CDNs such as Flickr to serve all images within web pages.

There are known advantages and disadvantages to this approach.

The main advantage is that serving images can be much faster, as the CDN will have servers in particular country where the end user is based, hence serving of images will be faster for each user.

The main disadvantage is that images are outside the domain within which the given web site resides, making developers have to rely on the CDN to be up and running for the images to work within web pages.

Another disadvantage is that businesses are often concerned with giving their content away to third parties.

Main concern is that if the given CDN increases price of hosting, it may become more expensive to host images externally than internally.

There is also a big element of faith in hoping that the given CDN will be up and running forever (i.e. what happens if Yahoo goes bust and Flickr stops existing as a service?).

Content manageability

On large scale web sites which use teams of content editors, it is very important to consider those people within the work flow of a web site maintenance and updating processes.

Content editors usually have familiarity with HTML code, but not CSS, hence coding images as HTML backgrounds can sometimes create maintenance problem for non-technical staff.

Sometimes it is better to use <img> tag instead of CSS background in order to give content editors greater control over the content on the web site.

However these should be considered on individual bases through constructive communication and business interests should be taken into account (this usually means making sacrifices towards maintainability by non technical staff over semantics of the page).

Inappropriate uses

For layout

It was common in the past to use various ‘spacer’ images in order to control layout of web pages.

These spacers usually came in the form of a 1×1 pixel GIF image, which was stretched by developers using width and height attributes within the <img> tag.

This practice should be avoided by all means, as it unnecessarily bloats up the web page and creates very hard to maintain pages.

This practice is also bad because it misuses <img> tag for layout purposes rather than to bring good quality content into a web page.

Not using alt attribute

Images have accessibility issues associated with them – blind people and search indexers cannot see them.

This is the reason why there is an alt attribute present within <img> tag.

Sometimes however, in rush or through simple negligence, developers do not use alt attribute appropriate or at all.

alt attribute should always be used and should describe the image in the best way possible.

You should not be using an empty alt attribute simply to satisfy W3C code validator and make your code validate against the guidelines.

Using appropriate alt text is also important from Search Engine Optimisation perspective, as it is usually very relevant to have your web site images show up high in various search engine search results pages.

Aspects of great web sites

Friday, July 10th, 2009

Web developers and web product designers should continuously be considering all of the following aspects of web sites and web applications at every stage of their work if they are aiming to produce high quality web presences.

Semantic

Be as meaningful as possible, utilising and leveraging all relevant aspects of semantic web as outlined in this resource and many others.

Standards compliant

Comply with the relevant W3C standards in order to meet the internationally recognised best coding practices, which work well across many different browsers.

Accessibility

Your solution will need to work on devices with minimal technological support, including screen readers and mobile devices.

If your main solution does not work with these devices, you should provide alternative solutions which do.

Aesthetic

Good looking and easy to use from the aesthetic point of view.

Well designed and well laid out for optimal visual impact and influence.

Functional

The solution should fulfill a particular purpose or functional for which it has been created.

There is nothing worse in the world than an unnecessary web site or something that duplicates already existing provision.

User centric

Every solution should be built based on well identified user needs and requirements.

Since users are those who ultimately use the web, their needs and wants need to be addressed with the solution.

Take all aspects of User Centered Design into account when trying to achieve this aspect.

Relevant to business

Businesses have their own, often opposing, processes compared to users’ needs.

These need to be addressed as well as users’ requirements, since without them, business processes will not be fulfilled and catered for properly.

Getting the right balance between user experience and business needs is often one of the sticking points when developing any web presence.

Maintainable

If the created solution is not maintainable, it will not be able to keep up with the inevitable on-going changes which happen in the world of Internet all the time.

MySpace.com is a great example of how a non-maintainable solution, which initially was a relative success, turned into the ultimate unmaintainable mess, which is now heading towards a total failure.

Maintenance is the aspect of Internet solutions which also tends to waste the highest amount of resources and this is the case with maintenance of any product of any type.

Inter-compatible

Increasingly it is becoming a common requirement that any web site or web application needs to work seamlessly in context of another web site or application.

This can on some level be achieved through use of RSS feeds, but on some deeper levels it can be achieved through APIs and to greater or lesser extent with proper, semantic code.

Future proof

A solution which only works for the given time it is written in is no good.

Good Internet resources ought to reside on-line forever and be easily accessible and usable non-stop.

If a solution needs a major re-work every time an upgrade is required, it is not considered to be future proof.

In front end coding terms, proper standards compliant, semantic user interfaces usually ensure that  the end solution will be future proof.

Usability

A solution can be accessible, but not necessarily usable.

In terms of usability, a solution can be barely usable or highly usable.

One needs to ensure that a web site or a web application can be used with a mouse, on a mobile device, using a keyboard only, when the interface size is increased by the user and so on.

Search Engine Optimised

Once again, following best practices for user interface development, should ensure high level of Search Engine Optimisation (SEO).

However, SEO is an aspect which ought to be addressed as a stand-alone issue too, as it is somewhat a subject to high levels of competition in many industries, so semantic coding will usually not be enough to achieve high SEO impact.

One of the subtle aspects of SEO which are related to this resource is the matter of URL structures, which can somewhat make or break an SEO strategy.

Relevant and useful content

Writing for web is somewhat of an art form.

Users do not read on-line.

They skim the text and randomly read in and out at certain points on the page.

Having a good quality content on each page can be a make or break of any web site or a web application.

Why are most web sites so bad?

Monday, July 6th, 2009

Overview

In the past you might have heard something like this being uttered: ‘Web is a very young industry compared to many others, so it’s only natural to expect many things not to work very well or at all!’

There is much sense in this statement, but many aspects of it are incredibly flawed too!

Software Engineering as a practice has been around for a relatively long period of time (at least 20 years) and many books have been written on the subject matter.

I studied software engineering formally some 10 years ago and have learned common sense matters such as that software should be developed according to user needs from a very early point.

You will often get an impression that ‘User Centered Design’ is somehow a ‘new approach’, which has not yet been well formulated and much research has not been done to formalise it.

This cannot be further from truth.

I will now try and explain some of the reasons why I think so many web sites are so bad and regularly fail to work properly.

How most industries work

Think about the medical profession.

A typical doctor will spend approximately 7 years in formal University education in order to qualify as a doctor.

Before then, in order to even start studying medicine, students will need to prove that they are smart enough and capable enough to study the subject by achieving high level grades in their previous education.

The University Degree will teach medical students various theoretical aspects of medicine, biology, chemistry and much time will be spent doing practical, lab-based work while everything is likely to be discussed to Nth degree.

After 7 years of intense formal studying and evaluation, medical students will be placed in a hospital where they will work-shadow a various senior staff in order to understand the context of working in a hospital as well as see real life medical issues being dealt with.

Similar is the case if you would like to become a Gas Certified Engineer.

You will spend at least 4 years studying in order to obtain your formal qualification so that you can tell someone whether their Gas Central Heating system is at the right pressure level.

Important aspects of the above two examples are that Gas Certification Standards and Medical Books are developed and written by a high-level authorities which are setting those standards.

How IT industry works

Unlike with the above two example professions, in IT related industries for most part there are no official qualifications required from someone so that they can work as a developer.

In fact, many people will potentially frown upon those who come from Computer Science or other technical backgrounds.

Developers are asked to ‘prove themselves’ by showing a portfolio or a list of links to sites which they worked on, often to be judged whether their work is good or bad based only on the looks of those web sites.

Many times those interviewing IT people do not know much about IT themselves.

Many contributors to IT industry are totally non-technical and never want to be technical at all.

In some cases people working in IT industry quite openly hate IT itself too, while I find it difficult to imagine a brain surgeon hating the concept of operating.

The problem of people and process

Software Engineering is an incredibly complex undertaking.

Building a blogging system (which is a relatively simple matter) can be done in a very inappropriate manner, but it can also be done in such a way as to serve many other purposes.

Every software, however simple or complex, is subject to this fact.

Building software is somewhat of a conveyor belt task, just like cars are put together in a factory.

In order for software to be built well, it requires each person in the building process to follow the process, as well as know what their tasks and responsibilities are.

In most cases, software development is never approached in this way, and this is one of the main reasons why most IT projects fail miserably.

Those who don’t know cannot setup a process

We are back to the initial issue – if someone is not trained and clued up on what they are doing, they cannot organise their work properly in order to do it properly on an ongoing basis.

It takes time, effort and experience to understand what makes a good process and a proper approach to software development.

This is also heavily related to the type of software a team is building.

Another important matter to consider is that untrained people are often unable to improve the processes they are working on, constantly being locked down in a vicious circle of struggling to make a bad approach work.

Even if they manage to deliver something using a bad approach/process, usually the delivered product does not meet even the basic quality standards.

In fact bad approach/process usually generates software which does not meet the actual business requirements and those who worked on the product are often forced to explain why something ‘could not be done’ for whatever reason.

This ‘cannot be done’ attitude eventually precipitates into the organisational culture and becomes defacto standard way of (not) building sofware.

A moving target

One more major reason why most web sites are so bad is that the IT industry is a constantly moving and evolving target.

By the time a web site has been published on-line, in most cases it is already somewhat out of date, needing improvements, maintenance and taking care of.

This is the case with every software.

In order for web sites to be kept ‘fresh’ people building them are required to keep their skills and knowledge fresh.

This requires passion and dedication, which most people do not have (enough of), producing average, slightly out of date products all of the time.

Semantic uses of <label> HTML tag

Monday, June 15th, 2009

What is it for?

W3C states quite clearly that:
The <label> element may be used to attach information to controls. Each <label> element is associated with exactly one form control.

The for attribute associates a label with another control explicitly: the value of the for attribute must be the same as the value of the id attribute of the associated control element. More than one <label> may be associated with the same control by creating multiple references via the for attribute.

Few interesting points from the above quote for developers to understand are:

  • <label> may be used which implies that strictly speaking it is not needed, although I will strongly argue that not using <label> with form elements would be very bad practice
  • One <label> can only label one form control, so it is impossible to use one <label> to label many form controls
  • Developers can use more than one <label> in order to label any given form control, which is potentially a very powerful construct

Appropriate uses

Generally speaking the most common scenario when using <label> element is the following type of association:

<label for="username">Username or email</label>
<input type="text" name="username" id="username" />

Each form field should have a label associated with it in order to achieve proper accessibility and usability.

Inappropriate use

Not using labels with form fields

From Google

<div class="section_error">
<input type="checkbox" onclick="GWO_updateContinueButton(this)" value="yes" name="ubac_accept"/>
<strong>Yes,</strong> I accept the above Terms and Conditions.
</div>

In the above code snippet Google exemplifies some of the worst practices in User Interface development.

Apart from using non-semantic class name of ‘section_error’ for a non-error content snippet, they are writing in-line JavaScript, which is harder to maintain and does not achieve separation of concerns.

Most importantly Google are not using any labels for the check box, hence they are damaging accessibility and usability of the code snippet as there is no explicit label associated with the check box to denote what the check box is for.

Considering that this code snippet finds itself in context of a very simple documentation page, there are no excuses why Google’s engineers should ever produce this bad quality of User Interface code.

A re-worked, appropriate, semantic solution for this code snippet would read something along these lines:

<div id="termsAndConditions">
<input type="checkbox" value="y" name="termsOptIn" id="termsOptIn" />
<label for="termsOptIn"><strong>Yes,</strong> I accept the above Terms and Conditions.</label>
</div>

If really required, JavaScript functionality associated with this snippet should be situated in an external JavaScript file which associates the functionality by hooking onto to the termsAndConditions ID attribute.