Why is 37 signals so arrogant?

If your going to say things like:

“Arrogant is usually something you hurl at somebody as an insult … But when I actually looked it up — having an aggravated sense of one’s own importance or abilities’ — I thought, sure … Call it arrogance or idealism, but they would rather fail than adapt. I’m not designing software for other people, I’m designing it for me.”

- David Heinemeier Hansson, 37 Signals

… then your probably going to get upset people … like Don Norman, who lambastes 37 Signals in his latest blog post.

I have used some of 37 Signal’s products and I have to agree with Norman when he says that:

I’ve tried their products and although they have admirable qualities, they have never quite met my needs: Close is not good enough.

I’ve always struggled with BaseCamp for example, it almost there but just not quite … I always put my frustrations down to the fact the tool was designed to be simple, but after reading some of Hansson’ statements I begin to see things slightly differently.

When your designing products for a large user base you can’t ignore the users. I find myself agreeing with Norman’s final observation:

Understanding the true needs of customers is essential for business success. Making sure the product is elegant, functional and understandable is also essential. The disdain for customers shown by Hansson of 37signals is an arrogance bound to fail. As long as 37signals is a hobby, where programmers code for themselves, it may very well succeed as a small enterprise with its current size of 10 employees. I’m happy for them, and for the numerous small developers and small companies that find their products useful. But their attitude is a symbol: a symbol of eventual failure. Too bad. In fact, that attitude is not so much arrogance as it is selfishness: they are selfish. A little less arrogance and a lot more empathy would turn these brilliant programmers into a brilliant company, a brilliant success.

The Coming Age of Magic

A really interesting and enlightening podcast with Mike Kuniavsky, co-founder and Principal of ThingM:

“I do not advocate that we pretend that technology is a kind of magic, but that we use our existing cultural understanding of magic objects as an abstraction to describe the behavior of ubiquitous computing devices.”

YouTube adds Visual Browser


Click to enlarge

YouTube have added a cool visual browser that allows you to find videos that are related to the one you are watching. In order to access the feature view a video, then go full screen. You’ll notice a new icon next to the play button ( represented by three dots) if you click on this and the Visual Browser appears. It shows you videos related the current node in the center. If you click on any related video more nodes appear representing further related videos. As an exploratory interface it’s really simple and intuitive to use and uses a similar metaphor to an interface I’ve been working on at Talis for exploring data that is structured semantically.

For a while now I’ve believed that discovery is more important than search, if you think about it traditional searches that ask users to enter keywords don’t use context which is why they are so hit and miss – relevance rankings are based on external influences and nothing to do with you as an individual what’s worse is it’s never clear to the user why the results that do appear are there – we have to accept the relevance or ranking system because we are never told why.

A discovery tool like the Visual Browser pictured above helps us to see how things are related and in doing so provides us with context – it also gives us a sense of control because we choose how we explore and find things of interest … that’s empowerment.

Lecturing – Usability and Web2.0

Alan Dix I had a lot of fun yesterday, my good friend Alan invited me to come up to Lancaster to do a special guest lecture on Usability and Web2.0 – I was asked to talk about the demands Web2.0 put on real world development, and the usability issues we now face. The lecture was intended mainly for his undergraduates but he invited the MSc, MRes and PHD students to attend as well.

I must confess I was very nervous it’s been a long time since I’ve had to stand up and talk for ninety minutes – I had also spent much of the weekend trying to prepare my slides and work out how to I was going to talk, intelligently, on a subject area that encompasses so much. I have to thank Richard Wallis and Rob Styles, two of my friends at Talis who both provided me with some great advice last week when I approached them and said “arrghhhh I’m panicking!I know what I want to say I’m not sure how to structure it“, fortunately they both gave me some great advice so I spent the weekend trying to organise my thoughts.

In the end it was fine, I really enjoyed the session and Alan did his best not to embarrass me ( too much ;-) ). I started by talking a little bit about the Web1.0 and the sorts of usability mistakes  that were common back then ( and perhaps still are now ), I went on to talk about the differences between Web1.0 and Web2.0. I then focused on Web2.0 and the kinds of usability problems that we are having to consider and find solutions to at the moment and tried to cover broad range – technology, accessibility, identity, authority, privacy etc. I also talked about Search as a usability problem, and how we still can’t find what were looking for, I explained why this leads me to believe that Google is broken. This flowed nicely into the final part of my talk which focused on the semantic web and some of the work we’re doing at Talis.

The slides for my presentation are now available online here.

Microsoft launches Tafiti

