Don t make me think Steve Krug
|
|
- Sebastian Hellström
- för 7 år sedan
- Visningar:
Transkript
1 Don t make me think Steve Krug Martin Lindqvist
2 Användbarhet och tillgänglighetsbegreppet
3 Användbarhet -förmåga hos en produkt att kunna användas för ett visst syfte eng. usability Verkningsfullhet (Mål) Effektivitet Tillfredställdhet Med användbarhet menas hur väl användaren kan använda en produkt för att nå ett visst syfte på ett effektivt och tillfredsställande sätt. - lätt att använda - intuitivt och lätt att förstå J f r Funktionalitet (bestämd uppgift för ett visst syfte)
4 Användbarhet i fokus på nätet Produkten (webbplatsen) kan testas och förkastas direkt T.ex. Jakob Nielsen Top ten mistakes in webdesign (innehåller länkar till fler tio-i-topp-listor) och Steve Krug
5 Tillgänglighet Förutsättningen för att en webbplats ska vara tillgänglig för alla är att den är tekniskt uppbyggd på rätt sätt. Funktionshinder Syn Hörsel Fysiska Kognitiva, neurologiska Oberoende av vilken teknik användaren vill använda. Kan en sida vara helt tillgänglig?
6 Tillgänglighet i fokus på nätet Web Accessibility Initiative (WAI) Web Accessibility Initiative - web för alla (svensk sammanfattning) HANDISAM 24timmarswebben Språknämndens Webb för alla
7 Förutsättningar Webben, ett ungt medium
8 Olika medier olika förutsättningar Skärmens och tidningens olika egenskaper Bejaka likheterna OCH skillnaderna hos respektive medium, överför inte bara det ena mediet till det andra Fasta gränser eller oändlighet Fasta sidor är överblickbara och fasta i sin layout så inte på webben ( Navigeringen ställer krav på designen I tryckta medier har vi en klar uppfattning om hur vi tar oss fram och tillbaka i ett material på webben kan vi flytta oss runt i informationen. Navigeringen styr alltmer hur vi upplever en site. Nytt eller gammalt, anpassat till mediet?
9 Olika medier olika förutsättningar Tekniska begränsningar styr mer Trycksaker är överlägsna webben vad gäller upplösning, överblick osv. Men webben närmar sig och har dessutom andra egenskaper som inte trycksaker har. Interaktiviteten är webbens styrka Webbmediet tillåter användaren att göra saker egna inställningar, egna vägar till fördjupning, kontakt och dialog med den som producerat informationen osv. (
10 Användaranpassning Vem ska använda vår produkt?
11 Användaren Målgrupp Vi gör antaganden vad gäller de förutsättningar vår målgrupp har. T.ex vilken teknik de använder, tidigare erfarenheter, deras syfte med att besöka vår sida Vårt mål Att de ska få sina behov tillfredsställda (i allafall så många som möjligt)
12 Målgrupp - människa Trygghet Don t make me think. Vi vill inte att användaren lägger ner energi på fel saker. Presentera ert material på ett sätt som användaren finner logiskt. Distraktioner Undvik material som tar uppmärksamhet från det ni vill kommunicera. T.ex. onödiga animationer
13 3 Facts of life Steve Krug / The usability expert
14 Fact of life #1 Vi läser inte sidor. Vi scannar dem. Vi har oftast bråttom. Vi vet att vi inte behöver läsa allt på sidan. Vi är duktiga på att göra detta
15 Vi gör inte optimala val Vi har oftast bråttom. Straffet vid felval är lågt Att gissa är roligare Fact of life #2
16 Fact of life #3 Vi tar inte reda på hur saker egentligen fungerar. Vi provar oss fram. Det är inte viktigt för oss Om vi hittar något som fungerar så håller vi oss till det
17 Navigationen Hur man tar igen ett par hundra års försprång
18 Navigation - bakgrund Varför behöver vi tänka på navigationen? Omfattningen vad/hur mycket döljer sig på en site? Platsen hur relaterar vi till websiter? Ett stöd för besökarens vistelse I jämförelse med t.ex. tryckta medier saknar webben en del egenskaper som ger oss trygghet och kunskap
19 Navigation - bakgrund Berättar för besökaren vad som finns på siten Förklarar användandet av siten Användaren skall ju egentligen inte behöva bry sig om vad som skall klickas på först eller om något är en länk eller inte... Säger en hel del om avsändaren! En sladdrig website som är dåligt uppdaterad, som har döda länkar, är svår att förstå är förödande för varumärket
20 Navigation i praktiken Varje enskild sida skall kunna svara på: Vad är det här för sajt? Vilken sida är jag på? Vilka sektioner erbjuder sajten? Vad har jag för alternativ på denna sida? Vart i helheten befinner jag mig? Hur söker jag?
21 Navigation i praktiken Konventioner är ett bra hjälpmedel SiteID avsändaren, vem är det? Huvudavdelningar vilka är de huvudsakliga avdelningarna på siten? Underavdelningar submenyer för respektive avdelning, beroende på relevans och mängd Markera I menyn vad som är valt, t.ex med färg. Konsekvent navigation Samma grundnavigation genom HELA siten
22 Navigation i praktiken Vad döljer sig bakom länken? Pop-up? Word? PDF? Ny site? 1,3 Mb bild? Var tydlig! Vilka länkar är viktiga? Alla länkar är inte lika viktiga. Rangordna! Länka alltid hem! Loggan som länk Komplettera med vanlig länk Hur hittar jag tillbaka? Alla kommer inte från index-sidan Brödsmulor Du är här, den här vägen har du gått
23 Du är här! Navigation i praktiken Markera i navigationen var användaren är Varje sida bör ha ett namn Sidan användaren kommer till efter klick bör ha samband med det användaren just klickat på Glöm inte <title> Om användaren vill bokmärka sidan
24 Innehållet Påverkas givetvis också av mediet
25 Teknik som vi bör ta hänsyn till Vilken teknik och inställningar har användaren? Vid problem kommer de att uppfatta att något är fel med sidan ni gjort. Vilken uppkoppling har de? Modem, ISDN eller bredband? Upplösning och antal färger på skärm? Ok att de med låg upplösning får scrolla?
26 Teknik som vi bör ta hänsyn till Vilka webbläsare? Måste det se exakt likadant ut i alla? Vilket OS (operativsystem)? PC Mac och andra?
27 Skriv enkelt news.bbc.co.uk Textens utformning Använd nya stycken istället för radbryt och indrag news.bbc.co.uk Dela upp långa sidor i delar istället för att scrolla. Eller? Dela upp i delsidor:
28 Textens utformning Tänk på utskriftsmöjligheterna Gör en printervänlig version av texten om det så krävs Hjälp vid långa texter Ibland måste texten bli lång men hjälp då till med extra navigering.
29 Storleken Fysisk storlek (pixlar) Datamängd (bytes) Bilder på webben Kvaliteten Upplösning (72/96 dpi) Komprimenringsform Färgerna Indexerad palett (256 färger) True Colors (tusentals färger) Glöm webbpaletten!
30 Bilder på webben Komprimeringen JPG (foton) GIF (grafik) PNG (bra, men kolla webbläsarna!) Utskriften Styrs av användarens utrustning Blir aldrig bättre än upplösningen (tips: länka till högupplöst bild) Tänk på de med synsvårigheter! Även synskadade surfar (inte bara blinda!) ALT-attributet viktigt
31 Tillgänglighet för alla Tydliggör icke-text-innehåll Grafik ska ha ALT-attribut Navigationsgrafik bör ha en textversion Använd stylesheets för layout Många synskadade har egna stylesheets Var försiktig med färger, arbeta med kontraster Tänk på synskadade och färgblinda Mer info:
32 Visuell design för webb Det sista steget i vår designprocess detaljarbetet
33 Skissa Det absolut viktigaste vid design av alla dess slag: SKISSA MYCKET OCH OFTA!
34 Tänk på ytan Större än 800x600 pixler? Eeeh... Kolla med målgruppen Sidlayout Var konsekvent Bestäm dig för ett upplägg och avvik inte för mycket Ställer krav på förarbete och planering skissa mycket! Håll nere bruset less is more Webben är ett knepigt medium gör det inte svårare än nödvändigt Försök att hålla informationen till det viktigaste och undvik konflikter om besökarens uppmärksamhet
35 Arbeta med tydliga visuella hierarkier Störst först Uppifrån och ner ingen scrollar frivilligt Från vänster till höger i väst! Grupperingar och likheter Tydliga avgränsningar mellan ytor Tänk på kontrasterna. Sidlayout
36 Arbeta med tydliga visuella hierarkier Sidlayout
37 Sidlayout Exempel på kontraster
38 Objektsmetaforer Skrivbord (datorns skrivbord) Mappar Produkter Processmetaforer Rutor Tidslinjer (t.ex. film och teater) Beteendemetaforer Knappar Klicka Dra Peka Metaforer
39 Färger Färger grupperar Använd gärna för att förstärka navigation Förlita dig inte på att det räcker med enbart färg dock Färger får saker att stå ut Ställ färger emot varandra Olika nyanser/färger kommunicerar olika saker Färg har innebörd som kan spelas på Var sansad när du väljer färger Skrik inte för att göra dig hörd. Ofta behövs inte stora färgskillnader för att åstadkomma skillnader i hur din information uppfattas...
40 Ikoner Var försiktiga och fråga användarna om hur saker och ting uppfattas! Tänk på kulturella skillnader Efterliknande ikoner Ikoner som speglar en direkt verklighet Exempelikoner Ikoner med en mer indirekt koppling Symboliska ikoner Visar en mer abstrakt följdeffekt av något Egendesignade ikoner Personliga och svårttolkade om man inte delar kontexten
41 Typografi Typsnitt för tryck inte alltid lika bra för webb Trycksak: 1200 dpi, webb: dpi Vissa typsnitt fungerar ok t.ex. Times och Helvetica/Arial Standard för text på webb: Georgia och Verdana Enormt beroende av användarens utrustning Typsnitten måste finnas installerade på läsarens dator! Vid speciallösningar: gör texten som bilder (OBS: grafik väger mer än text)
42 Typografi Olika system och webbläsare visar samma typsnitt olika
43 Typografi Storleken det STORA problemet Samma storlek kan se helt annorlunda ut för två användare Ange helst i em inte i punkter eller pixlar em är ett relativt mått som tar hänsyn till varje användares egna browserinställningar punkter är kvarlevor från tryck där layouten är fix, men är mycket osäkra mått på webben som ju är mycket mer dynamisk och osäker px är en kompromiss: texten blir lika stor oavsett upplösning, men den utesluter de som vill speca storleken själva (t.ex. synskadade)
44 Typografi Antikvor Mjuka bokstavsformer, stora skillnader i streckens tjocklek, har fötter (serifer) Georgia, Times, serif Oftast i längre textstycken (s.k. brödtext) eller linjärer? Raka bokstavsformer, utan fötter (serifer) Verdana, Helvetica, Arial, san-serif Ofta i rubriker eller kortare textstycken
45 Typografi Radlängd Undvik rader längre eller kortare än tecken Svårt att styra använd div/tabellerför någorlunda kontroll Radhöjd Lättare att styra än radlängden koda i % så blir den relativa effekten oberoende av textstorleken Olika typsnitt kräver olika radhöjder testa! För tätt är inte bra. Inte för glest heller! Avväg utifrån den ungefärliga radlängden för en bra kompromiss
46 Typografi VERSAL eller gemen text? Vi läser inte varje individuell bokstav utan ordbilder VERSALA ord används i undantagsfall, t.ex. i rubriker Justerad text Den jämna vänsterkanten är ett stöd för ögat Vänsterjustering vid längre texter Centrerad text i rubriker eller kortare textstycken Högerjustering mycket sällan
47 Typografi
48 Slutligen Bygg en grundmall för din webbplats där du: Skapar den struktur du vill uppnå, testar det innehåll som kommer att finnas och layoutar hela paketet med hjälp av stylesheets. Kom ihåg, xhtml markerar upp informationen, css designar den. Validerat xhtml grunden Validerat css grunden Testat i aktuella webbläsare När detta är gjort och fungerar bra så har du kommit mycket långt i arbetet med din webbplats och kan enkelt göra kopior som blir dina andra sidor i webbplatsen.
49 Testa på användare Vägen till framgång
50 Fråga dig Målgrupp Vilka tillhör webbplatsens målgrupp? Vilka verktyg (dator, skärm, tillbehör) kan den typiske användaren tänkas ha?
51 Fråga dig Målgrupp Hur finner du webbplatsen(söka, url, gissa) Ges du en tydlig bild av vad du kan göra på webbplatsen Kan du orientera dig på webbplatsen Kan du uppfylla ditt mål? Kan du göra det effektivt? Är du nöjd och belåten med resultatet?
52 Fråga dig Målgrupp Hur finner du webbplatsen(söka, url, gissa)? Ges du en tydlig bild av vad du kan göra på webbplatsen? Kan du orientera dig på webbplatsen? Kan du uppfylla ditt mål? Kan du göra det effektivt? Är du nöjd och belåten med resultatet?
53 Design Är designen konsekvent? Fråga dig Återkommer logotyp, är det en väg hem? Hoppar sidorna? Fungerar textstolek, färg, bakgrunden i kombination med varandra?
54 Fråga dig Navigation Hur har de valt att presentera informationen? Ges flera vägar att nå informationen (exempelvis tematisk struktur allt om släpvagnen här, målgruppsanpassad struktur pensionär klicka här )? Vilka är dessa grepp och varför har man gjort på detta sätt? Går det snabbt och enkelt att navigera på sidan? Får du som användare en känsla av översikt? Är modellen nedan applicerbar på er webbplats?
55 Fråga dig Navigation Vilken slags hjälp får du i form av guider och tips? Fungerar dessa? Är navigationen konsekvent, intuitiv? Vet jag vart jag är i navigationen? Kan jag enkelt ta mig till ingångssidan? Finns sitemap eller index?
56 Fråga dig Bilder/Grafik Hur tunga är bilderna? Högerklicka och kolla! Tillför bilderna som finns något? Har de alternativa texter? Finns animeringar, kan de stängas av?
57 Innehåll Är informationen daterad? Fråga dig Nämns avsändare till texter och bilder? Är det enkelt att skriva ut informationen på sidan? (Finns anpassning för utskrift?) Finns sökfunktion, fungerar den? När uppdaterades sidan senast? Finns kontaktuppgifter till avsändaren lätt tillgängligt?
58 Slutligen Validera Följer sidan den standard den som anges i DOCTYPE? Testa att validera den. Använd sunt förnuft Ert eget Och hos de som testar er produktion
behövs för enhetlighet, tala samma språk, så att användaren kan lära sig och använda det vidare.
1 2 3 Grafisk profil reglerar grunddragen i utseendet (logga, färger, typsnitt) en helhet skapas Vi ska känna igen oss, vi ska förstå vad som avsändaren vill kommunicera. Kan vara svårt att direkt applicera
Läs merAnvändbarhet för webben MDI, Webb och speciella behov 1
Användbarhet för webben MDI, Webb och speciella behov 1 Hur används webben? Webbsidor läses inte, de skummas! Således, designa för att de ska skommas scanability Vi gör inga optimala val, vi söker något
Läs merFrågor och svar - Diagnostisk prov ht14 - Webbutveckling 1
Frågor och svar - Diagnostisk prov ht14 - Webbutveckling 1 Bilder och optimering --- Vilken upplösning är lämplig för bilder som ska användas på Internet? Sträva efter korta nedladdningstider. 72 ppi/dpi
Läs merFrågor och svar Gränssnittsdesign/Webbutveckling
Frågor och svar Gränssnittsdesign/Webbutveckling Bilder och optimering 1. Vilken upplösning är lämplig för bilder som ska användas på Internet? Sträva efter korta nedladdningstider. 72 ppi/dpi eller 96
Läs merLathund Bygga mallar. Senselogic AB Version 2.3
Lathund Bygga mallar Senselogic AB Version 2.3 Innehållsförteckning 1 Begrepp... 1 1.1 Innehållsyta... 1 1.2 Mallyta... 2 1.3 Layouter... 3 1.3.1 Fliken marginaler... 1.3.2 Fliken Inställningar... 1.3.3
Läs merWebbtillgänglighet. Webbtillgänglighet. World Wide Web Consortium. Web Accessibility Initiative, WAI WCAG 2.0 WCAG 1.0
Webbtillgänglighet Webbtillgänglighet Att göra webbinnehåll så att de är tillgängliga för alla oavsett vilka funktionsnedsättningar man har Att göra webbinnehåll tillgängligt oavsett vilken in- och utmatningsutrustning
Läs merAnpassning av Windows 7 och Word 2010
Anpassning av Windows 7 och Word 2010 Det finns en hel del små förändringar man kan göra för att det ska bli lättare att navigera i datorn, läsa och skriva. Med kortare rader, tydligt typsnitt större avstånd
Läs merAnvändbarhet för webben
Användbarhet för webben Varför är webben extra viktig? Användningen av webbaserade aplikationer ökar mycket kraftigt och håller i vissa fall på att ersätta vanliga datorprogram. Webmail, Kallendrar, uppslagsverk
Läs merAnvändbarhet för webben
Användbarhet för webben Varför är webben extra viktig? Användningen av webbaserade aplikationer ökar mycket kraftigt och håller i vissa fall på att ersätta vanliga datorprogram. Webmail, Kallendrar, uppslagsverk
Läs merKom igång med FrontPage 2003
Kom igång med FrontPage 2003 Skolorna i Kristianstads kommun har inte gemensam licens som med vissa övriga Microsoft-program utan licens måste köpas för varje dator som det ska installeras på. Din tekniker
Läs merTillgänglighetskrav på interaktion och design Dessa krav baseras på WCAG 2.0,
Tillgänglighetskrav på interaktion och design Dessa krav baseras på WCAG 2.0, http://www.w3.org/tr/wcag20/ UPPDRAGSGIVARE: Malmö stad VÅR REFERENS: Andreas Cederbom 08-555 770 64 andreas.cederbom@funkanu.se
Läs merLÄRARHANDLEDNING TILLGÄNGLIGA WEBBSIDOR
UPPDRAGSGIVARE: IT-CENTER VÅR REFERENS: STEFAN JOHANSSON TEL.: 0708-23 10 64 E-POST: stefan.johansson@funkanu.se INNEHÅLL: LÄRARHANDLEDNING TILLGÄNGLIGA WEBBSIDOR _ Funka Nu AB Finnbodavägen 2, 131 31
Läs merAnvändbarhet. Bryt rätt regler. Nils Ehrenberg nils.ehrenberg@mah.se
Användbarhet Bryt rätt regler Nils Ehrenberg nils.ehrenberg@mah.se Agenda Intro till Användbarhet Användbarhet på nätet Exempel Fyra dörrar Inlämningsuppgift Viktigt En skala Subjektivt Användbarhet /
Läs merTillämpad programmering CASE 1: HTML. Ditt namn
Tillämpad programmering CASE 1: HTML Ditt namn 18 [HTML] Din handledare vill se din skicklighet i att använda HTML-koden. Du ska utveckla en webbplats om ditt intresse, inriktning eller gymnasiearbete.
Läs merGrundläggande funktioner i CMS ifrån Argonova Systems, 2011.
Grundläggande funktioner i CMS ifrån Argonova Systems, 2011. Syfte Detta dokument tar upp grundläggande funktioner i Argonova Systems CMS i syfte att förbereda och stödja användaren, vid sidan av och inför
Läs merLinjalens inställningar och formatering i ordbehandling.
SYDSOL Handledning ordbehandling 2000-02-23 Linjalens inställningar och formatering i ordbehandling. Syfte: Beskriva linjalens funktioner i ordbehandling och utformning av ett dokument Skall du lyckas
Läs merWD406F - Interaktiva medier I 7,5hp Moment: Web Usability Inlämningsuppgift 1ab. Wynona Ekesrydh 2010-12-13
Här följer min reflektion över innehållet i Jonathan Lazars bok Web Usability, kapitel 1 2, 6 7. Webbanvändbarhet För att infrastrukturen ska fungera behövs system som på ett enkelt och effektivt sätt
Läs merBygga kurser för mobila enheter
Bygga kurser för mobila enheter NETCOMPETENCE 2017-10-30 Innehåll Inledning... 2 Om Responsive Design och Adaptive Design... 3 Responsive Design... 3 Adaptive Design... 3 Exempel... 4 Tips och rekommendationer...
Läs merPROJEKT: WEBB- OCH INFORMATIONSDESIGN Avvägningar och motiveringar vid gränssnittsdesign av webbsida för PolyPlast+
PROJEKT: WEBB- OCH INFORMATIONSDESIGN Avvägningar och motiveringar vid gränssnittsdesign av webbsida för PolyPlast+ IT-universitetet i Göteborg Interaktionsdesign - Grafiska Gränssnitt 2003-09-17 Deltagare:
Läs merCopy Cat Laboration 4
Laborationsanvisning Copy Cat Laboration 4 Författare: Johan Leitet Version: 1 Datum: 2011-09-19 Inledning Vi kommer på denna laboration fortsätta med CSS och nu finslipa vår sida. Du kommer även att få
Läs merWEBB PRODUKTION. Tillgänglighet och Användbarhet. 2010 Thomas Mejtoft. Thomas Mejtoft 2010-12-13 2
WEBB 2010 PRODUKTION Tillgänglighet och Användbarhet 2010-12-13 2 1 Tillgänglighet och Användbarhet Tillgänglighet (Accessibility) Användbarhet (Usability) 2010-12-13 3 Tillgänglighet och Användbarhet
Läs merSORSELE KOMMUN. Handbok OEW. 28 sept 2012 Mari-Anne Englund Barbro Olofsson. Sorsele kommun Version 2012-09-28, rev 131101 1 (19)
Handbok i OEW 28 sept 2012 Mari-Anne Englund Barbro Olofsson Sorsele kommun Version 2012-09-28, rev 131101 1 (19) Använd det användarnamn och lösenord som du fått. Fungerar det inte hör av dig till Mari-Anne
Läs merINNEHÅLL. Version
INNEHÅLL 1. Om Trosa kommuns grafiska profil och manual Sid 3 2. Kommunvapnet Sid 4 2.1. Form och ursprung Sid 4 2.2. Användning av vapnet Sid 5 2.3. Vapnets färger och varianter Sid 6 2.4. Otillåten användning
Läs merInnehållsförteckning utan ansträngning Word gör jobbet MS Word 2007, 2010 och 2011
Innehållsförteckning utan ansträngning Word gör jobbet MS Word 2007, 2010 och 2011 Lizette Nilsson 2012-05-07 Idag Kort om vår datormiljö Vanliga orsaker till problem Låt MS Word göra jobbet åt dig - Formatmallar
Läs merÄven om man placerar information kolumnvis så kommer all information att visas radvis i PDF-utskriften.
Lathund PDF-modulen Detta är en lathund för hur man ställer in och använder PDF-modulen. Med hjälp av PDF-utskrift kan du enkelt skapa PDF-utskrifter av webbsidor. Denna modul omvandlar text, bild och
Läs merHögskolan i Borås HT10 Webbredaktörsprogrammet distans Formgivning av webbsidor. Projektarbete Solveig Betnér
Högskolan i Borås HT10 Webbredaktörsprogrammet distans Formgivning av webbsidor Projektarbete Solveig Betnér Innehållsförteckning Syfte s. 3 Målgrupp s. 3 Genre s. 3 Funktionalitet s. 4 Prototyper s. 5
Läs merVetenskapliga affischer. Karin Fahlquist
Vetenskapliga affischer Karin Fahlquist En forsknings affisch/poster Sammafatta information eller forskning kortfattat och tilltalande Publicera resultat Skapa diskussion (diskussions underlag) Reklam
Läs merLaboration 3 i kursen Produktion för tryckta medier och webb: Webbplatsproduktion med ett publiceringssystem
Laboration 3 i kursen Produktion för tryckta medier och webb: Webbplatsproduktion med ett publiceringssystem Målsättning Att bygg upp en komplett webbplats i ett publiceringssystem. Platsen ska vara snygg,
Läs merInledning. Innehåll. Inledning
GRAFISK MANUAL 2019 Inledning 2 Inledning Det här är en uppdaterad manual som ska tydliggöra Moderaternas grafiska profil och göra det enkelt att göra rätt. Att den grafiska profilen följs på nationell,
Läs merGrafisk design Varför grafisk design? öka synligheten ge klar affordance stödja en god mappning ge god feedback Varför grafisk design? skapa en smidig interaktion kan göra gränssnittet visuellt mer
Läs merRIKTLINJER KRING ANVÄNDANDE AV GRAFISK PROFIL FÖR ARBETE MED HEMSIDOR OCH TRYCKSAKER
RIKTLINJER KRING ANVÄNDANDE AV GRAFISK PROFIL FÖR ARBETE MED HEMSIDOR OCH TRYCKSAKER DETTA DOKUMENT ÄR ETT KOMPLEMENT TILL NYFÖRETAGARCENTRUM SVERIGES GRAFISKA PROFIL. I DEN GRAFISKA PROFILEN SPECIFICERAS
Läs merHur du gör ditt Gilles hemsida - en liten hjälp på vägen
Hur du gör ditt Gilles hemsida - en liten hjälp på vägen Sidan 2 - Logga in Sidan 3 - Uppbyggnad av en sida Sidan 4 - Infoga länk Sidan 5 - Infoga bilaga Sidan 6 - Infoga bild Sidan 7-8 Vad betyder knapparna
Läs merLogotyp och Grafisk profil för UT Transport i Norr AB
Logotyp: Introduktion UT Transport i Norr AB s logotyp är designad för att på ett tydligare och starkare sätt representera det företag som UT har utvecklats till att bli idag och kommer att bli imorgon.
Läs merInnehållsförteckning. Kurs i MS Office 2010-2013 våren 2013 Word
Kurs i MS Office 2010-2013 våren 2013 Word Innehållsförteckning Office 2013 Översikt... 2 Introduktion till Office 2013 Sv... 2 Gränssnitt med menyflikar... 2 ARKIV fliken Backstage vyn... 2 Flytta/ändra
Läs merFrontpage 2002/XP (2)
Frontpage 2002/XP Frontpage 2002 eller Frontpage XP som det också kallas är ett hemsideprogram där du inte behöver kunna koda som annars är fallet om man gör en hemsida. Att snabbt, enkelt och snyggt kunna
Läs merINTRODUKTION TILL LOGOTYPEN
INTRODUKTION TILL LOGOTYPEN Greppa Näringen logotypen är den officiella avsändaren och vårt viktigaste verktyg. Logotypen har en klar och tydlig form som syns mycket bra i alla sammanhang. För att skydda
Läs merWebbdesign. Fotografiska vann bästa webbsite 2015 i kategorin turism:
Webbdesign Man kan definiera webbdesign som konsten att skapa webbplatser. En webbdesigners uppgift är att välja färger som passar, lägga till bra och rätt funktioner till webbplatsen och sedan se till
Läs merMaterialspecifikationer webb 2014
SYDSVENSKAN CITY NÄRA H I T TA H E M. S E MERAJOBB.SE SYDSVENSKAN WEBBYRÅ Materialspecifikationer webb 2014 www.sydsvenskan-webbyra.se Standardformat Panoramabanner Storlek: 980x240 px Framerate: 18-24
Läs mer1 Detta fält hämtar värdet från den primära adressen på webbplatsen. Kontrollera att den primära adressen stämmer under "Webbplatsinställningar".
Tillgänglighetsanpassning SiteVision För att göra webbplatsen mer tillgänglig i SiteVision har vi samlat några tips. Tipsen gäller hur man kan ställa in centrala inställningar i SiteVision, vilka moduler
Läs merWordpress och Sociala medier av Sanna Ohlander 110308. Guide till hur du skapar och förändrar inlägg och sidor på staffanstorp.se
Guide till hur du skapar och förändrar inlägg och sidor på staffanstorp.se 1 Innehållsförteckning Tänk på! Sid 3 Logga in sid 4 Panel sid 5 Sidor och inlägg 1. Skapa eller redigera en sida eller inlägg
Läs merGrafisk profil för digitala gränssnitt MAJ 2019
Grafisk profil för digitala gränssnitt MAJ 2019 GRAFISK PROFIL FÖR DIGITALA GRÄNSSNITT Inledning Den här grafiska profilen för digitala gränssnitt innehåller riktlinjer för hur Umeå kommuns e-tjänster
Läs merTILLGÄNGLIGHET PÅ WEBBEN KOMMUNIKATIONSENHETEN
TILLGÄNGLIGHET PÅ WEBBEN KOMMUNIKATIONSENHETEN 2016-04-08 Vad är tillgänglighet? Tillgänglighet på webben handlar i grunden om att alla ska kunna tillgodogöra sig innehållet på en webbplats. En tillgänglig
Läs merAnvändarmanual för Content tool version 7.5
Användarmanual för Content tool version 7.5 TM WEB Express AB Manual Content tool 7.5 Sid 2 INNEHÅLLSFÖRTECKNING 1 OM PUBLICERINGSVERKTYGET... 3 1.1 ALLMÄNT... 3 2 ÖVERSIKT... 3 3 ALLMÄNT OM WEBBSIDAN
Läs merAnalys av com hems startsida
IT-Universitetet Interaktionsdesign Grafiska gränssnitt, 6p Göteborg ht 2003 Analys av com hems startsida Björn Nord d00nord@dtek.chalmers.se 1. Innehållsförteckning 1. Innehållsförteckning... 2 2. Inledning...
Läs merUsability & accessibility. Användbarhet & tillgänglighet
Usability & accessibility Användbarhet & tillgänglighet Varför? Det som är bra för funktionshindrade är ofta bra för alla Good will, PR, corporate responsibility Google är blind Lagar och regler Tillgänglighet
Läs merFöreläsning 10: Gränssnitt och webbdesign
Föreläsning 10: Gränssnitt och webbdesign FSR: 6 Att läsa: Kapitel 6 i Rogers et al.: Interaction Design 1501006 Gränssnitt och webb 2 Översikt Gränssnitt historiskt Kännetecken olika gränssnitt Designutmaningar
Läs merSymmetry: Bortsett från menyn har innehållet av sidan viss symmetri när det kommer till videoklippen som är upplagda på sidan.
WorkShop II Checklistor 1.2 Överordnad Struktur Balance: Gränssnittet har just nu viss balans i innehållet, men menyn behöver justeras i förhållande med innehållet samt en fast container för innehållet
Läs merKonverteringsskola Del 3: Vad är användbarhet?
Konverteringsskolans andra del behandlade vikten av att lära känna sina besökare. Vi kommer nu att arbeta vidare med besökarna i åtanke och fokusera på hur pass väl de kan använda webbplatsen. Om webbplatsen
Läs merWord-guide Introduktion
Word-guide Introduktion På det kognitionsvetenskapliga programmet kommer du läsa kurser inom flera olika vetenskapsområden och för varje vetenskapsområde finns ett speciellt sätt att utforma rapporter.
Läs merGrafisk design Varför grafisk design? öka synligheten ge klar affordance stödja en god mappning ge god feedback Varför grafisk design? skapa en smidig interaktion kan göra gränssnittet visuellt mer
Läs merDiabetes.se CMS guide för föreningar. Senast uppdaterad:
Diabetes.se CMS guide för föreningar Senast uppdaterad: 2016 11 28 Innehåll Inledning... 3 Frågor... 3 Logga in... 4 Om Föreningens sidor... 6 Skapa ny sida... 7 Redigera en sida/lägg till information
Läs merBildredigering i EPiServer & Gimp
Bildredigering i EPiServer & Gimp Maria Sognefors 7minds Agenda Teori om bilder Att tänka på när jag fotograferar Föra över bilder från kamera till dator Ladda upp bilder till EPiServer CMS 5 Enkel redigering
Läs merTillgänglighetskrav på teknik Dessa krav baseras på WCAG 2.0, http://www.w3.org/tr/wcag20/
Tillgänglighetskrav på teknik Dessa krav baseras på WCAG 2.0, http://www.w3.org/tr/wcag20/ UPPDRAGSGIVARE: Malmö stad VÅR REFERENS: Andreas Cederbom 08-555 770 64 andreas.cederbom@funkanu.se DATUM: 2009-04-03
Läs merSociala medier för företag
Sociala medier för företag Utbildningen ingår i projektet Helikoopter vilket är ett kompetensutvecklingsprojekt som finansieras av Europeiska socialfonden och genomförs i Coompanion Norr och Västerbottens
Läs merWebbskribent @ Tjörn. Handläggare: Peter Olausson, webbmaster Datum: 2015-03-19. Tjörn Möjligheternas ö
Webbskribent @ Tjörn Handläggare: Peter Olausson, webbmaster Datum: 2015-03-19 Tjörn Möjligheternas ö Grundutbildning för skribenter på hemsidan och/eller intranätet Upplägg: Vi tar en titt på hur hemsidan
Läs merSAMORDNINGSFÖRBUNDEN I ÖSTERGÖTLAND. Grafisk manual. och handledning för Samordningsförbunden i Östergötlands hemsida
SAMORDNINGSFÖRBUNDEN I ÖSTERGÖTLAND Grafisk manual och handledning för Samordningsförbunden i Östergötlands hemsida Uppdaterad nov 2015 Vikten av en grafisk manual Den grafiska profilen är ett snabbt och
Läs mer21/01/2016. Stilmallar. styra utseendet av webbplatsen DEL 1. Karin Fahlquist. index.html. recept.html frukt.html grönsaker.html
Stilmallar styra utseendet av webbplatsen DEL 1 Karin Fahlquist index.html recept.html frukt.html grönsaker.html 1 Samma kod olika utseende Olika exempel om layout: http://www.csszengarden.com/ Stilmallar
Läs merLär dig POWERPOINT. Lars Ericson datorkunskap.com
Lär dig POWERPOINT Lars Ericson datorkunskap.com POWERPOINT D A Programmet Microsoft PowerPoint används till att skapa grafiska presentationer till bildspel, presentationer mm. När du öppnar upp PowerPoint
Läs merAvstämning med Referensgrupp Sprint 11 lnu.se + Mina saker
Avstämning med Referensgrupp Sprint 11 lnu.se + Mina saker 24 november 2009 Bakgrund Ålder: 20, 25 Kön: Kvinna, Kvinna Sysselsättning/utbildning: Marknadsföringsprogrammet, Engelska fristående kurs. Internetvana
Läs merLathund PDF-utskrift. Senselogic AB Version 2.3
Lathund PDF-utskrift Senselogic AB Version 2.3 Innehållsförteckning 1.1 PDF -utskrift... 3 1.1.1 Användningsområde... 3 1.1.2 Inställningar för PDF... 3 Fliken Allmänt... 3 Fliken Kapitel... 3 Fliken Formatmallar...
Läs merATT ARBETA MED VEKTORGRAFIK
ATT ARBETA MED VEKTORGRAFIK Helene Brogeland Vektorgrafik och animation VT 2014 2014-04-29 Inledning Före aktuell kurs hade jag bara en vag uppfattning av innebörden av vektorgrafik och hade aldrig jobbat
Läs merSkillnader mellan design för tryck och webbdesign
Vad är en webbtext? Webbtexter är inte en specifik texttyp i likhet med protokoll, rapporter eller artiklar. Istället kan webbtexter vara precis vilken texttyp som helst, och det enda som förenar dem är
Läs merOn-line produktion TDDC61
On-line produktion TDDC61 Förra veckan Kursupplägg HTML FTP Validering Laboration 1. Deadlines Laborationer: 12/10, kl 08 Lämna in efterhand ni blir färdiga Vi rättar inom 4 arbetsdagar Portfolio, tillfälle
Läs merRiktlinjer kring grafisk profil för arbete med hemsidor och trycksaker
Riktlinjer kring grafisk profil för arbete med hemsidor och trycksaker Riktlinjer för och lokala NyföretagarCentrum Framtagna av i samarbete med s Kvalitetsråd 1 Logotype Logotype s logotype består av
Läs merGrundredigering i Photoshop Elements. Innehåll. Lennart Elg Grundredigering i Elements Version 2, uppdaterad 2012-09-14
Grundredigering i Photoshop Elements Denna artikel handlar om grundläggande fotoredigering i Elements: Att räta upp sneda horisonter och beskära bilden, och att justera exponering, färg och kontrast, så
Läs merManual - ClaroRead Chrome (Premium) artnr 12703
Manual - ClaroRead Chrome (Premium) artnr 12703 Tillägget ClaroRead Chrome installerar du i din Google Chrome webbläsare. Med hjälp av tillägget kan du bland annat läsa upp webbsidor och google docs på
Läs merVarumärket - föreningens hjärta... 3. Logotyp... 4. Logotypens frizon... 5. Deviselement... 6. Profilfärger... 7. Primära färger...
1 Varumärket - föreningens hjärta... 3 Logotyp... 4 Logotypens frizon... 5 Deviselement... 6 Profilfärger... 7 Primära färger... 7 Sekundära färger... 8 Tertiära färger... 9 Typsnitt & typografi... 10
Läs merF15 Tillgänglighet/Accessibility Dagens agenda
F15 Tillgänglighet/Accessibility Dagens agenda Varför bry sig? Vad tjänar jag? WAI Funka Nu WCAG 1, 2 Hjälpmedel Prolog Varför bry sig? En stor del av Sveriges befolkning lider av funktionsnedsättningar
Läs merÖvning (X)HTML 2. Sidan 1 av 7 2010-11-11
Sidan 1 av 7 2010-11-11 Övning (X)HTML 2 Innan du börjar med laborationen ska du se till så att du har öppnat din editor (till exempel Notepad++). I denna editor ska du skriva (X)HTML-kod som du sedan
Läs merGuide till Mynewsdesk Hosted Newsroom - Kom igång och spegla ditt pressrum!
Guide till Mynewsdesk Hosted Newsroom - Kom igång och spegla ditt pressrum! Hur du implementerar ditt Hosted Newsroom I den här guiden kan du läsa hur du skapar ert Hosted Newsroom ert pressrum på er egna
Läs merManual för att publicera på Samarbetsportalen
Manual för att publicera på Samarbetsportalen Ansvar och innehåll I rollen som webbredaktör ansvarar du för att: informationen från din verksamhet är uppdaterad och korrekt, dvs att sidorna granskas med
Läs mer1. Uppdateringsmodul (CMS)
Innehåll 1. Uppdateringsmodul (CMS)... 2 2. Artiklar... 3 2.1 Upprätta din första artikel... 4 2.2 Skapa innehåll i artikeln... 5 2.2.1 RUBRIK I ARTIKELN:... 5 2.2.3 INFOGA BILDER:... 7 2.2.4 CELLER...
Läs merVälkommen på kurs hos RIGHT EDUCATION!
Välkommen på kurs hos RIGHT EDUCATION! När du startar på en ny kurs, börja med att orientera dig i kursupplägget så att du får en uppfattning om vad kursen innehåller. Du har full översikt över kursens
Läs merManual för webbredaktörer. Februari 2018
Manual för webbredaktörer Februari 2018 1 Innehåll Vem gör vad på webben? sid 3 Att komma igång sid 4 Menystruktur sid 5 Skapa en ny sida sid 7 Verktygslådan sid 12 Söka och ändra i en befintlig sida sid
Läs merLathund länkar. Skapa en intern länk som en sida
Lathund länkar SiteVision hanterar enkelt olika typer av länkar: interna länkar (webbsidor som finns på egna webbplatsen) externa länkar (andras webbsidor) länkar till filer/dokument länkar till bilder
Läs merHemsida. Lathund för medlemsföreningar. Funktioner för medlemsföreningar på hemsidan. Syfte med medlemsföreningens sidor
Hemsida Lathund för medlemsföreningar 2016-12-07 Funktioner för medlemsföreningar på hemsidan Varje medlemsförening har en egen sektion på scuf.se Styrelsen kan redigera sin medlemsförenings sidor, skriva
Läs merGrafi sk profi l 1 Eslövs kommun 2011
Grafisk profil Eslövs kommun 2011 1 Innehåll Syftet med en grafisk profil... 3 Vårt stadsvapen... 4 Vår logotyp... 5 Designelement... 6 Våra profilfärger... 7 Logotypen i färg, i svart och i vitt... 8
Läs merManual - Introduktionskurs SiteVision
Manual SiteVision version 5 sidan 1 Manual - Introduktionskurs SiteVision 2019-02-06 Version 5 Innehållsförteckning Logga in 2 Navigering och uppbyggnad 3 Redigera text 6 Om bilder på ale.se 9 Lägga till
Läs merPREMIUM COMAI WEBBKALENDER
1 PREMIUM COMAI WEBBKALENDER 2.0 ADMINISTRATÖR utvecklar och säljer anpassningsbara smartphone 2 Innehåll 1 Inledning... 3 1.1 Terminologi... 3 1.2 Teknisk kravspecifikation... 4 1.3 Behörigheter... 4
Läs merPersonlig uppsats - analys av webbplats
Personlig uppsats - analys av webbplats Grafiska Gränssnitt, IT-universitet ht 2003 Anna Lindvall d00anna@dtek.chalmers.se Innehåll 1 INLEDNING... 3 2 INTRODUKTION... 3 2.1 KORTA FAKTA OM H&M... 3 2.2
Läs merGränsöverskridande samverkan
1 Grafisk Profil Denna grafiska manual är en hjälp för dig som jobbar i eller med Vårdsamverkan Fyrbodal för att skapa en tydlig, enhetlig och konsekvent kommunikation med omvärlden. Vår logga, våra färger
Läs merAtt göra-lappar för digital tillgänglighet
Att göra-lappar för digital tillgänglighet 18 konkreta åtgärder för att: - Göra digitala tjänster enklare, tryggare och mer effektiva - Uppfylla nya lagkrav - Nå fler användare webbriktlinjer.se Vad är
Läs merLATHUND FRONTPAGE 2000
LATHUND FRONTPAGE 2000 RXK Läromedel AB, Riddarplatsen 36 Plan 7 177 30 Järfälla Tel: 08-580 886 00, Fax: 08-580 259 40 www.rxk.se, e-post: info@rxk.se Detta material är författat av RXK Läromedel AB.
Läs merGuide till hur du skapar och förändrar inlägg och sidor på staffanstorp.se
Guide till hur du skapar och förändrar inlägg och sidor på staffanstorp.se 1 Innehållsförteckning Tänk på! Sid 3 Logga in sid 4 Panel sid 5 Sidor och inlägg 1. Skapa eller redigera en sida eller inlägg
Läs merFrontPage Express. Ämne: Datorkunskap (Internet) Handledare: Thomas Granhäll
FrontPage Express I programpaketet Internet Explorer 4.0 och 5.0 ingår också FrontPage Express som installeras vid en fullständig installation. Det är ett program som man kan använda för att skapa egna
Läs merGuide. Webbsidor i Studentportalen. Innehåll. Uppdaterad: 2014-10-07
Guide Eva Pärt-Enander, 2012-12-14 Webbsidor i Studentportalen Uppdaterad: 2014-10-07 Innehåll Webbsidor i Studentportalen... 1 Om webbsidor... 2 Lägg till en webbsida... 2 Lägg till samma webbsida på
Läs merTypo 3 version Utbildningsmaterial för redaktörer. Senast uppdaterad
Typo 3 version 7.6.9 Utbildningsmaterial för redaktörer Senast uppdaterad 2016-10-05 Textsida Textsida och Nyhet Innehåll Nyhet Inloggning s. 4 Behörighet s. 5 Trädet s. 6 Redigera textsida s. 7 Redigera
Läs merInstallation av datafil för lokal lagring av e-post i Microsoft Outlook 2016
Installation av datafil för lokal lagring av e-post i Microsoft Outlook 2016 1. Starta Outlook 2. Gå till Arkiv längst upp till vänster. 3. Se till att fliken Info är markerad. Klicka sedan på Kontoinställningar
Läs merLär dig grunderna i Photoshop Elements 4.0
Lär dig grunderna i Photoshop Elements 4.0 Här får du lära dig hur man flyttar bilder från kameran till datorn, hur man fixar till ett foto, hur man skriver ut bilder och mycket mera. Lycka till! copyright
Läs merKällkritisk metod stora lathunden
Källkritisk metod stora lathunden Tryckt material, t ex böcker och tidningar, granskas noga innan det publiceras. På internet kan däremot alla enkelt publicera vad de önskar. Därför är det extra viktigt
Läs merLathund länkar. Skapa en intern länk som en sida
Lathund länkar SiteVision hanterar enkelt olika typer av länkar: interna länkar (webbsidor som finns på egna webbplatsen) externa länkar (andras webbsidor) länkar till filer/dokument länkar till bilder
Läs merFältstudier. Torsdagen den 13 november K2. Ann Lantz Sinna Lindqvist
Fältstudier Torsdagen den 13 november 15-17 K2 Ann Lantz alz@nada.kth.se Sinna Lindqvist Sinna@nada.kth.se Fältstudier Fält Målgrupp Funktionshinder Design för alla 24-timmars myndigheten Web Accessibility
Läs merGör släktboken enhetlig - använd formatmallar
Gör släktboken enhetlig - 25 använd formatmallar I en lättläst bok märks inte typografin - om den märks stör den! För att på ett enkelt sätt ge din bok enhetlig layout och typografi bör du använda formatmallar.
Läs merLathund skapa och redigera sidor en projektwebb
Lathund skapa och redigera sidor en projektwebb 1. Gå in via redigeringsadressen: https://projektwebbaradmin.lansstyrelsen.se/miljosamverkanskane 2. Skapa sida Navigera till den del av webbplatsen där
Läs merWordpress och Sociala medier av Sanna Ohlander 110319. Guide till hur du skapar och förändrar inlägg och sidor på staffanstorp.se
Guide till hur du skapar och förändrar inlägg och sidor på staffanstorp.se 1 Innehållsförteckning Tänk på! Sid 3 Logga in sid 4 Panel sid 5 Sidor och inlägg 1. Skapa eller redigera en sida eller inlägg
Läs merBörja här. Justera bläckpatronerna utan en dator. Svenska
Börja här Justera bläckpatronerna utan en dator Se till att du har följt instruktionerna på sidan Inställningar så att maskinvaran är installerad. Fortsätt med följande steg för att optimera utskriftskvaliteten.
Läs merKunskapscentrumcentrum för Äldres Säkerhet
Kunskapscentrumcentrum för Äldres Säkerhet Kravspecifikation Webbplatsen ska vara uppbyggd så att den följer riktlinjerna från World Web Consortium (W3W). Webbplatsen ska följa standarder för uppmärkningskod.
Läs merWorkshop PIM 2 - PowerPoint
Workshop PIM 2 - PowerPoint Varje ny sida i bildspelet kallas för en Bild. Foton och andra bilder som man lägger in kallas för Bildobjekt. All text skrivs i Textrutor. Växlingen från en bild till nästa
Läs merSkapa en rapport med snygg formatering, rubriker, sidnummer och innehållsförteckning
Skapa en rapport med snygg formatering, rubriker, sidnummer och sförteckning MS Office Word 2010 Precis som med målning och tapetsering blir jobbet med rapportskrivning både bra och roligt om man gjort
Läs mer