svart - mellan dröm och verklighet www.magazine.se/ webbdesign Här hittar du bra länkar och fördjupning

Magazines märke finns i 13 varianter formgivet av Gabor Palotai

ROBERT RYBERG Chef Digitala Medier på Magazine AB Författare till Grafisk Kokbok Lärare på diverse skolor Tidigare: KTH/gt, grafisk konsult, Universum, Spray Lite om talarens brokiga tillvaro och bakgrund. Från Grafisk Teknik på KTH till Dagspress och grafisk konsulting via webbverksamhet på Universum (f.d. Fri Media) och Spray Interactive Media Agency till Magazine AB som chef för webbolaget. Är dessutom ansvarig för Grafiska Institutets utbildning i digital förpressteknik. Arbetar med en ny grafisk lärobok som kommer under våren på Arena bokförlag - ”Grafisk Kokbok”. Brukar även skriva en del artiklar om grafisk teknik och webb. Det var det... robert@magazine.se

MAGAZINES KUNDER Acacia AB Agvald & Partners ASG AB Bildhuset Celexa Cementa Värld Damernas V Electrolux Ericsson Företagaren Gambro AB IDG Iggesund Paperboard IKEA ITT Flygt Journalisten Kommunaktuellt Kungliga Dramatiska Teatern LO/TCO/SACO Luftfartsverket Microsoft Netcom Consultants Olof Palmes Int. Centrum Perstorp AB Probi AB SCA Scala Business Solutions N.V. SKF Stadsmissionen i Stockholm Svenska Kommunförbundet Säljarnas Riksförbund Veckorevyn Vin & Sprit AB Volvo Magazine har ett stort antal kunder - de flesta ganska stora företag. Alla är olika. De agerar på sitt sätt och ställer sina krav. Mängden erfarenhet av tidningar varierar, liksom erfarenheten av digitala medier. Självklart påverkar det arbetssätt och slutresultat - vi måste göra unika lösningar i varje fall - såväl för produkten som för projektet. robert@magazine.se

svart - mellan dröm och verklighet ATT SKAPA FRAMGÅNG

DU BESTÄMMER INTE Enda vägen till framgång är att anpassa sig till användaren Det ända sättet att låta användarna nå det du vill ge dem är att anpassa informationen och förpackningen till användarnas beteenden och förväntningar. Det gör man nästan uteslutande bäst genom testning och att dra erfarenheter av andras tester. robert@magazine.se

svart ANVÄNDBARHET

DESIGN PÅ WEBBEN ÄR MER ÄN ESTETIK Webbsidan upp till 40% verktyg och 60% information Webbdesign är mycket likt industridesign snarare än grafisk design Indutridesigners är vara vid att formge för användning och inte som grafisk formgivare som bara är vana vid design för informationsförmedling. Procentsatserna är inte frukten av forskning utan bara ett exempel på hur stor del av en webbsidas yta om ofta upptas av ”verktyg” och inte själva informationen som man vill förmedla. robert@magazine.se

ANVÄNDARGRÄNSSNITT Vad är ett gränssnitt? Varför tänka på detta Design på webb / traditionell grafisk form robert@magazine.se

Ett känt gränssnitt som alla kan använda. robert@magazine.se

Ett annat känt gränssnitt som alla kan använda - åtminstone i sitt eget land. robert@magazine.se

Min mikrovågsugn. Mycket enkel att använda Min mikrovågsugn. Mycket enkel att använda. Knapparna förklarar sig själva. Lustigt nog är det lite av en webbsida över den. Styrfunktioner överst och innehållet i mitten. robert@magazine.se

VAD ÄR ETT GRÄNSSNITT? In- och utmatning samt återkoppling Grafisk Kommunikation robert@magazine.se

ETT BRA GRÄNSSNITT /1 Ska vara konsistent Ska vara konventionellt Ett verktyg att användas Gå snabbt att lära Hjälpa användaren att utföra och förstå robert@magazine.se

ETT BRA GRÄNSSNITT /2 Datorn ska inte verka dum Användaren ska inte känna sig dum Ge få misstag Trygg miljö bra Visa möjligheterna Allt för att maximera användbarheten! robert@magazine.se

