Kom / It - Brugergrænseflader

Præsentationer af emnet: "Kom / It - Brugergrænseflader"— Præsentationens transcript:

1 Kom / It - Brugergrænseflader
Produkt; Opgave-uploader til et StudieWeb Gruppe; Steffen Stenbæk Andersen Daniel Blankensteiner Jakobsen Mathias Nobel Hadberg

2 Brainstorm Valgte; Opgave-uploader Opgave-upload til StudieWeb
Stylesheet grafisk editor Fælles internet-profil (fælles igennem browsere, til bogmærker osv.) Timeline-program MSI-Optimiser Trafik-Monitor (telefon, netværk, flatrate) Trafik-monitor (påkørsler, propper, osv. ) Valgte; Opgave-uploader

3 1 - Refinement

4 1 – Refinement - Table 1 – Refinement Opgave-uploader til StudieWeb
Brainstorm og skitser Grafisk produkt / HTML Gestalt lov: Loven om nærhed: Fil- og placeringsfeltet har en ens funktion, og ligger derved tæt på hinanden Loven om lukkethed: Historikken og upload-felterne ligger klart adskilt af en linje. Loven om lighed: 'gennemse' og 'andre' har en ens funktion, og ligner også hinanden. Loven om forbundethed: Fil-feltet og gennemse-knappen hører sammen og ligger derved også ved siden af hinanden.

5 1 – Refinement - Forklaring
Den originale idé var bare uploaderen, men allerede her kommer andre funktioner ind over. En log-in funktion, så siden selv kan opdage, hvem der uploader og så lægge filen ind det rigtige sted. Man kan også se en kort historik eller en mere avanceret historik af de uploadede opgaver.

6 2 - Restructure

7 2 – Restructure - Table 2 - Restructure Omstrukturering af funktioner
Skitser Grafisk produkt Gestalt lov: Loven om nærhed: Historik, både normal og advanceret, ligger op af hinanden. Loven om lukkethed: Upload- og historikdelene er klart opdelt af en streg der går igennem skitsen. Loven om forbundethed: Log-in funktionen vedrører både upload og historik, så den ligger imellem de to dele.

8 2 – Restructure - Forklaring
Her har vi omstrukturet siden, hovedsageligt grafisk. Der er flyttet rundt på nogle funktioner, og Historik-delen er flyttet sammen over på højre side. Log-ind spiller en rolle for både upload og historik, så den ligger i ingen-mands-land mellem de to. Der er kommet en hjælpe-funktion oppe i venstre hjørne.

9 Brugertest

10 3 - Extend

11 3 – Extend - Table 3 - Extend Farver Skitse Grafik produkt
Gestalt lov: Farvevalg: Nedtonede( lyse, meget lidt mættede) farver, for ikke at tage fokus fra sidens funktioner.

12 3 – Extend - Forklaring I dette skridt er selve layoutet og funktionerne urørt, men der er kommet 'farve' på, for at komme tættere på et færdigt produkt.

13 4a - Restructure 1. Del af processen

14 4b - Restructure 2. Del af processen

15 4 – Restructure - Table 4 – Restructure Digitaliseret produkt
Gestaltlove;

16 4 – Restructure - Forklaring
Her har vi lavet en digitaliseret version, dog uden farver. På selve siden kan man gennemse filer, men ikke uploade noget. Den er lavet af grafiske, ikke funktionelle, årsager.