Den här interaktiva byrån, som jag inte kommer att nämna vid namn, har fått flera utmärkelser och hör till landets främsta inom sin bransch. Framför allt är de kända för reklam, men kommunicerar också att de är en av de allra bästa interaktiva byråerna. Jag bestämde mig för att utvärdera hur bra deras egen webbplats är.

Webbplats ”Byråwebb”

• Ett grid med 256 rektangulära boxar som var och en har ett färgat foto. Det går inte att se vad bilderna på boxarna föreställer och de har ingen förklarande text, utan boxarna är i detta läge mest dekorativa.  Det är verkligen snyggt.
• Vid mouse-over över en box så fylls en textruta mitt på sidan i med titeln på boxen/projektet.
• Mitt bland boxarna ligger en stor textruta som från början är tom.  En förstoringsglas-ikon antyder att det är en sökruta. Börjar man skriva något i sökrutan så väljs de boxar ut som matchar det man skriver tills det bara är en eller ett par kvar, så boxarna är både innehållsförteckning och sökresultat/filter. Vill man se titeln på de boxar som är kvar efter filtreringen måste man göra mouse-over på dem. Då skrivs deras titel ut i sökrutan istället för sökresultatet.
• Klickar man på en box, kommer man till en fördjupningssida där man kan läsa mer:  vissa boxar mostvarar en kampanj som byrån gjort, andra innehåller info om byrån.
• För att navigera tillbaka till startsidan så måste man klicka på SÖK uppe till höger på sidan.
• Överst på startsidan finns några menyalternativ: Nyheter, Kunder osv. Den första, Kunder, leder till ett helt nytt webbläsarfönster och till en sajt i vanlig html. På denna nya sida måste man klicka på Till byrån för att komma tillbaka till Start/sök, och då öppnas ytterligare ett nytt fönster.  Övriga menyval på Start/sök öppnas som boxar inom ramen för den vanliga sajten.

Det som är bra

• Innovativ och drastisk approach till sök som navigation, ett navigeringsbeteende som finns och växer i betydelse
• För den som vet exakt vad han letar efter

Det som kunde vara bättre

• Hela sajten är i flash. Med dagens teknik skulle inte någon del behöva vara gjord i flash, och definitivt inte hela sajten,  inklusive texter och foton.

• Fallbackversionen suger. Kommer jag in med en flashlös iPad möts jag av ett meddelande om att jag behöver installera flash för att få ”bästa upplevelsen”. Det går att klicka sig till en ”förenklad version”,  som är alla 256 boxar under varandra, fortfarande utan titel och utan nån chans att ta reda på vad de innehåller annat än att klicka på dem. Mouse-over funkar ju inte på pekskärmar. Toppmenyn har man åtminstone här lagt in som html: ”Nyheter” leder ju som bekant till en riktig webbsida i html, och även om den ser mycket liten ut på iOS så går den åtminstone att läsa. Övriga menylänkar leder till html-versioner av boxsidan:  färgglada boxar som den flashlösa användaren inte har en aning om vad de innehåller. Det är rena julafton!

• Sökfunktionen räcker bara halvvägs. Även om man använder sökrutan eller toppmenyn för att filtrera ned antalet boxar till mer hanterliga 10 st, så måste man fortfarande använda musen och föra muspekaren över var och en av boxarna för att få veta vilken av träffarna som är relevant. Bilderna är inte till mycket hjälp. Istället för att ge användaren en lista på träffar, som tar nån sekund att scanna igenom med blicken, så tvingar man honom att köra mouse-over på varenda box, men namnet på boxen syns bara så länge som muspekaren är kvar ovanpå. Alla som spelat memory nån gång vet hur svårt det kan vara att minnas var ett visst kort låg. Mousear man över ett antal träffar är risken stor att man glömmer bort var den man ville ha låg någonstans.

• Ordningen på länkarna ändras hela tiden. Om jag klickar på ”Om” flera gånger så ligger boxarna i olika ordning varje gång. Samma om jag söker på något: en slumpgenerator verkar kicka igång och kasta om sökresultaten.

• Att backa hjälper inte. Sökfunktionen sätter webbläsarens backa-funktion ur spel. Du kan alltså inte gå tillbaka ett steg i webbläsarens historik om du börjat skriva en sökning eller klickat dig vidare till en snävare filtrering av boxar. Däremot verkar det funka hyggligt att backa från en fördjupningssida till sökresultatsidan.