Överblick Navigation Position VIKTIGAST Om du ger användaren allt detta så är basbehoven tillfredställda . Sedan är det dags för design och genomarbetat innehåll. robert@magazine.se

Dessutom Avsändare Datering Kontakt robert@magazine.se

TYPER AV INTERAKTION Kommando Inmatning Manipulation Återkoppling Läs mer om detta i Roberts artiklar på www.magazine.se/webbdesign robert@magazine.se

VAD NÄR? Effektivitet kontra Lärbarhet Det är lättare att känna igen än att komma ihåg. Ett förhållande som man måste välja sida i. Det är svårt att kombinera dem samtidigt. Är det snabbt och effektivt att använda är det oftast svårare att lära sig. Tänk också på att det är lättare att känna igen något än att exakt komma ihåg hur det såg ut eller skulle genomföras. robert@magazine.se

svart texten är bortglömd Jo visst finns det en mängd text på webben, men man har glömt bort att anpassa den till mediet.

TEXT ÄR SVÅRT Besökaren vill inte läsa utan skummar Läsaren är otålig Informationsmängden är enorm Det är lätt att gå därifrån Läshastigheten är låg Typografin styrs av användaren Texten är högsta abstraktionsgraden av information Att presentera text på webben stöter på många problem eftersom kommunikationen sker på användarens villkor användaren. robert@magazine.se

LÄSHASTIGHET Tal: 120 ord/min Datorskärm: 150 ord/min Skrivmaskinstext: 200 ord/min Ordbehandlad utskrift: 320 ord/min Professionellt typograferad text: 460 ord/min Siffror från det amerikanska undersökningsföretaget Retrac. robert@magazine.se

FUNKTIONELL TEXT INFORMATIV TEXT Texten är ett verktyg också Hjälptexter/ledtexter/funktionell text ska vara korta med möjlighet till längre fördjupning. Måste visa rätt och avslöja Hjälp läsaren att fatta rätt läsbeslut. Det är skillnad på text som ämnad att förmedla information och text som är ämnad att hjälpa användaren att hitta texten som ska förmedla information (funktionell text). Den funktionella texten måste utformas ytterst varsamt. robert@magazine.se

ETT FALL Webb för naturupplevelser i Nebraska Testad utifrån att utföra en uppgift fel som användaren gör hur mycket man minns av webbtjänsten hur man minns strukturen subjektiv känsla för webbtjänsten Läs mer om detta test på http://www.useit.com robert@magazine.se

NORMAL TEXT Nebraska is filled with internationally recognized attractions that draw large crowds of people every year, without fail. In 1996, some of the most popular places were Fort Robinson State Park (355,000 visitors), Scotts Bluff National Monument (132,166), Arbor Lodge State Historical Park & Museum (100,000), Carhenge (86,598), Stuhr Museum of the Prairie Pioneer (60,002), and Buffalo Bill Ranch State Historical Park (28,446). robert@magazine.se

HALVERAD LÄNGD In 1996, six of the best-attended attractions in Nebraska were Fort Robinson State Park, Scotts Bluff National Monument, Arbor Lodge State Historical Park & Museum, Carhenge, Stuhr Museum of the Prairie Pioneer, and Buffalo Bill Ranch State Historical Park. 58% När texten halverades i längd jämfört med utgångstexten ökade resultatet av texten med 58%. robert@magazine.se

PUNKTER Nebraska is filled with internationally recognized attractions that draw large crowds of people every year, without fail. In 1996, some of the most popular places were: Fort Robinson State Park (355,000 visitors) Scotts Bluff National Monument (132,166) Arbor Lodge State Historical Park & Museum (100,000) Carhenge (86,598) Stuhr Museum of the Prairie Pioneer (60,002) Buffalo Bill Ranch State Historical Park (28,446). 47% När texten punkades upp jämfört med utgångstexten ökade resultatet av texten med 47%. robert@magazine.se

