Jakob Nielsen on mobile web usability

Using websites on a mobile phones is “a cringeworthy experience” according to recent user tests performed by Jakob Nielsens company. His advice:

Although devices will get better, the big advances must come from websites. Sites (including intranets) must develop specialized designs that optimize the mobile user experience. Today, few sites have mobile versions, and those that do are usually very poorly designed, without knowledge of the special guidelines for mobile usability.

Great article, a must-read for those working on mobile(-friendly) websites!

Are you doing Web2.0 the wrong way?

gapingvoid cartoonAccording to Jakob Nielsen, jumping on the web2.0-bandwagon often implies adding unneeded complexity instead of getting the basics right. I tend to agree; in our quest for sexier, more responsive web-sites and -applications, we seem to easily forget boring stuff such as accessibility and sometimes even usability. How much time did it take you to find your way around the new LinkedIn-UI? Have you tried to use a web2.0-site on a PDA or smartphone? With your keyboard instead of your mouse? Using a screenreader instead of your normal display? Or with JavaScript disabled (I installed the Firefox NoScript-extension to guard against XSS and other JS-attacks)? And if you have ever tried loading Gmail on a slow connection, you’ll surely have noticed that they automatically fall back to their more accessible “Web 1.0”-version?
Lately I’ve been reading a number of interesting articles on this subject and at work we’re carefully applying some Web2.0-techniques as well. Based on that, here are a few suggestions on how to build better websites and -applications:

  1. Don’t use GWT or Flex unless you’re building a complex desktop-style webapp and if you’re willing to invest in a second “basic html”-version as e.g. Gmail does. Let’s face it, most websites and even -applications do not have the level of complexity that warrants the use these RIA-frameworks.
  2. Develop your core functionality in “web1.0”-style, using semantic HTML (structure) and CSS (presentation) only and apply your usability- and accessibility-wisdom here.
  3. Sprinkle JavaScript (behavior) over that static foundation using an established JavaScript-framework to define event-handlers for objects and to modify the content of divs (but test if you can already write to the object, or you’ll get those ugly “operation aborted” errors in MSIE).  Give users a chance to opt out of this enhanced version, even if they do have JavaScript enabled. With this progressive enhancement (a.k.a. hijax) you add extra functionality for those people who can make use of it, without punishing users who can’t because of physical or technological impairments. Read more about progressive enhancement on London-based Christian Heilmann’s site.
  4. Only load your JavaScript-functions when you really need them, creating a kind of stub for methods of an object and only load the real method when it is needed. This technique is dubbed “lazy loading” and can help making your pages load & initialize much faster. To learn more about the concept of “lazy loading” on digital-web.com.
  5. Use <noscript>-tags if you absolutely have to use JavaScript without having a meaningful object already in place in your static version. Explain what is going on and provide a link to a normal page where the same information or functionality can be found.

Off course these tips won’t guarantee you a perfectly usable and accessible website or -application, but when done right, this will help to get 80% of the way. A good functional analysis and thorough testing, both keeping usability and accessibility in mind, will push you towards 99,99%.

Over foute (web-)applicaties

Omdat Jakob Nielsen een slimme mens is, omdat hij een nieuw artikel geschreven heeft over web-applicatie design en omdat gratis kwalitatieve content alle aandacht verdient; “Top-10 Application-Design Mistakes“. Wat die tien design-fouten dan wel zijn moet ge zelf maar lezen, maar de bonus wil ik U hier niet onthouden:

“It’s almost always wrong to have a Reset button on a Web form. The reset button clears the user’s entire input and returns the form to its pristine state. Users would want that only if they’re repeatedly completing the same form with completely different data, which almost never happens on websites. Making it easy for users to destroy their work in a single click violates one of the most basic usability principles, which is to respect and protect the user’s work at almost any cost.”

Dat de man gelijk heeft!

Nog over web usability

web app usability posterGewoon een paar links naar interessante usability-related dingen die ik de laatste dagen feed-gewijs las:

5 tips voor succes op het web

