Några exempel. Principer för design. Vilka problem medför den här designen? Vilken av följande placeringar av piltangenterna är bäst?



Relevanta dokument
De fem gyllene reglerna. Analys. Engagera dina användare. Känn dina användare. Lär av andra. Testa och korrigera designen

Forord 7 Milgrupper 8 Terminologi 8 Webbplats 9 Lasare som bidragit 9 Forord till svensk upplaga 10

Internetpolicy Styrdokument för Klevbergets Samfälligheter på Internet

Berättelser Scenarios Presentationer Skisser Formella modeller Mjukvaruprototyper Kartong modeller etc.

Slutrapport: Design av Hemsida för PolyPlast+

Vad påverkar designen?

Gör en egen webbplats

SMD084 lp människa/datorinteraktion. Del II Programmeringens matematiska grunder. Del I - Lektionsplanering. Del II Lektionsplanering

PROJEKT: WEBB- OCH INFORMATIONSDESIGN Avvägningar och motiveringar vid gränssnittsdesign av webbsida för PolyPlast+



Föreläsning 9: Gränssnitt och webbdesign

Tillämpad programmering CASE 1: HTML. Ditt namn

Guide för Mobil Site

TENTAPLUGG.NU AV STUDENTER FÖR STUDENTER. Datum. Kursexaminator. Betygsgränser. Tentamenspoäng. Övrig kommentar

Kursplan Gränssnittsdesign, 100p Läsår

Gör en egen webbplats


Mattekungen åk 6-9 vers. 1.0

PP7Mobile User s Guide

Sovra i materialet. Vad är viktigt? Vad kan tas bort? Korta ner långa texter.

Lathund och inspiration. Så utformar du din föreningssida på celiaki.se

Bruksanvisning KABA MAS AUDITCON KABA MAS HAMILTON Modell 100, 200, 400, 50 och 52

Snabbguide: Hur man öppnar en egen nätbutik

DELTA I VIDEOMÖTE FÖR DEJ SOM INTE HAR SKYPE FÖR FÖRETAG INSTALLERAD SAMORDNAD VÅRD- OCH OMSORGSPLANERING

Delta i Skype-möte UTAN Skype för företag installerad Gemensam IT samordningsfunktion 49 kommuner i Västra Götaland och Västra Götalandsregionen

Bruksanvisning för. Triplog AlcoTrue. Alkomätare. For everyone s. safety

Skärmförstoring Öka och minska förstoringen Kontrollera aktuell läsposition Färgläge Kontrastjustering...

2 SPD - ett realtidsystem för distansundervisning

Föreläsning 10: Gränssnitt och webbdesign

Till närstående som ska vara med vid samordnad vård- och omsorgsplanering via video eller telefon

Webbdesign. Fotografiska vann bästa webbsite 2015 i kategorin turism:

Varför behöver vi förstå programmering? Se video

1

DELTA I VIDEOMÖTE FÖR DEJ SOM INTE HAR SKYPE FÖR FÖRETAG INSTALLERAD SAMORDNAD VÅRD- OCH OMSORGSPLANERING

IT för personligt arbete F4 Utvärdering, rapportering och presentation 7 februari Eva R Fåhræus

Användarguide itslearning

Timo Tidtavla Marcus Reldin Industridesign 2007

Pagineringsgadget Ordlista Scen Spellista Slide Mall Innehållselement Gadget... 27

[Innehåll] Sida 2, Sida 3 - Persona Sida 4, Sida 5 - Persona Walk-Through Sida 6 - Reflektioner

Nero AG Nero DiscCopy

Användarhandledning Nordea Swish Företag Admin

MOTTAGARE AV VIDEOMÖTE FÖR DE SOM INTE HAR MICROSOFT LYNC INSTALLERAT SAMORDNAD VÅRD- OCH OMSORGSPLANERING

Prototyper och användartest

Bruksanvisning. Applikationsplats

Utvärdering av prototyp: Frågedatabas av Mårten Cronander. Innehållsförteckning

Kundhandledning för EBIS. E-space Business Intelligence System. Version

Flexiboard. Lathund kring hur du kommer igång med att skapa egna överlägg till Flexiboard. Habilitering & Hjälpmedel

Prototyping. Planera och genomföra webbproduktionsprojekt. Innehåll. Fördelarna med Pappersprototyper. Lofi-prototyp. Prototyping

