Egen E-handelssida

Att göra en egen e-handelslösning
Vi fick i uppgift att göra en egen e-handelslösning och själva välja en målgrupp.
Jag började att komma på massor av olika målgrupper och idéer som t.ex. hippies, båtfolk, partyfolk och hundägare mm.
Efter att ha trattat ner kom jag fram till att jag ville vända mig mot unga kvinnliga hundägare. Jag har använt mig utav e-handelsplattformen Wix.com igen då jag tyckte att den var väldigt smidig att jobba med. (Vi använde oss utav denna plattform i vårt förra e-handelsprojekt när vi gjorde ”Gammeldags”).

Målgruppsanpassning
Jag har anpassat min sida till min målgrupp genom att använda mycket småhundar i mina inspirationsbilder och i loggan osv. Jag har även använt mig av färgen rosa på knappar och även i loggan.
Jag har gjort dessa valen för att unga kvinnor gillar generellt sätt rosa väldigt mycket samt att de tycker om mindre hundar.
Jag har samtidigt försökt att ha en ganska ”clean” sida för övrigt.

Bildredigering
Jag har valt att redigera mina bilder i Photoshop. Jag har tagit bilder från nätet då jag inte har haft möjlighet att ta egna bilder. Detta på grund av att jag inte har någon tillgång till en hund samt tidsbrist.
Jag har redigerat samtliga produktbilder genom att frilägga dem och göra dem transparenta. Jag har även lagt till min logga nere i högra hörnet.
Produkt14 Produkt14
Produkt5Produkt5

Jag har även gjort så att alla mina produktbilder är 400 x 400 pixlar stora. Detta för att skapa en enhetlighet tillsammans.
De är enhetliga för de har samma storlek, samtliga bilderna är transparenta och de har alla loggan ”Hundra Saker” nere i högra hörnet.

Övriga bilder har jag också frilagt. De tre bilderna i mitt bildspel på framsidan har jag frilagt och sedan lagt på samma gråa bakgrund för att få en enhetlighet.
Hunden på loggan har jag också frilagt och sedan lagt till texten.
Hundbilderna inne på ”om oss” och ”kontakta oss” har jag också frilagt. Förutom bilden på de fyra hundarna, den har jag snott rakt av.

Här kan du se min e-handel ”Hundra Saker”.

Skärmklipp 2015-10-08 09.50.13

Interaktionsdesign, gränssnitt och redovisningar 2015-09-30

Redovisningar utav e-handel
På förmiddagen idag så fick alla grupper redovisa sina e-handelssidor.
Min grupp hade som sagt fått målgruppen ”pensionärer” och när vi startade detta projekt så började vi med att brainstorma idéer. Detta gjorde vi för att få ett stort urval och därefter komma fram till en bra idé efter att ha trattat ner idéerna.
Vi kom fram till att köra ett slags ”halv åtta hos mig”-koncept. Vi riktar oss till unga pensionärer. Fyra pensionärer som inte känner varandra sedan innan, ses under fyra dagar. Alla får vara värd en varsin kväll. Den kvällen som är deras värdkväll så får de hem en kock som hjälper och stöttar dem i matlagningen. Kocken tar även med sig maten så det enda de behöver tänka på är matlagningen och att ha trevligt.
När vi riktade oss till vår målgrupp på vår sida så tänkte vi på att minimera antal menyval, ha stora menyer samt ha stora och lättlästa texter.
För att underlätta ännu mer för dem så ville vi presentera våran affärsidé genom en film, se nedan.

Denna filmen gjorde vi för att äldre vill ha det lättare och tydligare. Och vad är tydligare än en film som visar hur det går till?

e-handele-handel2
Sidan ser lite annorlunda ut på en PC än på en mac. Fliken ”more” finns inte utan det är fyra huvudkategorier; Hem, Bilder, Om Oss och Kontakta Oss.

Min del i detta projekt
I detta projekt så försökte vi att alla skulle vara med på det mesta. Vi hjälpte varandra och bollade idéer samt försökte att alla skulle få känna på det mesta.
Men det jag gjorde var att tillsammans med de andra bestämma layout, färg och typsnitt mm.
Sedan gjorde jag loggan i photoshop. Jag klippte ut en klocka med hjälp av magnetlassot och sedan skrev jag in vårt namn.
Sedan har jag även filmat filmen och klippt ihop den i Imovie. Jag la sedan på ett lager som gjorde att man fick ett intryck att filmen var äldre. Jag gjorde den lite snabbare än vad den ursprungligen var för att få en liten touch av hur en äldre film är. Jag la även på en låt i bakgrunden som var i det äldre stuket.
Jag har även skrivit texten ”Om oss”.