If you haven’t tried it yet check out Microsoft’s experimental new search front end Tafiti – http://www.tafiti.com.

It’s based on Microsoft’s new SilverLight technology, their competitor to Flash. It uses a cool desktop metaphor where you can spin through different kinds of results, drag and drop them into piles which you can label and share with your friends.

Although it might seem gimmicky and not particularly useful at first glance, it is actually quite innovative and and a lot of fun to use. It’s a great showcase for SilverLight but it’s interesting to contrast how Apple are doing a lot of work in bringing metaphors such as stacks to the desktop UI, and Microsoft seem to be focussing on Search and the Web.

Try it out for yourselves! I think it’s awesome.

Ambient Findability – Peter Morville

Ok it’s definitely that time of the week when I catch up on blogs. I have a feed that shows me all the latest Google Tech Talks some of which I ignore but some are genuinely interesting – such as this one entitled Ambient Findability and the Future of Search:

It’s easy to be dismissive due to the sheer pretentiousness of the title until you realise who’s giving the talk. Peter Morville is co-author of …

Many people consider Peter to be the founding father of Information Architecture, and certainly the above text was and still is considered to be a seminal piece.

In this talk Peter discussed what he refers to as Ambient Findability the subject of his new book:

Morville talks about the Internet, GIS, and other network technologies that are converging to make unlimited findability possible. He discusses how the convergence of these innovations impacts society, since Web access is now a standard requirement for successful people and businesses. His central belief seems to be that information literacy, information architecture, and usability are all critical components of what he see’s is the future of search.

It’s a fascinating talk that anyone in the new Web 2.0/Web 3.0 bandwagons should take a moment to listen to. I’m still left grinning at one of the observations he makes right at the beginning:

A few years ago I started to get really sick of the word usability. It’s a good word and folks like Jakob Nielsen did a good job of blasting that word into everybody’s heads. And when I talk with executives about their goals for the redesign of their websites, without fail when I say what’s your goal? they say “we want it to be more usable” so I’ll say great what does that mean?. The problem is that the word usability has sort of grown and grown until it’s almost synonymous with quality.

If you don’t understand why that’s a bad thing, then you really need to listen to this talk.

Equally if your a librarian or a Library System vendor then you need to listen to this talk, many of his examples are from this domain and they are fascinating.

PhotoSynth at TED

PhotoSynth is a Microsoft technology that I have talked about before, it’s certainly one of the most impressive visual technologies I have seen.  Here’s a video of Blaise Aguera y Arcas at TED this March presenting PhotoShop to the conference attendees and getting a standing ovation … quite deservedly in my opinion. The video is also a great introduction to the technology and what its capable of doing.

I agree with Blaise when he says Simply put, it could utterly transform the way we experience digital images.

JavaScript can provide a richer user experience without compromising Accessibility.

When Rob and I originally put Cenote together one of the constraints we had to work within was that the application must work without relying on JavaScript. This is primarily because relying heavily on JavaScript can introduce some accessibility issues, these issues include:

  • Making Navigation difficult: Site’s that rely on JavaScript can make it very difficult to navigate around a site using a keyboard or other assistive technologies, and impossible if JavaScript is disabled in the browser.
  • Hides Content: Sites that rely heavily on JavaScript can present content and functionality to the user that is not accessible to assistive technologies, such as Text Readers.
  • Removes User Control: User’s have no control over automated content changes. For user’s have no accessibility needs this isn’t a problem, but for users who rely on assisstive technology there is no way of knowing that content has changed. This can prove to be very confusing/disorienting since this can also involve altering normal browser functionality and triggering events that the user is not aware of.

This doesn’t necessarily mean that pages that contain JavaScript cannot be fully accessible, such pages can be accessible if the functionality is device independent ( in other words it does not require only a mouse or only a keyboard to work ) and the content is always available to assistive technologies.

So based on this knowledge Rob and I made the conscious decision that what we would do was develop Cenote first without using any JavaScript at all. This would ensure that the content rendered on the pages was always available to assistive technologies. We agreed that we could then use JavaScript to enhance the user experience by using JavaScript to manipulate the DOM of the page in the browser.

To see this in action visit this page in Cenote, if you scroll to the bottom of the page you’ll notice a list of libraries that you navigate through using a paging control (pictured). You’ll also notice that the book jacket in the top left hand corner of the page that has a nice reflection effect. Both these effects are made possible through JavaScript, and provide a slightly richer user experience. To see what I mean try turning off JavaScript in your browser1, and hit refresh. The page now displays the book jacket without the reflection and the complete list of libraries without the paging control.