Idag. Prototyper och användbarhetsutvärdering. Vad prototyper prototypar. Olika sorters prototyper. Del 2 Prototyper Utvärdering Analytisk Empirisk

Föreläsning 7: Kognition & perception

Kursplan Gränssnittsdesign och Webbutveckling 1 Vårtermin 2014

Användbar webbdesign.

BRUKSANVISNING. DENVER MPG-4054 NR Mediaspelare

Välkommen till Studiekanalen.se

SWE. Radiokontrollerad projektorklocka Modell: EW96 ANVÄNDARMANUAL INNEHÅLL

Bakgrund och Affärsidé

INDIVIDUELL INLÄMNINGSUPPGIFT

QR-koder inom detaljhandel

Snabbguide för användare SourceTech Telllus

Så gör Vägledningen 24-timmarswebben dig till en bättre beställare. Funda Denizhan, Statskontoret Kommits 17 november, 2005

DESIGNDOKUMENT 1(8) 1. Idé & koncept. Grundidé, syfte & innehåll. Målgrupp, koncept & sammanhang

Till närstående som ska vara med vid samordnad vård- och omsorgsplanering via video eller telefon

Internet A. HTML Grunder Maximilien Chiang 1

KOM IGÅNG MED DIN E-HANDEL! LATHUND 1.2

APA för nybörjare. Innan du börjar. Översikt

206 Finaluppgifter för produktion av webbsidor

Struktur & Layout med CSS

Slutrapport Uppdrag 1 Introduktion till UX-produktion. Johanna Lundberg Finnsson HT2016

Copy Cat Laboration 4

Till närstående som ska vara med på planeringsmöte inför utskrivning via video eller telefon

Övning 2. onsdag 21 mars 12

Konstruktion av en radiostyrd legobil. Digitala projekt av Arbon Vata Leonardo Vukmanovic Amid Bhatia

Nämnden för elektronisk förvaltning

Principer för interaktionsdesign

Digitalt lärande och programmering i klassrummet

Introduktion till Adobe Acrobat Connect Pro

Snabbguide: Hur man öppnar en egen nätbutik

Informationsarkitektur - att planera en webbplats

Teman för föreläsningen. Gestaltlagarna Layout Typografi

3 Skadliga program 26 Virus... Förord...3 Lättläst it...7 Bokens uppbyggnad och nivåer...8 Bokens innehåll på olika nivåer...9

Manual till publiceringsverktyg

Hur du gör ditt Gilles hemsida - en liten hjälp på vägen

Introduktion till MySQL

Genom att använda vår webbplats godkänner du att din personliga information behandlas i enlighet med denna integritetspolicy

Användarhandledning. Kommers Annons Leverantörer. Användarhandledning Kommers Annons Leverantörer

GRÄNSSNITTSDESIGN. Ämnets syfte. Kurser i ämnet

Snabbguide. Vill du öppna din egen nätbutik? Nu är det enklare än någonsin. Följ stegen i den här snabbguiden så är du redo att öppna dörrarna.

Hur man använder webbplatsen

Välkommen till Tech Pubs On-Line CD

Kursplan Webbutveckling 2, 100p Läsår

Utdrag av bilagor till rapporten Genomlysning av webbinfo om psykisk ohälsa för barn och unga för projektet Psynk i november 2014

Kommunikationsorienterad. visuell design

ReKo Sjuhärads webbplats -

Starta din försäljning med hjälp av sociala medier

Rekommendation om användande av cookies och jämförliga tekniker

Projektet. TNMK30 - Elektronisk publicering

E T T P R O G R A M F Ö R E F F E K T I VA R E K Y R K O G Å R D S A D M I N I S T R AT I O N

Högskolan i Borås HT10 Webbredaktörsprogrammet distans Formgivning av webbsidor. Projektarbete Solveig Betnér

Transkript:

Några exempel Principer för design Hur många kan ställa in klockan på sin video utan manual? Hur ofta vrider man på fel platta på spisen eller glömmer vrida av den när man är klar? Hur ofta knuffar man i en dörr som man egentligen ska dra i och tvärtom? Hur ofta väljer man fel funktion i ett program? Vilka problem medför den här designen? Vilken av följande placeringar av piltangenterna är bäst? Problem Användaren försöker utföra något som inte är vad han/hon egentligen hade tänkt göra. Användaren hittar inte rätt funktion p.g.a. t.ex. otydliga symboler. Användaren vet inte hur han/hon ska utföra uppgiften. Felaktig eller vilseledande feedback. Tumregler för design av webbsidor Tydliga vägvisare från förstasidorna till viktiga funktioner. Tydliga vägar för olika målgrupper. Utforma förstasidan i första hand för den viktigaste målgruppen. Optimera följden av sidor. Så få sidor som möjligt för varje uppgift.

