Interface design

Uge 3

10 + 10 metoden

Til denne opgave har jeg valgt at lave et brugergrænseflade design til løbere som er igang med at løbe og vil have præsenteret data omkring deres løb

De ti første designudkast tager udgangspunkt i de mange forskellige måder jeg kan præsentere data'en på. Jeg har valgt at gå videre med udkast 2

10 første designudkast

Jeg har valgt at gå videre med udkast 3, da det er et minimalistisk design som ligger fokus på dataen. Ud fra udkast 3 har jeg valgt at designe brugergrænsefladen og bytte rundt på de forskellige komponenter i grænsefladen. Jeg har derfor valgt at gå videre med udkast 5.

10 alternative design til udkast 2

Årsagen til jeg har valgt udkast 5, er at brugergrænsefladen har stærkt fokus på sin pace (Jeg løber selv meget, og mener det er den vigtigste løbedata jeg kan blive præsenteret for). Derudover kan jeg godt lide den minimalistiske måde at præsentere dataen på. Der er ingen unødvendig styling, samt kun knapper vist som man har behov for under sin løbetur. Når jeg er ude og løbe har jeg ikke behov eller lyst til at lede efter data'en på skærmen, den skal blot præsenteret på en simpel måde og hvor jeg hurtig kan få et overblik over min løbetur.

Københavns lufthavn kuffert tracker

Denne app skal vise dig hvilken bånd kufferten kan findes på, og hvornår den ankommer på båndet, så du i mellemtiden kan bruge tiden på andet.

Målgruppe:Rejsende med meget baggage

Features

  • Vis hvor lang tid der er tilbage til kuffert ankommer
  • Vis hvilket bånd kufferten ankommer på
  • Rapportér ind hvis kuffert ikke er ankommet
  • Modtag notifikation når kufferten ankommer

Ud fra de features har jeg lavet følgende design

Baggage tracker koncept

Uge 4

Opgave 1 - Gestaltlove og Designprincipper

Jeg har valgt at bruge Fedex logo til at beskrive og vise Gestaltlovene brugt.

Fedex's logo gør brug af gestaltloven omkring figure/ground, hvor i logoet bruger de pladsen imellem bogstaverne d og e til at lave en pil som symboliserer fart og hurtighed. Derudover gør logoet også brug af princippet om 'similarity'. Da fedex er et sammensat ord af 'Federal Express', og ved at inddele Fed i lilla og ex i orange, får man et indtryk af at det er 2 ord i stedet for et.

Brug af Similarity og Promixity.

Jeg har lavet en wireframe over hvordan de fleste webshops /e-commerce sider gør brug af proximity og similarity til at opdele produkter der er ens og er i samme kategori.

Hver række gør brug af proximity princippet, ved at de er blevet inddelt i hvide bokse som symbolisere de alle er ens. Derudover opfylder boksene inde i rækkerne 'similarity' princippet, da de har samme farve, størrelse, og rotation så man for fornemmelsen af de er ens.

Emotionel design - Nemlig.com

Jeg har valgt at tage udgangspunkt i nemlig.com egen hjemmeside

Visceral design

Nemlig.com har designet deres forside med stærk forkus på det visceral design. Med deres minimalistiske og rene design hvor hvid, sort og orange er de gennemgående farver ud over billederne. De fremstår som en professionel virksomhed, hvor der er fokus på kvalitet og service. Netto derimod har gul og sort som gennemgående farvetema der gør de signalere tilbud og discount. Derudover fremstår nemlig.coms hjemmeside også professionelt, da man nemt og hurtigt kan danne sig et overblik over hvilken kategorier der eksisterer, samt denne lille boks der vises og spørg efter mit postnr, for at se om de kan levere til min dør. Derudover er der billeder midt på forsiden som appellere til hr og fru danmark, som gerne vil igang med at bage, eller som skal til at pynte op til halloween.

Behavioral design

