Workshop II (1IK419) jp222px (Johnny Pesola) sid. 1 av 5

Relevanta dokument
Symmetry: Bortsett från menyn har innehållet av sidan viss symmetri när det kommer till videoklippen som är upplagda på sidan.

Workshop I (1IK419) jp222px (Johnny Pesola) sid. 1 av 10

Sidan har lite problem med Sequenciality ifall man har för mycket text i en ruta

Kom igång. Readyonet Lathund för enkelt admin. Logga in Skriv in adressen till din webbsida följt av /login. Exempel:

Grundläggande funktioner i CMS ifrån Argonova Systems, 2011.

Grafiska riktlinjer för e-tjänster. Enligt stadens nya grafiska profil

Utbildning 1 Magento Webshop

Manual till publiceringsverktyg

Introduktionsmanual till Design- / Utvecklarmodulen

Instruktioner. Innehåll: 1. Vad är Kimsoft Control (SIDA 2) 3. Hem (SIDA 2)

ALEPH ver. 16 Introduktion

3. Skapa sida 5. Hitta innehåll 6. Meny 7. Användare

Checklista Mobila applikationer fo r bank och betalning

Nyheterna i Visma Tendsign 4.0

LATHUND TILL GOOGLE SITES

Manual E-butiken Innehåll:

LATHUND INNEHÅLL Inloggningslänk, Panelen Wordpress, Sidor, Nyheter Föreningssidor Bulletinen Licensierade företag Slider Formulär Menyn

Bild 1. EPiServer CMS 9.9

Med nedanstående anvisningar kan man mycket snabbt skapa upp en cup med bibehållna inställningar från tidigare gjorda cuper.

Publicera material i Learn

Manual HSB Webb brf

[ANVÄNDARMANUAL MYCLUB LAGSIDE-ADMINISTRATION]

Logga in till EPiSERVER

När appen startar så gör den det på en särskild sida som du bestämt ska vara Hem-sida. Du kan ändra det under Inställningar och Spara sida som Hem.

Välj bloggen som du använder i skolan, i detta fallet heter den Min Skolblogg.

Manual. Registrera i Kvalitetsregister PsykosR

LATHUND PA-WEBBEN HANDLÄGGNING AV KOMPETENSÄRENDE. Version Sida 1 av 5

Kom igång med Smart Bokföring

Kom igång och redigera din hemsida!

Anna Jonströmer. Bloggning

Manual för. 2.4 KALAS Sitemanager

Joomla CMS Del 2 av 2

Lathund Google Kalender (i webbläsare)

Verktyget är begränsat till Microsoft Internet Explorer v 7.0 och uppåt

Kom igång och redigera din hemsida!

Kom igång guide: Så här skapar du din första grupp. Vill du gå med i skolans LoopMe-organisation och skapa en egen grupp? Läs denna guide!

Manual dinumero Webb

Användarmanual KTC MeView Lägenhetsinnehavare. Revision 3.0. Användarmanual KTC MeView. Lägenhetsinnehavare. Sida 1

1 Starta Internet Explorer och surfa till Ange användarnamn och lösenord för att logga in i bokningssystemet.

Confidence ticket 1.2

Storleksförändra figurer och bildobjekt - Word 2007 / 2010

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

Lathund för redigering av Falkenbergs gymnasieskolas hemsidor

Nya funktioner i InPrint 3

Nya funktioner i EPI6 Bilder hantering för nyheter

Ansökan & anmälan om kvotplikt. En lathund om hur du ansöker och anmäler kvotplikt via Eugén

Detta dokument presenterar publiceringsverktyget EPiServer CMS. Exempelvis grundläggande funktioner och navigering.

Release 14.3 kommer finnas tillgänglig för er måndagen den 29 september 2014.

Grafisk profil för digitala gränssnitt MAJ 2019

NYA PLANERA & KALENDERN SÅ FUNKAR DE. Länk: (använd din galento-login) Feedback:

Copy Cat Laboration 4

Lathund för att publicera på SAKs webbplats för användare i lokalföreningar.

Manual. Att skapa lokala Facebooksidor

Info från Express - så visas det på bjurfors.se

6. BLOGGVERKTYG. Här ska vi titta på några olika bloggverktyg som du kan använda för att komma igång med att börja blogga.

Användarmanual Allmän REQS 7

Kommentar [k1]: Behöver vi kommentera det som finns till höger ovanför schematyp?

SMS Service. Inställningar

Diabetes.se CMS guide för föreningar. Senast uppdaterad:

Guide till att använda Audacity för uttalsövningar

Användarmanual KTC MeView Lägenhetsinnehavare. Revision 4.0. Användarmanual KTC MeView. Lägenhetsinnehavare. Sida 1

Word bengt hedlund

ShowYourPics. Kom igång guide Alpha True Fiction P roduction AB Sveavägen 98, Stockholm info@truefiction.se

LATHUND FÖR PREZI. Sofia Bandelin Digital kompetens och lärande UMU Maj Uppgift IIP3.2 Att lära ut program