Fler tumregler Gör en huvudsida med de viktigaste upplysningarna om varje datatyp. Använd fliksidor eller länkar för att fördela stora mängder information. Sträva efter enhetlighet. Prototyper Två huvudformer: Pappersprototyper. Elektroniska prototyper. Syften: Engagera användare. Komplettera kravspecifikationen. Åskådliggöra designidéer. Pappersprototyper Pappersprototyp Skisser på vanliga papper. Simuleras med hjälp av en människa. Använd schabloner. (Kopiera upp/skriv ut flera.) Fördelar med pappersprototyper Användare och utvecklare är likställda. Snabbt producerade. Ingen finputsning av detaljer. Lättare att kassera än elektroniska. Inga haverier. Fördelar med elektroniska prototyper Återanvändning möjlig. Användaren uppmuntras att experimentera. Test av fysisk användning. Estetisk värdering möjlig. Fungerar korrekt. Gör det troligt att designen kan förverkligas.

Dialogstandard Fördelar med dialogstandard En samling regler för hur ett gränssnitt ska byggas upp. Berör exempelvis utformning av knappar, användning av färger m.m. Syftet är att skapa ett enhetligt gränssnitt. Enhetlighet skapar trygghet. Inlärningstiden förkortas. Ger ett intryck av kvalitet. Principer för en begriplig design Sätt användaren i centrum. Synliggör användarens möjligheter. Tala om vad som händer. Var hjälpsam om det uppstår problem. Sätt användaren i centrum Webbplatsen ska vara ett bra verktyg inte ett självändamål. Användare är oftast inte speciellt intresserade av att läsa reklam Självförhärligande ( Om oss placeras diskret sist) Användare vill ha: Sökmekanism Sakliga varubeskrivningar (gärna med foto) Priser (inkl. omkostnader) Upplysning om huruvida varan finns i lager Beställning av varor. Hänvisningar till/jämförelser med konkurrenter. Synliggör användarens möjligheter Korta, lättbegripliga instruktioner. Förklara koder. Förse knappar och länkar med lättbegripliga texter. Innehållsförteckning. Tillhandahåll en god sökfunktion. Logisk och enhetlig utformning.

Tala om vad som händer Felmeddelanden Reaktioner (meddelanden) som svar på det användaren gör. Meddelande om väntetid. Indikation om var man befinner sig. Upplysning om hur långt man kommit i en uppgift. Upplysningar om hur personlig information kommer att användas. Ett felmeddelande ska vara: Begripligt Konstruktivt Precist Tydligt Hövligt Defensivt Kategorier av meddelanden Handlingsmeddelande Varning Information Grafik Lång nerladdningstid. Användare blir otåliga efter 5-10 sekunder. Inget samband mellan snygg grafik och användbarhet. Enhetligt design har stor betydelse. Ur användarens synvinkel Nyttig grafik: Information Relevanta bilder av t.ex. Produkter eller kartor. Onödig eller irriterande grafik Utsmyckning Företagslogotyper Annonser

Bilder Relevanta och förnuftiga. Snabba att överföra. Enhetliga i stil och storlek. Begripliga. Undvik ikoner som måste förklaras. Reklam Låt inte reklamen ta en massa tid att ladda ner. Undvik reklam med falska knappar o.dyl. Vissa webbplatser har reklam som största inkomstkälla. Animering Gestaltlagarna (igen) Distraherande. Förslag: Stoppa animeringar efter 10 sekunder. Använd animeringar för att indikera att datorn arbetar (t.ex. vid nerladdning). problem. Kontrast Får inte gå att förbise. Undvik översignalering. Kontrastparametrar: Form Storlek Färg Placering Orientering Rörelse

Hjälp Länk till hjälp, väl synlig och lätt tillgänglig. Index. Instruktion, text, introduktion. Översikt över användaruppgifter. Översikt över vanliga problem, FAC.