Nemlig.com har også brugt mange resurser på behavioral design, da de har fokus på at kunderne har en god oplevelse når de handler online på hjemmesiden. Derfor har de tilføjet mange animationer som understøtter brugerens handling og giver hjemmesiden liv og energi. Hjemmesiden loader hurtig, så kunden ikke skal sidde og vente på produkterne bliver loadet. Hver gang du tilføjer et produkt til kurven, har du mulighed for at vælge hvor styk vil du bestille. Du har konstant et overblik over hvor meget du har købt for. Alt sammen punkter som gør det super nemt, hurtigt og simpelt at handle på hjemmesiden.

Reflective design

For at kunne opbygge et langvarigt forhold til kunden, har nemlig.com introduceret 'måltidskassen', som ikke nok med at det er super nemt at handle og benytte deres hjemmeside, de har også valgt hvilken aftensmad du skal have i x antal dage. så behøver du ikke at tænke over det. Samtidig tilbyder de også mange forskellige opskrifter, som også hjælper familier i en travl hverdag, med nemt at beslutte hvad de skal have at spise til aftensmad. Derudover snakker de også til ens dovenskab, ved at gøre opmærksom på at de nok skal levere alle de tunge varer lige til din hoveddør, så du ikke behøver at bære på flere kilo sodavand og mad, og samtidig bruge tid på indkøb når du kunne have brugt det på familien i stedet for.

Forslag til forbedring af emotionel design

Maskot
Netto har en hund som maskot, derfor vil jeg mene nemlig.com også kunne få en maskot som de kan bruge som en gennemgående figur på alle deres side, som kan hjælpe kunden med at fx. shoppe eller vælge den korrekt ret.

Gamification
Man kunne give kunden nogle point for hver vare de har bestilt, på samme måde som når man flyver. Når kunden så har optjekt x antal point, kan de få en vare gratis.

Klog hjælper
Hvis hjemmesiden kunne komme med forslag til nogle produkter som de mener kunden vil få gavn af at prøve eller købe på baggrund af tidligere ordre og hvad de ellers kan lide at spise og drikke.

Uge 5

Opgave 1 og 2 (farvelære)

Nemlig.com gør brug af mørk orange, gul og en mørkegrøn på deres hjemmeside. Den mørke orange farve er en tertiær på farvehjulet. Gule farve er en primær farve på farvehjulet. Den mørkegrønne farve er en sekundær farve på farvehjulet.
Jeg vil mene nemlig.com gør brug af analogous farveskema på deres hjemmeside, selvom farve ikke ligger helt ved siden af hinanden på farvehjulet, så er alle farverne stadig fra det samme område af farvehjulet

Fedex's logo gør brug af gestaltloven omkring figure/ground, hvor i logoet bruger de pladsen imellem bogstaverne d og e til at lave en pil som symboliserer fart og hurtighed. Derudover gør logoet også brug af princippet om 'similarity'. Da fedex er et sammensat ord af 'Federal Express', og ved at inddele Fed i lilla og ex i orange, får man et indtryk af at det er 2 ord i stedet for et.

Brug af Similarity og Promixity.

Jeg har lavet en wireframe over hvordan de fleste webshops /e-commerce sider gør brug af proximity og similarity til at opdele produkter der er ens og er i samme kategori.

Hver række gør brug af proximity princippet, ved at de er blevet inddelt i hvide bokse som symbolisere de alle er ens. Derudover opfylder boksene inde i rækkerne 'similarity' princippet, da de har samme farve, størrelse, og rotation så man for fornemmelsen af de er ens.

Opgave 3 (Typografi)

Jeg har valgt at lave en poster version omkring det første citat "less is more".

Jeg har valgt at bruge 'Roboto' fonten som er en Grotesk font. Jeg har valgt denne font, da Grotesk fonte er beregnet til at vise tekst på web, og samtidig har grotesk fonte ikke fødder på hver bogstav, eller vilde kurver, som gør det til en simpel font som passer godt ind under citatet 'less is more'. Jeg har placeret teksten i midten med farven sort og en hvid baggrund, så de 2 farver står i stærk kontrast til hinanden. Ved kun at bruge disse 2 farver bliver budskabet omkring 'less is more' forstærket.