• Går inte att fatta hur man kommer tillbaka till startsidan.  Jag har sökt mig ända ned till en kundpresentation och har några få boxar i bild och kundens namn står i sökrutan. Nu vill jag  gå tillbaka till byråns startsida. Först letar jag efter en länkstig eller backaknapp, lite som iTunes eller ett vanligt windowsfönster. Finns inte. Backa i webbläsaren går inte. Det finns inget ”Start” i toppmenyn och heller inte nån logotyp uppe till vänster man kan klicka på. Istället ligger funktionen för att gå till startsidan under ett klick på Förstoringsglaset i sökrutan. Då ”rensas” formuläret och man tas till startläget. Det här måste vara den enda webbplats i världen där ett klick på förstoringsglaset i en sökruta inte betyder ”Sök” utan ”Avbryt sökning och gå tillbaka till startsidan”.  Tillägg: till sist hittar jag också en logotyp längst ner till höger, under hela webbplatsen. Ett klick på den tar mig också tillbaka till start.

• Tangentbordkommandon fungerar dåligt.  Tabbordningen från sökrutan är helt bananas: tabbar man framåt flyttas man vilt mellan alla boxar. Det går inte att flytta pekaren bort från sökrutan med piltangenterna, men däremot funkar piltangenterna om man redan tabbat sig till en box. Ska man utan mus gå från sökrutan till toppmenyn får man alltså först tabba, sen pila sig dit upp mellan boxarna.

• Ctrl-C, Ctrl-V och Ctrl-A fungerar inte för att markera och klistra in text i sökrutan.

• Man vet inte vad man får. Inget skiljer en textlänk från en videolänk.

Knäckfrågor

• Vi vet att en del föredrar att använda en sökruta när de egentligen vill navigera, för att det är enklare än att hålla på och klicka i menyer. Men om vi ersätter all navigation med enbart en sökruta, kan vi då sägas tillgodose en majoritet av användningsfallen?
• Vilka krav ställer lösningen på sökmotorn? Retorisk fråga: räcker en nyckelordslista?
• Om man på det här sättet tar bort hela upptäcktsdelen av besöket, vad kostar det? Vad är byråns affär jämfört med Googles, för att hårdra lite?

Tyvärr tycks formen ha fått gå före funktionen. Idén med sökrutan som filtrerar medan man skriver i den är förstås god (annars skulle inte jättar som Google använda sig av något liknande). Men den från början goda idén har slarvats bort genom att alla boxar ser likadana ut och saknar övrig metadata. Hela sajten är ett klassiskt exempel på Mystery Meat Navigation (begreppet förklaras också i Wikipedia).

What’s the fuzz?

Spelar det då nån roll på vilket sätt potentiella kunder får se en byrås portfolio på webben? Om byrån är ett berömt arkitektkontor som Wingårdhs så spelar det förstås ingen roll för kvaliteten på arkitekturen i stort att deras webbplats är kackig (däremot skulle det vara illa för dem om deras fysiska kontor såg fult ut). För arkitekter, filmare, fotografer och många andra typer av är webben ”bara” ett skyltfönster.

Men den interaktiva byrån är en annan femma.  För dem är webben både deras skyltfönster och deras produkt. Den interaktiva byråns kunder är företag som står i begrepp att göra om sin egen webbplats och som förmodligen är redo för Det Allra Senaste.  Om de kunderna hittar byrån jag har utvärderat i det här inlägget, så hittar de ju en byrå som vunnit många pris,  är bäst på interaktivitet  - och som själva har en vacker men oändligt krånglig flashwebbplats med mystery-meat-navigation. Och så säger de potentiella kunderna till varandra: - Kanske är det vackra men obegripliga helt sökbaserade flashwebbplatser som är Det Allra Senaste? I värsta fall får världen som ett resultat av det fler webbplatser som är svåra att använda.

Rekommendationer för att ändra ”Byråwebb”