Ik ben voor mijn werk aan een presentatie over functionele en technologische keuzes voor websites bezig. Als basis voor die keuzes, stel ik, moeten de redenen van het succes van het internet genomen worden, want die gelden even goed ook voor individuele websites. Zo voor de vuist weg (niet echt, ik ben hier al een tijdje over aan het prakkiseren) kan ik er een 5-tal bedenken:

  1. Geef de mensen informatie!
  2. Daar draait het op het web immers om, informatie. Dus niet over hoe leuk het er allemaal uit ziet (al is dat altijd mooi meegenomen), niet over een promootje op je webshop en ook niet over CPC van je Google Adwords campagne. Nee, het draait in eerste instantie echt gewoon over ‘kwalitatieve content’, over ‘inhoud’. De mensen willen internet om dezelfde redenen als waarom onze verre voorouders vroeger encyclopedieën kochten; omwille van de belofte dat je, als je dat wilt, informatie onmiddellijk ter beschikking hebt.
    tip 1: Zorg voor kwalitatieve informatie waar je doelgroep iets aan heeft.

  3. Gratis is nooit te duur
  4. Inhoud is koning, keizer, admiraal, maar verwacht niet dat gebruikers voor ‘gewone informatie’ zomaar geld zullen neertellen. De grote succesverhalen op het web zijn niet toevallig geheel of gedeeltelijk gratis. Google, Youtube, Wikipedia, die duizenden internet-fora … allemaal gratis inhoud.
    De truc voor wie toch geld wilt vragen voor zijn “content”, is een evenwicht te vinden tussen je gratis en je betalend aanbod. LinkedIn is een goed voorbeeld; iedereen kan zonder een eurocent uit te moeten geven lid worden en je kunt met zo’n gratis account perfect online netwerken. Maar terwijl je, blij als een kind met deze toffe gratis dienst, je online netwerk beetje bij beetje verder uitbouwt, voeg je zelf ook informatie (en nieuwe gebruikers) toe. Eenmaal je goed en wel op weg bent, schrijf je misschien ook een aanbeveling of beantwoord je vragen in de ‘answers’ sectie. Gratis informatie geven en nemen, in ieders voordeel. Alleen voor een klein een deel van de meest sexy functionaliteit tenslotte (de volledige lijst van wie je profiel bekeken heeft bv.), moet je wel betalend lid zijn. Online uitgevers zoals De Standaard en de muziek- en filmindustrie lijken overigens nog te worstelen met het vinden van de juiste verhouding tussen gratis en betalend.
    tip 2: Geef je bezoekers die informatie ten minste gedeeltelijk gratis.

  5. “Wie doet er mee, internetteke?”
  6. Internet drijft dus op gratis inhoud, maar wat meer is: iedereen mag meedoen! Wie toegang tot internet en een browser heeft, kan mee zoeken en lezen, maar kan vooral ook mee schrijven en linken. Het internet is op die manier vanzelf viraal; je leest, je reageert, je schrijft zelf, je stuurt linken door, … Het succes van internet en van succesverhalen als Youtube, Wikipedia, Facebook en dichter bij huis van bv. de Telenet Games-fora (nu geïntegreerd in 9lives.be) is dan ook mee te danken aan het feit dat iedereen mag meekijken, meespelen en mee promoten. Het internet, dat zijn de mensen. Vergeet die hippe marketeers en trendwatchers dus maar; het internet is vanaf de allereerste site (van Tim Berners-Lee aan de CERN in Genève, zie zijn oproep om zelf content te publiceren of software te schrijven in ‘How can I help‘) altijd al een viraal en sociaal medium geweest!
    Dat iedereen mag meedoen, gaat inderdaad verder dan het puur inhoudelijke: ge kunt, als ge na het lezen van dit artikel een geweldig idee hebt, onmiddellijk beginnen om nieuwe spannende software voor het web te schrijven. Internet en het www zijn immers gebaseerd op open, gestandaardiseerde technologie (tcp/ip, smtp, http, html, …) waar geen rechten op betaald moeten worden. Daarnaast heeft ook het succes van het open source ontwikkelmodel sterk bijgedragen tot de grote hoeveelheid beschikbare kwalitatieve software voor het internet (denk aan Bittorrent, Firefox, Apache, WordPress, Drupal, Mediawiki, …) en op die manier voor het succes van het web in zijn geheel.
    Voeg het idee van open communicatie en open software development tenslotte samen en “shake firmly” tot je een mashup hebt; web-applicaties (zoals Amazon en Google Maps), social-networking-sites (zoals het al vermeldde Facebook en binnenkort ook Linkedin) en andere web2.0-software projecten (opnieuw; Drupal, WordPress, Mediawiki, Joomla, …) laten ontwikkelaars toe om met behulp van een API (application programming interface) widgets, extensions en plugins te schrijven die extra functionaliteit in hun sites integreren of die informatie van hun site halen om ze in een andere context (bv. iGoogle of live.com of rechtstreeks in je browser) te publiceren. Het resultaat: gratis extra functionaliteit voor je bezoekers!
    tip 3: zet je website “wijd open”; een standaard browser moet voldoende zijn, moedig het linken naar je content en gebruik van je rss-feeds aan, bevorder communicatie op en/of over je site en overweeg de mogelijkheid van het openstellen van je applicaties voor “amateur-ontwikkelaars”.

  7. Uw grootmoeder kan het!
  8. Een oppervlakkige kennis van computers is voldoende om het internet op te trekken. Computer opstarten, icoontje van je browser klikken, naar Google, zoekterm intikken, à volonté op al die hyperlinks klikken, ge moet daar niet voor gestudeerd hebben mijnheer! Verkeerde pagina? Eén klik op de back-knop en je zit terug in je zoekresultaten (het web is sequentieel, ge gaat van pagina A naar B naar C terug naar B naar D, …) en als je een toffe pagina hebt gevonden; in de bookmarks ermee! Dat is het. Indien surfen niet zo eenvoudig zou zijn, hadden de webbouwers en -marketeers onder ons nu niet zo een fijne job.
    Om die drempel zo laag te houden, moeten sitebouwers zich wel een beetje aan de standaarden (html, css, …) en conventies (links zijn onderlijnd, elke pagina heeft zijn unieke URL zodat er kan gebookmarket en gelinkt worden, back-toets werkt, goeie navigatie en interne search …) houden. Wijk nooit af van webstandaarden en -conventies, zelfs niet als het nifty UI-alternatief van dat flashy webagency voor jou, doorwinterd webexpert die je bent, best eenvoudiger en vooral zo veel leuker lijkt.

    tip 4: laat je website volgens de regels van de kunst maken en hou het eenvoudig. Consistentie, eenvoud, usability, accessibility. Geloof me, ge kunt niet zonder en uw grootmoeder al zeker niet!

  9. Wie zoekt die surft (en surft en surft en …)
  10. Met die schier oneindige hoeveelheid aan gratis informatie zouden we niet veel zijn zonder tools om al die pagina’s makkelijk terug te vinden. Van Webcrawler en Lycos mid jaren ’90 over Altavista tot Google; search engines zijn de alfa en de omega van zowat elk internet-bezoek (bij hoeveel mensen zou een search-engine de homepage zijn?).
    Indien je wilt dat je site makkelijk te vinden is, zul je ervoor moeten zorgen dat de zoekrobotten van bv. Google je site makkelijk kunnen vinden en indexeren. En om goed geïndexeerd te kunnen worden, zul je ervoor moeten zorgen dat je site web-standaarden en -conventies volgt (zelfs niet als dat flashy webagency … ge weet wel).
    tip 5: Consistentie, eenvoud, usability, accessibility; ge kunt niet zonder en de Googles out there zeker niet! wees vriendelijk voor Google en de bezoekers zullen tot U komen.

Natuurlijk is dit lijstje niet volledig en vanzelfsprekend is er heel wat meer nodig om succesvol op het internet te ondernemen (een goed business-plan helpt). Maar als het op rauwe trafiek aankomt: zet gratis kwalitatieve informatie open en bloot voor iedereen online, zorg ervoor dat die volgens de standaarden en conventies ontsloten wordt en verwelkom search-engines met open armen. Hoe het geld dan moet binnenrollen, dat mag U zelf uitvissen.
Interessante links en inspiratie: