of 56 /56

svart - mellan dröm och verklighet

  • Author
    jiro

  • View
    56

  • Download
    3

Embed Size (px)

DESCRIPTION

svart - mellan dröm och verklighet. www.magazine.se/ webbdesign. svart texten är bortglömd. ATT UTFORMA GRÄNSSNITT. DU BESTÄMMER INTE. Användaren bedömer, väljer och använder efter förmåga Enda vägen till framgång är att anpassa sig till användaren Webben saknar i princip regler - PowerPoint PPT Presentation

Text of svart - mellan dröm och verklighet

  • svart - mellan drm och verklighetwww.magazine.se/ webbdesign

  • svart texten r bortglmdATT UTFORMA GRNSSNITT

  • DU BESTMMER INTEAnvndaren bedmer, vljer och anvnder efter frmgaEnda vgen till framgng r att anpassa sig till anvndarenWebben saknar i princip reglerAnvndaren lr sig inte av dig utan av andra!

  • Designen vergr frn estetik och informationsverfring till att vara ett verktyg.Webbsidan innehller ofta 50% verktyg och bara 50% informationWebbdesign r mer likt industridesign n klassisk grafisk designWEBBDESIGN EJ ESTETIK

  • IDAG SKA VI TALA OMVi definierar grnssnittetArgument fr att bry sigSkilja p webbdesign och grafisk formHur kan man arbeta fr att lyckas?Ta fram en checklista tillsammans Gra en hel del vningar

  • ETT BRA GRNSSNITT /1Ska vara konsistentSka vara konventionelltEtt verktyg att anvndas

  • VAD R ETT GRNSSNITT?KommunikationIn- och utmatningterkopplingGrafisk design Grafiskt grnssitt

  • ETT BRA GRNSSNITT /2Datorn ska inte verka dumAnvndaren ska inte knna sig dum

  • ETT BRA GRNSSNITT /3G snabbt att lraHjlpa anvndaren att utfra och frstGe f misstag

  • ETT BRA GRNSSNITT /4Trygg milj braVisa mjligheterna

    Allt fr att maximera anvndbarheten!

  • VIKTIGASTverblicknavigationposition

  • VIKTIGTavsndaredateringkontakt

  • TYPER AV INTERAKTIONKommandoInmatningManipulationterkoppling

  • LITE ATT TNKA PEffektivitet kontra lrbarhetDet som grs ofta ska vara enklastDet r lttare att knna igen n att komma ihg.

  • svart texten r bortglmdTEXTEN R BORTGLMD

  • Texten r ett verktyg ocks.Mste visa rtt och avslja.Hjlp lsaren att fatta rtt lsbeslut.FUNKTIONELL TEXT INFORMATIV TEXT

  • TEXT R SVRTLsaren r otligInformationsmngden r enormDet r ltt att g drifrnTypografin styrs av anvndaren

  • WEBBTEXT R SPECIELLTBeskaren vill inte lsa utan skummarBeskaren letar efter informationBeskaren ser texten fre grafikenText r mycket hg grad av abstraktionLshastigheten r lg

  • LSHASTIGHETTal: 120 ord/minDatorskrm: 150 ord/minSkrivmaskinstext: 200 ord/minOrdbehandlad utskrift: 320 ord/minProfessionellt typograferad text: 460 ord/minKlla: Retrac

  • ETT FALLWebb fr naturupplevelser i NebraskaTestad utifrn att utfra en uppgift fel som anvndaren gr hur mycket man minns av webbtjnstenhur man minns strukturen subjektiv knsla fr webbtjnsten

  • ORIGINALTEXTENNebraska 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).

  • HALVERAD LNGDIn 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%

  • PUNKTERNebraska 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%

  • OBJEKTIV TEXTNebraska 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%

  • ALLT P EN GNGIn 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%

  • HUR SKRIVER MAN? /1Kort textSammanfatta i punkterHa bara ett budskap per meningStrukturera texten hierarkiskt/logisktMarkera viktiga ord med fetstil (ej med frg eftersom det blandas ihop med lnkar)

  • HUR SKRIVER MAN? /2Hjlpsamma avsljande rubrikerRubriker rakt p sakBara det som syns finnsAnvnd omvnd pyramid slutsatsen frstBetydelsefulla underrubriker

  • SLUTSATSERTexter som gjorts fr tryck passar sllan p webben direkt.Myndighetssvenska inte bra lnga bakvnda meningar med flera satser.Det gr att frbttra sig!

  • svart texten r bortglmdATT VISA HNSYN

  • TESTATesta med 3 7 anvndareGr det i flera faserGr det flera gngerEnkla tester rcker

  • HUR STRUKTURERA?Strukturera givetvis inte utifrn avsndarorganisationens strukturBestm dina ml med webbplatsenLt anvndarna bestmma strukturen!

  • HUR TYPOGRAFERAR MAN?Ej kursivt (fult) eller understruket (lnkar)Fetstil braPunktuppstllningarSkrpa och kantutjmning vid behovPeta i grafikbaserad text fr handAnvnd ej frgad text (lnkar)

  • svartSKAPA ORDNING

  • STRUKTURMODELLERHypertextHierarkiFlervalFldeFrgor och svarSvart lda

  • Flikar

  • svart texten r bortglmdFOTOGRAFIET R DLIGT ANVNT

  • BILDERLika viktigt som textenSkarpa och tydligaBeskr fram det viktigaSymbolbilderSnabba = sm och bredd och hjd spec.Effekter frvirrar

  • FRGLnkfrgSymbolikIndelning av sidanNavigationFrgsatt textKulromfngFrgblindhet

  • svart texten r bortglmdKONKRETA TIPS

  • NAVIGATIONRunt 7 huvudgrupper/lnkarEtt klick till sk, hjlp och kartaLnka p rtt stt.Adressen ska leda rttKombinera navigation, position och verblick

  • NO FRAMES!Bokmrken fungerar ejTitel fungerar ejURL visas ejUtskrifter blir ofta felRullningslister tar plats och strSvranterat fr anvndaren

  • VALSITUATIONERMetafor / KnapparSnabb / EffektfullUpplevelse / NyttaTitta / InterageraProfil / ExperimentellGenerell / PersonanpassadErfaren / Oerfarenppen / Teknikkrav

  • ARBETSGNGEN1 Behovsanalys2 Prioritering 3 Informationsstrukturering4 Utformning av Grnssnitt och funktonell text5 Interaktionsprototyp6 Genomfrande7 Testning8 Drift9 Utvrdering

  • VERKTYGStrukturskisserDispositionsdesignInteraktionsprototyperLapptestVideoREALStrre anvndartester

  • VAD GER FRAMGNG?Leva upp till lsarens frvntanRelevant innehllNytta och mervrde!Vara nra lsarenInnehll anpassat till webbenDelaktighet hos anvndaren

  • TEKNIK FR FRAMGNGSkiljer design, teknik och innehllEnkel att anvndaTillter interaktivitetLtt att bygga ut och frndra TIDD

  • RESURSER FR FRAMGNGDedicerad personalBde informations- och teknikkunniga Satsa p frarbetetVad hnder nr man webben vxer - anvnd publiceringssystemUtvrdera och bygg om vid behov - webben lever

  • VILKA R PROBLEMEN?Kunderna fast i traditionellt tnkandeBlir ett sidoprojekt - liten budgetTro om att det gr automatisktTro om att parallell publicering finns

  • KRAV P INNEHLLETText (lsning sker annorlunda)Bild (lg upplsning och litet format)Designen och layout (begrnsad)Designen mer n estetik och informationsfrmedling

  • CYKELSLLSKAPETGissaBehovsprvaTestaSjsttOmvrderaDra nytta av erfarenheter

  • svart - mellan drm och verklighetHUR ARBETAR MAGAZINE?

  • VANLIGASTE FELENDlig verblickEj anvndaranpassad strukturPapperstexterOhjlpsam funktionell textDlig testning

  • SAMMANFATTNINGSe designen som ett verktygLt anvndaren bestmmaTestaWebbanpassa textmaterialetSkilj p funktionell och informativ text

    Hr hittar du bra lnkar och frdjupningJo visst finns det en mngd text p webben, men man har glmt bort att anpassa den till mediet.Det nda sttet att lta anvndarna n det du vill ge dem r att anpassa informationen och frpackningen till anvndarnas beteenden och frvntningar. Det gr man nstan uteslutande bst genom testning och att dra erfarenheter av andras tester.Indutridesigners r vara vid att formge fr anvndning och inte som grafisk formgivare som bara r vana vid design fr informationsfrmedling.

    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 sjlva informationen som man vill frmedla.Om du ger anvndaren allt detta s r basbehoven tillfredstllda . Sedan r det dags fr design och genomarbetat innehll.Ls mer om detta i Roberts artiklar p www.magazine.se/webbdesignEtt frhllande som man mste vlja sida i. Det r svrt att kombinera dem samtidigt. r det snabbt och effektivt att anvnda r det oftast svrare att lra sig.

    Tnk ocks p att det r lttare att knna igen ngot n att exakt komma ihg hur det sg ut eller skulle genomfras.Jo visst finns det en mngd text p webben, men man har glmt bort att anpassa den till mediet.Det r skillnad p text som mnad att frmedla information och text som r mnad att hjlpa anvndaren att hitta texten som ska frmedla information (funktionell text). Den funktionella texten mste utformas ytterst varsamt.Att presentera text p webben stter p mnga problem eftersom kommunikationen sker p anvndarens villkor anvndaren.Att presentera text p webben stter p mnga problem eftersom kommunikationen sker p anvndarens villkor anvndaren.Siffror frn det amerikanska underskningsfretaget Retrac.Ls mer om detta test p http://www.useit.comNr texten halverades i lngd jmfrt med utgngstexten kade resultatet av texten med 58%.Nr texten punkades upp jmfrt med utgngstexten kade resultatet av texten med 47%.Nr texten gjordes objektiv jmfrt med utgngstexten kade resultatet av texten med 27%.Nr alla tre tgrder gjordes samtidigt jmfrt med utgngstexten kade resultatet av texten med 124%. Det har ifrgasatts huruvida dessa siffror alltid skulle kunna vara applicerbara och s r det givetvis ej, men man kan vara sker p att denna typ av tgrder ger resultat.Lsarens skummning av text gr att vissa tgrder br vidtas fr att lsaren ska hitta allt texten innehller ven vid en skumning.Rubriker ska avslja vad de behandlar. Underrubriker hjlper till med verblicken. En snabb slutsats ver innehllet ger ocks verblick.Jo visst finns det en mngd text p webben, men man har glmt bort att anpassa den till mediet.Man stll infr mnga valsituationer nr man ska bygga webb. Man kan inte f allt p en gng.Om du vljer i alla av ovanstende alternativ blir det lttare att leva upp till de mlen nr du ska bygga webben.Ls i Roberts artiklar om stt att gra detta rent konkret.Nr man gr text i form av pixelbaserad grafik kan man anvnda kantutjmning fr att f bttre bokstavsformer. I sm grader kan det ibland snarare frvrra. Kursiv text r alltid dligt p bildskrm men kan bli bttre med kantutjmning.Det finns olika grundmodeller fr att strukturera en webbtjnst. Utg frn ngon av dessa, men lt anvndaren placera vilken information ska placeras var.Hypertext r grunden fr webben. ppet stt at lnka mellan olika information. Betyder att det inte behver finnas varken brjan eller slut p webbtjnsten. Anvndaren kan ska sig vidare till relaterad information fritt efter dennes behov fr stunden - lter anvndaren associera sig fram till informationen.

    En hierarkisk modell innebr att informationen r hrt indelad efter en logisk struktur med en topp, huvudgrupper, med undergrupper. Modellen gr det ltt fr anvndaren att skapa sig en mental bild ver webbtjnsten vilket underlttar navigationen. Informationen r lagd i en viss ordning som anvndaren mste passera. Tvingar lsaren att ha sett en sak innan en annan. Kan anvndas i pedagogiska sammanhang.

    En variant som bygger p att man mste svara rtt fr att komma vidare. Svarar man fel kommer man tillbaka till frgan eller till hjlp p traven. En pedagogisk modell som ifrgasatts tidigare, men kommit till heders igen i interaktiva medier.

    Ett typiskt expertsystem. Exempel: Brja med informationen jag r sjuk, svara p frgor om symptom som utesluter sjukdomar och sluta p en trolig diagnos.

    Anvndaren vet inte vad den gr in i, vet inte var den r nr den r dr eller var den varit nr den kommer ut. Ibland relevant nr anvndaren inte ska behva engagera sig i strukturen hos information eller funktioner.Metaforer r en typ av strukturer som i grunden r hierarkiska, men bygger p en liknelse med verkligheten. De klassas ofta som vldigt lrbara, men inte s effektiva nr man vill att det ska g fort nr man vl lrt sig anvnda den Exempel p navigationsverktyg.Exempel p hur man kan mrka upp informationen. Utropstecknet betyder att det r nytt.Bilder anvnds fr lite p webben. Datorbaserad information kan ltt bli stel och dd utan bilder av verkligheten. Gr bilder bttre med skrpa och beskrning (se kommande bilder). ven symboler r bilder - kombinera symboler med text och anvnd entydiga symoler (nstan omjligt)Den stora bilden ska anvndas p webben. Den lilla varianten (i frutbestmd bredd) ger inte s mycket eftersom det r s smtt och grtigt att det inte tillfr s mycket information. Genom att beskra fram delar ur bilden och ge den en lmplig frminskning kan man n ett avsevrt mycket bttre resultat.P bildskrm behver fotografier och annan pixelbaserad grafik skrpas upp (I Photoshop kan man anvnda Oskarp mask med Radie 0,3 , Trskel 7 och en Mngd p cirka 150%)Det finns mnga skl att undvika frames p webbenMan stll infr mnga valsituationer nr man ska bygga webb. Man kan inte f allt p en gng.Om du vljer i alla av ovanstende alternativ blir det lttare att leva upp till de mlen nr du ska bygga webben.Ls mer p www.magazine.se/webbdesignVarje situation r olika. Och det viktigaste fr framgng enligt vr erfarenhet r att skapa relevans fr lsaren. En webbtjnst r inte relevant och den r svranvnd, tillfr lite mervrde till innehllet, har ointressant eller lgkvalitativ text eller bildinnehll. Designen spelar en avgrande roll. Men p webben r design mer n yta - det r ett verktyg.Flexibilitet och mjligheter r ledorden nr magazine bygger tekniska lsningar.De flesta avsndare av tidningar p webben inser inte att personella resurser r minst lika avgrande p webben som nr man arbetar med tryckta medier. Det r mnga webbtjnster som faller med att man inte lyckas hlla dem vid liv och det r ltt att tnka sig vad som hnder nr det sker med en tidning som bygger p att materialet underhlls och fylls p i en strid strm.

    Att vlja en publiceringsmodell som r mjlig att arbeta i i kombination med att uppfylla lsarnas nskeml r ett mste. Ls mer om modellerna senare i detta dokument.

    Mnga projekt drivs ur ett ekonomiskt eller nnu oftare - rent tekniskt perspektiv. Det har visat sig bakvnt i mnga fall. Det r i slutndan information, nytta och nje som avgr framgngen. Tekniken mste vara ett std fr detta, men inte drivkraft eller vgvisare.Mnga webbyrer upplever fljande problem i projekten.

    Webben stller nya krav - ta chansen att ta hnsyn till dem och n ett bttre resultat.Att bygga webb gr i cykler. Det r bara att brja om nr en fas r frdig. Hela webbtjnsten blir aldrig frdig - bara nyare och bttre.