1. Ta bort all flash som inte är nödvändig  (viss video kanske bara finns sparad  i flash etc)
2. Lägg loggan längst upp till vänster och lägg dessutom till ”Startsida” i toppmenyn
3. Låt användaren välja mellan gridvy och en mer konventionell och sorteringsbar listvy, med betydligt mer metadata i listvyn
4. Använd listvyn som standard för mindre skärmar (ie mobiler)
5. Vid sökning/filtrering, komplettera varje box med utskriven titel
6. Skippa slumpgeneratorn, låt ordningen i menyer etc alltid vara den samma
7. Om en länk startar en video, ska det synas redan på länken (ikon eller liknande)
8. Klick på Förstoringsglaset utför sökningen. Om en  ”Rensa”-funktion behövs, lägg den bredvid
9. Webbläsarfunktioner som ctrl-klick och backa ska fungera
10. Lägg in en ”Sök mer”-funktion som faktiskt använder en riktig sökmotor för den som är på jakt efter mer än bara nyckelorden.

Mer läsning

http://leonpaternoster.com/2010/08/when-is-mystery-meat-navigation-acceptable/

http://www.smashingmagazine.com/2011/04/19/showcase-of-creative-navigation-menus-good-and-bad-examples/ 

INTERVJUER +  OM RAMS’ DESIGNPRINCIPER

Our Interview With Dieter Rams, The Greatest Designer Alive (Fastcodesign)

Dieter Rams: making systems and making sense (Domus, om utställning i San Francisco, 2011)

SFMOMA om utställningen (2011)

Who is Dieter Rams? (Life of an architect 2011)

Dieter Rams, designer of Braun electronics (Boingboing om samma utställning, 2011)

Dieter Rams om föremålen han designat för Braun och Vitsoe (Vitsoe)

10 designprinciper (Vitsoe)

Om de 10 designprinciperna, essäer (Inksie, 2010)

Dieter Rams: Apple has achieved something I never did (Telegraph 2011)

Recension av boken As little design as possible (Mediasplatter.se 2011)

Less, But Better – an interview with design legend Dieter Rams (BBH Labs 2009)

1960s Braun Products Hold the Secrets to Apple’s Future (Gizmodo 2008)

Less and More, the design ethos of Dieter Rams (Atelier Tally 2008)

BILDER

Wikipediaartikel m bilder 

Flickrs pool med Rams-bilder

15 Dieter Rams Classics (Oobject)

Portfolio m 19 bilder (Wallpaper, 2007)

http://www.visitnoosa.com.au/

http://www.visitnoosa.com.au/index.cfm/category/show/sights-activites

http://www.derm.qld.gov.au/parks/noosa/about.html

http://www.noosaeguide.com/noosa_information_practical.php

http://www.noosa-heads.net/things/noosanationalparks.html

And by the way, could Peter Jackson produce it?

BILDBEHANLING:

http://www.ephotozine.com/article/using-layer-masks-with-photoshop-4876

http://www.sitepoint.com/sharpening-photoshop-cs2/

BAKGRUNDER:

http://webdesignerwall.com/tutorials/vector-polishing-techniques

http://www.sitepoint.com/building-buttons-photoshop-1/

http://www.lynda.com/Photoshop-CS4-tutorials/smart-objects/53853-2.html

ANIMATION

http://layersmagazine.com/planet-photoshop-animated-snow.html

LADDA NER BRUSHES och BORDERS och TEXTURES

http://www.brushking.eu/58/basic-border-brushes.html

http://www.bittbox.com/freebies/free-texture-tuesday-wrinkled-paper

http://bestphotoshoptutorials.net/2010/11/02/tree-brushes/

http://www.brandnewschool.com/Projects/ArtAndDesign/GoogleNews  (Keeping it simple – den jag visade)

http://www.psyop.tv/projects/fedex-enchanted-forest-subtitle

http://motiongraphics.nu/inspiration/motion-design/

http://motiongraphics.nu/experimental/thought/

USABILITY OCH MOBILWEBB / RESPONSIVE

 http://www.smashingmagazine.com/2011/09/08/to-five-smashing-years-and-a-free-anniversary-ebook-treat/

http://www.useit.com/alertbox/mobile-ux-guidelines.html

http://alexmaccaw.co.uk/posts/async_ui

Smashing Magazines Responsive Web Design: What is it?

Kapitel från boken Flexible Web Design (Zoe Mickley Gillenwater) + Tips på 70 länkar om ”flexibel webdesign”

WordPress och responsive web design (Sara Cannon)

fluid.newgoldleaf.com (The fluid grid system)

