Här är en intressant liten sak att lägga in på MP3-spelaren: Donna Maurer delar med sig av sina erfarenheter av card sorting.

Crazy Egg är ett verktyg för att skapa clickmaps – kartor över vilka länkar som användarna klickar på. Gratis för små sajter, spännande för stora.

Ett annat sätt att få clickmaps är Google Analytics.

Uppdaterat: Inte lätt förstå hur man får igång Crazy Egg

15 Sep 2006

Alice i designlandet

Det är bara att erkänna: jag är en sucker för klurig design. Som den här koppen, av Ross McBride.

För pekaren över bilden för att se vad som händer när koppen sätts på plats.

Fat med förvrängd text och en blank kopp. När koppen sätts på plats syns texten i speglingen.

Läs mer:

Ekonominyheterna rapporterar om hur stor andel av hushållen som har bredband.

“I maj i år hade 6,8 miljoner svenskar, motsvarande 78 procent av befolkningen, tillgång till internet i hemmet, enligt undersökningsföretaget MMS. Av dessa hade endast 4,9 miljoner individer, motsvarande 56 procent av befolkningen, bredband hemma. 1,9 miljoner svenskar surfar således internet via modem när de är hemma.”

Nästan var tredje hem-användare kör alltså med modem. Även om det inte motsvarar andelen besökare – många surfar från jobbet där hastigheten är högre, och de med bredband är säkert flitigare internetanvändare – så talar det för att vara försiktig med att designa webbplatsen för bredbandshastigheter.

Via “Beta Alfa 2.0”:http://betaalfa.polymono.net/2006/09/14/2-miljoner-svenskar-surfar-via-modem/

Ibland väcks frågan om användbarhet lönar sig. Här är ett exempel på hur en redesign gav 20% mer försäljning via webben. (För att vara mer precis skall sägas att det det inte är försäljningen i sig som diskuteras utan conversion, andelen av besökarna på sajten som slutförde en affär.)

Läs mer:

En bild varje dag under tre års tid.

Via åkestam.holst

Uppdaterat: Verkar som att filmen är borta. Den finns dock på YouTube

Metro-grundaren Pelle Andersson skriver i sin blogg Dateline Seoul om det danska gratistidningskriget:

“Det är sällan klokt av en etablerad tidningsägare att ge ut nya gratisdistribuerade dagstidningar. Särskilt osmart är det att göra det på det danska sättet, som en defensiv åtgärd för att försvara en betald dagspressmarknad. Det är ungefär lika genomtänkt som att inleda ”kriget mot terrorn” med att inskränka demokratiska fri- och rättigheter.”

Snabbt glider han dock över till en mer generell diskussion om hur mediakonsumtionen förändras och vilka nya möjligheter det öppnar. Minst lika intressant för webbare som för tidningsmänniskor.

“Till att börja med måste man lyfta blicken, och inse att dagens hot från den tryckta Metro och andra kopior trots allt bara är en mindre del av mediautvecklingen. För hur många tidningsutgivare har egentligen begripit vad de håller på med?
Många tror fortfarande att affärsidén är att trycka och distribuera tidningar för att förse läsare med nyheter och nöjesläsning – och om det är en betaltidning att dessutom locka folk att köpa den. Inget är mera felaktigt. Affärsidén med en tidning är att sälja konsumenternas tid till annonsörerna. Allt annat är en effekt av denna grundläggande idé. Närmar vi oss uppgiften på detta sätt blir det enklare att tänka fritt…”

Ytterligare ett par pärlor ur texten:

“När jag jobbade på Dagens Nyheter brukade prenumerationsavdelningen ringa runt till alla dem som sa upp tidningen, och fråga varför. De hade alla samma svar. Antingen sa de att tidningen var för dyr, eller också att de inte hann läsa den. Som svar gjorde DN tidningen tjockare och höjde priset. Då förtjänar man problem.”

“...det är förvånande hur många tidningar som glömmer kvinnorna, trots att en majoritet av de skrivande journalisterna numera är kvinnor. Fast cheferna är förstås män fortfarande. Kvinnorna är vår viktigaste målgrupp, inte bara för att det är den läsande, skrivande och bäst utbildade delen av befolkningen, det är också den grupp som fattar inköpsbesluten i familjen. Kvinnorna styr ekonomin, och det vet annonsörerna mycket väl. Att dagspressen inte på ett mer medvetet sätt levererat dessa superkonsumenter till annonsörerna är en gåta…”

11 Sep 2006

Ord: Triple replay

När samma repriser visas i alla media som distribueras via bredbandet.