Manual för Juseks aktivitetsadministrationssystem

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

Ehandelslösningars komma igång tips!

Nyheter i IA-systemet

1. Börja med att logga in på CoopEgenkontroll ( med dina ordinarie inloggningsuppgifter.

PRO Järbo Navigeringsguide

Copyright Tervix AB All rights reserved.

FaktApp. Mobilapplikation för fakturering. Resultat Finans AB

Lathund steg för steg

Ny startsida i Marknadsplatsen

Workshop PIM 2 - PowerPoint

Webzoo AB har idag ett tiotal anställda. Webzoo AB ägs till 100 % av anställda inom företaget och har en sund ekonomisk grund som bas.

Formativ utvärdering 5C1106 Tillämpad fysik, mekanik

Lärarhandledning del 2a Högstadiet och gymnasiet. Dela och jämför lösningar

12 Webb och kurshemsidor

INNEHÅLL. INNEHÅLL 30 juni Administrera din butik 2. 2 Lägg in dina första varor och artiklar 4. 3 Butiksinställningar 8

[ANVÄNDARMANUAL MYCLUB LAGSIDE-ADMINISTRATION]

Projektspecifikation för Cv på webben

Från Smart TV till Smartare upplevelse Av: Kim Huber och Connie Huanca

Inloggning 2 Var och hur loggar man in hemifrån?... 2 Hur skapar man engångskoder och ändrar användarnamn?... 2

Manual för Typo3 version 4.2

1 Söka en enstaka tid som inloggad användare

Botkyrka kommuns system för lokalbokning föreningsbidrag förenings- och anläggningsregister

Användarmanual TextAppen för iphone och ipad

Responsiv webbplats. Tips på hur innehållet ska ses över för en bra användarupplevelse på alla skärmstorlekar

Photoscape (

Länk till modulen Skapa Filarkiv

Kylmas lätta guider Till PlantWatch PRO3

Lägga till bild i e- handeln

IFK Viksjö. Manual MyClub. En guide för användandet av MyClub. Jamil Yousef

I.site Webbsidesverktyg handledning

Komma igång med MLTs Mobildata app.

1. Basics. Introduktion 3 Vanliga uttryck 3 Logga in 3 Användarinställningar 4 Fältbeskrivning Sidhantering

Användarhandbok. version sida 1 av 15

Att arbeta med. Müfit Kiper

LÄRARHANDLEDNING TILLGÄNGLIGA WEBBSIDOR

Transkript:

Workshop II (1IK419) jp222px (Johnny Pesola) sid. 1 av 5 Steg 1.1 Sammanfattningen av diskussionen är att strukturen på en sida bör vara till största del i balans, symmetrisk, reguljär, förutsägbar och enkel för läsbarhetens skull. Men att det behövs något instabilt, irreguljärt och spontant som krydda när allt blir lite för tråkigt. Steg 1.2 Överordnad struktur analys av eget gränssnitt Menyn är jämfört med sidan innehåll assymetrisk. Innehållet är till största del symmetrisk med inslag av assymentriska/ irregulära och några små spontana element. Som till exempel valideringsnotifikationerna när man i formulär redigerar eller skapar nya objekt. Sök och skapa formulären är väldigt spontana jämfört med resterande delar av sidan. Strukturen kan vara något förvirrande, eftersom den varierar så grovt emellan just sök/skapa formulären och resterande delar av gränssnittet. Men detta skapar samtidigt spänning. Kanske kan strukturen göras mer lik resterande delar av sidan i dessa formulär.

Workshop II (1IK419) jp222px (Johnny Pesola) sid. 2 av 5 Steg 1.3 Överordnad struktur analys av andras gränssnitt Det upplevdes förvirrande med PLUSSET / Lägg till funktionalitet på två olika ställen med olika gränssnitt. Menyn jämfört med innehållet är assymetrisk, lika så med placering av undermenyer i förhållande till huvudmenyer. Detta kan göras mer symmetriskt. Sidinnehållet kan vara centrerat istället för vänstersällt. Antalet huvudmenyer kan begränsas i antal om man väljer att lägga vissa huvudmenyer som undermenyer i andra huvudmenyer. Steg 2.1 Detaljer analys av FUNKTIONELLA detaljer i eget gränssnitt I sök och skapa formulären så kan de klickbara rutorna ersättas med en select/dropdown istället. Det är rörigt och något svårtläst på det sätt som det är nu. På listsidorna så kan kugghjulet vara något förvirrande. Kanske skulle detta kunna göras till en select/dropdown istället för att förtydliga, dock skulle det inte vara lika estetiskt tilltalande som det är nu. Ett annat alternativ vore att lägga ut knapparna direkt i tabellen som en egen cell, men detta skulle stjäla värdefull bredd i tabellen och i framtiden så skulle det säkerligen komma till fler knappar som tar upp ytterligare utrymme.

Workshop II (1IK419) jp222px (Johnny Pesola) sid. 3 av 5 Steg 2.2 Detaljer analys av FUNKTIONELLA detaljer i andras gränssnitt Till och med datum är inte ett datum typ fält i sök-formuläret Fälten gällande datum är inte datumfält i skapa-formuläret. Flytta sökfunktionalitet ifrån huvudmenyn till undermenyer eller sidor istället. Steg 3.1 Detaljer analys av ESTETISKA detaljer i eget gränssnitt Val av färger känns till största del bra. Mycket svar vitt och ljusgrått och några starka färger för att belysa funktionalitet eller viktig information. När det gäller tydlighet finns förbättringar att göra för de klickbara ikonerna i sidhuvudet för sidinnehållet. Att när man klickat på den sådan så ska ikonen bli markerad, så att man förstår att man befinner sig på dessa sidor. Kanske markeras detta med den orangegula färgen som används på andra delar av sidan för att markera detta. En annan sak som är otydlig är när man befinner sig i formulären för att skapa saker, eller söka efter saker och ska avbryta detta. Krysset gömmer sig i samma knapp som får upp själva formuläret från början, vilket inte är så lätt att uppmärksamma.

Workshop II (1IK419) jp222px (Johnny Pesola) sid. 4 av 5 Steg 3.2 Detaljer analys av ESTETISKA detaljer i andras gränssnitt Logga ut knappen är otydlig. Skulle vara bättre med en siluett av en gubbe istället. De små ikonerna när man klickar på kugghjulet samt ikonerna i sidhuvudet för sidinnehållet är otydliga. Hover text eller title attribut kanske skulle förtydliga på dessa för att visa text om vad knapparna faktiskt gör. Sidinnehållet är inte enhetligt vad det gäller centrerad eller vänsterjusterad innehåll. Skulle eventuellt vara bättre att centrera huvudmenyer, undermenyer och sidinnehållet. En ny huvudmeny för rapporter, statistik. När man klicka på kugghjulsmenyn så finns det en liten pil till vänster om menyn som dyker upp. Denna är förvirrande och kan tas bort. Knappar på olika delar av sidan har olika storlek. Kanske skulle de anpassas till att ha samma storlek för en mer enhetlig upplevelse. Steg 4.2 Användbarhet analys av eget gränssnitt Det största problemet användarbarhetsmässigt enligt mig själv är de två stora svarta formulären för att söka efter och för att skapa information. Dessa går emot hela sidans upplägg och kan visst till vis del uppfattas som roliga att använda men är väldigt otydliga och skapar förvirring i förhållande till resten av sidans utformning. Bättre vore att istället skapa en dropdown menyer under sök och skapa ikonerna ikonen i huvudmenyn där man får ange vilken typ av objekt det gäller, för att sedan länka till en skapa sida för just den typen av objekt. På detta sätt blir det mer enhetligt, samt att användaren slipper hålla reda på två separata formulär för att skapa objekt. Steg 4.3 Användbarhet analys av andras gränssnitt Flytta användarhuvudmenyn som en undermeny till den nya logga ut ikonen, vilket man gör till en dropdown meny. Där finns det även en undermeny för användarspecifika inställningar, samt en logga ut undermeny. Försöka banta ner antalet huvudmenyer så att användare inte känner sig besvärade av det nuvarande antalet. Skapa knappar i sidinnehållet sidhuvud för sökfunktionalitetet istället för sidhuvudet.

Workshop II (1IK419) jp222px (Johnny Pesola) sid. 5 av 5 Reflektion Under processen med checklistor så fick jag förslag på struktur, andra typer av element som lämpar sig bättre för mitt gränssnitt samt formgivning på ett sätt som jag inte skulle komma på själv. Mest förändringar ligger i själva strukturen, antagligen för det är så pass mycket information som det slutgiltiga gränssnittet ska presentera för användaren, utan att det ska kännas som att det blir för mycket. Personligen tycker jag också att checklistorna för struktur och användarbarhet gav mig mest bra feedback för förändringar. Som ett helt paket så täckte checklistorna upp genomgången av gränssnittet ganska bra, dock var det lätt att komma på nya strukturmässiga förändringar i de andra stegen i efterhand som man hade missat att ta upp före. Men det får man ju se som en del i processen för en bättre slutstruktur. Vi hade nog kunnat prata på flera timmar om förbättringar i varandras gränssnitt för att få finslipade slutprodukter, men tiden räckte inte riktigt till. Kanske skulle ett extra steg som går igenom val av språk eller text komplettera de andra stegen på ett bra sätt eftersom de andra stegen till största del fokuserar på färg, form och layout. Denna arbetsmetod ger en kontrollerad form av feedback till ens gränssnitt utan att fokusera alldeles för mycket på en specifik detalj. Därför så tycker jag att man får en bred täckningsgrad på förbättringar som man kan välja att genomföra. Många av de förslag på förändringar var så pass bra att jag idag har genomfört dessa.