Diskussion om r w d med Thord Daniel Hedengren och Febers Roger Åberg m fl. (Tack Zackrisson för tipset)

http://www.alistapart.com/articles/dao/  Webdesignens Tao (10 år gammal artikel som rekomm. av Marcotte)

http://stuffandnonsense.co.uk/blog/about/i_dont_care_about_responsive_web_design/ (tips via SVT)

Vi går till Teliabutiken lördag morgon. I butiken säger killen att det inte finns några vita 32-Gb-versioner kvar i hela Stockholm, och heller inga andra (svarta) 32-Gb som vi uppfattar det. Han hänvisar oss till att vi själva ska gå till en verkstad som bara har öppet måndag-fredag och lämna in och vänta på att den ska bli reparerad. Av ren paffhet så säger vi inte så mycket om det utan går därifrån med ett visitkort från verkstaden.

Nu är det söndag och vi har sovit på saken. Vi konstaterar att man borde kunna lämna tillbaka en vara som inte fungerar. Och att det definitivt inte borde vara vår sak att skicka en trasig, aldrig använd iPhone till reparatören.

Jag tillbringar ett par timmar idag med att försöka komma i kontakt med Telia för att ta reda på hur vi ska gå till väga. Den information vi vill ha är:

1) Finns det någon 32Gb-iPhone i  Stockholm som Telia kan ge oss i utbyte idag, istället för att vi ska behöva lämna in en aldrig använd telefon på lagning?

2) Om svaret är nej, hur gör vi för att reklamera och göra ett återköp, och avbryta det nytecknade abonnemanget?

Jag börjar med att ringa till 020-numret som är gemensamt för alla Teliabutiker. Jag sitter i telefonkö i ca 15 min (behåller min plats i kön etc) innan jag får hänvisningston och ett sånt där klassiskt Televerketmeddelande om att 031-numret (sic) har upphört och att hänvisning saknas. Bortkopplad.

Testar igen. Får köplats och rör mig framåt i kön. Tut! Samma sak igen: ingen abonnent, bortkopplad. Uppenbarligen ett tekniskt fel på just det telefonkösystemet.

Testar ringa  90 200,  dvs Telias vanliga kundtjänst. Det går bättre: jag sitter i telefonkö i 15 minuter och kommer sen fram. Jag förklarar att jag försökt två gånger att ringa butikerna men blivit bortkopplad. Förklarar också ärendet: jag vill ha en ny telefon eller lämna tillbaka den trasiga. Killen är mycket trevlig, och säger att han ska prata med butiken eftersom han som jobbar på kundtjänst inte vet något om vilka regler som gäller eller om det finns några telefoner i Stockholm. Men han pratar inte med butiken utan kopplar  om mig till den trasiga 020-telefonkön som jag precis berättat för honom inte fungerar. Efter ca 10 minuter i kön kastar systemet ut mig och kopplar ned mig igen.

Testar två gånger till att ringa 020-numret, samtidigt som jag ställer mig i kö för chatten till Telia. Ungefär samtidigt som jag blir bortkopplad för andra gången från telefonkön så kommer jag äntligen fram på chatten. ”Robert” hjälper mig. Han svarar ungefär var tionde minut på mina meddelanden. Det tar honom ca 20 min att få ur sig att det enda vi kan göra är att besöka butiken eftersom han, som jobbar på Telias kundtjänst, inte vet något om telefoner eller abonnemang.

Notera att jag alltså i det här läget ringt fem telefonsamtal till två olika kundtjänster, pratat med en person över telefon och chattat med kundtjänst utan att få svar på mina frågor, och detta har tagit väl över en timme.

Det slutar med att vi ändå åker ned till Telia på Kungsgatan igen, och träffar på samme kille som igår hänvisade oss till verkstaden på måndag. Hans budskap till oss är först det här:

- eftersom förpackningen är bruten så går det inte att lämna tillbaka telefonen, dvs öppet köp gäller endast obruten förpackning

- det går inte att ångra sig om abonnemanget som är tecknat på 24 månader

- M måste själv skicka eller lämna telefonen till verkstaden.

Det mest absurda med hans resonemang är förstås att det öppna köpet skulle hänga på att förpackningen är obruten. Det står inte i Telias regler på kvittot, utan där står det bara att telefonen måste ha sin originalförpackning kvar.