So how is all this achieved? Well lets take a closer look at how the paging control. The snippet of html below shows a simplified2 version of markup that actually represents the items in the list3, take particulare note of the empty div after the unordered list this is the placeholder we inject the paging control into:

  1.  
  2. <ul id="Libraries">
  3.   <li><a class="item-library" href="#">Aberdeenshire Libraries</a></li>
  4.   <li><a class="item-library" href="#">Barnsley MD Library</a></li>
  5.   <li><a class="item-library" href="#">Blackburn</a></li>
  6. </ul>
  7. <div id="pagingcontrol"></div>
  8.  

Now when you view the page without JavaScript enabled the browser renders this markup exactly as it is. Accessibility or Assitive technology only use the HTML markup on the page. In the case of Text Readers this HTML is parsed and the software reads the content on the page back to the user. Now when JavaScript is enabled the markup on the page does not change, it stays exactly the same. We use JavaScript to manipulate the browsers DOM which is the model the browser generates internally to represent the page. Now in the example above the Unordered List is identified using the id “Libraries” which makes it easy to find in the DOM as this snippet of code illustrates:

  1.  
  2. var libraries = new Array();
  3. var ul = document.getElementById(‘Libraries’);
  4. var holdings = ul.getElementsByTagName(‘LI’);
  5. for( var x=0; x<holdings.length; x++ )
  6. {
  7.     libraries[x] = holdings[x].innerHTML;
  8. }
  9.  

Here we use its identifier to find the unordered list we want to augment with our paging control. Each list element in the unordered list is what we refer to as a holding, we simply extract the contents of each of those nodes and temporarily store them in an array called libraries. In the case of the page I pointed you to earlier this array would contain 50 items.

Once we have found and copied the original complete list of libraries we can now proceed with updating the DOM to display to the user only the first 10 libraries, and render a paging navigation control. The function below updates the DOM by removing the original contents of the Libraries node, and replaces it with 10 items indexed from the specified startPosition.

  1.  
  2. function renderLibraryLinks( startPosition )
  3. {
  4.     if (libraries.length > 0)
  5.     {
  6.         currentStartPosition = startPosition;
  7.     d = document.getElementById("Libraries");
  8.         d.innerHTML = ;
  9.         d.innerHTML += ‘<UL>’;
  10.         for ( var x = startPosition; x < (startPosition + 10); x ++ )
  11.         {                    
  12.             if( x < libraries.length)
  13.             {
  14.                 d.innerHTML += ‘<LI>’ + libraries[x] + ‘</LI>’;
  15.             }
  16.             else
  17.             {
  18.                 d.innerHTML +=‘<LI> </LI>’;
  19.             }
  20.         }
  21.         d.innerHTML += ‘</UL>’;
  22.         renderNavigationControls();
  23.     }
  24. }
  25.  

The final line in the function above calls a method to render the navigation controls which I’ve copied below. You’ll notice that we find the placeholder identified by “pagingcontrol”, and render the preview, next and individual page links ( renderPageNumbers() ) into it.

  1.  
  2. function renderNavigationControls()
  3. {
  4.     if( libraries.length > pageSize )
  5.     {
  6.         lpc = document.getElementById(‘pagingcontrol’);
  7.         lpc.innerHTML = ;
  8.    
  9.         if ( currentStartPosition > pageSize-1 )
  10.         {                                              
  11.             lpc.innerHTML += ‘<a href=\”javascript:printPreviousPage();\” alt=\”Previous Page\” title=\”Previous Page\”>< previous</a>’;
  12.         }
  13.         else
  14.         {
  15.             lpc.innerHTML += ‘< previous’;
  16.         }                  
  17.        
  18.         lpc.innerHTML += ‘  ‘ + renderPageNumbers() + ‘  ‘;
  19.        
  20.         if( currentStartPosition < libraries.length – pageSize )
  21.         {
  22.             lpc.innerHTML += ‘<a href=\”javascript:printNextPage();\” alt=\”Next Page\” title=\”Next Page\”>next ></a>’;
  23.         }
  24.         else
  25.         {
  26.             lpc.innerHTML += ‘next >’;
  27.         }
  28.     }
  29. }
  30.  

To reiterate, because this technique manipulates the DOM, the original markup isnt changed at all. Project Cenote was recently open sourced you can download the entire source base, which includes the javascript file, pagingcontrol.js, from which I took the extracts above, and get a feeling for how it works and experiment with it.