OBJEKTIV TEXT Nebraska has several attractions. In 1996, some of the most-visited places were Fort Robinson State Park (355,000 visitors), Scotts Bluff National Monument (132,166), Arbor Lodge State Historical Park & Museum (100,000), Carhenge (86,598), Stuhr Museum of the Prairie Pioneer (60,002), and Buffalo Bill Ranch State Historical Park (28,446). 27% När texten gjordes objektiv jämfört med utgångstexten ökade resultatet av texten med 27%. robert@magazine.se

ALLTIHOP In 1996, six of the most-visited places in Nebraska were: Fort Robinson State Park Scotts Bluff National Monument Arbor Lodge State Historical Park & Museum Carhenge Stuhr Museum of the Prairie Pioneer Buffalo Bill Ranch State Historical Park 124% När alla tre åtgärder gjordes samtidigt jämfört med utgångstexten ökade resultatet av texten med 124%. Det har ifrågasatts huruvida dessa siffror alltid skulle kunna vara applicerbara och så är det givetvis ej, men man kan vara säker på att denna typ av åtgärder ger resultat. robert@magazine.se

HUR SKRIVER MAN? /1 Kort text Sammanfatta i punkter Ha bara ett budskap per mening Strukturera texten hierarkiskt/logiskt Markera viktiga ord med fetstil (ej med färg eftersom det blandas ihop med länkar) Läsarens skummning av text gör att vissa åtgärder bör vidtas för att läsaren ska hitta allt texten innehåller även vid en skumning. robert@magazine.se

HUR SKRIVER MAN? /2 Hjälpsamma rubriker Bara det som syns finns Använd omvänd pyramid - slutsatsen först Betydelsefulla underrubriker Rubriker ska avslöja vad de behandlar. Underrubriker hjälper till med överblicken. En snabb slutsats över innehållet ger också överblick. robert@magazine.se

När man gör text i form av pixelbaserad grafik kan man använda kantutjämning för att få bättre bokstavsformer. I små grader kan det ibland snarare förvärra. Kursiv text är alltid dåligt på bildskärm men kan bli bättre med kantutjämning. robert@magazine.se

SLUTSATSER Texter som gjorts för tryck passar sällan på webben direkt Myndighetssvenska inte bra –långa bakvända meningar med flera satser. Det går att förbättra sig! robert@magazine.se

HUR TYPOGRAFERAR MAN? Ej kursivt (fult) eller understruket (länkar) Fetstil bra Punktuppställningar Skärpa och kantutjämning vid behov Peta i grafikbaserad text för hand Använd ej färgad text (länkar) robert@magazine.se

svart SKAPA ORDNING

STRUKTURMODELLER Hypertext Hierarki Flerval Flöde Frågor och svar Svart låda Det finns olika grundmodeller för att strukturera en webbtjänst. Utgå från någon av dessa, men låt användaren placera vilken information ska placeras var. robert@magazine.se

Hypertext är grunden för webben Hypertext är grunden för webben. Öppet sätt at länka mellan olika information. Betyder att det inte behöver finnas varken början eller slut på webbtjänsten. Användaren kan söka sig vidare till relaterad information fritt efter dennes behov för stunden - låter användaren associera sig fram till informationen. robert@magazine.se

En hierarkisk modell innebär att informationen är hårt indelad efter en logisk struktur med en topp, huvudgrupper, med undergrupper. Modellen gör det lätt för användaren att skapa sig en mental bild över webbtjänsten vilket underlättar navigationen. robert@magazine.se

Informationen är lagd i en viss ordning som användaren måste passera Informationen är lagd i en viss ordning som användaren måste passera. Tvingar läsaren att ha sett en sak innan en annan. Kan användas i pedagogiska sammanhang. robert@magazine.se

En variant som bygger på att man måste svara rätt för att komma vidare En variant som bygger på att man måste svara rätt för att komma vidare. Svarar man fel kommer man tillbaka till frågan eller till hjälp på traven. En pedagogisk modell som ifrågasatts tidigare, men kommit till heders igen i interaktiva medier. robert@magazine.se

Ett typiskt expertsystem Ett typiskt expertsystem. Exempel: Börja med informationen ”jag är sjuk”, svara på frågor om symptom som utesluter sjukdomar och sluta på en trolig diagnos. robert@magazine.se