Efter mycket diskuterande fram och tillbaka så säger han till sist ”Joo,  vänta men vi har ju en SVART 32 Gb-iPhone inne som du skulle kunna få ta.. Jag trodde ju ni krävde en VIT..”.

Jag tolkar det som att han i det läget är hjärtligt trött på oss som står och gafflar om reklamation inför en lång kö av människor i värsta rusningstiden. Att vi också börjar prata om ångerrätt för hela abonnemanget hjälper nog också till.

Så blir det till sist. Vi får en ny telefon som han hjälper oss aktivera så att vi ser att den fungerar. Och då vi pressar honom så får vi också veta att det 24-månaders abonnemang som han tidigare påstod var ett hinder för att lämna tillbaka telefonen, faktiskt har en ångerrätt på trettio dagar. På fem minuter svänger han alltså totalt, vilket förstås är bra men man undrar varför vi behövde vara så påstridiga och jobbiga för att få rätt?

Min upplevelse av Telia idag är den här:

• Kundtjänsten var mycket svåråtkomlig, med svajig teknik och personal som när man väl nådde dem inte hade information eller mandat att hjälpa till över telefon. För mig som kund blev det med andra ord värdelöst och ett fruktansvärt slöseri med min och deras tid.
• Det gick inte att nå Telias butiker på telefon över huvud taget.
• Killen i teliaaffären ville mycket hellre sälja sin sista svarta 32 Gb-iPhone till nån ny kund än att ge den till M som betalat för en telefon som inte fungerade. Men då man pressade honom gjorde han exakt det vi bett om hela tiden. Han ville lämpa över ansvaret och kostnaden för en ej fungerande produkt på kunden.

Vi fick alltså rätt till slut, men fick kämpa för det.

Nån som har en annan upplevelse, eller som delar den?

Öppna hela spellistan i Spotify

Adamski – Killer
Daft Punk – Around The World
Taito Tikaro – Freedom – Oscar L Summer Mix
Modaal – Just Killin’ It – David Jones Remix
Jon Rundell – Knick Knack
Chus – Iberican Sound – Adolf Marsan Reconstructed Mix
Faithless featuring Estelle – Why Go? – Hoxton Whores Su-sha Mix
Laidback Luke – Till Tonight feat. Jonathan Mendelsohn – Peter Rauhofer Reconstruction Remix
Pryda – Illusions (Original Mix)
Just4Funk feat. Orlando Johnson – This Is Funky – Funk Mix
Green Velvet – Flash – Nicky Romero Remix
Starecase – See – Timo Maas Vocal Mix
Celeda – The Underground (Abel Ramos Remix)
Depeche Mode – Behind The Wheel (Vince Clarke Remix)
Tom Novy feat. Lima – Now Or Never (Lissat & Voltaxx Remix)
Milk & Sugar – Has Your Man Got Soul – Jamie Lewis Darkroom Mix
Shakedown – At Night – Kid Creme Funksta Mix
Shlomi Aber – Moods Feat. Lemon – Valentino Kanzyani Remix
Paul van Dyk – For An Angel

Öppna hela spellistan i Spotify

Cloud – The Grid
Adam Tensta – My Cool
Justin Timberlake – Rock Your Body – Paul Oakenfold Mix
Chab – Closer To Me – John Digweed & Nick Muir Vocal
Celeda – Believe In The Music (Hoxton Whores Remix)
Just4Funk feat. Orlando Johnson – This Is Funky – Funk Mix
Laurent Wolf – Calinda – Club Remix
Laidback Luke – Till Tonight (Chris Kaeser Remix) [feat. Jonathan Mendelsohn] – Chris Kaeser Remix
Matteo Marini – House Music – Original Dirty Mix
Situation 2wo – Way2tite – Original Version
Albin Myers – Retro Revival
Deadmau5 – Raise Your Weapon (Madeon Extended Remix)
Rene Amesz – Strike Me Down – Henrik B Remix
Lytz – 3 Days Awake – Original Mix
David Guetta – Sweat (David Guetta & Afrojack) [Dubstep Remix]
Sam Mollison – Cry – Gogo mix
Chus – Echoes From Doruma – Mucho Dub Mix
Crossfade – Sonar
Björk – Human Behaviour (Underworld Mix – Darren Emerson)
Underworld – Dark & Long