Accessify.com bjuder på en stor uppsättning verktyg för att producera tillgänglig html- och css-kod. Till exempel Accessible Table Builder som ställer ett antal frågor om tabellen som skall göras och sedan producerar koden.

Andra verktyg:


  • Accessibility Tools
    • Accessible Form Builder – A simple but very quick way of putting together a form that uses either CSS or table for layout, automatically creates label elements and the associated for and id atttributes, as well as (optional) title attributes for each text field. It’s as simple as entering a list of fields that need to be captured and hitting return.
    • Form Element Generator – Build individual form elements that are accessible (requires JavaScript to work). Could be used after creating the form above to address fields that are not straightforward text inputs.
    • Pop-up Window Generator – Create pop-ups that are accessible and search engine-friendly. Note: this tool is going to get a revamp very soon, such that inline event handlers are not used. So, don’t flame me, all ye DOM scripters!
    • Favelets – Little pieces of JavaScript that can be saved as favourites in Internet Explorer, Mozilla and Opera. You may find these useful for checking features of a page (for example, what links are present, images missing alt attributes etc
  • General Developer Tools
    • Yes/No List creator – It’s a tool for quickly generating accessible, XHTML-compliant yes/no radio button choices from a list
    • Insta-Select – An easy XHTML-compliant select list generator (paste in your list and out comes the select with relevent option elements and value attributes)
    • List-o-matic – Create CSS-styled navigation blocks based on unordered list <li> items.
    • Acrobot – converts all your acronyms/abbreviations using the <acronym> and <abbr> tag
    • HTML to JavaScript Convertor – Similar to Response.Right, this tool takes your markup and converts it to a series of document.write() statements that you can use in a block of JavaScript.
    • XFN (XHTML Friends Network) Link Creator – Build up XFN-friendly links for copying/pasting into a blog-roll or navigation menu.
    • Response.Right – Save time converting large blocks of text/HTML to server-side write statements (such as PHP echo or ASP response.write) with this handy convertor.
    • Quick Escape – Converts HTML to escaped characters suitable for pasting into form textarea inputs.
7 Sep 2006

Hitta länken

HP bjuder på kul sällskapslek: Hitta länken.

Tips: Det är inte den svarta texten. Det är inte den blåa texten. Det är den mattblåa texten.

Via “This is broken”:http://www.thisisbroken.com/b/2006/08/hps_nonunderlin.html

Dubberly Design Office bjuder på sex smått fantastiska exempel på konceptkartor från vitt skilda kunskapsområden.

Till exempel denna, runt vad ett varumärke är (klicka för att se en större pdf).

Konceptkarta över 'Brand' och associationer till det.

4 Sep 2006

Nya ord

Några oundgängliga nya ord och uttryck från Word Spy:

fridge Googling
"Running an Internet search based on some or all of the contents of one's fridge, looking for a recipe based on those contents."
wikiality
"Reality as defined by a consensus, particularly in a collaborative endeavor such as Wikipedia."
triple delivery
"In a PowerPoint presentation, having the same text on the screen, on a handout, and spoken aloud."
mechanical placebo
"A device or object that appears to perform a specific function, but in fact does nothing at all."
Jag undrar om inte "Stäng dörrarna"-knappen i många hissar har den (icke-)funktionen, de tycks aldrig skynda på dörrstängningen. Skall man tro ryktena gäller det även för grön gubbe-knapparna vid många övergångsställen.
Manilow method
"The discouragement of loitering in public places by broadcasting music that is offensive to young people, particularly the songs of singer Barry Manilow."
Ibland kan det dock slå fel.
freemium
"Relating to a business model that offers basic services free, but charges a premium for advanced or special features."
cancer refugee
"A person forced to travel to another jurisdiction to find proper cancer care."
Otäckt relevant för att beskriva hur en del människor tvingats lämna vårdköerna och söka sig till andra delar av landet eller ut i Europa för att få vård.
Gotcha Day
"The anniversary of the day on which a child was adopted."
anthropocene
"The present geological period, characterised by humanity's effects on global climate and ecology."
continuous partial attention
"A state in which most of one's attention is on a primary task, but where one is also monitoring several background tasks just in case something more important or interesting comes up."
monotasking
"Performing one task at a time"
hedonic treadmill
"The tendency for a person's economic expectations and desires to rise at the same rate as his or her income, resulting in no net gain of satisfaction or happiness."
egocasting
"Reading, watching, and listening only to media that reflect one's own tastes or opinions."
wrap rage
"Extreme anger caused by product packaging that is difficult to open"

Vilket förakt för de dumbomar som faktiskt köpt ens produkt avspeglas inte i skillnaden mellan de påkostade försäljningsbroschyrerna och de sunkiga manualerna.

Påkostade försäljningsbroschyrer och povra manualer.

Creating Passionate Users ger ett brandtal för att satsa på de kunder man faktiskt har.

“Let’s take the whole damn ad/marketing budget and move it over to product manuals and support. Let’s put our money where our users are. If we’re in it for the short term, then sure—it makes sense to do everything to get a new user, while doing as little as possible once we’ve got them. But if we’re really in it for the long haul—for customer retention and loyal users—then shouldn’t we be using all that graphic design and pro writing talent for the people we care about the most? Our users?”

Läs mer:

Översikt över ett gäng läkemedelsannonser.

Spanska läkemedelsannonser från 60-talet låter kanske inte som någon höjdare, men det här är en fantastisk uppsättning designinspiration

Dan Saffer i en lång intervju om sin nya lärobok i interaktionsdesign, Designing for Interaction: Creating Smart Applications and Clever Devices

“Interaction design is about behavior, how things work. I push a button on my mobile phone and something happens. Or I enter a fast food restaurant, walk up to the counter, and something happens. Defining what happens when a person uses a product or service is what interaction designers do.

The reason we do it is to enable connections — interactions — between people.”

Allt fler överger titeln "informationsarkitekt" och kallar sig istället "interaktionsdesigner" - utan att för den skull byta arbetsuppgifter.

Delvis speglar det säkert att den första titeln är utsliten efter ett decennium och den som vill ligga i framkant för det nya också behöver en yrkestitel som inte är gammal. Men också att webben inte längre i första hand ses som ett bibliotek dit man går för att hämta information från hyllorna.

anvandbart.se har fått nya urlar (om du läser detta på löpet klicka på rubriken ovan för att se ett exempel). De gamla fungerar fortfarande, men från och med nu är det som syns en mer läsbar och mindre teknikspeglande variant. Ett litet steg på vägen mot att låta sajten själv leva upp till de råd jag ger i Användbarhetsboken.

Fast inte riktigt, för efter mycket funderande har jag beslutat att bryta mot ett par av råden.

Det tycks som att en av de saker Google (och kanske även andra söktjänster) tar hänsyn till är om den kan hitta sökbegreppet i själva webbadressen. Det betyder att de nya urlarna här gör sajten mer sökbar. Men det gör också att det finns en motsättning mellan rådet i Titel och rubrik bör innehålla de viktigaste orden, som säger att titeln bör vara med i urlen, och rådet i Webbadressen bör vara lätt att läsa och uttala, som säger att adressen inte bör vara mer än 70 tecken lång. Här väljer jag att satsa på sökbarheten, och de texter som har riktigt långa titlar får en url som överskrider 70-teckensgränsen.

Ett annat råd som jag inte i någon högre grad följer – annat än att alla råd och kapitel i användbarhetsboken har en egen avdelning som syns i urlen – är Webbadressen bör spegla webbplatsens struktur. Med moderna publiceringssystem så är det lätt att ordna om sajten allteftersom insikten fördjupas om vilken organsation som fungerar bäst för användarna. Det är också lätt att låta samma sida förekomma på flera olika ställen. För både dessa saker är det bättre om adressen inte är bunden till någon särskild placering.

Ytterligare ett argument mot att ta med organisationen är att det gör det ännu svårare att hålla sig inom 70-teckensgränsen.

Men det finns också saker som talar för att låta strukturen speglas i webbadressen. Framförallt kanske att det är ett bra sätt att få in nyckelord i den, och på så sätt öka sökbarheten.

När datumen på Expressens webb säger att artikeln skrivits innan den händelse artikeln handlar om har utspelats, ger det ett bra exempel på faran med ogenomtänkta tidsstämplar och med att låta vad som är tekniskt bekvämt styra vilka tider man redovisar.

Jag vet inte hur Expressens system fungerar, men ett vanligt problem är att för datorn skapas ett dokument när man börjar skriva det, men att i normalt språkbruk brukar vi inte betrakta en artikel som skapad innan den är skriven.

29 Aug 2006

Figursättning

Att figursätta runt en bild på webben är inte lätt – men det går. A List Apart bjuder på ett skript för att göra det automatiskt.

Illustration som visar hur en figursättning med A List Aparts metod ser ut.

Värt att notera är dock att detta fungerar sämre för svensk text än för engelsk (eller för fusk-latin som i exemplet ovan), när bilden ligger till höger. Webben har ingen avstavning och svenska ord är i genomsnitt längre, vilket gör högermarginalen ojämnare och figursättningen ännu mindre figursydd.

Läs mer:

Att vara bloggare har blivit ett yrke, vilket inte minst visas av att två forum för platsannonser där folk som vill blogga för brödfödan sökes nyligen har startats. Performancing exchange och Jobboard.

Uppdaterat: Se även Bloggare sökes till ett mindre företag och Blogging Grows Up

Läs mer:

justaddwater reder ut skillnaden mellan skärmstorlek och vilket utrymme som faktiskt finns för innehållet

“Web designs should optimize for a maximum available browser window of 1000×600 pixels. As screens get better and bigger, users rarely maximize browser windows, which is why we’re probably better off optimizing for a smaller window, such as 900×600.

Still, the layout should be liquid so that content fill the users current browser content area, regardless of the size. Also, do not design for a specific browser window size, as it varies between users, especially users with large screens.”

Uppdaterat: En uppföljning som bland annat visar att de flesta surfar med webbläsarfönstret på hela skärmen.

24 Aug 2006

Webbplatsens DNA

Graf över siten www.abendblatt.de.

Webbplatser inre struktur visualiserad, en slags DNA-kod som i en blick kan avslöja mycket om hur sajten är uppbyggd och vilken inre skönhet (eller brist på) den rymmer.

Om du inte nöjer dig med att titta utan också vill veta vad de olika färgerna står för, och se några exempel på olika typer av webbplatser.

På Flickr finn en samling av webbplatsgrafer.

Applet för att göra en graf av din egen sajt.

Läs mer:

Travelaid.se har testt ytterligare en resesajt (läs om den förra testen av Apollo) – och det gick inte så mycket bättre denna gång. För 6 miljoner kronor har Ticket gjort en sajt som är förvirrande och ologisk.

Det är märkligt att se att resebranschen, som är på väg att bli helt beroende av webben, framhärdar i att förlora kunder och miljontals kronor i intäkter genom att göra förvirrande och svåranvända webbplatser.

22 Aug 2006

Är det sant att...

Fantastisk sajt med uttömmande svar om alla möjliga populära föreställningar och vanföreställningar. Till exempel:

22 Aug 2006

Tillgänglighetstips

Ett gäng tips om hur man kan förbättra tillgängligheten (även om de knappast är så avancerade som sidans titel gör anspråk på).

This can be useful for example if you are using Mindmanager as the hub of your Getting things done universe.

  1. Create a RSS topic in your mind map. Make it read from mailbucket.org/something.xml – using your own label instead of “something”. Instructions.
  2. Check that there is not already any RSS content (in that case, change “something”).
  3. Forward mail to something@mailbucket.org.
  4. In the map, select your RSS topic, and press F5. The forwarded mail should now show as a subtopic.
  1. Drag it to wherever you want it. (Or you can leave it where it is, but in that case it will sooner or later scroll of the list and disappear.)

You can use different mailbucket addresses for different GTD folders, projects etc.

The mail can be forwarded manually or automatically by using filter in your mail program.

Mail to RSS problems

Using Mailbucket is extremely simple – but the drawback is that there is no privacy. Anyone can read your something-channel.

Also, Mailbucket will mangle accented characters (at least Swedish ones).

There are alternatives for the mail-to-RSS-conversion:

  • Gmail. But there is no obvious way to get the RSS reader in Mindmanager to use a password protected RSS channel. And it is in Atom, which I’m not sure Mindmanager handles.
  • email2rss. A Perl script to install at your mail server.
Forward mail to OneNote

Rss2OneNote (download page) is an application that sends rss to OneNote. I’ve tested it with OneNote 2007, and while I’m able to get the mail titles into OneNote, for some reason the body of the mails does not survive the transfer. Maybe it’s a problem with the RSS format of Mailbucket, maybe it’s something else…

Läs mer:

Jared Spool varnar för att en blandning av understrukna och icke-understruktna länkar lägger ett tungt tolkningsjobb på användaren.

When the designers switch back and forth, between having some links underlined but others not be underlined, that makes even more work for users. Work that doesn’t add any real value. We think the visual design element of the underline is not required, but it is cruel to make users work extra hard because you can’t decide.

Han argumenterar också för att även i sammanhang där användaren förstår vad som är länkar även utan understrykningen, så är själva strecket en stark uppmaning till att klicka (det blir en visuell motsvarighet till “Klicka här!”).

21 Aug 2006

Pennställ

Ytterligare ett offer för den morbida serie som inleddes med knivmannen.

Röd mansfigur spetsad på penna.

Via the cool hunter

Ännu en svåremotståndlig mashup (en webbplats som tar funktioner eller innehåll från andra webbplatser men gör något alldeles eget av det). Bubblr gör det superenkelt att skapa egna serier av foton från Flickr.

Mitt bidrag till nya seriegenren: Fashion statement.