Användaren vet inte vad den går in i, vet inte var den är när den är där eller var den varit när den kommer ut. Ibland relevant när användaren inte ska behöva engagera sig i strukturen hos information eller funktioner. robert@magazine.se

Metaforer är en typ av strukturer som i grunden är hierarkiska, men bygger på en liknelse med verkligheten. De klassas ofta som väldigt lärbara, men inte så effektiva när man vill att det ska gå fort när man väl lärt sig använda den robert@magazine.se

HUR STRUKTURERA? Låt användarna bestämma strukturen! Givetvis inte utifrån organisationens struktur Kombinationer av modellerna Läs i Roberts artiklar om sätt att göra detta rent konkret. robert@magazine.se

NAVIGATION Runt 7 huvudgrupper/länkar Ett klick till sök, hjälp och karta Länka på rätt sätt. Adressen ska leda rätt Kombinera navigation, position och överblick robert@magazine.se

Exempel på navigationsverktyg. robert@magazine.se

Flikar robert@magazine.se

Exempel på hur man kan märka upp informationen Exempel på hur man kan märka upp informationen. Utropstecknet betyder att det är nytt. robert@magazine.se

robert@magazine.se

svart texten är bortglömd FOTOGRAFIET ÄR SAKNAT

BILDER Skarpa och tydliga Beskär fram det viktiga Symbolbilder Snabba = små och bredd och höjd spec. Effekter förvirrar Bilder används för lite på webben. Datorbaserad information kan lätt bli stel och död utan bilder av verkligheten. Gör bilder bättre med skärpa och beskärning (se kommande bilder). Även symboler är bilder - kombinera symboler med text och använd entydiga symoler (nästan omöjligt) robert@magazine.se

Den stora bilden ska användas på webben Den stora bilden ska användas på webben. Den lilla varianten (i förutbestämd bredd) ger inte så mycket eftersom det är så smått och grötigt att det inte tillför så mycket information. Genom att beskära fram delar ur bilden och ge den en lämplig förminskning kan man nå ett avsevärt mycket bättre resultat. robert@magazine.se

På bildskärm behöver fotografier och annan pxelbaserad grafik skärpas upp (I Photoshop kan man använda Oskarp mask med Radie 0,3 , Tröskel 7 och en Mängd på cirka 150%) robert@magazine.se

FÄRG Länkfärg Symbolik Indelning av sidan Navigation Färgsatt text Kulöromfång Färgblindhet robert@magazine.se

svart texten är bortglömd KONKRETA TIPS

NO FRAMES! Bokmärken fungerar ej Titel fungerar ej URL visas ej Utskrifter blir ofta fel Rullningslister tar plats och stör Det finns många skäl att undvika frames på webben robert@magazine.se

VALSITUATIONER Metafor/Knappar Snabb/Effektfull Upplevelse/Nytta Titta/Interagera Profil/Experimentell Generell/Personanpassad Erfaren/Oerfaren Öppen/Teknikkrav Man ställ inför många valsituationer när man ska bygga webb. Man kan inte få allt på en gång.Om du väljer i alla av ovanstående alternativ blir det lättare att leva upp till de målen när du ska bygga webben. robert@magazine.se

ARBETSGÅNGEN 1 Behovsanalys 2 Prioritering 3 Informationsstrukturering 4 Utformning av Gränssnitt 5 Interaktionsprototyp 6 Genomförande 7 Testning 8 Drift 9 Utvärdering robert@magazine.se

VERKTYG Strukturskisser Dispositionsdesign Interaktionsprototyper Lapptest Video REAL Större användartester Läs mer på www.magazine.se/webbdesign robert@magazine.se

VAD GER FRAMGÅNG? Leva upp till läsarens förväntan Relevant innehåll Nytta och mervärde! Vara nära läsaren Innehåll anpassat till webben Delaktighet hos användaren Varje situation är olika. Och det viktigaste för framgång enligt vår erfarenhet är att skapa relevans för läsaren. En webbtjänst är inte relevant och den är svåranvänd, tillför lite mervärde till innehållet, har ointressant eller lågkvalitativ text eller bildinnehåll. Designen spelar en avgörande roll. Men på webben är design mer än yta - det är ett verktyg. robert@magazine.se