Alternativ till Photoshop
Efter redovisningarna så presenterade Johan lite alternativ för oss till Photoshop.
Det finns då Pixlr som är ett bra gratisprogram som är liknande photoshop. Du hittar det här.

Det finns även en hemsida som heter pixelmator.com som är ett bra alternativ och det hittar du här.
Den kostar dock 289 kr, men har du väl betalat summan så har du tillgång till det sen. Det är alltså ingen månadskostnad.

Tips! Ett bra tips är att även lära sig Indesign. Det är bra att kunna ute på arbetsmarknaden. Det är många som har det som krav nu för tiden.

Interaktionsdesign
Om klick, attraktion och gamification
En förklaring utav interaktionsdesign:
Inter (mellan) aktion (handling) design (ge mening)
Det handlar om att få besökaren att se det vi vill och klicka där vi vill.

Interaktionserbjudande: En köpknapp, en knapp man trycker på som gör att det händer något.


Animali: Det som är annorlunda

Untitled-3
Man går alltid till skillnaden. Gör kontraster så attraherar knappen personen bakom datorn mer, och de vill då förmodligen klicka på knappen.
– fyra gråa fyrkanter, en är röd, vilken skulle du klicka på?
Förmodligen den röda, just för att den sticker ut.
Det som gör att en knapp kan sticka ut kan t.ex. vara:
  • Färg
  • Text
  • Bild
  • Form

Man behöver inte ha färg när man jobbar i form (stor – liten).


Gamification – Man använder element från spelens värld i en värld som inte är spelrelaterad.

Untitled-3
Denna typ av gamification är trygghetsskapande.
Den kan man använda i alla processer som går i steg. T.ex. när man ska gå igenom steg i t.ex. köpprocess, steg 3 av 4.
.
Ett annat exempel av gamification är:
Coca cola har en kod som är på insidan av korken, denna kod krävs för att kunna delta i en tävling. De får därmed fler kunder att köpa en flaska.

Gränssnitt
Placering av länkar och vad det är du placerar.
Övre vänstra hörnet på en datorskärm tittar man generellt först. Det har lite att göra med att man läser från vänster till höger.
– Det är inte exakt likadant vid olika målgrupper.
Dinkare till exempel tittar förmodligen i vänstra hörnet.
Beror på vanor och platser du brukar vara inne på. 
Den frågan vi behöver ställa oss när vi ska börja tänka på gränssnitt är:
Hur kommer min målgrupp att göra? Vad tittar hen på? 
– Detta måste vi tänka på när vi designar sidor. Så man vet vart man ska placera olika saker som länkar och bilder mm.
.
För att klicka på en länk så är det bra att göra kontraster, t.ex;
-svart/vitt
-stora/små bokstäver
-kantig/rund
-rörlig/stilla
-högt/lågt
-vertikal/horintsiell
-randigt/rutigt
-kort/långt
-ny/gammal
-nära/långt bort

Detta kan Attrahera oss att klicka på knappen.


Placering på Interface
En ”Okej-knapp” måste inte sitta längst ner till höger. bara man gör samma hela tiden. 

Då kan man lägga en ”Back”-knapp till vänster. Placeringarna på sådana sorters knappar är nästan alltid på samma ställe och då kan det vara bra att efterleva det så kunden känner sig trygg.


Vi fick i slutet av dagen en uppgift där vi skulle ta en bild som var sportig och placera en ”start”- och ”pause”-knapp samt en tillbaka- och fram-knapp.
Detta gjorde vi för att man ska få tänka på vart man placerar de olika knapparna och på så sätt visa att man har förstått det vi har gått igenom och pratat om.
 
Andra exempel på saker som får oss att reagera:
  • Rörelse/stilla (tio saker som står stilla utan en grej)
  • Stor/liten
  • Era exempel! (fet stil)
  • Anomalier = Det som skiljer ut sig

Vi fick sedan som uppgift att leta fram lite bilder som vi förknippar med vissa ord:

Hur ser tillit ut på en bild?

two-hands-trust-41676395

Hur ser ”lycka” ut på bild?
lycka1
Hur ser ”kvalitét” ut på bild?
oer_quality.jpg