Now the above example might not seem all that impressive, its just a little paging control, right? Well, its a simple example that illustrates the technique which can be very powerful. Consider the following images which show a Calendar that view that was created by one of my colleagues, Andrew, which uses an unordered list to represent a series of events, and that’s what you see when JavaScript is disabled:



However with JavaScript enabled the DOM of the page is rewritten and combined with some CSS it looks like this:

Now thats more impressive, right? I hope this serves to illustrate how you can use JavaScript to provide richer user experiences without compromising accessibility. It’s an area I’ve been thinking about a lot recently and there are wider issues around how to develop better JavaScript libraries that understand how to expose dynamic content that needs to be accessible and whether this needs to be considered a best practise that more developers need to adopt. These issues beginning to have wider implications as my friend Alan put it earlier this week:

it will address issues of how traditianal HCi changes in the face of web2.0: when people are doing mash-ups (so there are more ‘artisan’ interface constructors), or end users configuring their own spaces (as in MySpace), or how you build ‘good practice’ into javascript libraries like prototoype or yahoo! YUI

.. when he contacted Justin and me earlier this week and invited us along with others from Talis to attend this years 2007 – British HCi Conference taking place at Lancaster University. Recognising how we to develop best practises for the development of truly accessible Javascript libraries is one of the issues I’ll be raising to the panel when I attend the conference.

  1. In Firefox you can achieve this by going to Tools -> Options -> Content and uncheck the box labelled JavaScript. However if you don’t already use it I recommend installing the Web Developer extensions for Firefox [back]
  2. I’ve removed the url and the title attribute and the icon image from each link to simplify the example [back]
  3. I’m using Dean’s Syntax Highlighter but specifying html means that the Snap Shots tries to execute against it, so I’ve specified XML instead [back]

Google New Experimental Search Features

http://www.google.com/experimental/

Google have come up with a set of experimental new search features aimed at improving the search experience. I’ve been playing with them and have to admit they are really cool!

The first is the ability to view search results on a timeline or on a map. Google do this by extracting dates and locations from the search results so that the information can be viewed in a different way.

For example a search for Olympics, and specifying a map view plots the locations the event has been held in on a map. Whilst searching for information on the civil rights movement, and specifying a timeline view will highlight key dates and events on a timeline.

The next new feature, is the enabling of keyboard shortcuts to navigate around search results. After initially using this, I can’t stop! A small arrow is rendered next to a search result, pressing the ‘J’ key moves to the next results, whilst pressing ‘K’ moves to the previous. You can open a search result by pressing ‘O’ or just hitting enter. You can also press ‘/’ to have the cursor jumpt to the search box, whilst ‘ESC’ moves the cursor out of the search box. Try it for yourselves here, it’s really easy to use and if your like and means you dont need to use a mouse at all to navigate around search results.

Another new feature is the addition of facets to search results, ( which Google oddly refer to as left hand navigation? ). Basically the left hand pane lists a set of groupings, for example content type, patents, products, news etc. The left hand pane also list’s a set of related searches. Together both these bits of information allow you to narrow your search, in order to find whatever it is your looking for, hopefully, quicker. This feature is also available on the right hand side of the screen.

It’s encouraging to see that Google are trying very hard to improve search, not only by providing mechanisms that should enable ordinary users to get to the content they are interested in faster, but they are also thinking about how to improve the experience. The keyboard shortcuts, whilst on the face of it might look simple, actually increases your productivity because you don’t need to interact with a mouse at all.

I’m impressed.

100 Web Apps for everything you’ll ever need?

Came across this earlier, its a list of the 100 web apps for everything you will ever need. When I consider some of the recent things I’ve written about this idea that applications are moving away from the desktop and delivered primarily over the web, then this list serves to illustrate how wide ranging web based applications are becoming.

The list organises the applications into a set of categories

  • Organisational
  • Calendars and to-do Lists
  • Your Money
  • Project Management & Productivity
  • Storage
  • Writing and Design Tools
  • Security and Privacy
  • Mobility and Contact
  • Meeting and Networking
  • Business and Legal
  • Client Contact and Feedback
  • Website tools
  • Printing and Packaging
  • Tools to give and take
  • Miscellaneous

In addition to the examples on this list there’s other pretty useful applications out there. I’ve been playing around with SnipShot, which allows you to upload images and edit, adjust them online. It doesn’t provide the full functionality of PhotoShop, but it is very simple to use and integrates with Flickr making it far more valuable as a tool than if it worked in isolation.

That’s the real strength of Web based applications? The ever increasing ease with which they can be integrated and used together?