T I D D TEKNIK FÖR FRAMGÅNG Skiljer design, teknik och innehåll Enkel att använda Tillåter interaktivitet Lätt att bygga ut och förändra I D D Flexibilitet och möjligheter är ledorden när magazine bygger tekniska lösningar. robert@magazine.se

RESURSER FÖR FRAMGÅNG Dedicerad personal Både informations- och teknikkunniga Satsa på förarbetet Vad händer när man webben växer - använd publiceringssystem Utvärdera och bygg om vid behov - webben lever De flesta avsändare av tidningar på webben inser inte att personella resurser är minst lika avgörande på webben som när man arbetar med tryckta medier. Det är många webbtjänster som faller med att man inte lyckas hålla dem vid liv och det är lätt att tänka sig vad som händer när det sker med en tidning som bygger på att materialet underhålls och fylls på i en strid ström. Att välja en publiceringsmodell som är möjlig att arbeta i i kombination med att uppfylla läsarnas önskemål är ett måste. Läs mer om modellerna senare i detta dokument. Många projekt drivs ur ett ekonomiskt eller ännu oftare - rent tekniskt perspektiv. Det har visat sig bakvänt i många fall. Det är i slutändan information, nytta och nöje som avgör framgången. Tekniken måste vara ett stöd för detta, men inte drivkraft eller vägvisare. robert@magazine.se

VILKA ÄR PROBLEMEN? Kunderna fast i traditionellt tänkande Blir ett sidoprojekt - liten budget Tro om att det går automatiskt Tro om att parallell publicering finns Många webbyråer upplever följande problem i projekten. robert@magazine.se

KRAV PÅ INNEHÅLLET Text (läsning sker annorlunda) Bild (låg upplösning och litet format) Designen och layout (begränsad) Designen mer än estetik och informationsförmedling Webben ställer nya krav - ta chansen att ta hänsyn till dem och nå ett bättre resultat. robert@magazine.se

VAD KRÄVS? Utnyttja webbens styrkor och funktioner Ta hänsyn till webbens svagheter Avsätt arbete speciellt för webben Nytta och mervärde Vad krävs för att skapa en bra webbtjänst? ”Content is king” har någon sagt och det stämmer så klart, men även sättet att presentera och anpassa innehållet är avgörande. Utnyttja så mycket som möjligt av webbens styrkor för att skapa en så nyttig webbtjänst som möjligt. Ta hänsyn till webbens svagheter och tro inte att samma saker som fungerar I en trycksak är intressant för en webbanvändare. Lägg ned jobb på att bearbeta det som ska publiceras på webben och skapa material och funktioner som är unika för webbutgåvan. robert@magazine.se

FRAMTIDEN? Bättre mediaanpassning Personliga tjänster Hård nischning Nya finansieringssätt Samband Webbtjänster drivna som en tidning - med ett redaktionellt nyhetsdriv. robert@magazine.se

CYKELSÄLLSKAPET Gissa och behovspröva Testa Omvärdera Dra nytta av erfarenheter Att bygga webb går i cykler. Det är bara att börja om när en fas är färdig. Hela webbtjänsten blir aldrig färdig - bara nyare och bättre. robert@magazine.se

svart - mellan dröm och verklighet HUR ARBETAR MAGAZINE?

TEKNIKEN VI ANVÄNDER Eget databasbaserat publiceringssystem byggt kring moduler Öppen lösning Flexibelt att bygga om Standardkomponenter Standardkommunikation Bygger på SQL-ODBC och komponenter robert@magazine.se

svart - mellan dröm och verklighet www.magazine.se/ webbdesign

robert ryberg magazine ab repslagargatan 15 118 46 stockholm +46 8 462 27 45 +46 70 723 00 84 robert@magazine.se www.magazine.se Kontakta gärna mig om du vill diskutera mer , se hur vi har arbetat eller se den teknik vi byggt upp och använder I våra projekt eller kanske anlita oss för att skapa eller producera en tidning på webben. /Robert robert@magazine.se

svart